点击小班列表下钻区域

src/views/index.vue

@@ -2,8 +2,8 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: gcz
- * @LastEditTime: 2022-08-03 14:38:39
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-08-03 15:29:03
  * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -249,6 +249,7 @@ export default {
       showxiaoban: true,
       showbase: false,
       showScrollBoard: false,
+      alarData: {},
       page: 1,
       // addrOptions: regionDataPlus,
       addrSelectedOptions: ['520000', ''],
@@ -295,6 +296,9 @@ export default {
     };
   },
   created() {},
+  computed: {
+    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
+  },
   mounted() {
     this.getPageData();
     this.getRightScrollData();
@@ -350,10 +354,24 @@ export default {
     },
     '$store.state.addr.selectStreet'(val) {
       this.getPageData();
+    },
+    '$store.state.addr.mapLevel': {
+      handler(val) {
+        if (val === 'city') {
+          this.jumpDistrict();
+        }
+      }
     }
   },
   methods: {
-    ...mapMutations(['changeSearchSmallClass', 'changeEvenData','changeBaseDetail']),
+    ...mapMutations([
+      'changeSearchSmallClass',
+      'changeEvenData',
+      'changeBaseDetail',
+      'changeSelectCity',
+      'changeSelectDistrict',
+      'changeSelectStreet'
+    ]),
     addrChange(value) {
       console.log('addrChange', value);
     },
@@ -679,7 +697,7 @@ export default {
           // console.log('x坐标',  this.page2Char2.xAxis.data)
           // 获取所有项
           let seriesList = rows.map((item) => {
-            return item.treeList||[];
+            return item.treeList || [];
           });
           // 数组扁平化
           seriesList = seriesList.flat();
@@ -691,10 +709,10 @@ export default {
             obj[next.name] ? '' : (obj[next.name] = true && newArr.push(next));
             return newArr;
           }, []);
-          seriesList.sort((star,next)=>{
-              // 按name的指定顺序排序,不排序可以删掉
-              var order = ["杉木", "马尾松", "软阔", "硬阔"];
-              return order.indexOf(star.name) - order.indexOf(next.name)
+          seriesList.sort((star, next) => {
+            // 按name的指定顺序排序,不排序可以删掉
+            var order = ['杉木', '马尾松', '软阔', '硬阔'];
+            return order.indexOf(star.name) - order.indexOf(next.name);
           });
           seriesList = seriesList.map((item, index) => {
             let itemColor = null;
@@ -727,11 +745,12 @@ export default {
           rows.forEach((item) => {
             seriesList.forEach((jtem, index) => {
               let num = 0;
-              item.treeList&&item.treeList.map((ktem) => {
-                if (ktem.name.indexOf(jtem.name) > -1) {
-                  num = ktem.value;
-                }
-              });
+              item.treeList &&
+                item.treeList.map((ktem) => {
+                  if (ktem.name.indexOf(jtem.name) > -1) {
+                    num = ktem.value;
+                  }
+                });
               seriesList[index].data.push(num);
             });
           });
@@ -777,7 +796,7 @@ export default {
           // console.log('x坐标',  this.page2Char2.xAxis.data)
           // 获取所有项
           let seriesList = rows.map((item) => {
-            return item.treeList||[];
+            return item.treeList || [];
           });
           // 数组扁平化
           seriesList = seriesList.flat();
@@ -788,10 +807,10 @@ export default {
             return newArr;
           }, []);
           // console.log('seriesList',seriesList);
-          seriesList.sort((star,next)=>{
-              // 按name的指定顺序排序,不排序可以删掉
-              var order = ["杉木", "马尾松", "软阔", "硬阔"];
-              return order.indexOf(star.name) - order.indexOf(next.name)
+          seriesList.sort((star, next) => {
+            // 按name的指定顺序排序,不排序可以删掉
+            var order = ['杉木', '马尾松', '软阔', '硬阔'];
+            return order.indexOf(star.name) - order.indexOf(next.name);
           });
           seriesList = seriesList.map((item, index) => {
             let itemColor = null;
@@ -824,11 +843,12 @@ export default {
           rows.forEach((item) => {
             seriesList.forEach((jtem, index) => {
               let num = 0;
-              item.treeList&&item.treeList.map((ktem) => {
-                if (ktem.name.indexOf(jtem.name) > -1) {
-                  num = ktem.value;
-                }
-              });
+              item.treeList &&
+                item.treeList.map((ktem) => {
+                  if (ktem.name.indexOf(jtem.name) > -1) {
+                    num = ktem.value;
+                  }
+                });
               seriesList[index].data.push(num);
             });
           });
@@ -1060,12 +1080,46 @@ export default {
     },
     scrollBoardClick(e) {
       let param = {
-        smallNumber: e.row[0]
+        id: e.row[4]
       };
-      smallInfo(param).then((res) => {
+      smallClassDetail(param).then((res) => {
         this.changeSearchSmallClass(res.data);
+        console.log(res.data);
+        this.alarData = res.data
+        this.vuexCityList.forEach((element) => {
+          if (res.data.cityId === element.areaId) {
+            this.changeSelectCity({
+              value: element.areaCode,
+              label: res.data.cityName,
+              areaId: element.areaId
+            });
+            this.$store.dispatch('searchArea', {
+              parentId: element.areaCode.substring(0, 6),
+              name: res.data.cityName,
+              mapLevel: 'city'
+            });
+          }
+        });
       });
     },
+    jumpDistrict() {
+      if (this.vuexDistrictList) {
+        this.vuexDistrictList.forEach((element) => {
+          if (this.alarData.countyId === element.areaId) {
+            this.changeSelectDistrict({
+              value: element.areaCode,
+              label: this.alarData.cityName,
+              areaId: element.areaId
+            });
+            this.$store.dispatch('searchArea', {
+              parentId: element.areaCode.substring(0, 6),
+              name: element.areaName,
+              mapLevel: 'district'
+            });
+          }
+        });
+      }
+    },
     scrollOut() {
       this.changeSearchSmallClass({ name: false });
     },
@@ -1075,11 +1129,11 @@ export default {
         baseId: e.row[3]
       };
       financeBaseDetail(param).then((res) => {
-        this.changeBaseDetail(res.data)
-      })
+        this.changeBaseDetail(res.data);
+      });
     },
-    baseListClick(){
-      this.changeBaseDetail({ name: false })
+    baseListClick() {
+      this.changeBaseDetail({ name: false });
     },
     scrollEventClick(e) {
       let param = {