修改报告对比

src/components/ComparePlanProfession.vue

@@ -1,10 +1,10 @@
 <template>
-  <div style="width: 100%;">
+  <div style="width: 100%; display: flex; flex-direction: column">
     <div slot="title">
       <p class="title">专业报告对比</p>
     </div>
     <div class="c_wrap">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form :inline="true" class="demo-form-inline">
         <el-form-item label="首选项">
           <el-select v-model="firstParams" @change="firstParamsHandle">
             <el-option label="计划" :value="1"></el-option>
@@ -12,146 +12,223 @@
           </el-select>
         </el-form-item>
         <el-form-item v-show="firstParams == 1">
-          <el-select v-model="selectPlan1" placeholder="请选择计划" @change="planSelectHandle">
-            <el-option v-for="item in planList" :key="item.id" :label="item.planName" :value="item"></el-option>
+          <el-select
+            v-model="selectPlan1"
+            placeholder="请选择计划"
+            @change="planSelectHandle"
+          >
+            <el-option
+              v-for="item in planList"
+              :key="item.id"
+              :label="item.planName"
+              :value="item.id"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item v-show="firstParams == 2">
-          <el-select v-model="orgInfo1" placeholder="请选择组织" @change="orgSelectHandle">
-            <el-option v-for="item in organizationsList" :key="item.id" :label="item.orgName" :value="item"></el-option>
+          <el-select
+            v-model="orgInfo1"
+            placeholder="请选择组织"
+            @change="orgSelectHandle"
+          >
+            <el-option
+              v-for="item in organizationsList"
+              :key="item.id"
+              :label="item.orgName"
+              :value="item.id"
+            ></el-option>
           </el-select>
         </el-form-item>
         <template v-if="firstParams == 2">
           <el-form-item label="对比项">
-            <el-select v-model="compareOptions.planInfo1" placeholder="请选择计划">
-              <el-option v-for="item in planList" :key="item.id" :label="item.planName" :value="item"></el-option>
+            <el-select
+              v-model="compareOptions.planInfo1"
+              placeholder="请选择计划"
+              @change="subPlanChange1"
+            >
+              <el-option
+                v-for="item in planList"
+                :key="item.id"
+                :label="item.planName"
+                :value="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item> vs </el-form-item>
           <el-form-item>
-            vs
-          </el-form-item>
-          <el-form-item>
-            <el-select v-model="compareOptions.planInfo2" placeholder="请选择计划">
-              <el-option v-for="item in planList" :key="item.id" :label="item.planName" :value="item"></el-option>
+            <el-select
+              v-model="compareOptions.planInfo2"
+              placeholder="请选择计划"
+              @change="subPlanChange2"
+            >
+              <el-option
+                v-for="item in planList"
+                :key="item.id"
+                :label="item.planName"
+                :value="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
         </template>
         <template v-if="firstParams == 1">
           <el-form-item label="对比项">
-            <el-select v-model="compareOptions.orgInfo1" placeholder="请选择组织">
-              <el-option v-for="item in organizationsList" :key="item.id" :label="item.orgName"
-                :value="item"></el-option>
+            <el-select
+              v-model="compareOptions.orgInfo1"
+              placeholder="请选择组织"
+              @change="orgChangeOne"
+            >
+              <el-option
+                v-for="item in organizationsList"
+                :key="item.id"
+                :label="item.orgName"
+                :value="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item> vs </el-form-item>
           <el-form-item>
-            vs
-          </el-form-item>
-          <el-form-item>
-            <el-select v-model="compareOptions.orgInfo2" placeholder="请选择组织">
-              <el-option v-for="item in organizationsList" :key="item.id" :label="item.orgName"
-                :value="item"></el-option>
+            <el-select
+              v-model="compareOptions.orgInfo2"
+              placeholder="请选择组织"
+              @change="orgChangeTwo"
+            >
+              <el-option
+                v-for="item in organizationsList"
+                :key="item.id"
+                :label="item.orgName"
+                :value="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
         </template>
