auto

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@jiaminghi/data-view": "^2.10.0",
+    "axios": "^0.27.2",
     "echarts": "^5.3.2",
     "element-china-area-data": "^5.0.2",
     "element-ui": "^2.15.9",

src/components/map.vue

@@ -42,26 +42,29 @@ export default {
   },
   methods: {
     initMap() {
+      window._AMapSecurityConfig = {
+        securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57',  // 密钥
+      };
       AMapLoader.load({
             key:"58f9d9f14f2700689ddbc618495693b7",             // 申请好的Web端开发者Key，首次调用 load 时必填
-            // version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-            plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+            version:"1.4.15",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+            // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         }).then((AMap)=>{
             this.map = new AMap.Map("container",{  //设置地图容器id
-                // viewMode:"3D",    //是否为3D地图模式
+                viewMode:"3D",    //是否为3D地图模式
                 zoom:this.zoom,           //初始化地图级别
                 center:this.lngLat, //初始化地图中心点位置
                 layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
                 // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
             });
              this.$nextTick(()=>{
-                this.getMap();
+                this.getMap(AMap);
               })
         }).catch(e=>{
             console.log(e);
         })
     },
-    getMap() {
+    getMap(AMap) {
       let that = this;
       // console.log('AMap',AMap);
       AMap.plugin(['AMap.DistrictSearch'], function () {
@@ -77,8 +80,8 @@ export default {
         })
 
         district.search(that.adcode, function(status, result) {
-          console.log('result',result);
-          console.log('result.districtList',result.districtList);
+          // console.log('result',result);
+          // console.log('result.districtList',result.districtList);
           if(!result.districtList){
             return
           }
@@ -97,38 +100,44 @@ export default {
                 fillColor: '#CCF3FF',
                 strokeColor: '#CC66CC'
               })
-              console.log('polygon',polygon);
+              // 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');
+        //     //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);
+            AMap.plugin(['AMap.Object3DLayer','AMap.Object3D'], function () {
+              console.log('2222');
+            })
+            
           }
         })
         
       })
+
     },
   },
 };

src/main.js

@@ -12,7 +12,7 @@ import dataV from '@jiaminghi/data-view'
 // 引入全局样式文件
 import '@/assets/scss/index.scss'
 
-import { Select,Option, Cascader } from 'element-ui';
+import { Select, Option, Cascader } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(Select);
 Vue.use(Option);

src/service/index.js

@@ -0,0 +1,26 @@
+import { callApi } from '../utils/request'
+
+export * from './mock'
+
+// get请求带参数
+
+export const getQuery = (data) =>
+    callApi({
+        url: 'admin/getQuery',
+        data,
+    })
+
+// export const postDel = (data) =>
+//     callApi({
+//         url: 'admin/postDel',
+//         data,
+//         method: 'post',
+//     })
+
+// export const postAdd = (data) =>
+//     callApi({
+//         url: 'admin/postAdd',
+//         data,
+//         method: 'post',
+//         contentType: 'urlencoded',
+//     })

src/service/mock.js

@@ -0,0 +1,27 @@
+/*
+ * @LastEditors: gcz
+ */
+import { callApi } from '../utils/request'
+
+export const echarts01 = () =>
+    callApi({
+        url: 'echarts01',
+        prefixUrl: 'api1',
+    })
+
+export const mockPostDel = (data) =>
+    callApi({
+        url: 'mock/postDel',
+        data,
+        method: 'post',
+        prefixUrl: 'api1',
+    })
+
+export const mockPostAdd = (data) =>
+    callApi({
+        url: 'mock/postAdd',
+        data,
+        method: 'post',
+        contentType: 'urlencoded',
+        prefixUrl: 'api1',
+    })

src/utils/debounce.js

@@ -0,0 +1,22 @@
+// src/utils/debounce.js
+export const debounce = (func, timeout, immediate) => {
+    let timer
+
+    return function () {
+        let context = this
+        let args = arguments
+
+        if (timer) clearTimeout(timer)
+        if (immediate) {
+            var callNow = !timer
+            timer = setTimeout(() => {
+                timer = null
+            }, timeout)
+            if (callNow) func.apply(context, args)
+        } else {
+            timer = setTimeout(function () {
+                func.apply(context, args)
+            }, timeout)
+        }
+    }
+}

src/utils/request.js

