添加图表

package-lock.json

@@ -90,6 +90,15 @@
         }
       }
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/@fullhuman/postcss-purgecss/download/@fullhuman/postcss-purgecss-3.1.3.tgz",
+      "integrity": "sha1-R697h8m/s95LyUo4+HW5KP/98zk=",
+      "dev": true,
+      "requires": {
+        "purgecss": "^3.1.3"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -322,6 +331,23 @@
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
       "dev": true
     },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npm.taobao.org/acorn-node/download/acorn-node-1.8.2.tgz",
+      "integrity": "sha1-EUyV1kU55T3t4j3oudlt98euKvg=",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-7.2.0.tgz",
+      "integrity": "sha1-DeiJpgEgOQmw++B7iTjcIdLpZ7w=",
+      "dev": true
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -355,6 +381,16 @@
         "color-convert": "^1.9.0"
       }
     },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npm.taobao.org/anymatch/download/anymatch-3.1.2.tgz?cache=0&sync_timestamp=1617747806715&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fanymatch%2Fdownload%2Fanymatch-3.1.2.tgz",
+      "integrity": "sha1-wFV8CWrzLxBhmPT04qODU343hxY=",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -400,6 +436,26 @@
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true
     },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/at-least-node/download/at-least-node-1.0.0.tgz",
+      "integrity": "sha1-YCzUtG6EStTv/JKoARo8RuAjjcI=",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "10.2.5",
+      "resolved": "https://registry.nlark.com/autoprefixer/download/autoprefixer-10.2.5.tgz?cache=0&sync_timestamp=1618847172960&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fautoprefixer%2Fdownload%2Fautoprefixer-10.2.5.tgz",
+      "integrity": "sha1-CWoDN9vJbAhzUm1/713kQo0FOC0=",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.3",
+        "caniuse-lite": "^1.0.30001196",
+        "colorette": "^1.2.2",
+        "fraction.js": "^4.0.13",
+        "normalize-range": "^0.1.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
     "axios": {
       "version": "0.21.1",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
@@ -436,6 +492,12 @@
         "chainsaw": "~0.1.0"
       }
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.2.0.tgz?cache=0&sync_timestamp=1610299322955&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbinary-extensions%2Fdownload%2Fbinary-extensions-2.2.0.tgz",
+      "integrity": "sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0=",
+      "dev": true
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -461,6 +523,19 @@
         "fill-range": "^7.0.1"
       }
     },
+    "browserslist": {
+      "version": "4.16.6",
+      "resolved": "https://registry.nlark.com/browserslist/download/browserslist-4.16.6.tgz?cache=0&sync_timestamp=1619789101558&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbrowserslist%2Fdownload%2Fbrowserslist-4.16.6.tgz",
+      "integrity": "sha1-15ASd6WojlVO0wWxg+ybDAj2b6I=",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001219",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.723",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.71"
+      }
+    },
     "buffer-indexof-polyfill": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
@@ -473,6 +548,12 @@
       "integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s=",
       "dev": true
     },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/bytes/download/bytes-3.1.0.tgz",
+      "integrity": "sha1-9s95M6Ng4FiPqf3oVlHNx/gF0fY=",
+      "dev": true
+    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -489,6 +570,18 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/camelcase-css/download/camelcase-css-2.0.1.tgz",
+      "integrity": "sha1-7pePaUeRTMMMa0R0G27R338EP9U=",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001228",
+      "resolved": "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001228.tgz?cache=0&sync_timestamp=1620658739427&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001228.tgz",
+      "integrity": "sha1-v9xZQs0zJvpR7gtC++9NqdSSp/o=",
+      "dev": true
+    },
     "chainsaw": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
@@ -549,6 +642,32 @@
         }
       }
     },
+    "chokidar": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-3.5.1.tgz?cache=0&sync_timestamp=1610719375974&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-3.5.1.tgz",
+      "integrity": "sha1-7pznu+vSt59J8wR5nVRo4x4U5oo=",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
+    "color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/color/download/color-3.1.3.tgz?cache=0&sync_timestamp=1602228737770&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolor%2Fdownload%2Fcolor-3.1.3.tgz",
+      "integrity": "sha1-ymf7TnuX1hHc3jns7tQiBn2RWW4=",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.4"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -564,12 +683,33 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "color-string": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npm.taobao.org/color-string/download/color-string-1.5.5.tgz",
+      "integrity": "sha1-ZUdKjw50OWJfPSemoZ2J/EUiMBQ=",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "colorette": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
       "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
       "dev": true
     },
