feat: 【基础信息】区域分布选中指定区县暂停并高亮显示

app/src/views/Basic/components/Regional.vue

@@ -7,9 +7,11 @@
       <span class="unit">有物联网(栋)</span>
       <span class="is_notice">占比%</span>
     </div>
-    <VueSeamlessScroll :class-option="classOption" :data="dataList" class="warp">
+    <VueSeamlessScroll v-if="reload" :class-option="classOption" :data="dataList" class="warp">
       <ul class="item">
-        <li class="row" v-for="(item, index) in dataList" :key="index">
+        <li class="row" :class="{
+          active: item.isActive
+        }" v-for="(item, index) in dataList" :key="index">
           <span class="type">{{ index + 1 }}</span>
           <span class="count">{{ item.qx }}</span>
           <span class="time">{{ item.zs }}</span>
@@ -31,18 +33,25 @@ export default {
   props: {
     list: {
       type: Array,
-      default: [],
+      default: () => [],
     },
+    qx: String
   },
   data() {
 	return {
-		dataList: []
+		dataList: [],
+    reload: true
 	}
   },
   watch:{
 	list: {
 		handler(val) {
+      this.reload = false
 			this.dataList = val
+      let timer = setTimeout(() => {
+       this.reload = true
+       timer && clearTimeout(timer)
+      }, 500);
 		},immediate: true,
 		deep: true
 	}
@@ -51,6 +60,7 @@ export default {
     classOption() {
       return {
         singleHeight: 51,
+        autoPlay: this.qx === '重庆市'
       };
     },
   },
@@ -82,7 +92,9 @@ export default {
     font-size: 10px;
   }
 }
-
+li.row.active {
+  background-color: rgba(0, 213, 255, 0.2);
+}
 li.row > span {
   text-align: center;
   font-size: 14x;

app/src/views/Basic/index.vue

@@ -47,7 +47,7 @@
     </div>
     <div>
       <border-panel height="521px" style="margin-bottom: 6px" title="区域分布">
-        <Regional :list="qyfbList" v-if="qyfbList && qyfbList.length > 0" />
+        <Regional :list="qyfbList" :qx="qy" v-if="qyfbList && qyfbList.length > 0" />
       </border-panel>
       <border-panel height="421px" style="margin-bottom: 6px" title="建筑统计">
         <BuildingStatistics
@@ -66,6 +66,7 @@ import HeightDistribution from "./components/HeightDistribution.vue";
 import ChronologicDistributionStatistics from "./components/ChronologicDistributionStatistics.vue";
 import MapCharts from "../Home/components/MapCharts.vue";
 import SearchBox from "@/components/SearchBox.vue";
+import { toFirst } from '../../utils'
 import {
   getJztj,
   getQyfbList,
@@ -119,9 +120,12 @@ export default {
       );
       getQyfbList({
         ...this.params,
-        qx: this.qy === "重庆市" ? "" : this.qy,
       }).then((res) => {
-        this.qyfbList = res.data.rows;
+        const data = res.data.rows.map(item => ({
+          ...item,
+          isActive: item.qx === this.qy
+        }));
+        this.qyfbList = toFirst(data, this.qy, 'qx')
       });
       getNdfbtj({
         ...this.params,