改成从接口拿全部数据，从input组件输入路径数据

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-unused-vars': 'off'
+    'no-unused-vars': 'off',
+    'no-unreachable': 'off'
   }
 }

package-lock.json

@@ -8,8 +8,10 @@
       "name": "app",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.24.0",
         "core-js": "^3.6.5",
         "d3": "^7.3.0",
+        "element-plus": "^1.3.0-beta.5",
         "vue": "^3.0.0"
       },
       "devDependencies": {
@@ -1768,6 +1770,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.4.tgz",
+      "integrity": "sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmmirror.com/@hapi/address/download/@hapi/address-2.1.4.tgz",
@@ -1851,6 +1869,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.1.tgz?cache=0&sync_timestamp=1636965503646&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.1.tgz",
@@ -2798,6 +2825,78 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.5.3.tgz",
+      "integrity": "sha512-D9j5ymHFMFRXQqCp0yZJkf/bvBGiz0MrKUa364p+L8dMyd5zyq2K1JmHyvoBd4xbTFRfmQ1h878u6YE5LCkDVQ==",
+      "dependencies": {
+        "@vueuse/shared": "7.5.3",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.3.tgz",
+      "integrity": "sha512-BJ71cxHN5VByW1S58Gl85NFJaQu93F7Vs7K/MuAKsIIuHm9PBbkR5Vxkg9ko9cBdiKVt+FNoo13BhdbA+Vwycg==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+      "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.nlark.com/@webassemblyjs/ast/download/@webassemblyjs/ast-1.9.0.tgz",
@@ -3431,6 +3530,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/async-validator": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
+      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/download/asynckit-0.4.0.tgz",
@@ -3505,6 +3609,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -6055,6 +6167,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmmirror.com/debug/download/debug-4.3.3.tgz",
@@ -6740,6 +6857,25 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/element-plus": {
+      "version": "1.3.0-beta.5",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.3.0-beta.5.tgz",
+      "integrity": "sha512-su0sHN4ZkR5ISyP1McyiqY5wqrgZgKq0El0lSohjvjEWR3ODlgdmMfQolV0ZqTXKlO2mS16hO7nTFwX9PvZNTQ==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "@element-plus/icons-vue": "^0.2.4",
+        "@popperjs/core": "^2.10.2",
+        "@vueuse/core": "^7.3.0",
+        "async-validator": "^4.0.7",
+        "dayjs": "^1.10.7",
+        "lodash": "^4.17.21",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.1.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz",
@@ -7783,7 +7919,6 @@
       "version": "1.14.7",
       "resolved": "https://registry.npmmirror.com/follow-redirects/download/follow-redirects-1.14.7.tgz",
       "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -9805,7 +9940,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/download/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -9979,6 +10113,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/memory-fs/download/memory-fs-0.4.1.tgz",
@@ -10624,6 +10763,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz",
+      "integrity": "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w=="
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1633420566316&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",
@@ -17062,6 +17206,17 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+    },
+    "@element-plus/icons-vue": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.4.tgz",
+      "integrity": "sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w==",
+      "requires": {}
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmmirror.com/@hapi/address/download/@hapi/address-2.1.4.tgz",
@@ -17128,6 +17283,11 @@
       "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.1.tgz?cache=0&sync_timestamp=1636965503646&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.1.tgz",
@@ -17877,6 +18037,31 @@
       "integrity": "sha1-trQKdiVCnSvXwigd26YB7QXcfxo=",
       "dev": true
     },