+    "commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npm.taobao.org/commander/download/commander-6.2.1.tgz?cache=0&sync_timestamp=1616364569946&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-6.2.1.tgz",
+      "integrity": "sha1-B5LraC37wyWZm7K4T93duhEKxzw=",
+      "dev": true
+    },
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npm.taobao.org/comutils/download/comutils-1.1.19.tgz",
+      "integrity": "sha1-PgfzBqv0joNyZRFxOnKyBWUDREM="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -614,6 +754,12 @@
         "which": "^2.0.1"
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/css-unit-converter/download/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha1-THf1oZVObb/2BpXsshTjJwQ2qyE=",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -654,6 +800,29 @@
         "object-keys": "^1.0.12"
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/defined/download/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npm.taobao.org/detective/download/detective-5.2.0.tgz",
+      "integrity": "sha1-/rKnfoW5BOzepFmtiXzJCpm9Kns=",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npm.taobao.org/didyoumean/download/didyoumean-1.2.1.tgz",
+      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
+      "dev": true
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -663,6 +832,12 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/dlv/download/dlv-1.1.3.tgz",
+      "integrity": "sha1-XBmKihFFNZbnUUlNSYdLx3MvLnk=",
+      "dev": true
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -681,6 +856,28 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "echarts": {
+      "version": "5.1.1",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-5.1.1.tgz",
+      "integrity": "sha1-sYbxYvAXxVXP1nsS7eZ2K9w939o=",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.3.727",
+      "resolved": "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.727.tgz",
+      "integrity": "sha1-hX4xDKAPC3XaTh22/w4HPMSpHd8=",
+      "dev": true
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -752,6 +949,12 @@
       "integrity": "sha512-VtUf6aQ89VTmMLKrWHYG50uByMF4JQlVysb8dmg6cOgW8JnFCipmz7p+HNBl+RR3LLCuBxFGVauAe2wfnF9bLg==",
       "dev": true
     },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.1.tgz?cache=0&sync_timestamp=1602567259580&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescalade%2Fdownload%2Fescalade-3.1.1.tgz",
+      "integrity": "sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA=",
+      "dev": true
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1145,6 +1348,24 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
       "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
     },
+    "fraction.js": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npm.taobao.org/fraction.js/download/fraction.js-4.0.13.tgz",
+      "integrity": "sha1-PBwxX6FrNchf/6lXJaNvpynGnf4=",
+      "dev": true
+    },
+    "fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.nlark.com/fs-extra/download/fs-extra-9.1.0.tgz",
+      "integrity": "sha1-WVRGDHZKjaIJS6NVS/g55rmnyG0=",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1216,6 +1437,42 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npm.taobao.org/glob-base/download/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "dev": true,
+      "requires": {
+        "glob-parent": "^2.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "2.0.0",
+          "resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-2.0.0.tgz?cache=0&sync_timestamp=1620073245729&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-2.0.0.tgz",
+          "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+          "dev": true,
+          "requires": {
+            "is-glob": "^2.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-extglob/download/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1301,6 +1558,12 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "html-tags": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-3.1.0.tgz",
+      "integrity": "sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=",
+      "dev": true
+    },
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
@@ -1363,6 +1626,15 @@
       "integrity": "sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==",
       "dev": true
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/is-binary-path/download/is-binary-path-2.1.0.tgz",
+      "integrity": "sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-boolean-object": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.1.tgz",
@@ -1393,6 +1665,12 @@
       "integrity": "sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==",
       "dev": true
     },
+    "is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npm.taobao.org/is-dotfile/download/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
+      "dev": true
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1506,6 +1784,16 @@
         "minimist": "^1.2.0"
       }
     },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161933968&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz",
+      "integrity": "sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -1573,6 +1861,18 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npm.taobao.org/lodash.toarray/download/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
+    "lodash.topath": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npm.taobao.org/lodash.topath/download/lodash.topath-4.5.2.tgz",
+      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
+      "dev": true
+    },
     "lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -1646,6 +1946,12 @@
         "minimist": "^1.2.5"
       }
     },
+    "modern-normalize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.nlark.com/modern-normalize/download/modern-normalize-1.1.0.tgz",
+      "integrity": "sha1-2o6AFA2SIUJr1PclxuESg9NPkLc=",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1664,6 +1970,21 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npm.taobao.org/node-emoji/download/node-emoji-1.10.0.tgz",
+      "integrity": "sha1-iIar0l2ce7YYAqZYUj0fjSqJsto=",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
+    "node-releases": {
+      "version": "1.1.71",
+      "resolved": "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.71.tgz?cache=0&sync_timestamp=1614113881684&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-releases%2Fdownload%2Fnode-releases-1.1.71.tgz",
+      "integrity": "sha1-yxM0sXmJaxyJ7P3UtyX7e738fbs=",
+      "dev": true
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -1684,6 +2005,30 @@
         }
       }
     },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/normalize-path/download/normalize-path-3.0.0.tgz",
