feat: 添加mock，完成高德地图组件

mock/map.ts

@@ -0,0 +1,28 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+// http://mockjs.com/examples.html#Object
+const mapList = (): any => {
+  const result: any[] = []
+  for (let index = 0; index < 200; index++) {
+    result.push({
+      plateNumber: "豫A@natural(11111, 99999)@character('upper')",
+      driver: '@cname()',
+      "lng|113-114.1-10": 1,
+      "lat|34-35.1-10": 1
+    })
+  }
+  return result
+}
+
+export default [
+  {
+    url: '/getMapInfo',
+    method: 'get',
+    response: () => {
+      return {
+        code: 0,
+        info: mapList()
+      }
+    },
+  }
+] as MockMethod[]

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "http://192.168.250.101:4873/@amap%2famap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha1-nsS01dJGfqxFH2yFLjXbaen58MA="
+    },
     "@babel/helper-validator-identifier": {
       "version": "7.12.11",
       "resolved": "http://192.168.250.101:4873/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
@@ -65,11 +70,82 @@
       "resolved": "http://192.168.250.101:4873/@intlify%2fshared/-/shared-9.0.0.tgz",
       "integrity": "sha1-2Fs7X5Az83fFzyICzyRZqkmUjzY="
     },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "http://192.168.250.101:4873/@nodelib%2ffs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha1-1LNUml213iaD4MEHGrTxQJBLv2k=",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "http://192.168.250.101:4873/@nodelib%2ffs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha1-o/LdYbq0O424+hCKEhz//kxnZlU=",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "http://192.168.250.101:4873/@nodelib%2ffs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha1-zOk5azCqWv6eN1Zgj1gxrctT0GM=",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
+      }
+    },
     "@popperjs/core": {
       "version": "2.9.1",
       "resolved": "http://192.168.250.101:4873/@popperjs%2fcore/-/core-2.9.1.tgz",
       "integrity": "sha1-f1VOc2jJq2eaEfSgQsoXFJ1wzxI="
     },
+    "@rollup/plugin-node-resolve": {
+      "version": "11.2.1",
+      "resolved": "http://192.168.250.101:4873/@rollup%2fplugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha1-gqpZOXopzU4TJIsQbmpKGIA2KmA=",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "http://192.168.250.101:4873/@rollup%2fpluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha1-cGtFJO5tyLEDs8mVUz5a1oDAK5s=",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "http://192.168.250.101:4873/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha1-MbxdYSyWtwQQa0d+bdXYqhOMtwA=",
+          "dev": true
+        }
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "http://192.168.250.101:4873/@types%2festree/-/estree-0.0.39.tgz",
+      "integrity": "sha1-4Xfmme4bjCLSMXTKqnQiZEOJUJ8=",
+      "dev": true
+    },
+    "@types/mockjs": {
+      "version": "1.0.3",
+      "resolved": "http://192.168.250.101:4873/@types%2fmockjs/-/mockjs-1.0.3.tgz",
+      "integrity": "sha1-vY7jx8u9mhh4irZ3ueT5fI0LsL8=",
+      "dev": true
+    },
     "@types/node": {
       "version": "14.14.14",
       "resolved": "http://192.168.250.101:4873/@types%2fnode/-/node-14.14.14.tgz",
@@ -79,7 +155,17 @@
     "@types/nprogress": {
       "version": "0.2.0",
       "resolved": "http://192.168.250.101:4873/@types%2fnprogress/-/nprogress-0.2.0.tgz",
-      "integrity": "sha1-hsWTaC1BmSEqBQnMPE1WK7vW5F8="
+      "integrity": "sha1-hsWTaC1BmSEqBQnMPE1WK7vW5F8=",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "http://192.168.250.101:4873/@types%2fresolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha1-Ov1q2JZ8d+Q3bFmKgt3Vj0bsRdY=",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
     },
     "@vitejs/plugin-vue": {
       "version": "1.1.4",
@@ -312,6 +398,12 @@
         "node-releases": "^1.1.70"
       }
     },