@@ -0,0 +1,137 @@
+// src/utils/request.js
+import axios from 'axios'
+import qs from 'qs'
+import { debounce } from './debounce'
+import { Message } from 'element-ui';
+
+const contentTypes = {
+    json: 'application/json; charset=utf-8',
+    urlencoded: 'application/x-www-form-urlencoded; charset=utf-8',
+    multipart: 'multipart/form-data',
+}
+
+function toastMsg() {
+    Object.keys(errorMsgObj).map((item) => {
+        Message.error(item)
+        delete errorMsgObj[item]
+    })
+}
+
+let errorMsgObj = {}
+
+const defaultOptions = {
+    withCredentials: true, // 允许把cookie传递到后台
+    headers: {
+        Accept: 'application/json',
+        'Content-Type': contentTypes.json,
+    },
+    timeout: 15000,
+}
+
+export const callApi = ({
+    url,
+    data = {},
+    method = 'get',
+    options = {},
+    contentType = 'json', // json || urlencoded || multipart
+    prefixUrl = 'api',
+}) => {
+    if (!url) {
+        const error = new Error('请传入url')
+        return Promise.reject(error)
+    }
+    const fullUrl = `/${prefixUrl}/${url}`
+
+    const newOptions = {
+        ...defaultOptions,
+        ...options,
+        headers: {
+            'Content-Type':
+                (options.headers && options.headers['Content-Type']) ||
+                contentTypes[contentType],
+        },
+        method,
+    }
+    if (method === 'get') {
+        newOptions.params = data
+    }
+
+    if (method !== 'get' && method !== 'head') {
+        newOptions.data = data
+        if (data instanceof FormData) {
+            newOptions.headers = {
+                'x-requested-with': 'XMLHttpRequest',
+                'cache-control': 'no-cache',
+            }
+        } else if (newOptions.headers['Content-Type'] === contentTypes.urlencoded) {
+            newOptions.data = qs.stringify(data)
+        } else {
+            Object.keys(data).forEach((item) => {
+                if (
+                    data[item] === null ||
+                    data[item] === undefined ||
+                    data[item] === ''
+                ) {
+                    delete data[item]
+                }
+            })
+            // 没有必要，因为axios会将JavaScript对象序列化为JSON
+            // newOptions.data = JSON.stringify(data);
+        }
+    }
+
+    axios.interceptors.request.use((request) => {
+        // 移除起始部分 / 所有请求url走相对路径
+        request.url = request.url.replace(/^\//, '')
+        return request
+    })
+
+    return axios({
+        url: fullUrl,
+        ...newOptions,
+    })
+        .then((response) => {
+            const { data } = response
+            if (data.code === 'xxx') {
+                // 与服务端约定
+                // 登录校验失败
+            } else if (data.code === 'xxx') {
+                // 与服务端约定
+                // 无权限
+                router.replace({ path: '/403' })
+            } else if (data.code === 'xxx') {
+                // 与服务端约定
+                return Promise.resolve(data)
+            } else {
+                const { message } = data
+                if (!errorMsgObj[message]) {
+                    errorMsgObj[message] = message
+                }
+                setTimeout(debounce(toastMsg, 1000, true), 1000)
+                return Promise.reject(data)
+            }
+        })
+        .catch((error) => {
+            console.log('error', error);
+            if (error.response) {
+                const { data } = error.response
+                const resCode = data.status
+                const resMsg = data.message || error.message || '服务异常'
+                // if (resCode === 401) { // 与服务端约定
+                //     // 登录校验失败
+                // } else if (data.code === 403) { // 与服务端约定
+                //     // 无权限
+                //     router.replace({ path: '/403' })
+                // }
+                if (!errorMsgObj[resMsg]) {
+                    errorMsgObj[resMsg] = resMsg
+                }
+                setTimeout(debounce(toastMsg, 1000, true), 1000)
+                const err = { code: resCode, respMsg: resMsg }
+                return Promise.reject(err)
+            } else {
+                const err = { type: 'canceled', respMsg: '数据请求超时' }
+                return Promise.reject(err)
+            }
+        })
+}

src/views/index.vue

@@ -41,6 +41,8 @@
   import Alarm from "../components/alarm";
   import PickerAddr from "../components/pickerAddr";
 
+  import {getQuery,echarts01} from "../service/index"
+
   import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
   
   export default {
@@ -125,7 +127,18 @@
         }
       };
     },
-    created(){},
+    created(){
+
+      echarts01().then(res=>{
+        console.log('res',res);
+      }).catch(err=>{
+        console.log('echarts01',err);
+      })
+
+
+    //  let a =  echarts01();
+    //  console.log('a',a);
+    },
     mounted(){
       
     },

vue.config.js

@@ -0,0 +1,27 @@
+/*
+ * @LastEditors: gcz
+ */
+// vue.config.js
+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"
+module.exports = {
+    devServer: {
+        proxy: {
+            '/api1': {
+                target: targetApi1,
+                changeOrigin: true,
+                pathRewrite: {
+                    '/api1': ""
+                }
+            },
+            '/api2': {
+                target: targetApi2,
+                changeOrigin: true,
+                pathRewrite: {
+                    '/api2': ""
+                }
+            },
+        }
+    }
+}