+      "integrity": "sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU=",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npm.taobao.org/normalize-range/download/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
+    "object-hash": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npm.taobao.org/object-hash/download/object-hash-2.1.1.tgz",
+      "integrity": "sha1-lEfQJ5tPz4DP8yWb9modxzr6vgk=",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
@@ -1788,6 +2133,35 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npm.taobao.org/parse-glob/download/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "dev": true,
+      "requires": {
+        "glob-base": "^0.3.0",
+        "is-dotfile": "^1.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.0"
+      },
+      "dependencies": {
+        "is-extglob": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-extglob/download/is-extglob-1.0.0.tgz",
+          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-2.0.1.tgz",
+          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^1.0.0"
+          }
+        }
+      }
+    },
     "parse-json": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@@ -1859,6 +2233,58 @@
         "source-map": "^0.6.1"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/postcss-functions/download/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
+          "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.nlark.com/postcss/download/postcss-6.0.23.tgz?cache=0&sync_timestamp=1620676610377&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-6.0.23.tgz",
+          "integrity": "sha1-YcgswyisYOZ3ZF+XkFTrmLwOMyQ=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-3.3.1.tgz?cache=0&sync_timestamp=1588083303810&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-value-parser%2Fdownload%2Fpostcss-value-parser-3.3.1.tgz",
+          "integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE=",
+          "dev": true
+        }
+      }
+    },
+    "postcss-js": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npm.taobao.org/postcss-js/download/postcss-js-3.0.3.tgz",
+      "integrity": "sha1-LwvTcKLoWZ1FQ59pcEA7WHOr2jM=",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^8.1.6"
+      }
+    },
     "postcss-modules": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.0.0.tgz",
@@ -1910,6 +2336,15 @@
         "icss-utils": "^5.0.0"
       }
     },
+    "postcss-nested": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npm.taobao.org/postcss-nested/download/postcss-nested-5.0.5.tgz",
+      "integrity": "sha1-8KEH0zqfqxHXY3IF9TIeJyI+NgM=",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
     "postcss-selector-parser": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz",
@@ -1938,6 +2373,12 @@
       "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
       "dev": true
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npm.taobao.org/pretty-hrtime/download/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -1956,12 +2397,30 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/purgecss/download/purgecss-3.1.3.tgz",
+      "integrity": "sha1-Jph+wJ0S7q3DGOIvblqesL4JT0E=",
+      "dev": true,
+      "requires": {
+        "commander": "^6.0.0",
+        "glob": "^7.0.0",
+        "postcss": "^8.2.1",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npm.taobao.org/quick-lru/download/quick-lru-5.1.1.tgz?cache=0&sync_timestamp=1610610459445&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquick-lru%2Fdownload%2Fquick-lru-5.1.1.tgz",
+      "integrity": "sha1-NmST5rPkKjpoheLpnRj4D7eoyTI=",
+      "dev": true
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -2009,6 +2468,33 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-3.5.0.tgz?cache=0&sync_timestamp=1615717506044&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freaddirp%2Fdownload%2Freaddirp-3.5.0.tgz",
+      "integrity": "sha1-m6dMAZsV02UnjS6Ru4xI17TULJ4=",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npm.taobao.org/reduce-css-calc/download/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha1-fvh2GijWFJgNwMmC93LJP3qZ3gM=",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-3.3.1.tgz?cache=0&sync_timestamp=1588083303810&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-value-parser%2Fdownload%2Fpostcss-value-parser-3.3.1.tgz",
+          "integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE=",
+          "dev": true
+        }
+      }
+    },
     "regexpp": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
