diff --git a/package-lock.json b/package-lock.json
index e7412d7..09f1479 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1892,6 +1892,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2056,47 +2099,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -2412,6 +2414,14 @@
         "lodash": "^4.17.14"
       }
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -2432,6 +2442,11 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -2483,6 +2498,27 @@
         "@babel/helper-define-polyfill-provider": "^0.3.3"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3012,6 +3048,15 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "9.1.0",
       "resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
@@ -3317,8 +3362,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
     },
     "default-gateway": {
       "version": "6.0.3",
@@ -3557,6 +3601,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.2.0.tgz",
+      "integrity": "sha512-7CrCKGRjFdpLIJ/Yt1gpHeqs5PiCem2GHPdWZPwKl7WSYeZu0Qzm1bcCFe9/b4dfVaL1zlY4JmdzaVwKksVeqg==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -3569,6 +3629,19 @@
       "integrity": "sha512-ndBQYz3Eyy3rASjjQ9poMJGoAlsZ/aZnq6GBsGL4w/4sWIAwiUHVSsMuADbxa8WJw7pZ0oxLpGbtoDt4vRTdCg==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.13",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.13.tgz",
+      "integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -3612,6 +3685,16 @@
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
@@ -4322,6 +4405,13 @@
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4453,6 +4543,12 @@
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
       "dev": true
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -4610,6 +4706,68 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-7.3.0.tgz",
+      "integrity": "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "lilconfig": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -5098,6 +5256,40 @@
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
+    "needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
@@ -5185,6 +5377,11 @@
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -5428,6 +5625,12 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
@@ -5514,6 +5717,13 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -5941,6 +6151,13 @@
         }
       }
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -6162,6 +6379,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -6231,6 +6453,13 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true
+    },
     "schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -6768,6 +6997,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