-        <el-form-item>
-          <el-button type="primary" @click="compareHandle">对比</el-button>
-        </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 v-if="compareOptions.orgInfo1 || compareOptions.planInfo1">{{ firstParams == 1 ?
-                compareOptions.orgInfo1.orgName : compareOptions.planInfo1.planName }}</th>
-              <th v-if="compareOptions.orgInfo2 || compareOptions.planInfo2">{{ firstParams == 1 ?
-                compareOptions.orgInfo2.orgName : compareOptions.planInfo2.planName }}</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 :class="{ 'warn': isRed(0, 1) }">{{ getUnCompleteRate(1) }}</td>
-              <td :class="{ 'warn': isRed(0, 2) }">{{ getUnCompleteRate(2) }}</td>
-            </tr>
-
-            <tr>
-              <td class="first">焦虑人数</td>
-              <td>{{ dimensionList1[0]['焦虑'] }}</td>
-              <td>{{ dimensionList2[0]['焦虑'] }}</td>
-            </tr>
-            <tr>
-              <td class="first">焦虑占比</td>
-              <td :class="{ 'warn': isRed(1, 1) }" v-html="getOtherRate('焦虑', 1, 0)"></td>
-              <td :class="{ 'warn': isRed(1, 2) }" v-html="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 :class="{ 'warn': isRed(2, 1) }" v-html="getOtherRate('抑郁', 1, 1)"></td>
-              <td :class="{ 'warn': isRed(2, 2) }" v-html="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 :class="{ 'warn': isRed(3, 1) }" v-html="getOtherRate('压力', 1, 2)"></td>
-              <td :class="{ 'warn': isRed(3, 2) }" v-html="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 :class="{ 'warn': isRed(4, 1) }" v-html="getOtherRate('精神障碍', 1, 3)"></td>
-              <td :class="{ 'warn': isRed(4, 2) }" v-html="getOtherRate('精神障碍', 2, 3)"></td>
-            </tr>
-            <tr>
-              <td class="first">健康异常人数</td>
-              <td>{{ unHealthNum1 }}</td>
-              <td>{{ unHealthNum2 }}</td>
-            </tr>
-            <tr>
-              <td class="first">健康异常占比</td>
-              <td :class="{ 'warn': isRed(5, 1) }">{{ getUnHealthRate(1) }}</td>
-              <td :class="{ 'warn': isRed(5, 2) }">{{ getUnHealthRate(2) }}</td>
-            </tr>
-          </table>
-        </div>
+    </div>
+    <div class="chart_wrap" style="flex: 1; display: flex">
+      <div class="c_main1" style="display: flex; flex: 3">
+        <!-- <p class="c_name">{{ selectPlan1.planName }} - {{ orgInfo1.orgName }}</p> -->
+        <div id="my_chart" style="width: 100%; height: 100%"></div>
+      </div>
+      <div class="c_main2" style="display: flex; flex: 2; overflow-y: auto">
+        <table
+          v-if="
+            (firstParams == 1 &&
+              selectPlan1 !== null &&
+              selectPlan1 !== '' &&
+              compareOptions.orgInfo1 !== null &&
+              compareOptions.orgInfo1 !== '' &&
+              compareOptions.orgInfo2 !== null &&
+              compareOptions.orgInfo2 !== '') ||
+            (firstParams == 2 &&
+              orgInfo1 !== null &&
+              orgInfo1 !== '' &&
+              compareOptions.planInfo1 !== '' &&
+              compareOptions.planInfo1 !== null &&
+              compareOptions.planInfo2 !== '' &&
+              compareOptions.planInfo2 !== null)
+          "
+          style="width: 100%"
+        >
+          <tr>
+            <th class="first">组织</th>
+            <th>
+              {{
+                firstParams == 1
+                  ? compareOptionsOrg1.orgName
+                  : compareOptionsPlan1.planName
+              }}
+            </th>
+            <th>
+              {{
+                firstParams == 1
+                  ? compareOptionsOrg2.orgName
+                  : compareOptionsPlan2.planName
+              }}
+            </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 :class="{ warn: isRed(0, 1) }">{{ getUnCompleteRate(1) }}</td>
+            <td :class="{ warn: isRed(0, 2) }">{{ getUnCompleteRate(2) }}</td>
+          </tr>
+
+          <tr>
+            <td class="first">焦虑人数</td>
+            <td>{{ dimensionList1[0]["焦虑"] }}</td>
+            <td>{{ dimensionList2[0]["焦虑"] }}</td>
+          </tr>
+          <tr>
+            <td class="first">焦虑占比</td>
+            <td :class="{ warn: isRed(1, 1) }" v-html="getOtherRate('焦虑', 1, 0)"></td>
+            <td :class="{ warn: isRed(1, 2) }" v-html="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 :class="{ warn: isRed(2, 1) }" v-html="getOtherRate('抑郁', 1, 1)"></td>
+            <td :class="{ warn: isRed(2, 2) }" v-html="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 :class="{ warn: isRed(3, 1) }" v-html="getOtherRate('压力', 1, 2)"></td>
+            <td :class="{ warn: isRed(3, 2) }" v-html="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
+              :class="{ warn: isRed(4, 1) }"
+              v-html="getOtherRate('精神障碍', 1, 3)"
+            ></td>
+            <td
+              :class="{ warn: isRed(4, 2) }"
+              v-html="getOtherRate('精神障碍', 2, 3)"
+            ></td>
+          </tr>
+          <tr>
+            <td class="first">健康异常人数</td>
+            <td>{{ unHealthNum1 }}</td>
+            <td>{{ unHealthNum2 }}</td>
+          </tr>
+          <tr>
+            <td class="first">健康异常占比</td>
+            <td :class="{ warn: isRed(5, 1) }">{{ getUnHealthRate(1) }}</td>
+            <td :class="{ warn: isRed(5, 2) }">{{ getUnHealthRate(2) }}</td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
 </template>
 <script>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 import { oSessionStorage } from "../utils/utils";
 
 export default {
@@ -159,24 +236,26 @@ export default {
     return {
       dialogVisible: false,
       firstParams: 1,
-      selectPlan1: {},
-      selectPlan2: {},
-      orgInfo1: {
-        orgName: ''
-      },
-      orgInfo2: {
-        orgName: ''
-      },
+      selectPlan1: "",
+
+      orgInfo1: "",
+      //选中对比项中的第一个组织
+      compareOptionsOrg1: {},
+      compareOptionsOrg2: {},
+
+      //选中对比项中的第一个测试计划
+      compareOptionsPlan1: {},
+      compareOptionsPlan2: {},
       compareOptions: {
-        planInfo1: null,
-        planInfo2: null,
-        orgInfo1: null,
-        orgInfo2: null
+        planInfo1: "",
+        planInfo2: "",
+        orgInfo1: "",
+        orgInfo2: "",
       },
       pageNum: 1,
       pageSize: 10,
-      planName: '',
-      total: '',
+      planName: "",
+      total: "",
       options: {},
       myChart: null,
       userType: "",
@@ -193,36 +272,59 @@ export default {
       unHealthNum1: 0,
       unHealthNum2: 0,
       compareTableDate: {},
-      userOrgNo: '',
-      userInfo: ''
+      userOrgNo: "",
+      userInfo: "",
     };
   },
   computed: {
     // 控制表格是否显示
     showTable() {
-      return this.dimensionList1.length > 0 && this.dimensionList2.length > 0
-    }
+      //当firstParams 等于1时，且对比项---都不为空时需要显示
+      //当firstParams 等于2时，且对比项---都不为空是需要显示
+      //其他状况均不显示
+      // this.firstParams == 1
+      if (
+        this.firstParams == 1 &&
+        this.dimensionList1.length > 0 &&
+        this.dimensionList2.length > 0 &&
+        this.compareOptions.planInfo1 != "" &&
+        this.compareOptions.planInfo1 != ""
+      ) {
+        return true;
+      } else if (
+        this.firstParams == 2 &&
+        this.dimensionList1.length > 0 &&
+        this.dimensionList2.length > 0 &&
+        this.compareOptions.orgInfo1 != "" &&
+        this.compareOptions.orgInfo2 != ""
+      ) {
+        return true;
+      }
+      return false;
+    },
   },
   created() {
     this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
     this.userOrgNo = this.userInfo.orgNo;
-    let params = JSON.parse(sessionStorage.getItem('comparePlanInfo'));
-    this.selectPlan1 = params;
-    this.selectPlan2 = params;
-    this.compareOptions.planInfo1 = params;
-    this.compareOptions.planInfo2 = params;
+    let params = JSON.parse(sessionStorage.getItem("comparePlanInfo"));
+    this.selectPlan1 = params.id;
+    //根据id 查看对比项
     this.getPlanByOrg(this.userInfo.orgNo);
   },
   mounted() {
-    this.getPlanOrganization(this.selectPlan1.id).then((res) => {
+    this.getPlanOrganization(this.selectPlan1).then((res) => {
       this.organizationsList = res.data;
       this.organizationsList2 = res.data;
       if (res.data.length > 1) {
-        this.compareOptions.orgInfo1 = res.data[0];
-        this.compareOptions.orgInfo2 = res.data[1];
+        this.compareOptionsOrg1 = res.data[0];
+        this.compareOptionsOrg2 = res.data[0];
+        this.compareOptions.orgInfo1 = res.data[0].id;
+        this.compareOptions.orgInfo2 = res.data[1].id;
       } else {
-        this.compareOptions.orgInfo1 = res.data[0];
-        this.compareOptions.orgInfo2 = res.data[0];
+        this.compareOptionsOrg1 = res.data[0];
+        this.compareOptionsOrg2 = res.data[0];
+        this.compareOptions.orgInfo1 = res.data[0].id;
+        this.compareOptions.orgInfo2 = res.data[0].id;
       }
       this.initChart();
       this.options = {
@@ -230,96 +332,176 @@ export default {
         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],
-          ]
+            ["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' },
+        xAxis: { type: "category" },
         yAxis: {},
-        series: [{
-          type: 'bar',
-          itemStyle: {
-            // 设置柱状图的颜色
-            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
-              { offset: 0, color: '#00F6E3' },
-              { offset: 1, color: '#644BFD' },
-            ]),
-            borderRadius: [18, 18, 18, 18],
-            barWidth: 40
-          }
-        }, {
-          type: 'bar',
-          itemStyle: {
-            // 设置柱状图的颜色
-            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
-              { offset: 0, color: '#FCD04B' },
-              { offset: 1, color: '#FF4C15' },
-            ]),
-            borderRadius: [18, 18, 18, 18],
-            barWidth: 40
-          }
-        }]
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              // 设置柱状图的颜色
+              color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                { offset: 0, color: "#00F6E3" },
+                { offset: 1, color: "#644BFD" },
+              ]),
+              borderRadius: [18, 18, 18, 18],
+              barWidth: 40,
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              // 设置柱状图的颜色
+              color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                { offset: 0, color: "#FCD04B" },
+                { offset: 1, color: "#FF4C15" },
+              ]),
+              borderRadius: [18, 18, 18, 18],
+              barWidth: 40,
+            },
+          },
+        ],
       };
       this.compareHandle();
