Commit 1fe18123 by jml0128

feat:bi分页

1 parent 13215129
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
{
"name": "xrk-bi",
"version": "0.1.11",
"version": "0.1.16",
"description": "xrk-bi",
"author": "xrk",
"main": "dist/bundler.js",
......@@ -21,6 +21,7 @@
"dependencies": {
"echarts": "^5.1.2",
"element-ui": "^2.15.2",
"html2canvas": "^1.1.4",
"swiper": "^6.7.0",
"uuid": "^8.3.2",
"vue": "^2.5.11",
......@@ -49,6 +50,7 @@
"node-sass": "^4.0.0",
"prettier": "^1.19.1",
"sass-loader": "^7.3.1",
"style-loader": "^2.0.0",
"url-loader": "^1.0.1",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
......
......@@ -8,7 +8,7 @@ const grid = {
left: 10,
right: 15,
bottom: 10,
top: 15
top: 30
};
export const createBar = (Vue, chartData, axisData, yAxisUnit, colors = []) => {
const _axisData = dealString(axisData);
......@@ -19,7 +19,7 @@ export const createBar = (Vue, chartData, axisData, yAxisUnit, colors = []) => {
type: 'category',
data: _axisData,
axisLabel: {
interval: getInterval(axisData),
// interval: getInterval(axisData),
color: '#A8B0BF',
fontSize: 12,
formatter: function(params) {
......@@ -34,6 +34,7 @@ export const createBar = (Vue, chartData, axisData, yAxisUnit, colors = []) => {
axisTick: { show: false }
},
yAxis: {
minInterval: 1,
splitNumber: 3,
axisLabel: {
formatter: '{value}' + (yAxisUnit || ''),
......@@ -82,6 +83,7 @@ export const createBarTransverse = (
animation: false,
grid: grid,
xAxis: {
minInterval: 1,
splitNumber: 3,
axisLabel: {
formatter: '{value}' + (yAxisUnit || ''),
......@@ -96,7 +98,7 @@ export const createBarTransverse = (
}
},
yAxis: {
interval: getInterval(_axisData),
// interval: getInterval(_axisData),
type: 'category',
data: _axisData,
axisLabel: {
......@@ -160,7 +162,7 @@ export const createBarMultiple = (
type: 'category',
data: _axisData,
axisLabel: {
interval: getInterval(_axisData),
// interval: getInterval(_axisData),
color: '#A8B0BF',
fontSize: 12,
formatter: function(params) {
......@@ -180,6 +182,7 @@ export const createBarMultiple = (
axisTick: { show: false }
},
yAxis: {
minInterval: 1,
splitNumber: 3,
axisLabel: {
formatter: '{value}' + (yAxisUnit || ''),
......@@ -229,6 +232,7 @@ export const createBarMultipleTransverse = (
grid: grid,
calculable: true,
xAxis: {
minInterval: 1,
splitNumber: 3,
axisLabel: {
formatter: '{value}' + (yAxisUnit || ''),
......@@ -243,7 +247,7 @@ export const createBarMultipleTransverse = (
}
},
yAxis: {
interval: getInterval(_axisData),
// interval: getInterval(_axisData),
type: 'category',
data: _axisData,
axisLabel: {
......
......@@ -18,7 +18,7 @@ const grid = {
containLabel: true,
left: 0,
right: 10,
top: 20,
top: 35,
bottom: 0
};
......@@ -53,6 +53,7 @@ export const createLine = (
axisTick: { show: false }
},
yAxis: {
minInterval: 1,
splitNumber: 3,
axisLabel: {
formatter: '{value}' + (yAxisUnit || ''),
......@@ -140,6 +141,7 @@ export const createLineSmooth = (
axisTick: { show: false }
},
yAxis: {
minInterval: 1,
splitNumber: 3,
axisLabel: {
formatter: '{value}' + (yAxisUnit || ''),
......
......@@ -18,7 +18,7 @@
* echart 配置
*/
import { use, init, registerMap } from 'echarts/core';
import { SVGRenderer } from 'echarts/renderers';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart, LineChart, MapChart } from 'echarts/charts';
import china from '../chart-type/json/china.json';
......@@ -59,7 +59,8 @@ export default {
return {
uuid: `${parseInt(Math.random())}-${new Date().getTime()}`,
myChart: null,
height: 0
height: 0,
imgUrl: ''
};
},
watch: {
......@@ -85,19 +86,25 @@ export default {
this.myChart = init(document.getElementById(this.uuid));
}
this.myChart.setOption(this.option);
// this.imgUrl = this.myChart.getDataURL({
// type: 'png',
// pixelRatio: 1, //放大2倍
// backgroundColor: '#fff'
// });
}
},
mounted() {},
created() {}
};
</script>
<style lang="scss">
.ebox.hide > div {
opacity: 0;
}
</style>
<style scoped lang="scss">
.ebox {
display: flex;
max-width: '920px';
max-height: '450px';
width: '100%';
& + .ebox {
margin-top: 80px;
}
......
......@@ -3,7 +3,7 @@
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-07 16:09:37
* @LastEditTime: 2021-07-22 17:09:54
-->
<template>
<div style="position:relative;" class="bi-chart-block">
......
......@@ -85,9 +85,9 @@ export default {
''
];
} else if (index === _arr.length - 1) {
return ['', title[1].axis[index], ...arr[1], x, p];
return ['', title[1].axis[index], ...arr[index], x, p];
} else {
return ['', title[1].axis[index], ...arr[1], '', ''];
return ['', title[1].axis[index], ...arr[index], '', ''];
}
}),
['总计', '', ...arr.slice(-1)[0], '', ''],
......@@ -134,7 +134,9 @@ export default {
text-align: center;
}
&_table {
width: 1058px;
// width: 1058px;
width: 100%;
margin: 0 auto;
margin-top: 27px;
tr {
height: 44px;
......
......@@ -76,8 +76,9 @@ export default {
<style lang="scss" scoped>
.bi-chart-choice-mixin-toggle-axis {
&_sub_title {
width: 1138px;
min-height: 80px;
// width: 1138px;
width: 100%;
// min-height: 80px;
border: 1px solid #ededed;
border-radius: 4px;
padding: 30px;
......@@ -85,6 +86,7 @@ export default {
line-height: 1.2;
color: #6f7a91;
margin-bottom: 25px;
box-sizing: border-box;
}
&_text {
max-width: 1026px;
......
......@@ -113,6 +113,7 @@ export default {
border: 1px solid #ededed;
border-radius: 4px;
padding-left: 40px;
padding-right: 40px;
transition: all 0.3s;
&.hide {
border-color: transparent;
......@@ -131,7 +132,7 @@ export default {
}
&_textarea {
animation: fadeIn 1s;
width: 1050px;
// width: 1050px;
font-size: 14px;
line-height: 1.5;
color: #6f7a91;
......
......@@ -12,6 +12,7 @@
:contenteditable="contenteditable"
:maxlength="999"
:key="name"
:style="{ maxWidth: isPrint ? '100%' : '72%' }"
>
<!-- {{ `${name}`.slice(0, 36) }}{{ `${name}`.length > 36 ? '...' : '' }} -->
{{ name }}
......
......@@ -3,56 +3,58 @@
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-02 11:44:28
* @LastEditTime: 2021-07-23 14:44:27
-->
<template>
<div>
<BiBlank height="40" :usePrint="true"></BiBlank>
<v-chart
class="chart"
:option="option"
style="margin:0 auto;"
:style="customStyle"
:autoresize="true"
:key="`${type}-${JSON.stringify(data)}`"
:type="type"
>
<template v-if="isMap" #map>
<div class="ui-table-head">
<table class="ui-table" style="border-bottom:none;">
<colgroup>
<col style="width:10%" />
<col style="width:10%" />
</colgroup>
<thead>
<tr>
<th style="border-bottom:none;">省份</th>
<th style="border-bottom:none;">有效点击量</th>
</tr>
</thead>
</table>
<div class="ui-table-body">
<table class="ui-table">
<div :style="{ height: `${(cHeight + 80) * zoom}px`, zoom: 1 / zoom }">
<div :style="{ transform: `scale(${zoom})`, transformOrigin: 'center 0' }">
<BiBlank height="40" :usePrint="true"></BiBlank>
<v-chart
class="chart"
:option="option"
style="margin:0 auto;"
:style="customStyle"
:autoresize="true"
:key="`${type}-${JSON.stringify(data)}`"
:type="type"
>
<template v-if="isMap" #map>
<div class="ui-table-head">
<table class="ui-table" style="border-bottom:none;">
<colgroup>
<col style="width:10%" />
<col style="width:10%" />
</colgroup>
<tbody>
<tr v-for="(item, index) in mapData" :key="index">
<td>
{{ item.name }}
</td>
<td>
{{ item.value }}
</td>
<thead>
<tr>
<th style="border-bottom:none;">省份</th>
<th style="border-bottom:none;">有效点击量</th>
</tr>
</tbody>
</thead>
</table>
<div class="ui-table-body">
<table class="ui-table">
<colgroup>
<col style="width:10%" />
<col style="width:10%" />
</colgroup>
<tbody>
<tr v-for="(item, index) in mapData" :key="index">
<td>
{{ item.name }}
</td>
<td>
{{ item.value }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
</v-chart>
<BiBlank height="40" :usePrint="true"></BiBlank>
</template>
</v-chart>
<BiBlank height="40" :usePrint="true"></BiBlank>
</div>
</div>
</template>
......@@ -73,6 +75,7 @@ export default {
ecTheme: 'light'
},
props: {
zoom: Number,
width: {
type: [Number, String],
default: '100%'
......
......@@ -48,7 +48,7 @@ export default {
width: 1200px;
height: 1697px;
background: #1989fa;
page-break-before: always;
// page-break-before: always;
font-size: 50px;
color: #ffffff;
text-align: center;
......@@ -58,13 +58,15 @@ export default {
text-indent: 3px;
}
.bi-cover-2 {
page-break-before: always;
// page-break-before: always;
page-break-inside: avoid;
&-content {
width: 100%;
border: 4px solid #f4f4f4;
border-radius: 4px;
padding: 40px 26px;
background: #fff;
box-sizing: border-box;
p {
font-size: 18px;
color: #2a3558;
......
......@@ -211,7 +211,7 @@ export default {
className: 'bi-cover_title',
pos: {
top: this.isMobile ? this.dealPos(3.67) : 550,
left: this.isMobile ? this.dealPos(1.93) : 237
left: this.isMobile ? this.dealPos(1.93) : 157
},
maxLength: 20
},
......@@ -219,7 +219,7 @@ export default {
className: 'bi-cover_date',
pos: {
top: this.isMobile ? this.dealPos(7.15) : 820,
left: this.isMobile ? this.dealPos(1.92) : 237
left: this.isMobile ? this.dealPos(1.92) : 157
},
maxLength: 16
},
......@@ -227,7 +227,7 @@ export default {
className: 'bi-cover_company',
pos: {
top: this.isMobile ? this.dealPos(10.79) : 1540,
left: this.isMobile ? this.dealPos(1.92) : 237
left: this.isMobile ? this.dealPos(1.92) : 157
},
maxLength: 26
}
......@@ -312,8 +312,9 @@ export default {
color: #4b4b4b;
outline: none;
word-break: break-all;
width: 726px;
width: 886px;
position: absolute;
box-sizing: border-box;
&.drag {
user-select: none;
}
......@@ -332,7 +333,7 @@ export default {
&_company {
padding: 32px 17px;
min-height: 100px;
font-size: 26px;
font-size: 32px;
}
&_btn {
position: absolute;
......
......@@ -21,7 +21,7 @@
<template name="项目参与人完成任务区间分布" v-if="data[3]">
<BiChartBlock
style="margin-top:44px;"
style="margin-top:44px;page-break-before: always;"
:chartConfig="data[3]"
></BiChartBlock>
</template>
......@@ -67,8 +67,8 @@ export default {
</script>
<style lang="scss" scoped>
.bi-mission {
page-break-before: always;
page-break-after: always;
// page-break-before: always;
// page-break-after: always;
padding-bottom: 50px;
&_group {
padding: 0 30px;
......
......@@ -4,45 +4,105 @@
-->
<template>
<div class="bi-single-choice" ref="bi-single-choice">
<slot></slot>
<vue-draggable
class="bi-single-choice_group"
:class="{ wrap: pageWrap }"
handle=".bi-chart-title-darg"
v-model="copySingleChoice"
:disabled="disabled"
chosen-class="chosen"
force-fallback="true"
:group="groupName"
animation="500"
touchStartThreshold="0"
@start="onStart"
@end="onEnd"
<div
:style="{
display: isUseScale && scaleDomsInfo.items.length > 0 ? 'none' : ''
}"
>
<transition-group v-for="(item, index) in copySingleChoice" :key="index">
<slot></slot>
</div>
<template v-if="isUseScale">
<div ref="print-area">
<div
class="print-item"
v-for="(item, index) in scaleDomsInfo.items"
:key="index"
style="position:relative;"
class="bi-single-choice_item_block"
:style="{
zoom: item.scale
}"
>
<div
class="bi-single-choice-info"
v-if="item.topDom"
v-html="item.topDom"
></div>
<BiChartBlock
ref="bi-single-choice_item"
v-for="domItem in item.chartConfigs"
class="bi-single-choice_item"
:style="{
zIndex: guideStepShow(index, 3) ? 11 : ''
}"
:class="{ dragging: drag }"
:showGuide="index === 0"
:chartConfig="item"
:key="item.baseInfo.id"
:chartConfig="dealConfig(domItem, item.scale)"
:key="domItem.baseInfo.id"
>
<BiBlank height="28" slot="top"></BiBlank>
<BiBlank height="28" slot="bottom"></BiBlank>
<BiBlank height="28" slot="top" usePrint></BiBlank>
<BiBlank height="28" slot="bottom" usePrint></BiBlank>
</BiChartBlock>
<BiTips v-if="guide.use && index === 0"></BiTips>
</div>
</transition-group>
</vue-draggable>
</div>
<div
style="position:absolute;z-index:-1;opacity: 0;left:0;top:0;"
:style="{
display: scaleDomsInfo.items.length > 0 ? 'none' : ''
}"
>
<BiChartBlock
v-for="(item, index) in copySingleChoice"
ref="bi-single-choice_item"
class="bi-single-choice_item"
:style="{
zIndex: guideStepShow(index, 3) ? 11 : ''
}"
:showGuide="index === 0"
:chartConfig="item"
:key="item.baseInfo.id"
>
<BiBlank height="28" slot="top" usePrint></BiBlank>
<BiBlank height="28" slot="bottom" usePrint></BiBlank>
</BiChartBlock>
</div>
</template>
<template v-else>
<vue-draggable
class="bi-single-choice_group"
:class="{ wrap: pageWrap }"
handle=".bi-chart-title-darg"
v-model="copySingleChoice"
:disabled="disabled"
chosen-class="chosen"
force-fallback="true"
:group="groupName"
animation="500"
touchStartThreshold="0"
@start="onStart"
@end="onEnd"
>
<transition-group
v-for="(item, index) in copySingleChoice"
:key="index"
>
<div
:key="index"
style="position:relative;"
class="bi-single-choice_item_block"
>
<BiChartBlock
ref="bi-single-choice_item"
class="bi-single-choice_item"
:style="{
zIndex: guideStepShow(index, 3) ? 11 : ''
}"
:class="{ dragging: drag }"
:showGuide="index === 0"
:chartConfig="item"
:key="item.baseInfo.id"
>
<BiBlank height="28" slot="top"></BiBlank>
<BiBlank height="28" slot="bottom"></BiBlank>
</BiChartBlock>
<BiTips v-if="guide.use && index === 0"></BiTips>
</div>
</transition-group>
</vue-draggable>
</template>
</div>
</template>
......@@ -82,7 +142,10 @@ export default {
groupName: `single-choice-chart-${parseInt(
Math.random() * new Date().getTime()
)}`,
copySingleChoice: []
copySingleChoice: [],
scaleDomsInfo: {
items: []
}
};
},
computed: {
......@@ -92,6 +155,15 @@ export default {
}
},
methods: {
dealConfig(config, zoom) {
const _config = JSON.parse(JSON.stringify(config));
// _config.chart._width = _config.chart.width * zoom;
// _config.chart._height = _config.chart.height * zoom;
// _config.chart.width /= zoom;
// _config.chart.height /= zoom;
_config.chart.zoom = zoom || 1;
return _config;
},
onStart() {
this.drag = true;
document
......@@ -164,6 +236,76 @@ export default {
pageSize: pageSizeInfo.page,
info: catalogueInfoArr
});
},
dealDomForScale() {
const topDom = (this.$slots.default || [{}])[0].elm || {
offsetHeight: 0
};
const baseHeight = 1697;
const baseScale = 1.1;
const cScale = height => {
return Math.min(baseHeight / height, 1);
};
const newDom = (this.$refs['bi-single-choice_item'] || []).reduce(
(pre, cur) => {
const { $el } = cur;
const { offsetHeight } = $el;
const domUsePage = parseInt(offsetHeight / (baseHeight * baseScale));
if (pre.height + offsetHeight < baseHeight * baseScale) {
// 当前dom高度加上历史高度 小于 A4纸高度的1.15倍
if (pre.height === 0) {
// 第一项
pre.items.push({
allHeight: offsetHeight,
scale: cScale(offsetHeight),
chartConfigs: [cur.chartConfig]
});
} else {
const lastItem = pre.items[pre.items.length - 1];
lastItem.allHeight += offsetHeight;
lastItem.scale = cScale(lastItem.allHeight);
lastItem.chartConfigs.push(cur.chartConfig);
}
pre.height += offsetHeight;
} else {
pre.totalPage += Math.max(domUsePage, 1);
pre.height = offsetHeight;
pre.items.push({
allHeight: offsetHeight,
scale: domUsePage === 0 ? cScale(offsetHeight) : 1,
chartConfigs: [cur.chartConfig]
});
}
pre.catalogueInfoArr.push({
name: (cur.chartConfig.title || {}).name,
page: pre.totalPage - domUsePage
});
return pre;
},
{
height: topDom.offsetHeight,
totalPage: 1,
items:
topDom.offsetHeight === 0
? []
: [
{
allHeight: topDom.offsetHeight,
scale: cScale(topDom.offsetHeight),
topDom: topDom.innerHTML,
chartConfigs: []
}
],
catalogueInfoArr: []
}
);
this.scaleDomsInfo = newDom;
this.$emit('page', {
pageSize: newDom.totalPage,
info: newDom.catalogueInfoArr
});
console.log(newDom);
// this.$refs['print-area'].innerHTML = 'xxxx';
}
},
mounted() {
......@@ -173,12 +315,13 @@ export default {
eventBus.$on('hideGuide', () => {
this.guide.use = false;
});
// this.dealDomForScale();
},
watch: {
singleChoice: {
handler(v) {
this.copySingleChoice = v;
this.$nextTick(this.getPageSize);
this.$nextTick(this.dealDomForScale);
},
deep: true,
immediate: true
......@@ -188,8 +331,17 @@ export default {
</script>
<style lang="scss" scoped>
.bi-single-choice {
.print-item {
page-break-before: always;
transform-origin: 0 0;
overflow: hidden;
// &:first-child {
// page-break-before: auto;
// page-break-inside: avoid;
// }
}
.bi-single-choice {
// page-break-before: always;
&_group {
& > span {
display: block;
......@@ -210,7 +362,7 @@ export default {
&.wrap {
& > span {
& + span {
page-break-before: always;
// page-break-before: always;
}
}
}
......
......@@ -3,7 +3,7 @@
* @Author: jml
* @Date: 2021-02-26 15:38:10
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-05 18:15:51
* @LastEditTime: 2021-07-23 13:19:49
-->
<template>
<div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
......@@ -36,6 +36,7 @@ export default {
props: {
mobile: [Number, String, Boolean],
print: [Number, String, Boolean],
useScale: [Number, String, Boolean],
cantEdit: [Number, String],
projectType: [Number, String],
getBaseInfo: {
......@@ -162,7 +163,7 @@ div {
left: 0;
top: 0;
z-index: 11;
background-image: url('http://cdn.yxvzb.com/WEB/SaaS/images/bi/watermark.png');
background-image: url('http://cdn.yxvzb.com/WEB/SaaS/images/bi/watermark-bi.png?v=1');
background-repeat: repeat;
}
}
......
......@@ -19,6 +19,9 @@ export default {
};
},
computed: {
isUseScale() {
return this.Bi.useScale == 1;
},
isPrint() {
return this.Bi.print == 1 || this.print == 1;
},
......
......@@ -143,7 +143,7 @@ export default {
// },
{
name: '执行任务人员画像',
page: 2
page: 1
},
{
name: '项目参与人完成任务区间分布',
......@@ -157,14 +157,14 @@ export default {
? [
{
name: '单因素分析',
page: page1 + 2
page: 3
},
...page3Info
.filter(item => item.name)
.map(item => {
return {
...item,
page: page1 + 1 + page2 + item.page
page: 2 + page2 + item.page
};
})
]
......@@ -174,7 +174,7 @@ export default {
.map(item => {
return {
...item,
page: page1 + 1 + page2 + item.page
page: 2 + page2 + item.page
};
})
]
......@@ -478,6 +478,6 @@ export default {
</script>
<style lang="scss" scoped>
.bi-block {
margin-top: 8px;
// margin-top: 8px;
}
</style>
......@@ -31,6 +31,7 @@
@page="setPage(arguments, 'page1')"
></BiMission>
<BiSingleChoice
v-if="showSingleChoice.length > 0"
class="bi-block no-border"
:textData="textData"
:singleChoice="showSingleChoice"
......@@ -45,6 +46,7 @@
></BiSingleChoiceInfo>
</BiSingleChoice>
<BiSingleChoice
v-if="showSingleChoiceMixin.length > 0"
style="margin-top:25px;"
class="bi-block no-border"
name="单篇内容有效点击量分析图"
......@@ -148,11 +150,11 @@ export default {
// },
{
name: '执行任务人员画像',
page: 2
page: 1
},
{
name: '项目参与人完成任务区间分布',
page: 2
page: 1
}
]
},
......@@ -164,7 +166,7 @@ export default {
.map(item => {
return {
...item,
page: item.page + page1 + 1
page: item.page + page1
};
})
]
......@@ -177,7 +179,7 @@ export default {
.map(item => {
return {
...item,
page: item.page + page1 + page2 + 1
page: item.page + page1 + page2
};
})
]
......@@ -404,6 +406,7 @@ export default {
}
];
this.singleChoice = arr
.filter(item => item)
.map((item, index) => {
let customConfig = config[index] || {};
if (check.isFunction(customConfig)) {
......@@ -426,6 +429,7 @@ export default {
},
dealChoiceMixin(arr) {
this.singleChoiceMixin = arr
.filter(item => item)
.map(item => {
return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
......@@ -512,6 +516,6 @@ export default {
</script>
<style lang="scss" scoped>
.bi-block {
margin-top: 8px;
// margin-top: 8px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!