@@ -2123,6 +2609,23 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npm.taobao.org/simple-swizzle/download/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npm.taobao.org/is-arrayish/download/is-arrayish-0.3.2.tgz",
+          "integrity": "sha1-RXSirlb3qyBolvtDHq7tBm/fjwM=",
+          "dev": true
+        }
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -2325,6 +2828,41 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "2.1.2",
+      "resolved": "https://registry.nlark.com/tailwindcss/download/tailwindcss-2.1.2.tgz",
+      "integrity": "sha1-KUAr9zpEX67dA99tOxd+e1K3xKE=",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
+        "bytes": "^3.0.0",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.5.1",
+        "color": "^3.1.3",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.1",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.5",
+        "fs-extra": "^9.1.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.21",
+        "lodash.topath": "^4.5.2",
+        "modern-normalize": "^1.0.0",
+        "node-emoji": "^1.8.1",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^2.1.1",
+        "parse-glob": "^3.0.4",
+        "postcss-functions": "^3",
+        "postcss-js": "^3.0.3",
+        "postcss-nested": "5.0.5",
+        "postcss-selector-parser": "^6.0.4",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "quick-lru": "^5.1.1",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.20.0"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -2411,6 +2949,12 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz?cache=0&sync_timestamp=1603180048005&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-2.0.0.tgz",
+      "integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=",
+      "dev": true
+    },
     "unzipper": {
       "version": "0.10.11",
       "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.11.tgz",
@@ -2529,6 +3073,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.6.tgz",
       "integrity": "sha512-Y04llmK2PyaESj+N33VxLjGCUDuv9t4q2OpItEGU7POZiuQZaugV6cJpE6Qm1sVFtxufodLKN2y2dQl9nk0Reg=="
     },
+    "vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npm.taobao.org/vue-seamless-scroll/download/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha1-3egbPHmqSZeRs8O//Q/bIv8+Wac=",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
     "vue-tsc": {
       "version": "0.0.24",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.0.24.tgz",
@@ -2572,11 +3124,32 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",
+      "integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q=",
+      "dev": true
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npm.taobao.org/zrender/download/zrender-5.1.0.tgz?cache=0&sync_timestamp=1618215769844&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fzrender%2Fdownload%2Fzrender-5.1.0.tgz",
+      "integrity": "sha1-tqhMOqfMxmQu4FGZAcpMCDXE2F4=",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
     }
   }
 }

package.json

