From fe74d20aedb4f25df5611b24827e7c6b3a0df1de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=8B=A5=E6=99=A8?= <974220104@qq.com>
Date: Sun, 8 Oct 2023 17:10:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/PersonnelPortrait/index.vue       | 115 ++++---
 .../modules/TypesOfDissatisfaction/index.vue  | 309 ++++++++++--------
 2 files changed, 249 insertions(+), 175 deletions(-)

diff --git a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
index dd6034b4d..72d5ab367 100644
--- a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
@@ -1,26 +1,37 @@
 <template>
-  <div class="personnel-portrait"
-       v-loading="loading"
-       element-loading-text="加载中..."
-       element-loading-spinner="el-icon-loading"
-       element-loading-background="rgba(0,0,0,0.5)">
-    <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/>
+  <div
+    class="personnel-portrait"
+    v-loading="loading"
+    element-loading-text="加载中..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0,0,0,0.5)"
+  >
+    <Tabs
+      v-model="resultType"
+      :list="resultTypeList"
+      @changeVal="resultTypeChange"
+    />
     <div class="screen">
       <div class="txt">不满意人员画像</div>
-      <!--      <el-select v-model="typeCondition" @change="getData" placeholder="请选择" class="select" popper-class="selectPopClass">
-              <el-option
-                  v-for="item in typeConditionList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-              </el-option>
-            </el-select>-->
+      <el-select
+        v-if="resultType == 'provinceAndSelf'"
+        v-model="typeCondition"
+        @change="getData"
+        placeholder="请选择"
+        class="select"
+        popper-class="selectPopClass"
+      >
+        <el-option
+          v-for="item in typeConditionList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
     </div>
 
-    <div
-
-        class="portrait">
-
+    <div class="portrait">
       <div class="tag yellow" v-if="gridName">
         <div class="text">{{ gridName }}</div>
       </div>
@@ -40,7 +51,17 @@
         <div class="text">{{ marriageName }}</div>
       </div>
       <div class="tag purple" v-if="gender">
-        <div class="text">{{ gender === "1" ? "男" : gender === "2" ? "女" : gender === "0" ? "未知" : "" }}</div>
+        <div class="text">
+          {{
+            gender === "1"
+              ? "男"
+              : gender === "2"
+              ? "女"
+              : gender === "0"
+              ? "未知"
+              : ""
+          }}
+        </div>
       </div>
     </div>
 
@@ -49,7 +70,7 @@
         按画像匹配到同类：<span>
           <b>{{ matchPeopleNum ? matchPeopleNum : 0 }}</b
           >人</span
-      >
+        >
       </div>
       <i class="el-icon-arrow-right"></i>
     </div>
