1

src/components/ComparePlanProfession.vue

@@ -6,21 +6,56 @@
     <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 v-model="firstParams" @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-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>
         </el-form-item>
-        <el-form-item label="组织名称">
-          <el-select v-model="orgInfo1" placeholder="请选择组织" @change="orgSelectHandle1">
+        <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>
         </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>
+          </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>
+          </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>
+          </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>
+          </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">
@@ -64,8 +99,8 @@
             </tr>
             <tr>
               <td class="first">焦虑占比</td>
-              <td>{{ getOtherRate('焦虑', 1, 0) }}</td>
-              <td>{{ getOtherRate('焦虑', 2, 0) }}</td>
+              <td v-html="getOtherRate('焦虑', 1, 0)"></td>
+              <td v-html="getOtherRate('焦虑', 2, 0)"></td>
             </tr>
             <tr>
               <td class="first">抑郁人数</td>
@@ -74,8 +109,8 @@
             </tr>
             <tr>
               <td class="first">抑郁占比</td>
-              <td>{{ getOtherRate('抑郁', 1, 1) }}</td>
-              <td>{{ getOtherRate('抑郁', 2, 1) }}</td>
+              <td v-html="getOtherRate('抑郁', 1, 1)"></td>
+              <td v-html="getOtherRate('抑郁', 2, 1)"></td>
             </tr>
             <tr>
               <td class="first">压力人数</td>
@@ -84,8 +119,8 @@
             </tr>
             <tr>
               <td class="first">压力占比</td>
-              <td>{{ getOtherRate('压力', 1, 2) }}</td>
-              <td>{{ getOtherRate('压力', 2, 2) }}</td>
+              <td v-html="getOtherRate('压力', 1, 2)"></td>
+              <td v-html="getOtherRate('压力', 2, 2)"></td>
             </tr>
             <tr>
               <td class="first">精神障碍人数</td>
@@ -94,8 +129,8 @@
             </tr>
             <tr>
               <td class="first">精神障碍占比</td>
-              <td>{{ getOtherRate('精神障碍', 1, 3) }}</td>
-              <td>{{ getOtherRate('精神障碍', 2, 3) }}</td>
+              <td v-html="getOtherRate('精神障碍', 1, 3)"></td>
+              <td v-html="getOtherRate('精神障碍', 2, 3)"></td>
             </tr>
             <tr>
               <td class="first">健康异常人数</td>
@@ -120,6 +155,7 @@ export default {
   data() {
     return {
       dialogVisible: false,
+      firstParams: 1,
       selectPlan1: {},
       selectPlan2: {},
       orgInfo1: {
@@ -128,6 +164,12 @@ export default {
       orgInfo2: {
         orgName: ''
       },
+      compareOptions: {
+        planInfo1: {},
+        planInfo2: {},
+        orgInfo1: {},
+        orgInfo2: {}
+      },
       pageNum: 1,
       pageSize: 10,
       planName: '',
@@ -159,13 +201,16 @@ export default {
     let params = JSON.parse(sessionStorage.getItem('comparePlanInfo'));
     this.selectPlan1 = params;
     this.selectPlan2 = params;
+    this.compareOptions.planInfo1 = params;
+    this.compareOptions.planInfo2 = 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.compareOptions.orgInfo1 = res.data[0];
+      this.compareOptions.orgInfo2 = res.data[1];
       this.orgInfo2 = res.data[1];
       this.initChart();
       this.options = {
@@ -184,7 +229,29 @@ export default {
         },
         xAxis: { type: 'category' },
         yAxis: {},
-        series: [{ type: 'bar' }, { type: 'bar' }]
+        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.queryCompletePople(this.selectPlan1.id, [this.orgInfo1.orgNo], 1);
       this.queryCompletePople(this.selectPlan2.id, [this.orgInfo2.orgNo], 2);
@@ -257,32 +324,42 @@ 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);
         }
       });
     },
 
-    planSelectHandle1(item) {
+    // 首选项计划切换
+    planSelectHandle(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);
+        this.compareOptions.orgInfo1 = null;
+        this.compareOptions.orgInfo2 = null;
       });
     },
 
-    orgSelectHandle1(item) {
+    // 首选项组织切换
+    orgSelectHandle(item) {
       this.queryCompletePople(this.selectPlan1.id, [item.orgNo], 0);
     },
-    orgSelectHandle2(item) {
-      this.queryCompletePople(this.selectPlan2.id, [item.orgNo], 1);
+
+    compareHandle() {
+      if (this.firstParams == 1) {
+        this.queryCompletePople(this.selectPlan1.id, [this.compareOptions.orgInfo1.orgNo], 1);
+        this.queryCompletePople(this.selectPlan1.id, [this.compareOptions.orgInfo2.orgNo], 2);
+      } else {
+        this.queryCompletePople(this.compareOptions.planInfo1.id, [this.orgInfo1.orgNo], 1);
+        this.queryCompletePople(this.compareOptions.planInfo2.id, [this.orgInfo1.orgNo], 2);
+      }
     },
 
     // 未完成占比计算
@@ -300,8 +377,15 @@ export default {
     // 其他占比计算
     getOtherRate(name, i, m) {
       let tempNum = this[`dimensionList${i}`][m][name];
-      let rate = parseInt((tempNum / this[`completeNum${i}`]) * 100)
-      return rate > 0 ? `${rate}%` : rate;
+      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;
     },
   },
 };

src/utils/http.js

@@ -17,8 +17,8 @@ import { router } from "@/router";
 // axios.defaults.baseURL = 'https://child.hhnao.com:8070';
 // axios.defaults.baseURL = 'https://child.hhnao.com:8070';
 //https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx01d1a44906973cf2&redirect_uri=http%3A%2F%2F192.168.18.51%3A8085&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
-export const basePath='http://10.113.248.4:8089'
-// export const basePath = "http://43.143.198.30:8089";
+// export const basePath='http://10.113.248.4:8089'
+export const basePath = "http://43.143.198.30:8089";
 // const base_url = 'http://43.143.198.30:8089/'
 // const base_url = 'http://10.113.248.4:8090/'
 // export const basePath='http://43.143.198.30:8086'