From f5719265d7cb69e94806b02ddcd797b77e978e29 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:07:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E6=8F=90?=
 =?UTF-8?q?=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 |  25 ++-
 .../dataBoard/cpts/homeDetails/index.vue      |   2 +-
 src/views/dataBoard/cpts/map/index.vue        | 187 ++++++++++++++----
 .../components/DynamicHumanRoomData.vue       |  28 ++-
 .../overview/components/GridUpdateRanking.vue |  28 ++-
 .../overview/components/RankingGridData.vue   |  28 ++-
 .../dataBoard/overview/components/sq12345.vue |  28 ++-
 .../dataBoard/overview/components/sqrfph.vue  |  30 ++-
 8 files changed, 288 insertions(+), 68 deletions(-)

diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index 55e0cba68..3a9b376d2 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -582,33 +582,36 @@
 			height: 40px;
 
 			.th {
-				width: 110px;
+				width: 85px;
 				height: 40px;
 				line-height: 40px;
 				font-size: 14px;
 				font-weight: 400;
 				color: #A3B9DA;
+				white-space: nowrap;
 			}
 
 			.th:nth-child(1) {
 				width: 65px;
 				text-align: center;
 			}
+			.th:nth-child(2) {
+				width: 130px;
+			}
 
 			.td {
 				height: 40px;
 				line-height: 40px;
-				width: 110px;
 				overflow: hidden;
 				font-size: 14px;
 				font-weight: 400;
+				width: 85px;
 				color: #FFFFFF;
 				text-overflow: ellipsis;
 				white-space: nowrap;
-				// padding: 0 8px;
-				// overflow: hidden;
-				// white-space: nowrap;
-				// text-overflow: ellipsis;
+			}
+			.td:nth-child(2) {
+				width: 130px;
 			}
 
 			.tdbg1 {
@@ -657,7 +660,7 @@
 			height: 40px;
 
 			.th {
-				width: 110px;
+				width: 80px;
 				height: 40px;
 				line-height: 40px;
 				font-size: 14px;
@@ -669,11 +672,14 @@
 				width: 65px;
 				text-align: center;
 			}
+			.th:nth-child(2) {
+				width: 130px;
+			}
 
 			.td {
 				height: 40px;
 				line-height: 40px;
-				width: 110px;
+				width: 80px;
 				font-size: 14px;
 				font-weight: 400;
 				color: #FFFFFF;
@@ -718,6 +724,9 @@
 				width: 65px;
 				text-align: center;
 			}
+			.td:nth-child(2) {
+				width: 130px;
+			}
 		}
 
 		.tr:nth-child(even) {
diff --git a/src/views/dataBoard/cpts/homeDetails/index.vue b/src/views/dataBoard/cpts/homeDetails/index.vue
index a07ac8983..395b00a6d 100644
--- a/src/views/dataBoard/cpts/homeDetails/index.vue
+++ b/src/views/dataBoard/cpts/homeDetails/index.vue
@@ -50,7 +50,7 @@
             <el-table-column prop="doorName" label="门牌号" />
             <el-table-column prop="fullName" show-overflow-tooltip label="所属小区" />
             <el-table-column prop="buildingId" show-overflow-tooltip label="所属楼栋" />
-            <el-table-column prop="houseName" show-overflow-tooltip label="所属单元" />
+            <el-table-column prop="buildingUnitId" show-overflow-tooltip label="所属单元" />
             <el-table-column prop="houseCode" label="房屋编码" />
             <el-table-column prop="rentFlag" label="房屋状态">
               <template slot-scope="scope">
diff --git a/src/views/dataBoard/cpts/map/index.vue b/src/views/dataBoard/cpts/map/index.vue
index baee65d98..9fc9c864c 100644
--- a/src/views/dataBoard/cpts/map/index.vue
+++ b/src/views/dataBoard/cpts/map/index.vue
@@ -1,17 +1,39 @@
 <template>
   <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
     <div id="map" :style="{ transform: `scale(${zoom})` }"></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>
+    <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})` }" -->
-    <cpt-popup ref="popup" @clickListItem="handleClickDotListItem" @operate="handleClickDotBtn" />
+    <cpt-popup
+      ref="popup"
+      @clickListItem="handleClickDotListItem"
+      @operate="handleClickDotBtn"
+    />
   </div>
 </template>
 
 <script>
 import { requestPost } from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
-import { Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup } from "@antv/l7";
+import {
+  Scene,
+  PolygonLayer,
+  LineLayer,
+  MarkerLayer,
+  RasterLayer,
+  PointLayer,
+  Marker,
+  Popup,
+} from "@antv/l7";
 import { GaodeMap, Map } from "@antv/l7-maps";
 import { spliceIntoChunks } from "@/utils/index";
 import { mapType, searchNearby } from "@/utils/dai-map";
@@ -146,7 +168,11 @@ export default {
   computed: {
     polygonData() {
       const { srcGridData } = this;
-      if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) {
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
         return { type: "FeatureCollection", features: [] };
       }
       const polygon = [
@@ -178,7 +204,11 @@ export default {
 
     polygonDotData() {
       const { srcGridData } = this;
-      if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) {
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
         return { type: "FeatureCollection", features: [] };
       }
       const polygon = [
@@ -199,7 +229,9 @@ export default {
                 item.latitude
                   ? [[item.longitude, item.latitude]]
                   : spliceIntoChunks(
-                      item.coordinates.split(",").map((item) => parseFloat(item)),
+                      item.coordinates
+                        .split(",")
+                        .map((item) => parseFloat(item)),
                       2
                     ).filter((item) => item.length == 2),
               ],
@@ -223,7 +255,10 @@ export default {
               },
               geometry: {
                 type: "Point",
-                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+                coordinates: [
+                  parseFloat(item.longitude),
+                  parseFloat(item.latitude),
+                ],
               },
             })),
         ],
@@ -244,7 +279,10 @@ export default {
               },
               geometry: {
                 type: "Point",
-                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+                coordinates: [
+                  parseFloat(item.longitude),
+                  parseFloat(item.latitude),
+                ],
               },
             })),
         ],
@@ -306,7 +344,14 @@ export default {
         styleConfig = lightStyle;
       }
 
-      const iniCenter = [srcGridData.longitude || this.$store.state.user.longitude || 116.39743841556731, srcGridData.latitude || this.$store.state.user.latitude || 39.9088810666821];
+      const iniCenter = [
+        srcGridData.longitude ||
+          this.$store.state.user.longitude ||
+          116.39743841556731,
+        srcGridData.latitude ||
+          this.$store.state.user.latitude ||
+          39.9088810666821,
+      ];
 
       if (mapType != "qq") {
         myMap = new Map({
@@ -319,6 +364,7 @@ export default {
           //   pitch: this.pitch,
           mapStyle: "amap://styles/darkblue",
           // style: styleConfig.style,
+          showLabel: false,
           center: iniCenter,
           token: "fc14b42e0ca18387866d68ebd4f150c1",
           zoom: 18,
@@ -357,15 +403,18 @@ export default {
         zIndex: 1,
       });
       baseLayer
-        .source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
-          parser: {
-            type: "rasterTile",
-            tileSize: 256,
-            // minZoom: 6,
-            // maxZoom: 15,
-            zoomOffset: 0,
-          },
-        })
+        .source(
+          "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
         .style({
           opacity: 0.7,
         });
@@ -375,15 +424,18 @@ export default {
         zIndex: 2,
       });
       annotionLayer
-        .source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
-          parser: {
-            type: "rasterTile",
-            tileSize: 256,
-            // minZoom: 6,
-            // maxZoom: 15,
-            zoomOffset: 0,
-          },
-        })
+        .source(
+          "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
         .style({
           opacity: 0.5,
         });
@@ -483,8 +535,14 @@ export default {
         });
       // scene.addLayer(circleLayer);
       scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png"));
-      scene.addImage("pos-green", require("@/assets/img/shuju/grid/pos-green.png"));
-      scene.addImage("pos-yellow", require("@/assets/img/shuju/grid/pos-yellow.png"));
+      scene.addImage(
+        "pos-green",
+        require("@/assets/img/shuju/grid/pos-green.png")
+      );
+      scene.addImage(
+        "pos-yellow",
+        require("@/assets/img/shuju/grid/pos-yellow.png")
+      );
 
       posLayer = new PointLayer({
         zIndex: 4,
@@ -544,7 +602,11 @@ export default {
                       ${e.feature.properties.name}
                   </div>
                    <div class="jw-popup-des">
-                      ${e.feature.properties.description ? e.feature.properties.description : ""}
+                      ${
+                        e.feature.properties.description
+                          ? e.feature.properties.description
+                          : ""
+                      }
                   </div>
                 </div>
           </div>
@@ -727,7 +789,9 @@ export default {
         // lng 经度；lat 纬度；dis 距离（千米）
         let r = 6371; //地球半径千米
         let dis = 0.25; //3千米距离
-        let dlng = 2 * Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180));
+        let dlng =
+          2 *
+          Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180));
         dlng = (dlng * 180) / Math.PI; // 经度半径
         let dlat = dis / r;
         dlat = (dlat * 180) / Math.PI; // 纬度半径
@@ -802,7 +866,10 @@ export default {
       for (let i in data) {
         // console.log(data[i].longitude * 1, data[i].latitude * 1);
         var el = document.createElement("div");
-        el.className = peopleType === "building" ? "label-pointLd-class" : "label-point-class";
+        el.className =
+          peopleType === "building"
+            ? "label-pointLd-class"
+            : "label-point-class";
         el.classList.add(data[i].type);
         // el.textContent = data[i].peopleType+'：'+data[i].personnelNum;
         const pointMarkerItem = new Marker({
@@ -821,14 +888,34 @@ export default {
                   <div class="jw-popup-title">
                       ${data[i].name}
                   </div>
-                  <div class="jw-popup-type">网格类型：<span class="${data[i].type}">${data[i].type === "red" ? "红" : data[i].type === "yellow" ? "黄" : data[i].type === "green" ? "绿色" : ""}</span>
+                  <div class="jw-popup-type">网格类型：<span class="${
+                    data[i].type
+                  }">${
+            data[i].type === "red"
+              ? "红"
+              : data[i].type === "yellow"
+              ? "黄"
+              : data[i].type === "green"
+              ? "绿色"
+              : ""
+          }</span>
                   </div>
                    <div class="jw-popup-num-list">
-                     <div>户数：<span>${data[i].houseNum ? data[i].houseNum : 0}</span></div>
-                     <div>需求：<span>${data[i].demandNum ? data[i].demandNum : 0}</span></div>
-                     <div>事件：<span>${data[i].eventNum ? data[i].eventNum : 0}</span></div>
-                     <div>重点人群：<span>${data[i].importanceNum ? data[i].importanceNum : 0}</span></div>
-                     <div>安全隐患：<span>${data[i].safetyNum ? data[i].safetyNum : 0}</span></div>
+                     <div>户数：<span>${
+                       data[i].houseNum ? data[i].houseNum : 0
+                     }</span></div>
+                     <div>需求：<span>${
+                       data[i].demandNum ? data[i].demandNum : 0
+                     }</span></div>
+                     <div>事件：<span>${
+                       data[i].eventNum ? data[i].eventNum : 0
+                     }</span></div>
+                     <div>重点人群：<span>${
+                       data[i].importanceNum ? data[i].importanceNum : 0
+                     }</span></div>
+                     <div>安全隐患：<span>${
+                       data[i].safetyNum ? data[i].safetyNum : 0
+                     }</span></div>
                   </div>
                 </div>
           </div>
@@ -839,7 +926,9 @@ export default {
           popup.remove();
         });
         pointMarkerItem.on("click", () => {
-          this.$router.push(`/homeDetails/index?id=${data[i].id}&typeB=${peopleType}`);
+          this.$router.push(
+            `/homeDetails/index?id=${data[i].id}&typeB=${peopleType}`
+          );
         });
 
         pointMarker.addMarker(pointMarkerItem);
@@ -930,7 +1019,10 @@ export default {
 
     handleClickDotListItem(item) {
       console.log("handleClickDotListItem", item);
-      this.handleClickDot(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
+      this.handleClickDot(item, [
+        parseFloat(item.longitude),
+        parseFloat(item.latitude),
+      ]);
     },
   },
 };
@@ -957,7 +1049,12 @@ export default {
     right: 0;
     bottom: 0;
     pointer-events: none;
-    background: radial-gradient(rgba(#020c38, 0) 0%, rgba(#020c38, 0) 60%, rgba(#020c38, 1) 85%, rgba(#020c38, 1) 100%);
+    background: radial-gradient(
+      rgba(#020c38, 0) 0%,
+      rgba(#020c38, 0) 60%,
+      rgba(#020c38, 1) 85%,
+      rgba(#020c38, 1) 100%
+    );
   }
 
   &.z-td {
@@ -965,7 +1062,11 @@ export default {
       /deep/ .l7-scene {
         canvas {
           background-color: rgba(43, 51, 73, 0.82);
-          background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
+          background-image: radial-gradient(
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.3),
+            #000
+          );
         }
 
         .gray {
diff --git a/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue b/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue
index 44a232913..7c4a2694c 100644
--- a/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue
+++ b/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue
@@ -11,13 +11,21 @@
         修改了新苑小区**的居民信息的居民信息的居民信息
       </div>
     </div>-->
-      <div style="overflow: hidden">
+      <div style="overflow: hidden" @mouseenter="yiru()" @mouseleave="yichu()">
         <div ref="animation2">
           <div class="dhrd-item" v-for="(item, index) in list" :key="index">
             <div class="time">
               {{ $moment(item.changeTime).format("HH:mm") }}
             </div>
-            <div class="title">{{ item.orgName }}</div>
+            <div class="title">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.orgName"
+                placement="top"
+                ><span>{{ item.orgName }}</span>
+              </el-tooltip>
+            </div>
             <!--      <div class="name">{{item.orgName}}</div>-->
             <div class="address">{{ item.content }}</div>
           </div>
@@ -26,7 +34,15 @@
               <div class="time">
                 {{ $moment(item.changeTime).format("HH:mm") }}
               </div>
-              <div class="title">{{ item.orgName }}</div>
+              <div class="title">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="item.orgName"
+                  placement="top"
+                  ><span>{{ item.orgName }}</span>
+                </el-tooltip>
+              </div>
               <!--      <div class="name">{{item.orgName}}</div>-->
               <div class="address">{{ item.content }}</div>
             </div>
@@ -69,6 +85,12 @@ export default {
     }
   },
   methods: {
+    yichu() {
+      this.$refs.animation2.style["animation-play-state"] = "running";
+    },
+    yiru() {
+      this.$refs.animation2.style["animation-play-state"] = "paused";
+    },
     getList(item) {
       this.$http.get("/actual/base/streetOverview/residentHouseUpdateRecord?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => {
         this.list = data;
diff --git a/src/views/dataBoard/overview/components/GridUpdateRanking.vue b/src/views/dataBoard/overview/components/GridUpdateRanking.vue
index 3e37bef5f..812b386da 100644
--- a/src/views/dataBoard/overview/components/GridUpdateRanking.vue
+++ b/src/views/dataBoard/overview/components/GridUpdateRanking.vue
@@ -8,13 +8,21 @@
         <div class="th">人口更新数</div>
         <div class="th">人房更新总数</div>
       </div>
-      <div style="overflow: hidden">
+      <div style="overflow: hidden" @mouseenter="yiru()" @mouseleave="yichu()">
         <div ref="animation1">
           <div class="tr" v-for="(item, index) in pmList" :key="index">
             <div :class="index - 0 + 1 < 4 ? `td tdbg${index - 0 + 1}` : 'td'">
               {{ index - 0 + 1 }}
             </div>
-            <div class="td">{{ item.orgName }}</div>
+            <div class="td">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.orgName"
+                placement="top"
+                ><span>{{ item.orgName }}</span>
+              </el-tooltip>
+            </div>
             <div class="td">{{ item.houseNum }}</div>
             <div class="td">{{ item.residentNum }}</div>
             <div class="td">{{ item.sumNum }}</div>
@@ -25,7 +33,15 @@
               <div :class="index - 0 + 1 < 4 ? `td tdbg${index - 0 + 1}` : 'td'">
                 {{ index - 0 + 1 }}
               </div>
-              <div class="td">{{ item.orgName }}</div>
+              <div class="td">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="item.orgName"
+                  placement="top"
+                  ><span>{{ item.orgName }}</span>
+                </el-tooltip>
+              </div>
               <div class="td">{{ item.houseNum }}</div>
               <div class="td">{{ item.residentNum }}</div>
               <div class="td">{{ item.sumNum }}</div>
@@ -75,6 +91,12 @@ export default {
     }
   },
   methods: {
+    yichu() {
+      this.$refs.animation1.style["animation-play-state"] = "running";
+    },
+    yiru() {
+      this.$refs.animation1.style["animation-play-state"] = "paused";
+    },
     getList(item) {
       this.$http.get("/actual/base/streetOverview/residentHouseUpdateGroupByGrid?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => {
         this.pmList = data;
diff --git a/src/views/dataBoard/overview/components/RankingGridData.vue b/src/views/dataBoard/overview/components/RankingGridData.vue
index 76b1094d7..744c11e06 100644
--- a/src/views/dataBoard/overview/components/RankingGridData.vue
+++ b/src/views/dataBoard/overview/components/RankingGridData.vue
@@ -15,13 +15,21 @@
         <div class="th">人口更新数</div>
         <div class="th">人房更新总数</div>
       </div>
-      <div style="overflow: hidden">
+      <div style="overflow: hidden" @mouseenter="yiru()" @mouseleave="yichu()">
         <div ref="animation3">
           <div class="tr" v-for="item in pmList" :key="item.rank">
             <div :class="item.rank < 4 ? `td tdbg${item.rank}` : 'td'">
               {{ item.rank }}
             </div>
-            <div class="td">{{ item.orgName }}</div>
+            <div class="td">
+              <el-tooltip
+                effect="dark"
+                class="item"
+                :content="item.orgName"
+                placement="top"
+                ><span>{{ item.orgName }}</span>
+              </el-tooltip>
+            </div>
             <div class="td">{{ item.houseNum }}</div>
             <div class="td">{{ item.residentNum }}</div>
             <div class="td">{{ item.sumNum }}</div>
@@ -34,7 +42,15 @@
               >
                 {{ index - 0 + 1 }}
               </div>
-              <div class="td">{{ item.orgName }}</div>
+              <div class="td">
+                <el-tooltip
+                  effect="dark"
+                  class="item"
+                  :content="item.orgName"
+                  placement="top"
+                  ><span>{{ item.orgName }}</span>
+                </el-tooltip>
+              </div>
               <div class="td">{{ item.houseNum }}</div>
               <div class="td">{{ item.residentNum }}</div>
               <div class="td">{{ item.sumNum }}</div>
@@ -98,6 +114,12 @@ export default {
     }
   },
   methods: {
+    yichu() {
+      this.$refs.animation3.style["animation-play-state"] = "running";
+    },
+    yiru() {
+      this.$refs.animation3.style["animation-play-state"] = "paused";
+    },
     getList(item) {
       this.$http
         .get(
diff --git a/src/views/dataBoard/overview/components/sq12345.vue b/src/views/dataBoard/overview/components/sq12345.vue
index f9bdd1029..b3e4f5ac9 100644
--- a/src/views/dataBoard/overview/components/sq12345.vue
+++ b/src/views/dataBoard/overview/components/sq12345.vue
@@ -8,13 +8,21 @@
         <div class="th">处理中</div>
         <div class="th">已办结</div>
       </div>
-      <div style="overflow: hidden">
+      <div style="overflow: hidden" @mouseenter="yiru()" @mouseleave="yichu()">
         <div ref="animation4">
           <div class="tr" v-for="(item, index) in pmList" :key="index">
             <div :class="index - 0 + 1 < 4 ? `td tdbg${index - 0 + 1}` : 'td'">
               {{ index - 0 + 1 }}
             </div>
-            <div class="td">{{ item.orgName }}</div>
+            <div class="td">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.orgName"
+                placement="top"
+                ><span>{{ item.orgName }}</span>
+              </el-tooltip>
+            </div>
             <div class="td">{{ item.sumNum }}</div>
             <div class="td td-or">{{ item.processNum }}</div>
             <div class="td td-gr">{{ item.closedNum }}</div>
@@ -27,7 +35,15 @@
               >
                 {{ index - 0 + 1 }}
               </div>
-              <div class="td">{{ item.orgName }}</div>
+              <div class="td">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="item.orgName"
+                  placement="top"
+                  ><span>{{ item.orgName }}</span>
+                </el-tooltip>
+              </div>
               <div class="td">{{ item.sumNum }}</div>
               <div class="td td-or">{{ item.processNum }}</div>
               <div class="td td-gr">{{ item.closedNum }}</div>
@@ -90,6 +106,12 @@ export default {
     }
   },
   methods: {
+    yichu() {
+      this.$refs.animation4.style["animation-play-state"] = "running";
+    },
+    yiru() {
+      this.$refs.animation4.style["animation-play-state"] = "paused";
+    },
     getList(item) {
       this.$http
         .get(
diff --git a/src/views/dataBoard/overview/components/sqrfph.vue b/src/views/dataBoard/overview/components/sqrfph.vue
index 93857efb0..33750985a 100644
--- a/src/views/dataBoard/overview/components/sqrfph.vue
+++ b/src/views/dataBoard/overview/components/sqrfph.vue
@@ -8,13 +8,21 @@
         <div class="th">人口更新数</div>
         <div class="th">人房更新总数</div>
       </div>
-      <div style="overflow: hidden">
+      <div style="overflow: hidden" @mouseenter="yiru()" @mouseleave="yichu()">
         <div ref="animation5">
           <div class="tr" v-for="(item, index) in pmList" :key="index">
             <div :class="index - 0 + 1 < 4 ? `td tdbg${index - 0 + 1}` : 'td'">
               {{ index - 0 + 1 }}
             </div>
-            <div class="td">{{ item.orgName }}</div>
+            <div class="td">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.orgName"
+                placement="top"
+                ><span>{{ item.orgName }}</span>
+              </el-tooltip>
+            </div>
             <div class="td">{{ item.houseNum }}</div>
             <div class="td">{{ item.residentNum }}</div>
             <div class="td">{{ item.sumNum }}</div>
@@ -27,7 +35,15 @@
               >
                 {{ index - 0 + 1 }}
               </div>
-              <div class="td">{{ item.orgName }}</div>
+              <div class="td">
+                <el-tooltip
+                  effect="dark"
+                  class="item"
+                  :content="item.orgName"
+                  placement="top"
+                  ><span>{{ item.orgName }}</span>
+                </el-tooltip>
+              </div>
               <div class="td">{{ item.houseNum }}</div>
               <div class="td">{{ item.residentNum }}</div>
               <div class="td">{{ item.sumNum }}</div>
@@ -90,6 +106,12 @@ export default {
     }
   },
   methods: {
+    yichu() {
+      this.$refs.animation5.style["animation-play-state"] = "running";
+    },
+    yiru() {
+      this.$refs.animation5.style["animation-play-state"] = "paused";
+    },
     getList(item) {
       this.$http
         .get(
@@ -136,4 +158,4 @@ export default {
   font-weight: 500;
   color: #a3b9da;
 }
-</style>
\ No newline at end of file
+</style>