@@ -61,7 +82,7 @@ import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
 
 export default {
   name: "PersonnelPortrait",
-  components: {Tabs},
+  components: { Tabs },
   data() {
     return {
       resultType: "provinceAndSelf",
@@ -86,7 +107,7 @@ export default {
       residentTagName: "",
       matchPeopleNum: 0,
       searchParams: "",
-      loading: true
+      loading: true,
     };
   },
   watch: {
@@ -99,7 +120,7 @@ export default {
   },
   mounted() {
     if (this.$store.state.chooseArea.chooseName.orgId) {
-      // this.getDisKey()
+      this.getDisKey();
       this.getData();
     }
   },
@@ -109,34 +130,44 @@ export default {
       this.getData();
     },
     gotopage() {
-      this.$router.push("/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" + this.searchParams);
+      this.$router.push(
+        "/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" +
+          this.searchParams
+      );
     },
     getDisKey() {
-      this.$http.post("/sys/dict/data/dictlist", {dictType: "satisfaction_category"}).then(({data: {data}}) => {
-        this.typeCondition = data[0].value;
-        this.typeConditionList = data;
-      });
+      this.$http
+        .post("/sys/dict/data/dictlist", { dictType: "satisfaction_category" })
+        .then(({ data: { data } }) => {
+          this.typeCondition = data[0].value;
+          this.typeConditionList = data;
+        });
     },
     getData() {
-      this.loading = true
+      this.loading = true;
       let params = {
         level: this.$store.state.chooseArea.chooseName.level,
         orgId: this.$store.state.chooseArea.chooseName.orgId,
         queryType: this.resultType,
-        category: this.typeCondition,
+        category: this.resultType == "provinceAndSelf" ? this.typeCondition : null,
       };
-      this.$http.get("/governance/satisfactionOverview/satisfactionCrowdPortrait?" + this.$paramsFormat(params)).then(({data: {data}}) => {
-        this.gender = data.gender;
-        this.marriageName = data.marriageName;
-        this.ageClassification = data.ageClassification;
-        this.cultureName = data.cultureName;
-        this.gridName = data.gridName;
-        this.monthIncomeLevel = data.monthIncomeLevel;
-        this.residentTagName = data.residentTagName;
-        this.matchPeopleNum = data.matchPeopleNum;
-        this.loading = false
-        this.searchParams = JSON.stringify({...data, ...params});
-      });
+      this.$http
+        .get(
+          "/governance/satisfactionOverview/satisfactionCrowdPortrait?" +
+            this.$paramsFormat(params)
+        )
+        .then(({ data: { data } }) => {
+          this.gender = data.gender;
+          this.marriageName = data.marriageName;
+          this.ageClassification = data.ageClassification;
+          this.cultureName = data.cultureName;
+          this.gridName = data.gridName;
+          this.monthIncomeLevel = data.monthIncomeLevel;
+          this.residentTagName = data.residentTagName;
+          this.matchPeopleNum = data.matchPeopleNum;
+          this.loading = false;
+          this.searchParams = JSON.stringify({ ...data, ...params });
+        });
     },
   },
 };
diff --git a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
index e1f09aeae..8aa971e01 100644
--- a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
@@ -1,26 +1,34 @@
 <template>
-  <div class="types-dissatisfaction"
-       v-loading="loading"
-       element-loading-text="加载中..."
-       element-loading-spinner="el-icon-loading"
-       element-loading-background="rgba(0,0,0,0.5)"
+  <div
+    class="types-dissatisfaction"
+    v-loading="loading"
+    element-loading-text="加载中..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0,0,0,0.5)"
   >
     <div class="screen">
-      <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/>
-      <el-select v-model="typeCondition"
-                 popper-class="selectPopClass"
-                 placeholder="请选择"
-                 class="select"
-                 @change="timeChange">
+      <Tabs
+        v-model="resultType"
+        :list="resultTypeList"
+        @changeVal="resultTypeChange"
+      />
+      <el-select
+        v-model="typeCondition"
+        popper-class="selectPopClass"
+        placeholder="请选择"
+        class="select"
+        @change="timeChange"
+      >
         <el-option
-            v-for="item in typeConditionList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
+          v-for="item in typeConditionList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
         </el-option>
       </el-select>
     </div>
-    <div id="typeConditionChart" style="height: 542px;"></div>
+    <div id="typeConditionChart" style="height: 542px"></div>
   </div>
 </template>
 
@@ -30,47 +38,52 @@ import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
 
 export default {
   name: "TypesOfDissatisfaction",
-  components: {Tabs},
+  components: { Tabs },
   data() {
     return {
       resultType: 1,
-      resultTypeList: [{
-        label: ' 按省调查/社区自查结果',
-        value: 1
-
-      }, {
-        label: '按12345热线投诉结果',
-        value: 2
-
-      }],
+      resultTypeList: [
+        {
+          label: " 按省调查/社区自查结果",
+          value: 1,
+        },
+        {
+          label: "按12345热线投诉结果",
+          value: 2,
+        },
+      ],
       typeCondition: 1,
       typeConditionList: [
         {
-          label: '本月',
-          value: 1
-        }, {
-          label: '上月',
-          value: 2
-        }, {
-          label: '近三月',
-          value: 3
-        }, {
-          label: '近半年',
-          value: 4
-        }, {
-          label: '近一年',
-          value: 5
+          label: "本月",
+          value: 1,
+        },
+        {
+          label: "上月",
+          value: 2,
+        },
+        {
+          label: "近三月",
+          value: 3,
+        },
+        {
+          label: "近半年",
+          value: 4,
+        },
+        {
+          label: "近一年",
+          value: 5,
         },
       ],
-      loading: true
-    }
+      loading: true,
+    };
   },
   watch: {
     "$store.state.chooseArea.chooseName"(val) {
       if (val.orgId) {
         this.getData();
       }
-    }
+    },
   },
   mounted() {
     if (this.$store.state.chooseArea.chooseName.orgId) {
@@ -80,99 +93,124 @@ export default {
   methods: {
     resultTypeChange(val) {
       if (val !== this.resultType) {
-        this.resultType = val
-        this.getData()
+        this.resultType = val;
+        this.getData();
       }
     },
     timeChange() {
-      let startTime = '', endTime = ''
+      let startTime = "",
+        endTime = "";
       if (this.typeCondition === 1) {
-        startTime = this.$moment().startOf('month').format('YYYY-MM-DD')
+        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
       }
       if (this.typeCondition === 2) {
-        startTime = this.$moment().subtract(1, 'months').startOf('month').format('YYYY-MM-DD')
+        startTime = this.$moment()
+          .subtract(1, "months")
+          .startOf("month")
+          .format("YYYY-MM-DD");
       }
       if (this.typeCondition === 3) {
-        startTime = this.$moment().subtract(2, 'months').startOf('month').format('YYYY-MM-DD')
+        startTime = this.$moment()
+          .subtract(2, "months")
+          .startOf("month")
+          .format("YYYY-MM-DD");
       }
       if (this.typeCondition === 4) {
-        startTime = this.$moment().subtract(5, 'months').startOf('month').format('YYYY-MM-DD')
+        startTime = this.$moment()
+          .subtract(5, "months")
+          .startOf("month")
+          .format("YYYY-MM-DD");
       }
       if (this.typeCondition === 5) {
-        startTime = this.$moment().subtract(11, 'months').startOf('month').format('YYYY-MM-DD')
+        startTime = this.$moment()
+          .subtract(11, "months")
+          .startOf("month")
+          .format("YYYY-MM-DD");
       }
 
       if (this.typeCondition === 2) {
-        endTime = this.$moment().subtract(1, 'months').endOf('month').format('YYYY-MM-DD')
+        endTime = this.$moment()
+          .subtract(1, "months")
+          .endOf("month")
+          .format("YYYY-MM-DD");
       } else {
-        endTime = this.$moment().endOf('month').format('YYYY-MM-DD')
+        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
       }
-      this.getData(startTime, endTime)
-      this.$emit('timeChange', {startTime, endTime})
+      this.getData(startTime, endTime);
+      this.$emit("timeChange", { startTime, endTime });
     },
     getData(startTime, endTime) {
-      this.loading = true
+      this.loading = true;
       let params = {
         level: this.$store.state.chooseArea.chooseName.level,
         orgId: this.$store.state.chooseArea.chooseName.orgId,
         startTime,
-        endTime
-      }
-
+        endTime,
+      };
 
-      params = this.$paramsFormat(params)
-      let url = '/governance/satisfactionOverview/satisfactionGroup'
+      params = this.$paramsFormat(params);
+      let url = "/governance/satisfactionOverview/satisfactionGroup";
 
       if (this.resultType === 2) {
-        url = '/governance/satisfactionOverview/event12345Group'
+        url = "/governance/satisfactionOverview/event12345Group";
       }
 
-      this.$http.get(url + '?' + params).then(({data: {data}}) => {
-        this.initCharts(data)
-      })
+      this.$http.get(url + "?" + params).then(({ data: { data } }) => {
+        this.initCharts(data);
+      });
     },
     initCharts(data) {
-      let div = document.getElementById('typeConditionChart');
+      let div = document.getElementById("typeConditionChart");
       this.myChart = echarts.init(div);
-      var dataname = data.map(item => item.name)
-      var datavaule = data.map(item => item.blueNum ? item.blueNum : 0)
-      var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0)
-      var indicator = []
-      let max = Math.max(...datavaule, ...datavaule2)
-      console.log(max)
-      var datamax = new Array(datavaule.length).fill(max)
+      var dataname = data.map((item) => item.name);
+      var datavaule = data.map((item) => (item.blueNum ? item.blueNum : 0));
+      var datavaule2 = data.map((item) =>
+        item.yellowNum ? item.yellowNum : 0
+      );
+      var indicator = [];
+      let max = Math.max(...datavaule, ...datavaule2);
+      console.log(max);
+      var datamax = new Array(datavaule.length).fill(max);
       for (var i = 0; i < dataname.length; i++) {
         indicator.push({
           name: dataname[i],
           max: datamax[i],
-        })
+        });
       }
-      let legendName = ['省满意度调查\n各项不满意人数', '社区满意度自查\n各项不满意人数']
-      let series = [{
-        name: this.resultType === 2 ? '12345热线\n事件上报人数' : "省满意度调查\n各项不满意人数",
-        type: "radar",
-        symbol: "circle",
-        symbolSize: 7,
-        areaStyle: {
-          normal: {
-            color: 'rgba(58,128,231,0.36)',
-          }
-        },
-        itemStyle: {
-          color: '#3A80E7',
-          borderColor: '#3AB7FF',
-          borderWidth: 1,
-        },
-        lineStyle: {
-          normal: {
-            color: "#3AB7FF",
-            width: 2
-          }
+      let legendName = [
+        "省满意度调查\n各项不满意人数",
+        "社区满意度自查\n各项不满意人数",
+      ];
+      let series = [
+        {
+          name:
+            this.resultType === 2
+              ? "12345热线\n事件上报人数"
+              : "省满意度调查\n各项不满意人数",
+          type: "radar",
+          symbol: "circle",
+          symbolSize: 7,
+          areaStyle: {
+            normal: {
+              color: "rgba(58,128,231,0.36)",
+            },
+          },
+          itemStyle: {
+            color: "#3A80E7",
+            borderColor: "#3AB7FF",
+            borderWidth: 1,
+          },
+          lineStyle: {
+            normal: {
+              color: "#3AB7FF",
+              width: 2,
+            },
+          },
+          data: [datavaule],
         },
-        data: [datavaule]
-      }]
+      ];
       if (this.resultType === 2) {
-        legendName = ['12345热线\n事件上报人数']
+        legendName = ["12345热线\n事件上报人数"];
       } else {
         series.push({
           name: "社区满意度自查\n各项不满意人数",
@@ -181,46 +219,51 @@ export default {
           symbolSize: 7,
           areaStyle: {
             normal: {
-              color: 'rgba(170, 216, 255, 0)',
-            }
+              color: "rgba(170, 216, 255, 0)",
+            },
           },
           itemStyle: {
-            color: '#EB8E16',
-            borderColor: '#EF9700',
+            color: "#EB8E16",
+            borderColor: "#EF9700",
             borderWidth: 1,
           },
           lineStyle: {
             normal: {
               color: "#EF9700",
-              width: 2
-            }
+              width: 2,
+            },
           },
-          data: [datavaule2]
-        })
+          data: [datavaule2],
+        });
       }
       var option = {
         tooltip: {
-          show: false,
           trigger: "item",
+          backgroundColor: 'rgba(13,33,71,0.5)',
+          borderColor: 'rgba(143,174,252,0.6)',
+          padding: 8,
+          textStyle: {
+            color: '#fff',
+          },
         },
         legend: {
           show: true,
           textStyle: {
-            color: '#ffffff',
+            color: "#ffffff",
             rich: {
               name: {
                 fontSize: 14,
                 lineHeight: 22,
-                padding: [24, 0, 0, 0]
+                padding: [24, 0, 0, 0],
               },
-            }
+            },
           },
           itemWidth: 6,
           itemHeight: 6,
           y: 0,
-          x: 'right',
-          formatter: name => {
-            return `{name|${name}}`
+          x: "right",
+          formatter: (name) => {
+            return `{name|${name}}`;
           },
           data: legendName,
         },
@@ -231,8 +274,8 @@ export default {
           splitNumber: 5,
           splitArea: {
             areaStyle: {
-              color: 'transparent'
-            }
+              color: "transparent",
+            },
           },
           axisLabel: {
             show: false,
@@ -240,33 +283,33 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: "transparent"
-            }
+              color: "transparent",
+            },
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "#527AA8"
-            }
+              color: "#527AA8",
+            },
           },
           name: {
             textStyle: {
-              color: '#ffffff',
-              fontSize: '16',
+              color: "#ffffff",
+              fontSize: "16",
               borderRadius: 3,
-              padding: [3, 5]
-            }
+              padding: [3, 5],
+            },
           },
-          indicator: indicator
+          indicator: indicator,
         },
-        series
+        series,
       };
       this.myChart.setOption(option, true);
       window.addEventListener("resize", () => this.myChart.resize());
-      this.loading = false
+      this.loading = false;
     },
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -281,15 +324,15 @@ export default {
   /deep/ .el-input__inner {
     width: 90px !important;
     height: 24px !important;
-    background: #021C49 !important;
-    border: 1px solid #125AAA !important;
+    background: #021c49 !important;
+    border: 1px solid #125aaa !important;
     border-radius: 12px !important;
-    color: #A0CDFF;
+    color: #a0cdff;
   }
 
   /deep/ .el-input__icon {
     line-height: 24px !important;
-    color: #A0CDFF;
+    color: #a0cdff;
   }
 }
-</style>
\ No newline at end of file
+</style>