From 8eab57b88f58e109d27cc77a48cda02029f68389 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Tue, 14 Nov 2023 14:41:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E6=B8=85=E5=8D=95=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E3=80=81=E5=9C=B0=E5=9B=BE=E5=A4=B4=E9=83=A8=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataBoard/overview/components/map-top.vue |  15 +-
 .../dataBoard/overview/components/wtqd.vue    | 155 +++++++++++++-----
 2 files changed, 127 insertions(+), 43 deletions(-)

diff --git a/src/views/dataBoard/overview/components/map-top.vue b/src/views/dataBoard/overview/components/map-top.vue
index 7ce39a05f..55d08dcf5 100644
--- a/src/views/dataBoard/overview/components/map-top.vue
+++ b/src/views/dataBoard/overview/components/map-top.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-per">
-    <template v-if="level != 'grid'">
+    <!-- <template v-if="level != 'grid'">
       <div class="item" :class="selectIndex === 'staffAgency' ? 'xz' : ''">
         <div class="item-info" @click="selectIcon('staffAgency')">
           <div>
@@ -110,7 +110,19 @@
           </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>
+      </el-select>
+    <el-button slot="append">搜索</el-button>
+  </el-input>
     </template>
+
   </div>
 </template>
 <script>
@@ -134,6 +146,7 @@ export default {
     return {
       selectIndex: "",
       numData: {},
+      searchSelect:'不满意事项'
     };
   },
   watch: {
diff --git a/src/views/dataBoard/overview/components/wtqd.vue b/src/views/dataBoard/overview/components/wtqd.vue
index 18a00b15d..6b659c3d3 100644
--- a/src/views/dataBoard/overview/components/wtqd.vue
+++ b/src/views/dataBoard/overview/components/wtqd.vue
@@ -2,63 +2,83 @@
   <div class="m-wtqd">
     <title-small text="难点赌点" />
     <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions">
-        <swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
+      <swiper ref="orderSwiper" :options="swiperOptions" v-if="nddd">
+        <swiper-slide
+          v-for="(items, index) in nddd"
+          :key="index"
+          class="swiper-slide"
+        >
           <div
             :class="['item', 'f-flex']"
             v-for="(item, index) in items"
             :key="index"
           >
-            <span>{{ item.time }}</span>
-            <span>{{ item.title }}</span>
+            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
+      <div class="no-data">暂无数据</div>
     </div>
     <title-small text="矛盾纠纷" />
     <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions">
-        <swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
+      <swiper ref="orderSwiper" :options="swiperOptions" v-if="mdjf">
+        <swiper-slide
+          v-for="(items, index) in mdjf"
+          :key="index"
+          class="swiper-slide"
+        >
           <div
-            :class="['item', 'f-flex']"
+            class="item f-flex bto-border"
             v-for="(item, index) in items"
             :key="index"
           >
-            <span>{{ item.time }}</span>
-            <span>{{ item.title }}</span>
+            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
+      <div class="no-data">暂无数据</div>
     </div>
     <title-small text="自身问题" />
     <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions">
-        <swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
+      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="zswt">
+        <swiper-slide
+          v-for="(items, index) in zswt"
+          :key="index"
+          class="swiper-slide"
+        >
           <div
             :class="['item', 'f-flex']"
             v-for="(item, index) in items"
             :key="index"
           >
-            <span>{{ item.time }}</span>
-            <span>{{ item.title }}</span>
+            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
+      <div class="no-data">暂无数据</div>
     </div>
     <title-small text="超出服务范围" />
     <div class="t-list f-hflex">
-      <swiper ref="orderSwiper" :options="swiperOptions">
-        <swiper-slide v-for="(items, index) in tableData" :key="index" class="swiper-slide">
-          <div
-            :class="['item', 'f-flex']"
+      <swiper ref="orderSwiper" class="swiper-containers" :options="swiperOptions" v-if="ccfwfw">
+        <swiper-slide
+          v-for="(items, index) in ccfwfw"
+          :key="index"
+          class="swiper-slide"
+        >
+          <div 
+            class="item f-flex bto-border"
             v-for="(item, index) in items"
             :key="index"
           >
-            <span>{{ item.time }}</span>
-            <span>{{ item.title }}</span>
+            <span>{{ item.createdTime.substr(5,5) }}</span>
+            <span>{{ item.eventContent }}</span>
           </div>
         </swiper-slide>
       </swiper>
+      <div class="no-data">暂无数据</div>
     </div>
     <title-small text="不满意问题数" />
     <div class="f-flex white f-mean">
@@ -71,10 +91,7 @@
         "
       >
         <div><span class="f-pingfang">12345热线不满意数</span></div>
-        <div class="f-darkGray">
-          <b class="f-font34 f-yellow">0</b
-          >人
-        </div>
+        <div class="f-darkGray"><b class="f-font34 f-yellow">0</b>人</div>
       </div>
       <div
         class="f-hflex"
@@ -85,10 +102,7 @@
         "
       >
         <div><span class="f-pingfang">满意度调查不满意数</span></div>
-        <div class="f-darkGray">
-          <b class="f-font34 f-green">0</b
-          >人
-        </div>
+        <div class="f-darkGray"><b class="f-font34 f-green">0</b>人</div>
       </div>
       <div
         class="f-hflex"
@@ -99,10 +113,7 @@
         "
       >
         <div><span class="f-pingfang">社区自评不满意数</span></div>
-        <div class="f-darkGray">
-          <b class="f-font34 f-skyBlue">0</b
-          >人
-        </div>
+        <div class="f-darkGray"><b class="f-font34 f-skyBlue">0</b>人</div>
       </div>
     </div>
   </div>
@@ -111,7 +122,7 @@
 import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
 import "swiper/dist/css/swiper.css";
 import { swiper, swiperSlide } from "vue-awesome-swiper";
-
+import { requestPost } from "@/js/dai/request";
 export default {
   name: "wtqd",
   props: {
@@ -156,8 +167,8 @@ export default {
           title: "小区进行老旧小区改造后，1号楼1单元楼下出现1单元楼下出现",
         },
       ],
-
-    //   就是现在是每4条滚动一次我想要它一直滚动
+      createdTime: '2022-05-20 10:50:58',
+      //   就是现在是每4条滚动一次我想要它一直滚动
       swiperOptions: {
         direction: "vertical", // 滑动方向，可以是 'horizontal' 或 'vertical'
         autoplay: {
@@ -167,6 +178,11 @@ export default {
         loop: false, // 是否启用循环模式
         speed: 1000, // 滑动速度，单位是毫秒
       },
+
+      nddd:[],
+      mdjf:[],
+      zswt:[],
+      ccfwfw:[]
     };
   },
   watch: {
@@ -180,8 +196,7 @@ export default {
   mounted() {
     this.getReport(this.currentLevelData);
     this.getData();
-    this.tableData = this.groupList(this.tableData, 4);
-
+    this.fetchDataAndProcess()
   },
   components: {
     titleSmall,
@@ -212,7 +227,46 @@ export default {
           this.report = data;
         });
     },
+    async fetchData() {
+      const results = [];
 
+      for (let i = 0; i < 4; i++) {
+        try {
+          let url = "/governance/icEventOld/list";
+          let params = {
+            pageSize: 100,
+            pageNo: 1,
+            gridId: "",
+            sourceType: "",
+            eventContent: "",
+            name: "",
+            mobile: "",
+            startTime: "",
+            endTime: "",
+            status: "",
+            firstIdList: [],
+            secondIdList: [],
+            type: `${i+1}`,
+          };
+          const response = await requestPost(url,params); // 替换为实际的接口调用
+          results.push(response.data);
+        } catch (error) {
+          console.error("Error fetching data:", error);
+          // 处理错误情况
+        }
+      }
+
+      return results;
+    },
+
+    // 在调用处
+    async fetchDataAndProcess() {
+      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);
+    },
     groupList(array, subGroupLength) {
       let index = 0;
       let newArray = [];
@@ -250,13 +304,24 @@ export default {
 .f-darkGray {
   margin-top: 15px;
 }
+.no-data{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-30px);
+}
 .t-list {
   flex: 1;
   width: 100%;
+  position: relative;
   .swiper-container {
     height: 200px;
     width: 100%;
   }
+  .swiper-containers{
+    height: 150px;
+    width: 100%;
+  } 
   .item {
     align-items: center;
     height: 40px;
@@ -277,16 +342,22 @@ export default {
       text-overflow: ellipsis;
     }
     &:hover {
-        color: #02FCFF ;
-        box-shadow: 0 0 10px #38b2ff  , 0 0 5px #38b2ff  ;
+      color: #02fcff;
+      box-shadow: 0 0 10px #38b2ff, 0 0 5px #38b2ff;
     }
   }
 }
-.swiper-slide{
-    padding: 0 4px;
+.swiper-slide {
+  padding: 0 4px;
+  .bto-border{
+    height: 1px;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(to right, #1c3e69 0%, #4eafd5 50%,  #1c3e69 100%);
+    border-image-slice: 1;
+  }
 }
-.white{
-    height: 100px;
+.white {
+  height: 100px;
 }
 </style>
   
\ No newline at end of file