+    "@vueuse/core": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.5.3.tgz",
+      "integrity": "sha512-D9j5ymHFMFRXQqCp0yZJkf/bvBGiz0MrKUa364p+L8dMyd5zyq2K1JmHyvoBd4xbTFRfmQ1h878u6YE5LCkDVQ==",
+      "requires": {
+        "@vueuse/shared": "7.5.3",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "@vueuse/shared": {
+          "version": "7.5.3",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.3.tgz",
+          "integrity": "sha512-BJ71cxHN5VByW1S58Gl85NFJaQu93F7Vs7K/MuAKsIIuHm9PBbkR5Vxkg9ko9cBdiKVt+FNoo13BhdbA+Vwycg==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
+        "vue-demi": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+          "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+          "requires": {}
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.nlark.com/@webassemblyjs/ast/download/@webassemblyjs/ast-1.9.0.tgz",
@@ -18355,6 +18540,11 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
+      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/download/asynckit-0.4.0.tgz",
@@ -18408,6 +18598,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -20333,6 +20531,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmmirror.com/debug/download/debug-4.3.3.tgz",
@@ -20833,6 +21036,22 @@
       "integrity": "sha512-VQEXEJc+8rJIva85H8EPtB5Ux9g8TzkNGBanqphM9ZWMZ34elueKJ+5g+BPhz3Lk8gkujfQRcIZ+fpA0btUIuw==",
       "dev": true
     },
+    "element-plus": {
+      "version": "1.3.0-beta.5",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.3.0-beta.5.tgz",
+      "integrity": "sha512-su0sHN4ZkR5ISyP1McyiqY5wqrgZgKq0El0lSohjvjEWR3ODlgdmMfQolV0ZqTXKlO2mS16hO7nTFwX9PvZNTQ==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "@element-plus/icons-vue": "^0.2.4",
+        "@popperjs/core": "^2.10.2",
+        "@vueuse/core": "^7.3.0",
+        "async-validator": "^4.0.7",
+        "dayjs": "^1.10.7",
+        "lodash": "^4.17.21",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.1.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz",
@@ -21618,8 +21837,7 @@
     "follow-redirects": {
       "version": "1.14.7",
       "resolved": "https://registry.npmmirror.com/follow-redirects/download/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
-      "dev": true
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -23041,8 +23259,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/download/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -23172,6 +23389,11 @@
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/memory-fs/download/memory-fs-0.4.1.tgz",
@@ -23667,6 +23889,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "normalize-wheel-es": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz",
+      "integrity": "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1633420566316&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",

package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
     "d3": "^7.3.0",
+    "element-plus": "^1.3.0-beta.5",
     "vue": "^3.0.0"
   },
   "devDependencies": {

src/App.vue

@@ -1,168 +1,258 @@
 <template>
-  {{infoText}}
+  <el-button @click="getWholeData" type="primary">重新获取全部数据点</el-button>
+  <el-form label-position="top">
+    <el-form-item label="路径1数据(必填)(在全部节点中的index，以英文逗号分隔)(蓝色圆圈表示)">
+      <el-input v-model="formData.path1"></el-input>
+    </el-form-item>
+    <el-form-item label="路径2数据（选填）(在全部节点中的index，以英文逗号分隔)（绿色数字1表示）">
+      <el-input v-model="formData.path2"></el-input>
+    </el-form-item>
+
+    <el-button type="primary" @click="renderPath">显示路径</el-button>
+    <el-button @click="resetForm">Reset</el-button>
+  </el-form>
+
+  <div>{{infoText}}</div>
   <div class="svgWrapper"></div>
 </template>
 
 <script>
 import * as d3 from "d3";
-import rawWholeData from "../input-data/data3.js";
-import { path1 as rawPathDataIndex, path2 as rawPathDataIndex2 } from "../input-data/mock-path3.js";
+import { getWholeData } from "./api.js";
+import { ElLoading } from 'element-plus'
 
-// 基于path index 拿到path节点数组
-let rawPathData = {
-  data: [
-  ]
-}
-for (let index = 0; index < rawPathDataIndex.length; index++) {
-  const element = rawWholeData.data[rawPathDataIndex[index]];
-  rawPathData.data.push(element)
-}
-let rawPathData2 = {
-  data: [
-  ]
-}
-for (let index = 0; index < rawPathDataIndex2.length; index++) {
-  const element = rawWholeData.data[rawPathDataIndex2[index]];
-  rawPathData2.data.push(element)
-}
-
-// 原始字符串数组处理成二维数组
-let wholeInputPointArray = rawWholeData.data.map((eachString, index) => {
-  console.assert(eachString.split(' ').length === 12, `index ${index}处数据点 数字个数不是12！`)
-  return eachString.split(' ')
-})
-let pathInputPointArray = rawPathData.data.map((eachString) => {
-  return eachString.split(' ')
-})
-let pathInputPointArray2 = rawPathData2.data.map((eachString) => {
-  return eachString.split(' ')
-})
-
-// 所有点的分布情况
-let xArray = wholeInputPointArray.map((eachPoint) => {
-  return eachPoint[0]
-})
-let xLength = Math.max(...xArray) - Math.min(...xArray)
-let xCenter = (Math.max(...xArray) + Math.min(...xArray)) / 2
-
-let yArray = wholeInputPointArray.map((eachPoint) => {
-  return eachPoint[1]
-})
-
-let yLength = Math.max(...yArray) - Math.min(...yArray)
-let yCenter = (Math.max(...yArray) + Math.min(...yArray)) / 2
-
-console.log(`x轴分布范围： ${Math.min(...xArray)} 到 ${Math.max(...xArray)}`)
-console.log(`y轴分布范围： ${Math.min(...yArray)} 到 ${Math.max(...yArray)}`)
-
-let areaRatio = xLength / yLength
+const LENGTH_PER_POINT = 0.36
 
 // 视口尺寸
-let viewportWidth = document.documentElement.clientWidth
-let viewportHeight = document.documentElement.clientHeight
-let viewportRatio = viewportWidth / viewportHeight
+let svgWidth = document.documentElement.clientWidth
+let svgHeight = document.documentElement.clientHeight - 300
+let viewportRatio = svgWidth / svgHeight
 
-// 各个点坐标映射到视口坐标
 let pxPerUnitLength = 0 // 原始单位长度对应的像素数
-if (viewportRatio >= areaRatio) { // 视口高度应略小于y轴方向分布幅度
-  pxPerUnitLength = viewportHeight / yLength * 0.9
-} else { // 视口宽度应略小于x轴方向分布幅度
-  pxPerUnitLength = viewportWidth / xLength * 0.9
-}
-let wholeXArrayInPx = xArray.map((eachX) => {
-  return (eachX - xCenter) * pxPerUnitLength + viewportWidth / 2
-})
-let wholeYArrayInPx = yArray.map((eachY) => {
-  return (eachY - yCenter) * pxPerUnitLength + viewportHeight / 2
-})
-let pathXArrayInPx = pathInputPointArray.map((eachPoint) => {
-  return eachPoint[0]
-}).map((eachX) => {
-  return (eachX - xCenter) * pxPerUnitLength + viewportWidth / 2
-})
-let pathYArrayInPx = pathInputPointArray.map((eachPoint) => {
-  return eachPoint[1]
-}).map((eachY) => {
-  return (eachY - yCenter) * pxPerUnitLength + viewportHeight / 2
-})
-let pathXArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
-  return eachPoint[0]
-}).map((eachX) => {
-  return (eachX - xCenter) * pxPerUnitLength + viewportWidth / 2
-})
-let pathYArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
-  return eachPoint[1]
-}).map((eachY) => {
-  return (eachY - yCenter) * pxPerUnitLength + viewportHeight / 2
-})
-
-// 组合成最终数据用来渲染
+let rawWholeData = []
 let wholeDataForRender = []