@@ -7528,6 +7762,21 @@
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.2.0.tgz",
+      "integrity": "sha512-87v3gvB0lcWy48ObA/DwrhQ95ADMMRhECVrXmHDFCBNvbxHFfEDZtrZh4VmVjLAeFAjimY4PyZ65rbLCivdszA==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 4217a20..b223f40 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "echarts": "^5.2.0",
+    "element-ui": "^2.15.13",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
@@ -17,6 +19,8 @@
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "less": "^4.1.3",
+    "less-loader": "^7.3.0",
     "vue-template-compiler": "^2.6.14"
   },
   "browserslist": [
diff --git a/src/App.vue b/src/App.vue
index 240acf4..2961593 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,198 @@
 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
-    <router-view/>
+    <iframe id="iframe" src="" frameborder="0"></iframe>
+    <header class="nav">
+      <div class="wether">
+        <img src="@/assets/images/cloudy.png" alt="">
+        <span class="tianqi">多云</span>
+      </div>
+      <el-select v-model="value" placeholder="请选择">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+      <el-input placeholder="请输入" v-model="input3">
+        <i slot="suffix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+      <ul>
+        <li v-for="s in liImgs" class="nav-li">
+          <img :src="s.img" alt="">
+        </li>
+      </ul>
+    </header>
+    <aside class="right-aside">
+      <span v-for="(s, i) in heatList" :class="`span${i}`" :key="i">
+        {{ s }}
+      </span>
+    </aside>
+    <router-view />
   </div>
 </template>
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      heatList: [20, 40, 200, 100],
+      liImgs: [
+        { img: require('@/assets/images/1.png') },
+        { img: require('@/assets/images/2.png') },
+        { img: require('@/assets/images/3.png') },
+        { img: require('@/assets/images/4.png') },
+        { img: require('@/assets/images/5.png') },
+        { img: require('@/assets/images/6.png') }
+      ],
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '仓位号',
+
+      input3: '',
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .el-input__inner {
+  background-color: transparent !important;
+  border-color: transparent !important;
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
 }
 
-nav {
-  padding: 30px;
+/deep/ .el-select {
+  width: 13%;
+  margin: 0 5px;
 }
 
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
+/deep/ .el-select>.el-input {
+  width: 100%;
+  
 }
 
-nav a.router-link-exact-active {
-  color: #42b983;
+/deep/ .el-input {
+  width: 25%;
+  margin: 0 5px;
+  box-shadow: 0 0 10px #5d8cad;
+  border-radius: 4px;
 }
 </style>
+<style lang="less" >
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+body,
+html {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  #iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+.nav {
+  // width: 42.4%;
+
+  position: fixed;
+  right: 0;
+  top: 0;
+  height: 7.4%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .wether {
+    display: flex;
+    align-items: center;
+
+    .tianqi {
+      width: 40px;
+      color: #FFF;
+      font-family: quare;
+      vertical-align: middle;
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+  }
+
+  ul {
+    display: flex;
+    // justify-content: center;
+    align-items: center;
+
+    .nav-li {
+      width: 45px;
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 5px;
+      // background-color: rgba(35, 95, 156, 0.2);
+      border-radius: 8px;
+      box-shadow: 0 0 10px #5d8cad;
+    }
+  }
+
+}
+
+.right-aside {
+  width: 4.7%;
+  height: 34.6%;
+  top: 35%;
+  right: 0;
+  position: absolute;
+  background-image: url('@/assets/images/aside.png');
+  background-size: 100% 100%;
+
+  span {
+    font-size: 18px;
+    color: rgb(255, 255, 255);
+    line-height: 1;
+    z-index: 1406;
+    left: 8%;
+    position: absolute;
+    font-family: quare;
+  }
+
+  .span0 {
+    top: 9%;
+  }
+
+  .span1 {
+    top: 38%;
+  }
+
+  .span2 {
+    top: 67%;
+  }
+
+  .span3 {
+    top: 95%;
+  }
+
+  // display: flex;
+  // align-items: center;
+}</style>
diff --git a/src/assets/font/font.less b/src/assets/font/font.less
new file mode 100644
index 0000000..7f48fc5
--- /dev/null
+++ b/src/assets/font/font.less
@@ -0,0 +1,4 @@
+@font-face {
+    font-family: quare;
+    src: url(../quare.TTF);
+}
\ No newline at end of file
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..70ac8b2
Binary files /dev/null and b/src/assets/images/1.png differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..ed40d93
Binary files /dev/null and b/src/assets/images/2.png differ
diff --git a/src/assets/images/3.png b/src/assets/images/3.png
new file mode 100644
index 0000000..50725bb
Binary files /dev/null and b/src/assets/images/3.png differ
diff --git a/src/assets/images/4.png b/src/assets/images/4.png
new file mode 100644
index 0000000..ac2dc42
Binary files /dev/null and b/src/assets/images/4.png differ
diff --git a/src/assets/images/5.png b/src/assets/images/5.png
new file mode 100644
index 0000000..3ce4913
Binary files /dev/null and b/src/assets/images/5.png differ
diff --git a/src/assets/images/6.png b/src/assets/images/6.png
new file mode 100644
index 0000000..9339ccc
Binary files /dev/null and b/src/assets/images/6.png differ
diff --git a/src/assets/images/aside.png b/src/assets/images/aside.png
new file mode 100644
index 0000000..08de079
Binary files /dev/null and b/src/assets/images/aside.png differ
diff --git a/src/assets/images/cloudy.png b/src/assets/images/cloudy.png
new file mode 100644
index 0000000..373822b
Binary files /dev/null and b/src/assets/images/cloudy.png differ
diff --git a/src/assets/images/enter-default.png b/src/assets/images/enter-default.png
new file mode 100644
index 0000000..5734fb4
Binary files /dev/null and b/src/assets/images/enter-default.png differ
diff --git a/src/assets/images/enter-select.png b/src/assets/images/enter-select.png
new file mode 100644
index 0000000..36ce5a8
Binary files /dev/null and b/src/assets/images/enter-select.png differ
diff --git a/src/assets/images/freeze.png b/src/assets/images/freeze.png
new file mode 100644
index 0000000..6288041
Binary files /dev/null and b/src/assets/images/freeze.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..cf1cdc1
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/manage-default.png b/src/assets/images/manage-default.png
new file mode 100644
index 0000000..cd03529
Binary files /dev/null and b/src/assets/images/manage-default.png differ
diff --git a/src/assets/images/manage-select.png b/src/assets/images/manage-select.png
new file mode 100644
index 0000000..ca2a52f
Binary files /dev/null and b/src/assets/images/manage-select.png differ
diff --git a/src/assets/images/out-default.png b/src/assets/images/out-default.png
new file mode 100644
index 0000000..252986e
Binary files /dev/null and b/src/assets/images/out-default.png differ
diff --git a/src/assets/images/out-select.png b/src/assets/images/out-select.png
new file mode 100644
index 0000000..ae40be6
Binary files /dev/null and b/src/assets/images/out-select.png differ
diff --git a/src/assets/images/overview-default.png b/src/assets/images/overview-default.png
new file mode 100644
index 0000000..badc85a
Binary files /dev/null and b/src/assets/images/overview-default.png differ
diff --git a/src/assets/images/overview-select.png b/src/assets/images/overview-select.png
new file mode 100644
index 0000000..d48234f
Binary files /dev/null and b/src/assets/images/overview-select.png differ
diff --git a/src/assets/images/stock-default.png b/src/assets/images/stock-default.png
new file mode 100644
index 0000000..16bf3e1
Binary files /dev/null and b/src/assets/images/stock-default.png differ
diff --git a/src/assets/images/stock-select.png b/src/assets/images/stock-select.png
new file mode 100644
index 0000000..addde5b
Binary files /dev/null and b/src/assets/images/stock-select.png differ
diff --git a/src/assets/images/testing.png b/src/assets/images/testing.png
new file mode 100644
index 0000000..c8f160d
Binary files /dev/null and b/src/assets/images/testing.png differ
diff --git a/src/assets/images/upstock.png b/src/assets/images/upstock.png
new file mode 100644
index 0000000..6a5a734
Binary files /dev/null and b/src/assets/images/upstock.png differ
diff --git a/src/assets/images/关闭.png b/src/assets/images/关闭.png
new file mode 100644
index 0000000..c9de164
Binary files /dev/null and b/src/assets/images/关闭.png differ
diff --git a/src/assets/images/图层 1(1).png b/src/assets/images/图层 1(1).png
new file mode 100644
index 0000000..9cf32b6
Binary files /dev/null and b/src/assets/images/图层 1(1).png differ
diff --git a/src/assets/images/边1.png b/src/assets/images/边1.png
new file mode 100644
index 0000000..382f866
Binary files /dev/null and b/src/assets/images/边1.png differ
diff --git a/src/assets/images/边2.png b/src/assets/images/边2.png
new file mode 100644
index 0000000..ac5851e
Binary files /dev/null and b/src/assets/images/边2.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/assets/quare.TTF b/src/assets/quare.TTF
new file mode 100644
index 0000000..3a998d0
Binary files /dev/null and b/src/assets/quare.TTF differ
diff --git a/src/component/Stock.vue b/src/component/Stock.vue
new file mode 100644
index 0000000..292227b
--- /dev/null
+++ b/src/component/Stock.vue
@@ -0,0 +1,313 @@
+<template>
+    <div class="stockBox">
+        <!-- 当月入库库存 -->
+        <div class="outbound">
+            <div class="title">
+                当月出入库库存
+            </div>
+            <div class="outboundStock" ref="outboundStock">
+
+            </div>
+        </div>
+        <!-- 安全库存 -->
+        <div class="safeStock">
+            <div class="title">
+                安全库存
+            </div>
+            <ul class="ul">
+                <li v-for="(s, i) in ulList" class="stockLi" :key="i">
+                    <img :src="s.pic" alt="">
+                    <span class="liName">{{ s.name }}:</span>
+                    <span class="liNum" :class="'num' + i">{{ s.num }}&nbsp;<span style="font-size: 13px;">万元</span></span>
+                </li>
+            </ul>
+        </div>
+        <!-- 物资概况 -->
+        <div class="material">
+            <div class="title">
+                物资概况
+            </div>
+            <div class="materialContent">
+                <el-input type="textarea" :rows="2" placeholder="库存情况" v-model="textarea">
+                </el-input>
+                <el-input placeholder="任务查询" v-model="inputVal">
+                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                </el-input>
+            </div>
+        </div>
+        <!-- 库存记录 -->
+        <div class="ISR">
+            <div class="title">
+                库存记录
+            </div>
+            <div class="ISR-meassage">
+                <div class="ISR-item" v-for="(s, i) in ISRList" :key="i">
+                    <p :class="'p' + i"><span>产品信息:</span><span>{{ s.productMsg }}</span></p>
+                    <p :class="'p' + i"><span>库位:</span><span class="address">{{ s.address }}</span></p>
+                    <p :class="'p' + i"><span>库存数量:</span>盘点数量共计&nbsp;<span class="num">{{ s.num }}</span></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'Stock',
+    data() {
+        return {
+            ulList: [
+                { name: '非限制', pic: require('@/assets/images/upstock.png'), num: '26285.91' },
+                { name: '质检', pic: require('@/assets/images/testing.png'), num: '1338.31' },
+                { name: '冻结', pic: require('@/assets/images/freeze.png'), num: '2066.08' },
+            ],
+            inputVal: '',
+            ISRList: [
+                { productMsg: '镇江扬中国电电力线缆', address: 'B01-050103', num: '26823' },
+                { productMsg: '镇江扬中国电电力线缆', address: 'B01-050104', num: '17895' },
+            ]
+        }
+    },
+    mounted() {
+        // 当月出库率
+        this.drawOutboundStock()
+    },
+    computed: {
+
+    },
+    methods: {
+        // 当月出库率
+        drawOutboundStock() {
+            let myChart = this.$echarts.init(this.$refs.outboundStock)
+            var xDataArr = ['入库', '出库']
+            var yDataArr = [10, 20]
+            var colors = ['#4587E7', '#55c3f6', '#4351fd', '#f49a58', '#da70d6', '#32cd32'];
+            let option = {
+
+                xAxis: {
+                    boundaryGap: true,
+                    type: 'category',
+                    data: xDataArr,
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        show: true,
+                        textStyle: {
+                            color: "rgb(0,0,0)",
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#57b7e8",
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        show: true,
+                        textStyle: {
+                            color: "rgb(0,0,0)",
+                        },
+                    },
+                    type: 'value',
+                    splitLine: {
+                        lineStyle: {
+                            color: "#ebecec",
+                            type: "dashed",
+                        },
+                    },
+                },
+                grid: { // 让图表占满容器
+                    top: "20%",
+                    left: "15%",
+                    right: "7%",
+                    bottom: "15%"
+                },
+                series: [{
+                    itemStyle: {
+                        color: function (params) {
+                            for (let i = 0; i < xDataArr.length; i++) {
+                                if (xDataArr[i].indexOf(params.name) != -1) {
+                                    return colors[i]
+                                }
+                            }
+                        },
+                    },
+                    name: '星期',
+                    type: 'bar',
+                    barWidth: 20,
+                    data: yDataArr
+                }]
+            }
+
+            myChart.setOption(option)
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
+        },
+    },
+}
+</script>
+<style scoped lang="less">
+.stockBox {
+    width: 100%;
+    height: 100%;
+
+    // 当月出入库库存
+    .outbound {
+        width: 100%;
+        height: 26%;
+        padding-top: 6%;
+        box-sizing: border-box;
+
+        .outboundStock {
+            width: 90%;
+            height: 80%;
+            background-color: #fff;
+            margin: 0 auto;
+            border-radius: 10px;
+        }
+    }
+
+    // 安全库存
+    .safeStock {
+        width: 100%;
+        height: 27%;
+
+        .ul {
+            width: 90%;
+            height: 85%;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .stockLi {
+                width: 100%;
+                height: 30%;
+                display: flex;
+                align-items: center;
+                background-color: rgba(255, 255, 255, .8);
+                border-radius: 10px;
+
+                img {
+                    margin: 0 7%;
+                }
+
+                .liName {
+                    width: 52px;
+                    margin: 0 4%;
+                }
+
+                .liNum {
+                    font-family: quare;
+
+                }
+
+                .num0 {
+                    color: #e96a2b;
+                }
+
+                .num1 {
+                    color: #4351fd;
+                }
+
+                .num2 {
+                    color: #55c3f6;
+                }
+
+            }
+        }
+    }
+
+    // 物资概况
+    .material {
+        padding-top: 2%;
+        box-sizing: border-box;
+        height: 20%;
+        width: 100%;
+
+        .materialContent {
+            width: 100%;
+            height: 80%;
+            display: flex;
+            // justify-content: center;
+            flex-direction: column;
+            justify-content: space-between;
+
+            /deep/ .el-textarea {
+                width: 90% !important;
+                height: 60%;
+                margin: 0 auto;
+                border-radius: 10px !important;
+            }
+
+            /deep/ .el-textarea__inner {
+                background-color: rgba(255, 255, 255, .8);
+                color: #e3e3e3;
+                border-radius: 10px;
+                height: 100%;
+            }
+
+            /deep/ .el-input {
+                width: 90%;
+                margin: 0 auto;
+                background-color: rgba(255, 255, 255, .8);
+                box-shadow: none;
+                border-radius: 10px;
+            }
+        }
+
+    }
+
+    // 库存记录
+    .ISR {
+        padding-top: 2%;
+        box-sizing: border-box;
+        width: 100%;
+        height: 26%;
+
+        .ISR-meassage {
+            width: 100%;
+            height: 80%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .ISR-item {
+                width: 90%;
+                height: 45%;
+                margin: 0 auto;
+                border-radius: 10px;
+                background-color: rgba(255, 255, 255, .8);
+                padding-left: 6%;
+                box-sizing: border-box;
+                font-size: 14px;
+                display: flex;
+                justify-content: space-evenly;
+                flex-direction: column;
+                p>span:nth-child(1){
+                    display: inline-block;
+                    width: 5em;
+                }
+                
+                .address,.num{
+                    font-family: quare;
+                    color: #4c59fd;
+                }
+                .p1 {
+                    width: 100%;
+
+                }
+            }
+        }
+    }
+
+    .title {
+        font-size: 16px;
+        margin-left: 7%;
+        margin-bottom: 4%;
+    }
+}</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index b9f3c7d..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index f253456..6a66678 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,9 +2,14 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI)
 Vue.config.productionTip = false
-
+// 导入echarts
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+import '@/assets/font/font.less';
 new Vue({
   router,
   store,
diff --git a/src/router/index.js b/src/router/index.js
index c937ad9..d0c2dd0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,23 +1,20 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+// import HomeView from '../views/HomeView.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: HomeView
+    redirect: '/index',
+    component: () => import('@/views/index.vue')
   },
   {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+    path: '/index',
+    name: 'index',
+    component: () => import('@/views/index.vue')
+  },
 ]
 
 const router = new VueRouter({
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index e8d96d7..0000000
--- a/src/views/HomeView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>
diff --git a/src/views/index.vue b/src/views/index.vue
new file mode 100644
index 0000000..9da661c
--- /dev/null
+++ b/src/views/index.vue
@@ -0,0 +1,794 @@
+<template>
+    <div class="aside">
+        <div class="aside-box">
+            <div class="left-item">
+                <div class="logo">
+                    <img src="@/assets/images/logo.png" alt="">
+                </div>
+                <!-- 右边小图标样式 -->
+                <ul class="icons">
+                    <li class="icon-item" v-for="(s, i) in asideList" :key="i" @click="updateImg(i)">
+                        <img :src="i == index ? s.select : s.pic" alt="">
+                        <span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
+                    </li>
+                </ul>
+            </div>
+            <!-- <transition name="slide-fade"> -->
+                <div class="right-item" v-if="index == 0">
+                    <!-- 仓库使用率 -->
+                    <div class="storeUse" ref="storeUse">
+
+                    </div>
+                    <!-- 每月周转率 -->
+                    <div class="monthlyTurnover">
+                        <div class="title">
+                            每日周转率
+                        </div>
+                        <div class="turnoverChart" ref="turnoverChart">
+
+                        </div>
+                    </div>
+                    <!-- 当月出库金额 -->
+                    <div class="outboundAmount">
+                        <div class="title">
+                            当月出库金额
+                        </div>
+                        <div class="outboundChart" ref="outboundChart">
+
+                        </div>
+                    </div>
+                    <!-- 积压物资 -->
+                    <div class="overStock" ref="overStock">
+                        <div class="title">
+                            积压物资
+                        </div>
+                        <div class="overChart" ref="oveChart">
+
+                        </div>
+                    </div>
+                </div>
+            <!-- </transition> -->
+            <!-- <transition name="move"> -->
+                <Stock v-if="index == 1" class="right-item" />
+            <!-- </transition> -->
+
+        </div>
+
+    </div>
+</template>
+<script>
+import Stock from '@/component/Stock.vue'
+export default {
+    name: 'index',
+    components: {
+        Stock,
+    },
+    data() {
+        return {
+            index: 0,
+            asideList: [
+                { name: '总览', select: require("@/assets/images/overview-select.png"), pic: require('@/assets/images/overview-default.png') },
+                { name: '库存', select: require("@/assets/images/stock-select.png"), pic: require('@/assets/images/stock-default.png') },
+                { name: '入库', select: require("@/assets/images/enter-select.png"), pic: require('@/assets/images/enter-default.png') },
+                { name: '出库', select: require("@/assets/images/out-select.png"), pic: require('@/assets/images/out-default.png') },
+                { name: '管理', select: require("@/assets/images/manage-select.png"), pic: require('@/assets/images/manage-default.png') }
+            ],
+            storemyChart: '',//仓库使用率echarts
+            myChart2: '',//每月周转率echarts
+            myChart3: '',//当月出库金额echarts
+            myChart4: '',//积压物资
+        }
+    },
+    mounted() {
+        // 总览界面echarts
+        this.drawStore()
+        this.drawTurnoverChart()
+        this.drawOutbound()
+        this.drawOverStock()
+    },
+    watch: {
+        index: {
+            handler(newVal) {
+                if (newVal) {
+                    this.$nextTick(() => {
+                        
+                        // console.log(1);
+                        // console.log(this.myChart2.resize());
+                        this.storemyChart.resize()
+                        // this.myChart2.resize
+                        // this.myChart3.resize
+                        // this.myChart4.resize
+                    })
+                }
+            }
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+        // 切图
+        updateImg(i) {
+            this.index = i
+            if (this.index == 0) {
+                this.$nextTick(() => {
+                    // 总览界面echarts
+                    this.drawStore()
+                    this.drawTurnoverChart()
+                    this.drawOutbound()
+                    this.drawOverStock()
+                })
+            }
+
+        },
+        // 仓库使用率的ecahrt图
+        drawStore() {
+            this.storemyChart = this.$echarts.init(this.$refs.storeUse)
+            const chartData = [
+                {
+                    value: 24,
+                    name: "使用率",
+                },
+                {
+                    value: 76,
+                    name: "空闲率",
+                },
+
+            ];
+            const colorList = ['#88D9FF', '#0092FF', '#81EDD2', '#B0FA93', '#63F2FF', '#9999FE'];
+            const pieData1 = [];
+            // const pieData2 = [];
+            // 图型条间距
+            const gapData = {
+                name: "",
+                value: 5,
+                itemStyle: {
+                    color: "transparent",
+                },
+            };
+            let lefts = ["20%", "20%", "center", "center", "center", "center"];
+            let tops = ["48%", "60%", "55%", "24%", "37%", "55%"];
+            let legendData = [];
+            let total = 0;
+            chartData.forEach((item) => {
+                total += item.value;
+            });
+
+            for (let i = 0; i < chartData.length; i++) {
+                // 第一圈数据
+                pieData1.push({
+                    ...chartData[i],
+                    itemStyle: {
+                        borderRadius: 10,
+                    },
+                });
+                pieData1.push(gapData);
+                legendData.push({
+                    show: true,
+                    icon: "circle",
+                    itemHeight: 6,
+                    itemWidth: 4, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+                    left: lefts[i],
+                    top: tops[i],
+                    itemStyle: {
+                        color: colorList[i],
+                    },
+                    formatter:
+                        `{aa| ` + chartData[i].name + ` } `, // 也可以是个函数return
+                    x: "left",
+                    textStyle: {
+                        // color: "#BAFF7F",
+                        rich: {
+                            aa: {
+                                color: "#000",
+                                fontSize: 14,
+                            },
+
+                        },
+                    },
+                    data: [chartData[i].name],
+                },
+                    {
+                        show: true,
+                        icon: "circle",
+                        itemWidth: 4,
+                        itemHeight: 6, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+                        left: '65%',
+                        top: tops[i],
+                        itemStyle: {
+                            color: colorList[i],
+                        },
+                        formatter:
+                            `{aa| ` + chartData[i].name + ` }{val| ` + parseInt(chartData[i].value / total * 100) + `% }`, // 也可以是个函数return
+                        x: "left",
+                        textStyle: {
+                            // color: "#BAFF7F",
+                            rich: {
+                                aa: {
+
+                                    color: "#ffffff",
+                                },
+                                val: {
+                                    color: "#fff",
+                                    fontWeight: 'bold'
+                                }
+                            },
+                        },
+                        data: [chartData[i].name],
+                    },
+                );
+            }
+
+            // console.log("pieData2---------", pieData2);
+
+            let option = {
+
+                title: {
+                    text: "仓库使用率",
+                    x: '5%',
+                    y: '10%',
+                    textStyle: {
+                        color: '#000',
+                        fontSize: 16,
+                        fontWeight: 'normal'
+                    }
+                },
+                legend: legendData,
+                // backgroundColor: "#0F141B",
+                tooltip: {
+                    show: true,
+                    backgroundColor: "rgba(0, 0, 0,.8)",
+                    textStyle: {
+                        color: "#fff",
+                    },
+                },
+                color: colorList,
+                series: [
+                    {
+                        name: '',
+                        type: 'pie',
+                        roundCap: true,
+                        radius: ['52%', '60%'],
+                        center: ['30%', '60%'],
+                        label: {
+                            show: false
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: pieData1
+                    },
+
+                    {
+                        type: 'gauge',
+                        zlevel: 2,
+                        splitNumber: 90,
+                        radius: '67%',
+                        center: ['30%', '60%'],
+                        startAngle: 90,
+                        endAngle: -269.9999,
+                        axisLine: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: true,
+                            length: 1,
+                            lineStyle: {
+                                width: 1,
+                                color: 'rgb(33,85,130)',
+                            },
+                        },
+                        pointer: {
+                            show: 0,
+                        },
+                        detail: {
+                            show: 0,
+                        },
+                    },
+
+                ],
+            };
+
+            this.storemyChart.setOption(option)
+            window.addEventListener('resize', () => {
+                this.storemyChart.resize();
+            });
+        },
+        // 每日周转率
+        drawTurnoverChart() {
+            this.myChart2 = this.$echarts.init(this.$refs.turnoverChart)
+            var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月']
+            var yDataArr = [0, 182, 191, 150, 0, 0, 0]
+            var colors = ['#4587E7', '#55c3f6', '#4351fd', '#f49a58', '#da70d6', '#32cd32'];
+            let option = {
+
+                xAxis: {
+                    boundaryGap: true,
+                    type: 'category',
+                    data: xDataArr,
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        show: true,
+                        textStyle: {
+                            color: "rgb(0,0,0)",
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#57b7e8",
+                        },
+                    },
+                },
+                yAxis: {
+                    axisLabel: {
+                        //坐标轴刻度标签的相关设置。
+                        show: true,
+                        textStyle: {
+                            color: "rgb(0,0,0)",
+                        },
+                    },
+                    type: 'value',
+                    splitLine: {
+                        lineStyle: {
+                            color: "#ebecec",
+                            type: "dashed",
+                        },
+                    },
+                },
+                grid: { // 让图表占满容器
+                    top: "20%",
+                    left: "15%",
+                    right: "7%",
+                    bottom: "15%"
+                },
+                series: [{
+                    itemStyle: {
+                        color: function (params) {
+                            for (let i = 0; i < xDataArr.length; i++) {
+                                if (xDataArr[i].indexOf(params.name) != -1) {
+                                    return colors[i]
+                                }
+                            }
+                        },
+                    },
+                    name: '星期',
+                    type: 'bar',
+                    barWidth: 20,
+                    data: yDataArr
+                }]
+            }
+
+            this.myChart2.setOption(option)
+            window.addEventListener('resize', () => {
+                this.myChart2.resize();
+            });
+        },
+        // 当月出库金额
+        drawOutbound() {
+            this.myChart3 = this.$echarts.init(this.$refs.outboundChart)
+            let option = {
+
+                legend: {
+                    data: ['入库', '出库'],
+                    textStyle: {
+                        align: 'right',
+                    },
+                    top: '2%',
+                    right: '2%',
+                },
+
+                tooltip: {
+                    trigger: 'axis',
+                },
+
+                grid: { // 让图表占满容器
+                    top: "20%",
+                    left: "15%",
+                    right: "7%",
+                    bottom: "15%"
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            lineStyle: {
+                                color: "#57b7e8",
+                            },
+                        },
+                        axisLabel: {
+                            //坐标轴刻度标签的相关设置。
+                            show: true,
+                            textStyle: {
+                                color: "rgb(0,0,0)",
+                            },
+                        },
+                        splitArea: {
+                            // show: true,
+                            color: '#f00',
+                            lineStyle: {
+                                color: '#f00',
+                            },
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+
+                        boundaryGap: true,
+                        data: [0, 5, 10, 15, 20, 25, 30],
+                    },
+                ],
+
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '单位:万元',
+                        min: 0,
+                        // max: 140,
+                        splitNumber: 4,
+                        splitLine: {
+                            lineStyle: {
+                                color: "#ebecec",
+                                type: "dashed",
+                            },
+                        },
+                        axisLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            //坐标轴刻度标签的相关设置。
+                            show: true,
+                            textStyle: {
+                                color: "rgb(0,0,0)",
+                            },
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: '入库',
+                        type: 'line',
+                        smooth: true, //是否平滑
+                        // showAllSymbol: true,
+                        symbol: 'none',
+                        // symbolSize: 12,
+                        lineStyle: {
+                            normal: {
+                                color: '#7AA1FF',
+                            },
+                        },
+                        // itemStyle: {
+                        //     color: '#7AA1FF',
+                        //     borderWidth: 3,
+                        //     borderColor: '#f3f3f3',
+                        // },
+                        data: [42.8, 14.7, 13.2, 32.1, 10.4],
+                    },
+                    {
+                        name: '出库',
+                        type: 'line',
+                        smooth: true, //是否平滑
+                        symbol: 'none',
+                        symbolSize: 12,
+                        lineStyle: {
+                            normal: {
+                                color: '#00ca95',
+                            },
+                        },
+                        itemStyle: {
+                            color: '#00ca95',
+                            borderColor: '#fff',
+                            borderWidth: 3,
+                        },
+                        data: [0, 0, 38.6, 26.4, 34.4],
+                    },
+
+                ],
+            };
+            this.myChart3.setOption(option)
+            window.addEventListener('resize', () => {
+                this.myChart3.resize();
+            });
+        },
+        // 积压物质
+        drawOverStock() {
+            this.myChart4 = this.$echarts.init(this.$refs.oveChart)
+            var data = [
+                {
+                    name: "积压物资",
+                    value: 54,
+                },
+                {
+                    name: "非积压物质",
+                    value: 44,
+                },
+
+            ];
+
+            var titleArr = [],
+                seriesArr = [];
+            var colors = [
+                ["#389af4", "#dfeaff"],
+                ["#ff8c37", "#ffdcc3"],
+                ["#ffc257", "#ffedcc"],
+                ["#fd6f97", "#fed4e0"],
+                ["#a181fc", "#e3d9fe"],
+            ];
+            var legendData = []
+            data.forEach(function (item, index) {
+                legendData.push({
+                    data: [index == 0 ? item.name : ""],
+                    show: true,
+                    icon: "circle",
+                    itemHeight: 0,
+                    itemWidth: 0, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+                    left: "18%",
+                    bottom: '10%',
+                    itemStyle: {
+                        color: colors[index],
+                    },
+                    formatter:
+                        `{aa|20000万  }\n {bb| 总物资    }`, // 也可以是个函数return
+                    x: "left",
+                    textStyle: {
+                        // color: "#BAFF7F",
+                        rich: {
+                            aa: {
+                                color: colors[index][0],
+                                fontSize: 14,
+                                fontWeight: 'blod',
+                                padding: [0, 0, 8, 0],
+                            },
+                            bb: {
+                                color: '#000'
+                            }
+                        },
+                    },
+                }, {
+                    data: [index == 1 ? item.name : ""],
+                    show: true,
+                    icon: "circle",
+                    itemHeight: 0,
+                    itemWidth: 0, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+                    left: "55%",
+                    bottom: '10%',
+                    itemStyle: {
+                        color: colors[index],
+                    },
+                    formatter:
+                        `{aa|${(item.value / 100 * 100).toFixed(2)}%  }\n {bb| ${item.name}占比    }`, // 也可以是个函数return
+                    x: "left",
+                    textStyle: {
+                        // color: "#BAFF7F",
+                        rich: {
+                            aa: {
+                                color: colors[index][0],
+                                fontSize: 14,
+                                fontWeight: 'blod',
+                                padding: [0, 0, 8, 20]
+                            },
+                            bb: {
+                                color: '#000'
+                            }
+                        },
+                    }
+                })
+                titleArr.push({
+                    text: item.name,
+                    left: index * 40 + 30 + "%",
+                    top: "55%",
+                    textAlign: "center",
+                    textStyle: {
+                        fontWeight: "normal",
+                        fontSize: "14",
+                        color: '#000',
+                        textAlign: "center",
+                    },
+                });
+                seriesArr.push({
+                    name: item.name,
+                    type: "pie",
+                    clockWise: false,
+                    radius: ['40%', '46%'],
+                    itemStyle: {
+                        normal: {
+                            color: colors[index][0],
+                            shadowColor: colors[index][0],
+                            borderRadius: 10,
+                            shadowBlur: 0,
+                            label: {
+                                show: false,
+                            },
+                            labelLine: {
+                                show: false,
+                            },
+                        },
+                    },
+                    hoverAnimation: false,
+                    center: [index * 40 + 30 + "%", "30%"],
+                    data: [
+                        {
+                            value: item.value,
+                            label: {
+                                normal: {
+                                    formatter: function (params) {
+                                        return params.value + '万';
+                                    },
+                                    position: "center",
+                                    show: true,
+                                    textStyle: {
+                                        fontSize: "14",
+                                        fontWeight: "bold",
+                                        color: colors[index][0],
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            value: 100 - item.value,
+                            name: "invisible",
+                            itemStyle: {
+                                normal: {
+                                    color: colors[index][1],
+                                },
+                                emphasis: {
+                                    color: colors[index][1],
+                                },
+                            },
+                        },
+                    ],
+                }, {
+
+                    type: 'pie',
+                    zlevel: -1, // 层级
+                    radius: ['32%', '0'],
+                    center: [index * 40 + 30 + "%", "30%"],
+                    itemStyle: {
+                        normal: {
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0,161,163,0.25)',
+                            color: '#fff',
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        }
+                    },
+                    hoverAnimation: false,
+                    data: [100]
+
+                });
+            });
+
+            let option = {
+                title: titleArr,
+                legend: legendData,
+                series: seriesArr,
+            };
+            this.myChart4.setOption(option)
+            window.addEventListener('resize', () => {
+                this.myChart4.resize();
+            });
+        }
+    },
+}
+</script>
+<style scoped lang="less">
+.aside {
+    width: 21.4%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-left: 3%;
+    position: relative;
+    z-index: 99;
+
+    .aside-box {
+        width: 100%;
+        height: 92.6%;
+        // background-color: rgba(229, 237, 242, .5);
+        border-radius: 20px;
+        display: flex;
+
+        .left-item {
+            width: 18.8%;
+            height: 100%;
+            background-color: #f7f8f9;
+            border-top-left-radius: 20px;
+            border-bottom-left-radius: 20px;
+
+            .logo {
+                margin-top: 15px;
+                display: flex;
+                justify-content: center;
+                margin-bottom: 32px;
+            }
+
+            .icons {
+                width: 100%;
+                height: 10%;
+
+                .icon-item {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    justify-content: center;
+                    align-content: center;
+
+                    img {
+                        display: block;
+                    }
+
+                    span {
+                        display: inline-block;
+                        width: 100%;
+                        text-align: center;
+                        color: #888888;
+                    }
+                }
+            }
+        }
+
+        .right-item {
+            width: 81.2%;
+            height: 100%;
+            background-color: rgba(229, 237, 242, .5);
+            border-top-right-radius: 20px;
+            border-bottom-right-radius: 20px;
+
+            .title {
+                font-size: 16px;
+                margin-left: 7%;
+                margin-bottom: 4%;
+            }
+
+            .storeUse {
+                width: 100%;
+                height: 21.5%;
+            }
+
+            .monthlyTurnover,
+            .outboundAmount {
+                width: 100%;
+                height: 25%;
+
+                .turnoverChart,
+                .outboundChart {
+                    width: 90%;
+                    height: 80%;
+                    background-color: #fff;
+                    margin: 0 auto;
+                    border-radius: 10px;
+                }
+            }
+
+            .overStock {
+                height: calc(100% - 71.5%);
+                width: 100%;
+
+                .overChart {
+                    width: 100%;
+                    height: 80%;
+                }
+            }
+
+
+        }
+    }
+}
+</style>