cpdm_manage/src/components/ComparePlanProfession3.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="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>
      <p class="c_name">{{ selectPlan1.planName }} - {{ orgInfo1.orgName }}</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>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 40px;">
        <el-form-item label="计划名称">
          <el-select v-model="selectPlan2" placeholder="请选择计划" @change="planSelectHandle2">
            <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="orgInfo2" placeholder="请选择组织" @change="orgSelectHandle2">
            <el-option v-for="item in organizationsList2" :key="item.id" :label="item.orgName"
              :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <p class="c_name">{{ selectPlan2.planName }} - {{ orgInfo2.orgName }}</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>
</template>
<script>
import PieChart from "@/components/PieChart";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      dialogVisible: false,
      selectPlan1: {},
      selectPlan2: {},
      orgInfo1: {
        orgName: ''
      },
      orgInfo2: {
        orgName: ''
      },
      pageNum: 1,
      pageSize: 10,
      planName: '',
      total: '',
      options1: [],
      options2: [],
      options3: [],
      options4: [],
      options5: [],
      options6: [],
      options7: [],
      options8: [],
      options9: [],
      options10: [],
      options11: [],
      options12: [],
      userType: "",
      planList: [],
      organizationsList: [],
      organizationsList2: [],
      comparePlanList: [],
      comparePlanDate: []
    };
  },
  created() {
    this.selectPlan1 = this.$route.params;
    this.selectPlan2 = this.$route.params;
    this.getPlanList();
    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.queryCompletePople(this.selectPlan1.id, [this.orgInfo1.orgNo], 0);
      this.queryCompletePople(this.selectPlan2.id, [this.orgInfo2.orgNo], 1);
    });
  },
  mounted() {

  },
  methods: {
    // 查询测试计划
    getPlanList() {
      this.$http.get(`plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&planName=${this.planName}`, {}, (res) => {
        if (res && res.code == 200) {
          console.log(res.data.content);
          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) => {
        if (res.code == 200) {
          this.getPlanDimNun(id, n, i);
          this.comparePlanDate[i] = { 'unComplete': res.data[0], 'completeNum': res.data[1] }
        }
      });
    },

    // 查询不同维度的中重度数量
    getPlanDimNun(id, n, i) {
      this.$http.get(
        `userRecordScore/countNumByPlanDim?planId=${id}&orgList=${n}`,
        {},
        (res) => {
          console.log(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, 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: "精神障碍占比" },
            ];
          } else {
            this.options7 = [
              { value: this.comparePlanDate[1].completeNum + this.comparePlanDate[1].unComplete, name: "已完成人数" },
              { value: this.comparePlanDate[1].unComplete, name: "未完成占比" },
            ];
            this.options8 = [
              { value: this.comparePlanDate[1].completeNum, 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.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) {
          if (i == 0) {
            this.options6 = [
              {
                value: this.comparePlanDate[0].completeNum,
                name: "已完成人数",
              },
              { value: res.data, name: "健康异常占比" },
            ];
          } else {
            this.options12 = [
              {
                value: this.comparePlanDate[1].completeNum,
                name: "已完成人数",
              },
              { value: res.data, name: "健康异常占比" },
            ];
          }
        }
      });
    },

    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);
    }
  },
};
</script>
<style lang="less" scoped>
.c_wrap {
  width: 100%;
}

.c_main {
  box-sizing: border-box;
  display: flex;
  padding: 0 50px;
}

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

.chart_wrap {
  flex: 1;
  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>