src/components/ComparePlanProfession.vue

@@ -1,64 +1,80 @@
 <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">{{ comparePlanList[0].planName }}</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 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-dialog>
-
-    <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>
-//引入echarts组件
-import * as echarts from "echarts";
 import PieChart from "@/components/PieChart";
 
 export default {
@@ -68,6 +84,18 @@ export default {
   data() {
     return {
       dialogVisible: false,
+      selectPlan1: {},
+      selectPlan2: {},
+      orgInfo1: {
+        orgName: ''
+      },
+      orgInfo2: {
+        orgName: ''
+      },
+      pageNum: 1,
+      pageSize: 10,
+      planName: '',
+      total: '',
       options1: [],
       options2: [],
       options3: [],
@@ -80,43 +108,77 @@ export default {
       options10: [],
       options11: [],
       options12: [],
-      completeNum: 0,
-      unComplete: 0,
       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: {
-    open(arr) {
-      this.comparePlanList = arr;
-      this.queryCompletePople(0);
-      this.queryCompletePople(1);
-      this.dialogVisible = true;
+    // 查询测试计划
+    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);
+          debugger
+          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(i) {
-      //调用接口返回信息
-      let url = `/plan/countComplete?planId=${this.comparePlanList[i].id}`;
+    queryCompletePople(id, n, i) {
+      let url = `plan/countComplete?planId=${id}&orgList=${n}`;
       this.$http.get(url, {}, (res) => {
         if (res.code == 200) {
-          debugger
+          this.getPlanDimNun(id, n, i);
           this.comparePlanDate[i] = { 'unComplete': res.data[0], 'completeNum': res.data[1] }
-          this.getPlanDimNun(i);
         }
       });
     },
 
     // 查询不同维度的中重度数量
-    getPlanDimNun(i) {
+    getPlanDimNun(id, n, i) {
       this.$http.get(
-        `userRecordScore/countNumByPlanDim?planId=${this.comparePlanList[i].id}`,
+        `userRecordScore/countNumByPlanDim?planId=${id}&orgList=${n}`,
         {},
         (res) => {
+          console.log(res);
           let dimensionList = res.data;
           if (i == 0) {
             this.options1 = [
@@ -125,7 +187,7 @@ export default {
             ];
 
             this.options2 = [
-              { value: this.comparePlanDate[0].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
+              { value: this.comparePlanDate[0].completeNum, name: "焦虑" },
               { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
             ];
 
@@ -143,21 +205,13 @@ export default {
               { 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].completeNum + this.comparePlanDate[1].unComplete, name: "已完成人数" },
               { value: this.comparePlanDate[1].unComplete, name: "未完成占比" },
             ];
             this.options8 = [
-              { value: this.comparePlanDate[1].completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
+              { value: this.comparePlanDate[1].completeNum, name: "焦虑" },
               { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
             ];
 
@@ -175,30 +229,70 @@ export default {
               { 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 - dimensionList[3]["精神障碍"],
+                value: this.comparePlanDate[1].completeNum,
                 name: "已完成人数",
               },
-              { value: dimensionList[3]["精神障碍"], 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 {
-  // display: flex;
   width: 100%;
 }
 
 .c_main {
-  width: 100%;
+  box-sizing: border-box;
   display: flex;
+  padding: 0 50px;
 }
 
 .pag_class /deep/ .el-input__inner {
@@ -209,4 +303,22 @@ export default {
   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>

src/components/pieChart.vue

@@ -37,7 +37,7 @@ export default {
   computed: {},
   watch: {
     options() {
-      
+
       this.myPieEcharts(this.options);
     },
   },
@@ -50,15 +50,15 @@ export default {
           {
             text: pieData[1].name,
             x: "center",
-            top: "52%",
+            top: "80%",
             textStyle: {
               color: "#000000",
-              fontSize: 10,
-              fontWeight: "100",
+              fontSize: 14,
+              fontWeight: "600",
             },
           },
           {
-            text: pieData[0].value==0?'未有人测试' :((pieData[1].value /pieData[0].value)*100).toFixed(2)+'%',
+            text: pieData[0].value == 0 ? '未有人测试' : ((pieData[1].value / pieData[0].value) * 100).toFixed(2) + '%',
             x: "center",
             y: "center",
             textStyle: {
@@ -71,7 +71,7 @@ export default {
         ],
         backgroundColor: "#ffffff",
         polar: {
-          radius: ["42%", "52%"], 
+          radius: ["42%", "52%"],
           center: ["50%", "50%"],
         },
         angleAxis: {

src/views/manage/channelManagement/contract.vue

@@ -153,9 +153,8 @@
     </div>
     <CompareUser ref="register" @search="searchTarget" />
     <ComparePlanUser ref="planUser" @search="searchTarget" />
-    <ComparePlanProfession ref="planProfession" @search="searchTarget" />
     <el-dialog title="请选择计划" :visible.sync="choosePlanVisible">
-      <el-table height="100%" :data="comparePlanList" :row-style="{ height: '0px' }" :cell-style="{ padding: '5px' }"
+      <!-- <el-table height="100%" :data="comparePlanList" :row-style="{ height: '0px' }" :cell-style="{ padding: '5px' }"
         :header-cell-style="{ background: '#F8F8F8', color: '#606266' }" @select="selectHandle" ref="multipleTable">
         <el-table-column type="selection" width="55">
         </el-table-column>
@@ -169,7 +168,7 @@
         </el-table-column>
         <el-table-column v-if="!isUser" prop="planStatus" label="状态" :formatter="forMaPlan" align="center" width="">
         </el-table-column>
-      </el-table>
+      </el-table> -->
       <div class="btn_area">
         <el-button @click="chooseCancel">取消</el-button>
         <el-button v-if="comparePlanList.length > 0" type="primary" @click="chooseEnsure">确定</el-button>
@@ -182,7 +181,6 @@
 import { oSessionStorage } from "../../../utils/utils";
 import compareUser from "../../../components/CompareUser.vue";
 import comparePlanUser from "../../../components/ComparePlanUser.vue";
-import comparePlanProfession from "../../../components/ComparePlanProfession.vue";
 import { basePath } from "../../../utils/http";
 import userImgActive from "../../../assets/report/lv.png";
 import userImgDefault from "../../../assets/report/white.png";
@@ -190,8 +188,7 @@ export default {
   name: "userManage",
   components: {
     CompareUser: compareUser,
-    ComparePlanUser: comparePlanUser,
-    ComparePlanProfession: comparePlanProfession,
+    ComparePlanUser: comparePlanUser
   },
   data() {
     return {
@@ -265,7 +262,8 @@ export default {
       choosePlanVisible: false,
       currentPlanId: '',
       comparePlanList: [],
-      chooseComparePlanList: []
+      chooseComparePlanList: [],
+      formInline: {}
     };
   },
   created() { },
@@ -535,10 +533,18 @@ export default {
     },
 
     compareReport(val) {
-      this.chooseComparePlanList[0] = val;
-      this.currentPlanId = val.id
-      this.filterComplete();
-      this.choosePlanVisible = true;
+      this.$router.push({
+        name: 'ComparePlanProfession',
+        params: {
+          ...val
+        }
+      })
+      // this.$router.push(`/manage/comparePlanProfession?planId=${val.id}&planName=${val.planName}`)
+
+      // this.chooseComparePlanList[0] = val;
+      // this.currentPlanId = val.id
+      // this.filterComplete();
+      // this.choosePlanVisible = true;
     },
 
     // 筛选已完成计划