Skip to content

jml0128 / xrk-bi

Go to a project
Commit 1fe18123 by jml0128
Options

feat:bi分页

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