1

src/components/ComparePlanProfession.vue

@@ -66,8 +66,10 @@
           <table v-if="showTable">
             <tr>
               <th class="first">组织</th>
-              <th>一班</th>
-              <th>二班</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>
@@ -88,8 +90,8 @@
             </tr>
             <tr>
               <td class="first">未完成占比</td>
-              <td>{{ getUnCompleteRate(1) }}</td>
-              <td>{{ getUnCompleteRate(2) }}</td>
+              <td :class="{ 'warn': isRed(0, 1) }">{{ getUnCompleteRate(1) }}</td>
+              <td :class="{ 'warn': isRed(0, 2) }">{{ getUnCompleteRate(2) }}</td>
             </tr>
 
             <tr>
@@ -99,8 +101,8 @@
             </tr>
             <tr>
               <td class="first">焦虑占比</td>
-              <td v-html="getOtherRate('焦虑', 1, 0)"></td>
-              <td v-html="getOtherRate('焦虑', 2, 0)"></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>
@@ -109,8 +111,8 @@
             </tr>
             <tr>
               <td class="first">抑郁占比</td>
-              <td v-html="getOtherRate('抑郁', 1, 1)"></td>
-              <td v-html="getOtherRate('抑郁', 2, 1)"></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>
@@ -119,8 +121,8 @@
             </tr>
             <tr>
               <td class="first">压力占比</td>
-              <td v-html="getOtherRate('压力', 1, 2)"></td>
-              <td v-html="getOtherRate('压力', 2, 2)"></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>
@@ -129,8 +131,8 @@
             </tr>
             <tr>
               <td class="first">精神障碍占比</td>
-              <td v-html="getOtherRate('精神障碍', 1, 3)"></td>
-              <td v-html="getOtherRate('精神障碍', 2, 3)"></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>
@@ -139,8 +141,8 @@
             </tr>
             <tr>
               <td class="first">健康异常占比</td>
-              <td>{{ getUnHealthRate(1) }}</td>
-              <td>{{ getUnHealthRate(2) }}</td>
+              <td :class="{ 'warn': isRed(5, 1) }">{{ getUnHealthRate(1) }}</td>
+              <td :class="{ 'warn': isRed(5, 2) }">{{ getUnHealthRate(2) }}</td>
             </tr>
           </table>
         </div>
@@ -150,6 +152,7 @@
 </template>
 <script>
 import * as echarts from 'echarts';
+import { oSessionStorage } from "../utils/utils";
 
 export default {
   data() {
@@ -165,10 +168,10 @@ export default {
         orgName: ''
       },
       compareOptions: {
-        planInfo1: {},
-        planInfo2: {},
-        orgInfo1: {},
-        orgInfo2: {}
+        planInfo1: null,
+        planInfo2: null,
+        orgInfo1: null,
+        orgInfo2: null
       },
       pageNum: 1,
       pageSize: 10,
@@ -188,7 +191,10 @@ export default {
       dimensionList1: [],
       dimensionList2: [],
       unHealthNum1: 0,
-      unHealthNum2: 0
+      unHealthNum2: 0,
+      compareTableDate: {},
+      userOrgNo: '',
+      userInfo: ''
     };
   },
   computed: {
@@ -198,20 +204,26 @@ export default {
     }
   },
   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;
-    this.getPlanList();
+    this.getPlanByOrg(this.userInfo.orgNo);
   },
   mounted() {
     this.getPlanOrganization(this.selectPlan1.id).then((res) => {
       this.organizationsList = res.data;
       this.organizationsList2 = res.data;
-      this.compareOptions.orgInfo1 = res.data[0];
-      this.compareOptions.orgInfo2 = res.data[1];
-      this.orgInfo2 = res.data[1];
+      if (res.data.length > 1) {
+        this.compareOptions.orgInfo1 = res.data[0];
+        this.compareOptions.orgInfo2 = res.data[1];
+      } else {
+        this.compareOptions.orgInfo1 = res.data[0];
+        this.compareOptions.orgInfo2 = res.data[0];
+      }
       this.initChart();
       this.options = {
         legend: {},
@@ -253,15 +265,16 @@ export default {
           }
         }]
       };
-      this.queryCompletePople(this.selectPlan1.id, [this.orgInfo1.orgNo], 1);
-      this.queryCompletePople(this.selectPlan2.id, [this.orgInfo2.orgNo], 2);
+      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');
-      this.myChart = echarts.init(chartDom);
-      this.option && this.myChart.setOption(this.option);
+      var myChart = echarts.init(chartDom);
+      this.option && myChart.setOption(this.option);
     },
 
     // 查询测试计划