-      // 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');
-      var myChart = echarts.init(chartDom);
-      this.option && myChart.setOption(this.option);
+    //根据组织改变计划
+    subPlanChange1(val) {
+      let list = [];
+      list = this.planList.filter((item) => {
+        return item.id == val;
+      });
+      if (list.length == 1) {
+        this.compareOptionsPlan1 = list[0];
+      }
+
+      //得到当前的已选的对象
+      //判断4个选项是否都更改存在
+      //如果都存在则可以调用组织对比
+      if (
+        this.firstParams == 2 &&
+        this.orgInfo1 !== null &&
+        this.orgInfo1 !== "" &&
+        this.compareOptions.planInfo1 !== "" &&
+        this.compareOptions.planInfo1 !== null &&
+        this.compareOptions.planInfo2 !== "" &&
+        this.compareOptions.planInfo2 !== null
+      ) {
+        //改变后开始进行对比
+        this.compareHandle();
+      }
     },
+    //根据组织改变计划
+    subPlanChange2(val) {
+      //改变后开始进行对比
+      let list = [];
+      list = this.planList.filter((item) => {
+        return item.id == val;
+      });
+      if (list.length == 1) {
+        this.compareOptionsPlan2 = list[0];
+      }
+      if (
+        this.firstParams == 2 &&
+        this.orgInfo1 !== null &&
+        this.orgInfo1 !== "" &&
+        this.compareOptions.planInfo1 !== "" &&
+        this.compareOptions.planInfo1 !== null &&
+        this.compareOptions.planInfo2 !== "" &&
+        this.compareOptions.planInfo2 !== null
+      ) {
+        //改变后开始进行对比
+        this.compareHandle();
+      }
+    },
+    //计划下---组织改变--触发的方法
+    orgChangeOne(val) {
+      //设置该处选择的对象
+      //设置当前选择的对象
+      //获取val 为ID
+      let list1 = [];
+      list1 = this.organizationsList.filter((item) => {
+        return item.id == val;
+      });
+      if (list1.length == 1) {
+        this.compareOptionsOrg1 = list1[0];
+      }
+      if (
+        this.firstParams == 1 &&
+        this.selectPlan1 !== null &&
+        this.selectPlan1 !== "" &&
+        this.compareOptions.orgInfo1 !== null &&
+        this.compareOptions.orgInfo1 !== "" &&
+        this.compareOptions.orgInfo2 !== null &&
+        this.compareOptions.orgInfo2 !== ""
+      ) {
+        //
+        this.compareHandle();
+      }
 
-    // 查询测试计划
-    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);
-        }
+      //设置的话触发一次对比
+    },
+    orgChangeTwo(val) {
+      let list1 = [];
+      list1 = this.organizationsList.filter((item) => {
+        return item.id == val;
       });
+      if (list1[0].length == 1) {
+        this.compareOptionsOrg2 = list1[0];
+      }
+
+      if (
+        this.firstParams == 1 &&
+        this.selectPlan1 !== null &&
+        this.selectPlan1 !== "" &&
+        this.compareOptions.orgInfo1 !== null &&
+        this.compareOptions.orgInfo1 !== "" &&
+        this.compareOptions.orgInfo2 !== null &&
+        this.compareOptions.orgInfo2 !== ""
+      ) {
+        //
+        this.compareHandle();
+      }
+      //改变后触发一次点击
+    },
+    initChart() {
+      var chartDom = document.getElementById("my_chart");
+      var myChart = echarts.init(chartDom);
+      this.option && myChart.setOption(this.option);
     },
 
