20-configurable.vue

<!--
 * @Description: 
 * @Date: 2021-06-17 20:27:04
-->
<template>
  <div class="bi-configurable">
    <BiCover
      :coverContent="coverContent"
      ref="cover"
      :coverList="coverList"
      :coverId="coverId"
      :coverUrl="coverUrl"
      @change="
        ({ id, templatePicUrl }) => {
          coverId = id;
          coverUrl = templatePicUrl;
        }
      "
    ></BiCover>
    <BiCatalogue class="bi-block" :catalogueArr="catalogueArr"></BiCatalogue>
    <BiOverview
      class="bi-block"
      name="项目总览"
      :title="projectName"
      :data="baseInfo"
      :textWrap="true"
    ></BiOverview>
    <BiMission
      class="bi-block"
      name="项目执行任务模块"
      :data="missionData"
      @page="setPage(arguments, 'page1')"
    ></BiMission>
    <BiSingleChoice
      v-if="showSingleChoice.length > 0"
      class="bi-block no-border"
      :singleChoice="showSingleChoice"
      :pageWrap="true"
      @sort="sort(arguments, 'singleChoice', hideSingleChoice)"
      @page="setPage(arguments, 'page2')"
    >
      <BiSingleChoiceInfo
        index="3"
        name="项目相关调研模块"
        :info="textData"
      ></BiSingleChoiceInfo>
    </BiSingleChoice>
    <BiSingleChoice
      v-if="showSingleChoiceMixin.length > 0"
      class="bi-block no-border"
      :singleChoice="showSingleChoiceMixin"
      :pageWrap="true"
      @sort="sort(arguments, 'singleChoiceMixin', hideSingleChoiceMixin)"
      @page="setPage(arguments, 'page3', 'page3Info')"
    ></BiSingleChoice>
    <BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
    <BiOperate
      :questionData="[...singleChoice, ...singleChoiceMixin]"
      :saveInfo="saveInfo"
      :exportBi="exportBi"
    ></BiOperate>
  </div>
</template>

<script>
import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
import BiCover from '../components/cover.vue';
import BiCatalogue from '../components/catalogue.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 BiOperate from '../components/operate.vue';
import mixin, { printWidth } from '../mixin/index';
/**
 * dealSingleChoice、sort、setPage
 */
import project from '../mixin/project';

import { chartConfig } from '../mock/index';
import { date } from '../chart-type/common';
const ChartConfigFn = chartConfig();

import {
  dealAxis,
  dealLegends,
  randomType,
  chartConfigToSetInfo
} from './tools';