+    "builtin-modules": {
+      "version": "3.2.0",
+      "resolved": "http://192.168.250.101:4873/builtin-modules/-/builtin-modules-3.2.0.tgz",
+      "integrity": "sha1-RdXbmefuXmvE82LgCL+RerUEmIc=",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30001191",
       "resolved": "http://192.168.250.101:4873/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz",
@@ -368,6 +460,29 @@
       "resolved": "http://192.168.250.101:4873/commander/-/commander-2.20.3.tgz",
       "integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM="
     },
+    "connect": {
+      "version": "3.7.0",
+      "resolved": "http://192.168.250.101:4873/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha1-XUk0iRDKpeB6AYALAw0MNfIEhPg=",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "~1.3.3",
+        "utils-merge": "1.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "http://192.168.250.101:4873/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
     "consolidate": {
       "version": "0.16.0",
       "resolved": "http://192.168.250.101:4873/consolidate/-/consolidate-0.16.0.tgz",
@@ -410,6 +525,29 @@
       "resolved": "http://192.168.250.101:4873/dayjs/-/dayjs-1.10.4.tgz",
       "integrity": "sha1-jlRKm4aD9heD9XCYCoqA6vVKseI="
     },
+    "debug": {
+      "version": "4.3.2",
+      "resolved": "http://192.168.250.101:4873/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha1-8KScGKyHeeMdSgxgKd+3aHPHQos=",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "http://192.168.250.101:4873/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
+          "dev": true
+        }
+      }
+    },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "http://192.168.250.101:4873/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
+      "dev": true
+    },
     "dotenv": {
       "version": "8.2.0",
       "resolved": "http://192.168.250.101:4873/dotenv/-/dotenv-8.2.0.tgz",
@@ -429,6 +567,12 @@
         "unidragger": "^2.3.0"
       }
     },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "http://192.168.250.101:4873/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.3.673",
       "resolved": "http://192.168.250.101:4873/electron-to-chromium/-/electron-to-chromium-1.3.673.tgz",
@@ -455,6 +599,12 @@
       "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
       "dev": true
     },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "http://192.168.250.101:4873/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "dev": true
+    },
     "es5-ext": {
       "version": "0.10.53",
       "resolved": "http://192.168.250.101:4873/es5-ext/-/es5-ext-0.10.53.tgz",
@@ -496,6 +646,12 @@
       "integrity": "sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA=",
       "dev": true
     },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "http://192.168.250.101:4873/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "http://192.168.250.101:4873/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -535,6 +691,29 @@
         }
       }
     },
+    "fast-glob": {
+      "version": "3.2.5",
+      "resolved": "http://192.168.250.101:4873/fast-glob/-/fast-glob-3.2.5.tgz",
+      "integrity": "sha1-eTmvKmVt55pPGQGQPuityqfLlmE=",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
+    "fastq": {
+      "version": "1.11.0",
+      "resolved": "http://192.168.250.101:4873/fastq/-/fastq-1.11.0.tgz",
+      "integrity": "sha1-u5+5VaBxMKkY62PB9RYcwypdCFg=",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "http://192.168.250.101:4873/fill-range/-/fill-range-7.0.1.tgz",
@@ -544,6 +723,32 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "http://192.168.250.101:4873/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha1-t+fQAP/RGTjQ/bBTUG9uur6fWH0=",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "http://192.168.250.101:4873/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
     "follow-redirects": {
       "version": "1.13.2",
       "resolved": "http://192.168.250.101:4873/follow-redirects/-/follow-redirects-1.13.2.tgz",
@@ -667,12 +872,24 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "http://192.168.250.101:4873/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "http://192.168.250.101:4873/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
       "dev": true
     },
+    "joycon": {
+      "version": "3.0.1",
+      "resolved": "http://192.168.250.101:4873/joycon/-/joycon-3.0.1.tgz",
+      "integrity": "sha1-kHTJsIzPN6Zyb/dKGEhfhe/K3a8=",
+      "dev": true
+    },
     "json5": {
       "version": "1.0.1",
       "resolved": "http://192.168.250.101:4873/json5/-/json5-1.0.1.tgz",
@@ -682,6 +899,12 @@
         "minimist": "^1.2.0"
       }
     },
+    "jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "http://192.168.250.101:4873/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha1-q914VwHH5+rKip7IzwcMpRp0WiI=",
+      "dev": true
+    },
     "klona": {
       "version": "2.0.4",
       "resolved": "http://192.168.250.101:4873/klona/-/klona-2.0.4.tgz",
@@ -737,6 +960,22 @@
         "source-map": "^0.6.1"
       }
     },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "http://192.168.250.101:4873/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4=",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.2",
