3.24代码提交
This commit is contained in:
parent
334da54788
commit
3b09dddae8
|
|
@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
204
src/App.vue
204
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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
@font-face {
|
||||
font-family: quare;
|
||||
src: url(../quare.TTF);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
Binary file not shown.
|
After Width: | Height: | Size: 659 B |
Binary file not shown.
|
After Width: | Height: | Size: 627 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 561 B |
Binary file not shown.
|
After Width: | Height: | Size: 512 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 626 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 657 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 717 B |
Binary file not shown.
|
After Width: | Height: | Size: 714 B |
Binary file not shown.
|
After Width: | Height: | Size: 929 B |
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
Binary file not shown.
|
After Width: | Height: | Size: 504 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 780 B |
Binary file not shown.
|
After Width: | Height: | Size: 483 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 367 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
|
@ -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 }} <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>盘点数量共计 <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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue