fix:分页问题

jml0128
Commit 692eeae1 authored Apr 27, 2022 by jml0128
Showing with 133 additions and 135 deletions
package.json
src/packages/bi/src/chart-type/map/createMap.js
src/packages/bi/src/commonComponents/article.vue
src/packages/bi/src/components/singleChoice.vue
src/packages/bi/src/components/singleChoiceInfo.vue
src/packages/bi/src/mock/index.js
src/packages/bi/src/project/21-digitalQuestionnaire.vue
--- a/package.json
+++ b/package.json
 {
  "name": "xrk-bi",
-  "version": "0.2.1",
+  "version": "0.2.5",
  "description": "xrk-bi",
  "author": "xrk",
  "main": "dist/bundler.js",

--- a/src/packages/bi/src/chart-type/map/createMap.js
+++ b/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: [
      {

--- a/src/packages/bi/src/commonComponents/article.vue
+++ b/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>
+<style lang="scss">
-.bi-sex-icon {
+.bi-article {
-  text-align: center;
+  line-height: 1.5;
-  padding-top: 110px;
+  width: 1000px;
-  height: 350px;
+  margin: 0 auto;
-  &_item {
+  img,
-    display: inline-block;
+  video {
-    margin: 0 45px;
+    width: 100%;
-    p {
+    object-fit: contain;
-      margin-top: 15px;
+    height: 100%;
-    }
  }
 }
 </style>
--- a/src/packages/bi/src/components/singleChoice.vue
+++ b/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() {
+    getArticleHeight(startHeight, parentElement) {
-      const topDom = (this.$slots.default || [{}])[0].elm || {
+      const blankDoms = parentElement.querySelectorAll('div.bi-blank');
-        offsetHeight: 0
+      const titleDom = parentElement.querySelector('div.bi-chart-title');
-      };
+      const contentDoms = parentElement.querySelectorAll('div.bi-article>div');
-      const domArr = [
+      const { totalHeight } = [
-        {
+        blankDoms[0],
-          $el: topDom
+        titleDom,
-        },
+        blankDoms[1],
-        ...(this.$refs['bi-single-choice_item'] || []).map(item => {
+        ...contentDoms,
-          let height = 0;
+        blankDoms[2],
-          item.pervPage = item.$children.reduce((pre, { $el }) => {
+        blankDoms[3]
-            const { offsetHeight } = $el;
+      ].reduce(
-            if ($el.className != 'bi-blank' && !this.Bi.isPrint) {
+        (pre, cur) => {
-              height += offsetHeight;
+          if (pre.height + cur.offsetHeight < baseHeight * baseScale) {
-            }
+            pre.height += cur.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;
-            }
          } else {
-            pageSizeInfo.page += pageSizeInfo.pervPage + 1;
+            pre.height = cur.offsetHeight;
-            pageSizeInfo.pervPage = pervPage;
+            pre.totalHeight +=
+              baseHeight * baseScale -
+              (pre.totalHeight % (baseHeight * baseScale));
          }
-        } else if (pageSizeInfo.height >= 1697) {
+          pre.totalHeight += cur.offsetHeight;
-          pageSizeInfo.page += 1;
+          return pre;
-          pageSizeInfo.height = offsetHeight;
+        },
+        {
+          totalHeight: startHeight,
+          height: startHeight
        }
-        catalogueInfoArr.push({
+      );
-          name: (title || {}).name,
+      return totalHeight;
-          page: pageSizeInfo.page
-        });
-      });
-      console.log(111, pageSizeInfo.page, catalogueInfoArr);
-      this.$emit('page', {
-        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, 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);
+            // console.log(topDom, cur);
-          }
-          let className = 'print-item';
-          if (index == 0 && cur.chart.type == 15) {
-            className = 'print-item nowarp';
          }
          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 {

--- a/src/packages/bi/src/components/singleChoiceInfo.vue
+++ b/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;

--- a/src/packages/bi/src/mock/index.js
+++ b/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: {

--- a/src/packages/bi/src/project/21-digitalQuestionnaire.vue
+++ b/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"
+        :index="answerMode == 1 ? '4' : '5'"
-        name="专区内容效果评价"
+        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,
+        // taskTime = 0,
-        taskStartTime,
+        // taskStartTime,
-        taskEndTime,
+        // 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: '任务时间',
+        //   name: '任务时间',
-          value: `${taskTime}天`
+        //   value: `${taskTime}天`
-        },
+        // },
-        {
+        // {
-          name: '任务开始时间',
+        //   name: '任务开始时间',
-          value: taskStartTime
+        //   value: taskStartTime
-        },
+        // },
-        {
+        // {
-          name: '任务结算时间',
+        //   name: '任务结算时间',
-          value: taskEndTime
+        //   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: () => ({
+        7: { hideThisChart: true },
-          chartType: 2,
+        23: { hideThisChart: true }
-          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]
-        })
      };
      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(
+          const singleChoiceHistory = topicInfoHistory.data.data || {};
-            topicInfoHistory.data.data || {},
+          const singleChoice = topicInfo.data.data || {};
-            'singleChoiceHistory'
+          (
+            (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 () => {