+      "resolved": "http://192.168.250.101:4873/micromatch/-/micromatch-4.0.2.tgz",
+      "integrity": "sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.0.5"
+      }
+    },
     "minimist": {
       "version": "1.2.5",
       "resolved": "http://192.168.250.101:4873/minimist/-/minimist-1.2.5.tgz",
@@ -748,6 +987,20 @@
       "resolved": "http://192.168.250.101:4873/mitt/-/mitt-2.1.0.tgz",
       "integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA="
     },
+    "mockjs": {
+      "version": "1.1.0",
+      "resolved": "http://192.168.250.101:4873/mockjs/-/mockjs-1.1.0.tgz",
+      "integrity": "sha1-5qDDeOkZBtuv8gkRzAJzs8fXWwY=",
+      "requires": {
+        "commander": "*"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "http://192.168.250.101:4873/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
     "nanoid": {
       "version": "3.1.20",
       "resolved": "http://192.168.250.101:4873/nanoid/-/nanoid-3.1.20.tgz",
@@ -793,6 +1046,21 @@
       "resolved": "http://192.168.250.101:4873/nprogress/-/nprogress-0.2.0.tgz",
       "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
     },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "http://192.168.250.101:4873/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dev": true,
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "http://192.168.250.101:4873/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=",
+      "dev": true
+    },
     "path": {
       "version": "0.12.7",
       "resolved": "http://192.168.250.101:4873/path/-/path-0.12.7.tgz",
@@ -921,6 +1189,12 @@
       "resolved": "http://192.168.250.101:4873/process/-/process-0.11.10.tgz",
       "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "http://192.168.250.101:4873/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha1-SSkii7xyTfrEPg77BYyve2z7YkM=",
+      "dev": true
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "http://192.168.250.101:4873/read-cache/-/read-cache-1.0.0.tgz",
@@ -954,6 +1228,12 @@
         "path-parse": "^1.0.6"
       }
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "http://192.168.250.101:4873/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha1-kNo4Kx4SbvwCFG6QhFqI2xKSXXY=",
+      "dev": true
+    },
     "rollup": {
       "version": "2.42.3",
       "resolved": "http://192.168.250.101:4873/rollup/-/rollup-2.42.3.tgz",
@@ -963,6 +1243,38 @@
         "fsevents": "~2.3.1"
       }
     },
+    "rollup-plugin-esbuild": {
+      "version": "3.0.2",
+      "resolved": "http://192.168.250.101:4873/rollup-plugin-esbuild/-/rollup-plugin-esbuild-3.0.2.tgz",
+      "integrity": "sha1-haGv1ZUQ7xQ4E7RvUV6SpJd5pgs=",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^4.1.0",
+        "joycon": "^3.0.0",
+        "jsonc-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "4.1.0",
+          "resolved": "http://192.168.250.101:4873/@rollup%2fpluginutils/-/pluginutils-4.1.0.tgz",
+          "integrity": "sha1-Dcxhx4DjkldVT+t/dyB9zsoTyDg=",
+          "dev": true,
+          "requires": {
+            "estree-walker": "^2.0.1",
+            "picomatch": "^2.2.2"
+          }
+        }
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "http://192.168.250.101:4873/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha1-ZtE2jae9+SHrnZW9GpIp5/IaQ+4=",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "sass": {
       "version": "1.32.8",
       "resolved": "http://192.168.250.101:4873/sass/-/sass-1.32.8.tgz",
@@ -1003,6 +1315,12 @@
       "integrity": "sha1-6oBL2UhXQC5pktBaOO8a41qatMQ=",
       "dev": true
     },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "http://192.168.250.101:4873/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "dev": true
