From 0542f34948c2a7397a904fb5ff69a73f2647d766 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Wed, 15 Nov 2023 19:13:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=8A=A0loading,=E6=8F=92?=
 =?UTF-8?q?=E6=A7=BD=E5=AE=9E=E7=8E=B0=E7=BB=84=E4=BB=B6=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=8E=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9,=E6=BB=A1?=
 =?UTF-8?q?=E6=84=8F=E5=BA=A6=E8=AF=84=E4=BB=B7=E5=8A=A0=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E6=A1=86,=E6=BB=A1=E6=84=8F=E5=BA=A6=E8=AF=84=E4=BB=B7?=
 =?UTF-8?q?=E5=B0=8F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/assets/scss/dataBoard/overview/index.scss |   5 +-
 src/views/dataBoard/cpts/map/index.vue        |   3 +-
 .../dataBoard/overview/components/jdjs.vue    |   2 +
 .../dataBoard/overview/components/map-top.vue | 236 ++++++++----------
 .../dataBoard/overview/components/wtqd.vue    |  99 ++++----
 src/views/dataBoard/overview/index.vue        |   4 +-
 .../components/Title/titleSmall.vue           |   3 +-
 .../dataBoard/satisfactionEval/index.vue      |  55 ++--
 .../modules/TypesOfDissatisfaction/index.vue  |  46 ++--
 .../modules/eventAnalysis/index.vue           |  94 +++++++
 11 files changed, 324 insertions(+), 225 deletions(-)
 create mode 100644 src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue

diff --git a/.env.development b/.env.development
index d8024c87a..30e67c27b 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@ NODE_ENV=development
 
 # VUE_APP_API_SERVER =  https://epmet-preview.elinkservice.cn/api
 # VUE_APP_API_SERVER =  http://localhost:8080/api
-VUE_APP_API_SERVER =  http://192.168.1.144/api
+VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
 # VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
 # VUE_APP_API_SERVER =  https://epmet-yantai.elinkservice.cn/api
 # VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index 5a03c302a..6954bd99c 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -968,4 +968,7 @@
 	.el-date-picker__header--bordered {
 		border-bottom: solid 1px #006cff;
 	}
-}
\ No newline at end of file
+}
+::v-deep .el-autocomplete-suggestion{
+	background: #001c44;
+  }
\ No newline at end of file
diff --git a/src/views/dataBoard/cpts/map/index.vue b/src/views/dataBoard/cpts/map/index.vue
index 722d34d2a..649d91719 100644
--- a/src/views/dataBoard/cpts/map/index.vue
+++ b/src/views/dataBoard/cpts/map/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
-    <div id="map" :style="{ transform: `scale(${zoom})` }"></div>
+    <div id="map" ></div>
     <div class="btn" v-if="mapStyleType == 'light'" v-show="false" @click="shiftMapStyle('dark')">切换深色模式</div>
     <div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
     <!-- :style="{ transform: `scale(${zoom})` }" -->