-    // 查询当前组织所在测试计划
+    // 查询当前用下的测试计划
     getPlanByOrg(no) {
-      this.$http.get(`plan/findPlanByOrg?orgNo=${no}`, {}, res => {
+      this.$http.get(`plan/findPlanByOrg?orgNo=${no}`, {}, (res) => {
         if (res && res.code == 200) {
-          console.log(res.data);
           this.planList = res.data;
-        }
-      })
-    },
 
-    // 查询所有子组织
-    getAllOrg() {
-      this.$http.get(`org/findchildorg?orgNo${orgNo}`, {}, res => {
-        if (res && res.code == 200) {
-          this.planList = res.data;
+          //查询出来以后--需要查询计划下的组织架构
         }
-      })
+      });
     },
 
     // 查询计划下组织
     getPlanOrganization(id) {
       return new Promise((reslove, reject) => {
-        this.$http.get(`/planOrg/findAllByPlanId?planId=${id}`, {}, res => {
+        this.$http.get(`/planOrg/findAllByPlanId?planId=${id}`, {}, (res) => {
           if (res && res.code == 200) {
             reslove(res);
           } else {
             this.$message.error(res.msg);
             reject();
           }
-        })
-      })
+        });
+      });
     },
 
     // 查询计划完成和未完成人数