+    },
     "string-hash": {
       "version": "1.1.3",
       "resolved": "http://192.168.250.101:4873/string-hash/-/string-hash-1.1.3.tgz",
@@ -1064,6 +1382,12 @@
       "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
       "dev": true
     },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "http://192.168.250.101:4873/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "dev": true
+    },
     "util": {
       "version": "0.10.4",
       "resolved": "http://192.168.250.101:4873/util/-/util-0.10.4.tgz",
@@ -1078,6 +1402,12 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "http://192.168.250.101:4873/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "dev": true
+    },
     "v-contextmenu": {
       "version": "3.0.0-alpha.4",
       "resolved": "http://192.168.250.101:4873/v-contextmenu/-/v-contextmenu-3.0.0-alpha.4.tgz",
@@ -1096,6 +1426,91 @@
         "rollup": "^2.38.5"
       }
     },
+    "vite-plugin-mock": {
+      "version": "2.4.0",
+      "resolved": "http://192.168.250.101:4873/vite-plugin-mock/-/vite-plugin-mock-2.4.0.tgz",
+      "integrity": "sha1-QaceQMRVfRBS6UudFr22xe+neac=",
+      "dev": true,
+      "requires": {
+        "@rollup/plugin-node-resolve": "^11.2.0",
+        "@types/mockjs": "^1.0.3",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.5.1",
+        "connect": "^3.7.0",
+        "debug": "^4.3.2",
+        "esbuild": "^0.9.7",
+        "fast-glob": "^3.2.5",
+        "path-to-regexp": "^6.2.0",
+        "rollup": "^2.42.4",
+        "rollup-plugin-esbuild": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "http://192.168.250.101:4873/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "http://192.168.250.101:4873/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "http://192.168.250.101:4873/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "http://192.168.250.101:4873/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true
+        },
+        "esbuild": {
+          "version": "0.9.7",
+          "resolved": "http://192.168.250.101:4873/esbuild/-/esbuild-0.9.7.tgz",
+          "integrity": "sha1-6g1jnL5LiOwl++1Nb/AMjXiO9ws=",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "http://192.168.250.101:4873/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true
+        },
+        "rollup": {
+          "version": "2.43.1",
+          "resolved": "http://192.168.250.101:4873/rollup/-/rollup-2.43.1.tgz",
+          "integrity": "sha1-nlySCMIBHeInrGyTEB4R3BLojgQ=",
+          "dev": true,
+          "requires": {
+            "fsevents": "~2.3.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "http://192.168.250.101:4873/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue": {
       "version": "3.0.7",
       "resolved": "http://192.168.250.101:4873/vue/-/vue-3.0.7.tgz",

package.json

@@ -7,12 +7,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@types/nprogress": "^0.2.0",
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "await-to-js": "^2.1.1",
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
     "element-plus": "^1.0.2-beta.35",
     "mitt": "^2.1.0",
+    "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "path-to-regexp": "^6.2.0",
@@ -29,7 +30,9 @@
     "xgplayer": "^2.18.3"
   },
   "devDependencies": {
+    "@types/mockjs": "^1.0.3",
     "@types/node": "^14.14.14",
+    "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^1.1.4",
     "@vue/compiler-sfc": "^3.0.6",
     "autoprefixer": "^10.2.4",
@@ -39,6 +42,7 @@
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "typescript": "^4.2.2",
-    "vite": "^2.1.2"
+    "vite": "^2.1.2",
+    "vite-plugin-mock": "^2.4.0"
   }
 }

src/api/map.ts

@@ -0,0 +1,6 @@
+
+import { http } from "../utils/http"
+
+export const mapJson = (data?: object): any => {
+  return http.request("get", "/getMapInfo", data)
+}

src/components/breadCrumb/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import * as pathToRegexp from "path-to-regexp";
+import { pathToRegexp } from "path-to-regexp";
 import { ref, defineComponent, watch, Ref } from "vue";
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
 

src/components/info/index.vue

@@ -110,11 +110,6 @@ export default defineComponent({
       ],
     });
 
