init:first commit
This commit is contained in:
Zhao Zhao Shen
parent
f1ecd109b0
commit
cb09d8183e
|
|
@ -0,0 +1,27 @@
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
'vue/setup-compiler-macros': true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'@vue/standard'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
parser: '@babel/eslint-parser',
|
||||||
|
requireConfigFile: false
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'vue/multi-word-component-names': 'off'
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
defineProps: 'readonly',
|
||||||
|
defineEmits: 'readonly',
|
||||||
|
defineExpose: 'readonly',
|
||||||
|
withDefaults: 'readonly'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
FROM nginx:alpine
|
||||||
|
COPY dist/ /usr/share/nginx/html/
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# 执行 npm run build
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# 创建新目录
|
||||||
|
mkdir deployment_package
|
||||||
|
|
||||||
|
# 复制 dist 文件夹和 nginx.conf 到新目录
|
||||||
|
cp -r dist deployment_package/
|
||||||
|
cp nginx.conf deployment_package/
|
||||||
|
|
||||||
|
# 切换到包含新目录、Dockerfile 的上级目录
|
||||||
|
cd..
|
||||||
|
|
||||||
|
# 打包
|
||||||
|
tar -czf deployment_package.tar.gz deployment_package/ Dockerfile
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
services:
|
||||||
|
vue-app:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- "8090:80"
|
||||||
|
|
@ -8,8 +8,15 @@
|
||||||
"name": "ix-siemens",
|
"name": "ix-siemens",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@siemens/ix": "^2.5.0",
|
||||||
|
"@siemens/ix-icons": "^2.2.0",
|
||||||
|
"@siemens/ix-vue": "^2.5.0",
|
||||||
|
"axios": "^1.7.9",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"vue": "^3.2.13"
|
"echarts": "^5.6.0",
|
||||||
|
"pinia": "^2.2.2",
|
||||||
|
"vue": "^3.2.13",
|
||||||
|
"vue-router": "^4.4.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.16",
|
"@babel/core": "^7.12.16",
|
||||||
|
|
@ -1868,6 +1875,28 @@
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@floating-ui/core": {
|
||||||
|
"version": "1.6.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
|
||||||
|
"integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/utils": "^0.2.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/dom": {
|
||||||
|
"version": "1.6.11",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.11.tgz",
|
||||||
|
"integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/core": "^1.6.0",
|
||||||
|
"@floating-ui/utils": "^0.2.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/utils": {
|
||||||
|
"version": "0.2.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
|
||||||
|
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
|
||||||
|
},
|
||||||
"node_modules/@hapi/hoek": {
|
"node_modules/@hapi/hoek": {
|
||||||
"version": "9.3.0",
|
"version": "9.3.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
|
||||||
|
|
@ -2030,6 +2059,16 @@
|
||||||
"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
|
"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@popperjs/core": {
|
||||||
|
"version": "2.11.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
|
"peer": true,
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/popperjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@sideway/address": {
|
"node_modules/@sideway/address": {
|
||||||
"version": "4.1.5",
|
"version": "4.1.5",
|
||||||
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz",
|
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz",
|
||||||
|
|
@ -2051,6 +2090,48 @@
|
||||||
"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
|
"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@siemens/ix": {
|
||||||
|
"version": "2.5.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@siemens/ix/-/ix-2.5.0.tgz",
|
||||||
|
"integrity": "sha512-ms3B6rKJEN/VAEn55qoMcc91eK+7v0VRZs3eQGkxLt4nKUKVrhfBMz55Npx7KHug5cA+VIHdSEha5SdH8utd0w==",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/dom": "^1.6.10",
|
||||||
|
"@stencil/core": "~4.17.0",
|
||||||
|
"@types/luxon": "^3.3.7",
|
||||||
|
"animejs": "~3.2.1",
|
||||||
|
"hyperlist": "^1.0.0",
|
||||||
|
"luxon": "^3.4.4"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@popperjs/core": "^2.11.0",
|
||||||
|
"@siemens/ix-icons": "^2.0.0",
|
||||||
|
"bootstrap": "~5.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@siemens/ix-icons": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@siemens/ix-icons/-/ix-icons-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-GwIWARbWqDpT9xlvMboKm74B3K+WvbqeslgQSremaqBNmVn3ppbuwydXi1CLt5xTF49zFXZ4jc837wuUp/eI+w==",
|
||||||
|
"dependencies": {
|
||||||
|
"@stencil/core": "^4.12.6"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.x.x",
|
||||||
|
"pnpm": ">=9.x.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@siemens/ix-vue": {
|
||||||
|
"version": "2.5.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@siemens/ix-vue/-/ix-vue-2.5.0.tgz",
|
||||||
|
"integrity": "sha512-pApnMwHlIo+mATu5cFjE5V9Wb/mpRLvIjCyvZQAqvR6wDugSSatwKXfZK4jBmoyXJha0n8hPrd+1qiKRhBb8/g==",
|
||||||
|
"dependencies": {
|
||||||
|
"@siemens/ix": "~2.5.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@siemens/ix-icons": "^2.0.0",
|
||||||
|
"vue": ">=3.2.45"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@soda/friendly-errors-webpack-plugin": {
|
"node_modules/@soda/friendly-errors-webpack-plugin": {
|
||||||
"version": "1.8.1",
|
"version": "1.8.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
|
"resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
|
||||||
|
|
@ -2142,6 +2223,18 @@
|
||||||
"integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
|
"integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@stencil/core": {
|
||||||
|
"version": "4.17.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@stencil/core/-/core-4.17.2.tgz",
|
||||||
|
"integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==",
|
||||||
|
"bin": {
|
||||||
|
"stencil": "bin/stencil"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=16.0.0",
|
||||||
|
"npm": ">=7.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@trysound/sax": {
|
"node_modules/@trysound/sax": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
|
||||||
|
|
@ -2256,6 +2349,11 @@
|
||||||
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
|
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/luxon": {
|
||||||
|
"version": "3.4.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@types/luxon/-/luxon-3.4.2.tgz",
|
||||||
|
"integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA=="
|
||||||
|
},
|
||||||
"node_modules/@types/mime": {
|
"node_modules/@types/mime": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
"resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
|
"resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
|
||||||
|
|
@ -2996,6 +3094,11 @@
|
||||||
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
|
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@vue/devtools-api": {
|
||||||
|
"version": "6.6.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||||
|
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
|
||||||
|
},
|
||||||
"node_modules/@vue/reactivity": {
|
"node_modules/@vue/reactivity": {
|
||||||
"version": "3.5.8",
|
"version": "3.5.8",
|
||||||
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.8.tgz",
|
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.8.tgz",
|
||||||
|
|
@ -3368,6 +3471,11 @@
|
||||||
"ajv": "^6.9.1"
|
"ajv": "^6.9.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/animejs": {
|
||||||
|
"version": "3.2.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.2.tgz",
|
||||||
|
"integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
|
||||||
|
},
|
||||||
"node_modules/ansi-colors": {
|
"node_modules/ansi-colors": {
|
||||||
"version": "4.1.3",
|
"version": "4.1.3",
|
||||||
"resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
|
"resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
|
||||||
|
|
@ -3500,6 +3608,11 @@
|
||||||
"lodash": "^4.17.14"
|
"lodash": "^4.17.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/asynckit": {
|
||||||
|
"version": "0.4.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||||
|
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||||
|
},
|
||||||
"node_modules/at-least-node": {
|
"node_modules/at-least-node": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
|
||||||
|
|
@ -3546,6 +3659,16 @@
|
||||||
"postcss": "^8.1.0"
|
"postcss": "^8.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/axios": {
|
||||||
|
"version": "1.7.9",
|
||||||
|
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
|
||||||
|
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
|
||||||
|
"dependencies": {
|
||||||
|
"follow-redirects": "^1.15.6",
|
||||||
|
"form-data": "^4.0.0",
|
||||||
|
"proxy-from-env": "^1.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/babel-loader": {
|
"node_modules/babel-loader": {
|
||||||
"version": "8.4.1",
|
"version": "8.4.1",
|
||||||
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
|
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
|
||||||
|
|
@ -3761,6 +3884,25 @@
|
||||||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/bootstrap": {
|
||||||
|
"version": "5.2.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/bootstrap/-/bootstrap-5.2.3.tgz",
|
||||||
|
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/twbs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/bootstrap"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"peer": true,
|
||||||
|
"peerDependencies": {
|
||||||
|
"@popperjs/core": "^2.11.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||||
|
|
@ -3873,6 +4015,18 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/call-bind-apply-helpers": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"function-bind": "^1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/callsites": {
|
"node_modules/callsites": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
|
"resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
|
||||||
|
|
@ -4209,6 +4363,17 @@
|
||||||
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
|
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/combined-stream": {
|
||||||
|
"version": "1.0.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||||
|
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||||
|
"dependencies": {
|
||||||
|
"delayed-stream": "~1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/commander": {
|
"node_modules/commander": {
|
||||||
"version": "8.3.0",
|
"version": "8.3.0",
|
||||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
|
"resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
|
||||||
|
|
@ -4976,6 +5141,14 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/delayed-stream": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/depd": {
|
"node_modules/depd": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
|
||||||
|
|
@ -5135,6 +5308,19 @@
|
||||||
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
|
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/dunder-proto": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||||
|
"dependencies": {
|
||||||
|
"call-bind-apply-helpers": "^1.0.1",
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"gopd": "^1.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/duplexer": {
|
"node_modules/duplexer": {
|
||||||
"version": "0.1.2",
|
"version": "0.1.2",
|
||||||
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
|
||||||
|
|
@ -5150,6 +5336,20 @@
|
||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/echarts": {
|
||||||
|
"version": "5.6.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
|
||||||
|
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "2.3.0",
|
||||||
|
"zrender": "5.6.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/echarts/node_modules/tslib": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||||
|
},
|
||||||
"node_modules/ee-first": {
|
"node_modules/ee-first": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
|
||||||
|
|
@ -5251,13 +5451,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/es-define-property": {
|
"node_modules/es-define-property": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||||
"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
|
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"get-intrinsic": "^1.2.4"
|
|
||||||
},
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
|
|
@ -5266,7 +5462,6 @@
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
|
"resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
|
||||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
|
|
@ -5277,6 +5472,31 @@
|
||||||
"integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
|
"integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/es-object-atoms": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||||
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/es-set-tostringtag": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
||||||
|
"dependencies": {
|
||||||
|
"es-errors": "^1.3.0",
|
||||||
|
"get-intrinsic": "^1.2.6",
|
||||||
|
"has-tostringtag": "^1.0.2",
|
||||||
|
"hasown": "^2.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/escalade": {
|
"node_modules/escalade": {
|
||||||
"version": "3.2.0",
|
"version": "3.2.0",
|
||||||
"resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
|
"resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
|
||||||
|
|
@ -6205,7 +6425,6 @@
|
||||||
"version": "1.15.9",
|
"version": "1.15.9",
|
||||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||||
"dev": true,
|
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
"type": "individual",
|
"type": "individual",
|
||||||
|
|
@ -6221,6 +6440,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/form-data": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
|
||||||
|
"dependencies": {
|
||||||
|
"asynckit": "^0.4.0",
|
||||||
|
"combined-stream": "^1.0.8",
|
||||||
|
"es-set-tostringtag": "^2.1.0",
|
||||||
|
"mime-types": "^2.1.12"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/forwarded": {
|
"node_modules/forwarded": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
|
"resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
|
||||||
|
|
@ -6297,7 +6530,6 @@
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
|
||||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||||
"dev": true,
|
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
|
|
@ -6327,16 +6559,20 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/get-intrinsic": {
|
"node_modules/get-intrinsic": {
|
||||||
"version": "1.2.4",
|
"version": "1.2.7",
|
||||||
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
|
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
|
||||||
"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
|
"integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"call-bind-apply-helpers": "^1.0.1",
|
||||||
|
"es-define-property": "^1.0.1",
|
||||||
"es-errors": "^1.3.0",
|
"es-errors": "^1.3.0",
|
||||||
|
"es-object-atoms": "^1.0.0",
|
||||||
"function-bind": "^1.1.2",
|
"function-bind": "^1.1.2",
|
||||||
"has-proto": "^1.0.1",
|
"get-proto": "^1.0.0",
|
||||||
"has-symbols": "^1.0.3",
|
"gopd": "^1.2.0",
|
||||||
"hasown": "^2.0.0"
|
"has-symbols": "^1.1.0",
|
||||||
|
"hasown": "^2.0.2",
|
||||||
|
"math-intrinsics": "^1.1.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
|
|
@ -6345,6 +6581,18 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/get-proto": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||||
|
"dependencies": {
|
||||||
|
"dunder-proto": "^1.0.1",
|
||||||
|
"es-object-atoms": "^1.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/get-stream": {
|
"node_modules/get-stream": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-4.1.0.tgz",
|
"resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-4.1.0.tgz",
|
||||||
|
|
@ -6426,12 +6674,11 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/gopd": {
|
"node_modules/gopd": {
|
||||||
"version": "1.0.1",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
|
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
|
||||||
"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
|
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||||
"dev": true,
|
"engines": {
|
||||||
"dependencies": {
|
"node": ">= 0.4"
|
||||||
"get-intrinsic": "^1.1.3"
|
|
||||||
},
|
},
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
|
@ -6485,11 +6732,10 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/has-proto": {
|
"node_modules/has-symbols": {
|
||||||
"version": "1.0.3",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.3.tgz",
|
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||||
"integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
|
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
},
|
},
|
||||||
|
|
@ -6497,11 +6743,13 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/has-symbols": {
|
"node_modules/has-tostringtag": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
|
"resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||||
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
|
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||||
"dev": true,
|
"dependencies": {
|
||||||
|
"has-symbols": "^1.0.3"
|
||||||
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
},
|
},
|
||||||
|
|
@ -6519,7 +6767,6 @@
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
||||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"function-bind": "^1.1.2"
|
"function-bind": "^1.1.2"
|
||||||
},
|
},
|
||||||
|
|
@ -6783,6 +7030,11 @@
|
||||||
"node": ">=10.17.0"
|
"node": ">=10.17.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/hyperlist": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/hyperlist/-/hyperlist-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-1qAjO29EJW/mPyqY+9wFjruD2YWur1dPsPYmt9RvMX6P+8Cr2UmT75MCWjjK+1/4Jxc3sm/G3Kr8DzGgEDRG+Q=="
|
||||||
|
},
|
||||||
"node_modules/iconv-lite": {
|
"node_modules/iconv-lite": {
|
||||||
"version": "0.4.24",
|
"version": "0.4.24",
|
||||||
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||||
|
|
@ -7628,6 +7880,14 @@
|
||||||
"yallist": "^3.0.2"
|
"yallist": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/luxon": {
|
||||||
|
"version": "3.5.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/luxon/-/luxon-3.5.0.tgz",
|
||||||
|
"integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/magic-string": {
|
"node_modules/magic-string": {
|
||||||
"version": "0.30.11",
|
"version": "0.30.11",
|
||||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.11.tgz",
|
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.11.tgz",
|
||||||
|
|
@ -7651,6 +7911,14 @@
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/math-intrinsics": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/mdn-data": {
|
"node_modules/mdn-data": {
|
||||||
"version": "2.0.14",
|
"version": "2.0.14",
|
||||||
"resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
|
"resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||||
|
|
@ -7749,7 +8017,6 @@
|
||||||
"version": "1.52.0",
|
"version": "1.52.0",
|
||||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
|
|
@ -7758,7 +8025,6 @@
|
||||||
"version": "2.1.35",
|
"version": "2.1.35",
|
||||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"mime-db": "1.52.0"
|
"mime-db": "1.52.0"
|
||||||
},
|
},
|
||||||
|
|
@ -8552,6 +8818,56 @@
|
||||||
"url": "https://github.com/sponsors/jonschlinkert"
|
"url": "https://github.com/sponsors/jonschlinkert"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/pinia": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/devtools-api": "^6.6.3",
|
||||||
|
"vue-demi": "^0.14.10"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/posva"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@vue/composition-api": "^1.4.0",
|
||||||
|
"typescript": ">=4.4.4",
|
||||||
|
"vue": "^2.6.14 || ^3.3.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"typescript": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/pinia/node_modules/vue-demi": {
|
||||||
|
"version": "0.14.10",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||||
|
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"bin": {
|
||||||
|
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||||
|
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/antfu"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@vue/composition-api": "^1.0.0-rc.1",
|
||||||
|
"vue": "^3.0.0-0 || ^2.6.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/pkg-dir": {
|
"node_modules/pkg-dir": {
|
||||||
"version": "4.2.0",
|
"version": "4.2.0",
|
||||||
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||||
|
|
@ -9220,6 +9536,11 @@
|
||||||
"node": ">= 0.10"
|
"node": ">= 0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/proxy-from-env": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||||
|
},
|
||||||
"node_modules/pseudomap": {
|
"node_modules/pseudomap": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
|
"resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||||
|
|
@ -10950,6 +11271,20 @@
|
||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-router": {
|
||||||
|
"version": "4.4.5",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.5.tgz",
|
||||||
|
"integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/devtools-api": "^6.6.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/posva"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vue-style-loader": {
|
"node_modules/vue-style-loader": {
|
||||||
"version": "4.1.3",
|
"version": "4.1.3",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
|
||||||
|
|
@ -11644,6 +11979,19 @@
|
||||||
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
|
||||||
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
|
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
|
||||||
"dev": true
|
"dev": true
|
||||||
|
},
|
||||||
|
"node_modules/zrender": {
|
||||||
|
"version": "5.6.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
|
||||||
|
"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "2.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/zrender/node_modules/tslib": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
13
package.json
13
package.json
|
|
@ -8,8 +8,15 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@siemens/ix": "^2.5.0",
|
||||||
|
"@siemens/ix-icons": "^2.2.0",
|
||||||
|
"@siemens/ix-vue": "^2.5.0",
|
||||||
|
"axios": "^1.7.9",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"vue": "^3.2.13"
|
"echarts": "^5.6.0",
|
||||||
|
"pinia": "^2.2.2",
|
||||||
|
"vue": "^3.2.13",
|
||||||
|
"vue-router": "^4.4.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.16",
|
"@babel/core": "^7.12.16",
|
||||||
|
|
@ -32,7 +39,9 @@
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"parser": "@babel/eslint-parser"
|
"parser": "@babel/eslint-parser"
|
||||||
},
|
},
|
||||||
"rules": {}
|
"rules": {
|
||||||
|
"vue/multi-word-component-names": "off"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"> 1%",
|
"> 1%",
|
||||||
|
|
|
||||||
19
src/App.vue
19
src/App.vue
|
|
@ -1,17 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<img alt="Vue logo" src="./assets/logo.png">
|
<div>
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
<router-view />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
// import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
// import ApplicationComponent from './ApplicationComponent.vue';
|
||||||
export default {
|
|
||||||
name: 'App',
|
|
||||||
components: {
|
|
||||||
HelloWorld
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -21,6 +16,6 @@ export default {
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
margin-top: 60px;
|
border: var(--theme-primary-bdr-1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
export function getCurrentReport() {
|
||||||
|
return request({
|
||||||
|
url: '/Report/current',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getHistoryReport() {
|
||||||
|
return request({
|
||||||
|
url: '/devicedata/gethtml?name=9b889443bab24a249f43679663074e8c',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getGanttData(deviceId, inputTime) {
|
||||||
|
return request({
|
||||||
|
url: `/State?deviceId=${deviceId}&inputTime=${inputTime}`,
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
|
y="0px" viewBox="0 0 24 24" overflow="visible" xml:space="preserve">
|
||||||
|
<g id="Bounding_box">
|
||||||
|
<rect fill="none" width="24" height="24"/>
|
||||||
|
<rect id="_Transparent_Rectangle__1_" fill="none" width="24" height="24"/>
|
||||||
|
</g>
|
||||||
|
<g id="Icon">
|
||||||
|
<path d="M5.5,4c0,0.82843-0.67157,1.5-1.5,1.5S2.5,4.82843,2.5,4S3.17157,2.5,4,2.5S5.5,3.17157,5.5,4z M20,5.5
|
||||||
|
c0.82843,0,1.5-0.67157,1.5-1.5S20.82843,2.5,20,2.5S18.5,3.17157,18.5,4S19.17157,5.5,20,5.5z M12,2.5
|
||||||
|
c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S12.82843,2.5,12,2.5z M4,18.5
|
||||||
|
c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S4.82843,18.5,4,18.5z M20,18.5
|
||||||
|
c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S20.82843,18.5,20,18.5z M12,18.5
|
||||||
|
c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S12.82843,18.5,12,18.5z M4,10.5
|
||||||
|
c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S4.82843,10.5,4,10.5z M20,10.5
|
||||||
|
c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S20.82843,10.5,20,10.5z M12,10.5
|
||||||
|
c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S12.82843,10.5,12,10.5z"/>
|
||||||
|
</g>
|
||||||
|
<g id="Kommentare" display="none">
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<div class="progress-panel">
|
||||||
|
<div class="panel-header" v-if="showHeader">
|
||||||
|
<span class="panel-title">{{ title }}</span>
|
||||||
|
<span class="total-value">累计流量：{{ totalValue }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-container">
|
||||||
|
<div class="type-box" v-for="(item, index) in progressList" :key="index">
|
||||||
|
<div class="type-name">{{ item.name }}</div>
|
||||||
|
<div class="type-progress">
|
||||||
|
<div class="progress"
|
||||||
|
:style="{
|
||||||
|
width: item.rate + '%',
|
||||||
|
background: item.bgColor
|
||||||
|
}">
|
||||||
|
<span class="progress-value">{{ item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="type-num">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'GradientProgressBar',
|
||||||
|
props: {
|
||||||
|
// 是否显示头部
|
||||||
|
showHeader: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 标题
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 总数值
|
||||||
|
totalValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 进度条数据
|
||||||
|
progressList: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-value {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-name {
|
||||||
|
width: 80px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-progress {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
height: 25px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-color: #000000;
|
||||||
|
margin: 0 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 15px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-num {
|
||||||
|
width: 70px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-value {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -30,13 +30,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<template>
|
||||||
|
<IxMessageBar :type="type" v-if="visible" class="message-bar">
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
{{ message }}
|
||||||
|
<IxButton v-if="action" @click="action.handler">{{ action.label }}</IxButton>
|
||||||
|
</div>
|
||||||
|
</IxMessageBar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { IxMessageBar, IxButton } from '@siemens/ix-vue'; // 确保正确导入组件
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'info',
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
action: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const visible = ref(true);
|
||||||
|
|
||||||
|
const hide = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
setTimeout(hide, 5000); // 自动隐藏消息提示框
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.message-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
width: 300px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.align-items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.justify-content-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,424 @@
|
||||||
|
<template>
|
||||||
|
<div class="gantt-chart-container">
|
||||||
|
<div ref="ganttChart" class="gantt-chart"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onBeforeUnmount, watch, nextTick, shallowRef } from 'vue'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
// Props 定义
|
||||||
|
const props = defineProps({
|
||||||
|
processData: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
currentRange: {
|
||||||
|
type: String,
|
||||||
|
default: 'all'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 定义 emit 方法
|
||||||
|
const emit = defineEmits(['segment-click'])
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const currentRange = ref('all')
|
||||||
|
const chart = shallowRef(null)
|
||||||
|
const ganttChart = ref(null)
|
||||||
|
const currentStatus = ref('')
|
||||||
|
const startTimeFormatted = ref('')
|
||||||
|
const endTimeFormatted = ref('')
|
||||||
|
const duration = ref('')
|
||||||
|
const productFlowRate = ref('')
|
||||||
|
const formula = ref('')
|
||||||
|
|
||||||
|
// 修改 resize 处理函数
|
||||||
|
const handleResize = echarts.throttle(() => {
|
||||||
|
if (chart.value) {
|
||||||
|
chart.value.resize();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const initChart = () => {
|
||||||
|
try {
|
||||||
|
if (chart.value) {
|
||||||
|
chart.value.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!ganttChart.value) return;
|
||||||
|
|
||||||
|
// 创建新实例
|
||||||
|
chart.value = echarts.init(ganttChart.value);
|
||||||
|
|
||||||
|
// 设置基础配置
|
||||||
|
const baseOption = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 1
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
data: []
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
chart.value.setOption(baseOption);
|
||||||
|
|
||||||
|
// 绑定resize事件
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// 更新数据
|
||||||
|
nextTick(() => {
|
||||||
|
updateChart();
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateChart = () => {
|
||||||
|
if (!chart.value || !ganttChart.value) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const timeLabels = generateTimeLabels();
|
||||||
|
const baseDate = new Date().toISOString().split('T')[0];
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: (params) => {
|
||||||
|
if (!params.data || typeof params.data !== 'object') return ''
|
||||||
|
return `
|
||||||
|
<div style="white-space: normal;">
|
||||||
|
<div>开始时间：${formatTime(params.data.beginTime)}</div>
|
||||||
|
<div>结束时间：${formatTime(params.data.endTime)}</div>
|
||||||
|
<div>生产步骤：${params.data.mixerStep || '--'}</div> <!-- 确保 step 字段正确显示 -->
|
||||||
|
<div>流量：${params.data.productFlowRate || '--'}</div>
|
||||||
|
<div>配方：${params.data.formula || '--'}</div>
|
||||||
|
<div>持续时长：${params.data.duration || '--'}</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
position: function (point, params, dom, rect, size) {
|
||||||
|
// 这里自定义位置逻辑
|
||||||
|
// point 是鼠标位置，params 是数据项相关参数，dom 是提示框的 DOM 对象，rect 是图表区域，size 是提示框大小
|
||||||
|
return [point[0] + 10, point[1] - 100];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 40,
|
||||||
|
bottom: 20,
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
position: 'bottom', // 修改位置到底部
|
||||||
|
data: timeLabels,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.3)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
alignWithLabel: true,
|
||||||
|
length: 4,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.3)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
|
interval: 3, // 每4个标签显示一个（15分钟 * 4 = 1小时）
|
||||||
|
fontSize: 12,
|
||||||
|
margin: 15,
|
||||||
|
rotate: 0,
|
||||||
|
formatter: function(value) {
|
||||||
|
// 只显示整点时间
|
||||||
|
if (value.includes('/')) {
|
||||||
|
const [date, time] = value.split(' ')
|
||||||
|
const [year, month, day] = date.split('/')
|
||||||
|
|
||||||
|
if (time === '0') {
|
||||||
|
return `${year}/${month}/${day} ${time}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const [hour, minute] = value.split(':')
|
||||||
|
if (minute === '00') {
|
||||||
|
return `${hour}`
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: false,
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 1
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '100%',
|
||||||
|
barGap: 0,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 0
|
||||||
|
},
|
||||||
|
data: mapDataToTimeline(timeLabels, baseDate) || [] // 确保有默认值
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
|
chart.value.setOption(option, true)
|
||||||
|
|
||||||
|
// 重新绑定点击事件
|
||||||
|
chart.value.off('click')
|
||||||
|
chart.value.on('click', 'series', (params) => {
|
||||||
|
if (params.data && typeof params.data === 'object') {
|
||||||
|
handleChartClick(params.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Update chart error:', error);
|
||||||
|
// 如果更新失败，尝试重新初始化
|
||||||
|
initChart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (timeString) => {
|
||||||
|
if (!timeString) return '--';
|
||||||
|
const date = new Date(timeString);
|
||||||
|
if (isNaN(date.getTime())) return '--';
|
||||||
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDataToTimeline = (timeLabels, baseDate) => {
|
||||||
|
return timeLabels.map((label) => {
|
||||||
|
// 获取当前时间标签对应的小时和分钟
|
||||||
|
let currentTime;
|
||||||
|
if (label.includes('/')) {
|
||||||
|
const [date, time] = label.split(' ');
|
||||||
|
const [year, month, day] = date.split('/').map(Number);
|
||||||
|
const [hour, minute] = time.split(':').map(Number);
|
||||||
|
currentTime = new Date(year, month - 1, day, hour, minute, 0, 0);
|
||||||
|
} else {
|
||||||
|
const [hour, minute] = label.split(':').map(Number);
|
||||||
|
currentTime = new Date(baseDate);
|
||||||
|
currentTime.setHours(hour, minute, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查找是否有数据在这个时间点
|
||||||
|
const matchingData = props.processData.find(item => {
|
||||||
|
const beginTime = new Date(item.beginTime).getTime();
|
||||||
|
const endTime = new Date(item.endTime).getTime();
|
||||||
|
return currentTime.getTime() >= beginTime && currentTime.getTime() <= endTime;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (matchingData) {
|
||||||
|
return {
|
||||||
|
value: 1,
|
||||||
|
status: matchingData.status,
|
||||||
|
mixerStep: matchingData.mixerStep,
|
||||||
|
beginTime: formatTime(matchingData.beginTime),
|
||||||
|
endTime: formatTime(matchingData.endTime),
|
||||||
|
productFlowRate: matchingData.productFlowRate,
|
||||||
|
formula: matchingData.formula,
|
||||||
|
duration: matchingData.duration,
|
||||||
|
itemStyle: {
|
||||||
|
color: getStatusColor(matchingData.status)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return { value: 0 }; // 确保返回对象格式一致
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const generateTimeLabels = () => {
|
||||||
|
const times = [];
|
||||||
|
const now = new Date();
|
||||||
|
let startHour, endHour;
|
||||||
|
|
||||||
|
switch (currentRange.value) {
|
||||||
|
case '1h':
|
||||||
|
startHour = Math.max(now.getHours() - 1, 0); // 确保 startHour 不为负值
|
||||||
|
endHour = now.getHours();
|
||||||
|
break;
|
||||||
|
case '2h':
|
||||||
|
startHour = Math.max(now.getHours() - 2, 0); // 确保 startHour 不为负值
|
||||||
|
endHour = now.getHours();
|
||||||
|
break;
|
||||||
|
case 'shift':
|
||||||
|
startHour = Math.max(now.getHours() - 12, 0); // 确保 startHour 不为负值
|
||||||
|
endHour = now.getHours();
|
||||||
|
break;
|
||||||
|
case 'all':
|
||||||
|
default:
|
||||||
|
startHour = Math.max(now.getHours() - 24, 0); // 确保 startHour 不为负值
|
||||||
|
endHour = now.getHours();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let hour = startHour; hour <= endHour; hour++) {
|
||||||
|
const currentHour = hour % 24;
|
||||||
|
const isNextDay = hour >= 24;
|
||||||
|
const labelDate = new Date(now);
|
||||||
|
|
||||||
|
if (isNextDay) {
|
||||||
|
labelDate.setDate(labelDate.getDate() + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let minute = 0; minute < 60; minute += 15) {
|
||||||
|
let timeLabel = `${currentHour}:${minute.toString().padStart(2, '0')}`;
|
||||||
|
if (currentHour === 0 && minute === 0) {
|
||||||
|
const dateStr = `${labelDate.getFullYear().toString().slice(-2)}/${(labelDate.getMonth() + 1).toString().padStart(2, '0')}/${(labelDate.getDate()).toString().padStart(2, '0')}`;
|
||||||
|
timeLabel = `${dateStr} ${currentHour}`;
|
||||||
|
}
|
||||||
|
times.push(timeLabel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return times;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateCurrentInfo = () => {
|
||||||
|
const currentData = props.processData[props.processData.length - 1] || {}
|
||||||
|
currentStatus.value = currentData.status || '--'
|
||||||
|
startTimeFormatted.value = formatTime(currentData.beginTime) || '--'
|
||||||
|
endTimeFormatted.value = formatTime(currentData.endTime) || '--'
|
||||||
|
|
||||||
|
if (currentData.beginTime && currentData.endTime) {
|
||||||
|
const start = new Date(currentData.beginTime)
|
||||||
|
const end = new Date(currentData.endTime)
|
||||||
|
const diff = end - start
|
||||||
|
duration.value = Math.floor(diff / (1000 * 60)) + ' 分钟'
|
||||||
|
} else {
|
||||||
|
duration.value = '--'
|
||||||
|
}
|
||||||
|
|
||||||
|
productFlowRate.value = currentData.productFlowRate || '--'
|
||||||
|
formula.value = currentData.formula || '--'
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeTimeRange = (range) => {
|
||||||
|
currentRange.value = range;
|
||||||
|
updateChart();
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusColor = (status) => {
|
||||||
|
const colors = {
|
||||||
|
'running': '#00E4FF',
|
||||||
|
'cleaning': '#47D3BD', // 清洗状态
|
||||||
|
'waiting': '#FFA849',
|
||||||
|
'completed': '#47D3BD',
|
||||||
|
production: '#4CAF50',
|
||||||
|
downtime: '#F44336',
|
||||||
|
standby: '#FFC107'
|
||||||
|
}
|
||||||
|
return colors[status] || '#00E4FF'
|
||||||
|
}
|
||||||
|
|
||||||
|
// const formatTime = (time) => {
|
||||||
|
// if (!time) return ''
|
||||||
|
// const date = new Date(time)
|
||||||
|
// return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||||
|
// }
|
||||||
|
|
||||||
|
const handleChartClick = (data) => {
|
||||||
|
currentStatus.value = data.status
|
||||||
|
startTimeFormatted.value = formatTime(data.beginTime)
|
||||||
|
endTimeFormatted.value = formatTime(data.endTime)
|
||||||
|
|
||||||
|
if (data.beginTime && data.endTime) {
|
||||||
|
const start = new Date(data.beginTime)
|
||||||
|
const end = new Date(data.endTime)
|
||||||
|
const diff = end - start
|
||||||
|
duration.value = Math.floor(diff / (1000 * 60)) + ' 分钟'
|
||||||
|
} else {
|
||||||
|
duration.value = '--'
|
||||||
|
}
|
||||||
|
|
||||||
|
productFlowRate.value = data.productFlowRate || '--'
|
||||||
|
formula.value = data.formula || '--'
|
||||||
|
|
||||||
|
// 触发 segment-click 事件
|
||||||
|
emit('segment-click', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
// 确保 DOM 已经渲染完成
|
||||||
|
setTimeout(() => {
|
||||||
|
initChart();
|
||||||
|
updateCurrentInfo();
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
try {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
if (chart.value) {
|
||||||
|
chart.value.dispose();
|
||||||
|
chart.value = null;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Cleanup error:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 修改监听器
|
||||||
|
watch(() => props.processData, () => {
|
||||||
|
nextTick(() => {
|
||||||
|
if (chart.value) {
|
||||||
|
updateChart();
|
||||||
|
updateCurrentInfo();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { deep: true, immediate: true });
|
||||||
|
|
||||||
|
watch(() => props.currentRange, (newRange) => {
|
||||||
|
currentRange.value = newRange;
|
||||||
|
updateChart();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.gantt-chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 75%;
|
||||||
|
/* background: #23233C; */
|
||||||
|
border-radius: 8px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt-chart {
|
||||||
|
background: #23233C;
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<template>
|
||||||
|
<div class="process-panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="panel-title">{{ title }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="process-info">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">{{ label }}</span>
|
||||||
|
<span class="info-value">{{ value }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress" :style="{ width: progress + '%', background: progressColor }">
|
||||||
|
<span class="progress-text">{{ progress }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ProcessStatusBar',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
progressColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#00E4FF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.process-panel {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(33, 38, 65, 0.8);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-info {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00E4FF;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 25px;
|
||||||
|
background: #000000;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
32
src/main.js
32
src/main.js
|
|
@ -1,4 +1,30 @@
|
||||||
import { createApp } from 'vue'
|
/***
|
||||||
import App from './App.vue'
|
*
|
||||||
|
* router 路由
|
||||||
|
*
|
||||||
|
* ix-siemens 西门子框架
|
||||||
|
*
|
||||||
|
* pinia 状态管理
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* echarts 图表
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import router from './router';
|
||||||
|
import pinia from './store';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import MessagePlugin from './plugins/message';
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
// ix-siemens
|
||||||
|
import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
|
||||||
|
import { ixPlugin } from '@siemens/ix-vue';
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
// 全局挂载echarts
|
||||||
|
app.config.globalProperties.$echarts = echarts;
|
||||||
|
|
||||||
|
// 使用use将文件挂载上去
|
||||||
|
app.use(router).use(pinia).use(ixPlugin).use(MessagePlugin).mount('#app');
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { createApp, h } from 'vue';
|
||||||
|
import MessageBar from '@/components/MessageBar.vue';
|
||||||
|
|
||||||
|
const MessagePlugin = {
|
||||||
|
install(app) {
|
||||||
|
const showMessage = (type, message, action) => {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.style.position = 'fixed';
|
||||||
|
container.style.bottom = '20px';
|
||||||
|
container.style.right = '20px';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
const appInstance = createApp({
|
||||||
|
render() {
|
||||||
|
return h(MessageBar, { type, message, action });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
appInstance.mount(container);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
appInstance.unmount();
|
||||||
|
document.body.removeChild(container);
|
||||||
|
}, 5000); // 自动卸载组件
|
||||||
|
};
|
||||||
|
|
||||||
|
app.config.globalProperties.$message = {
|
||||||
|
info: (message, action) => showMessage('info', message, action),
|
||||||
|
danger: (message, action) => showMessage('danger', message, action),
|
||||||
|
warning: (message, action) => showMessage('warning', message, action),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MessagePlugin;
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||||
|
|
||||||
|
// ...existing code...
|
||||||
|
|
||||||
|
export const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import('@/views/layout/vueLayout.vue'),
|
||||||
|
redirect: '/dashboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dashboard',
|
||||||
|
name: 'MainPage',
|
||||||
|
component: () => import('@/views/Dashboard/index.vue'),
|
||||||
|
exact: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'inspection',
|
||||||
|
name: 'InspectionPage',
|
||||||
|
component: () => import('@/views/Inspection/index.vue'),
|
||||||
|
exact: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHashHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
// ...existing code...
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
// src/store/index.js
|
||||||
|
import {createPinia} from 'pinia'
|
||||||
|
|
||||||
|
const pinia = createPinia()
|
||||||
|
export default pinia
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import {defineStore} from 'pinia'
|
||||||
|
import {ref} from 'vue'
|
||||||
|
|
||||||
|
const useUserStore = defineStore('user', () => {
|
||||||
|
const userInfo = ref({})
|
||||||
|
const loginStatus = ref(false)
|
||||||
|
const token = ref('')
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登录
|
||||||
|
*/
|
||||||
|
function handleLogin() {
|
||||||
|
if(Math.random() > 0.8){
|
||||||
|
loginStatus.value = true
|
||||||
|
token.value = String(new Date().getTime())
|
||||||
|
userInfo.value = {
|
||||||
|
name: 'admin',
|
||||||
|
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
|
||||||
|
}
|
||||||
|
resolve('登录成功')
|
||||||
|
}else {
|
||||||
|
reject('登录失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 退出登录
|
||||||
|
*/
|
||||||
|
function handleLogout() {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
loginStatus.value = false
|
||||||
|
token.value = ''
|
||||||
|
userInfo.value = {}
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
userInfo,
|
||||||
|
loginStatus,
|
||||||
|
token,
|
||||||
|
handleLogin,
|
||||||
|
handleLogout
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useUserStore
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: 'http://192.168.1.199:8080/api', // 接口的基础路径'http://cs-vsc.siemens.com.cn:8005',//
|
||||||
|
timeout: 5000, // 请求超时时间
|
||||||
|
headers: {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
"Content-Type": "application/json;charset=utf-8"
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
// 可以在这里添加请求头等配置
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default service;
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
ix-application {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,867 @@
|
||||||
|
<template>
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<div class="upper-section">
|
||||||
|
<div class="upper-left">
|
||||||
|
<div class="left-1">
|
||||||
|
<div class="block" :data-device-id="juiceData?.deviceId" @click="handleBlockClick(juiceData?.deviceId)">
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">果汁调配</h2>
|
||||||
|
<span class="flow-label">累计流量：{{ totalTrafficJuice }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div v-for="item in progressList" :key="item.name" class="juice-item">
|
||||||
|
<span class="juice-name">{{ item.name }}：</span>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress"
|
||||||
|
:style="{ width: item.rate + '%', background: item.rate > 70 ? '#00D2A0' : item.rate > 50 ? '#FF9000' : item.rate > 30 ? '#FFD732' : '#FF0000' }">
|
||||||
|
<span class="progress-text">{{ item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block" :data-device-id="pulpData?.deviceId" @click="handleBlockClick(pulpData?.deviceId)">
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">果肉调配</h2>
|
||||||
|
<span class="flow-label">果肉流量：{{ totalTrafficPulp }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div v-for="item in innerProgressList" :key="item.name" class="juice-item">
|
||||||
|
<span class="juice-name">{{ item.name }}：</span>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress"
|
||||||
|
:style="{ width: item.rate + '%', background: item.rate > 70 ? '#00D2A0' : item.rate > 50 ? '#FF9000' : item.rate > 30 ? '#FFD732' : '#FF0000' }">
|
||||||
|
<span class="progress-text">{{ item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-2">
|
||||||
|
<div class="block" :data-device-id="uhtData?.deviceId" @click="handleBlockClick(uhtData?.deviceId)">
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">果汁 UHT</h2>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div class="UHT-item">
|
||||||
|
<div class="info-panel" style="display: flex; justify-content: space-between;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前配方：</span>
|
||||||
|
<span class="info-value">{{ processForm_uht.formula }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前状态：</span>
|
||||||
|
<span class="info-value">{{ processForm_uht.status }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前步骤：</span>
|
||||||
|
<span class="info-value">{{ processForm_uht.mixerStep }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-panel" style="display: flex; justify-content: space-between;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">累计流量：</span>
|
||||||
|
<span class="info-value">{{ processForm_uht.totalTraffic }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">产品流量：</span>
|
||||||
|
<span class="info-value">{{ processForm_uht.productFlowRate }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">平衡温度：</span>
|
||||||
|
<span class="info-value">{{ processForm_uht.temperature }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tag-panel">
|
||||||
|
<IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||||
|
  已碱洗
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="left-chip" background="#00FFB9" chip-color="#000028" variant="custom">
|
||||||
|
  已酸洗
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||||
|
 清洁状态
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="left-chip" background="#6B6B7E" chip-color="#000028" variant="custom">
|
||||||
|
 无菌状态
|
||||||
|
</IxChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block" :data-device-id="pulpUHTData?.deviceId" @click="handleBlockClick(pulpUHTData?.deviceId)">
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">果肉 UHT</h2>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div class="UHT-item">
|
||||||
|
<div class="info-panel" style="display: flex; justify-content: space-between;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前配方：</span>
|
||||||
|
<span class="info-value">{{ processForm_pulp.formula }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前状态：</span>
|
||||||
|
<span class="info-value">{{ processForm_pulp.status }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前步骤：</span>
|
||||||
|
<span class="info-value">{{ processForm_pulp.mixerStep }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-panel" style="display: flex; justify-content: space-between;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">累计流量：</span>
|
||||||
|
<span class="info-value">{{ processForm_pulp.totalTraffic }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">产品流量：</span>
|
||||||
|
<span class="info-value">{{ processForm_pulp.productFlowRate }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">平衡温度：</span>
|
||||||
|
<span class="info-value">{{ processForm_pulp.temperature }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tag-panel">
|
||||||
|
<IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||||
|
  已碱洗
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="left-chip" background="#00FFB9" chip-color="#000028" variant="custom">
|
||||||
|
  已酸洗
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||||
|
 清洁状态
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="left-chip" background="#6B6B7E" chip-color="#000028" variant="custom">
|
||||||
|
 无菌状态
|
||||||
|
</IxChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="upper-right">
|
||||||
|
<div class="block" :data-device-id="juiceTank?.deviceId" @click="handleBlockClick(juiceTank?.deviceId)">
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">果汁无菌罐</h2>
|
||||||
|
<div class="tag-panel-2">
|
||||||
|
<IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||||
|
  已碱洗
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
|
||||||
|
  已酸洗
|
||||||
|
</IxChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div class="right-info-panel">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">当前步骤：</span>
|
||||||
|
<span class="info-label">{{ juiceTank.mixerStep }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item juice-item">
|
||||||
|
<span>当前液位：</span>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress"
|
||||||
|
:style="{ width: juiceTank.rate + '%', background: juiceTank.rate > 70 ? '#00D2A0' : juiceTank.rate > 50 ? '#FF9000' : juiceTank.rate > 30 ? '#FFD732' : '#FF0000' }">
|
||||||
|
<span class="progress-text">{{ juiceTank.liquidLevel }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
|
||||||
|
<polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
|
||||||
|
</svg>
|
||||||
|
<span class="info-label" :style="{ color: '#00FFB9' }">果汁流量：{{ juiceTank.productFlowRate
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block" :data-device-id="dynamicMixer?.deviceId" @click="handleBlockClick(dynamicMixer?.deviceId)">
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">动态混合器</h2>
|
||||||
|
<div class="tag-panel-2">
|
||||||
|
<IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||||
|
  已碱洗
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
|
||||||
|
  已酸洗
|
||||||
|
</IxChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div class="UHT-item">
|
||||||
|
<div class="info-panel">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前配方：</span>
|
||||||
|
<span class="info-value">{{ dynamicMixer.formula }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前步骤：</span>
|
||||||
|
<span class="info-value">{{ dynamicMixer.mixerStep }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-panel">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前液位：</span>
|
||||||
|
<span class="info-value">{{ dynamicMixer.liquidLevel }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label">当前流量：</span>
|
||||||
|
<span class="info-value">{{ dynamicMixer.productFlowRate }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block" :data-device-id="pulpTank?.deviceId" @click="handleBlockClick(pulpTank?.deviceId)">
|
||||||
|
<div class="info-item">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
|
||||||
|
<polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
|
||||||
|
</svg>
|
||||||
|
<span class="info-label" :style="{ color: '#00FFB9' }">果汁流量：{{ pulpTank.productFlowRate
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">果肉无菌罐</h2>
|
||||||
|
<div class="tag-panel-2">
|
||||||
|
<IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||||
|
  已碱洗
|
||||||
|
</IxChip>
|
||||||
|
<IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
|
||||||
|
  已酸洗
|
||||||
|
</IxChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">当前配方：</span>
|
||||||
|
<span class="info-label">果汁配方</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item juice-item">
|
||||||
|
<span>当前液位：</span>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress"
|
||||||
|
:style="{ width: pulpTank.rate + '%', background: pulpTank.rate > 70 ? '#00D2A0' : pulpTank.rate > 50 ? '#FF9000' : pulpTank.rate > 30 ? '#FFD732' : '#FF0000' }">
|
||||||
|
<span class="progress-text">{{ pulpTank.liquidLevel }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lower-section">
|
||||||
|
<div class="block">
|
||||||
|
<div class="flex-row">
|
||||||
|
<h2 class="juice-title">生产进度</h2>
|
||||||
|
<div>
|
||||||
|
<IxButton Outline @click="changeTimeRange('all')">全部</IxButton>
|
||||||
|
<IxButton Outline @click="changeTimeRange('1h')">一小时</IxButton>
|
||||||
|
<IxButton Outline @click="changeTimeRange('2h')">二小时</IxButton>
|
||||||
|
<IxButton Outline @click="changeTimeRange('shift')">当班</IxButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ProcessGanttChart ref="ganttChart" :process-data="formattedProcessData" :current-range="currentRange"
|
||||||
|
@update-info="updateCurrentInfo" @segment-click="handleSegmentClick" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lower-footer">
|
||||||
|
<IxButton Outline> 状态：{{ currentStatus }} </IxButton>
|
||||||
|
<IxButton Outline> 生产步骤：{{ mixerStep }} </IxButton> <!-- 增加 step 字段显示 -->
|
||||||
|
<IxButton Outline> 开始时间：{{ startTimeFormatted }} </IxButton>
|
||||||
|
<IxButton Outline> 结束时间：{{ endTimeFormatted }} </IxButton>
|
||||||
|
<IxButton Outline> 流量：{{ productFlowRate }} </IxButton>
|
||||||
|
<IxButton Outline> 配方：{{ formula }} </IxButton>
|
||||||
|
<IxButton Outline> 持续时长：{{ duration }} </IxButton>
|
||||||
|
<IxButton Outline> 请选择停机原因：{{ }} </IxButton>
|
||||||
|
<!-- <IxButton @click="showInfoMessage">Show Info Message</IxButton>
|
||||||
|
<IxButton @click="showDangerMessage">Show Danger Message</IxButton>
|
||||||
|
<IxButton @click="showWarningMessage">Show Warning Message</IxButton> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, getCurrentInstance } from 'vue'
|
||||||
|
import { IxChip, IxButton } from '@siemens/ix-vue'; // 引入 Chip 组件
|
||||||
|
import { getCurrentReport, getHistoryReport, getGanttData } from '@/api/dashboard.js';
|
||||||
|
import GradientProgressBar from '@/components/GradientProgressBar.vue'
|
||||||
|
import ProcessStatusBar from '@/components/ProcessStatusBar.vue'
|
||||||
|
import ProcessGanttChart from '@/components/ProcessGanttChart.vue'
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const currentTime = ref('')
|
||||||
|
const totalTrafficJuice = ref(0); // 果汁调配 累计流量
|
||||||
|
const totalTrafficPulp = ref(0); // 果汁调配 累计流量
|
||||||
|
const progressList = ref([])// 果汁调配 进度条
|
||||||
|
const innerProgressList = ref([])// 果肉调配 进度条
|
||||||
|
const processForm_uht = ref({})// 果汁UHT
|
||||||
|
const processForm_pulp = ref({})// 果肉UHT
|
||||||
|
const juiceTank = ref({})// 果汁无菌罐
|
||||||
|
const pulpTank = ref({})// 果肉无菌罐
|
||||||
|
const dynamicMixer = ref({})// 动态混合器
|
||||||
|
const juiceData = ref({}) // 果汁调配数据
|
||||||
|
const pulpData = ref({}) // 果肉调配数据
|
||||||
|
const uhtData = ref({}) // 果汁杀菌数据
|
||||||
|
const pulpUHTData = ref({}) // 果肉杀菌数据
|
||||||
|
|
||||||
|
const statuses = ref([
|
||||||
|
{ id: 1, label: '已碱洗', color: '#00BEDC' },
|
||||||
|
{ id: 2, label: '已酸洗', color: '#00FFB9' },
|
||||||
|
{ id: 3, label: '无菌状态', color: '#6B6B7E' },
|
||||||
|
{ id: 4, label: '清洁状态', color: '#00BEDC' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const processData = ref([])
|
||||||
|
|
||||||
|
// 新增函数，转换时间格式
|
||||||
|
const convertToGMTPlus8 = (timeString) => {
|
||||||
|
const date = new Date(timeString);
|
||||||
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增函数，统一日期格式
|
||||||
|
const formatDates = (data) => {
|
||||||
|
return data.map(item => {
|
||||||
|
const newItem = { ...item };
|
||||||
|
newItem.beginTime = convertToGMTPlus8(item.beginTime);
|
||||||
|
newItem.endTime = convertToGMTPlus8(item.endTime);
|
||||||
|
return newItem;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 处理后的新数据
|
||||||
|
const formattedProcessData = ref(formatDates(processData.value));
|
||||||
|
|
||||||
|
const currentStatus = ref('');
|
||||||
|
const startTimeFormatted = ref('');
|
||||||
|
const endTimeFormatted = ref('');
|
||||||
|
const duration = ref('');
|
||||||
|
const productFlowRate = ref('');
|
||||||
|
const formula = ref('');
|
||||||
|
const mixerStep = ref(''); // 增加 step 字段
|
||||||
|
const currentRange = ref('all'); // 增加 currentRange 响应式变量
|
||||||
|
const ganttChart = ref(null); // 增加 ganttChart 引用
|
||||||
|
|
||||||
|
// 全局响应式变量
|
||||||
|
const globalDeviceId = ref(null);
|
||||||
|
const globalTime = ref(new Date().toISOString());
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const removeStatus = (id) => {
|
||||||
|
statuses.value = statuses.value.filter(status => status.id !== id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateCurrentInfo = (segment) => {
|
||||||
|
currentStatus.value = segment.status;
|
||||||
|
startTimeFormatted.value = convertToGMTPlus8(segment.beginTime);
|
||||||
|
endTimeFormatted.value = convertToGMTPlus8(segment.endTime);
|
||||||
|
duration.value = segment.duration;
|
||||||
|
productFlowRate.value = segment.productFlowRate;
|
||||||
|
formula.value = segment.formula;
|
||||||
|
mixerStep.value = segment.mixerStep; // 更新 step 字段
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSegmentClick = (segment) => {
|
||||||
|
updateCurrentInfo(segment);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeTimeRange = (range) => {
|
||||||
|
currentRange.value = range;
|
||||||
|
if (ganttChart.value && ganttChart.value.updateChart) {
|
||||||
|
ganttChart.value.updateChart();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateTime = () => {
|
||||||
|
const now = new Date()
|
||||||
|
currentTime.value = convertToGMTPlus8(now.toISOString())
|
||||||
|
}
|
||||||
|
//#TODO:主数据
|
||||||
|
// 处理接口返回的数据
|
||||||
|
const processDataFromAPI = (apiData) => {
|
||||||
|
const processedData = apiData.data.map(item => {
|
||||||
|
return {
|
||||||
|
deviceId: item.deviceId,
|
||||||
|
lineId: item.lineId,
|
||||||
|
name: item.name,
|
||||||
|
recordTime: item.recordTime,
|
||||||
|
data: {
|
||||||
|
id: item.data.id || 0,
|
||||||
|
weight: item.data.weight || 0,
|
||||||
|
status: item.data.status || '',
|
||||||
|
productFlowRate: item.data.productFlowRate || 0,
|
||||||
|
name: item.data.name || '',
|
||||||
|
formula: item.data.formula || '',
|
||||||
|
mixerStep: item.data.mixerStep || '',
|
||||||
|
temperature: item.data.temperature || 0,
|
||||||
|
liquidLevel: item.data.liquidLevel || 0
|
||||||
|
},
|
||||||
|
statusList: item.statusList || []
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return processedData;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 筛选数据并合并第二层 data
|
||||||
|
const getDataByName = (data, name) => {
|
||||||
|
const filteredData = data.filter(item => item.name === name);
|
||||||
|
const mergedData = filteredData.map(item => item.data);
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
deviceId: filteredData[0].deviceId,
|
||||||
|
totalTraffic: mergedData.reduce((acc, item) => acc + (item.productFlowRate || 0), 0),
|
||||||
|
data: mergedData
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 读取接口数据
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await getCurrentReport();
|
||||||
|
if (response.code === 200) {
|
||||||
|
const processedData = processDataFromAPI(response);
|
||||||
|
// 处理后的数据可以赋值给相应的响应式变量
|
||||||
|
juiceData.value = getDataByName(processedData, "果汁调配");
|
||||||
|
|
||||||
|
// 设置默认值
|
||||||
|
globalDeviceId.value = juiceData.value.deviceId;
|
||||||
|
|
||||||
|
pulpData.value = getDataByName(processedData, "果肉调配");
|
||||||
|
uhtData.value = getDataByName(processedData, "果汁杀菌");
|
||||||
|
pulpUHTData.value = getDataByName(processedData, "果肉杀菌");
|
||||||
|
juiceTank.value = getDataByName(processedData, "果汁无菌罐");
|
||||||
|
pulpTank.value = getDataByName(processedData, "果肉无菌罐");
|
||||||
|
dynamicMixer.value = getDataByName(processedData, "动态混合器");
|
||||||
|
console.log("🚀 ~ fetchData ~ dynamicMixer:", dynamicMixer)
|
||||||
|
|
||||||
|
// 累计流量
|
||||||
|
totalTrafficJuice.value = juiceData.value.totalTraffic;
|
||||||
|
totalTrafficPulp.value = pulpData.value.totalTraffic;
|
||||||
|
|
||||||
|
progressList.value = juiceData.value.data.map(item => ({
|
||||||
|
name: item.name,
|
||||||
|
value: item.productFlowRate,
|
||||||
|
rate: item.productFlowRate === 0 ? 0 : (item.productFlowRate / item.weight) * 100
|
||||||
|
}));
|
||||||
|
innerProgressList.value = pulpData.value.data.map(item => ({
|
||||||
|
name: item.name,
|
||||||
|
value: item.productFlowRate,
|
||||||
|
rate: item.productFlowRate === 0 ? 0 : (item.productFlowRate / item.weight) * 100
|
||||||
|
}));
|
||||||
|
// 更新 UHT 数据
|
||||||
|
processForm_uht.value = {
|
||||||
|
formula: uhtData.value.data[0].formula,
|
||||||
|
totalTraffic: uhtData.value.totalTraffic,
|
||||||
|
status: uhtData.value.data[0].status,
|
||||||
|
productFlowRate: uhtData.value.data[0].productFlowRate,
|
||||||
|
mixerStep: uhtData.value.data[0].mixerStep,
|
||||||
|
temperature: uhtData.value.data[0].temperature
|
||||||
|
};
|
||||||
|
processForm_pulp.value = {
|
||||||
|
formula: pulpUHTData.value.data[0].formula,
|
||||||
|
totalTraffic: pulpUHTData.value.totalTraffic,
|
||||||
|
status: pulpUHTData.value.data[0].status,
|
||||||
|
productFlowRate: pulpUHTData.value.data[0].productFlowRate,
|
||||||
|
mixerStep: pulpUHTData.value.data[0].mixerStep,
|
||||||
|
temperature: pulpUHTData.value.data[0].temperature
|
||||||
|
};
|
||||||
|
// 更新果汁无菌罐数据
|
||||||
|
juiceTank.value = {
|
||||||
|
mixerStep: juiceTank.value.data[0].mixerStep,
|
||||||
|
rate: juiceTank.value.data[0].liquidLevel === 0 ? 0 : (juiceTank.value.data[0].liquidLevel / juiceTank.value.data[0].weight) * 100,
|
||||||
|
liquidLevel: juiceTank.value.data[0].liquidLevel,
|
||||||
|
productFlowRate: juiceTank.value.data[0].productFlowRate
|
||||||
|
};
|
||||||
|
pulpTank.value = {
|
||||||
|
mixerStep: pulpTank.value.data[0].mixerStep,
|
||||||
|
rate: pulpTank.value.data[0].liquidLevel === 0 ? 0 : (pulpTank.value.data[0].liquidLevel / pulpTank.value.data[0].weight) * 100,
|
||||||
|
liquidLevel: pulpTank.value.data[0].liquidLevel,
|
||||||
|
productFlowRate: pulpTank.value.data[0].productFlowRate
|
||||||
|
};
|
||||||
|
dynamicMixer.value = {
|
||||||
|
formula: dynamicMixer.value.data[0].formula,
|
||||||
|
status: dynamicMixer.value.data[0].status,
|
||||||
|
liquidLevel: dynamicMixer.value.data[0].liquidLevel,
|
||||||
|
mixerStep: dynamicMixer.value.data[0].mixerStep,
|
||||||
|
temperature: dynamicMixer.value.data[0].temperature,
|
||||||
|
productFlowRate: dynamicMixer.value.data[0].productFlowRate
|
||||||
|
};
|
||||||
|
console.log("🚀 ~ fetchData ~ dynamicMixer:", dynamicMixer)
|
||||||
|
} else {
|
||||||
|
console.error('Error fetching data:', response.message);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchGanttData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await getGanttData(globalDeviceId.value, globalTime.value);
|
||||||
|
if (response.code === 200) {
|
||||||
|
const ganttData = response.data.map(item => ({
|
||||||
|
deviceId: item.deviceId,
|
||||||
|
duration: item.duration,
|
||||||
|
beginTime: convertToGMTPlus8(item.beginTime),
|
||||||
|
endTime: convertToGMTPlus8(item.endTime),
|
||||||
|
status: item.status,
|
||||||
|
mixerStep: item.mixerStep,
|
||||||
|
productFlowRate: item.productFlowRate,
|
||||||
|
formula: item.formula,
|
||||||
|
lineId: item.lineId
|
||||||
|
}));
|
||||||
|
processData.value = ganttData;
|
||||||
|
formattedProcessData.value = formatDates(ganttData); // 确保数据格式化后赋值给 formattedProcessData
|
||||||
|
} else {
|
||||||
|
// 数据不存在
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching Gantt data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBlockClick = async (deviceId) => {
|
||||||
|
try {
|
||||||
|
globalDeviceId.value = deviceId;
|
||||||
|
const currentTime = new Date().toISOString();
|
||||||
|
globalTime.value = currentTime;
|
||||||
|
const response = await getGanttData(deviceId, currentTime);
|
||||||
|
if (response.code === 200) {
|
||||||
|
const ganttData = response.data.map(item => ({
|
||||||
|
deviceId: item.deviceId,
|
||||||
|
duration: item.duration,
|
||||||
|
beginTime: convertToGMTPlus8(item.beginTime),
|
||||||
|
endTime: convertToGMTPlus8(item.endTime),
|
||||||
|
status: item.status,
|
||||||
|
mixerStep: item.mixerStep,
|
||||||
|
productFlowRate: item.productFlowRate,
|
||||||
|
formula: item.formula,
|
||||||
|
lineId: item.lineId
|
||||||
|
}));
|
||||||
|
processData.value = ganttData;
|
||||||
|
formattedProcessData.value = formatDates(ganttData);
|
||||||
|
if (ganttChart.value && ganttChart.value.updateChart) {
|
||||||
|
ganttChart.value.updateChart();
|
||||||
|
}
|
||||||
|
showInfoMessage();
|
||||||
|
} else {
|
||||||
|
console.error('Error fetching Gantt data:', response.message);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching Gantt data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getHistory = async (datetime) => {
|
||||||
|
try {
|
||||||
|
const response = await getHistoryReport(datetime);
|
||||||
|
if (response.code === 200) {
|
||||||
|
// 处理历史数据
|
||||||
|
console.log('历史数据:', response.data);
|
||||||
|
} else {
|
||||||
|
console.error('Error fetching history data:', response.message);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching history data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
|
const showInfoMessage = () => {
|
||||||
|
proxy.$message.info('数据写入成功！');
|
||||||
|
};
|
||||||
|
|
||||||
|
const showDangerMessage = () => {
|
||||||
|
proxy.$message.danger('数据未成功写入！');
|
||||||
|
};
|
||||||
|
|
||||||
|
const showWarningMessage = () => {
|
||||||
|
proxy.$message.warning('数据写入异常！');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
fetchData();
|
||||||
|
fetchGanttData();
|
||||||
|
updateTime();
|
||||||
|
setInterval(updateTime, 1000);
|
||||||
|
setInterval(() => {
|
||||||
|
fetchData();
|
||||||
|
fetchGanttData();
|
||||||
|
}, 60000); // 每分钟刷新一次接口
|
||||||
|
|
||||||
|
// 监听 update-history 事件
|
||||||
|
window.addEventListener('update-history', (event) => {
|
||||||
|
alert('接收到 update-history 事件');
|
||||||
|
getHistory(event.detail);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 全局样式 */
|
||||||
|
.dashboard-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: #000028;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Microsoft YaHei', sans-serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
/* 调大全局字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 上部区域样式 */
|
||||||
|
.upper-section {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 上左区域样式 */
|
||||||
|
.upper-left {
|
||||||
|
display: flex;
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左一区域样式 */
|
||||||
|
.left-1 {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左二区域样式 */
|
||||||
|
.left-2 {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-1,
|
||||||
|
.left-2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 间隔样式 */
|
||||||
|
.spacing {
|
||||||
|
height: 0.125rem;
|
||||||
|
background-color: #000028;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进度条样式 */
|
||||||
|
.juice-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* justify-content: space-around; */
|
||||||
|
margin: 2rem 1rem 3rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题和流量标签样式 */
|
||||||
|
.juice-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
/* 调大标题字体大小 */
|
||||||
|
margin: 1rem 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-label {
|
||||||
|
font-size: 1rem;
|
||||||
|
/* 调大流量标签字体大小 */
|
||||||
|
margin: 1rem 1rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.juice-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
/* 调大果汁名称字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.juice-value {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
/* 调大果汁值字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进度条样式 */
|
||||||
|
.progress-bar {
|
||||||
|
height: 1.25rem;
|
||||||
|
background: #000028;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
width: 70%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进度样式 */
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0.625rem;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #000028;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress .progress-text {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 区块样式 */
|
||||||
|
.block {
|
||||||
|
background: #23233C;
|
||||||
|
border: 0.0625rem solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
min-height: 6.25rem;
|
||||||
|
box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2);
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.5rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* UHT 项目样式 */
|
||||||
|
.UHT-item {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 恢复 info-panel 样式 */
|
||||||
|
.info-panel {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息行样式 */
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 3rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息项样式 */
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息标签样式 */
|
||||||
|
.info-label {
|
||||||
|
font-size: 1rem;
|
||||||
|
/* 调大信息标签字体大小 */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签面板样式 */
|
||||||
|
.tag-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(ix-chip) .container.custom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(ix-chip) .container.custom {
|
||||||
|
color: rgb(0, 0, 40);
|
||||||
|
background-color: rgb(0, 190, 220);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧区域样式 */
|
||||||
|
.upper-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧信息行样式 */
|
||||||
|
.info-item {
|
||||||
|
margin: 0 0 0.875rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧 IxChip 样式 */
|
||||||
|
.left-chip {
|
||||||
|
margin: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧 IxChip 样式 */
|
||||||
|
.right-chip {
|
||||||
|
margin: 1rem 0.5rem 0 0;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-panel-2 {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-info-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下部区域样式 */
|
||||||
|
.lower-section {
|
||||||
|
width: 100%;
|
||||||
|
height: 20.5%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 甘特图块样式 */
|
||||||
|
.gantt-block {
|
||||||
|
height: 12.5rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 箭头样式 */
|
||||||
|
.arrow {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 0.3125rem solid transparent;
|
||||||
|
border-right: 0.3125rem solid transparent;
|
||||||
|
border-top: 0.3125rem solid #00FFB9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lower-footer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
gap: 0.625rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* 添加此行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.lower-footer :deep(ix-button) {
|
||||||
|
flex: 1 1 calc(25% - 1.25rem);
|
||||||
|
max-width: calc(25% - 1.25rem);
|
||||||
|
margin: 0.3125rem;
|
||||||
|
text-align: center;
|
||||||
|
/* 添加此行 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
<template>
|
||||||
|
<div class="form-overlay">
|
||||||
|
<form class="form-validation-example" @submit.prevent="submitForm">
|
||||||
|
<div class="form-header">
|
||||||
|
<h5>点检异常数据</h5>
|
||||||
|
<p>提交原因</p>
|
||||||
|
</div>
|
||||||
|
<div class="spacing"></div>
|
||||||
|
<div class="form-body">
|
||||||
|
<div class="item-chip-container">
|
||||||
|
<p>{{ itemName }}</p>
|
||||||
|
<IxChip class="chip" background="#FF2640" chip-color="#000028" variant="custom">
|
||||||
|
09:00 超出上下限
|
||||||
|
</IxChip>
|
||||||
|
</div>
|
||||||
|
<label for="reason">请输入原因</label>
|
||||||
|
<textarea id="reason" v-model="reason"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-footer">
|
||||||
|
<IxButton type="submit">提交</IxButton>
|
||||||
|
<IxButton Outline @click="resetForm">重置</IxButton>
|
||||||
|
<IxButton Outline @click="$emit('close')">关闭</IxButton>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, defineProps } from 'vue';
|
||||||
|
import { IxButton, IxChip } from '@siemens/ix-vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
itemName: String
|
||||||
|
});
|
||||||
|
|
||||||
|
const reason = ref('');
|
||||||
|
|
||||||
|
const submitForm = () => {
|
||||||
|
console.log('提交原因:', reason.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
reason.value = '';
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.form-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
border: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-validation-example {
|
||||||
|
background-color:#23233C;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
width: 25rem; /* 设置表单宽度 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 0.0625rem solid white; /* 增加白色边框 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-header h5 {
|
||||||
|
color: #9898A8; /* 修改颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 间隔样式 */
|
||||||
|
.spacing {
|
||||||
|
height: 0.2vh;
|
||||||
|
/* 使用视口高度作为间隔 */
|
||||||
|
background-color: #000028;
|
||||||
|
/* 与主背景色相同 */
|
||||||
|
margin: 0.875rem 0;
|
||||||
|
/* 使用相对单位的外边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-header h5,
|
||||||
|
.form-body p,
|
||||||
|
.form-body label {
|
||||||
|
color: #9898A8; /* 修改颜色 */
|
||||||
|
text-align: left; /* 文字靠左对齐 */
|
||||||
|
font-size: 0.7rem; /* 字体大小为9px */
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-header p {
|
||||||
|
text-align: left; /* 文字靠左对齐 */
|
||||||
|
font-size: 0.875rem; /* 字体大小为12px */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-chip-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.03125rem; /* 0.5px */
|
||||||
|
height: 100%; /* 确保容器高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-chip-container p {
|
||||||
|
display: flex;
|
||||||
|
align-items: center; /* 上下居中 */
|
||||||
|
margin: 0; /* 移除默认外边距 */
|
||||||
|
line-height: 1; /* 确保行高 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
font-size: 0.7rem; /* 字体大小为9px */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,465 @@
|
||||||
|
<template>
|
||||||
|
<div class="inspection-container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="header_left">
|
||||||
|
<ix-select v-model="state.selectedShift" :options="shiftOptions"></ix-select>
|
||||||
|
<ix-select v-model="state.selectedOption1" :options="state.options1"></ix-select>
|
||||||
|
<ix-select v-model="state.selectedOption2" :options="state.options2"></ix-select>
|
||||||
|
<IxButton> 查询 </IxButton>
|
||||||
|
<IxButton> 导出全部 </IxButton>
|
||||||
|
</div>
|
||||||
|
<div class="header_right">
|
||||||
|
<IxButton> 灌注机 </IxButton>
|
||||||
|
<IxButton Outline> 吹瓶机 </IxButton>
|
||||||
|
<IxButton Outline> 果汁杀菌 </IxButton>
|
||||||
|
<IxButton Outline> 果肉杀菌 </IxButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inspection-table">
|
||||||
|
<div class="table-container">
|
||||||
|
<IxEventList>
|
||||||
|
<IxEventListItem class="testbg1">
|
||||||
|
<div class="table-row">
|
||||||
|
<span class="fixed-width"></span>
|
||||||
|
<span class="fixed-width"></span>
|
||||||
|
<span class="fixed-width"></span>
|
||||||
|
<span class="fixed-width"></span>
|
||||||
|
<!--这里是你外面包裹了一个span，改span的背景就行，index是判断哪些变颜色-->
|
||||||
|
<span class="fixed-width" v-for="(hour,index) in hours" :key="hour">
|
||||||
|
<IxButton class="custom-button" @click="handleInspection(index)"> 确认 </IxButton>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</IxEventListItem>
|
||||||
|
<IxEventListItem class="testbg1">
|
||||||
|
<div class="table-row-1">
|
||||||
|
<span class="header-row">点检项目</span>
|
||||||
|
<span class="header-row">单位</span>
|
||||||
|
<span class="header-row">参考值</span>
|
||||||
|
<span class="header-row">当前值</span>
|
||||||
|
<span class="header-row" v-for="hour in hours" :key="hour">
|
||||||
|
{{ hour }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</IxEventListItem>
|
||||||
|
<IxEventListItem v-for="(item, index) in inspectionItems" :key="index" color="color-success" class="testbg">
|
||||||
|
<div class="table-row">
|
||||||
|
<span class="fixed-width">{{ item.name }}</span>
|
||||||
|
<span class="fixed-width">--</span>
|
||||||
|
<span class="fixed-width">{{ item.reference }}</span>
|
||||||
|
<span class="fixed-width">{{ item.current }}</span>
|
||||||
|
<span class="fixed-width" v-for="hour in hours" :key="hour">
|
||||||
|
{{ item.data[hour] || '--' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</IxEventListItem>
|
||||||
|
</IxEventList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<InspectionForm v-if="showForm" :itemName="selectedItemName" @close="showForm.value = false" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, getCurrentInstance } from 'vue';
|
||||||
|
import { IxDatetimePicker, IxButton, IxDivider, IxDropdown, IxDropdownHeader, IxDropdownItem, IxEventList, IxEventListItem, IxSelect } from '@siemens/ix-vue';
|
||||||
|
import InspectionForm from './InspectionForm.vue';
|
||||||
|
|
||||||
|
// 定义班次选项
|
||||||
|
const shiftOptions = [
|
||||||
|
{ label: '白班', value: 'day' },
|
||||||
|
{ label: '晚班', value: 'night' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 获取当前时间的小时数
|
||||||
|
const currentHour = new Date().getHours();
|
||||||
|
|
||||||
|
// 根据当前时间确定默认班次
|
||||||
|
const defaultShift = currentHour >= 7 && currentHour < 19 ? 'day' : 'night';
|
||||||
|
|
||||||
|
// 定义响应式变量
|
||||||
|
const state = ref({
|
||||||
|
selectedShift: defaultShift,
|
||||||
|
selectedOption1: null,
|
||||||
|
selectedOption2: null,
|
||||||
|
options1: [
|
||||||
|
{ label: 'Option 1', value: 'option1' },
|
||||||
|
{ label: 'Option 2', value: 'option2' },
|
||||||
|
{ label: 'Option 3', value: 'option3' }
|
||||||
|
],
|
||||||
|
options2: [
|
||||||
|
{ label: 'Choice A', value: 'choiceA' },
|
||||||
|
{ label: 'Choice B', value: 'choiceB' },
|
||||||
|
{ label: 'Choice C', value: 'choiceC' }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
const showForm = ref(false);
|
||||||
|
const selectedItemName = ref('');
|
||||||
|
|
||||||
|
// 计算当前班次的时间段
|
||||||
|
const hours = computed(() => {
|
||||||
|
const shift = state.value.selectedShift;
|
||||||
|
const hours = [];
|
||||||
|
if (shift === 'day') {
|
||||||
|
for (let i = 7; i <= 18; i++) {
|
||||||
|
hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 白班 07:00-18:00
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let i = 19; i <= 23; i++) {
|
||||||
|
hours.push(`${i}:00`); // 晚班 19:00-23:00
|
||||||
|
}
|
||||||
|
for (let i = 0; i <= 6; i++) {
|
||||||
|
hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 晚班 00:00-06:00
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return hours;
|
||||||
|
});
|
||||||
|
|
||||||
|
// JSON 数据
|
||||||
|
const data = {
|
||||||
|
juiceFlow: {
|
||||||
|
'07:00': 123456,
|
||||||
|
'08:00': 234567,
|
||||||
|
'09:00': 345678,
|
||||||
|
'10:00': 456789,
|
||||||
|
'11:00': 567890,
|
||||||
|
'12:00': 678901,
|
||||||
|
'13:00': 789012,
|
||||||
|
'14:00': 890123,
|
||||||
|
'15:00': 901234,
|
||||||
|
'16:00': 123456,
|
||||||
|
'17:00': 234567,
|
||||||
|
'18:00': 345678,
|
||||||
|
'19:00': 456789,
|
||||||
|
},
|
||||||
|
pulpFlow: {
|
||||||
|
'07:00': 654321,
|
||||||
|
'08:00': 543210,
|
||||||
|
'09:00': 432109,
|
||||||
|
'10:00': 321098,
|
||||||
|
'11:00': 210987,
|
||||||
|
'12:00': 109876,
|
||||||
|
'13:00': 987654,
|
||||||
|
'14:00': 876543,
|
||||||
|
'15:00': 765432,
|
||||||
|
'16:00': 654321,
|
||||||
|
'17:00': 543210,
|
||||||
|
'18:00': 432109,
|
||||||
|
},
|
||||||
|
sterile: {
|
||||||
|
'07:00': 111222,
|
||||||
|
'08:00': 222111,
|
||||||
|
'09:00': 333222,
|
||||||
|
'10:00': 444333,
|
||||||
|
'11:00': 555444,
|
||||||
|
'12:00': 666555,
|
||||||
|
'13:00': 777666,
|
||||||
|
'14:00': 888777,
|
||||||
|
'15:00': 999888,
|
||||||
|
'16:00': 111222,
|
||||||
|
'17:00': 222111,
|
||||||
|
'18:00': 333222,
|
||||||
|
},
|
||||||
|
clean: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test1: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test2: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test3: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test4: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test5: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test6: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test7: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test8: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test9: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test10: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
test11: {
|
||||||
|
'07:00': 333444,
|
||||||
|
'08:00': 444555,
|
||||||
|
'09:00': 555666,
|
||||||
|
'10:00': 666777,
|
||||||
|
'11:00': 777888,
|
||||||
|
'12:00': 888999,
|
||||||
|
'13:00': 999000,
|
||||||
|
'14:00': 111111,
|
||||||
|
'15:00': 222222,
|
||||||
|
'16:00': 333333,
|
||||||
|
'17:00': 444444,
|
||||||
|
'18:00': 555555,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const inspectionItems = [
|
||||||
|
{ name: '果汁调配状态', reference: 727, current: 727, data: data.juiceFlow },
|
||||||
|
{ name: '果肉调配状态', reference: 800, current: 800, data: data.pulpFlow },
|
||||||
|
{ name: '无菌状态', reference: 128, current: 128, data: data.sterile },
|
||||||
|
{ name: '清洁状态', reference: 727, current: 727, data: data.clean },
|
||||||
|
{ name: '测试1', reference: 123, current: 123, data: data.test1 },
|
||||||
|
{ name: '测试2', reference: 456, current: 456, data: data.test2 },
|
||||||
|
{ name: '测试3', reference: 789, current: 789, data: data.test3 },
|
||||||
|
{ name: '测试4', reference: 101, current: 101, data: data.test4 },
|
||||||
|
{ name: '测试5', reference: 202, current: 202, data: data.test5 },
|
||||||
|
{ name: '测试6', reference: 303, current: 303, data: data.test6 },
|
||||||
|
{ name: '测试7', reference: 404, current: 404, data: data.test7 },
|
||||||
|
{ name: '测试8', reference: 505, current: 505, data: data.test8 },
|
||||||
|
{ name: '测试9', reference: 606, current: 606, data: data.test9 },
|
||||||
|
{ name: '测试10', reference: 707, current: 707, data: data.test10 },
|
||||||
|
{ name: '测试11', reference: 808, current: 808, data: data.test11 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 点检按钮点击事件
|
||||||
|
const handleInspection = (index) => {
|
||||||
|
selectedItemName.value = inspectionItems[index].name;
|
||||||
|
showForm.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
|
const showInfoMessage = (index) => {
|
||||||
|
proxy.$message.info(index + '数据写入成功！');
|
||||||
|
};
|
||||||
|
|
||||||
|
const showDangerMessage = (index) => {
|
||||||
|
proxy.$message.danger(index + '数据未成功写入！');
|
||||||
|
};
|
||||||
|
|
||||||
|
const showWarningMessage = (index) => {
|
||||||
|
proxy.$message.warning(index + '数据写入异常！');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.inspection-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh; /* 修改为100vh，使其高度铺满整个视口 */
|
||||||
|
background-color: #000028;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.2rem; /* 调大全局字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 70%; /* 设置宽度，确保三个搜索框都能正常显示 */
|
||||||
|
font-size: 1rem; /* 调大左侧头部字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px; /* 添加间距 */
|
||||||
|
font-size: 1rem; /* 调大右侧头部字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspection-table {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%; /* 修改为90%，使其高度铺满剩余部分 */
|
||||||
|
overflow-x: auto; /* 添加水平滚动条 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 100%; /* 确保表格宽度至少为容器宽度 */
|
||||||
|
overflow-x: auto; /* 添加水平滚动条 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* padding: 10px;
|
||||||
|
border-bottom: 1px solid #ccc; */
|
||||||
|
flex: 1; /* 使每一行铺满 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row-1 {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-width {
|
||||||
|
width: 7rem; /* 设置固定宽度 */
|
||||||
|
text-align: center; /* 居中对齐 */
|
||||||
|
font-size: 1rem; /* 调大固定宽度元素字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-row {
|
||||||
|
display: flex;
|
||||||
|
width: 7rem;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #23233C;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1rem; /* 调大表头行字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
ix-button {
|
||||||
|
margin: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testbg {
|
||||||
|
/* 这里是因为它tm组件里的，还用的好像是webcomponent，但是tmd不对外提供修改的东西，好在有个css颜色变量可以修改 */
|
||||||
|
--theme-event-item--background:#23233C;
|
||||||
|
/* --theme-event-item--background--hover: blue; */
|
||||||
|
}
|
||||||
|
.testbg1{
|
||||||
|
--theme-event-item--background:#000028;
|
||||||
|
}
|
||||||
|
/**如果要改按钮的颜色，那么上面就不要用 :style 改成用 :class 来设置，这个总没问题吧，然后再f12看按钮有哪些颜色变量 */
|
||||||
|
/* 定义按钮颜色的 CSS 类 */
|
||||||
|
.custom-button {
|
||||||
|
--theme-btn-primary--background: #FFA849;
|
||||||
|
--theme-btn-primary--background--hover: #FFA849;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<IxApplicationHeader name="My Application">
|
||||||
|
<div className="placeholder-logo"></div>
|
||||||
|
</IxApplicationHeader>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { IxApplicationHeader } from '@siemens/ix-vue';
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export {default as HeaderComponent} from './headerComponent.vue'
|
||||||
|
export {default as SiderComponent} from './siderComponent.vue'
|
||||||
|
export {default as AppMainComponent} from './mainComponent.vue'
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<IxContent>
|
||||||
|
<IxContentHeader
|
||||||
|
header-title="My Content Page"
|
||||||
|
></IxContentHeader>
|
||||||
|
</IxContent>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { IxContent, IxContentHeader } from '@siemens/ix-vue';
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<template>
|
||||||
|
<IxMenu>
|
||||||
|
<IxMenuItem>Item 1</IxMenuItem>
|
||||||
|
<IxMenuItem>Item 2</IxMenuItem>
|
||||||
|
</IxMenu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { IxMenu, IxMenuItem } from '@siemens/ix-vue';
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,203 @@
|
||||||
|
<template>
|
||||||
|
<IxApplication
|
||||||
|
:appSwitchConfig="appSwitchConfig"
|
||||||
|
theme="classic-dark"
|
||||||
|
>
|
||||||
|
<IxApplicationHeader
|
||||||
|
name="SIEMENS MIS 1.0 前处理界面"
|
||||||
|
:applicationSwitchButton="true"
|
||||||
|
>
|
||||||
|
<div className="placeholder-logo"></div>
|
||||||
|
|
||||||
|
<!-- 添加实时显示时间 -->
|
||||||
|
<div class="time-display">{{ currentTime }}</div>
|
||||||
|
|
||||||
|
<!-- 确保图标按钮正确显示 -->
|
||||||
|
<IxIconButton icon="print" variant="secondary" ghost @click="toggleDatetimePicker"></IxIconButton>
|
||||||
|
<IxIconButton icon="star" variant="secondary" ghost></IxIconButton>
|
||||||
|
<IxIconButton icon="tools" variant="secondary" ghost></IxIconButton>
|
||||||
|
</IxApplicationHeader>
|
||||||
|
|
||||||
|
<IxContent class="mainContent">
|
||||||
|
<router-view @update-history="updateHistory"></router-view>
|
||||||
|
</IxContent>
|
||||||
|
|
||||||
|
<!-- 添加 IxDatetimePicker 组件 -->
|
||||||
|
<div v-if="showDatetimePicker" class="datetime-picker-container">
|
||||||
|
<IxDatetimePicker range="false" showSeconds="false" show-time-reference="true" @done="handleDatetimePickerDone" />
|
||||||
|
</div>
|
||||||
|
</IxApplication>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
IxApplication,
|
||||||
|
IxApplicationHeader,
|
||||||
|
IxAvatar,
|
||||||
|
IxContent,
|
||||||
|
IxContentHeader,
|
||||||
|
IxDropdownButton,
|
||||||
|
IxDropdownItem,
|
||||||
|
IxIconButton,
|
||||||
|
IxDatetimePicker,
|
||||||
|
} from '@siemens/ix-vue';
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue';
|
||||||
|
|
||||||
|
const appSwitchConfig = {
|
||||||
|
i18nAppSwitch: '切换应用',
|
||||||
|
i18nLoadingApps: '加载应用中...',
|
||||||
|
currentAppId: 'mis-app',
|
||||||
|
apps: [
|
||||||
|
{
|
||||||
|
id: 'mis-app',
|
||||||
|
name: 'MIS 1.0',
|
||||||
|
iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
|
||||||
|
url: '/',
|
||||||
|
description: '前处理系统',
|
||||||
|
target: '_self',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'other-app',
|
||||||
|
name: '其他系统',
|
||||||
|
iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
|
||||||
|
url: 'https://ix.siemens.io/',
|
||||||
|
description: '其他系统描述',
|
||||||
|
target: '_blank',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentTime = ref('');
|
||||||
|
const showDatetimePicker = ref(false);
|
||||||
|
const selectedDatetime = ref('');
|
||||||
|
|
||||||
|
const updateTime = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(now.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(now.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||||
|
currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleDatetimePicker = () => {
|
||||||
|
showDatetimePicker.value = !showDatetimePicker.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDatetimePickerDone = (event) => {
|
||||||
|
selectedDatetime.value = event.detail;
|
||||||
|
showDatetimePicker.value = false;
|
||||||
|
// 将所选数据传到主页
|
||||||
|
console.log('Selected Datetime:', selectedDatetime.value);
|
||||||
|
updateHistory(selectedDatetime.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateHistory = (datetime) => {
|
||||||
|
// 触发主页中的 getHistory 方法
|
||||||
|
const event = new CustomEvent('update-history', { detail: datetime });
|
||||||
|
window.dispatchEvent(event);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
updateTime();
|
||||||
|
const interval = setInterval(updateTime, 60000); // 每分钟更新一次
|
||||||
|
onUnmounted(() => clearInterval(interval));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
ix-application {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #000028;
|
||||||
|
font-family: 'Microsoft YaHei', sans-serif;
|
||||||
|
font-size: 1.5rem; /* 调大全局字体大小 */
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(ix-application-header) {
|
||||||
|
background-color: #23233C !important;
|
||||||
|
height: 4rem !important; /* 64px 转换为 rem */
|
||||||
|
padding: 0 !important;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.2rem; /* 调大 logo 文本字体大小 */
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.03125rem; /* 0.5px 转换为 rem */
|
||||||
|
padding: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-display {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem; /* 调大时间显示字体大小 */
|
||||||
|
margin: 0.5rem 1rem 0 1rem; /* 16px 转换为 rem */
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ix-icon-button) {
|
||||||
|
--background-color: transparent;
|
||||||
|
--color: #fff;
|
||||||
|
height: 4rem; /* 64px 转换为 rem */
|
||||||
|
width: 4rem; /* 64px 转换为 rem */
|
||||||
|
border-radius: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.application-name) {
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 1.2rem !important; /* 调大应用名称字体大小 */
|
||||||
|
font-weight: normal !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(IxContent) {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 4rem);
|
||||||
|
padding: 0 !important; /* 确保没有内边距 */
|
||||||
|
margin: 0 !important;
|
||||||
|
position: relative; /* 确保 IxDatetimePicker 组件正确显示 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetime-picker-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 4rem; /* 确保在头部下方 */
|
||||||
|
right: 1rem; /* 靠右对齐 */
|
||||||
|
z-index: 1000; /* 确保在最上层 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: #000028;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(IxApplication) {
|
||||||
|
margin: 0; /* 确保没有外边距 */
|
||||||
|
padding: 0; /* 确保没有内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainContent {
|
||||||
|
padding: 0 !important; /* 确保没有内边距 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,4 +1,20 @@
|
||||||
const { defineConfig } = require('@vue/cli-service')
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
transpileDependencies: true
|
publicPath: '/',
|
||||||
|
transpileDependencies: true,
|
||||||
|
lintOnSave: false,
|
||||||
|
devServer: {
|
||||||
|
historyApiFallback: true,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://192.168.1.199:8080',
|
||||||
|
changeOrigin: true
|
||||||
|
},
|
||||||
|
// '/test-api': {
|
||||||
|
// target: 'http://cs-vsc.siemens.com.cn:8005',
|
||||||
|
// changeOrigin: true,
|
||||||
|
// pathRewrite: { '^/test-api': '' }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue