地图小班跳转

src/components/alarm.vue

@@ -1,5 +1,5 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
   <div class="alarm-wrap">
@@ -60,6 +60,7 @@ export default {
     ]),
     jumpMap(item) {
       this.alarData = item;
+      console.log(item);
         this.vuexCityList.forEach((element) => {
           if (item.cityId === element.areaId) {
             this.changeSelectCity({

src/components/amap.vue

@@ -75,6 +75,9 @@ export default {
   watch: {
     '$store.state.addr.parentId': {
       handler(val) {
+        if (this.$store.state.addr.smallClassSearch) {
+          
+        }
         if (this.map) {
           this.parentId = val;
           this.switch2AreaNode(
@@ -93,6 +96,7 @@ export default {
     '$store.state.addr.page': {
       handler(val) {
         this.leftPage = val;
+        console.log(this.parentId);
         if (this.parentId) {
           // this.getrjx()
           this.switch2AreaNode(
@@ -108,11 +112,13 @@ export default {
         }
       }
     },
-    '$store.state.addr.smallClassMapArr': {
-      handler(val) {
+    '$store.state.addr.smallClassMapArr'(val) {
+      console.log(val);
+      if (this.map) {
         if (val.code == 200) {
-          this.smallClassMapArr = [];
+          // this.smallClassMapArr = [];
           this.smallClassMapArr = val.rows;
+          console.log(val.rows);
           // smallClassPolygon
           // this.map.setLayers(this.smallClassPolygon);
           if (this.$store.state.addr.mapLevel === 'district') {
@@ -129,12 +135,53 @@ export default {
         }
       }
     },
-    '$store.state.addr.smallClassSearch': {
-      handler(val) {
-        console.log(val);
-        
-      }
-    }
+    // '$store.state.addr.smallClassSearch': {
+    //   handler(val) {
+    //     console.log(val);
+    //     this.areaData = val;
+    //     let valCode = '';
+    //     let level = '';
+    //     if (val.cityId && val.cityName) {
+    //       this.vuexCityList.forEach((item) => {
+    //         if (val.cityId == item.areaId) {
+    //           valCode = item.areaCode;
+    //         }
+    //       });
+    //       this.vuexDistrictList.forEach((item) => {
+    //         if (val.countyId == item.areaId) {
+    //           valCode = item.areaCode;
+    //         }
+    //       });
+    //       this.vuexStreetList.forEach((item) => {
+    //         if (val.townId == item.areaId) {
+    //           valCode = item.areaCode;
+    //         }
+    //       });
+    //       this.selectCity = {
+    //         areaId: val.cityId,
+    //         label: val.cityName,
+    //         value: valCode
+    //       };
+    //       this.selectDistrict = {
+    //         areaId: val.countyId,
+    //         label: val.countyName,
+    //         value: valCode
+    //       };
+    //       this.selectStreet = {
+    //         areaId: val.townId,
+    //         label: val.townName,
+    //         value: valCode
+    //       };
+    //       level = 'city';
+    //       // this.cityChange(this.selectCity, level);
+    //       this.$store.dispatch('searchArea', {
+    //         parentId: valCode,
+    //         name: val.cityName,
+    //         mapLevel: level
+    //       });
+    //     }
+    //   }
+    // }
   },
   computed: {
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
@@ -432,6 +479,9 @@ export default {
         }
         if (mapLevel === 'district') {
           this.getrjx(adcode);
+          if (page === 'event') {
+            this.getEven();
+          }
         }
         //设置当前使用的定位用节点
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
@@ -1043,11 +1093,11 @@ export default {
             map: that.map,
             pathL: pathArray,
             strokeColor: '#00eeff',
-            strokeWeight: 1,
+            strokeWeight: 4,
             fillColor: '#0c1b05', // 遮罩背景色
-            fillOpacity: 0.8
+            fillOpacity: 0
           });
-          townPolygon.setPath(pathArray);
+          townPolygon.setPath(holes);
           // that.map.add(townPolygon);
           that.map.setZoomAndCenter(13, centerLanLatArr, false, 12);
 
@@ -1058,8 +1108,6 @@ export default {
           } else if (this.leftPage === 'treeSpecies') {
             this.addTreeSpeciesPolygon();
             this.getRightScrollData(this.leftPage);
-          } else if (this.leftPage === 'event') {
-            this.getEven();
           } else if (this.leftPage === 'economics') {
             this.getEconomics();
           }

src/components/pickerAddr.vue

@@ -3,7 +3,7 @@
 -->
 <template>
   <div class="pickerAddr u-flex">
-    <div class="select-wrap select-province" @click="provinceClick" >
+    <div class="select-wrap select-province" @click="provinceClick">
       省：
       <el-select v-model="selectProvince" placeholder="请选择" disabled>
         <!-- <el-option
@@ -11,7 +11,7 @@
           :key="item.areaCode"
           :label="item.areaName"
           :value="{value:item.areaCode,label:item.areaName,areaId:item.areaId}"
-        ></el-option> -->
+        ></el-option>-->
       </el-select>
     </div>
     <div class="select-wrap">
@@ -36,7 +36,7 @@
         ></el-option>
       </el-select>
     </div>
-    <div class="select-wrap" >
+    <div class="select-wrap">
       乡：
       <el-select v-model="selectStreet" placeholder="请选择" @change="cityChange($event,'street')">
         <el-option
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { mapMutations,mapState, mapGetters } from 'vuex';
+import { mapMutations, mapState, mapGetters } from 'vuex';
 
 export default {
   // props:{
@@ -63,26 +63,49 @@ export default {
   components: {},
   data() {
     return {
-      selectProvince:'贵州省',
+      selectProvince: '贵州省',
       selectCity: {},
       selectDistrict: {},
       selectStreet: {},
       value: '',
       parentId: '520000',
       name: '',
-      areaId:''
+      areaId: ''
     };
   },
   watch: {
     '$store.state.addr.selectCity'(val) {
-      this.selectCity = val
+      this.selectCity = val;
     },
     '$store.state.addr.selectDistrict'(val) {
-      this.selectDistrict = val
+      this.selectDistrict = val;
     },
     '$store.state.addr.selectStreet'(val) {
-      this.selectStreet = val
+      this.selectStreet = val;
     },
+    '$store.state.addr.smallClassSearch': {
+      handler(val) {
+        console.log(val);
+        this.areaData = val;
+        this.getCityChange();
+        this.getDistrictChange();
+        // this.vuexStreetList.forEach((item) => {
+        //   if (val.townId == item.areaId) {
+        //     valCode = item.areaCode;
+        //   }
+        // });
+
+        // this.selectStreet = {
+        //   areaId: val.townId,
+        //   label: val.townName,
+        //   value: valCode
+        // };
+        // if (val.countyId && val.countyName) {
+        //   console.log(this.selectDistrict);
+        //   this.setcity();
+        // }
+      }
+    }
   },
   computed: {
     // 引入getters中的计算属性，需要在 computed 中引入
@@ -101,15 +124,68 @@ export default {
       'changeSelectDistrict',
       'changeSelectStreet'
     ]),
+    getCityChange() {
+      if (this.areaData.cityId && this.areaData.cityName) {
+        let valCode = '';
+        this.vuexCityList.forEach((item) => {
+          if (this.areaData.cityId == item.areaId) {
+            valCode = item.areaCode.substring(0, 6);
+          }
+        });
+
+        this.selectCity = {
+          areaId: this.areaData.cityId,
+          label: this.areaData.cityName,
+          value: valCode
+        };
+        this.$store.dispatch('searchArea', {
+          parentId: valCode,
+          name: this.areaData.cityName,
+          mapLevel: 'city'
+        });
+      }
+    },
+    getDistrictChange() {
+      let valCode = '';
+      this.vuexDistrictList.forEach((item) => {
+        if (this.areaData.countyId == item.areaId) {
+          valCode = item.areaCode.substring(0, 6);
+        }
+      });
+      this.selectDistrict = {
+        areaId: this.areaData.countyId,
+        label: this.areaData.countyName,
+        value: valCode
+      };
+      
+      this.$store.dispatch('searchArea', {
+        parentId: valCode,
+        name: this.areaData.countyName,
+        mapLevel: 'district'
+      });
+    },
     cityChange(val, level) {
       console.log(val);
       if (level == 'city') {
-        this.changeSelectCity({ value: val.value, label: val.label,areaId:val.areaId });
+        this.changeSelectCity({
+          value: val.value,
+          label: val.label,
+          areaId: val.areaId
+        });
       } else if (level == 'district') {
-        this.changeSelectDistrict({ value: val.value, label: val.label,areaId:val.areaId });
+        this.changeSelectDistrict({
+          value: val.value,
+          label: val.label,
+          areaId: val.areaId
+        });
       } else if (level == 'street') {
-        this.changeSelectStreet({ value: val.value, label: val.label,areaId:val.areaId });
+        this.changeSelectStreet({
+          value: val.value,
+          label: val.label,
+          areaId: val.areaId
+        });
       }
+      console.log(val.value.substring(0, 6));
       this.parentId = val.value.substring(0, 6);
       this.name = level;
       this.$store.dispatch('searchArea', {
@@ -118,7 +194,7 @@ export default {
         mapLevel: level
       });
     },
-    provinceClick(){
+    provinceClick() {
       // console.log('provinceClick','provinceClick');
       this.$store.dispatch('searchArea', {
         parentId: '520000',
@@ -126,7 +202,7 @@ export default {
         mapLevel: 'province'
       });
     },
-    getSelectModel() {},
+    getSelectModel() {}
   }
 };
 </script>
@@ -140,9 +216,9 @@ export default {
   .select-wrap:not(:last-of-type) {
     margin-right: 10px;
   }
-  .select-province{
+  .select-province {
     position: relative;
-    &::after{
+    &::after {
       content: '';
       width: 100%;
       height: 100%;
@@ -153,12 +229,11 @@ export default {
       cursor: pointer;
     }
   }
-  
-  .select-province.select-wrap{
-    /deep/ .el-input__inner{
+
+  .select-province.select-wrap {
+    /deep/ .el-input__inner {
       cursor: pointer;
     }
-    
   }
   .el-select {
     width: 8vw;
@@ -171,21 +246,21 @@ export default {
       background-size: 100% 100%;
       border: none;
       &::-webkit-input-placeholder {
-        color:  var(--main-color);
+        color: var(--main-color);
       }
-      &:hover{
-        border-color:var(--main-color);
+      &:hover {
+        border-color: var(--main-color);
       }
     }
-    /deep/ .el-input__icon{
+    /deep/ .el-input__icon {
       color: var(--main-color);
     }
   }
 }
-@media only screen and (max-width : 1200px) {
-  .pickerAddr{
+@media only screen and (max-width: 1200px) {
+  .pickerAddr {
     font-size: 16px;
-    .el-select{
+    .el-select {
       /deep/ .el-input__inner {
         font-size: 16px;
       }

src/views/index.vue

@@ -1,5 +1,5 @@
 <!--
- * @LastEditors: gcz
+ * @LastEditors: wangcc
 -->
 <template>
   <div class>
@@ -823,12 +823,14 @@ export default {
       this.getPageData();
     },
     scrollBoardClick(e) {
+      console.log(e.row[0]);
       let param = {
         smallNumber: e.row[0],
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
         townId: this.$store.state.addr.selectStreet.areaId
       };
+      console.log(param);
       rightScrollData(param).then((res) => {
         this.changeSearchSmallClass(res.rows[0])
       });