From ca68a02b9d9aa3aa17b0f1b1523bc4ca40a03690 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Mon, 13 Nov 2023 18:11:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E6=B8=85=E5=8D=95=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=8C=E9=87=8D=E7=82=B9=E5=85=B3=E6=B3=A8=E4=BA=BA?=
 =?UTF-8?q?=E7=BE=A4=E6=8E=A5=E5=8F=A3=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/assets/scss/dataBoard/overview/index.scss |   4 +-
 .../dataBoard/overview/components/jdjs.vue    |  39 +--
 .../dataBoard/overview/components/wtqd.vue    | 292 ++++++++++++++++++
 src/views/dataBoard/overview/index.vue        |  36 ++-
 5 files changed, 334 insertions(+), 38 deletions(-)
 create mode 100644 src/views/dataBoard/overview/components/wtqd.vue

diff --git a/package.json b/package.json
index 0bf8326f1..03f705960 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "turf": "^3.0.14",
     "v-distpicker": "^1.2.2",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-baidu-map": "^0.21.22",
     "vue-i18n": "^8.12.0",
     "vue-quill-editor": "^3.0.6",
diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index 5b348c199..5a03c302a 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -293,7 +293,9 @@
 	}
 
 }
-
+.m-wtqd{
+	padding: 0 16px;
+}
 
 @keyframes move {
 	from {
diff --git a/src/views/dataBoard/overview/components/jdjs.vue b/src/views/dataBoard/overview/components/jdjs.vue
index b8d015601..93c1d8c5a 100644
--- a/src/views/dataBoard/overview/components/jdjs.vue
+++ b/src/views/dataBoard/overview/components/jdjs.vue
@@ -146,7 +146,7 @@ export default {
     getChartData() {
       this.loading = true
      
-      this.$http.get('/actual/base/resiCategory/intelligentPredictioncategoryCountList').then(({data: {data}}) => {
+      this.$http.get('/actual/base/resiCategory/categoryCountList').then(({data: {data}}) => {
         this.initCharts(data)
       })
     },
@@ -156,12 +156,11 @@ export default {
      let chartData =  data.categoryList.map((item) => {
             return {
               name: resiCategoryMap[item.categoryName] || "",
-              count: item.categoryCountNext,
+              count: item.categoryCount,
             };
-          });
+      }).slice(0,8);
       let xData = chartData.map(item=>item.name);
       let yData = chartData.map(item=>item.count)
-      console.log(yData,xData);
       let color = [[
         {
           offset: 0,
@@ -172,25 +171,6 @@ export default {
           color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
         }
       ]]
-      // let seriesArray = series.map((item, index) => {
-      //   return {
-      //     name: item.name,
-      //     type: 'bar',
-      //     barWidth: 14,
-      //     itemStyle: {
-      //       opacity: 1,
-      //       color: new echarts.graphic.LinearGradient(
-      //           0,
-      //           1,
-      //           0,
-      //           0,
-      //           color[0],
-      //           false
-      //       )
-      //     },
-      //     data: item.data,
-      //   }
-      // })
       let num = yData
       const max = Math.max(...num)
       let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
@@ -219,7 +199,18 @@ export default {
             return res;
           },
         },
-      
+        dataZoom: [
+          {
+            "type": "slider",
+            "start": 0,
+            "end": parseInt((5 / xData.length) * 10) / 10 * 100,
+            "height": 10,
+            "bottom": 0,
+            "showDetail": false,
+            "showDataShadow": false,
+            "borderColor": "transparent"
+          }
+        ],
         grid: {
           top: '18%',
           left: '2%',
diff --git a/src/views/dataBoard/overview/components/wtqd.vue b/src/views/dataBoard/overview/components/wtqd.vue
new file mode 100644
index 000000000..18a00b15d
--- /dev/null
+++ b/src/views/dataBoard/overview/components/wtqd.vue
@@ -0,0 +1,292 @@
+<template>
+  <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">
+          <div
+            :class="['item', 'f-flex']"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <span>{{ item.time }}</span>
+            <span>{{ item.title }}</span>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </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']"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <span>{{ item.time }}</span>
+            <span>{{ item.title }}</span>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </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']"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <span>{{ item.time }}</span>
+            <span>{{ item.title }}</span>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </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']"
+            v-for="(item, index) in items"
+            :key="index"
+          >
+            <span>{{ item.time }}</span>
+            <span>{{ item.title }}</span>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <title-small text="不满意问题数" />
+    <div class="f-flex white f-mean">
+      <div
+        class="f-hflex"
+        @click="
+          $router.push(
+            '/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_12345'
+          )
+        "
+      >
+        <div><span class="f-pingfang">12345热线不满意数</span></div>
+        <div class="f-darkGray">
+          <b class="f-font34 f-yellow">0</b
+          >人
+        </div>
+      </div>
+      <div
+        class="f-hflex"
+        @click="
+          $router.push(
+            '/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_province'
+          )
+        "
+      >
+        <div><span class="f-pingfang">满意度调查不满意数</span></div>
+        <div class="f-darkGray">
+          <b class="f-font34 f-green">0</b
+          >人
+        </div>
+      </div>
+      <div
+        class="f-hflex"
+        @click="
+          $router.push(
+            '/dataBoard/satisfactionEval/potentialPeople?type=shuji&countType=service&satisfactionSource=satisfaction_community'
+          )
+        "
+      >
+        <div><span class="f-pingfang">社区自评不满意数</span></div>
+        <div class="f-darkGray">
+          <b class="f-font34 f-skyBlue">0</b
+          >人
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  <script>
+import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
+import "swiper/dist/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+
+export default {
+  name: "wtqd",
+  props: {
+    currentLevelData: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      orgId: this.$store.state.chooseArea.chooseName,
+      report: "",
+      overview: "",
+      loading: false,
+      rffxDate: "",
+      event12345Num: "",
+      provinceSatisfactionNum: "",
+      selfInspectNum: "",
+
+      endTime: "",
+      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单元楼下出现",
+        },
+      ],
+
+    //   就是现在是每4条滚动一次我想要它一直滚动
+      swiperOptions: {
+        direction: "vertical", // 滑动方向，可以是 'horizontal' 或 'vertical'
+        autoplay: {
+          delay: 6000, // 自动切换的间隔时间，单位是毫秒
+          disableOnInteraction: true, // 用户操作后是否禁止自动切换
+        },
+        loop: false, // 是否启用循环模式
+        speed: 1000, // 滑动速度，单位是毫秒
+      },
+    };
+  },
+  watch: {
+    currentLevelData(val) {
+      if (val.orgId) {
+        this.getReport(val);
+        // this.getChartData();
+      }
+    },
+  },
+  mounted() {
+    this.getReport(this.currentLevelData);
+    this.getData();
+    this.tableData = this.groupList(this.tableData, 4);
+
+  },
+  components: {
+    titleSmall,
+    swiper,
+    swiperSlide,
+  },
+  //
+  methods: {
+    getReport({ orgId, orgLevel }) {
+      this.$http
+        .get(
+          "/actual/base/streetOverview/communityOverview?orgId=" +
+            orgId +
+            "&level=" +
+            orgLevel
+        )
+        .then(({ data: { data } }) => {
+          this.overview = data;
+        });
+      this.$http
+        .get(
+          "/actual/base/streetOverview/summaryReport?orgId=" +
+            orgId +
+            "&level=" +
+            orgLevel
+        )
+        .then(({ data: { data } }) => {
+          this.report = data;
+        });
+    },
+
+    groupList(array, subGroupLength) {
+      let index = 0;
+      let newArray = [];
+      while (index < array.length) {
+        newArray.push(array.slice(index, (index += subGroupLength)));
+      }
+      return newArray;
+    },
+    getData() {},
+  },
+};
+</script>
+  
+  <style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
+  <style lang="scss" scoped>
+/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;
+}
+.f-hflex {
+  width: 83px;
+}
+.f-flex {
+  margin-top: 4px;
+}
+.f-darkGray {
+  margin-top: 15px;
+}
+.t-list {
+  flex: 1;
+  width: 100%;
+  .swiper-container {
+    height: 200px;
+    width: 100%;
+  }
+  .item {
+    align-items: center;
+    height: 40px;
+    justify-content: space-around;
+    background: #0a2a5c;
+    color: #fff;
+    cursor: pointer;
+    span {
+      text-align: center;
+    }
+    > :nth-child(1) {
+      width: 50px;
+    }
+    > :nth-child(2) {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &:hover {
+        color: #02FCFF ;
+        box-shadow: 0 0 10px #38b2ff  , 0 0 5px #38b2ff  ;
+    }
+  }
+}
+.swiper-slide{
+    padding: 0 4px;
+}
+.white{
+    height: 100px;
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 4ff19fb23..3ccbbc3b6 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -38,10 +38,16 @@
       </div>
 
       <div class="g-right">
-        <div class="m-box">
+
+        <div  class="m-box">
+          <title-box text="问题清单"></title-box>
+          <wtqd :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" />
+        </div>
+
+        <!-- <div class="m-box">
           <title-box text="人房数据统计" />
           <rfsjtj :currentLevelData="currentLevelData" />
-        </div>
+        </div> -->
         <!-- 街道概览 -->
         <!-- <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
           <title-box text="各社区人房数据更新排行">
@@ -51,32 +57,32 @@
           </title-box>
           <sqrfph :currentLevelData="currentLevelData" :date="rfphDate" />
         </div> -->
-        <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
+        <!-- <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
           <title-box text="各社区12345投诉事件统计">
             <span class="date-span">
               <el-date-picker popper-class="date-current-weiyi" :append-to-body="false" v-model="sq12345Date" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
             </span>
           </title-box>
           <sq12345 :currentLevelData="currentLevelData" :date="sq12345Date" />
-        </div>
+        </div> -->
 
         <!-- 社区&网格-->
-        <div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box">
+        <!-- <div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box">
           <title-box text="人房数据动态更新" />
           <Tabs v-model="dynamicType" :list="dynamicTypeList" v-if="currentLevel === 'community'" @changeVal="dynamicTypeChange" />
           <DynamicHumanRoomData :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 1" />
           <GridUpdateRanking :currentLevelData="currentLevelData" :currentLevel="currentLevel" v-if="dynamicType === 2" />
-        </div>
+        </div> -->
         <!-- 社区概览-->
-        <div v-if="currentLevel === 'community'" class="m-box">
+        <!-- <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="社区满意度自查结果">
             <span class="date-span">
               <el-date-picker popper-class="date-current-weiyi" :append-to-body="false" v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
             </span>
           </title-box>
           <CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate" />
-        </div>
-        <div v-if="currentLevel === 'community'" class="m-box">
+        </div> -->
+        <!-- <div  class="m-box">
           <title-box text="事件&回访">
             <span class="date-span">
               <el-date-picker popper-class="date-current-weiyi" :append-to-body="false" v-model="sjhfDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
@@ -85,16 +91,17 @@
           <Tabs v-model="eventType" :list="eventTypeList" @changeVal="eventTypeChange" />
           <EventAndFollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" />
           <FollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 2" />
-        </div>
+        </div> -->
+        
         <!-- 网格 -->
-        <div v-if="currentLevel === 'grid'" class="m-box">
+        <!-- <div v-if="currentLevel === 'grid'" class="m-box">
           <title-box text="社区网格数据更新排行">
             <span class="date-span">
               <el-date-picker popper-class="date-current-weiyi" :append-to-body="false" v-model="sqwggxDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
             </span>
           </title-box>
           <RankingGridData :currentLevelData="currentLevelData" :date="sqwggxDate" />
-        </div>
+        </div> -->
       </div>
     </div>
 
@@ -119,6 +126,8 @@ import DynamicHumanRoomData from "@/views/dataBoard/overview/components/DynamicH
 import GridUpdateRanking from "@/views/dataBoard/overview/components/GridUpdateRanking.vue";
 import CommunityResult from "@/views/dataBoard/overview/components/CommunityResult.vue";
 import EventAndFollowUp from "@/views/dataBoard/overview/components/EventAndFollowUp.vue";
+import wtqd from "@/views/dataBoard/overview/components/wtqd.vue";
+
 import RankingGridData from "@/views/dataBoard/overview/components/RankingGridData.vue";
 import FollowUp from "@/views/dataBoard/overview/components/FollowUp.vue";
 import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
@@ -149,6 +158,7 @@ export default {
     GridUpdateRanking,
     FollowUp,
     Tabs,
+    wtqd
   },
 
   data() {
@@ -164,7 +174,7 @@ export default {
       }, //当前组织对象
       orgId: "",
       orgLevel: "",
-      currentLevel: "",
+      currentLevel: "",//地图对应level
       currentLevelData: {
         orgId: this.$store.state.chooseArea.chooseName.orgId,
         orgLevel: this.$store.state.chooseArea.chooseName.level,