feat:新增历史拜访场景BI

package.json

 {
   "name": "xrk-bi",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "xrk-bi",
   "author": "xrk",
   "main": "dist/bundler.js",

src/packages/bi/src/chart-type/map/createMap.js

@@ -3,7 +3,7 @@
  * @Date: 2021-06-20 01:16:17
  */
 export const createMap = (Vue, chartData) => {
-  console.log('map', chartData);
+  console.log(chartData);
   return {
     visualMap: {
       borderColor: '#fff',
@@ -55,7 +55,65 @@ export const createMap = (Vue, chartData) => {
         },
         top: 36,
         left: 0,
-        data: chartData
+        data: chartData.map(item => ({
+          value: item.value,
+          name: item.name.replace(/省|市/g, '')
+        }))
+      }
+    ]
+  };
+};
+
+export const createMapScatter = (Vue, chartData) => {
+  console.log(chartData);
+  return {
+    geo: [
+      {
+        type: 'map',
+        map: 'china',
+        itemStyle: {
+          areaColor: 'rgba(0,0,0,0)',
+          borderColor: '#4C6286',
+          borderWidth: 1
+        },
+        emphasis: {
+          label: {
+            show: false
+          },
+          itemStyle: {
+            areaColor: 'rgba(0,0,0,0)'
+          }
+        },
+        top: 36
+      }
+    ],
+    series: [
+      {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        data: chartData.reduce((pre, cur) => {
+          const { visitLongitude, visitLatitude, latitude, longitude } = cur;
+          pre.push({
+            value: [visitLongitude || longitude, visitLatitude || latitude]
+          });
+          return pre;
+        }, []),
+        symbol: 'circle',
+        rippleEffect: {
+          period: 8,
+          brushType: 'fill',
+          scale: 3.5
+        },
+        animation: false,
+        symbolSize: function() {
+          return 6;
+        },
+        label: {
+          show: false
+        },
+        itemStyle: {
+          color: '#FF2828'
+        }
       }
     ]
   };

src/packages/bi/src/chart-type/types.js

@@ -10,7 +10,7 @@ import {
 } from './bar/createBar';
 import { createLine, createLineSmooth } from './line/createLine';
 import { createPie, createRing } from './pie/createPie';
-import { createMap } from './map/createMap';
+import { createMap, createMapScatter } from './map/createMap';
 export default {
   // 柱状
   1: {
@@ -111,5 +111,13 @@ export default {
     sort: 1,
     icon: '',
     create: createMap
+  },
+  // 地图
+  14: {
+    name: 'map',
+    cnName: '地图-散点',
+    sort: 1,
+    icon: '',
+    create: createMapScatter
   }
 };

src/packages/bi/src/commonComponents/chart-base.vue

@@ -19,7 +19,13 @@
  */
 import { use, init, registerMap } from 'echarts/core';
 import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
-import { PieChart, BarChart, LineChart, MapChart } from 'echarts/charts';
+import {
+  PieChart,
+  BarChart,
+  LineChart,
+  MapChart,
+  ScatterChart
+} from 'echarts/charts';
 
 import china from '../chart-type/json/china.json';
 // import chinaMapOutline from '../chart-type/json/chinaMapOutline.json';
@@ -38,6 +44,7 @@ use([
   PieChart,
   LineChart,
   MapChart,
+  ScatterChart,
   TitleComponent,
   TooltipComponent,
   LegendComponent,
@@ -79,13 +86,40 @@ export default {
   methods: {
     init() {
       if (!this.myChart) {
-        if (this.type === 13) {
+        if ([13, 14].includes(+this.type)) {
           registerMap('china', china);
           // registerMap('chinaMapOutline', chinaMapOutline);
         }
         this.myChart = init(document.getElementById(this.uuid));
       }
-      this.myChart.setOption(this.option);
+      const { option, myChart } = this;
+      const maxLength = option.series[0].data.length;
+      const cloneArr = [...option.series[0].data];
+      if (maxLength > 200) {
+        const setData = (_myChart, startIndex) => {
+          const endIndex = startIndex + 200;
+          if (startIndex == 0) {
+            option.series[0].data = cloneArr.slice(startIndex, endIndex);
+            _myChart.setOption(option);
+          } else {
+            _myChart.appendData({
+              seriesIndex: '0',
+              data: cloneArr.slice(startIndex, endIndex)
+            });
+          }
+          if (maxLength > endIndex) {
+            setTimeout(
+              () => {
+                setData(_myChart, endIndex);
+              },
+              startIndex == 0 ? 0 : 100
+            );
+          }
+        };
+        setData(myChart, 0);
+      } else {
+        myChart.setOption(option);
+      }
       // this.imgUrl = this.myChart.getDataURL({
       //   type: 'png',
       //   pixelRatio: 1, //放大2倍

src/packages/bi/src/commonComponents/chart-block.vue

@@ -3,7 +3,7 @@
  * @Author: jml
  * @Date: 2021-03-24 10:22:27
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-22 17:09:54
+ * @LastEditTime: 2021-07-28 21:17:43
 -->
 <template>
   <div style="position:relative;" class="bi-chart-block">
@@ -25,7 +25,10 @@
       :showGuide="showGuide"
     ></BiChartTitle>
     <BiChartChoiceMinxinToggleAxis
-      v-if="(chart.axis || []).every(item => item.names.length > 0)"
+      v-if="
+        (chart.axis || []).every(item => item.names.length > 0) &&
+          !title.hideToggleAxis
+      "
       :axis="chart.axis"
       :customGroupTitle="title.customGroupTitle"
       :contenteditable="title.toggleAxisContenteditable"

src/packages/bi/src/commonComponents/chart.vue

@@ -3,7 +3,7 @@
  * @Author: jml
  * @Date: 2021-03-24 10:22:27
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-23 14:44:27
+ * @LastEditTime: 2021-07-28 21:34:18
 -->
 <template>
   <div :style="{ height: `${(cHeight + 80) * zoom}px`, zoom: 1 / zoom }">
@@ -96,6 +96,10 @@ export default {
       type: Array,
       default: () => []
     },
+    mapScatterData: {
+      type: Array,
+      default: () => []
+    },
     colors: {
       type: Array,
       default: () => []
@@ -157,6 +161,9 @@ export default {
     isMap() {
       return this.type == 13;
     },
+    isScatterMap() {
+      return this.type == 14;
+    },
     mapData() {
       return this.data[0].map((item, index) => {
         return {
@@ -170,7 +177,11 @@ export default {
     createChart() {
       this.option = this.chartsConfig.create(
         this,
-        this.isMap ? this.mapData : this.data,
+        this.isMap
+          ? this.mapData
+          : this.isScatterMap
+          ? this.mapScatterData
+          : this.data,
         this.axis[0].names,
         this.yAxisUnit,
         this.colors,

src/packages/bi/src/components/operate.vue

@@ -86,6 +86,7 @@ export default {
   },
   data() {
     return {
+      saving: false,
       dialogVisible: false,
       resetDeleteArr: []
     };
@@ -100,10 +101,14 @@ export default {
     },
     save() {
       if (check.isFunction(this.saveInfo)) {
+        if (this.saving) {
+          return;
+        }
         const loading = Message({
           message: '保存中...请稍等',
           duration: 0
         });
+        this.saving = true;
         this.saveInfo()
           .then(() => {
             loading.close();
@@ -111,8 +116,10 @@ export default {
               message: '保存成功',
               type: 'success'
             });
+            this.saving = false;
           })
           .catch(() => {
+            this.saving = false;
             loading.close();
             Message.error('保存失败');
           });

src/packages/bi/src/main.vue

@@ -3,11 +3,14 @@
  * @Author: jml
  * @Date: 2021-02-26 15:38:10
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-23 13:19:49
+ * @LastEditTime: 2021-07-28 21:56:47
 -->
 <template>
   <div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
-    <template v-if="[5, 7, 20].includes(+projectType)">
+    <template
+      v-if="[5, 7, 20].includes(+projectType)"
+      name="医学助手项目调研-医生调查问卷-可配置场景"
+    >
       <BiConfigurableMobile v-if="mobile"></BiConfigurableMobile>
       <BiConfigurable v-else></BiConfigurable>
     </template>
@@ -15,6 +18,15 @@
       <BiZoneMobile v-if="mobile"></BiZoneMobile>
       <BiZone v-else></BiZone>
     </template>
+    <template v-if="projectType == 2" name="otc拜访">
+      <BiOtc></BiOtc>
+    </template>
+    <template v-if="projectType == 9" name="等级医院拜访">
+      <BiGradeHospital></BiGradeHospital>
+    </template>
+    <template v-if="projectType == 10" name="基层医疗机构拜访">
+      <BiJcyl></BiJcyl>
+    </template>
   </div>
 </template>
 
@@ -24,6 +36,9 @@ import BiConfigurable from './project/20-configurable.vue';
 import BiConfigurableMobile from './project/20-configurable-mobile.vue';
 import BiZone from './project/6-zone.vue';
 import BiZoneMobile from './project/6-zone-mobile.vue';
+import BiOtc from './project/2-otc.vue';
+import BiJcyl from './project/10-jcyl.vue';
+import BiGradeHospital from './project/9-gradeHospital.vue';
 
 export default {
   name: 'XrkBi',
@@ -72,7 +87,10 @@ export default {
     BiConfigurable,
     BiConfigurableMobile,
     BiZone,
-    BiZoneMobile
+    BiZoneMobile,
+    BiOtc,
+    BiJcyl,
+    BiGradeHospital
   },
   methods: {
     setFontSize() {

src/packages/bi/src/mock/index.js

@@ -108,7 +108,9 @@ export const chartConfig = () => {
         toggleAxisContenteditable,
 
         xFactor,
-        yFactor
+        yFactor,
+
+        hideToggleAxis
       } = options;
       const title = blockTitle;
       const { x, y, data } = dealAxis(arr, isGroup);
@@ -129,6 +131,7 @@ export const chartConfig = () => {
             (typeof colourGroup === 'string' && colourGroup.split(',')) ||
             colors[0],
           data: data,
+          mapScatterData: arr,
           axis: [
             { factorName: xFactor, name: xAxisName, names: x },
             {
@@ -150,7 +153,8 @@ export const chartConfig = () => {
           hideChangeChart: hideTypes,
           contenteditable: !dontContenteditable,
           toggleAxisContenteditable: toggleAxisContenteditable,
-          customGroupTitle: customGroupTitle
+          customGroupTitle: customGroupTitle,
+          hideToggleAxis: hideToggleAxis
         },
         legend: {
           show: !hideLegend,

src/packages/bi/src/project/10-jcyl.vue

+<!--
+ * @Description: 
+ * @Date: 2021-06-17 20:27:04
+-->
+<template>
+  <div class="bi-zone">
+    <BiCover
+      :coverContent="coverContent"
+      ref="cover"
+      :coverList="coverList"
+      :coverId="coverId"
+      :coverUrl="coverUrl"
+      @change="
+        ({ id, templatePicUrl }) => {
+          coverId = id;
+          coverUrl = templatePicUrl;
+        }
+      "
+    ></BiCover>
+    <BiOverview
+      class="bi-block"
+      name="数据报告信息"
+      :title="projectName"
+      :data="baseInfo"
+    ></BiOverview>
+    <BiMission
+      class="bi-block"
+      name="项目执行人数据统计"
+      :data="missionData"
+    ></BiMission>
+    <BiSingleChoice
+      v-if="showSingleChoice.length > 0"
+      class="bi-block no-border"
+      :singleChoice="showSingleChoice"
+      :pageWrap="true"
+      @sort="sort(arguments, 'singleChoice', hideSingleChoice)"
+    >
+      <BiSingleChoiceInfo index="3" name="报告内容"></BiSingleChoiceInfo>
+    </BiSingleChoice>
+    <BiCoverEnd></BiCoverEnd>
+  </div>
+</template>
+
+<script>
+import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
+import BiCover from '../components/cover.vue';
+import BiOverview from '../components/overview.vue';
+import BiMission from '../components/mission.vue';
+import BiSingleChoice from '../components/singleChoice.vue';
+import BiCoverEnd from '../components/cover-end.vue';
+
+import mixin from '../mixin/index';
+/**
+ * dealSingleChoice、sort、setPage
+ */
+import project from '../mixin/project';
+
+import { chartConfig } from '../mock/index';
+const ChartConfigFn = chartConfig();
+
+import { date } from '../chart-type/common';
+import { dealAxis, dealLegends } from './tools';
+
+export default {
+  name: 'bi-zone',
+  mixins: [mixin, project],
+  components: {
+    BiSingleChoiceInfo,
+    BiCover,
+    BiOverview,
+    BiMission,
+    BiSingleChoice,
+    BiCoverEnd
+  },
+  data() {
+    return {
+      coverId: 0,
+      coverUrl: '',
+      coverContent: [],
+      coverList: [],
+      singleChoice: [],
+      singleChoiceMixin: [],
+      missionData: [],
+      projectName: '',
+      baseInfo: [],
+      biInfo: {}
+    };
+  },
+  computed: {
+    showSingleChoice() {
+      return this.dealSingleChoice(this.singleChoice);
+    },
+    hideSingleChoice() {
+      return this.dealSingleChoice(this.singleChoice, true);
+    },
+    showSingleChoiceMixin() {
+      return this.dealSingleChoice(this.singleChoiceMixin);
+    },
+    hideSingleChoiceMixin() {
+      return this.singleChoiceMixin.filter(item => item.isDelete == 1);
+    }
+  },
+  methods: {
+    dealBaseInfo(info) {
+      const {
+        biInfoId,
+        coverTemplateId, // 模板ID
+        coverTemplateUrl = '',
+        styleConfigureId, // 配置ID
+
+        title,
+        titlePosition,
+        aspEnterpriseNameWrite,
+        aspNamePosition,
+        settlementTime,
+        settlementTimePosition,
+
+        projectName = '-',
+        sendEnterpriseName = '-',
+        aspEnterpriseName = '-',
+        taskTime = 0,
+        taskStartTime,
+        taskEndTime,
+        taskSum,
+        executePeopleNumber,
+        createDt
+      } = info;
+      this.biInfo = {
+        biInfoId: biInfoId,
+        styleConfigureId
+      };
+      this.coverId = coverTemplateId;
+      this.coverUrl = coverTemplateUrl;
+      const biCreateDt = date.dateFormat(createDt, 'Y-M-D');
+      this.projectName = `${projectName}${biCreateDt}服务报告`;
+      this.coverContent = [
+        {
+          name: title,
+          pos: titlePosition
+        },
+        {
+          name: settlementTime,
+          pos: settlementTimePosition
+        },
+        {
+          name: aspEnterpriseNameWrite,
+          pos: aspNamePosition
+        }
+      ];
+      this.baseInfo = [
+        [
+          {
+            name: '发起方',
+            value: sendEnterpriseName
+          },
+          {
+            name: '服务商',
+            value: aspEnterpriseName
+          },
+          {
+            name: '任务时间',
+            value: `${taskTime}天`
+          }
+        ],
+        [
+          {
+            name: '任务开始时间',
+            value: taskStartTime
+          },
+          {
+            name: '任务结算时间',
+            value: taskEndTime
+          },
+          {
+            name: '报表生成时间',
+            value: biCreateDt
+          }
+        ],
+        [
+          {
+            name: '本期个人数据数',
+            value: executePeopleNumber
+          },
+          {
+            name: '累计个人数据总数',
+            value: taskSum
+          }
+        ]
+      ];
+    },
+    dealFixedInfo(infoArr) {
+      const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = infoArr;
+      this.missionData = [
+        ChartConfigFn.createConfig(dealAxis(group1.topicCountInfos), {
+          ...group1,
+          chartType: group1.chartType || 12,
+          legends: dealLegends(group1.topicCountInfos, '性', '性'),
+          blockTitle: '参与任务执行的性别分布',
+          legendName: '总参与项目执行人数${num}人',
+          hideDesc: true,
+          hideDelete: true,
+          dontContenteditable: true,
+          width: 520,
+          height: 350,
+          disableTypes: [3, 4],
+          extendTypes: [12]
+        }),
+        ChartConfigFn.createConfig(
+          dealAxis(group2.topicCountInfos, '', '以上'),
+          {
+            ...group2,
+            chartType: group2.chartType || 1,
+            legends: dealLegends(group2.topicCountInfos, '岁', '岁以上'),
+            blockTitle: '执行任务的年龄段',
+            legendName: '总参与项目执行人数${num}人',
+            hideDesc: true,
+            hideDelete: true,
+            dontContenteditable: true,
+            width: 520,
+            height: 350,
+            disableTypes: [3, 4]
+          }
+        ),
+        ChartConfigFn.createConfig(dealAxis(group3.topicCountInfos), {
+          ...group3,
+          resultIsShow: 1,
+          chartType: group3.chartType || 2,
+          legends: dealLegends(group3.topicCountInfos),
+          blockTitle: '任务审核状态',
+          hideDelete: true,
+          height: 400,
+          disableTypes: [3, 4]
+        }),
+        ChartConfigFn.createConfig(dealAxis(group4.topicCountInfos), {
+          ...group4,
+          resultIsShow: 1,
+          chartType: group4.chartType || 5,
+          legends: dealLegends(group4.topicCountInfos),
+          blockTitle: '项目参与人执行任务表',
+          hideDelete: true,
+          height: 400,
+          disableTypes: [3, 4]
+        })
+      ];
+    },
+    dealChoice(arr) {
+      const [visitHospital, visitTime, visitTimeCount, feedBack] = arr;
+      this.singleChoice = [
+        ChartConfigFn.createConfig(dealAxis(visitHospital.topicCountInfos), {
+          ...visitHospital,
+          chartType: 13,
+          hideLegend: true,
+          blockTitle: '拜访医院分布'
+        }),
+        ChartConfigFn.createConfig(dealAxis(visitTime.topicCountInfos), {
+          ...visitTime,
+          chartType: 5,
+          blockTitle: '拜访时间'
+        }),
+        ChartConfigFn.createConfig(dealAxis(visitTimeCount.topicCountInfos), {
+          ...visitTimeCount,
+          chartType: 1,
+          blockTitle: '拜访时长'
+        }),
+        ChartConfigFn.createConfig(dealAxis(feedBack.topicCountInfos), {
+          ...feedBack,
+          chartType: 10,
+          blockTitle: '客户反馈'
+        })
+      ];
+    },
+    exportBi() {
+      window.open(this.Bi.exportBi(), '_blank');
+    }
+  },
+  created() {
+    Promise.all([
+      this.Bi.getBaseInfo(),
+      this.Bi.getFixedInfo(),
+      this.Bi.getTopicInfo()
+    ])
+      .then(([baseInfo, fixedInfo, topicInfo]) => {
+        this.dealBaseInfo(baseInfo.data.data[0] || {});
+        this.dealFixedInfo(fixedInfo.data.data || []);
+        this.dealChoice(topicInfo.data.data || []);
+        this.$nextTick(async () => {
+          await this.preloadImg(this.coverUrl);
+          window.status = '1';
+        });
+      })
+      .catch(() => {
+        this.$nextTick(() => {
+          window.status = '1';
+        });
+      });
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bi-block {
+  // margin-top: 8px;
+}
+</style>

src/packages/bi/src/project/2-otc.vue

+<!--
+ * @Description: 
+ * @Date: 2021-06-17 20:27:04
+-->
+<template>
+  <div class="bi-zone">
+    <BiCover
+      :coverContent="coverContent"
+      ref="cover"
+      :coverList="coverList"
+      :coverId="coverId"
+      :coverUrl="coverUrl"
+      @change="
+        ({ id, templatePicUrl }) => {
+          coverId = id;
+          coverUrl = templatePicUrl;
+        }
+      "
+    ></BiCover>
+    <BiOverview
+      class="bi-block"
+      name="数据报告信息"
+      :title="projectName"
+      :data="baseInfo"
+    ></BiOverview>
+    <BiMission
+      class="bi-block"
+      name="项目执行人数据统计"
+      :data="missionData"
+    ></BiMission>
+    <BiSingleChoice
+      v-if="showSingleChoice.length > 0"
+      class="bi-block no-border"
+      :singleChoice="showSingleChoice"
+      :pageWrap="true"
+      @sort="sort(arguments, 'singleChoice', hideSingleChoice)"
+    >
+      <BiSingleChoiceInfo index="3" name="报告内容"></BiSingleChoiceInfo>
+    </BiSingleChoice>
+    <BiCoverEnd></BiCoverEnd>
+  </div>
+</template>
+
+<script>
+import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
+import BiCover from '../components/cover.vue';
+import BiOverview from '../components/overview.vue';
+import BiMission from '../components/mission.vue';
+import BiSingleChoice from '../components/singleChoice.vue';
+import BiCoverEnd from '../components/cover-end.vue';
+
+import mixin from '../mixin/index';
+/**
+ * dealSingleChoice、sort、setPage
+ */
+import project from '../mixin/project';
+
+import { chartConfig } from '../mock/index';
+const ChartConfigFn = chartConfig();
+
+import { date } from '../chart-type/common';
+import { dealAxis, dealLegends } from './tools';
+
+export default {
+  name: 'bi-zone',
+  mixins: [mixin, project],
+  components: {
+    BiSingleChoiceInfo,
+    BiCover,
+    BiOverview,
+    BiMission,
+    BiSingleChoice,
+    BiCoverEnd
+  },
+  data() {
+    return {
+      coverId: 0,
+      coverUrl: '',
+      coverContent: [],
+      coverList: [],
+      singleChoice: [],
+      singleChoiceMixin: [],
+      missionData: [],
+      projectName: '',
+      baseInfo: [],
+      biInfo: {}
+    };
+  },
+  computed: {
+    showSingleChoice() {
+      return this.dealSingleChoice(this.singleChoice);
+    },
+    hideSingleChoice() {
+      return this.dealSingleChoice(this.singleChoice, true);
+    },
+    showSingleChoiceMixin() {
+      return this.dealSingleChoice(this.singleChoiceMixin);
+    },
+    hideSingleChoiceMixin() {
+      return this.singleChoiceMixin.filter(item => item.isDelete == 1);
+    }
+  },
+  methods: {
+    dealBaseInfo(info) {
+      const {
+        biInfoId,
+        coverTemplateId, // 模板ID
+        coverTemplateUrl = '',
+        styleConfigureId, // 配置ID
+
+        title,
+        titlePosition,
+        aspEnterpriseNameWrite,
+        aspNamePosition,
+        settlementTime,
+        settlementTimePosition,
+
+        projectName = '-',
+        sendEnterpriseName = '-',
+        aspEnterpriseName = '-',
+        taskTime = 0,
+        taskStartTime,
+        taskEndTime,
+        taskSum,
+        executePeopleNumber,
+        createDt
+      } = info;
+      this.biInfo = {
+        biInfoId: biInfoId,
+        styleConfigureId
+      };
+      this.coverId = coverTemplateId;
+      this.coverUrl = coverTemplateUrl;
+      const biCreateDt = date.dateFormat(createDt, 'Y-M-D');
+      this.projectName = `${projectName}${biCreateDt}服务报告`;
+      this.coverContent = [
+        {
+          name: title,
+          pos: titlePosition
+        },
+        {
+          name: settlementTime,
+          pos: settlementTimePosition
+        },
+        {
+          name: aspEnterpriseNameWrite,
+          pos: aspNamePosition
+        }
+      ];
+      this.baseInfo = [
+        [
+          {
+            name: '发起方',
+            value: sendEnterpriseName
+          },
+          {
+            name: '服务商',
+            value: aspEnterpriseName
+          },
+          {
+            name: '任务时间',
+            value: `${taskTime}天`
+          }
+        ],
+        [
+          {
+            name: '任务开始时间',
+            value: taskStartTime
+          },
+          {
+            name: '任务结算时间',
+            value: taskEndTime
+          },
+          {
+            name: '报表生成时间',
+            value: biCreateDt
+          }
+        ],
+        [
+          {
+            name: '本期个人数据数',
+            value: executePeopleNumber
+          },
+          {
+            name: '累计个人数据总数',
+            value: taskSum
+          }
+        ]
+      ];
+    },
+    dealFixedInfo(infoArr) {
+      const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = infoArr;
+      this.missionData = [
+        ChartConfigFn.createConfig(dealAxis(group1.topicCountInfos), {
+          ...group1,
+          chartType: group1.chartType || 12,
+          legends: dealLegends(group1.topicCountInfos, '性', '性'),
+          blockTitle: '参与任务执行的性别分布',
+          legendName: '总参与项目执行人数${num}人',
+          hideDesc: true,
+          hideDelete: true,
+          dontContenteditable: true,
+          width: 520,
+          height: 350,
+          disableTypes: [3, 4],
+          extendTypes: [12]
+        }),
+        ChartConfigFn.createConfig(
+          dealAxis(group2.topicCountInfos, '', '以上'),
+          {
+            ...group2,
+            chartType: group2.chartType || 1,
+            legends: dealLegends(group2.topicCountInfos, '岁', '岁以上'),
+            blockTitle: '执行任务的年龄段',
+            legendName: '总参与项目执行人数${num}人',
+            hideDesc: true,
+            hideDelete: true,
+            dontContenteditable: true,
+            width: 520,
+            height: 350,
+            disableTypes: [3, 4]
+          }
+        ),
+        ChartConfigFn.createConfig(dealAxis(group3.topicCountInfos), {
+          ...group3,
+          resultIsShow: 1,
+          chartType: group3.chartType || 2,
+          legends: dealLegends(group3.topicCountInfos),
+          blockTitle: '任务审核状态',
+          hideDelete: true,
+          height: 400,
+          disableTypes: [3, 4]
+        }),
+        ChartConfigFn.createConfig(dealAxis(group4.topicCountInfos), {
+          ...group4,
+          resultIsShow: 1,
+          chartType: group4.chartType || 5,
+          legends: dealLegends(group4.topicCountInfos),
+          blockTitle: '项目参与人执行任务表',
+          hideDelete: true,
+          height: 400,
+          disableTypes: [3, 4]
+        })
+      ];
+    },
+    dealChoice(arr) {
+      const [
+        xundian,
+        dayTime,
+        productPrice,
+        display,
+        kucun,
+        pop,
+        maidian,
+        location
+      ] = arr;
+      this.singleChoice = [
+        ChartConfigFn.createConfig(
+          dealAxis(
+            Object.entries(xundian.visitTime[0]).reduce((pre, cur) => {
+              const [name, arr = []] = cur;
+              pre = pre.concat(
+                arr.map(item => ({
+                  ...item,
+                  yTopicName: name
+                }))
+              );
+              return pre;
+            }, [])
+          ),
+          {
+            ...xundian,
+            isGroup: true,
+            hideToggleAxis: true,
+            chartType: 5,
+            blockTitle: '巡店时间'
+          }
+        ),
+        ChartConfigFn.createConfig(dealAxis(dayTime.topicCountInfos), {
+          ...dayTime,
+          chartType: 1,
+          blockTitle: '每日时间分布'
+        }),
+        ChartConfigFn.createConfig(dealAxis(productPrice.topicCountInfos), {
+          ...productPrice,
+          chartType: 5,
+          blockTitle: '产品售价（元）'
+        }),
+        ChartConfigFn.createConfig(dealAxis(display.topicCountInfos), {
+          ...display,
+          chartType: 6,
+          blockTitle: '陈列状态'
+        }),
+        ChartConfigFn.createConfig(dealAxis(kucun.topicCountInfos), {
+          ...kucun,
+          chartType: 5,
+          blockTitle: '库存'
+        }),
+        ChartConfigFn.createConfig(dealAxis(pop.topicCountInfos), {
+          ...pop,
+          chartType: 9,
+          blockTitle: '是否有产品POP'
+        }),
+        ChartConfigFn.createConfig(dealAxis(maidian.topicCountInfos), {
+          ...maidian,
+          chartType: 1,
+          blockTitle: '店员是否知道卖点'
+        }),
+        ChartConfigFn.createConfig(location.latAndLon, {
+          ...location,
+          hideLegend: true,
+          chartType: 14,
+          blockTitle: '药店定位'
+        })
+      ];
+    },
+    exportBi() {
+      window.open(this.Bi.exportBi(), '_blank');
+    }
+  },
+  created() {
+    Promise.all([
+      this.Bi.getBaseInfo(),
+      this.Bi.getFixedInfo(),
+      this.Bi.getTopicInfo()
+    ])
+      .then(([baseInfo, fixedInfo, topicInfo]) => {
+        this.dealBaseInfo(baseInfo.data.data[0] || {});
+        this.dealFixedInfo(fixedInfo.data.data || []);
+        this.dealChoice(topicInfo.data.data || []);
+        this.$nextTick(async () => {
+          await this.preloadImg(this.coverUrl);
+          window.status = '1';
+        });
+      })
+      .catch(() => {
+        this.$nextTick(() => {
+          window.status = '1';
+        });
+      });
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bi-block {
+  // margin-top: 8px;
+}
+</style>

src/packages/bi/src/project/9-gradeHospital.vue

+<!--
+ * @Description: 
+ * @Date: 2021-06-17 20:27:04
+-->
+<template>
+  <div class="bi-zone">
+    <BiCover
+      :coverContent="coverContent"
+      ref="cover"
+      :coverList="coverList"
+      :coverId="coverId"
+      :coverUrl="coverUrl"
+      @change="
+        ({ id, templatePicUrl }) => {
+          coverId = id;
+          coverUrl = templatePicUrl;
+        }
+      "
+    ></BiCover>
+    <BiOverview
+      class="bi-block"
+      name="数据报告信息"
+      :title="projectName"
+      :data="baseInfo"
+    ></BiOverview>
+    <BiMission
+      class="bi-block"
+      name="项目执行人数据统计"
+      :data="missionData"
+    ></BiMission>
+    <BiSingleChoice
+      v-if="showSingleChoice.length > 0"
+      class="bi-block no-border"
+      :singleChoice="showSingleChoice"
+      :pageWrap="true"
+      @sort="sort(arguments, 'singleChoice', hideSingleChoice)"
+    >
+      <BiSingleChoiceInfo index="3" name="报告内容"></BiSingleChoiceInfo>
+    </BiSingleChoice>
+    <BiCoverEnd></BiCoverEnd>
+  </div>
+</template>
+
+<script>
+import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
+import BiCover from '../components/cover.vue';
+import BiOverview from '../components/overview.vue';
+import BiMission from '../components/mission.vue';
+import BiSingleChoice from '../components/singleChoice.vue';
+import BiCoverEnd from '../components/cover-end.vue';
+
+import mixin from '../mixin/index';
+/**
+ * dealSingleChoice、sort、setPage
+ */
+import project from '../mixin/project';
+
+import { chartConfig } from '../mock/index';
+const ChartConfigFn = chartConfig();
+
+import { date } from '../chart-type/common';
+import { dealAxis, dealLegends } from './tools';
+
+export default {
+  name: 'bi-zone',
+  mixins: [mixin, project],
+  components: {
+    BiSingleChoiceInfo,
+    BiCover,
+    BiOverview,
+    BiMission,
+    BiSingleChoice,
+    BiCoverEnd
+  },
+  data() {
+    return {
+      coverId: 0,
+      coverUrl: '',
+      coverContent: [],
+      coverList: [],
+      singleChoice: [],
+      singleChoiceMixin: [],
+      missionData: [],
+      projectName: '',
+      baseInfo: [],
+      biInfo: {}
+    };
+  },
+  computed: {
+    showSingleChoice() {
+      return this.dealSingleChoice(this.singleChoice);
+    },
+    hideSingleChoice() {
+      return this.dealSingleChoice(this.singleChoice, true);
+    },
+    showSingleChoiceMixin() {
+      return this.dealSingleChoice(this.singleChoiceMixin);
+    },
+    hideSingleChoiceMixin() {
+      return this.singleChoiceMixin.filter(item => item.isDelete == 1);
+    }
+  },
+  methods: {
+    dealBaseInfo(info) {
+      const {
+        biInfoId,
+        coverTemplateId, // 模板ID
+        coverTemplateUrl = '',
+        styleConfigureId, // 配置ID
+
+        title,
+        titlePosition,
+        aspEnterpriseNameWrite,
+        aspNamePosition,
+        settlementTime,
+        settlementTimePosition,
+
+        projectName = '-',
+        sendEnterpriseName = '-',
+        aspEnterpriseName = '-',
+        taskTime = 0,
+        taskStartTime,
+        taskEndTime,
+        taskSum,
+        executePeopleNumber,
+        createDt
+      } = info;
+      this.biInfo = {
+        biInfoId: biInfoId,
+        styleConfigureId
+      };
+      this.coverId = coverTemplateId;
+      this.coverUrl = coverTemplateUrl;
+      const biCreateDt = date.dateFormat(createDt, 'Y-M-D');
+      this.projectName = `${projectName}${biCreateDt}服务报告`;
+      this.coverContent = [
+        {
+          name: title,
+          pos: titlePosition
+        },
+        {
+          name: settlementTime,
+          pos: settlementTimePosition
+        },
+        {
+          name: aspEnterpriseNameWrite,
+          pos: aspNamePosition
+        }
+      ];
+      this.baseInfo = [
+        [
+          {
+            name: '发起方',
+            value: sendEnterpriseName
+          },
+          {
+            name: '服务商',
+            value: aspEnterpriseName
+          },
+          {
+            name: '任务时间',
+            value: `${taskTime}天`
+          }
+        ],
+        [
+          {
+            name: '任务开始时间',
+            value: taskStartTime
+          },
+          {
+            name: '任务结算时间',
+            value: taskEndTime
+          },
+          {
+            name: '报表生成时间',
+            value: biCreateDt
+          }
+        ],
+        [
+          {
+            name: '本期个人数据数',
+            value: executePeopleNumber
+          },
+          {
+            name: '累计个人数据总数',
+            value: taskSum
+          }
+        ]
+      ];
+    },
+    dealFixedInfo(infoArr) {
+      const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = infoArr;
+      this.missionData = [
+        ChartConfigFn.createConfig(dealAxis(group1.topicCountInfos), {
+          ...group1,
+          chartType: group1.chartType || 12,
+          legends: dealLegends(group1.topicCountInfos, '性', '性'),
+          blockTitle: '参与任务执行的性别分布',
+          legendName: '总参与项目执行人数${num}人',
+          hideDesc: true,
+          hideDelete: true,
+          dontContenteditable: true,
+          width: 520,
+          height: 350,
+          disableTypes: [3, 4],
+          extendTypes: [12]
+        }),
+        ChartConfigFn.createConfig(
+          dealAxis(group2.topicCountInfos, '', '以上'),
+          {
+            ...group2,
+            chartType: group2.chartType || 1,
+            legends: dealLegends(group2.topicCountInfos, '岁', '岁以上'),
+            blockTitle: '执行任务的年龄段',
+            legendName: '总参与项目执行人数${num}人',
+            hideDesc: true,
+            hideDelete: true,
+            dontContenteditable: true,
+            width: 520,
+            height: 350,
+            disableTypes: [3, 4]
+          }
+        ),
+        ChartConfigFn.createConfig(dealAxis(group3.topicCountInfos), {
+          ...group3,
+          resultIsShow: 1,
+          chartType: group3.chartType || 2,
+          legends: dealLegends(group3.topicCountInfos),
+          blockTitle: '任务审核状态',
+          hideDelete: true,
+          height: 400,
+          disableTypes: [3, 4]
+        }),
+        ChartConfigFn.createConfig(dealAxis(group4.topicCountInfos), {
+          ...group4,
+          resultIsShow: 1,
+          chartType: group4.chartType || 5,
+          legends: dealLegends(group4.topicCountInfos),
+          blockTitle: '项目参与人执行任务表',
+          hideDelete: true,
+          height: 400,
+          disableTypes: [3, 4]
+        })
+      ];
+    },
+    dealChoice(arr) {
+      const [
+        visitHospital,
+        hospitalGrade,
+        keshi,
+        hospitalName,
+        xundian,
+        dayTime,
+        visitTimeCount
+      ] = arr;
+      this.singleChoice = [
+        ChartConfigFn.createConfig(dealAxis(visitHospital.topicCountInfos), {
+          ...visitHospital,
+          chartType: 13,
+          hideLegend: true,
+          blockTitle: '拜访医院分布'
+        }),
+        ChartConfigFn.createConfig(dealAxis(hospitalGrade.topicCountInfos), {
+          ...hospitalGrade,
+          chartType: 5,
+          blockTitle: '医院等级分布'
+        }),
+        ChartConfigFn.createConfig(dealAxis(keshi.topicCountInfos), {
+          ...keshi,
+          chartType: 2,
+          blockTitle: '科室分布'
+        }),
+        ChartConfigFn.createConfig(dealAxis(hospitalName.topicCountInfos), {
+          ...hospitalName,
+          chartType: 1,
+          blockTitle: '医院职称'
+        }),
+        ChartConfigFn.createConfig(
+          dealAxis(
+            Object.entries(xundian.visitTime[0]).reduce((pre, cur) => {
+              const [name, arr = []] = cur;
+              pre = pre.concat(
+                arr.map(item => ({
+                  ...item,
+                  yTopicName: name
+                }))
+              );
+              return pre;
+            }, [])
+          ),
+          {
+            ...xundian,
+            isGroup: true,
+            hideToggleAxis: true,
+            chartType: 5,
+            blockTitle: '拜访时间'
+          }
+        ),
+        ChartConfigFn.createConfig(dealAxis(dayTime.topicCountInfos), {
+          ...dayTime,
+          chartType: 1,
+          blockTitle: '每日时间分布'
+        }),
+        ChartConfigFn.createConfig(dealAxis(visitTimeCount.topicCountInfos), {
+          ...visitTimeCount,
+          chartType: 6,
+          blockTitle: '拜访时长'
+        })
+      ];
+    },
+    exportBi() {
+      window.open(this.Bi.exportBi(), '_blank');
+    }
+  },
+  created() {
+    Promise.all([
+      this.Bi.getBaseInfo(),
+      this.Bi.getFixedInfo(),
+      this.Bi.getTopicInfo()
+    ])
+      .then(([baseInfo, fixedInfo, topicInfo]) => {
+        this.dealBaseInfo(baseInfo.data.data[0] || {});
+        this.dealFixedInfo(fixedInfo.data.data || []);
+        this.dealChoice(topicInfo.data.data || []);
+        this.$nextTick(async () => {
+          await this.preloadImg(this.coverUrl);
+          window.status = '1';
+        });
+      })
+      .catch(() => {
+        this.$nextTick(() => {
+          window.status = '1';
+        });
+      });
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bi-block {
+  // margin-top: 8px;
+}
+</style>