Skip to content

jml0128 / xrk-bi

Go to a project
Commit 692eeae1 by jml0128
Options

fix:分页问题

1 parent 9c038f4b
Inline Side-by-side
Showing with 133 additions and 135 deletions
package.json
{
"name": "xrk-bi",
"version": "0.2.1",
"version": "0.2.5",
"description": "xrk-bi",
"author": "xrk",
"main": "dist/bundler.js",
......
src/packages/bi/src/chart-type/map/createMap.js
......@@ -3,7 +3,6 @@
* @Date: 2021-06-20 01:16:17
*/
export const createMap = (Vue, chartData) => {
console.log(chartData);
return {
visualMap: {
borderColor: '#fff',
......@@ -65,7 +64,6 @@ export const createMap = (Vue, chartData) => {
};
export const createMapScatter = (Vue, chartData) => {
console.log(chartData);
return {
geo: [
{
......
src/packages/bi/src/commonComponents/article.vue
<!--
* @Description:
* @Date: 2022-04-20 15:31:47
-->
<!--
* @Description: file content
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-20 15:50:05
* @LastEditTime: 2022-04-27 20:29:19
-->
<template>
<div>
<BiBlank height="40" :usePrint="true"></BiBlank>
<div v-html="content"></div>
<div class="bi-article" v-html="content"></div>
<BiBlank height="40" :usePrint="true"></BiBlank>
</div>
</template>
......@@ -40,17 +36,16 @@ export default {
created() {}
};
</script>
<style lang="scss" scoped>
.bi-sex-icon {
text-align: center;
padding-top: 110px;
height: 350px;
&_item {
display: inline-block;
margin: 0 45px;
p {
margin-top: 15px;
}
<style lang="scss">
.bi-article {
line-height: 1.5;
width: 1000px;
margin: 0 auto;
img,
video {
width: 100%;
object-fit: contain;
height: 100%;
}
}
</style>
src/packages/bi/src/components/singleChoice.vue
......@@ -115,6 +115,8 @@ import eventBus from '../eventBus/index';
import mixin from '../mixin/index';
import { getQueryVariable } from '../chart-type/common';
const baseHeight = 1697;
const baseScale = 1.1;
export default {
name: 'bi-single-choice',
mixins: [mixin],
......@@ -179,86 +181,62 @@ export default {
this.drag = false;
this.$emit('sort', this.copySingleChoice);
},
getPageSize() {
const topDom = (this.$slots.default || [{}])[0].elm || {
offsetHeight: 0
};
const domArr = [
{
$el: topDom
},
...(this.$refs['bi-single-choice_item'] || []).map(item => {
let height = 0;
item.pervPage = item.$children.reduce((pre, { $el }) => {
const { offsetHeight } = $el;
if ($el.className != 'bi-blank' && !this.Bi.isPrint) {
height += offsetHeight;
}
if (height >= 1697) {
pre += 1;
height = offsetHeight;
}
return pre;
}, 0);
return item;
})
];
const pageSizeInfo = {
pervHeight: 0,
pervPage: 0,
height: 0,
page: this.pageWrap ? 0 : 1
};
const catalogueInfoArr = [];
domArr.forEach(({ $el, title, pervPage = 0 }, index) => {
const offsetHeight = $el.offsetHeight - (this.Bi.isPrint ? 0 : 56);
pageSizeInfo.height += offsetHeight;
if (this.pageWrap) {
if (index == 1) {
// 遍历到第二个时，如果存在顶部标题，则将两个高度相加（汇总标题和表格不做强制分页）
pageSizeInfo.pervHeight = offsetHeight + topDom.offsetHeight;
if (offsetHeight + topDom.offsetHeight > 1697) {
pageSizeInfo.page += 1;
}
getArticleHeight(startHeight, parentElement) {
const blankDoms = parentElement.querySelectorAll('div.bi-blank');
const titleDom = parentElement.querySelector('div.bi-chart-title');
const contentDoms = parentElement.querySelectorAll('div.bi-article>div');
const { totalHeight } = [
blankDoms[0],
titleDom,
blankDoms[1],
...contentDoms,
blankDoms[2],
blankDoms[3]
].reduce(
(pre, cur) => {
if (pre.height + cur.offsetHeight < baseHeight * baseScale) {
pre.height += cur.offsetHeight;
} else {
pageSizeInfo.page += pageSizeInfo.pervPage + 1;
pageSizeInfo.pervPage = pervPage;
pre.height = cur.offsetHeight;
pre.totalHeight +=
baseHeight * baseScale -
(pre.totalHeight % (baseHeight * baseScale));
}
} else if (pageSizeInfo.height >= 1697) {
pageSizeInfo.page += 1;
pageSizeInfo.height = offsetHeight;
pre.totalHeight += cur.offsetHeight;
return pre;
},
{
totalHeight: startHeight,
height: startHeight
}
catalogueInfoArr.push({
name: (title || {}).name,
page: pageSizeInfo.page
});
});
console.log(111, pageSizeInfo.page, catalogueInfoArr);
this.$emit('page', {
pageSize: pageSizeInfo.page,
info: catalogueInfoArr
});
);
return totalHeight;
},
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, index) => {
const { $el } = cur;
const { offsetHeight } = $el;
let { offsetHeight } = $el;
let className = 'print-item';
if (cur.chart.type == 15) {
if (index == 0) {
offsetHeight = this.getArticleHeight(topDom.offsetHeight, $el);
className = 'print-item nowarp child-nowarp';
} else {
pre.totalPage += 1; // 玄学
offsetHeight = this.getArticleHeight(0, $el);
className = 'print-item child-nowarp';
}
}
const domUsePage = parseInt(offsetHeight / (baseHeight * baseScale));
if (this.printInfo) {
console.log(topDom, cur);
}
let className = 'print-item';
if (index == 0 && cur.chart.type == 15) {
className = 'print-item nowarp';
// console.log(topDom, cur);
}
if (pre.height + offsetHeight < baseHeight * baseScale) {
// 当前dom高度加上历史高度 小于 A4纸高度的1.15倍
......@@ -286,7 +264,15 @@ export default {
chartConfigs: [cur.chartConfig]
});
}
// console.log(
// cur.chartConfig.title.name,
// pre.height,
// offsetHeight,
// pre.totalPage,
// domUsePage
// );
pre.catalogueInfoArr.push({
showInCatalogue: cur.chartConfig.showInCatalogue,
name: (cur.chartConfig.title || {}).name,
page: pre.totalPage - domUsePage
});
......@@ -317,8 +303,6 @@ export default {
pageSize: newDom.totalPage,
info: newDom.catalogueInfoArr
});
console.log(newDom);
// this.$refs['print-area'].innerHTML = 'xxxx';
}
},
mounted() {
......@@ -344,7 +328,7 @@ export default {
</script>
<style lang="scss">
.print-item {
&.nowarp {
&.child-nowarp {
.bi-chart-block {
background: #fff;
& > div {
......
src/packages/bi/src/components/singleChoiceInfo.vue
......@@ -69,11 +69,11 @@ export default {
z-index: 2;
color: #ddeeff;
font-size: 14px;
text-align: center;
text-align: left;
&.one {
padding-left: 60px;
padding-top: 23px;
text-align: center;
text-align: left;
padding-left: 130px;
& > div {
width: inherit;
......
src/packages/bi/src/mock/index.js
......@@ -68,6 +68,7 @@ export const chartConfig = () => {
return {
createConfig: (arr, options = {}) => {
const {
showInCatalogue,
blockTitle,
hideTitle,
hideColor,
......@@ -122,6 +123,7 @@ export const chartConfig = () => {
);
});
return {
showInCatalogue,
isDelete: isDelete || 0,
sort: showSort || 0,
chart: {
......
src/packages/bi/src/project/21-digitalQuestionnaire.vue
......@@ -35,7 +35,7 @@
@page="setPage(arguments, 'page1')"
></BiMission>
<BiSingleChoice
v-if="showSingleChoiceHistory.length > 0"
v-if="showSingleChoiceHistory.length > 0 && answerMode != 1"
class="bi-block no-border"
:textData="textDataHistory"
:singleChoice="showSingleChoiceHistory"
......@@ -59,7 +59,7 @@
@page="setPage(arguments, 'page4', 'page4Info')"
>
<BiSingleChoiceInfo
index="4"
:index="answerMode == 1 ? '3' : '4'"
name="本次专区反馈效果评价"
:info="textData"
></BiSingleChoiceInfo>
......@@ -68,15 +68,16 @@
v-if="showSingleChoiceMixin.length > 0"
style="margin-top:25px;"
class="bi-block no-border"
name="专区内容效果评价"
name="推广相关问卷数据分析"
:singleChoice="showSingleChoiceMixin"
:pageWrap="true"
printInfo
@sort="sort(arguments, 'singleChoiceMixin', hideSingleChoiceMixin)"
@page="setPage(arguments, 'page3', 'page3Info')"
>
<BiSingleChoiceInfo
index="5"
name="专区内容效果评价"
:index="answerMode == 1 ? '4' : '5'"
name="推广相关问卷数据分析"
></BiSingleChoiceInfo>
</BiSingleChoice>
<BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
......@@ -146,7 +147,8 @@ export default {
baseInfo: [],
textData: [],
textDataHistory: [],
biInfo: {}
biInfo: {},
answerMode: 1
};
},
computed: {
......@@ -188,6 +190,7 @@ export default {
},
{
name: '专区浏览效果评价 - 历史数据分析',
hide: this.answerMode == 1,
child: [
...page2Info
.filter(item => item.name)
......@@ -213,7 +216,7 @@ export default {
]
},
{
name: '专区内容效果评价',
name: '推广相关问卷数据分析',
child: [
...page3Info
.filter(item => item.name)
......@@ -223,9 +226,10 @@ export default {
page: item.page + page1 + page2 + page4
};
})
.filter(item => item.showInCatalogue)
]
}
];
].filter(i => !i.hide);
},
showSingleChoiceHistory() {
return this.dealSingleChoice(this.singleChoiceHistory);
......@@ -265,19 +269,21 @@ export default {
projectName = '-',
sendEnterpriseName = '-',
aspEnterpriseName = '-',
taskTime = 0,
taskStartTime,
taskEndTime,
// taskTime = 0,
// taskStartTime,
// taskEndTime,
taskSum,
executePeopleNumber,
createDt,
answerMode, // 1自答，2别人答
nameShowType //1：正常显示甲乙方 2：隐藏发起方，原"服务商"改为"项目方" 3：隐藏发起方
} = info;
this.biInfo = {
biInfoId: biInfoId,
styleConfigureId
};
this.answerMode = answerMode;
this.coverId = coverTemplateId;
this.coverUrl = coverTemplateUrl;
const biCreateDt = date.dateFormat(createDt, 'Y-M-D');
......@@ -306,18 +312,18 @@ export default {
name: nameShowType == 2 ? '项目方' : '服务商',
value: aspEnterpriseName
},
{
name: '任务时间',
value: `${taskTime}天`
},
{
name: '任务开始时间',
value: taskStartTime
},
{
name: '任务结算时间',
value: taskEndTime
},
// {
// name: '任务时间',
// value: `${taskTime}天`
// },
// {
// name: '任务开始时间',
// value: taskStartTime
// },
// {
// name: '任务结算时间',
// value: taskEndTime
// },
{
name: '报表生成时间',
value: biCreateDt
......@@ -420,17 +426,24 @@ export default {
];
},
dealChoice(obj, singleChoiceName) {
// 1有效点击量排名 2区域热力图 3 单日有效点击量6 单日最大点击量 7 单篇每日点击23 专区推广文章浏览量与有效反馈数量对比图
const config = {
1: {
chartType: 2,
blockTitle: '数字专区各篇内容有效点击量排名',
blockTitle:
singleChoiceName === 'singleChoiceHistory'
? '数字问卷各篇内容浏览排行'
: '数字问卷各篇内容反馈排行',
hideTypes: true,
hideLegend: true,
hideDesc: true
},
2: {
chartType: 13,
blockTitle: '数字专区有效点击量分布区域热力图',
blockTitle:
singleChoiceName === 'singleChoiceHistory'
? '数字问卷浏览分布区域热力图'
: '数字问卷反馈分布区域热力图',
hideTypes: true,
hideColor: true,
hideLegend: true,
......@@ -438,32 +451,26 @@ export default {
},
3: item => ({
chartType: item.chartType || randomType([1, 2, 5, 6]),
blockTitle: '数字专区单日有效点击量走势图',
blockTitle:
singleChoiceName === 'singleChoiceHistory'
? '数字问卷单日浏览走势图'
: '数字问卷单日反馈走势图',
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 9, 10, 11]
}),
6: {
chartType: 2,
blockTitle: '数字专区单日最大点击量各篇内容点击量排名',
blockTitle:
singleChoiceName === 'singleChoiceHistory'
? '数字问卷各篇内容单日最大浏览量排名'
: '数字问卷各篇内容单日最大反馈排名',
hideTypes: true,
hideLegend: true,
hideDesc: true
},
7: () => ({
chartType: 2,
blockTitle: '单篇每日点击',
hideTypes: true,
hideLegend: true,
hideDesc: true
}),
23: item => ({
chartType: item.chartType || randomType([1, 2, 9]),
blockTitle: '专区推广文章浏览量与有效反馈数量对比图',
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 5, 6, 10, 11]
})
7: { hideThisChart: true },
23: { hideThisChart: true }
};
this[singleChoiceName] = Object.entries(obj)
.filter(item => item[1])
......@@ -499,7 +506,8 @@ export default {
hideTypes: true,
hideColor: true,
hideLegend: true,
hideDesc: true
hideDesc: true,
showInCatalogue: true
}),
...(Array.isArray(item.topic) ? item.topic : []).map(cItem => {
return ChartConfigFn.createConfig(
......@@ -578,11 +586,22 @@ export default {
]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(
topicInfoHistory.data.data || {},
'singleChoiceHistory'
const singleChoiceHistory = topicInfoHistory.data.data || {};
const singleChoice = topicInfo.data.data || {};
(
(singleChoiceHistory[1] || {})['topicCountInfos'] || []
).sort((a, b) => (a.countNum > b.countNum ? 0 : -1));
(
(singleChoiceHistory[6] || {})['topicCountInfos'] || []
).sort((a, b) => (a.countNum > b.countNum ? 0 : -1));
((singleChoice[1] || {})['topicCountInfos'] || []).sort((a, b) =>
a.countNum > b.countNum ? 0 : -1
);
((singleChoice[6] || {})['topicCountInfos'] || []).sort((a, b) =>
a.countNum > b.countNum ? 0 : -1
);
this.dealChoice(topicInfo.data.data || {}, 'singleChoice');
this.dealChoice(singleChoiceHistory, 'singleChoiceHistory');
this.dealChoice(singleChoice, 'singleChoice');
this.dealChoiceMixin(topicMixinInfo.data.data || []);
this.coverList = tempaletList.data.data || [];
this.$nextTick(async () => {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!