@@ -340,11 +522,23 @@ export default {
         (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.options["dataset"]["source"][1][i] = parseInt(
+            (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);
         }
       );
@@ -356,79 +550,158 @@ export default {
       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.dataset.source[6][i] = parseInt(
+            (res.data / this[`completeNum${i}`]) * 100
+          );
           this.getTableData();
-          echarts.init(document.getElementById('my_chart')).dispose(); // 销毁实例
-          var myChart1 = echarts.init(document.getElementById('my_chart')); // 再次创建实
+          echarts.init(document.getElementById("my_chart")).dispose(); // 销毁实例
+          var myChart1 = echarts.init(document.getElementById("my_chart")); // 再次创建实
           this.options && myChart1.setOption(this.options);
         }
       });
     },
 
     // 首选项计划切换
-    planSelectHandle(item) {
-      this.getPlanOrganization(item.id).then((res) => {
+    planSelectHandle(id) {
+      //查询计划下的组织
+      this.getPlanOrganization(id).then((res) => {
         this.organizationsList = res.data;
-        this.compareOptions.orgInfo1 = null;
-        this.compareOptions.orgInfo2 = null;
+        this.compareOptions.orgInfo1 = "";
+        this.compareOptions.orgInfo2 = "";
       });
     },
 
     // 切换首选项
     firstParamsHandle(val) {
-      this.compareOptions.orgInfo1 = null;
-      this.compareOptions.orgInfo2 = null;
-      this.compareOptions.planInfo1 = null;
-      this.compareOptions.planInfo2 = null;
-      this.selectPlan1 = null;
-      this.orgInfo1 = null;
+      //所用东西都清空
+
+      this.compareOptions.orgInfo1 = "";
+      this.compareOptions.orgInfo2 = "";
+      this.compareOptions.planInfo1 = "";
+      this.compareOptions.planInfo2 = "";
+      this.selectPlan1 = "";
+      this.orgInfo1 = "";
+      this.planList = [];
+      this.organizationsList = [];
+
+      //如果类型是1的话
+      //查询计划列表
+      if (this.firstParams == 1) {
+        //查询计划下
+        this.getPlanByOrg(this.userInfo.orgNo);
+      } else if (this.firstParams == 2) {
+        this.findOrgByPlan();
+        //查询计划下//查询组织
+      }
+      //如果类型是2的话
+      //查询组织列表
+    },
+    //查询计划下所有组织
+    findOrgByPlan() {
+      let url = `/org/findAllOrgByPOrgNo?orgNo=${this.userOrgNo}`;
+      this.$http.get(url, {}, (res) => {
+        if (res.code == 200) {
+          let list = [];
+          list = res.data.filter((item) => {
+            return item.extend != null && item.extend != "";
+          });
+          this.organizationsList = list;
+        }
+      });
     },
 
     // 首选项组织切换
-    orgSelectHandle(item) {
-      this.compareOptions.planInfo1 = null;
-      this.compareOptions.planInfo2 = null;
-      // this.getPlanByOrg();
+    orgSelectHandle(val) {
+      this.compareOptions.planInfo1 = "";
+      this.compareOptions.planInfo2 = "";
+      let temList = [];
+      temList = this.organizationsList.filter((item) => {
+        return item.id == val;
+      });
+      if (temList.length == 1) {
+        this.queryPlanByOrg(temList[0].orgNo);
+      }
+      //组织选择后--查询包含组织的测试计划
+    },
+    //查询组织下的测试计划
+    queryPlanByOrg(orgNo) {
+      let url = `/plan/findPlanByOrg?orgNo=${orgNo}`;
+      this.$http.get(url, {}, (res) => {
+        if (res.code == 200) {
+          //
+          this.planList = res.data;
+        }
+      });
     },
-
     compareHandle() {
       if (this.firstParams == 1) {
-        this.options.dataset.source[0][1] = this.compareOptions.orgInfo1.orgName;
-        this.options.dataset.source[0][2] = this.compareOptions.orgInfo2.orgName;
+        this.options.dataset.source[0][1] = this.compareOptionsOrg1.orgName+' ';
+        this.options.dataset.source[0][2] = this.compareOptionsOrg2.orgName;
       } else {
-        this.options.dataset.source[0][1] = this.compareOptions.planInfo1.planName;
-        this.options.dataset.source[0][2] = this.compareOptions.planInfo2.planName;
+        this.options.dataset.source[0][1] = this.compareOptionsPlan1.planName+' ';
+        this.options.dataset.source[0][2] = this.compareOptionsPlan2.planName;
       }
       if (this.firstParams == 1) {
-        this.queryCompletePople(this.selectPlan1.id, [this.compareOptions.orgInfo1.orgNo], 1);
-        this.queryCompletePople(this.selectPlan1.id, [this.compareOptions.orgInfo2.orgNo], 2);
+        //this.compareOptions.orgInfo1.orgNo
+        //this.compareOptionsOrg1.orgNo
+        this.queryCompletePople(this.selectPlan1, [this.compareOptionsOrg1.orgNo], 1);
+        //this.compareOptions.orgInfo1.orgNo
+        this.queryCompletePople(this.selectPlan1, [this.compareOptionsOrg2.orgNo], 2);
       } else {
-        this.queryCompletePople(this.compareOptions.planInfo1.id, [this.orgInfo1.orgNo], 1);
-        this.queryCompletePople(this.compareOptions.planInfo2.id, [this.orgInfo1.orgNo], 2);
+        //查询出来需要的ID
+        //查询出来orgNo
+        //查询组织的orgNo
+
+        this.queryCompletePople(
+          this.compareOptionsPlan1.id,
+          [this.compareOptionsPlan1.orgNo],
+          1
+        );
+        //查询出来需要的ID
+        //查询出来orgNo
+        this.queryCompletePople(
+          this.compareOptionsPlan2.id,
+          [this.compareOptionsPlan2.orgNo],
+          2
+        );
       }
     },
 
     // 组织表格数据
     getTableData() {
-      let temp = JSON.parse(JSON.stringify(this.options.dataset.source))
-      this.compareTableDate = temp.splice(1, 6)
+      let temp = JSON.parse(JSON.stringify(this.options.dataset.source));
+      this.compareTableDate = temp.splice(1, 6);
     },
 
     // 判断是否标红
     isRed(i, n) {
-      let red = this.compareTableDate[i][1] > this.compareTableDate[i][2]
-      return n == 1 ? red : !red
+      //先判断两个是否相同
+      //如果相同的话
+      if (this.compareTableDate[i][1] == this.compareTableDate[i][2]) {
+        return false;
+      } else {
+        let red = this.compareTableDate[i][1] > this.compareTableDate[i][2];
+        return n == 1 ? red : !red;
+      }
+      // let red = this.compareTableDate[i][1] > this.compareTableDate[i][2]
+      // return n == 1 ? red : !red
     },
 
     // 未完成占比计算
     getUnCompleteRate(i) {
-      let rate = parseInt((this[`unComplete${i}`] / (this[`unComplete${i}`] + this[`completeNum${i}`])) * 100);
+      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);
+      let rate = parseInt(
+        (this[`unHealthNum${i}`] / (this[`unComplete${i}`] + this[`completeNum${i}`])) *
+          100
+      );
       return rate > 0 ? `${rate}%` : rate;
     },
 
@@ -475,13 +748,13 @@ export default {
     }
 
     th.first {
-      text-align: left;
-      background: #75BD42;
+      text-align: center;
+      background: #75bd42;
     }
 
     td.first {
-      text-align: left;
-      background: #E3F2D9;
+      text-align: center;
+      background: #e3f2d9;
     }
 
     th,
@@ -490,7 +763,7 @@ export default {
       border: none;
       border: 1px solid #dddddd;
       margin: 0;
-      text-align: right;
+      text-align: center;
     }
 
     td.warn {

src/components/PlanReport.vue

@@ -565,7 +565,7 @@ export default {
               value: this.completeNum,
               name: "已完成人数",
             },
-            { value: this.abnormalNum, name: "心理健康异常" },
+            { value:this.completeNum - this.abnormalNum, name: "心理健康占比" },
           ];
         }
       );

src/views/manage/generalSituation.vue

@@ -95,12 +95,17 @@
             <div class="chart_wrap">
               <PieChart :options="options1" chartId="myPieChart10" chartName="完成度" />
             </div>
-            <div class="chart_wrap">
-              <PieChart :options="options2" chartId="myPieChart11" chartName="焦虑" />
+            <div class="chart_wrap" style="">
+              <PieChart
+                :options="options6"
+                chartId="myPieChart15"
+                chartName="存在心理健康情况"
+              />
             </div>
             <div class="chart_wrap">
-              <PieChart :options="options3" chartId="myPieChart12" chartName="抑郁" />
+              <PieChart :options="options2" chartId="myPieChart11" chartName="焦虑" />
             </div>
+            
             <!-- <div class="chart_wrap">
               <PieChart :options="options4" chartId="myPieChart4" chartName="压力" />
             </div>
@@ -126,18 +131,15 @@
               <PieChart :options="options3" chartId="myPieChart3" chartName="抑郁" />
             </div> -->
             <div class="chart_wrap">
-              <PieChart :options="options4" chartId="myPieChart13" chartName="压力" />
+              <PieChart :options="options3" chartId="myPieChart12" chartName="抑郁" />
             </div>
             <div class="chart_wrap">
-              <PieChart :options="options5" chartId="myPieChart14" chartName="精神障碍" />
+              <PieChart :options="options4" chartId="myPieChart13" chartName="压力" />
             </div>
             <div class="chart_wrap">
-              <PieChart
-                :options="options6"
-                chartId="myPieChart15"
-                chartName="存在心理健康情况"
-              />
+              <PieChart :options="options5" chartId="myPieChart14" chartName="精神障碍" />
             </div>
+          
           </div>
 
           <!-- <div class="block_left">
@@ -531,7 +533,7 @@ export default {
               value: this.completeNum,
               name: "已完成人数",
             },
-            { value: this.abnormalNum, name: "心理健康异常" },
+            { value: this.completeNum- this.abnormalNum, name: "心理健康占比" },
           ];
         }
       );