From 5ba65fdae91f1bcd7094c583ffc7d6056919d5c3 Mon Sep 17 00:00:00 2001
From: PLUTO <>
Date: Wed, 11 Oct 2023 16:05:48 +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

---
 src/router/index.js                           |   2 +-
 src/utils/jwTool.js                           |  20 +-
 .../dataBoard/overview/components/jdwgy.vue   |   2 +-
 .../satisfactionEval/dissatisfied/index.vue   | 392 +++++++++---------
 .../dataBoard/satisfactionEval/index.vue      |  56 +--
 .../modules/TypesOfDissatisfaction/index.vue  |  34 +-
 src/views/dataBoardMain/main-content.vue      |   2 +-
 7 files changed, 252 insertions(+), 256 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 6f93f324e..61058313f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -504,7 +504,7 @@ export const dataBoardRoutes = {
       },
     },
     {
-      path: "satisfactionEval/dissatisfied",
+      path: "satisfactionEval/dissatisfied/:id/:type/:timeType",
       props: true,
       component: () => import("@/views/dataBoard/satisfactionEval/dissatisfied/index"),
       name: "dataBoard-satisfactionEval-dissatisfied",
diff --git a/src/utils/jwTool.js b/src/utils/jwTool.js
index 058e03e1f..0da251e67 100644
--- a/src/utils/jwTool.js
+++ b/src/utils/jwTool.js
@@ -1,12 +1,16 @@
 import Vue from "vue";
 
 const paramsFormat = function (params) {
-    let strArray = []
-    for(let key in params) {
-        if(params[key]) {
-            strArray.push(key+'='+params[key])
-        }
+  const data = { ...params };
+  if (data.satisfactionSource) {
+    data.satisfactionSource = data.satisfactionSource.join(",");
+  }
+  let strArray = [];
+  for (let key in data) {
+    if (data[key]) {
+      strArray.push(key + "=" + data[key]);
     }
-    return strArray.join('&')
-}
-Vue.prototype.$paramsFormat = paramsFormat
+  }
+  return strArray.join("&");
+};
+Vue.prototype.$paramsFormat = paramsFormat;
diff --git a/src/views/dataBoard/overview/components/jdwgy.vue b/src/views/dataBoard/overview/components/jdwgy.vue
index e554fc8a5..af9b3e2b3 100644
--- a/src/views/dataBoard/overview/components/jdwgy.vue
+++ b/src/views/dataBoard/overview/components/jdwgy.vue
@@ -126,7 +126,7 @@ export default {
     getData() {
       this.loading = true;
       if (this.currentLevelData.orgLevel == "grid") {
-        const personType = this.ifUnit ? "unit" : this.peopleType;
+        const personType = this.ifUnit && this.peopleType === "unit" ? "unit" : this.peopleType;
         this.$http.get("/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" + personType + "&level=" + this.currentLevelData.orgLevel + "&orgId=" + this.currentLevelData.orgId).then(({ data: { data } }) => {
           this.loading = false;
           this.wglist = data;
diff --git a/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue b/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue
index 27938d853..8c228b173 100644
--- a/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue
+++ b/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue
@@ -1,55 +1,20 @@
 <template>
   <div>
-    <Breadcrumb :list="breadcrumbList"/>
+    <Breadcrumb :list="breadcrumbList" />
     <div class="screen">
       <el-form :model="queryParams" inline>
-        <el-date-picker
-            size="small"
-            popper-class="selectPopClass"
-            v-model="queryParams.month"
-            type="month"
-            value-format="yyyy-MM"
-            placeholder="按月度">
-        </el-date-picker>
-
-        <el-select popper-class="selectPopClass" v-model="queryParams.agencyId" size="small" placeholder="按组织">
-          <el-option
-              v-for="item in orgOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-          </el-option>
+        <el-date-picker v-if="!hideSearch" size="small" popper-class="selectPopClass" v-model="queryParams.month" type="month" value-format="yyyy-MM" placeholder="按月度"> </el-date-picker>
+
+        <el-select v-if="!hideSearch" popper-class="selectPopClass" v-model="queryParams.agencyId" size="small" placeholder="按组织">
+          <el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
 
-        <el-select
-            popper-class="selectPopClass"
-            clearable
-            v-model="queryParams.satisfactionSource"
-            size="small"
-            placeholder="按不满意事项来源"
-            @change="getSatisfactionCategoryOptions"
-        >
-          <el-option
-              v-for="item in satisfactionSourceOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-          </el-option>
+        <el-select class="searchSelect" popper-class="selectPopClass" clearable collapse-tags multiple v-model="queryParams.satisfactionSource" size="small" placeholder="按不满意事项来源" @change="getSatisfactionCategoryOptions">
+          <el-option v-for="item in satisfactionSourceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
 
-        <el-select
-            popper-class="selectPopClass"
-            clearable
-            v-model="queryParams.satisfactionCategory"
-            size="small"
-            placeholder="按不满意事项类型"
-        >
-          <el-option
-              v-for="item in satisfactionCategoryOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-          </el-option>
+        <el-select popper-class="selectPopClass" clearable v-model="queryParams.satisfactionCategory" size="small" placeholder="按不满意事项类型">
+          <el-option v-for="item in satisfactionCategoryOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
         <el-input v-model.trim="queryParams.name" size="small" placeholder="按人员姓名"></el-input>
         <el-input v-model.trim="queryParams.mobile" size="small" placeholder="按人员电话"></el-input>
@@ -58,96 +23,52 @@
     </div>
 
     <div class="table">
-      <el-table :data="list"
-                v-loading="loading"
-                element-loading-text="加载中..."
-                element-loading-spinner="el-icon-loading"
-                element-loading-background="rgba(0,0,0,0.5)"
-      >
-        <el-table-column
-            label="序号"
-            type="index"
-            width="80"/>
-
-        <el-table-column
-            prop="month"
-            label="月度"
-            width="114"/>
-
-        <el-table-column
-            prop="organizationName"
-            width="118"
-            label="所属社区"/>
-
-        <el-table-column
-            prop="satisfactionSource"
-            width="168"
-            label="事项来源">
-          <template slot-scope="{row}">
-            <span :style="{color: satisfactionSourceFormat(row.satisfactionSource).color}">
-            {{ satisfactionSourceFormat(row.satisfactionSource).label }}
-            </span>
+      <el-table :data="list" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)">
+        <el-table-column label="序号" type="index" width="80" />
 
-          </template>
-        </el-table-column>
+        <el-table-column prop="month" label="月度" width="114" />
+
+        <el-table-column prop="organizationName" width="118" label="所属社区" />
 
-        <el-table-column
-            prop="satisfactionCategoryName"
-            width="150"
-            label="事项类型"/>
-
-        <el-table-column
-            prop="reason"
-            show-overflow-tooltip
-            label="事项描述"/>
-
-        <el-table-column
-            prop="createdTime"
-            width="197"
-            label="提交时间"/>
-
-        <el-table-column
-            prop="name"
-            width="119"
-            label="姓名"/>
-
-        <el-table-column
-            prop="mobile"
-            width="153"
-            label="电话"/>
-
-        <el-table-column
-            prop="completeFlag"
-            width="118px"
-            label="是否完成">
-          <template slot-scope="{row}">
-            <span :class="row.completeFlag==='是'?'light':'red'">
-            {{ row.completeFlag }}
+        <el-table-column prop="satisfactionSource" width="168" label="事项来源">
+          <template slot-scope="{ row }">
+            <span :style="{ color: satisfactionSourceFormat(row.satisfactionSource).color }">
+              {{ satisfactionSourceFormat(row.satisfactionSource).label }}
             </span>
           </template>
         </el-table-column>
 
+        <el-table-column prop="satisfactionCategoryName" width="150" label="事项类型" />
+
+        <el-table-column prop="reason" show-overflow-tooltip label="事项描述" />
+
+        <el-table-column prop="createdTime" width="197" label="提交时间" />
+
+        <el-table-column prop="name" width="119" label="姓名" />
+
+        <el-table-column prop="mobile" width="153" label="电话" />
 
-        <el-table-column
-            prop="followUpStatus"
-            width="118px"
-            label="是否回访">
-          <template slot-scope="{row}">
-            <span :class="row.followUpStatus==='是'?'light':'red'">
-            {{ row.followUpStatus }}
+        <el-table-column prop="completeFlag" width="118px" label="是否完成">
+          <template slot-scope="{ row }">
+            <span :class="row.completeFlag === '是' ? 'light' : 'red'">
+              {{ row.completeFlag }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column
-            prop="dangerFlag"
-            width="118px"
-            label="消除风险">
-          <template slot-scope="{row}">
-            <span :class="row.dangerFlag==='是'?'light':'red'">
-            {{ row.dangerFlag }}
+        <el-table-column prop="followUpStatus" width="118px" label="是否回访">
+          <template slot-scope="{ row }">
+            <span :class="row.followUpStatus === '是' ? 'light' : 'red'">
+              {{ row.followUpStatus }}
             </span>
+          </template>
+        </el-table-column>
 
+        <el-table-column prop="dangerFlag" width="118px" label="消除风险">
+          <template slot-scope="{ row }">
+            <span :class="row.dangerFlag === '是' ? 'light' : 'red'">
+              {{ row.dangerFlag }}
+            </span>
           </template>
         </el-table-column>
 
@@ -156,35 +77,29 @@
             <el-button type="text" @click="handleView(data.row)">查看</el-button>
           </template>
         </el-table-column>
-
       </el-table>
     </div>
 
-    <Pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNo"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
-    <DissatisfiedDetail ref="detail" :id="id"/>
+    <Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <DissatisfiedDetail ref="detail" :id="id" />
   </div>
 </template>
 
 <script>
-import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
-import Pagination from '@/views/dataBoard/satisfactionEval/components/Pagination'
-import DissatisfiedDetail from './detail.vue'
+import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
+import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
+import DissatisfiedDetail from "./detail.vue";
 
 export default {
   name: "dissatisfied",
-  components: {Breadcrumb, DissatisfiedDetail, Pagination},
+  components: { Breadcrumb, DissatisfiedDetail, Pagination },
   data() {
     return {
+      hideSearch: false,
       queryParams: {
-        month: this.$moment().format('YYYY-MM'),
+        month: this.$moment().format("YYYY-MM"),
         agencyId: "",
-        satisfactionSource: "",
+        satisfactionSource: [],
         satisfactionCategory: "",
         name: "",
         mobile: "",
@@ -193,93 +108,153 @@ export default {
       },
       id: {},
       total: 0,
-      breadcrumbList: [{
-        path: '/dataBoard/satisfactionEval/index',
-        name: '满意度评价'
-      }, {
-        path: '',
-        name: '不满意事项列表'
-      }],
+      timeRange: [],
+      breadcrumbList: [
+        {
+          path: "/dataBoard/satisfactionEval/index",
+          name: "满意度评价",
+        },
+        {
+          path: "",
+          name: "不满意事项列表",
+        },
+      ],
       orgOptions: [],
       satisfactionCategoryOptions: [],
       list: [],
-      satisfactionSourceOptions: [{
-        value: 'satisfaction_12345',
-        label: '12345投诉',
-        color: '#FFB73C',
-      }, {
-        value: 'satisfaction_province',
-        label: '省满意度调查',
-        color: '#64C1FF'
-      }, {
-        value: 'satisfaction_community',
-        label: '社区满意度自查',
-        color: '#08EBAE'
-      }],
-      loading: true
-    }
+      satisfactionSourceOptions: [
+        {
+          value: "satisfaction_12345",
+          label: "12345投诉",
+          color: "#FFB73C",
+        },
+        {
+          value: "satisfaction_province",
+          label: "省满意度调查",
+          color: "#64C1FF",
+        },
+        {
+          value: "satisfaction_community",
+          label: "社区满意度自查",
+          color: "#08EBAE",
+        },
+      ],
+      loading: true,
+    };
   },
   mounted() {
-    this.getOrg()
+    this.getOldPageParamsData();
+    this.getOrg();
   },
   methods: {
+    getOldPageParamsData() {
+      const { id, timeType } = this.$route.params;
+      let satisSourceArr = [];
+      if (id == 1) {
+        satisSourceArr = ["satisfaction_province", "satisfaction_community"];
+      } else if (id == 2) {
+        satisSourceArr = ["satisfaction_12345"];
+      }
+      this.queryParams.satisfactionSource = satisSourceArr;
+      if (this.queryParams.satisfactionSource.length > 0) {
+        this.getSatisfactionCategoryOptions();
+      }
+      if (timeType != 0) {
+        this.hideSearch = true;
+        this.timeRange = this.timeChange(timeType);
+        console.log(this.timeRange);
+      } else {
+        this.hideSearch = false;
+      }
+    },
+
     getSatisfactionCategoryOptions() {
-      this.queryParams.satisfactionCategory = ''
+      this.queryParams.satisfactionCategory = "";
       if (!this.queryParams.satisfactionSource) {
-        this.satisfactionCategoryOptions = []
-        return
+        this.satisfactionCategoryOptions = [];
+        return;
       }
-      this.$http.get('/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=' + this.queryParams.satisfactionSource).then(({data: {data}}) => {
-        this.satisfactionCategoryOptions = data.map(item => {
+      const satisfactionSource = this.queryParams.satisfactionSource.toString();
+      this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" + satisfactionSource).then(({ data: { data } }) => {
+        this.satisfactionCategoryOptions = data.map((item) => {
           return {
             label: item.categoryName,
-            value: item.categoryCode
-          }
-        })
-      })
-
+            value: item.categoryCode,
+          };
+        });
+        this.queryParams.satisfactionCategory = this.$route.params.type == 0 ? "" : this.$route.params.type;
+      });
     },
     satisfactionSourceFormat(val) {
-      let satisfactionSource = this.satisfactionSourceOptions.filter(item => item.value === val)[0]
-      return satisfactionSource ? satisfactionSource : ''
+      let satisfactionSource = this.satisfactionSourceOptions.filter((item) => item.value === val)[0];
+      return satisfactionSource ? satisfactionSource : "";
     },
     search() {
-      this.queryParams.pageNo = 1
+      this.queryParams.pageNo = 1;
       this.getList();
     },
     getList() {
-      this.loading = true
-      this.$http.get('/governance/satisfactionDetailList/getUnsatisfiedMattersList?' + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => {
-        this.total = data.total
-        this.list = data.list
-        this.loading = false
-      })
+      this.loading = true;
+      this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedMattersList?" + this.$paramsFormat(this.queryParams)).then(({ data: { data } }) => {
+        this.total = data.total;
+        this.list = data.list;
+        this.loading = false;
+      });
     },
     getOrg() {
       let params = {
         orgId: this.$store.state.chooseArea.chooseName.orgId,
-        level: this.$store.state.chooseArea.chooseName.level
+        level: this.$store.state.chooseArea.chooseName.level,
+      };
+
+      this.$http.post(`/gov/org/agency/maporg`, params).then(async ({ data: { data } }) => {
+        this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId;
+        let parent = { value: data.id, label: data.name };
+        this.orgOptions = [
+          parent,
+          ...data.children.map((item) => {
+            return {
+              value: item.id,
+              label: item.name,
+            };
+          }),
+        ];
+        this.getList();
+      });
+    },
+    timeChange(type) {
+      let startTime = "",
+        endTime = "";
+      if (type == 1) {
+        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 2) {
+        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 3) {
+        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 4) {
+        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 5) {
+        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
       }
 
-      this.$http.post(`/gov/org/agency/maporg`, params).then(async ({data: {data}}) => {
-        this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId
-        let parent = {value: data.id, label: data.name}
-        this.orgOptions = [parent, ...data.children.map(item => {
-          return {
-            value: item.id,
-            label: item.name
-          }
-        })]
-        this.getList()
-      })
+      if (type == 2) {
+        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+      } else {
+        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+      }
+      return [startTime, endTime];
     },
     handleView(id) {
-      console.log(id)
-      this.id = id
-      this.$refs.detail.open(id)
-    }
-  }
-}
+      console.log(id);
+      this.id = id;
+      this.$refs.detail.open(id);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -288,10 +263,11 @@ export default {
 .screen {
   margin: 25px 0 40px;
 
-  .el-select, .el-input {
+  .el-select,
+  .el-input {
     width: 150px;
     margin-right: 4px;
-    border: 1px solid #126AC5;
+    border: 1px solid #126ac5;
     border-radius: 2px;
 
     /deep/ .el-input__inner {
@@ -301,6 +277,14 @@ export default {
     }
   }
 
+  .searchSelect {
+    width: 200px;
+    /deep/ .el-select__tags {
+      width: 200px !important;
+      max-width: 200px !important;
+    }
+  }
+
   .btn {
     margin-left: 46px;
     height: 32px;
@@ -308,22 +292,22 @@ export default {
 }
 
 .orange {
-  color: #FFB73C;
+  color: #ffb73c;
 }
 
 .blue {
-  color: #64C1FF;
+  color: #64c1ff;
 }
 
 .green {
-  color: #08EBAE;
+  color: #08ebae;
 }
 
 .light {
-  color: #3CF5FF;
+  color: #3cf5ff;
 }
 
 .red {
-  color: #F95619;
+  color: #f95619;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/index.vue b/src/views/dataBoard/satisfactionEval/index.vue
index 1de54dcdb..7ac796945 100644
--- a/src/views/dataBoard/satisfactionEval/index.vue
+++ b/src/views/dataBoard/satisfactionEval/index.vue
@@ -4,38 +4,36 @@
       <el-col :span="8">
         <div class="bg">
           <Title text="不满意事项类型分析">
-            <div class="more" @click="goToPage('/dataBoard/satisfactionEval/dissatisfied')">
-            查看详细 <i class="el-icon-arrow-right"></i>
-            </div>
+            <div class="more" @click="goToPage(`/dataBoard/satisfactionEval/dissatisfied/${index}/${type}/${time}`)">查看详细 <i class="el-icon-arrow-right"></i></div>
           </Title>
 
-          <TypesOfDissatisfaction @timeChange="timeChange"/>
+          <TypesOfDissatisfaction @timeChange="timeChange" />
         </div>
         <div class="bg">
-          <Title text="不满意风险人员统计及回访情况"/>
-          <RiskStatistics :date="typeDate"/>
+          <Title text="不满意风险人员统计及回访情况" />
+          <RiskStatistics :date="typeDate" />
         </div>
       </el-col>
       <el-col :span="8">
-        <EventSituation/>
+        <EventSituation />
         <div class="bg2">
-          <Title text="不满意事项及满意度自查走势"/>
-          <SelfTrend/>
+          <Title text="不满意事项及满意度自查走势" />
+          <SelfTrend />
         </div>
         <div class="bg2">
-          <Title text="下级组织不满意事项统计"/>
-          <EventStatistics :date="typeDate"/>
+          <Title text="下级组织不满意事项统计" />
+          <EventStatistics :date="typeDate" />
         </div>
       </el-col>
       <el-col :span="8">
         <div class="bg2">
-          <Title text="不满意人员画像"/>
-          <PersonnelPortrait/>
+          <Title text="不满意人员画像" />
+          <PersonnelPortrait />
         </div>
 
         <div class="bg2">
-          <Title text="潜在不满意人数"/>
-          <PotentialPeople :date="typeDate"/>
+          <Title text="潜在不满意人数" />
+          <PotentialPeople :date="typeDate" />
         </div>
       </el-col>
     </el-row>
@@ -44,8 +42,8 @@
 
 <script>
 import TypesOfDissatisfaction from "./modules/TypesOfDissatisfaction";
-import RiskStatistics from "./modules/RiskStatistics"
-import Title from "@/views/dataBoard/satisfactionEval/components/Title"
+import RiskStatistics from "./modules/RiskStatistics";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
 import EventSituation from "@/views/dataBoard/satisfactionEval/modules/EventSituation";
 import SelfTrend from "@/views/dataBoard/satisfactionEval/modules/SelfTrend";
 import EventStatistics from "@/views/dataBoard/satisfactionEval/modules/EventStatistics";
@@ -62,23 +60,25 @@ export default {
     RiskStatistics,
     Title,
     PersonnelPortrait,
-    PotentialPeople
+    PotentialPeople,
   },
   data() {
     return {
-      typeDate: {}
-    }
+      typeDate: {},
+      index: 0,
+      type: 0,
+      time: 0,
+    };
   },
   methods: {
     goToPage(url) {
-      this.$router.push(url)
+      this.$router.push(url);
     },
     timeChange(date) {
-      this.typeDate = date
-    }
-  }
-
-}
+      this.typeDate = date;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -89,7 +89,7 @@ export default {
 .more {
   font-size: 14px;
   font-weight: 400;
-  color: #A0CDFF;
+  color: #a0cdff;
   cursor: pointer;
 }
 
@@ -100,4 +100,4 @@ export default {
 .bg {
   background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
index d9a674a3d..c00aa4263 100644
--- a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
@@ -53,20 +53,28 @@ export default {
           value: 5,
         },
       ],
+      raDarData: [],
       loading: true,
     };
   },
   watch: {
     "$store.state.chooseArea.chooseName"(val) {
       if (val.orgId) {
-        this.getData();
+        this.timeChange();
+        // this.getData();
       }
     },
   },
   mounted() {
     if (this.$store.state.chooseArea.chooseName.orgId) {
-      this.getData();
+      this.timeChange();
     }
+    let div = document.getElementById("typeConditionChart");
+    this.myChart = echarts.init(div);
+    this.myChart.on("click", (item) => {
+      const type = this.raDarData.filter((i) => i.name === item.name)[0].scopeKey;
+      this.$router.push(`/dataBoard/satisfactionEval/dissatisfied/${this.resultType}/${type}/${this.typeCondition}`);
+    });
   },
   methods: {
     resultTypeChange(val) {
@@ -119,18 +127,17 @@ export default {
       }
 
       this.$http.get(url + "?" + params).then(({ data: { data } }) => {
+        this.raDarData = [...data];
         this.initCharts(data);
       });
     },
     initCharts(data) {
-      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);
+      // console.log(max);
       var datamax = new Array(datavaule.length).fill(max);
       for (var i = 0; i < dataname.length; i++) {
         indicator.push({
@@ -138,10 +145,10 @@ export default {
           max: datamax[i],
         });
       }
-      let legendName = ["省满意度调查\n各项不满意人数", "社区满意度自查\n各项不满意人数"];
+      let legendName = ["省满意度调查各项不满意人数", "社区满意度自查各项不满意人数"];
       let series = [
         {
-          name: this.resultType === 2 ? "12345热线\n事件上报人数" : "省满意度调查\n各项不满意人数",
+          name: this.resultType === 2 ? "12345热线事件上报人数" : "省满意度调查各项不满意人数",
           type: "radar",
           symbol: "circle",
           symbolSize: 7,
@@ -165,10 +172,10 @@ export default {
         },
       ];
       if (this.resultType === 2) {
-        legendName = ["12345热线\n事件上报人数"];
+        legendName = ["12345热线事件上报人数"];
       } else {
         series.push({
-          name: "社区满意度自查\n各项不满意人数",
+          name: "社区满意度自查各项不满意人数",
           type: "radar",
           symbol: "circle",
           symbolSize: 7,
@@ -209,21 +216,21 @@ export default {
               name: {
                 fontSize: 14,
                 lineHeight: 22,
-                padding: [24, 0, 0, 0],
+                // padding: [24, 0, 0, 0],
               },
             },
           },
           itemWidth: 6,
           itemHeight: 6,
-          y: 0,
-          x: "right",
+          y: 30,
+          // x: "right",
           formatter: (name) => {
             return `{name|${name}}`;
           },
           data: legendName,
         },
         radar: {
-          center: ["50%", "50%"],
+          center: ["50%", "55%"],
           radius: "50%",
           startAngle: 90,
           splitNumber: 5,
@@ -235,6 +242,7 @@ export default {
           axisLabel: {
             show: false,
           },
+          triggerEvent: true,
           axisLine: {
             show: true,
             lineStyle: {
diff --git a/src/views/dataBoardMain/main-content.vue b/src/views/dataBoardMain/main-content.vue
index 9c734e908..bab5bc7f7 100644
--- a/src/views/dataBoardMain/main-content.vue
+++ b/src/views/dataBoardMain/main-content.vue
@@ -5,7 +5,7 @@
       <template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
         <iframe :src="$router.currentRoute.meta.iframeURL + '?token=' + token + '&customerId=' + customerId" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" :style="{ height: $store.state.fixed1920.height - 100 + 'px' }" />
       </template>
-      <keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)" :exclude="['homeDetails']">
+      <keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)" :exclude="['homeDetails', 'dissatisfied']">
         <router-view ref="reloadPage" @changeCustomerName="changeCustomerName" />
       </keep-alive>
     </template>