@@ -277,8 +290,18 @@ export default {
     },
 
     // 查询当前组织所在测试计划
-    getPlanByOrg() {
-      this.$http.get(`plan/findPlanByOrg?orgNo=${this.orgInfo1.orgNo}`, {}, res => {
+    getPlanByOrg(no) {
+      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;
         }
@@ -333,16 +356,11 @@ export default {
       this.$http.get(url, {}, (res) => {
         if (res.code == 200) {
           this[`unHealthNum${i}`] = res.data;
-          if (this.firstParams == 1) {
-            this.options.dataset.source[0][1] = this.compareOptions.orgInfo1.orgName;
-            this.options.dataset.source[0][2] = this.compareOptions.orgInfo2.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[6][i] = (parseInt(res.data) / this[`completeNum${i}`]) * 100;
-          this.options && this.myChart.setOption(this.options);
+          this.getTableData();
+          echarts.init(document.getElementById('my_chart')).dispose(); // 销毁实例
+          var myChart1 = echarts.init(document.getElementById('my_chart')); // 再次创建实
+          this.options && myChart1.setOption(this.options);
         }
       });
     },
@@ -356,14 +374,31 @@ export default {
       });
     },
 
+    // 切换首选项
+    firstParamsHandle(val) {
+      this.compareOptions.orgInfo1 = null;
+      this.compareOptions.orgInfo2 = null;
+      this.compareOptions.planInfo1 = null;
+      this.compareOptions.planInfo2 = null;
+      this.selectPlan1 = null;
+      this.orgInfo1 = null;
+    },
+
     // 首选项组织切换
     orgSelectHandle(item) {
       this.compareOptions.planInfo1 = null;
       this.compareOptions.planInfo2 = null;
-      this.getPlanByOrg();
+      // this.getPlanByOrg();
     },
 
     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;
+      } else {
+        this.options.dataset.source[0][1] = this.compareOptions.planInfo1.planName;
+        this.options.dataset.source[0][2] = this.compareOptions.planInfo2.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);
@@ -373,6 +408,18 @@ export default {
       }
     },
 
+    // 组织表格数据
+    getTableData() {
+      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
+    },
+
     // 未完成占比计算
     getUnCompleteRate(i) {
       let rate = parseInt((this[`unComplete${i}`] / (this[`unComplete${i}`] + this[`completeNum${i}`])) * 100);
@@ -389,14 +436,14 @@ export default {
     getOtherRate(name, i, m) {
       let tempNum = this[`dimensionList${i}`][m][name];
       let rate = parseInt((tempNum / this[`completeNum${i}`]) * 100);
-      if (rate > 0 && rate <= 50) {
-        rate = `<span>${rate}%</span>`
-      } else if (rate > 50 && rate <= 75) {
-        rate = `<span style='color: orange'>${rate}%</span>`
-      } else if (rate > 75) {
-        rate = `<span style='color: red'>${rate}%</span>`
-      }
-      return rate;
+      // if (rate > 0 && rate <= 50) {
+      //   rate = `<span>${rate}%</span>`
+      // } else if (rate > 50 && rate <= 75) {
+      //   rate = `<span style='color: orange'>${rate}%</span>`
+      // } else if (rate > 75) {
+      //   rate = `<span style='color: red'>${rate}%</span>`
+      // }
+      return rate > 0 ? `${rate}%` : rate;
     },
   },
 };
@@ -445,6 +492,10 @@ export default {
       margin: 0;
       text-align: right;
     }
+
+    td.warn {
+      background: red;
+    }
   }
 }