bug

packages/bigscreen/dv/AppQxnDv.vue

@@ -4,19 +4,27 @@
       <AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
       </AiDvPanel>
       <div class="left-list">
-        <div class="left-item" v-for="(item, index) in 16" :key="index">
+        <div
+          class="left-item"
+          v-for="(item, index) in areaList"
+          :class="[gridParentId === item.gridId ? 'active' : '']"
+          :key="index"
+          @click="init(item.gridId)">
           <i>{{ index + 1 }}</i>
           <div class="left-item__top">
-            <h2>黔西南州公安局</h2>
+            <h2>{{ item.gridName }}</h2>
-            <el-select v-model="value" size="mini" placeholder="请选择派出所">
+            <el-select v-model="gridId" size="mini" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
-              <el-option label="南京派出所" value="1"></el-option>
+              <el-option
-              <el-option label="北京派出所" value="2"></el-option>
+                :label="item.gridName"
-              <el-option label="长安派出所" value="3"></el-option>
+                :value="item.gridId"
+                v-for="(item, index) in policeStationList"
+                :key="index">
+              </el-option>
             </el-select>
           </div>
           <div class="left-item__bottom">
-            <span>居民数量：17246</span>
+            <span>居民数量：{{ item.customerCount + item.groupMemberCount }}</span>
-            <span>成员：2057</span>
+            <span>成员：{{ item.allGridMemberCount }}</span>
           </div>
         </div>
       </div>
@@ -586,7 +594,11 @@
               }
             }
           ]
-        }
+        },
+        policeStationList: [],
+        areaList: [],
+        gridId: '',
+        gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
       }
     },
 
@@ -609,13 +621,21 @@
     },
 
     methods: {
-      init () {
+      init (gridId) {
+        this.gridId = ''
+        this.gridParentId = gridId
         this.instance.post(`/wxgridinfo/tree`, null, {
           params: {
+            gridParentId: gridId || '',
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
           }
         }).then(res => {
           if (res.code === 0) {
+            if (gridId) {
+              this.policeStationList = res.data
+            } else {
+              this.areaList = res.data
+            }
           }
         })
       },
@@ -919,10 +939,25 @@
         .left-item {
           position: relative;
           width: 100%;
+          cursor: pointer;
           margin-bottom: 10px;
           padding: 30px 14px 14px;
-          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.65) 100%);
+          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.2) 100%);
           border-radius: 6px;
+          transition: all ease 0.3s;
+
+          &:hover {
+            opacity: 0.7;
+          }
+
+          &.active {
+            background-image: linear-gradient(0deg, #28b6fd24 0%, #00669aa6 99%);
+            box-shadow: inset 0 -1px 0 0 #23B2C7;
+
+            &:hover {
+              opacity: 1;
+            }
+          }
 
           i {
             position: absolute;

packages/bigscreen/dv/components/DvMap.vue

@@ -57,7 +57,7 @@ export default {
       v: `AiDvMap-${new Date().getTime()}`,
       chart: null,
       isShowInfo: false,
-      geoJSON: require('../geoJSon/qxnGeoJSON.json')
+      geoJSON: require('./geoJSon/qxnGeoJSON.json')
     }
   },
   directives: {