export default {
  name: 'bi-configurable',
  mixins: [mixin, project],
  components: {
    BiCover,
    BiCatalogue,
    BiOverview,
    BiMission,
    BiSingleChoice,
    BiSingleChoiceInfo,
    BiCoverEnd,
    BiOperate
  },
  data() {
    return {
      page1: 0,
      page2: 0,
      page3Info: [],
      singleChoice: [],
      singleChoiceMixin: [],
      missionData: [],
      coverId: 0,
      coverUrl: '',
      coverContent: [],
      coverList: [],
      projectName: '',
      baseInfo: [],
      textData: [],
      biInfo: {}
    };
  },
  computed: {
    catalogueArr() {
      const { page1 = 0, page2 = 0, page3Info = [] } = this;
      return [
        {
          name: '项目总览',
          child: [
            {
              name: '项目总览',
              page: 1
            }
          ]
        },
        {
          name: '项目执行任务模块',
          child: [
            // {
            //   name: '任务量分析',
            //   page: page1 + 1
            // },
            {
              name: '执行任务人员画像',
              page: page1 + 1
            },
            {
              name: '项目参与人完成任务区间分布',
              page: page1 + 1
            }
          ]
        },
        {
          name: '项目相关调研模块',
          child: [
            {
              name: '单因素分析',
              page: page1 + 2
            },
            ...page3Info
              .filter(item => item.name)
              .map(item => {
                return {
                  ...item,
                  page: page1 + 1 + page2 + item.page
                };
              })
          ]
        }
      ];
    },
    showSingleChoice() {
      return this.dealSingleChoice(this.singleChoice);
    },
    hideSingleChoice() {
      return this.dealSingleChoice(this.singleChoice, true);
    },
    showSingleChoiceMixin() {
      return this.dealSingleChoice(this.singleChoiceMixin);
    },
    hideSingleChoiceMixin() {
      return this.dealSingleChoice(this.singleChoiceMixin, true);
    }
  },
  methods: {
    dealPos(dis) {
      return dis * (this.isPrint ? printWidth : this.baseFontSize);
    },
    dealBaseInfo(info) {
      const {
        id,
        coverTemplateId, // 模板ID
        coverTemplateUrl = '',
        styleConfigureId, // 配置ID

        title,
        titlePosition,
        aspEnterpriseNameWrite,
        aspNamePosition,
        styleConfigureSettlementTime,
        styleConfigureSettlementTimePosition,

        projectName = '-',
        sendEnterpriseName = '-',
        aspEnterpriseName = '-',
        settlementTime,
        taskSum,
        executePeopleNumber,
        dataCollectNumber,
        examinePeopleNumber,
        createDt,

        totalTopicNum,
        chooseTopicNum,
        isContrainGroupAnalyse,
        isContrainSingleAnalyse
      } = info;
      this.biInfo = {
        biInfoId: id,
        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: styleConfigureSettlementTime,
          pos: styleConfigureSettlementTimePosition
        },
        {
          name: aspEnterpriseNameWrite,
          pos: aspNamePosition
        }
      ];
      this.baseInfo = [
        [
          {
            name: '项目名称',
            value: projectName
          },
          {
            name: '发起方',
            value: sendEnterpriseName
          },
          {
            name: '服务商',
            value: aspEnterpriseName
          }
        ],
        [
          {
            name: '提交时间',
            value: settlementTime
          },
          {
            name: '任务数量',
            value: taskSum
          },
          {
            name: '项目执行人数',
            value: `${executePeopleNumber}人`
          }
        ],
        [
          {
            name: '数据收集数',
            value: `${dataCollectNumber}条`
          },
          {
            name: '参与调研样本',
            value: `${examinePeopleNumber}份`
          },
          {
            name: '报表生成时间',
            value: biCreateDt
          }
        ]
      ];
      this.textData = [
        [
          {
            name: '总参与题目：',
            value: `${totalTopicNum}题`
          },
          {
            name: '当前选取报告输出题目：',
            value: `${chooseTopicNum}题`
          }
        ],
        [
          {
            name: '总参与数(人或者机构):',
            value: executePeopleNumber
          },
          {
            name: '分析维度：',
            value: [
              { show: isContrainSingleAnalyse, name: '主体分析' },
              { show: isContrainGroupAnalyse, name: '交叉分析' }
            ]
              .filter(item => item.show == 1)
              .map(item => item.name)
              .join('+')
          }
        ]
      ];
    },
    dealFixedInfo(infoArr) {
      // eslint-disable-next-line no-unused-vars
      const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = infoArr;
      this.missionData = [
        ChartConfigFn.createConfig(dealAxis(group1.fixedCountInfos), {
          ...group1,
          chartType: group1.chartType || 12,
          legends: dealLegends(group1.fixedCountInfos, '性'),
          blockTitle: '参与任务执行的性别分布',
          legendName: '总参与项目执行人数${num}人',
          hideDesc: true,
          hideDelete: true,
          dontContenteditable: true,
          width: 520,
          height: 350,
          disableTypes: [3, 4],
          extendTypes: [12]
        }),
        ChartConfigFn.createConfig(dealAxis(group2.fixedCountInfos), {
          ...group2,
          chartType: group2.chartType || 1,
          legends: dealLegends(group2.fixedCountInfos),
          blockTitle: '执行任务的年龄段',
          legendName: '总参与项目执行人数${num}人',
          hideDesc: true,
          hideDelete: true,
          dontContenteditable: true,
          width: 520,
          height: 350,
          disableTypes: [3, 4]
        }),
        ChartConfigFn.createConfig([], {
          ...group4,
          resultSystem: `${group1.resultSystem}，${group2.resultSystem}`,
          hideLegend: true,
          hideChart: true,
          hideTitle: true
        }),
        ChartConfigFn.createConfig(dealAxis(group3.fixedCountInfos), {
          ...group3,
          chartType: group3.chartType || 2,
          legends: dealLegends(group3.fixedCountInfos),
          blockTitle: '项目参与人完成任务区间分布',
          legendName: '总参与项目执行人数${num}人',
          hideDelete: true,
          dontContenteditable: true,
          height: 400,
          disableTypes: [3, 4]
        })
      ];
    },
    dealChoice(arr) {
      this.singleChoice = arr
        .map(item => {
          return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
            ...item,
            blockTitle: item.topicTitle,
            chartType: item.chartType || randomType([1, 2, 5, 6, 9, 10, 11]),
            disableTypes: [3, 4]
          });
        })
        .sort((a, b) => {
          if (a.sort < b.sort) {
            return -1;
          }
        });
    },
    dealChoiceMixin(arr) {
      this.singleChoiceMixin = arr
        .map(item => {
          return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
            ...item,
            xAxisName: item.title,
            yAxisName: item.secondTitle,
            isGroup: true,
            dontContenteditable: true,
            toggleAxisContenteditable: true,
            blockTitle: `${item.xFactor}因素与${item.yFactor}因素相关性分析`,
            chartType:
              item.chartType || randomType([1, 2, 3, 4, 5, 6, 9, 10, 11])
          });
        })
        .sort((a, b) => {
          if (a.sort < b.sort) {
            return -1;
          }
        });
    },
    saveInfo() {
      const { biInfoId, styleConfigureId } = this.biInfo;
      const { content } = this.$refs['cover'];
      return this.Bi.saveInfo({
        biInfoId: biInfoId,
        commandType: 2,
        biStyleConfigureInfo: {
          aspEnterpriseNameWrite: content[2].name || '', //乙方封面名称
          aspNamePosition: JSON.stringify(content[2].pos), //乙方封面名称位置
          styleConfigId: styleConfigureId, //封面配置ID
          coverTemplateId: this.coverId, //封面ID
          settlementTime: content[1].name || '', //封面时间
          settlementTimePosition: JSON.stringify(content[1].pos), //封面时间位置
          title: content[0].name || '', //封面标题
          titlePosition: JSON.stringify(content[0].pos) //标题位置
        },
        makeSceneFixedDetailInfos: chartConfigToSetInfo(this.missionData),
        makeSceneStyleConfigureTopicDetailInfos: chartConfigToSetInfo(
          this.singleChoice
        ),
        makeSceneGroupDetails: chartConfigToSetInfo(this.singleChoiceMixin)
      });
    },
    exportBi() {
      window.open(this.Bi.exportBi(), '_blank');
    }
  },
  created() {
    Promise.all([
      this.Bi.getBaseInfo(),
      this.Bi.getFixedInfo(),
      this.Bi.getTopicInfo(),
      this.Bi.getGroupInfo(),
      this.Bi.getTemplateList()
    ])
      .then(
        ([
          baseInfo,
          fixedInfo,
          topicInfo,
          topicMixinInfo,
          tempaletList = { data: { data: [] } }
        ]) => {
          this.dealBaseInfo(baseInfo.data.data[0] || {});
          this.dealFixedInfo(fixedInfo.data.data || []);
          this.dealChoice(topicInfo.data.data || []);
          this.dealChoiceMixin(topicMixinInfo.data.data || []);
          this.coverList = tempaletList.data.data || [];
          window.status = '1';
        }
      )
      .catch(() => {
        window.status = '1';
      });
  }
};
</script>
<style lang="scss" scoped>
.bi-block {
  margin-top: 8px;
}
</style>