@@ -11,8 +11,10 @@
   "dependencies": {
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
+    "echarts": "^5.1.1",
     "vue": "^3.0.5",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue-seamless-scroll": "^1.1.23"
   },
   "devDependencies": {
     "@types/node": "^15.0.2",

src/api/index.ts

@@ -11,8 +11,16 @@ export interface GET_TEAM_AND_HUMIDITY_PARAM {
   warehouseId?: number;
 }
 
+export interface GET_MBPS_BY_TIME_PARAM {
+  parkId: number; // 园区id
+  warehouseId: number; // 仓库id
+}
+
 // 查询仓库列表及仓库下的摄像头
 export const getWarehouses = (param: GET_WAREHOUSES_PARAM) => http.post('/warehouse/selAllWarehouse', { param });
 
 // 查询温度与湿度
 export const getTeamAndHumidity = (param: GET_TEAM_AND_HUMIDITY_PARAM) => http.post('/mbps/selTeamAndHumidity', { param });
+
+// 查看吞吐量折线图
+export const getMbpsByTime = (param: GET_MBPS_BY_TIME_PARAM) => http.post('/mbps/selMbpsByTime', { param });

src/components/amount.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="box-bg">
+    <div :style="{ width: '92%', height: '94%',margin: 'auto 3% auto 5%' }" id="throughput"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+import { getMbpsByTime } from "api/index";
+
+export default defineComponent({
+  name: "throughput",
+  data() {
+    return {
+      myCharts: {},
+      carOfInLists: [],
+      carOfOutLists: [],
+    };
+  },
+
+  computed: {
+    // 吞进量
+    weightOfIns() {
+      const { carOfInLists } = this;
+      let arr = [];
+      if (carOfInLists && carOfInLists.length) {
+        carOfInLists.forEach((item) => {
+          arr.push(item.carOfIn);
+        });
+      }
+      return arr;
+    },
+
+    // 吐出量
+    weightOfOuts() {
+      const { carOfOutLists } = this;
+      let arr = [];
+      if (carOfOutLists && carOfOutLists.length) {
+        carOfOutLists.forEach((item) => {
+          arr.push(item.carOfOut);
+        });
+      }
+      return arr;
+    },
+
+    // 时间
+    timeArray() {
+      const { carOfInLists } = this;
+      let arr = [];
+      if (carOfInLists && carOfInLists.length) {
+        carOfInLists.forEach((item) => {
+          arr.push(item.time);
+        });
+      }
+      return arr;
+    },
+  },
+
+  created() {
+    setInterval(() => {
+      // 获取数据
+      this.getMbpsByTime();
+    }, 3000);
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    /** 查看吞吐量折线图
+     * @param {number} endTime 结束时间
+     * @param {number} startTime 开始时间
+     * @param {number} queryType 查询类型(0-按天,1-按周,2-按月,3-按年)
+     */
+    async getMbpsByTime() {
+      try {
+        const { parkId, warehouseId } = this.$route.query;
+        const param = {
+          parkId: parkId || 2,
+          warehouseId: warehouseId || 7,
+          queryType: 0,
+        };
+        const data = await getMbpsByTime(param);
+        this.carOfInLists = data.carOfInsByTime;
+        this.carOfOutLists = data.carOfOutsByTime;
+        // 绘制图表
+        this.getOptions();
+      } catch (error) {
+        console.log("error: ", error);
+      }
+    },
+
+    // 绘制图表
+    getOptions() {
+      const { weightOfIns, weightOfOuts, timeArray } = this;
+      const throughput = document.getElementById("throughput");
+      this.myCharts = echarts.init(throughput);
+      this.myCharts.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        grid: {
+          left: "0",
+          right: "6%",
+          top: "15%",
+          bottom: "0",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: timeArray,
+        },
+        yAxis: {
+          type: "value",
+          name: "数量",
+          min: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "吞进量",
+            type: "line",
+            lineStyle: {
+              color: "#FC8452",
+            },
+            itemStyle: {
+              normal: {
+                color: "#FC8452",
+              },
+            },
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(252,132,82,0.9)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(252,132,82,0.3)",
+                },
+              ]),
+            },
+            data: weightOfIns,
+          },
+          {
+            name: "吐出量",
+            type: "line",
+            smooth: true,
+            lineStyle: {
+              color: "#73C0DE",
+            },
+            itemStyle: {
+              normal: {
+                color: "#73C0DE",
+              },
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(115,192,222,0.9)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(115,192,222,0.3)",
+                },
+              ]),
+            },
+            data: weightOfOuts,
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.throughput {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/curve.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="box2-bg">
+    <div class="duration flex flex-nowrap justify-around">
+      <div
+        :key="index"
+        @click="changeCycle(index)"
+        class="flex flex-nowrap"
+        v-for="(cycle,index) in cycles"
+      >
+        <span :class="index === currentIndex ? 'active' : ''" class="cycle">{{ cycle }}</span>
+      </div>
+    </div>
+    <div :style="{ width: '92%', height: '80%',margin: 'auto 3% auto 5%' }" id="comparisonChart"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+import { getMbpsByTime } from "api/index";
+
+export default defineComponent({
+  name: "comparisonChart",
+  data() {
+    return {
+      myCharts: {},
+      weightOfInLists: [],
+      weightOfOutLists: [],
+      cycles: ["天", "周", "月", "年"],
+      currentIndex: 0,
+    };
+  },
+
+  computed: {
+    // 入库的重量
+    weightOfIns() {
+      const { weightOfInLists } = this;
+      let arr = [];
+      if (weightOfInLists && weightOfInLists.length) {
+        weightOfInLists.forEach((item) => {
+          arr.push(item.weightOfIn);
+        });
+      }
+      return arr;
+    },
+
+    // 出库的重量
+    weightOfOuts() {
+      const { weightOfOutLists } = this;
+      let arr = [];
+      if (weightOfOutLists && weightOfOutLists.length) {
+        weightOfOutLists.forEach((item) => {
+          arr.push(item.weightOfOut);
+        });
+      }
+      return arr;
+    },
+
+    // 时间
+    timeArray() {
+      const { weightOfInLists } = this;
+      let arr = [];
+      if (weightOfInLists && weightOfInLists.length) {
+        weightOfInLists.forEach((item) => {
+          arr.push(item.time);
+        });
+      }
+      return arr;
+    },
+  },
+
+  created() {
+    setInterval(() => {
+      // 获取数据
+      this.getMbpsByTime(this.currentIndex);
+    }, 4000);
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    // 切换周期
+    changeCycle(index) {
+      this.currentIndex = index;
+      this.getMbpsByTime(index);
+    },
+
+    /** 查看吞吐量折线图
+     * @param {number} endTime 结束时间
+     * @param {number} startTime 开始时间
+     * @param {number} queryType 查询类型(0-按天,1-按周,2-按月,3-按年)
+     */
+    async getMbpsByTime(queryType) {
+      try {
+        const { parkId, warehouseId } = this.$route.query;
+        const param = {
+          parkId: parkId || 2,
+          warehouseId: warehouseId || 7,
+          queryType,
+        };
+        const data = await getMbpsByTime(param);
+        this.weightOfInLists = data.weightOfInsByTime;
+        this.weightOfOutLists = data.weightOfOutsByTime;
+        // 绘制图表
+        this.getOptions();
+      } catch (error) {
+        console.log("error: ", error);
+      }
+    },
+
+    // 绘制图表
+    getOptions() {
+      const { weightOfIns, weightOfOuts, timeArray } = this;
+      const comparisonChart = document.getElementById("comparisonChart");
+      this.myCharts = echarts.init(comparisonChart);
+      this.myCharts.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        grid: {
+          left: "0",
+          right: "6%",
+          top: "15%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: timeArray,
+        },
+        yAxis: {
+          type: "value",
+          name: "重量（吨）",
+          min: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "入库的重量",
+            data: weightOfIns,
+            type: "line",
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(102,148,213,0.7)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(102,148,213,0.3)",
+                },
+              ]),
+            },
+          },
+          {
+            name: "出库的重量",
+            data: weightOfOuts,
+            type: "line",
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(145,204,117,0.7)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(145,204,117,0.3)",
+                },
+              ]),
+            },
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box2-bg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.comparisonChart {
+  width: 100%;
+  height: 1110rem;
+}
+
+.duration {
+  width: 100%;
+  padding: 15rem 100rem;
+}
+
+.duration .cycle {
+  display: inline-block;
+  color: #fff;
+  width: 64rem;
+  height: 32rem;
+  line-height: 36rem;
+  font-size: 16rem;
+  text-align: center;
+}
+
+.duration .cycle:last-child {
+  border-right: none;
+}
+
+.duration .active {
+  background: url("../assets/img/cycle.png") bottom no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/finance.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="box-bg">
+    <div :style="{ width: '92%', height: '94%',margin: 'auto 3% auto 5%' }" id="finance"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+
+export default defineComponent({
+  name: "finance",
+  data() {
+    return {
+      myCharts: {},
+      carOfInLists: [],
+      carOfOutLists: [],
+    };
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    // 绘制图表
+    getOptions() {
+      const finance = document.getElementById("finance");
+      this.myCharts = echarts.init(finance);
+      this.myCharts.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["2016", "2017", "2018", "2019", "2020"],
+        },
+        yAxis: {
+          type: "value",
+          name: "万",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            data: [300, 250, 280, 220, 290],
+            type: "bar",
+            itemStyle: {
+              barBorderRadius: [10, 10, 0, 0], //柱形图圆角，初始化效果
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#83bff6" },
+                { offset: 0.5, color: "#188df0" },
+                { offset: 1, color: "#188df0" },
+              ]),
+            },
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.finance {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/memorabilia.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="roll">
+    <ul :class="{marquee_top:animate}">
+      <li :key="index" class="flex flex-col justify-items-center" v-for="(item, index) in msg">
+        <div class="flex flex-nowrap justify-between mb-12 box-title">
+          <span class="title">{{item.title}}</span>
+          <span class="time">{{ item.time }}</span>
+        </div>
+        <div class="txt">{{ item.desc }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'memorabilia',
+  data() {
+    return {
+      msg: [
+        {
+          title: '防火墙',
+          time: '2021-03-08',
+          desc: '及时发现并处理计算机网络运行时可能存在的安全风险、数据传输等问题，其中处理措施包括隔离与保护，同时可对计算机网络安全当中的各项操作实施记录与检测，以确保计算机网络运行的安全性，保障用户资料与信息的完整性，为用户提供更好、更安全的计算机网络使用体验。',
+        },
+        {
+          title: '应用层',
+          time: '2021-04-08',
+          desc: '七层OSI模型的第七层。应用层直接和应用程序接口并提供常见的网络应用服务。应用层也向表示层发出请求。应用层是开放系统的最高层,是直接为应用进程提供服务的。其作用是在实现多个系统应用进程相互通信的同时,完成一系列业务处理所需的服务.其服务元素分为两类:公共应用服务元素CASE和特定应用服务元素SASE.',
+        },
+        {
+          title: '网络层',
+          time: '2021-05-08',
+          desc: '网络层是OSI参考模型中的第三层，介于传输层和数据链路层之间，它在数据链路层提供的两个相邻端点之间的数据帧的传送功能上，进一步管理网络中的数据通信，将数据设法从源端经过若干个中间节点传送到目的端，从而向运输层提供最基本的端到端的数据传送服务。主要内容有：虚电路分组交换和数据报分组交换、路由选择算法、阻塞控制方法、X.25协议、综合业务数据网（ISDN）、异步传输模式（ATM）及网际互连原理与实现。',
+        },
+        {
+          title: '运输层',
+          time: '2021-06-08',
+          desc: '增加复用和分用的功能、 消除网络层的不可靠性、 提供从源端主机到目的端主机的可靠的、与实际使用的网络无关的信息传输。运输层是ISO/OSI的第四层，处于通信子网和资源子网之间，是整个协议层次中最核心的一层。',
+        },
+      ],
+      animate: false,
+      setInTime: '', // 定时器
+    };
+  },
+
+  mounted() {
+    this.setInTime = setInterval(this.showMarquee, 3000);
+  },
+
+  destroyed() {
+    clearInterval(this.setInTime); // 页面销毁时清除定时器
+  },
+
+  methods: {
+    // 滚动栏滚动
+    showMarquee() {
+      this.animate = true;
+      setTimeout(() => {
+        this.msg.push(this.msg[0]);
+        this.msg.shift();
+        this.animate = false;
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.roll {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.roll ul {
+  width: 80%;
+  height: 88%;
+  position: absolute;
+  top: 6%;
+  left: 10%;
+  overflow: hidden;
+}
+
+.roll ul li {
+  width: 100%;
+  height: 79rem;
+  background: url("../assets/img/memorabilia-bg.png") no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 20rem;
+  padding: 6rem 20rem 0;
+}
+
+.box-title {
+  color: #fff;
+}
+
+.box-title .title {
+  font-size: 16rem;
+}
+
+.box-title .time {
+  font-size: 10rem;
+}
+
+.txt {
+  font-size: 12rem;
+  color: #19a2cc;
+  line-height: 20rem;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+  overflow: hidden;
+}
+
+.marquee_top {
+  transition: all 2s ease-in;
+  /* margin-top: -26px; */
+}
+</style>

src/components/parkingSpace.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="box-bg">
+    <!-- 停车位 -->
+    <div :style="{ width: '100%', height: '100%' }" id="parkingSpace"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+
+export default defineComponent({
+  name: "parkingSpace",
+  data() {
+    return {
+      myCharts: {},
+      carOfInLists: [],
+      carOfOutLists: [],
+    };
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    // 绘制图表
+    getOptions() {
+      const parkingSpace = document.getElementById("parkingSpace");
+      this.myCharts = echarts.init(parkingSpace);
+      this.myCharts.setOption({
+        series: [
+          {
+            type: "gauge",
+            progress: {
+              show: true,
+              width: -15,
+            },
+            axisLine: {
+              lineStyle: {
+                width: -15,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              length: 20,
+              lineStyle: {
+                width: 2,
+                color: "#999",
+              },
+            },
+            axisLabel: {
+              distance: -10,
+              color: "#999",
+              fontSize: 12,
+            },
+            anchor: {
+              show: true,
+              showAbove: true,
+              size: 15,
+              itemStyle: {
+                borderWidth: 10,
+              },
+            },
+            title: {
+              fontSize: 12,
+              color: "#fff",
+            },
+            detail: {
+              valueAnimation: true,
+              fontSize: 18,
+              color: "#fff",
+            },
+            data: [
+              {
+                value: 62.89,
+                name: "停车位",
+                title: {
+                  offsetCenter: ["0%", "70%"],
+                },
+                detail: {
+                  offsetCenter: ["0%", "100%"],
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.parkingSpace {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/side-item.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center flex-1 pb-24">
     <div class="head">{{ title }}</div>
-    <div class="flex-1 bg-yellow-50 opacity-10" style="width: 100%">
+    <div class="flex-1 box-bg" style="width: 100%">
       <slot></slot>
     </div>
   </div>
@@ -27,4 +27,8 @@ export default defineComponent({
   justify-content: center;
   font-size: 18rem;
 }
+
+.box-bg {
+  background: rgba(0, 0, 0, 0.3);
+}
 </style>

src/components/usableArea.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="box-bg">
+    <!-- 使用面积 -->
+    <div :style="{ width: '100%', height: '100%' }" id="usableArea"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+
+export default defineComponent({
+  name: "usableArea",
+  data() {
+    return {
+      myCharts: {},
+      carOfInLists: [],
+      carOfOutLists: [],
+    };
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    // 绘制图表
+    getOptions() {
+      const usableArea = document.getElementById("usableArea");
+      this.myCharts = echarts.init(usableArea);
+      this.myCharts.setOption({
+        series: [
+          {
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 15,
+                color: [
+                  [0.3, "#67e0e3"],
+                  [0.7, "#37a2da"],
+                  [1, "#fd666d"],
+                ],
+              },
+            },
+            pointer: {
+              itemStyle: {
+                color: "auto",
+              },
+            },
+            axisTick: {
+              distance: -30,
+              length: 8,
+              lineStyle: {
+                color: "#fff",
+                width: 2,
+              },
+            },
+            splitLine: {
+              distance: -30,
+              length: 30,
+              lineStyle: {
+                color: "#fff",
+                width: 4,
+              },
+            },
+            axisLabel: {
+              color: "auto",
+              distance: 20,
+              fontSize: 12,
+            },
+            title: {
+              fontSize: 12,
+              color: "#fff",
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: "{value} %",
+              color: "#fff",
+              fontSize: 18,
+              offsetCenter: [0, "90%"],
+            },
+            data: [
+              {
+                value: 73,
+                name: "使用面积",
+                title: {
+                  offsetCenter: ["0%", "70%"],
+                },
+                detail: {
+                  offsetCenter: ["0%", "100%"],
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.usableArea {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/components/warehouse.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="box-bg">
+    <div :style="{ width: '92%', height: '94%',margin: 'auto 3% auto 5%' }" id="warehouse"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import * as echarts from "echarts";
+
+export default defineComponent({
+  name: "warehouse",
+  data() {
+    return {
+      myCharts: {},
+      carOfInLists: [],
+      carOfOutLists: [],
+    };
+  },
+
+  mounted() {
+    // 绘制图表
+    this.getOptions();
+  },
+
+  methods: {
+    // 绘制图表
+    getOptions() {
+      const warehouse = document.getElementById("warehouse");
+      this.myCharts = echarts.init(warehouse);
+      this.myCharts.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c} ({d}%)",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: [15, 95],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 4,
+            },
+            data: [
+              { value: 40, name: "1号仓库" },
+              { value: 38, name: "2号仓库" },
+              { value: 32, name: "3号仓库" },
+              { value: 30, name: "4号仓库" },
+              { value: 28, name: "5号仓库" },
+            ],
+          },
+        ],
+      });
+    },
+  },
+});
+</script>
+
+<style scoped>
+.box-bg {
+  width: 100%;
+  height: 100%;
+}
+
+.warehouse {
+  width: 1440rem;
+  height: 1110rem;
+}
+</style>

src/utils/http.ts

@@ -14,7 +14,6 @@ service.interceptors.request.use((config: AxiosRequestConfig) => {
 
 service.interceptors.response.use((response: AxiosResponse) => {
   // 处理响应数据
-  console.log('responseL: ', response);
   if (response.status !== 200) {
     alert('请检查服务器连接')
     return Promise.reject('请检查服务器连接');

src/views/repo-5.vue

@@ -4,23 +4,34 @@
 
   <container>
     <template v-slot:left>
-      <side-item title="大事记"></side-item>
+      <side-item title="大事记">
-      <side-item title="仪表盘"></side-item>
+        <memorabilia />
-      <side-item title="仓库吞吐量对比图"></side-item>
+      </side-item>
+      <side-item title="仪表盘">
+        <div class="flex justify-between" style="width:100%;height:100%">
+          <parking-space />
+          <usable-area />
+        </div>
+      </side-item>
+      <side-item title="仓库吞吐量对比图">
+        <warehouse />
+      </side-item>
     </template>
 
     <template v-slot:center>
-      <iframe
+      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/0"></iframe>
-        src="https://www.tall.wiki/wl/0"
-        frameborder="0"
-        class="block frame"
-      ></iframe>
     </template>
 
     <template v-slot:right>
-      <side-item title="货物吞吐量曲线"></side-item>
+      <side-item title="货物吞吐量曲线">
-      <side-item title="进出车次统计"></side-item>
+        <curve />
-      <side-item title="园区财务统计表"></side-item>
+      </side-item>
+      <side-item title="进出车次统计">
+        <amount />
+      </side-item>
+      <side-item title="园区财务统计表">
+        <finance />
+      </side-item>
     </template>
   </container>
 
@@ -34,9 +45,28 @@ import TopBar from "comp/top-bar.vue";
 import Container from "comp/content.vue";
 import SideItem from "comp/side-item.vue";
 import FooterBar from "comp/footer-bar.vue";
+import Curve from "comp/curve.vue";
+import Amount from "@/components/amount.vue";
+import Finance from "@/components/finance.vue";
+import Warehouse from "@/components/warehouse.vue";
+import ParkingSpace from "@/components/parkingSpace.vue";
+import UsableArea from "@/components/usableArea.vue";
+import Memorabilia from "@/components/memorabilia.vue";
 
 export default defineComponent({
-  components: { TopBar, Container, SideItem, FooterBar },
+  components: {
+    TopBar,
+    Container,
+    SideItem,
+    FooterBar,
+    Curve,
+    Amount,
+    Finance,
+    Warehouse,
+    ParkingSpace,
+    UsableArea,
+    Memorabilia,
+  },
   setup() {},
 });
 </script>