@@ -937,7 +937,6 @@ export default {
 /deep/ .amap-container {
   background: transparent !important;
 }
-
 .m-map {
   position: relative;
   height: 100%;
diff --git a/src/views/dataBoard/overview/components/jdjs.vue b/src/views/dataBoard/overview/components/jdjs.vue
index 93c1d8c5a..923084c36 100644
--- a/src/views/dataBoard/overview/components/jdjs.vue
+++ b/src/views/dataBoard/overview/components/jdjs.vue
@@ -20,9 +20,11 @@
       />
     </div>
     <title-small text="不满意风险人员">
+    <template v-slot:time>
       <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"> </el-option>
       </el-select>
+    </template>
     </title-small>
     <div class="f-flex white f-mean">
       <div class="f-hflex"  @click="
diff --git a/src/views/dataBoard/overview/components/map-top.vue b/src/views/dataBoard/overview/components/map-top.vue
index 55d08dcf5..b6f8818fd 100644
--- a/src/views/dataBoard/overview/components/map-top.vue
+++ b/src/views/dataBoard/overview/components/map-top.vue
@@ -1,131 +1,32 @@
 <template>
-  <div class="m-per">
-    <!-- <template v-if="level != 'grid'">
-      <div class="item" :class="selectIndex === 'staffAgency' ? 'xz' : ''">
-        <div class="item-info" @click="selectIcon('staffAgency')">
-          <div>
-            <img src="~@/assets/images/shuju/overview/sqgzz-icon.png" />
-            社区工作者
-          </div>
-          <div>
-            <b>{{ numData.staffAgencyNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item" :class="selectIndex === 'staffGrid' ? 'xz' : ''">
-        <div class="item-info" @click="selectIcon('staffGrid')">
-          <div>
-            <img src="~@/assets/images/shuju/overview/wgy-icon.png" />
-            网格员
-          </div>
-          <div>
-            <b>{{ numData.staffGridNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item" :class="selectIndex === 'chief' ? 'xz' : ''">
-        <div class="item-info" @click="selectIcon('chief')">
-          <div>
-            <img src="~@/assets/images/shuju/overview/lzz-icon.png" />
-            楼组/单元长
-          </div>
-          <div>
-            <b>{{ numData.chiefNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item" :class="selectIndex === 'publicWelfareNum' ? 'xz' : ''">
-        <div class="item-info" @click="selectIcon('publicWelfareNum')">
-          <div>
-            <img src="~@/assets/images/shuju/overview/gyg-icon.png" />
-            公益岗
-          </div>
-          <div>
-            <b>{{ numData.publicWelfareNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item" :class="selectIndex === 'staffDepartment' ? 'xz' : ''">
-        <div class="item-info" @click="selectIcon('staffDepartment')">
-          <div><img src="~@/assets/images/shuju/overview/dwzz-icon.png" />单位/组织</div>
-          <div>
-            <b>{{ numData.staffDepartmentNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item" :class="selectIndex === 'volunteer' ? 'xz' : ''">
-        <div class="item-info" @click="selectIcon('volunteer')">
-          <div>
-            <img src="~@/assets/images/shuju/overview/zyz-icon.png" />
-            志愿者
-          </div>
-          <div>
-            <b>{{ numData.volunteerNum }}</b>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <div class="item" :class="selectIndex === 'unit' ? 'xz' : ''" @click="selectIcon('unit')">
-        <div class="item-info">
-          <div>
-            <img src="~@/assets/images/overview/icon_wg.png" />
-            微网格
-          </div>
-          <div>
-            <b>{{ numData.unitNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item" :class="selectIndex === 'building' ? 'xz' : ''" @click="selectIcon('building')">
-        <div class="item-info">
-          <div>
-            <img src="~@/assets/images/overview/icon_ld.png" />
-            楼栋
-          </div>
-          <div>
-            <b>{{ numData.buldingNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item">
-        <div class="item-info">
-          <div>
-            <img src="~@/assets/images/overview/icon_fw.png" />
-            房屋
-          </div>
-          <div>
-            <b>{{ numData.houseNum }}</b>
-          </div>
-        </div>
-      </div>
-      <div class="item">
-        <div class="item-info">
-          <div>
-            <img src="~@/assets/images/overview/icon_jm.png" />
-            居民
-          </div>
-          <div>
-            <b>{{ numData.residentNum }}</b>
-          </div>
-        </div>
-      </div>
-    </template> -->
-    <template>
-      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input3" class="input-with-select">
-      <el-select v-model="searchSelect" slot="prepend" placeholder="请选择">
-        <el-option label="需求"></el-option>
-        <el-option label="问题" ></el-option>
-        <el-option label="资源" ></el-option>
-        <el-option label="不满意事项"></el-option>
+  <div :class="['m-per', { 'm-l77': level != 'street' }]">
+    <el-autocomplete
+      v-model="keyWord"
+      :fetch-suggestions="querySearch"
+      :placeholder="searchPlaceholder"
+      class="input-with-select"
+      popper-class="selectPopClass"
+      :value-key="'value'"
+    >
+      <el-select
+        v-model="searchSelect"
+        slot="prepend"
+        placeholder="请选择"
+        popper-class="selectPopClass"
+        @change="handleSelect"
+      >
+        <el-option label="需求" value="1"></el-option>
+        <el-option label="问题" value="2"></el-option>
+        <el-option label="资源" value="3"></el-option>
+        <el-option label="不满意事项" value="4"></el-option>
       </el-select>
-    <el-button slot="append">搜索</el-button>
-  </el-input>
-    </template>
-
+      <el-button slot="append" type="primary">搜索</el-button>
+    </el-autocomplete>
   </div>
 </template>
 <script>
+import { requestGet } from "@/js/dai/request";
+
 export default {
   name: "map-top",
   props: {
@@ -146,7 +47,11 @@ export default {
     return {
       selectIndex: "",
       numData: {},
-      searchSelect:'不满意事项'
+      searchSelect: "1",
+
+      searchPlaceholder:"可按需求人、需求内容关键词搜索",
+
+      keyWord: "",
     };
   },
   watch: {
@@ -161,6 +66,7 @@ export default {
       }
     },
     level(val) {
+      console.log(val);
       if (val === "grid") {
         this.selectIndex = "unit";
       } else {
@@ -178,20 +84,88 @@ export default {
       this.selectIndex = type;
       this.$emit("changeType", type);
     },
+    async querySearch(queryString) {
+      try {
+        let params={
+          keyword: queryString,
+          pageSize:20,
+          pageNo:1
+        }
+        const {data} = await requestGet('/governance/dataBoard/demand/search', params);
+        const suggestions = data.map(item => ({ label: item.content, value: item.id }));
+        console.log(suggestions);
+        return suggestions
+      } catch (error) {
+        console.error('Error fetching suggestions:', error);
+        return [];
+      }
+    },
     getData(item) {
-      this.$http.get("/actual/base/streetOverview/mapOrgSum?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => {
-        this.numData = data;
-      });
+      this.$http
+        .get(
+          "/actual/base/streetOverview/mapOrgSum?level=" +
+            item.orgLevel +
+            "&orgId=" +
+            item.orgId
+        )
+        .then(({ data: { data } }) => {
+          this.numData = data;
+        });
     },
+    handleSelect(val){
+    if(val == 1){
+      this.searchPlaceholder = '可按需求人、需求内容关键词搜索'
+    }else if(val == 2){
+      this.searchPlaceholder = '可按联系人、问题描述关键词搜索'
+
+    }else if(val == 3){
+      this.searchPlaceholder = '可按单位名称、负责人、负责人联系电话关键词搜索'
+
+    }else if(val == 4){
+      this.searchPlaceholder = '可按姓名、联系电话、问题描述关键词搜索'
+    }
+    }
+
   },
 };
 </script>
 
 <style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
 <style lang="scss" scoped>
-.xz {
-  background: url("@/assets/images/shuju/overview/top-xz-bg.png") !important;
-  height: 90px !important;
-  background-size: 140px 90px !important;
+.m-l77 {
+  margin-left: 77px;
+}
+::v-deep .el-autocomplete {
+  width: 100%;
+}
+
+::v-deep .el-input {
+  .el-input-group__prepend {
+    background: #001c44;
+    border: 1px solid #007ff1;
+    border-right: none;
+    position: relative;
+    width: 131px;
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: 0;
+      height: 15px;
+      background-color: #007ff1;
+      width: 1px;
+      transform: translateY(-7px);
+    }
+  }
+  .el-input__inner {
+    background: #001c44;
+    border: 1px solid #007ff1;
+    border-left: none;
+    border-right: none;
+  }
+  .el-input-group__append {
+    background: #0058ac;
+    border: 1px solid #007ff1;
+  }
 }
 </style>
diff --git a/src/views/dataBoard/overview/components/wtqd.vue b/src/views/dataBoard/overview/components/wtqd.vue
index 6b659c3d3..ae882073a 100644
--- a/src/views/dataBoard/overview/components/wtqd.vue
+++ b/src/views/dataBoard/overview/components/wtqd.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="m-wtqd">
     <title-small text="难点赌点" />
-    <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions" v-if="nddd">
+    <div class="t-list f-hflex" v-if="nddd.length>0" >
+      <swiper ref="orderSwiper" :options="swiperOptions" >
         <swiper-slide
           v-for="(items, index) in nddd"
           :key="index"
@@ -12,17 +12,21 @@
             :class="['item', 'f-flex']"
             v-for="(item, index) in items"
             :key="index"
+            @click="handleView(item)"
           >
             <span>{{ item.createdTime.substr(5,5) }}</span>
             <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
-      <div class="no-data">暂无数据</div>
     </div>
+    <div class="no-data h200" v-loading="listLoading"   element-loading-text="加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 21, 64, 0" v-else>暂无数据</div>
+
     <title-small text="矛盾纠纷" />
-    <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions" v-if="mdjf">
+    <div class="t-list f-hflex" v-if="mdjf.length>0">
+      <swiper ref="orderSwiper" :options="swiperOptions" >
         <swiper-slide
           v-for="(items, index) in mdjf"
           :key="index"
@@ -38,11 +42,13 @@
           </div>
         </swiper-slide>
       </swiper>
-      <div class="no-data">暂无数据</div>
     </div>
+    <div class="no-data h200" v-else v-loading="listLoading"   element-loading-text="加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
     <title-small text="自身问题" />
-    <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="zswt">
+    <div class="t-list f-hflex" v-if="zswt.length>0">
+      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" >
         <swiper-slide
           v-for="(items, index) in zswt"
           :key="index"
@@ -58,11 +64,13 @@
           </div>
         </swiper-slide>
       </swiper>
-      <div class="no-data">暂无数据</div>
     </div>
+    <div class="no-data h150" v-else v-loading="listLoading"   element-loading-text="加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
     <title-small text="超出服务范围" />
-    <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="ccfwfw">
+    <div class="t-list f-hflex" v-if="ccfwfw.length>0">
+      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" >
         <swiper-slide
           v-for="(items, index) in ccfwfw"
           :key="index"
@@ -78,8 +86,10 @@
           </div>
         </swiper-slide>
       </swiper>
-      <div class="no-data">暂无数据</div>
     </div>
+    <div class="no-data h150" v-else v-loading="listLoading"   element-loading-text="加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 21, 64, 0">暂无数据</div>
     <title-small text="不满意问题数" />
     <div class="f-flex white f-mean">
       <div
@@ -116,6 +126,8 @@
         <div class="f-darkGray"><b class="f-font34 f-skyBlue">0</b>人</div>
       </div>
     </div>
+    <EventDetails :showDialog="showDialog" :id="this.rowId" @close="close" />
+
   </div>
 </template>
   <script>
@@ -123,6 +135,8 @@ import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titl
 import "swiper/dist/css/swiper.css";
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import { requestPost } from "@/js/dai/request";
+import EventDetails from "@/views/dataBoard/cpts/event-details.vue";
+
 export default {
   name: "wtqd",
   props: {
@@ -146,26 +160,6 @@ export default {
       startTime: "",
 
       tableData: [
-        {
-          time: "今天",
-          title: "小区进行老旧小区改造后，1号楼1单元楼下出现1单元楼下出现",
-        },
-        {
-          time: "今天",
-          title: "小区进行老旧小区改造后，1号楼1单元楼下出现1单元楼下出现",
-        },
-        {
-          time: "今天",
-          title: "小区进行老旧小区改造后，1号楼1单元楼下出现1单元楼下出现",
-        },
-        {
-          time: "今天",
-          title: "小区进行老旧小区改造后，1号楼1单元楼下出现1单元楼下出现",
-        },
-        {
-          time: "今天",
-          title: "小区进行老旧小区改造后，1号楼1单元楼下出现1单元楼下出现",
-        },
       ],
       createdTime: '2022-05-20 10:50:58',
       //   就是现在是每4条滚动一次我想要它一直滚动
@@ -182,7 +176,12 @@ export default {
       nddd:[],
       mdjf:[],
       zswt:[],
-      ccfwfw:[]
+      ccfwfw:[],
+
+      listLoading:true,
+
+      showDialog:false,
+      rowId:''
     };
   },
   watch: {
@@ -202,6 +201,7 @@ export default {
     titleSmall,
     swiper,
     swiperSlide,
+    EventDetails
   },
   //
   methods: {
@@ -255,17 +255,18 @@ export default {
           // 处理错误情况
         }
       }
-
       return results;
     },
 
     // 在调用处
     async fetchDataAndProcess() {
+      this.listLoading = true
       const apiResults = await this.fetchData();
-        this.nddd =this.groupList(apiResults[0],4);
-        this.mdjf =this.groupList(apiResults[1],4);
-        this.zswt =this.groupList(apiResults[2],3);
-        this.ccfwfw =this.groupList(apiResults[3],3);
+      this.listLoading = false
+        this.nddd =this.groupList(apiResults[0].list,4);
+        this.mdjf =this.groupList(apiResults[1].list,4);
+        this.zswt =this.groupList(apiResults[2].list,3);
+        this.ccfwfw =this.groupList(apiResults[3].list,3);
     },
     groupList(array, subGroupLength) {
       let index = 0;
@@ -276,12 +277,26 @@ export default {
       return newArray;
     },
     getData() {},
+    handleView({ icEventId }) {
+      this.showDialog = true;
+      this.rowId = icEventId;
+    },
+    close() {
+      this.showDialog = false;
+    },
   },
 };
 </script>
   
   <style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
   <style lang="scss" scoped>
+  .h150{
+    height: 150px;
+  }
+  .h200{
+    height: 200px;
+  }
+
 /deep/ .el-input__inner {
   width: 90px !important;
   height: 24px !important;
@@ -305,10 +320,10 @@ export default {
   margin-top: 15px;
 }
 .no-data{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-30px);
+  display: flex;
+    align-items: center;
+    justify-content: center;
+
 }
 .t-list {
   flex: 1;
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 3ccbbc3b6..c1fb9dc2a 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -501,10 +501,10 @@ export default {
 .go-back {
   position: absolute;
   z-index: 100;
-  top: 100px;
+  top: 20px;
   left: 16px;
   right: 0;
-
+  width: 64px;
   img {
     height: 36px;
     width: 36px;
diff --git a/src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue b/src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue
index 23e7f0e87..a99a4c106 100644
--- a/src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue
+++ b/src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue
@@ -5,7 +5,8 @@
         <span class="txt">{{ text }}</span>
         <span class="text-shadow">{{ text }}</span>
       </span>
-      <slot></slot>
+      <slot name="time"></slot>
+      <slot name="info"></slot>
     </div>
   </template>
   
diff --git a/src/views/dataBoard/satisfactionEval/index.vue b/src/views/dataBoard/satisfactionEval/index.vue
index 7ac796945..5c879fbf6 100644
--- a/src/views/dataBoard/satisfactionEval/index.vue
+++ b/src/views/dataBoard/satisfactionEval/index.vue
@@ -1,37 +1,34 @@
 <template>
   <div class="satisfaction-eval">
     <el-row :gutter="20">
-      <el-col :span="8">
-        <div class="bg">
+      <el-col :span="8" class="bgImg">
+        <Title text="12345数据分析" />
+        <eventAnalysis/>
+      </el-col>
+      <el-col :span="8" >
+        <!-- <EventSituation /> -->
+        <div class=" bgImg">
           <Title text="不满意事项类型分析">
             <div class="more" @click="goToPage(`/dataBoard/satisfactionEval/dissatisfied/${index}/${type}/${time}`)">查看详细 <i class="el-icon-arrow-right"></i></div>
           </Title>
-
           <TypesOfDissatisfaction @timeChange="timeChange" />
         </div>
-        <div class="bg">
-          <Title text="不满意风险人员统计及回访情况" />
-          <RiskStatistics :date="typeDate" />
-        </div>
-      </el-col>
-      <el-col :span="8">
-        <EventSituation />
-        <div class="bg2">
+        <div class="bgImg">
           <Title text="不满意事项及满意度自查走势" />
           <SelfTrend />
         </div>
-        <div class="bg2">
+        <div class="bgImg">
           <Title text="下级组织不满意事项统计" />
           <EventStatistics :date="typeDate" />
         </div>
       </el-col>
       <el-col :span="8">
-        <div class="bg2">
+        <div class="bgImg">
           <Title text="不满意人员画像" />
           <PersonnelPortrait />
         </div>
 
-        <div class="bg2">
+        <div class="bgImg">
           <Title text="潜在不满意人数" />
           <PotentialPeople :date="typeDate" />
         </div>
@@ -49,6 +46,8 @@ import SelfTrend from "@/views/dataBoard/satisfactionEval/modules/SelfTrend";
 import EventStatistics from "@/views/dataBoard/satisfactionEval/modules/EventStatistics";
 import PersonnelPortrait from "@/views/dataBoard/satisfactionEval/modules/PersonnelPortrait";
 import PotentialPeople from "@/views/dataBoard/satisfactionEval/modules/PotentialPeople";
+import eventAnalysis from "@/views/dataBoard/satisfactionEval/modules/eventAnalysis";
+
 
 export default {
   name: "satisfactionEvaluation",
@@ -61,6 +60,7 @@ export default {
     Title,
     PersonnelPortrait,
     PotentialPeople,
+    eventAnalysis
   },
   data() {
     return {
@@ -80,11 +80,22 @@ export default {
   },
 };
 </script>
+<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
 
 <style scoped lang="scss">
-.satisfaction-eval {
-  //padding: 24px 20px;
-}
+/deep/ .el-input__inner {
+    width: 90px !important;
+    height: 24px !important;
+    background: #021c49 !important;
+    border: 1px solid #125aaa !important;
+    border-radius: 12px !important;
+    color: #a0cdff;
+  }
+
+  /deep/ .el-input__icon {
+    line-height: 24px !important;
+    color: #a0cdff;
+  }
 
 .more {
   font-size: 14px;
@@ -92,12 +103,10 @@ export default {
   color: #a0cdff;
   cursor: pointer;
 }
-
-.bg2 {
-  background: linear-gradient(180deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
+.bgImg{
+  background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
+	background-size: 100% 100%;
+	margin-top: 5px;
 }
 
-.bg {
-  background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
-}
 </style>
diff --git a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
index 90f226d91..8a3efa0f5 100644
--- a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
@@ -6,7 +6,7 @@
         <el-option 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: 193px"></div>
   </div>
 </template>
 
@@ -215,30 +215,31 @@ export default {
             color: "#fff",
           },
         },
-        legend: {
-          show: true,
-          textStyle: {
-            color: "#ffffff",
-            rich: {
-              name: {
-                fontSize: 14,
-                lineHeight: 22,
-                // padding: [24, 0, 0, 0],
+          legend: {
+            show: true,
+            textStyle: {
+              color: "#ffffff",
+              rich: {
+                name: {
+                  fontSize: 14,
+                  lineHeight: 22,
+                  // padding: [24, 0, 0, 0],
+                },
               },
             },
-          },
-          itemWidth: 6,
-          itemHeight: 6,
-          y: 30,
-          // x: "right",
-          formatter: (name) => {
-            return `{name|${name}}`;
-          },
-          data: legendName,
+            itemWidth: 6,
+            itemHeight: 6,
+            x: "right", // 设置为 "right" 将图例放在右侧
+            y: 'center',
+            orient: "vertical", // 设置为 "vertical" 垂直排列
+            formatter: (name) => {
+              return `{name|${name}}`;
+            },
+            data: legendName,
         },
         radar: {
-          center: ["50%", "55%"],
-          radius: "50%",
+          center: ["25%", "55%"],
+          radius: "60%",
           startAngle: 90,
           splitNumber: 5,
           splitArea: {
@@ -265,11 +266,12 @@ export default {
           name: {
             textStyle: {
               color: "#ffffff",
-              fontSize: "16",
+              fontSize: "14",
               borderRadius: 3,
               padding: [3, 5],
             },
           },
+          nameGap:10,
           indicator: indicator,
         },
         series,
diff --git a/src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue b/src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue
new file mode 100644
index 000000000..24b971539
--- /dev/null
+++ b/src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue
@@ -0,0 +1,94 @@
+
+<template>
+ <div class='' style="padding: 0 10px;">
+    <title-small text="同地点同类型事件重复投诉问题">
+     <template v-slot:time>
+        <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"> </el-option>
+      </el-select>
+     </template>
+     <template  v-slot:info>
+        <span class="infoColor">更多></span>
+     </template>
+    </title-small>
+
+ </div>
+</template>
+
+<script>
+import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
+
+export default {
+ data() {
+ return {
+    typeCondition:'',
+    startTime:'',
+    endTime:'',
+    typeConditionList: [
+        {
+          label: "本月",
+          value: 1,
+        },
+        {
+          label: "上月",
+          value: 2,
+        },
+        {
+          label: "近三月",
+          value: 3,
+        },
+        {
+          label: "近半年",
+          value: 4,
+        },
+        {
+          label: "近一年",
+          value: 5,
+        },
+      ],
+ };
+ },
+ created() {},
+ methods: {
+    timeChange() {
+      let startTime = "",
+        endTime = "";
+      if (this.typeCondition === 1) {
+        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");
+      }
+      if (this.typeCondition === 3) {
+        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");
+      }
+      if (this.typeCondition === 5) {
+        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");
+      } else {
+        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+      }
+      this.startTime = startTime;
+      this.endTime = endTime;
+    //   this.getData();
+    },
+ },
+ components:{
+    titleSmall
+ },
+ computed:{},
+ watch: {},
+}
+</script>
+
+<style lang='scss' scoped>
+    .infoColor{
+        color: #A3B9DA ;
+    }
+</style>