增加vuex

package.json

@@ -17,7 +17,8 @@
     "element-china-area-data": "^5.0.2",
     "element-ui": "^2.15.9",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/map.vue

@@ -28,7 +28,12 @@ export default {
       map:null,
       lngLat:[106.628201,26.646694],
       zoom:9,
-      adcode:'0851',
+      adcode:'520000',
+      mapLevel:'province',
+      province:'',
+      cityList:[],//市
+      districtList:[],//区县
+      streetList:[],//街道,乡
     };
   },
   created() {
@@ -57,9 +62,13 @@ export default {
                 layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
                 // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
             });
-             this.$nextTick(()=>{
-                this.getMap(AMap);
-              })
+            this.$nextTick(()=>{
+              this.getMap(AMap);
+            })
+            // this.map.on('complete', () => {
+            //   console.log('map complete');
+            //   this.getMap(AMap);
+            // })
         }).catch(e=>{
             console.log(e);
         })
@@ -68,19 +77,29 @@ export default {
       let that = this;
       // console.log('AMap',AMap);
       AMap.plugin(['AMap.DistrictSearch'], function () {
-        console.log('1111');
+        // console.log('1111');
         // 创建行政区查询对象
         var district = new AMap.DistrictSearch({
           // 返回行政区边界坐标等具体信息
           extensions: 'all',
           // 设置查询行政区级别为 区 （district）
-          level: 'province',
+          level: that.mapLevel,
           //  显示下级行政区级数，1表示返回下一级行政区
           subdistrict: 1
         })
 
         district.search(that.adcode, function(status, result) {
-          // console.log('result',result);
+          console.log('result',result);
+          let districtList = result.districtList[0].districtList;
+          switch (that.mapLevel) {
+            case 'province':
+              console.log('province districtList',districtList);
+              break;
+          
+            default:
+              break;
+          }
+
           // console.log('result.districtList',result.districtList);
           if(!result.districtList){
             return
@@ -103,34 +122,31 @@ export default {
               // console.log('polygon',polygon);
               polygons.push(polygon)
             }
-            
-
-        //     //object3Dlayer可以看做一个容器,用来放多个3d对象
-        //     let object3Dlayer = new AMap.Object3DLayer();
-        //     //把object3Dlayer添加到map对象中
-        //     that.map.add(object3Dlayer);
-        //     var wall = new AMap.Object3D.Wall({
-        //       //版块边界线
-        //         path: bounds,
-        //         //墙的高度
-        //         height: 80000,
-        //         //墙的颜色
-        //         color: "#0dcdd1",
-        //     });
-        //     //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
-        //     wall.backOrFront = 'both';
-        //     // 是否允许使用透明颜色
-        //     wall.transparent = true;
-        // //将wall放到object3Dlayer中
-        //     object3Dlayer.add(wall);
-        //     console.log('object3Dlayer');
 
-            
             // 地图自适应
             that.map.setFitView()
-            console.log('AMap.Object3DLayer',AMap.Object3DLayer);
+            // console.log('AMap.Object3DLayer',AMap.Object3DLayer);
             AMap.plugin(['AMap.Object3DLayer','AMap.Object3D'], function () {
-              console.log('2222');
+              // console.log('2222');
+              //object3Dlayer可以看做一个容器,用来放多个3d对象
+              let object3Dlayer = new AMap.Object3DLayer();
+              //把object3Dlayer添加到map对象中
+              that.map.add(object3Dlayer);
+              var wall = new AMap.Object3D.Wall({
+                //版块边界线
+                  path: bounds,
+                  //墙的高度
+                  height: 80000,
+                  //墙的颜色
+                  color: "#0dcdd1",
+              });
+              //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
+              wall.backOrFront = 'both';
+              // 是否允许使用透明颜色
+              wall.transparent = true;
+          //将wall放到object3Dlayer中
+              object3Dlayer.add(wall);
+              console.log('object3Dlayer');
             })
             
           }

src/components/pickerAddr.vue

@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import {mapMutations, mapGetters} from 'vuex'
 export default {
   name: "",
   components: {},
@@ -75,8 +76,17 @@ export default {
       value: "",
     };
   },
-  created() {},
-  methods: {},
+  computed: {
+      // 引入getters中的计算属性，需要在 computed 中引入
+      ...mapGetters(['vuexCityList','vuexDistrictList','vuexStreetList'])
+  },
+  created() {
+    // console.log('this',this);
+    console.log('vuexCityList',this.vuexCityList);
+  },
+  methods: {
+    ...mapMutations(['changeCityList','changeDistrictList','changeStreetList']),
+  },
 };
 </script>
 

src/main.js

@@ -7,6 +7,8 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 
+import store from './store';
+
 import dataV from '@jiaminghi/data-view'
 
 // 引入全局样式文件
@@ -26,6 +28,7 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/store/addr/index.js

@@ -0,0 +1,37 @@
+/*
+ * @LastEditors: gcz
+ */
+const addr = {
+    state: {
+        vuexCityList: [],
+        vuexDistrictList: [],
+        vuexStreetList: [],
+    },
+    mutations: {
+        changeCityList(state, t) {
+            state.vuexCityList = t
+        },
+        changeDistrictList(state, n) {
+            state.vuexDistrictList = n
+        },
+        changeStreetList(state, n) {
+            state.vuexStreetList = n
+        },
+        // addGoods(state, g) {
+        //     state.goods.push(g)
+        // },
+        // delGoods(state, idx) {
+        //     state.goods.splice(idx, 1)
+        // }
+    },
+    actions: {
+        // add({ commit }, g) {
+        //     commit('addGoods', g)
+        // },
+        // del({ commit }, idx) {
+        //     commit('delGoods', idx)
+        // }
+    }
+}
+
+export default addr

src/store/getters.js

@@ -0,0 +1,12 @@
+/*
+ * @LastEditors: gcz
+ */
+const getters = {
+    // user: state => state.user.users,
+    // userLength: state => state.user.users.length,
+    vuexCityList: state => state.addr.vuexCityList,
+    vuexDistrictList: state => state.addr.vuexDistrictList,
+    vuexStreetList: state => state.addr.vuexStreetList,
+}
+
+export default getters

src/store/index.js

@@ -0,0 +1,17 @@
+/*
+ * @LastEditors: gcz
+ */
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import addr from './addr'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    addr
+  },
+  getters
+})

src/utils/request.js

@@ -40,7 +40,8 @@ export const callApi = ({
         const error = new Error('请传入url')
         return Promise.reject(error)
     }
-    const fullUrl = `/${prefixUrl}/${url}`
+    // const fullUrl = `/${prefixUrl}/${url}`
+    const fullUrl = `https://www.fastmock.site/mock/849a36d819c7df17b9a9e57c62a74a63/mock/${url}`
 
     const newOptions = {
         ...defaultOptions,
@@ -83,26 +84,29 @@ export const callApi = ({
     axios.interceptors.request.use((request) => {
         // 移除起始部分 / 所有请求url走相对路径
         request.url = request.url.replace(/^\//, '')
+        // console.log('prefixUrl', prefixUrl);
         return request
     })
 
     return axios({
         url: fullUrl,
         ...newOptions,
-    })
-        .then((response) => {
+    }).then((response) => {
+        console.log('response', response);
             const { data } = response
-            if (data.code === 'xxx') {
+        console.log('data.code', data.code);
+        if (data.code == 'xxx') {
                 // 与服务端约定
                 // 登录校验失败
-            } else if (data.code === 'xxx') {
+        } else if (data.code == 'xxx') {
                 // 与服务端约定
                 // 无权限
                 router.replace({ path: '/403' })
-            } else if (data.code === 'xxx') {
+        } else if (data.code == '200') {
                 // 与服务端约定
                 return Promise.resolve(data)
             } else {
+            console.log('4444');
                 const { message } = data
                 if (!errorMsgObj[message]) {
                     errorMsgObj[message] = message
@@ -110,8 +114,7 @@ export const callApi = ({
                 setTimeout(debounce(toastMsg, 1000, true), 1000)
                 return Promise.reject(data)
             }
-        })
-        .catch((error) => {
+    }).catch((error) => {
             console.log('error', error);
             if (error.response) {
                 const { data } = error.response

src/views/index.vue

@@ -8,7 +8,7 @@
     <Alarm :data="alarmData" />
     <section class="left-wrap blur-wrap">
       <Numerical :data="numerical01" />
-      <MyEcharts :option="option" height="30vh" />
+      <MyEcharts :option="page1Char1" height="30vh" />
       <MyEcharts :option="option" height="30vh" />
     </section>
     <section class="right-wrap">
@@ -96,6 +96,7 @@
           {msg:'测试1！'},
           {msg:'测试22222222！'},
         ],
+        page1Char1:{},
         option:{
             title: {
             text: '储蓄量统计(立方米)',
@@ -128,11 +129,11 @@
       };
     },
     created(){
-
       echarts01().then(res=>{
         console.log('res',res);
+        this.page1Char1 = res.data;
       }).catch(err=>{
-        console.log('echarts01',err);
+        console.log('echarts01 err',err);
       })
 
 

vue.config.js

@@ -2,9 +2,9 @@
  * @LastEditors: gcz
  */
 // vue.config.js
-const targetApi1 = process.env.NODE_ENV === 'development' ? "https://www.fastmock.site/mock/849a36d819c7df17b9a9e57c62a74a63/mock" : "http://www.ceshi1.com"
+const targetApi1 = process.env.NODE_ENV === 'development' ? "https://www.fastmock.site/mock/849a36d819c7df17b9a9e57c62a74a63/mock" : "http://www.ceshi1.com";
 
-const targetApi2 = process.env.NODE_ENV === 'development' ? "http://www.kaifa2.com" : "http://www.ceshi2.com"
+const targetApi2 = process.env.NODE_ENV === 'development' ? "http://www.kaifa2.com" : "http://www.ceshi2.com";
 module.exports = {
     devServer: {
         proxy: {
@@ -12,7 +12,7 @@ module.exports = {
                 target: targetApi1,
                 changeOrigin: true,
                 pathRewrite: {
-                    '/api1': ""
+                    "/api1": ""
                 }
             },
             '/api2': {