地址联动

src/components/pickerAddr.vue

@@ -36,7 +36,7 @@
         ></el-option>
       </el-select>
     </div>
-    <div class="select-wrap">
+    <div class="select-wrap" @change="cityChange($event,'street')">
       乡：
       <el-select v-model="selectStreet" placeholder="请选择" >
         <el-option
@@ -79,7 +79,10 @@ export default {
     },
     '$store.state.addr.selectDistrict'(val) {
       this.selectDistrict = val
-    }
+    },
+    '$store.state.addr.selectStreet'(val) {
+      this.selectStreet = val
+    },
   },
   computed: {
     // 引入getters中的计算属性，需要在 computed 中引入
@@ -99,10 +102,13 @@ export default {
       'changeSelectStreet'
     ]),
     cityChange(val, level) {
+      console.log('level',level);
       if (level == 'city') {
         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 });
+      } else if (level == 'street') {
+        this.changeSelectStreet({ value: val.value, label: val.label,areaId:val.areaId });
       }
       console.log(val);
       this.parentId = val.value.substring(0, 6);

src/service/index.js

@@ -93,11 +93,11 @@ export const page6echarts01 = (data) =>
         prefixUrl: 'api2',
     })
 
-// export const page6numerical = () =>
-//     callApi({
-//         url: 'event/statis',
-//         prefixUrl: 'api2',
-//     })
+export const page6numerical = () =>
+    callApi({
+        url: 'event/statis',
+        prefixUrl: 'api2',
+    })
 
 // 树种
 export const page2echarts01 = (data) =>

src/store/addr/index.js

@@ -63,10 +63,17 @@ const addr = {
       console.log('searchArea', params)
       searchApi({ parentId: params.parentId }).then(res => {
         if (params.mapLevel == "city") {
+          console.log('111');
           commit("changeDistrictList", res.data);
+
+          commit("changeSelectDistrict", {});
+          commit("changeSelectStreet", {});
         } else if (params.mapLevel == "district") {
+          console.log('222');
           commit("changeStreetList", res.data);
+          commit("changeSelectStreet", {});
         } else {
+          console.log('333');
           commit("changeCityList", res.data);
         }
         commit("changeParentId", params)

src/views/index.vue

@@ -169,20 +169,20 @@
           }
       },
       '$store.state.addr.selectCity'(val) {
-        console.log('this.$store.state.addr',this.$store.state.addr);
-        console.log('vuexSelectCity',val);
+        // console.log('this.$store.state.addr',this.$store.state.addr);
+        // console.log('vuexSelectCity',val);
         this.getPageData();
          
       },
       '$store.state.addr.selectDistrict'(val) {
-        console.log('this.$store.state.addr',this.$store.state.addr);
-        console.log('vuexSelectDistrict',val);
+        // console.log('this.$store.state.addr',this.$store.state.addr);
+        // console.log('vuexSelectDistrict',val);
         this.getPageData();
          
       },
       '$store.state.addr.selectStreet'(val) {
-        console.log('this.$store.state.addr',this.$store.state.addr);
-        console.log('vuexSelectStreet',val);
+        // console.log('this.$store.state.addr',this.$store.state.addr);
+        // console.log('vuexSelectStreet',val);
         this.getPageData();
          
       },
@@ -241,7 +241,7 @@
           countyId:this.$store.state.addr.selectDistrict.areaId,
           townId:this.$store.state.addr.vuexSelectStreet.areaId,
         }
-        console.log('cityId',param.cityId);
+        // console.log('cityId',param.cityId);
         page1echarts01(param).then(res=>{
           this.page1Char1.xAxis.data = res.data.map(item => {
             return item.name
@@ -261,7 +261,7 @@
           countyId:this.$store.state.addr.selectDistrict.areaId,
           townId:this.$store.state.addr.selectStreet.areaId,
         }
-        console.log('cityId',param.cityId);
+        // console.log('cityId',param.cityId);
         page1echarts02(param).then(res=>{
           this.page1Char2.xAxis.data = res.data.map(item => {
             return item.name