-    onBeforeMount(() => {
-      vm = getCurrentInstance(); //获取组件实例
-      console.log('vm: ', vm.appContext.config.globalProperties.$config);
-    });
-
     // 点击登录或注册
     const onBehavior = (evt: Object): void => {
       vm.refs.ruleForm.validate((valid: Boolean) => {

src/components/map/amap.vue

@@ -1,19 +1,158 @@
 <template>
-  <div>
-
-  </div>
+  <div
+    id="mapview"
+    ref="mapview"
+    v-loading="loading"
+    element-loading-text="地图加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  ></div>
 </template>
 
 <script lang='ts'>
-export default {
-  setup(){
-    return{
+import AMapLoader from "@amap/amap-jsapi-loader";
+import {
+  reactive,
+  toRefs,
+  defineComponent,
+  onBeforeMount,
+  getCurrentInstance,
+} from "vue";
 
-    }
-  },
+import { mapJson } from "../../api/map";
+import greenCar from "/@/assets/green.png";
+
+let MarkerCluster = null;
+
+export interface MapConfigureInter {
+  on: any;
+  destroy?: any;
+  clearEvents?: any;
+  plugin?: any;
+  addControl?: any;
+  setCenter?: any;
+  setZoom?: any;
 }
-</script>
 
-<style scoped>
+export interface mapInter {
+  loading: boolean;
+}
+
+export default defineComponent({
+  setup() {
+    let vm: any;
+    let map: MapConfigureInter;
+
+    const mapSet: mapInter = reactive({
+      loading: true,
+    });
+
+    // 地图创建完成(动画关闭)
+    const complete = (): void => {
+      if (map) {
+        map.on("complete", () => {
+          mapSet.loading = false;
+        });
+      }
+    };
+
+    // 销毁地图实例
+    const destroyMap = (): void => {
+      if (map) {
+        map.destroy() && map.clearEvents("click");
+      }
+    };
+
+    onBeforeMount(() => {
+      vm = getCurrentInstance(); //获取组件实例
+      if (!vm) return;
+      let {
+        MapConfigure,
+        options,
+      } = vm.appContext.config.globalProperties.$config;
 
+      AMapLoader.load({
+        key: MapConfigure.amapKey,
+        version: "2.0",
+        plugins: ["AMap.MarkerCluster"],
+      })
+        .then((AMap) => {
+          // 创建地图实例
+          map = new AMap.Map(vm.refs.mapview, {
+            options,
+          });
+
+          //地图中添加地图操作ToolBar插件
+          map.plugin(["AMap.ToolBar", "AMap.MapType"], () => {
+            map.addControl(new AMap.ToolBar());
+            //地图类型切换
+            map.addControl(
+              new AMap.MapType({
+                defaultType: 0,
+              })
+            );
+          });
+
+          MarkerCluster = new AMap.MarkerCluster(map, [], {
+            gridSize: 80, // 聚合网格像素大小
+            maxZoom: 14,
+            renderMarker(ctx) {
+              let { marker, data } = ctx;
+              if (Array.isArray(data) && data[0]) {
+                var { driver, plateNumber } = data[0];
+                var content = `<img src='${greenCar}' />`;
+                marker.setContent(content);
+                marker.setLabel({
+                  direction: "bottom",
+                  offset: new AMap.Pixel(-4, 0), //设置文本标注偏移量
+                  content: `<div> ${plateNumber}(${driver})</div>`, //设置文本标注内容
+                });
+                marker.setOffset(new AMap.Pixel(-18, -10));
+                marker.on("click", ({ lnglat }) => {
+                  map.setZoom(13); //设置地图层级
+                  map.setCenter(lnglat);
+                });
+              }
+            },
+          });
+
+          // 获取模拟车辆信息
+          mapJson()
+            .then((res) => {
+              let points: object = res.info.map((v: any) => {
+                return {
+                  lnglat: [v.lng, v.lat],
+                  ...v,
+                };
+              });
+              if (MarkerCluster) MarkerCluster.setData(points);
+            })
+            .catch((err) => {
+              console.log("err:", err);
+            });
+
+          complete();
+        })
+        .catch((err) => {
+          throw "地图加载失败，请重新加载";
+        });
+    });
+
+    return {
+      ...toRefs(mapSet),
+      complete,
+      destroyMap,
+      greenCar,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+#mapview {
+  height: 100%;
+}
+:deep(.amap-marker-label) {
+  border: none !important;
+}
 </style>

src/mockProdServer.ts

@@ -0,0 +1,8 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+import mapMock from '../mock/map'
+
+export const mockModules = [...mapMock]
+
+export function setupProdMockServer() {
+  createProdMockServer(mockModules)
+}

src/views/components/map/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <div>
-
+  <div class="map">
+    <amap />
   </div>
 </template>
 
 <script lang='ts'>
+import amap from "../../../components/map/amap.vue";
 export default {
+  components: {
+    amap
+  },
   setup(){
     return{
 
@@ -15,5 +19,8 @@ export default {
 </script>
 
 <style scoped>
-
+.map {
+  width: 100%;
+  height: 89vh;
+}
 </style>

src/views/login.vue

@@ -10,11 +10,8 @@
 
 <script lang="ts">
 import {
-  ref,
   reactive,
-  onMounted,
   onBeforeMount,
-  getCurrentInstance,
 } from "vue";
 import info, { ContextProps } from "../components/info/index.vue";
 import { getVerify, getLogin } from "../api/user";

vite.config.ts

@@ -1,11 +1,12 @@
 
 import { resolve } from 'path'
+import { UserConfigExport, ConfigEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import type { UserConfig } from 'vite'
 import { loadEnv } from './build/utils'
 import { createProxy } from './build/proxy'
+import { viteMockServe } from 'vite-plugin-mock'
 
-const pathResolve = (dir: string): any =>  {
+const pathResolve = (dir: string): any => {
   return resolve(__dirname, '.', dir)
 }
 
@@ -18,36 +19,47 @@ const alias: Record<string, string> = {
 
 const root: string = process.cwd()
 
-const viteConfig: UserConfig = {
-  /**
-   * 基本公共路径
-   * @default '/'
-   */
-  base: process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
-  root,
-  resolve: {
-    alias
-  },
-  // 服务端渲染
-  server: {
-    // 是否开启 https
-    https: false,
+export default ({ command }: ConfigEnv): UserConfigExport => {
+  let prodMock = true
+  return {
     /**
-     * 端口号
-     * @default 3000
+     * 基本公共路径
+     * @default '/'
      */
-    port: VITE_PORT,
-    // 本地跨域代理
-    proxy: createProxy(VITE_PROXY)
-  },
-  plugins: [
-    vue(),
-  ],
-  build: {
-    brotliSize: false,
-    // 消除打包大小超过500kb警告
-    chunkSizeWarningLimit: 800
+    base: process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
+    root,
+    resolve: {
+      alias
+    },
+    // 服务端渲染
+    server: {
+      // 是否开启 https
+      https: false,
+      /**
+       * 端口号
+       * @default 3000
+       */
+      port: VITE_PORT,
+      // 本地跨域代理
+      proxy: createProxy(VITE_PROXY)
+    },
+    plugins: [
+      vue(),
+      viteMockServe({
+        mockPath: 'mock',
+        localEnabled: command === 'serve',
+        prodEnabled: command !== 'serve' && prodMock,
+        injectCode: `
+          import { setupProdMockServer } from './mockProdServer';
+          setupProdMockServer();
+        `,
+        logger: true,
+      }),
+    ],
+    build: {
+      brotliSize: false,
+      // 消除打包大小超过500kb警告
+      chunkSizeWarningLimit: 800
+    }
   }
-}
-
-export default viteConfig
+}