-for (let index = 0; index < wholeInputPointArray.length; index++) {
-  wholeDataForRender.push([wholeXArrayInPx[index], wholeYArrayInPx[index], ...wholeInputPointArray[index], index])
-}
-let pathDataForRender = []
-for (let index = 0; index < pathInputPointArray.length; index++) {
-  pathDataForRender.push([pathXArrayInPx[index], pathYArrayInPx[index], ...pathInputPointArray[index]])
-}
-let pathDataForRender2 = []
-for (let index = 0; index < pathInputPointArray2.length; index++) {
-  pathDataForRender2.push([pathXArrayInPx2[index], pathYArrayInPx2[index], ...pathInputPointArray2[index]])
+
+// 全部数据点的分布中心
+let xCenter = 0 
+let yCenter = 0 
+
+function resetGlobalVars() {
+  pxPerUnitLength = 0 // 原始单位长度对应的像素数
+  rawWholeData = []
+  wholeDataForRender = []
+  xCenter = 0 
+  yCenter = 0 
 }
 
 export default {
   name: 'App',
   data() {
     return {
-      wholeInputPointArray,
-      colNum: 15,
-      infoText: ''
+      infoText: '',
+      loadingHandler: null,
+      formData: {
+        path1: '',
+        path2: '',
+      }
     }
   },
   computed: {
   },
-  mounted() {
-    const that = this
-    d3.select('.svgWrapper').append("svg").attr("width", document.documentElement.clientWidth).attr('height', document.documentElement.clientHeight)
-
-    d3.select('svg').selectAll('rect').data(wholeDataForRender).enter().append('rect')
-      .attr('x', (d) => d[0] - 0.36 * pxPerUnitLength / 2)
-      .attr('y', (d) => d[1] - 0.36 * pxPerUnitLength / 2)
-      .attr('width', 0.36 * pxPerUnitLength)
-      .attr('height', 0.36 * pxPerUnitLength)
-      .attr('fill', 'black')
-      .attr('render-data', (d) => {
-        return d
+  methods: {
+    inputToArray(input) {
+      let temp = input.trim()
+      if(temp[0] === '[') { temp = temp.substr(1)}
+      if (temp[temp.length - 1] === ']') { temp = temp.substr(0, temp.length - 1) }
+      temp = temp.split(',').map((item) => {
+        return Number(item)
+      })
+      if (temp.includes(NaN)) {
+        window.alert(`解析输入路径失败：${input}`)
+        return -1
+      }
+      return temp
+    },
+    getWholeData() {
+      this.loadingHandler = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
       })
 
-    d3.select('svg').selectAll('rect').on('mouseover', function(e) {
-      d3.select(this).attr('fill', 'orange')
-      let renderDataItem = e.target.attributes['render-data'].value.split(',')
-      that.infoText = `数据点index(从0数起）：${renderDataItem[15]}, \n具体值： ${renderDataItem.slice(2, 14).join(', ')}`
-    }).on('mouseleave', function (e) {
-      d3.select(this).attr('fill', 'black')
-      that.infoText = ''
-    })
-    
-    d3.select('svg').selectAll('circle').data(pathDataForRender).enter().append('circle')
-      .attr('cx', (d) => d[0])
-      .attr('cy', (d) => d[1])
-      .attr('r', 0.36 * pxPerUnitLength / 2)
-      .attr('fill', 'blue')
-      .attr('pointer-events', 'none')
-      .attr('render-data', (d) => {
-        return d
+      resetGlobalVars()
+      d3.select('svg').selectAll('rect').remove()
+      d3.select('svg').selectAll('circle').remove()
+      d3.select('svg').selectAll('text').remove()
+
+      const that = this
+      getWholeData().then((res) => {
+        rawWholeData = res
+        // 原始字符串数组处理成二维数组
+        let wholeInputPointArray = rawWholeData.map((eachString, index) => {
+          console.assert(eachString.split(' ').length === 12, `index ${index}处数据点 数字个数不是12！`)
+          return eachString.split(' ')
+        })
+
+        // 所有点的分布情况
+        let xArray = wholeInputPointArray.map((eachPoint) => {
+          return eachPoint[0]
+        })
+        let xLength = Math.max(...xArray) - Math.min(...xArray)
+        xCenter = (Math.max(...xArray) + Math.min(...xArray)) / 2
+
+        let yArray = wholeInputPointArray.map((eachPoint) => {
+          return eachPoint[1]
+        })
+        let yLength = Math.max(...yArray) - Math.min(...yArray)
+        yCenter = (Math.max(...yArray) + Math.min(...yArray)) / 2
+
+        let areaRatio = xLength / yLength
+
+        // 各个点坐标映射到视口坐标
+        if (viewportRatio >= areaRatio) { // 视口高度应略小于y轴方向分布幅度
+          pxPerUnitLength = svgHeight / yLength * 0.9
+        } else { // 视口宽度应略小于x轴方向分布幅度
+          pxPerUnitLength = svgWidth / xLength * 0.9
+        }
+        let wholeXArrayInPx = xArray.map((eachX) => {
+          return (eachX - xCenter) * pxPerUnitLength + svgWidth / 2
+        })
+        let wholeYArrayInPx = yArray.map((eachY) => {
+          return (eachY - yCenter) * pxPerUnitLength + svgHeight / 2
+        })
+
+        // 组合成最终数据用来渲染
+        for (let index = 0; index < wholeInputPointArray.length; index++) {
+          wholeDataForRender.push([wholeXArrayInPx[index], wholeYArrayInPx[index], ...wholeInputPointArray[index], index])
+        }
+
+        d3.select('svg').selectAll('rect').data(wholeDataForRender).enter().append('rect')
+          .attr('x', (d) => d[0] - LENGTH_PER_POINT * pxPerUnitLength / 2)
+          .attr('y', (d) => d[1] - LENGTH_PER_POINT * pxPerUnitLength / 2)
+          .attr('width', LENGTH_PER_POINT * pxPerUnitLength)
+          .attr('height', LENGTH_PER_POINT * pxPerUnitLength)
+          .attr('fill', 'black')
+          .attr('render-data', (d) => {
+            return d
+          })
+
+        d3.select('svg').selectAll('rect').on('mouseover', function(e) {
+          d3.select(this).attr('fill', 'orange')
+          let renderDataItem = e.target.attributes['render-data'].value.split(',')
+          that.infoText = `数据点index(从0数起）：${renderDataItem[renderDataItem.length - 1]}, \n具体值： ${renderDataItem.slice(2, 14).join(', ')}`
+        }).on('mouseleave', function (e) {
+          d3.select(this).attr('fill', 'black')
+          that.infoText = ''
+        })
+      }).finally(() => {
+        this.loadingHandler.close()
       })
+    },
+    renderPath() {
+      if (!this.formData.path1.trim()) {
+        window.alert('路径1必填！')
+        return
+      }
+      
+      d3.select('svg').selectAll('circle').remove()
+      d3.select('svg').selectAll('text').remove()
+      
+      let rawPathDataIndex = this.inputToArray(this.formData.path1)
+      if (rawPathDataIndex === -1) {
+        return
+      }
+      let rawPathDataIndex2 = this.inputToArray(this.formData.path2)
+      if (rawPathDataIndex2 === -1) {
+        return
+      }
+      
+      // 基于path index 拿到path节点数组
+      let rawPathData = {
+        data: [
+        ]
+      }
+      for (let index = 0; index < rawPathDataIndex.length; index++) {
+        const element = rawWholeData[rawPathDataIndex[index]];
+        rawPathData.data.push(element)
+      }
+      let rawPathData2 = {
+        data: [
+        ]
+      }
+      for (let index = 0; index < rawPathDataIndex2.length; index++) {
+        const element = rawWholeData[rawPathDataIndex2[index]];
+        rawPathData2.data.push(element)
+      }
 
-    // todo: 不用数字，改用不同颜色的图形。
-    d3.select('svg').selectAll('text').data(pathDataForRender2).enter().append('text')
-      .text('1')
-      .attr('x', (d) => d[0])
-      .attr('y', (d) => d[1] + 0.36 * pxPerUnitLength / 2)
-      .attr('fill', 'green')
-      .attr('text-anchor', 'middle')
-      .attr('pointer-events', 'none')
-  }
+      // 原始字符串数组处理成二维数组
+      let pathInputPointArray = rawPathData.data.map((eachString) => {
+        return eachString.split(' ')
+      })
+      let pathInputPointArray2 = rawPathData2.data.map((eachString) => {
+        return eachString.split(' ')
+      })
+
+      // 各个点坐标映射到视口坐标
+      let pathXArrayInPx = pathInputPointArray.map((eachPoint) => {
+        return eachPoint[0]
+      }).map((eachX) => {
+        return (eachX - xCenter) * pxPerUnitLength + svgWidth / 2
+      })
+      let pathYArrayInPx = pathInputPointArray.map((eachPoint) => {
+        return eachPoint[1]
+      }).map((eachY) => {
+        return (eachY - yCenter) * pxPerUnitLength + svgHeight / 2
+      })
+      let pathXArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
+        return eachPoint[0]
+      }).map((eachX) => {
+        return (eachX - xCenter) * pxPerUnitLength + svgWidth / 2
+      })
+      let pathYArrayInPx2 = pathInputPointArray2.map((eachPoint) => {
+        return eachPoint[1]
+      }).map((eachY) => {
+        return (eachY - yCenter) * pxPerUnitLength + svgHeight / 2
+      })
+
+      // 组合成最终数据用来渲染
+      let pathDataForRender = []
+      for (let index = 0; index < pathInputPointArray.length; index++) {
+        pathDataForRender.push([pathXArrayInPx[index], pathYArrayInPx[index], ...pathInputPointArray[index]])
+      }
+      let pathDataForRender2 = []
+      for (let index = 0; index < pathInputPointArray2.length; index++) {
+        pathDataForRender2.push([pathXArrayInPx2[index], pathYArrayInPx2[index], ...pathInputPointArray2[index]])
+      }
+
+      // 进行渲染
+      d3.select('svg').selectAll('circle').data(pathDataForRender).enter().append('circle')
+        .attr('cx', (d) => d[0])
+        .attr('cy', (d) => d[1])
+        .attr('r', LENGTH_PER_POINT * pxPerUnitLength / 2)
+        .attr('fill', 'blue')
+        .attr('pointer-events', 'none')
+      // todo: 不用数字，改用不同颜色的图形。
+      d3.select('svg').selectAll('text').data(pathDataForRender2).enter().append('text')
+        .text('1')
+        .attr('x', (d) => d[0])
+        .attr('y', (d) => d[1] + LENGTH_PER_POINT * pxPerUnitLength / 2)
+        .attr('fill', 'green')
+        .attr('text-anchor', 'middle')
+        .attr('pointer-events', 'none')
+        .attr('font-size', LENGTH_PER_POINT * pxPerUnitLength * 10)
+
+    },
+    resetForm() {
+      this.formData.path1 = ''
+      this.formData.path2 = ''
+    },
+  },
+  mounted() {
+    d3.select('.svgWrapper').append("svg")
+      .attr("width", svgWidth)
+      .attr('height', svgHeight)
+    this.getWholeData()
+  },
 }
 </script>
 
@@ -176,6 +266,7 @@ export default {
 }
 .svgWrapper {
   position: absolute;
-  top: 20px;
+  top: 300px;
+  background: #eee;
 }
 </style>

src/api.js

@@ -0,0 +1,16 @@
+import axios from "axios"
+import mockData from "../input-data/data3.js";
+export function getWholeData() {
+  // return Promise.resolve(mockData.data)
+  
+  return axios
+    .get('http://192.168.0.11:8080/laser/route/t-8KbK1JjubE/getRouteInfo')
+    // .get('https://uat-laser.4dkankan.com/laser/route/t-8KbK1JjubE/getRouteInfo')
+    .then((res) => {
+      if (Array.isArray(res.data.data) && res.data.data.length > 0) {
+        return res.data.data
+      } else {
+        throw('getWholeData结果异常！')
+      }
+    })
+}

src/main.js

@@ -1,4 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')

yarn.lock

@@ -923,6 +923,16 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     "to-fast-properties" "^2.0.0"
 
+"@ctrl/tinycolor@^3.4.0":
+  "integrity" "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+  "resolved" "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz"
+  "version" "3.4.0"
+
+"@element-plus/icons-vue@^0.2.4":
+  "integrity" "sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w=="
+  "resolved" "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.4.tgz"
+  "version" "0.2.4"
+
 "@hapi/address@2.x.x":
   "integrity" "sha1-XWftQ/P9QaadS5/3tW58DR0KgeU="
   "resolved" "https://registry.npmmirror.com/@hapi/address/download/@hapi/address-2.1.4.tgz"
@@ -977,6 +987,11 @@
   "resolved" "https://registry.npmmirror.com/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz"
   "version" "1.1.3"
 
+"@popperjs/core@^2.10.2":
+  "integrity" "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+  "resolved" "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz"
+  "version" "2.11.2"
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   "integrity" "sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg=="
   "resolved" "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.1.tgz?cache=0&sync_timestamp=1636965503646&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.1.tgz"
@@ -1512,6 +1527,21 @@
   "resolved" "https://registry.npm.taobao.org/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz"
   "version" "1.3.0"
 
+"@vueuse/core@^7.3.0":
+  "integrity" "sha512-D9j5ymHFMFRXQqCp0yZJkf/bvBGiz0MrKUa364p+L8dMyd5zyq2K1JmHyvoBd4xbTFRfmQ1h878u6YE5LCkDVQ=="
+  "resolved" "https://registry.npmjs.org/@vueuse/core/-/core-7.5.3.tgz"
+  "version" "7.5.3"
+  dependencies:
+    "@vueuse/shared" "7.5.3"
+    "vue-demi" "*"
+
+"@vueuse/shared@7.5.3":
+  "integrity" "sha512-BJ71cxHN5VByW1S58Gl85NFJaQu93F7Vs7K/MuAKsIIuHm9PBbkR5Vxkg9ko9cBdiKVt+FNoo13BhdbA+Vwycg=="
+  "resolved" "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.3.tgz"
+  "version" "7.5.3"
+  dependencies:
+    "vue-demi" "*"
+
 "@webassemblyjs/ast@1.9.0":
   "integrity" "sha1-vYUGBLQEJFmlpBzX0zjL7Wle2WQ="
   "resolved" "https://registry.nlark.com/@webassemblyjs/ast/download/@webassemblyjs/ast-1.9.0.tgz"
@@ -1908,6 +1938,11 @@
   "resolved" "https://registry.npmmirror.com/async-limiter/download/async-limiter-1.0.1.tgz"
   "version" "1.0.1"
 
+"async-validator@^4.0.7":
+  "integrity" "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+  "resolved" "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz"
+  "version" "4.0.7"
+
 "async@^2.6.2":
   "integrity" "sha1-1yYl4jRKNlbjo61Pp0n6gymdgv8="
   "resolved" "https://registry.npmmirror.com/async/download/async-2.6.3.tgz"
@@ -1948,6 +1983,13 @@
   "resolved" "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz"
   "version" "1.11.0"
 
+"axios@^0.24.0":
+  "integrity" "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA=="
+  "resolved" "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz"
+  "version" "0.24.0"
+  dependencies:
+    "follow-redirects" "^1.14.4"
+
 "babel-eslint@^10.1.0":
   "integrity" "sha1-aWjlaKkQt4+zd5zdi2rC9HmUMjI="
   "resolved" "https://registry.npmmirror.com/babel-eslint/download/babel-eslint-10.1.0.tgz"
@@ -3350,6 +3392,11 @@
   dependencies:
     "assert-plus" "^1.0.0"
 
+"dayjs@^1.10.7":
+  "integrity" "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+  "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz"
+  "version" "1.10.7"
+
 "debug@^2.2.0":
   "integrity" "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="
   "resolved" "https://registry.npmmirror.com/debug/download/debug-2.6.9.tgz"
@@ -3689,6 +3736,21 @@
   "resolved" "https://registry.npmmirror.com/electron-to-chromium/download/electron-to-chromium-1.4.41.tgz"
   "version" "1.4.41"
 
+"element-plus@^1.3.0-beta.5":
+  "integrity" "sha512-su0sHN4ZkR5ISyP1McyiqY5wqrgZgKq0El0lSohjvjEWR3ODlgdmMfQolV0ZqTXKlO2mS16hO7nTFwX9PvZNTQ=="
+  "resolved" "https://registry.npmjs.org/element-plus/-/element-plus-1.3.0-beta.5.tgz"
+  "version" "1.3.0-beta.5"
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.0"
+    "@element-plus/icons-vue" "^0.2.4"
+    "@popperjs/core" "^2.10.2"
+    "@vueuse/core" "^7.3.0"
+    "async-validator" "^4.0.7"
+    "dayjs" "^1.10.7"
+    "lodash" "^4.17.21"
+    "memoize-one" "^6.0.0"
+    "normalize-wheel-es" "^1.1.1"
+
 "elliptic@^6.5.3":
   "integrity" "sha1-2jfOvTHnmhNn6UG1ku0fvr1Yq7s="
   "resolved" "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz"
@@ -4335,7 +4397,7 @@
     "inherits" "^2.0.3"
     "readable-stream" "^2.3.6"
 
-"follow-redirects@^1.0.0":
+"follow-redirects@^1.0.0", "follow-redirects@^1.14.4":
   "integrity" "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
   "resolved" "https://registry.npmmirror.com/follow-redirects/download/follow-redirects-1.14.7.tgz"
   "version" "1.14.7"
@@ -5769,6 +5831,11 @@
   "resolved" "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz"
   "version" "0.3.0"
 
+"memoize-one@^6.0.0":
+  "integrity" "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
+  "version" "6.0.0"
+
 "memory-fs@^0.4.1":
   "integrity" "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI="
   "resolved" "https://registry.npmmirror.com/memory-fs/download/memory-fs-0.4.1.tgz"
@@ -6147,6 +6214,11 @@
     "query-string" "^4.1.0"
     "sort-keys" "^1.0.0"
 
+"normalize-wheel-es@^1.1.1":
+  "integrity" "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w=="
+  "resolved" "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz"
+  "version" "1.1.1"
+
 "npm-run-path@^2.0.0":
   "integrity" "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8="
   "resolved" "https://registry.npmmirror.com/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1633420566316&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz"
@@ -8666,6 +8738,11 @@
   "resolved" "https://registry.npmmirror.com/vm-browserify/download/vm-browserify-1.1.2.tgz"
   "version" "1.1.2"
 
+"vue-demi@*":
+  "integrity" "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
+  "resolved" "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz"
+  "version" "0.12.1"
+
 "vue-eslint-parser@^7.10.0":
   "integrity" "sha1-IUtd6pYQB/z/su5luJEjB2KNDa8="
   "resolved" "https://registry.npmmirror.com/vue-eslint-parser/download/vue-eslint-parser-7.11.0.tgz"
@@ -8717,7 +8794,7 @@
   "resolved" "https://registry.nlark.com/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz"
   "version" "1.9.1"
 
-"vue@^2 || ^3.0.0-0", "vue@^3.0.0", "vue@3.2.26":
+"vue@^2 || ^3.0.0-0", "vue@^2.6.0 || ^3.2.0", "vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@3.2.26":
   "integrity" "sha512-KD4lULmskL5cCsEkfhERVRIOEDrfEL9CwAsLYpzptOGjaGFNWo3BQ9g8MAb7RaIO71rmVOziZ/uEN/rHwcUIhg=="
   "resolved" "https://registry.npmmirror.com/vue/download/vue-3.2.26.tgz"
   "version" "3.2.26"