From 05e1309f81a40c7903351ea54c7a6eeb2eb110e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=8B=A5=E6=99=A8?= <974220104@qq.com>
Date: Wed, 11 Oct 2023 17:55:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/dataBoard/overview/index.scss |   3 +-
 src/views/dataBoard/overview/index.vue        | 232 +++++++++++++++---
 2 files changed, 195 insertions(+), 40 deletions(-)

diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index 3a9b376d2..a6005c041 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -47,7 +47,7 @@
 }
 
 .m-rybox {
-	width: 884px;
+	width: 910px;
 }
 
 .m-subbox {
@@ -354,6 +354,7 @@
 
 .m-jdwgy {
 	height: auto!important;
+	width: 100%;
 	padding: 12px 16px;
 }
 
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 75edfcd1f..8b2681dec 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -8,26 +8,86 @@
     <div class="g-row">
       <div class="g-left">
         <div class="m-box">
-          <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`" />
+          <title-box
+            :text="`${
+              currentLevel === 'district'
+                ? '区'
+                : currentLevel === 'street'
+                ? '街道'
+                : currentLevel === 'community'
+                ? '社区'
+                : currentLevel === 'grid'
+                ? '网格'
+                : ''
+            }介绍`"
+          />
           <jdjs :currentLevelData="currentLevelData" />
         </div>
 
         <div class="m-box">
-          <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`" />
+          <title-box
+            :text="`${
+              currentLevel === 'district'
+                ? '区'
+                : currentLevel === 'street'
+                ? '街道'
+                : currentLevel === 'community'
+                ? '社区'
+                : currentLevel === 'grid'
+                ? '网格'
+                : ''
+            }图谱画像`"
+          />
           <jdtphx :currentLevelData="currentLevelData" :id="orgId" />
         </div>
       </div>
       <div class="g-center">
-        <div class="m-map" style="overflow: hidden">
-          <map-top :currentLevelData="currentLevelData" @changeType="changeType" :level="currentLevel" />
+        <div
+          :class="listShow ? 'm-map' : 'g-center-open'"
+          style="overflow: hidden"
+        >
+          <map-top
+            :currentLevelData="currentLevelData"
+            @changeType="changeType"
+            :level="currentLevel"
+          />
           <div v-if="breadList.length > 1" class="go-back" @click="goBackMap">
             <img src="~@/assets/images/shuju/overview/go-back.png" />
           </div>
-          <grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn" :level="currentLevel" :peopleType="peopleType" />
+          <grid-map
+            ref="map"
+            @clickAgency="clickAgencyItem"
+            :srcGridData="orgData"
+            @clickDotBtn="handleClickDotBtn"
+            :level="currentLevel"
+            :peopleType="peopleType"
+          />
         </div>
         <div class="m-box m-rybox">
-          <title-box :text="`${customerName}${peopleList[peopleType]}`" />
-          <jdwgy :peopleType="peopleType" :currentLevelData="currentLevelData" :level="currentLevel" @setNum="setNum" @setPoint="setPoint" />
+          <title-box :text="`${customerName}${peopleList[peopleType]}`">
+            <div class="up-style" style="width: 51%">
+              <div>
+                <img
+                  v-if="listShow"
+                  @click="upDownShow"
+                  src="~@/assets/images/overview/down-icon.png"
+                />
+                <img
+                  v-else
+                  @click="upDownShow"
+                  src="~@/assets/images/overview/up-icon.png"
+                />
+              </div>
+            </div>
+          </title-box>
+          <jdwgy
+            v-show="listShow"
+            :peopleType="peopleType"
+            :currentLevelData="currentLevelData"
+            :level="currentLevel"
+            @setNum="setNum"
+            @setPoint="setPoint"
+          />
         </div>
       </div>
 
@@ -37,57 +97,136 @@
           <rfsjtj :currentLevelData="currentLevelData" />
         </div>
         <!-- 街道概览 -->
-        <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
+        <div
+          v-if="currentLevel === 'street' || currentLevel === 'district'"
+          class="m-box"
+        >
           <title-box text="各社区人房数据更新排行">
             <span class="date-span">
-              <el-date-picker v-model="rfphDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月"> </el-date-picker>
+              <el-date-picker
+                v-model="rfphDate"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                @change="changeDate"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              >
+              </el-date-picker>
             </span>
           </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 v-model="sq12345Date" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
+              <el-date-picker
+                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 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" />
+          <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 v-if="currentLevel === 'community'" class="m-box">
           <title-box text="社区满意度自查结果">
             <span class="date-span">
-              <el-date-picker v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
+              <el-date-picker
+                v-model="sqzcDate"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              />
             </span>
           </title-box>
-          <CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate" />
+          <CommunityResult
+            :currentLevelData="currentLevelData"
+            :date="sqzcDate"
+          />
         </div>
         <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="事件&回访">
             <span class="date-span">
-              <el-date-picker v-model="sjhfDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
+              <el-date-picker
+                v-model="sjhfDate"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                @change="changeDate"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              />
             </span>
           </title-box>
-          <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" />
+          <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 v-if="currentLevel === 'grid'" class="m-box">
           <title-box text="社区网格数据更新情况排行">
             <span class="date-span">
-              <el-date-picker v-model="sqwggxDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
+              <el-date-picker
+                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" />
+          <RankingGridData
+            :currentLevelData="currentLevelData"
+            :date="sqwggxDate"
+          />
         </div>
       </div>
     </div>
@@ -235,7 +374,8 @@ export default {
 
   methods: {
     changeCustomerName() {
-      this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
+      this.customerName =
+        localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
     },
     changeType(e) {
       this.peopleType = e;
@@ -290,7 +430,8 @@ export default {
           orgLevel: item.level,
         };
       } else {
-        this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
+        this.customerName =
+          localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
         this.currentLevelData = {
           ...this.$store.state.chooseArea.chooseName,
           orgLevel: this.$store.state.chooseArea.chooseName.level,
@@ -326,7 +467,10 @@ export default {
       if (!item.longitude) {
         return this.$message.error("请先设置坐标");
       }
-      this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
+      this.$refs.map.setDotMarker(item, [
+        parseFloat(item.longitude),
+        parseFloat(item.latitude),
+      ]);
     },
     setNum(data) {
       // data
@@ -357,19 +501,25 @@ export default {
       // }
     },
     //获取地图上显示的组织数据
-    async getMapData(orgId = this.$store.state.chooseArea.chooseName.orgId, level = this.$store.state.chooseArea.chooseName.level) {
+    async getMapData(
+      orgId = this.$store.state.chooseArea.chooseName.orgId,
+      level = this.$store.state.chooseArea.chooseName.level
+    ) {
       const url = "org_map";
-      this.$http.post(`/gov/org/agency/maporg`, { orgId, level }).then(({ data: { data } }) => {
-        this.orgData = data;
-        this.orgId = this.orgData.id;
-        this.orgLevel = this.orgData.level;
-        this.currentLevel = this.orgData.agencyLevel;
-        this.currentLevelData = {
-          orgId: this.orgId,
-          orgLevel: this.currentLevel,
-        };
-        this.peopleType = this.currentLevel === "grid" ? "unit" : "staffAgency";
-      });
+      this.$http
+        .post(`/gov/org/agency/maporg`, { orgId, level })
+        .then(({ data: { data } }) => {
+          this.orgData = data;
+          this.orgId = this.orgData.id;
+          this.orgLevel = this.orgData.level;
+          this.currentLevel = this.orgData.agencyLevel;
+          this.currentLevelData = {
+            orgId: this.orgId,
+            orgLevel: this.currentLevel,
+          };
+          this.peopleType =
+            this.currentLevel === "grid" ? "unit" : "staffAgency";
+        });
     },
 
     //获取地图上显示的组织数据
@@ -463,7 +613,11 @@ export default {
   background: #000;
 }
 </style>
-<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
 
 <style lang="scss" scoped>
 .tabs {