cpdm_manage/src/components/CompareOrigin.vue

<template>
    <div>
      <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="60%" style="border-radius: 40px">
        <div slot="title">
          <p style="text-align: center; margin-bottom: 20px; font-weight: 700">
            <!-- {{ planName }}完成及得分情况 -->
            专业报告对比
          </p>
          <div class="c_wrap">
            <p class="c_name">
                
            </p>
            <div class="c_main">
              <div class="chart_wrap">
                <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options2" chartId="myPieChart2" chartName="焦虑" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options3" chartId="myPieChart3" chartName="抑郁" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options4" chartId="myPieChart4" chartName="压力" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options5" chartId="myPieChart5" chartName="精神障碍" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options6" chartId="myPieChart6" chartName="存在心理健康情况" />
              </div>
            </div>
            <p class="c_name">{{ comparePlanList[1].planName }}</p>
            <div class="c_main">
              <div class="chart_wrap">
                <PieChart :options="options7" chartId="myPieChart7" chartName="完成度" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options8" chartId="myPieChart8" chartName="焦虑" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options9" chartId="myPieChart9" chartName="抑郁" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options10" chartId="myPieChart10" chartName="压力" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options11" chartId="myPieChart11" chartName="精神障碍" />
              </div>
              <div class="chart_wrap">
                <PieChart :options="options12" chartId="myPieChart12" chartName="存在心理健康情况" />
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
  
      <div></div>
    </div>
  </template>
  <script>
  //引入echarts组件
  import * as echarts from "echarts";
  import PieChart from "@/components/PieChart";
  
  export default {
    components: {
      PieChart,
    },
    data() {
      return {
        dialogVisible: false,
        options1: [],
        options2: [],
        options3: [],
        options4: [],
        options5: [],
        options6: [],
        options7: [],
        options8: [],
        options9: [],
        options10: [],
        options11: [],
        options12: [],
        completeNum: 0,
        unComplete: 0,
        userType: "",
        comparePlanList: [],
        comparePlanDate: []
      };
    },
    mounted() {
  
    },
    methods: {
      open(arr) {
        this.comparePlanList = arr;
        this.queryCompletePople(0);
        this.queryCompletePople(1);
        this.dialogVisible = true;
      },
  
      // 查询计划完成和未完成人数
      queryCompletePople(i) {
        //调用接口返回信息
        let url = `/plan/countComplete?planId=${this.comparePlanList[i].id}`;
        this.$http.get(url, {}, (res) => {
          if (res.code == 200) {
            this.comparePlanDate[i] = { 'unComplete': res.data[0], 'completeNum': res.data[1] }
            this.getPlanDimNun(i);
          }
        });
      },
  
      // 查询不同维度的中重度数量
      getPlanDimNun(i) {
        this.$http.get(
          `userRecordScore/countNumByPlanDim?planId=${this.comparePlanList[i].id}`,
          {},
          (res) => {
            let dimensionList = res.data;
            if (i == 0) {
              this.options1 = [
                { value: this.comparePlanDate[0].completeNum + this.comparePlanDate[0].unComplete, name: "已完成人数" },
                { value: this.comparePlanDate[0].unComplete, name: "未完成占比" },
              ];
  
              this.options2 = [
                { value: this.comparePlanDate[0].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
                { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
              ];
  
              this.options3 = [
                { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
                { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
              ];
  
              this.options4 = [
                { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
                { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
              ];
  
              this.options5 = [
                { value: this.comparePlanDate[0].completeNum, name: "已完成人数" },
                { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
              ];
  
              this.options6 = [
                {
                  value: this.comparePlanDate[0].completeNum - dimensionList[3]["精神障碍"],
                  name: "已完成人数",
                },
                { value: dimensionList[3]["精神障碍"], name: "精神障碍" },
              ];
            } else {
              this.options7 = [
                { value: this.comparePlanDate[1].completeNum + this.unComplete, name: "已完成人数" },
                { value: this.comparePlanDate[1].unComplete, name: "未完成占比" },
              ];
              this.options8 = [
                { value: this.comparePlanDate[1].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
                { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
              ];
  
              this.options9 = [
                { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
                { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
              ];
  
              this.options10 = [
                { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
                { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
              ];
  
              this.options11 = [
                { value: this.comparePlanDate[1].completeNum, name: "已完成人数" },
                { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
              ];
  
              this.options12 = [
                {
                  value: this.comparePlanDate[1].completeNum - dimensionList[3]["精神障碍"],
                  name: "已完成人数",
                },
                { value: dimensionList[3]["精神障碍"], name: "精神障碍" },
              ];
            }
          }
        );
      }
    },
  };
  </script>
  <style lang="less" scoped>
  .c_wrap {
    // display: flex;
    width: 100%;
  }
  
  .c_main {
    width: 100%;
    display: flex;
  }
  
  .pag_class /deep/ .el-input__inner {
    width: 100% !important;
  }
  
  .chart_wrap {
    flex: 1;
    height: 200px;
  }
  </style>