cpdm_manage/src/components/ComparePlanProfession.vue

<template>
  <div style="width: 100%;">
    <div slot="title">
      <p class="title">专业报告对比</p>
    </div>
    <div class="c_wrap">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="首选项">
          <el-select v-model="selectPlan1" placeholder="请选择计划" @change="firstParamsHandle">
            <el-option :label="计划" value="1"></el-option>
            <el-option :label="组织" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称">
          <el-select v-model="selectPlan1" placeholder="请选择计划" @change="planSelectHandle1">
            <el-option v-for="item in planList" :key="item.id" :label="item.planName" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组织名称">
          <el-select v-model="orgInfo1" placeholder="请选择组织" @change="orgSelectHandle1">
            <el-option v-for="item in organizationsList" :key="item.id" :label="item.orgName" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="chart_wrap">
        <div class="c_main1">
          <!-- <p class="c_name">{{ selectPlan1.planName }} - {{ orgInfo1.orgName }}</p> -->
          <div id="my_chart" style="width: 100%;height: 500px;"></div>
        </div>
        <div class="c_main2">
          <table v-if="showTable">
            <tr>
              <th class="first">组织</th>
              <th>一班</th>
              <th>二班</th>
            </tr>
            <tr>
              <td class="first">总人数</td>
              <td>{{ unComplete1 + completeNum1 }}
              </td>
              <td>{{ unComplete2 + completeNum2 }}
              </td>
            </tr>
            <tr>
              <td class="first">已完成人数</td>
              <td>{{ completeNum1 }}</td>
              <td>{{ completeNum2 }}</td>
            </tr>
            <tr>
              <td class="first">未完成人数</td>
              <td>{{ unComplete1 }}</td>
              <td>{{ unComplete2 }}</td>
            </tr>
            <tr>
              <td class="first">未完成占比</td>
              <td>{{ getUnCompleteRate(1) }}</td>
              <td>{{ getUnCompleteRate(2) }}</td>
            </tr>

            <tr>
              <td class="first">焦虑人数</td>
              <td>{{ dimensionList1[0]['焦虑'] }}</td>
              <td>{{ dimensionList2[0]['焦虑'] }}</td>
            </tr>
            <tr>
              <td class="first">焦虑占比</td>
              <td>{{ getOtherRate('焦虑', 1, 0) }}</td>
              <td>{{ getOtherRate('焦虑', 2, 0) }}</td>
            </tr>
            <tr>
              <td class="first">抑郁人数</td>
              <td>{{ dimensionList1[1]['抑郁'] }}</td>
              <td>{{ dimensionList2[1]['抑郁'] }}</td>
            </tr>
            <tr>
              <td class="first">抑郁占比</td>
              <td>{{ getOtherRate('抑郁', 1, 1) }}</td>
              <td>{{ getOtherRate('抑郁', 2, 1) }}</td>
            </tr>
            <tr>
              <td class="first">压力人数</td>
              <td>{{ dimensionList1[2]['压力'] }}</td>
              <td>{{ dimensionList2[2]['压力'] }}</td>
            </tr>
            <tr>
              <td class="first">压力占比</td>
              <td>{{ getOtherRate('压力', 1, 2) }}</td>
              <td>{{ getOtherRate('压力', 2, 2) }}</td>
            </tr>
            <tr>
              <td class="first">精神障碍人数</td>
              <td>{{ dimensionList1[3]['精神障碍'] }}</td>
              <td>{{ dimensionList2[3]['精神障碍'] }}</td>
            </tr>
            <tr>
              <td class="first">精神障碍占比</td>
              <td>{{ getOtherRate('精神障碍', 1, 3) }}</td>
              <td>{{ getOtherRate('精神障碍', 2, 3) }}</td>
            </tr>
            <tr>
              <td class="first">健康异常人数</td>
              <td>{{ unHealthNum1 }}</td>
              <td>{{ unHealthNum2 }}</td>
            </tr>
            <tr>
              <td class="first">健康异常占比</td>
              <td>{{ getUnHealthRate(1) }}</td>
              <td>{{ getUnHealthRate(2) }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      dialogVisible: false,
      selectPlan1: {},
      selectPlan2: {},
      orgInfo1: {
        orgName: ''
      },
      orgInfo2: {
        orgName: ''
      },
      pageNum: 1,
      pageSize: 10,
      planName: '',
      total: '',
      options: {},
      myChart: null,
      userType: "",
      planList: [],
      organizationsList: [],
      organizationsList2: [],
      comparePlanList: [],
      unComplete1: 0,
      unComplete2: 0,
      completeNum1: 0,
      completeNum2: 0,
      dimensionList1: [],
      dimensionList2: [],
      unHealthNum1: 0,
      unHealthNum2: 0
    };
  },
  computed: {
    // 控制表格是否显示
    showTable() {
      return this.dimensionList1.length > 0 && this.dimensionList2.length > 0
    }
  },
  created() {
    let params = JSON.parse(sessionStorage.getItem('comparePlanInfo'));
    this.selectPlan1 = params;
    this.selectPlan2 = params;
    this.getPlanList();
  },
  mounted() {
    this.getPlanOrganization(this.selectPlan1.id).then((res) => {
      this.organizationsList = res.data;
      this.organizationsList2 = res.data;
      this.orgInfo1 = res.data[0];
      this.orgInfo2 = res.data[1];
      this.initChart();
      this.options = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '2015', '2016'],
            ['未完成占比', 43.3, 85.8],
            ['焦虑占比', 83.1, 73.4],
            ['抑郁占比', 86.4, 65.2],
            ['压力占比', 72.4, 53.9],
            ['精神障碍占比', 72.4, 53.9],
            ['健康异常占比', 72.4, 53.9],
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }]
      };
      this.queryCompletePople(this.selectPlan1.id, [this.orgInfo1.orgNo], 1);
      this.queryCompletePople(this.selectPlan2.id, [this.orgInfo2.orgNo], 2);
    });
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('my_chart');
      this.myChart = echarts.init(chartDom);
      this.option && this.myChart.setOption(this.option);
    },

    // 查询测试计划
    getPlanList() {
      this.$http.get(`plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planName=${this.planName}`, {}, (res) => {
        if (res && res.code == 200) {
          this.planList = res.data.content;
          this.total = res.data.totalElements;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 查询计划下组织
    getPlanOrganization(id) {
      return new Promise((reslove, reject) => {
        this.$http.get(`/planOrg/findAllByPlanId?planId=${id}`, {}, res => {
          if (res && res.code == 200) {
            reslove(res);
          } else {
            this.$message.error(res.msg);
            reject();
          }
        })
      })
    },

    // 查询计划完成和未完成人数
    queryCompletePople(id, n, i) {
      let url = `plan/countComplete?planId=${id}&orgList=${n}`;
      this.$http.get(url, {}, (res) => {
        this[`unComplete${i}`] = res.data[0];
        this[`completeNum${i}`] = res.data[1];
        this.getPlanDimNun(id, n, i);
      });
    },

    // 查询不同维度的中重度数量
    getPlanDimNun(id, n, i) {
      this.$http.get(
        `userRecordScore/countNumByPlanDim?planId=${id}&orgList=${n}`,
        {},
        (res) => {
          let dimension = res.data;
          this[`dimensionList${i}`] = res.data;
          this.options['dataset']['source'][1][i] = (this[`unComplete${i}`] / (this[`completeNum${i}`] + this[`unComplete${i}`])) * 100;
          this.options.dataset.source[2][i] = (parseInt(dimension[0]["焦虑"]) / this[`completeNum${i}`]) * 100;
          this.options.dataset.source[3][i] = (parseInt(dimension[1]["抑郁"]) / this[`completeNum${i}`]) * 100;
          this.options.dataset.source[4][i] = (parseInt(dimension[2]["压力"]) / this[`completeNum${i}`]) * 100;
          this.options.dataset.source[5][i] = (parseInt(dimension[3]["精神障碍"]) / this[`completeNum${i}`]) * 100;
          this.isAbnormal(id, n, i);
        }
      );
    },
    //查询统计心理健康异常人数
    isAbnormal(id, n, i) {
      //调用接口返回信息
      let url = `/planUser/countCompletedUserHighRisk?planId=${id}&orgList=${n}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          this[`unHealthNum${i}`] = res.data;
          this.options.dataset.source[6][i] = (parseInt(res.data) / this[`completeNum${i}`]) * 100;
          this.options && this.myChart.setOption(this.options);
        }
      });
    },

    planSelectHandle1(item) {
      this.getPlanOrganization(item.id).then((res) => {
        this.organizationsList = res.data;
        this.orgInfo1 = res.data[0];
        this.queryCompletePople(this.selectPlan1.id, [this.orgInfo1.orgNo], 0);
      });
    },
    planSelectHandle2(item) {
      this.getPlanOrganization(item.id).then((res) => {
        this.organizationsList2 = res.data;
        this.orgInfo1 = res.data[1];
        this.queryCompletePople(item.id, [this.orgInfo2.orgNo], 1);
      });
    },

    orgSelectHandle1(item) {
      this.queryCompletePople(this.selectPlan1.id, [item.orgNo], 0);
    },
    orgSelectHandle2(item) {
      this.queryCompletePople(this.selectPlan2.id, [item.orgNo], 1);
    },

    // 未完成占比计算
    getUnCompleteRate(i) {
      let rate = parseInt((this[`unComplete${i}`] / (this[`unComplete${i}`] + this[`completeNum${i}`])) * 100);
      return rate > 0 ? `${rate}%` : rate;
    },

    // 健康异常占比计算
    getUnHealthRate(i) {
      let rate = parseInt((this[`unHealthNum${i}`] / (this[`unComplete${i}`] + this[`completeNum${i}`])) * 100);
      return rate > 0 ? `${rate}%` : rate;
    },

    // 其他占比计算
    getOtherRate(name, i, m) {
      let tempNum = this[`dimensionList${i}`][m][name];
      let rate = parseInt((tempNum / this[`completeNum${i}`]) * 100)
      return rate > 0 ? `${rate}%` : rate;
    },
  },
};
</script>
<style lang="less" scoped>
.c_wrap {
  width: 100%;
}

.c_main1 {
  box-sizing: border-box;
  width: 60%;
  padding: 0 50px;
}

.c_main2 {
  box-sizing: border-box;
  width: 40%;
  padding: 0 50px;

  table {
    border-collapse: collapse;
    border-spacing: 0;
    // border: 1px solid #dddddd;

    tr {
      padding: 0;
      margin: 0;
    }

    th.first {
      text-align: left;
      background: #75BD42;
    }

    td.first {
      text-align: left;
      background: #E3F2D9;
    }

    th,
    td {
      padding: 6px 8px;
      border: none;
      border: 1px solid #dddddd;
      margin: 0;
      text-align: right;
    }
  }
}

.pag_class /deep/ .el-input__inner {
  width: 100% !important;
}

.chart_wrap {
  width: 100%;
  display: flex;
  height: 200px;
}

.demo-form-inline {
  margin-left: 40px;
}

.c_name {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin: 16px 0;
}

.title {
  font-size: 20px;
  color: #222222;
  font-weight: 800;
  text-align: center;
}
</style>