Compare commits
10 Commits
83b45364c1
...
75bcc46bfd
| Author | SHA1 | Date | |
|---|---|---|---|
|
75bcc46bfd | ||
|
|
cabdf8658e | ||
|
|
03bf0c839c | ||
|
64548cc671 | ||
|
|
87241457c8 | ||
|
|
419dce9bca | ||
|
|
7d445d58fc | ||
|
|
c029f936cc | ||
|
|
156631f864 | ||
|
|
b82e7bda9f |
543
package-lock.json
generated
543
package-lock.json
generated
@ -8,20 +8,24 @@
|
||||
"name": "daping",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@cycjimmy/jsmpeg-player": "^6.0.5",
|
||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||
"@iamzzg/data-view": "^2.10.0",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"@tweenjs/tween.js": "^19.0.0",
|
||||
"axios": "^1.3.2",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.1",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-plus": "^2.3.0",
|
||||
"pdfobject": "^2.3.0",
|
||||
"pinia": "^2.0.30",
|
||||
"recorder-core": "^1.3.23122400",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"swiper": "^9.0.5",
|
||||
"three": "^0.150.1",
|
||||
"vue": "^3.2.13",
|
||||
"vue-echarts": "^6.6.9",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
@ -32,6 +36,8 @@
|
||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"patch-package": "^6.5.1",
|
||||
"sass": "^1.79.1",
|
||||
"sass-loader": "^16.0.1",
|
||||
"typescript": "~4.5.5"
|
||||
}
|
||||
},
|
||||
@ -1737,6 +1743,11 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@cycjimmy/jsmpeg-player": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/@cycjimmy/jsmpeg-player/-/jsmpeg-player-6.0.5.tgz",
|
||||
"integrity": "sha512-bVNHQ7VN9ecKT5AI/6RC7zpW/y4ca68a9txeR5Wiin+jKpUn/7buMe+5NPub89A8NNeNnKPQfrD2+c76ch36mA=="
|
||||
},
|
||||
"node_modules/@dataview/datav-vue3": {
|
||||
"version": "0.0.0-test.1672506674342",
|
||||
"resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
|
||||
@ -4010,13 +4021,22 @@
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.7.tgz",
|
||||
"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"set-function-length": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
@ -5046,6 +5066,23 @@
|
||||
"clone": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/define-data-property": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
|
||||
"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/define-lazy-prop": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
|
||||
@ -5221,12 +5258,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
|
||||
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
|
||||
"integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.1"
|
||||
"zrender": "5.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts-liquidfill": {
|
||||
@ -5417,6 +5454,27 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz",
|
||||
"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.2.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-module-lexer": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
|
||||
@ -6111,10 +6169,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/function.prototype.name": {
|
||||
"version": "1.1.5",
|
||||
@ -6156,14 +6217,22 @@
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
|
||||
"integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
|
||||
"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"has": "^1.0.3",
|
||||
"has-symbols": "^1.0.3"
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"has-proto": "^1.0.1",
|
||||
"has-symbols": "^1.0.3",
|
||||
"hasown": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-own-enumerable-property-symbols": {
|
||||
@ -6331,12 +6400,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/has-property-descriptors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
|
||||
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
||||
"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.1.1"
|
||||
"es-define-property": "^1.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-proto": {
|
||||
@ -6375,6 +6447,18 @@
|
||||
"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/he": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
|
||||
@ -6637,6 +6721,12 @@
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
|
||||
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@ -8101,10 +8191,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.12.3",
|
||||
"resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
|
||||
"dev": true
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.2.tgz",
|
||||
"integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/object-keys": {
|
||||
"version": "1.1.1",
|
||||
@ -8610,6 +8706,11 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/pdfobject": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/pdfobject/-/pdfobject-2.3.0.tgz",
|
||||
"integrity": "sha512-w/9pXDXTDs3IDmOri/w8lM/w6LHR0/F4fcBLLzH+4csSoyshQ5su0TE7k0FLHZO7aOjVLDGecqd1M89+PVpVAA=="
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
|
||||
@ -9497,6 +9598,11 @@
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/recorder-core": {
|
||||
"version": "1.3.23122400",
|
||||
"resolved": "https://registry.npmmirror.com/recorder-core/-/recorder-core-1.3.23122400.tgz",
|
||||
"integrity": "sha512-oDtV56qlaKFPBkEtYaMbYBC/aiYa76wSBAauJKlLk6fKX5b5I6Fo8EyjxkUkWrCHK9uv1Cf4HVls0EUwoBrKxQ=="
|
||||
},
|
||||
"node_modules/regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
|
||||
@ -9638,6 +9744,11 @@
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/resize-detector": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
|
||||
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
|
||||
@ -9812,6 +9923,91 @@
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.79.1",
|
||||
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.79.1.tgz",
|
||||
"integrity": "sha512-+mA7svoNKeL0DiJqZGeR/ZGUu8he4I8o3jyUcOFyo4eBJrwNgIMmAEwCMo/N2Y3wdjOBcRzoNxZIOtrtMX8EXg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-loader": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-16.0.1.tgz",
|
||||
"integrity": "sha512-xACl1ToTsKnL9Ce5yYpRxrLj9QUDCnwZNhzpC7tKiFyA8zXsd3Ap+HGVnbCgkdQcm43E+i6oKAWBsvGA6ZoiMw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"neo-async": "^2.6.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18.12.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@rspack/core": "0.x || 1.x",
|
||||
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
|
||||
"sass": "^1.3.0",
|
||||
"sass-embedded": "*",
|
||||
"webpack": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@rspack/core": {
|
||||
"optional": true
|
||||
},
|
||||
"node-sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-embedded": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/sass/node_modules/chokidar": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.0.tgz",
|
||||
"integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"readdirp": "^4.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.16.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/sass/node_modules/readdirp": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.0.1.tgz",
|
||||
"integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 14.16.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/schema-utils": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
|
||||
@ -10027,6 +10223,23 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"gopd": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/setprototypeof": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
@ -10073,14 +10286,21 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/side-channel": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
|
||||
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.6.tgz",
|
||||
"integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.0",
|
||||
"get-intrinsic": "^1.0.2",
|
||||
"object-inspect": "^1.9.0"
|
||||
"call-bind": "^1.0.7",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"object-inspect": "^1.13.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/signal-exit": {
|
||||
@ -11115,6 +11335,52 @@
|
||||
"@vue/shared": "3.2.45"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-echarts": {
|
||||
"version": "6.6.9",
|
||||
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.6.9.tgz",
|
||||
"integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"resize-detector": "^0.3.0",
|
||||
"vue-demi": "^0.13.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.5",
|
||||
"@vue/runtime-core": "^3.0.0",
|
||||
"echarts": "^5.4.1",
|
||||
"vue": "^2.6.12 || ^3.1.1"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/runtime-core": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-echarts/node_modules/vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"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/vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
@ -12160,9 +12426,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
|
||||
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
|
||||
"integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
@ -13356,6 +13622,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
|
||||
"integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ=="
|
||||
},
|
||||
"@cycjimmy/jsmpeg-player": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/@cycjimmy/jsmpeg-player/-/jsmpeg-player-6.0.5.tgz",
|
||||
"integrity": "sha512-bVNHQ7VN9ecKT5AI/6RC7zpW/y4ca68a9txeR5Wiin+jKpUn/7buMe+5NPub89A8NNeNnKPQfrD2+c76ch36mA=="
|
||||
},
|
||||
"@dataview/datav-vue3": {
|
||||
"version": "0.0.0-test.1672506674342",
|
||||
"resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
|
||||
@ -15255,13 +15526,16 @@
|
||||
"dev": true
|
||||
},
|
||||
"call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.7.tgz",
|
||||
"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"set-function-length": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"callsites": {
|
||||
@ -16068,6 +16342,17 @@
|
||||
"clone": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"define-data-property": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
|
||||
"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es-define-property": "^1.0.0",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"define-lazy-prop": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
|
||||
@ -16212,12 +16497,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
|
||||
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
|
||||
"integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.1"
|
||||
"zrender": "5.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
@ -16386,6 +16671,21 @@
|
||||
"which-typed-array": "^1.1.9"
|
||||
}
|
||||
},
|
||||
"es-define-property": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz",
|
||||
"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"get-intrinsic": "^1.2.4"
|
||||
}
|
||||
},
|
||||
"es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"dev": true
|
||||
},
|
||||
"es-module-lexer": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
|
||||
@ -16946,9 +17246,9 @@
|
||||
"optional": true
|
||||
},
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"dev": true
|
||||
},
|
||||
"function.prototype.name": {
|
||||
@ -16982,14 +17282,16 @@
|
||||
"dev": true
|
||||
},
|
||||
"get-intrinsic": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
|
||||
"integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
|
||||
"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1",
|
||||
"has": "^1.0.3",
|
||||
"has-symbols": "^1.0.3"
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"has-proto": "^1.0.1",
|
||||
"has-symbols": "^1.0.3",
|
||||
"hasown": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"get-own-enumerable-property-symbols": {
|
||||
@ -17127,12 +17429,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"has-property-descriptors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
|
||||
"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
|
||||
"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"get-intrinsic": "^1.1.1"
|
||||
"es-define-property": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"has-proto": {
|
||||
@ -17162,6 +17464,15 @@
|
||||
"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
|
||||
"dev": true
|
||||
},
|
||||
"hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"he": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
|
||||
@ -17373,6 +17684,12 @@
|
||||
"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"immutable": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
|
||||
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
|
||||
"dev": true
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@ -18539,9 +18856,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"object-inspect": {
|
||||
"version": "1.12.3",
|
||||
"resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.2.tgz",
|
||||
"integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
|
||||
"dev": true
|
||||
},
|
||||
"object-keys": {
|
||||
@ -18942,6 +19259,11 @@
|
||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
|
||||
"dev": true
|
||||
},
|
||||
"pdfobject": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/pdfobject/-/pdfobject-2.3.0.tgz",
|
||||
"integrity": "sha512-w/9pXDXTDs3IDmOri/w8lM/w6LHR0/F4fcBLLzH+4csSoyshQ5su0TE7k0FLHZO7aOjVLDGecqd1M89+PVpVAA=="
|
||||
},
|
||||
"picocolors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
|
||||
@ -19550,6 +19872,11 @@
|
||||
"picomatch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"recorder-core": {
|
||||
"version": "1.3.23122400",
|
||||
"resolved": "https://registry.npmmirror.com/recorder-core/-/recorder-core-1.3.23122400.tgz",
|
||||
"integrity": "sha512-oDtV56qlaKFPBkEtYaMbYBC/aiYa76wSBAauJKlLk6fKX5b5I6Fo8EyjxkUkWrCHK9uv1Cf4HVls0EUwoBrKxQ=="
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
|
||||
@ -19669,6 +19996,11 @@
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"resize-detector": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
|
||||
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
|
||||
@ -19807,6 +20139,43 @@
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.79.1",
|
||||
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.79.1.tgz",
|
||||
"integrity": "sha512-+mA7svoNKeL0DiJqZGeR/ZGUu8he4I8o3jyUcOFyo4eBJrwNgIMmAEwCMo/N2Y3wdjOBcRzoNxZIOtrtMX8EXg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": "^4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"chokidar": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.0.tgz",
|
||||
"integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readdirp": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"readdirp": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.0.1.tgz",
|
||||
"integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"sass-loader": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-16.0.1.tgz",
|
||||
"integrity": "sha512-xACl1ToTsKnL9Ce5yYpRxrLj9QUDCnwZNhzpC7tKiFyA8zXsd3Ap+HGVnbCgkdQcm43E+i6oKAWBsvGA6ZoiMw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"neo-async": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
|
||||
@ -20001,6 +20370,20 @@
|
||||
"send": "0.18.0"
|
||||
}
|
||||
},
|
||||
"set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-data-property": "^1.1.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"gopd": "^1.0.1",
|
||||
"has-property-descriptors": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"setprototypeof": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
@ -20038,14 +20421,15 @@
|
||||
"dev": true
|
||||
},
|
||||
"side-channel": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
|
||||
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.6.tgz",
|
||||
"integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"call-bind": "^1.0.0",
|
||||
"get-intrinsic": "^1.0.2",
|
||||
"object-inspect": "^1.9.0"
|
||||
"call-bind": "^1.0.7",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"object-inspect": "^1.13.1"
|
||||
}
|
||||
},
|
||||
"signal-exit": {
|
||||
@ -20868,6 +21252,23 @@
|
||||
"@vue/shared": "3.2.45"
|
||||
}
|
||||
},
|
||||
"vue-echarts": {
|
||||
"version": "6.6.9",
|
||||
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.6.9.tgz",
|
||||
"integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==",
|
||||
"requires": {
|
||||
"resize-detector": "^0.3.0",
|
||||
"vue-demi": "^0.13.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
@ -21732,9 +22133,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"zrender": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
|
||||
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
|
||||
"integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0"
|
||||
},
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"echarts": "^5.5.0",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-plus": "^2.3.0",
|
||||
"pdfobject": "^2.3.0",
|
||||
"pinia": "^2.0.30",
|
||||
"recorder-core": "^1.3.23122400",
|
||||
"register-service-worker": "^1.7.2",
|
||||
@ -33,9 +34,9 @@
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"node-sass": "^6.0.1",
|
||||
"patch-package": "^6.5.1",
|
||||
"sass-loader": "^10.2.0",
|
||||
"sass": "^1.79.1",
|
||||
"sass-loader": "^16.0.1",
|
||||
"typescript": "~4.5.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4404806 */
|
||||
src: url('iconfont.woff2?t=1704785829971') format('woff2'),
|
||||
url('iconfont.woff?t=1704785829971') format('woff'),
|
||||
url('iconfont.ttf?t=1704785829971') format('truetype');
|
||||
src: url('iconfont.woff2?t=1721977017018') format('woff2'),
|
||||
url('iconfont.woff?t=1721977017018') format('woff'),
|
||||
url('iconfont.ttf?t=1721977017018') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,18 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-caijishebeixinxichaxun:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.icon-yuyin:before {
|
||||
content: "\e905";
|
||||
}
|
||||
|
||||
.icon-luyin1:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-tvoc:before {
|
||||
content: "\e753";
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/assets/header/CHT.png
Normal file
BIN
src/assets/header/CHT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/img/3c92b5010e6845229311385a05f864aa.jpg
Normal file
BIN
src/assets/img/3c92b5010e6845229311385a05f864aa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
src/assets/img/CHBJ.png
Normal file
BIN
src/assets/img/CHBJ.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 961 KiB |
@ -37,7 +37,7 @@ function routerpush(isLink:boolean=false) {
|
||||
<style scoped>
|
||||
.item {
|
||||
width: 20%;
|
||||
height: 27%;
|
||||
height: 267px;
|
||||
margin: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -10,10 +10,12 @@ const chart = ref(null)
|
||||
const prop = defineProps({
|
||||
title: String,
|
||||
color: Array,
|
||||
percentage: Number
|
||||
percentage: Object
|
||||
})
|
||||
let pieChart = null
|
||||
const init = ()=>{
|
||||
let {accomplish,counts} = prop.percentage
|
||||
let rate = Math.floor((accomplish / counts) * 100)
|
||||
pieChart = proxy.$echarts.init(chart.value)
|
||||
let option = {
|
||||
title: {
|
||||
@ -103,14 +105,14 @@ const init = ()=>{
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: prop.percentage,
|
||||
value: rate,
|
||||
name: "345",
|
||||
title: {},
|
||||
detail: {
|
||||
// 中心title设置
|
||||
offsetCenter: ["0%", "0%"],
|
||||
color: "#01F8FF",
|
||||
formatter: "{value}%",
|
||||
formatter: accomplish + "/" + counts,
|
||||
// borderColor: '#01F8FF',
|
||||
// borderRadius: 20,
|
||||
// borderWidth: 1,
|
||||
|
||||
@ -543,7 +543,7 @@ h1 {
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
width: 360px;
|
||||
height: 2rem;
|
||||
bottom: 30%;
|
||||
left: 4.2rem;
|
||||
|
||||
584
src/components/headerBox/header3.vue
Normal file
584
src/components/headerBox/header3.vue
Normal file
@ -0,0 +1,584 @@
|
||||
<!--
|
||||
* @FilePath: header3.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 08:16:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-19 09:14:40
|
||||
* @Descripttion:
|
||||
-->
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\components\headerBox\header2.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-16 11:04:06
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="header2" :style="{ width: props.width, height: props.height }">
|
||||
<h1 :class="langJudge() == '简体中文' ? 'zh-title' : 'en-title'">
|
||||
{{ props.title }}
|
||||
</h1>
|
||||
<div class="slot">
|
||||
<div class="tip" style="display: flex">
|
||||
<span class="tipspan" v-for="item in props.titleTip">
|
||||
<div class="colortip" :style="{ backgroundColor: item.color }"></div>
|
||||
<span class="tipstring">{{ item.name }}</span></span
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<!-- <div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
|
||||
<i class="iconfont icon-back"></i>
|
||||
</div> -->
|
||||
<div
|
||||
v-show="typeObj.AbnormalData"
|
||||
ref="AbnormalDataRef"
|
||||
class="AbnormalData"
|
||||
@click="AbnormalDataFun"
|
||||
>
|
||||
<dv-scroll-board
|
||||
class="dv-scroll-boardclass"
|
||||
ref="tipList"
|
||||
:config="listdata"
|
||||
style="width: 30rem; height: 50px"
|
||||
/>
|
||||
<el-badge :value="AbnormalNum" class="i-badge" :hidden="AbnormalNum == 0">
|
||||
<i
|
||||
:class="
|
||||
AbnormalNum > 0
|
||||
? 'iconfont icon-baojingxinxi Abnormal-icon-yellow'
|
||||
: 'iconfont icon-baojingxinxi'
|
||||
"
|
||||
></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div v-show="typeObj.time" class="time">
|
||||
<p ref="Timedom">{{ timeHtml }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:virtual-ref="AbnormalDataRef"
|
||||
:visible="Abnormalpopovervisible"
|
||||
trigger="click"
|
||||
width="600px"
|
||||
placement="bottom-start"
|
||||
virtual-triggering
|
||||
>
|
||||
<ul class="popoverBOX" ref="popoverliDom" v-click-outside="noClickAbnormalDataFun">
|
||||
<li class="popoverHeader">
|
||||
<!-- <span><i class="iconfont icon-lishijilu lishijilu"></i>历史记录</span> -->
|
||||
<el-button type="primary" :icon="Clock" text @click="showDialog"
|
||||
>历史记录</el-button
|
||||
>
|
||||
</li>
|
||||
<li v-for="item in powerlist" :key="item.deviceId">
|
||||
{{ item.context }}
|
||||
</li>
|
||||
<li class="lookdown" v-show="onloadlist">
|
||||
<span @click="clickNextPageAlarmList">{{ t("messages.加载更多") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-popover>
|
||||
<HDialog
|
||||
:tableData="dialogdata"
|
||||
v-model:dialogTableVisible="dialogTableVisible"
|
||||
:dialogLoading="dialogLoading"
|
||||
@getDialogdatafun="getDialogdatafun"
|
||||
:type="AbnormalType.type"
|
||||
:total="dialogtotal"
|
||||
></HDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useNowTime from "@/hook/nowTime";
|
||||
import { ClickOutside as vClickOutside } from "element-plus";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { devListType } from "@/type/InPlantProducts";
|
||||
import { getAlarmListData, getAlarmListHistoryData } from "@/http/index";
|
||||
import { onMounted, onUnmounted, reactive, ref, unref, watch, computed } from "vue";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
import { useHeaderStore } from "@/store/components/header";
|
||||
import { getStoredLanguage } from "@/utils/languageStorage";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Clock } from "@element-plus/icons-vue";
|
||||
import HDialog from "./dialog/headerDialog.vue";
|
||||
let { t } = useI18n();
|
||||
const storeheader = useHeaderStore();
|
||||
let { timeHtml } = useNowTime();
|
||||
const router = useRouter();
|
||||
//刷新数据
|
||||
let numkey = ref(0);
|
||||
let popoverkey = ref(0);
|
||||
//历史数据dom
|
||||
let AbnormalDataRef = ref();
|
||||
let popoverRef = ref();
|
||||
let tipList = ref();
|
||||
let popoverliDom = ref();
|
||||
//历史报警数据弹窗显示
|
||||
let Abnormalpopovervisible = ref(false);
|
||||
let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
|
||||
//dialog
|
||||
let dialogdata = ref([]);
|
||||
let dialogTableVisible = ref(false);
|
||||
let dialogLoading = ref(true);
|
||||
let dialogtotal = ref(0);
|
||||
let onloadlist = computed(() => {
|
||||
return storeheader.num > powerlist.length;
|
||||
});
|
||||
const listdata = reactive<devListType>({
|
||||
data: [],
|
||||
rowNum: 2,
|
||||
oddRowBGC: "#100C2A",
|
||||
evenRowBGC: "#100C2A",
|
||||
hoverPause: true,
|
||||
carousel: "page",
|
||||
waitTime: 3000,
|
||||
align: ["left"],
|
||||
});
|
||||
let AbnormalNum = ref(0);
|
||||
//弹窗历史数据
|
||||
let powerlist = reactive([]);
|
||||
let props = defineProps<{
|
||||
width: string;
|
||||
height: string;
|
||||
title: string;
|
||||
titleTip: any;
|
||||
typeFun: any[];
|
||||
alarmType: any[];
|
||||
}>();
|
||||
|
||||
window.document.title = props.title;
|
||||
const typeObj = reactive({
|
||||
comback: false,
|
||||
AbnormalData: false,
|
||||
time: false,
|
||||
});
|
||||
const AbnormalType = reactive({
|
||||
pageSize: 5,
|
||||
pageNum: 1,
|
||||
type: "",
|
||||
});
|
||||
let comeBackFun = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
const changeAbnormalData = (val: any) => {
|
||||
tipList.value.updateRows(val.data, { ...val });
|
||||
};
|
||||
let AbnormalDataFun = () => {
|
||||
//该函数执行优先级低于noClickAbnormalDataFun
|
||||
//Abnormalpopovervisibled代表弹窗是否已经显示
|
||||
// 判断弹窗是否打开如果打开就关闭 关闭就打开
|
||||
if (Abnormalpopovervisible.value) {
|
||||
Abnormalpopovervisible.value = false;
|
||||
} else {
|
||||
//关闭情况下判断是否点击了非弹窗位置如果是则仍然关闭 否则打开
|
||||
if (AbnormalpopovervisibleCtrl.value) {
|
||||
Abnormalpopovervisible.value = false;
|
||||
} else {
|
||||
Abnormalpopovervisible.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
let noClickAbnormalDataFun = () => {
|
||||
//该函数执行优先级高于AbnormalDataFun
|
||||
// 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false
|
||||
if (Abnormalpopovervisible.value) {
|
||||
AbnormalpopovervisibleCtrl.value = true;
|
||||
} else {
|
||||
AbnormalpopovervisibleCtrl.value = false;
|
||||
}
|
||||
|
||||
Abnormalpopovervisible.value ? (Abnormalpopovervisible.value = false) : "";
|
||||
};
|
||||
function typeStatus() {
|
||||
if (props.typeFun.length == 0) {
|
||||
return;
|
||||
}
|
||||
props.typeFun.forEach((res) => {
|
||||
for (let key in typeObj) {
|
||||
if (res == key) {
|
||||
typeObj[key] = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function langJudge() {
|
||||
let lang = getStoredLanguage();
|
||||
if (lang) {
|
||||
return lang;
|
||||
} else {
|
||||
return "简体中文";
|
||||
}
|
||||
}
|
||||
function showDialog() {
|
||||
if (dialogTableVisible.value == false) {
|
||||
getDialogdatafun({
|
||||
type: AbnormalType.type,
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
});
|
||||
}
|
||||
Abnormalpopovervisible.value = false;
|
||||
dialogTableVisible.value = true;
|
||||
}
|
||||
async function getDialogdatafun(config) {
|
||||
dialogLoading.value = true;
|
||||
let result: any = await getAlarmListHistoryData(config);
|
||||
|
||||
if (result.code == 200) {
|
||||
dialogtotal.value = result.total;
|
||||
dialogdata.value = result.rows;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
if (dialogLoading.value) {
|
||||
dialogLoading.value = false;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
//判断是否显示对应组件后所做操作
|
||||
watch(
|
||||
() => typeObj,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.AbnormalData) {
|
||||
AbnormalType.type = props.alarmType.join(",");
|
||||
getAlarmListDatafun();
|
||||
// connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
setAlarmscrollBoardList();
|
||||
}
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
//获取异常信息接口数据
|
||||
async function getAlarmListDatafun() {
|
||||
let result: any = await getAlarmListData(AbnormalType);
|
||||
|
||||
if (result.code == 200) {
|
||||
storeheader.setDataList(result);
|
||||
}
|
||||
}
|
||||
//单机显示更多历史报警数据
|
||||
function clickNextPageAlarmList() {
|
||||
// if(storeheader.num<=powerlist.length){
|
||||
// onloadlist.value=false
|
||||
// return
|
||||
// }
|
||||
AbnormalType.pageNum++;
|
||||
getAlarmListDatafun();
|
||||
}
|
||||
//接受历史报警数据
|
||||
watch(
|
||||
() => storeheader.AlarmpopoverList,
|
||||
(newVal, oldVal) => {
|
||||
newVal.forEach((res) => {
|
||||
powerlist.push(res);
|
||||
});
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
//接受历史报警数据滚动效果栏
|
||||
watch(
|
||||
() => storeheader.AlarmscrollBoardList,
|
||||
(newVal, oldVal) => {
|
||||
// newVal.forEach(res=>{
|
||||
// let e=res.context.split('，')
|
||||
// listdata.data.push([e[0]])
|
||||
// listdata.data.push([e[1]])
|
||||
// })
|
||||
// changeAbnormalData(listdata)
|
||||
// numkey.value++
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
let AlarmscrollTime = null;
|
||||
//每隔15秒钟替换一次组件数据进行轮播
|
||||
function setAlarmscrollBoardList() {
|
||||
let start = 0;
|
||||
let end = 4;
|
||||
|
||||
let i = 0;
|
||||
setTimeout(() => {
|
||||
storeheader.AlarmscrollBoardList.slice(0, 5).forEach((element) => {
|
||||
let e = element.context.split("，");
|
||||
listdata.data.push(...[[e[0]], [e[1]]]);
|
||||
i++;
|
||||
});
|
||||
|
||||
end = end + 5;
|
||||
start = i >= 5 ? 5 : storeheader.AlarmscrollBoardList.length - 1;
|
||||
start <= 0 ? (start = 0) : "";
|
||||
}, 1000);
|
||||
|
||||
AlarmscrollTime = setInterval(() => {
|
||||
if (i == 0) {
|
||||
listdata.data = [];
|
||||
}
|
||||
i = 0;
|
||||
if (storeheader.AlarmscrollBoardList.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (storeheader.AlarmscrollBoardList.length - 1 < end) {
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
for (start; start <= end; start++) {
|
||||
// console.log(storeheader.AlarmscrollBoardList[start],start,end);
|
||||
// console.log(storeheader.AlarmscrollBoardList.length-1);
|
||||
let listcontent = storeheader.AlarmscrollBoardList[start]?.context.split("，");
|
||||
|
||||
listdata.data.push(...[[listcontent[0]], [listcontent[1]]]);
|
||||
}
|
||||
changeAbnormalData(listdata);
|
||||
numkey.value++;
|
||||
end = end + 5;
|
||||
//如果下次数据剩一个则只拿一条数据
|
||||
if (start == storeheader.AlarmscrollBoardList.length - 1) {
|
||||
// console.log('进入了2');
|
||||
start = storeheader.AlarmscrollBoardList.length - 1;
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
//如果剩余数据不足5个则拿出剩余数据
|
||||
if (
|
||||
end > storeheader.AlarmscrollBoardList.length - 1 &&
|
||||
start <= storeheader.AlarmscrollBoardList.length - 1
|
||||
) {
|
||||
// console.log('进入了3');
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
// 如果全部超出则从头拿
|
||||
if (
|
||||
start > storeheader.AlarmscrollBoardList.length - 1 &&
|
||||
end > storeheader.AlarmscrollBoardList.length - 1
|
||||
) {
|
||||
// console.log('进入了4',start,end,storeheader.AlarmscrollBoardList.length-1,storeheader.AlarmscrollBoardList);
|
||||
start = 0;
|
||||
end = 4;
|
||||
}
|
||||
}, 15000);
|
||||
}
|
||||
//接受历史报警数据量
|
||||
watch(
|
||||
() => storeheader.num,
|
||||
(newVal, oldVal) => {
|
||||
AbnormalNum.value = newVal;
|
||||
numkey.value++;
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
function HeadergetWebsocket(val) {
|
||||
let data = null;
|
||||
try {
|
||||
data = JSON.parse(val);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
props.alarmType.some((e) => {
|
||||
return e == data.type;
|
||||
})
|
||||
) {
|
||||
// console.log(props.alarmType);
|
||||
// console.log(props.alarmType.some(e=>{return e==data.type}));
|
||||
storeheader.changeDataList(data);
|
||||
}
|
||||
}
|
||||
function HeadererrWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
onMounted(() => {
|
||||
//判断需要显示出来的数据
|
||||
typeStatus();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// closeWebsocket();
|
||||
storeheader.resetData();
|
||||
AlarmscrollTime ? clearInterval(AlarmscrollTime) : "";
|
||||
});
|
||||
defineExpose({
|
||||
changeAbnormalData,
|
||||
HeadergetWebsocket,
|
||||
HeadererrWebsocket,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/assets/css/iconfont.css";
|
||||
.header2 {
|
||||
width: 100%;
|
||||
/* background-image: url(@/assets/header/CHT.png); */
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header2-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
/* height: 100%; */
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
.zh-title {
|
||||
margin-top: 6px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.en-title {
|
||||
font-size: 2rem;
|
||||
max-width: 600px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
/* line-height: 80px; */
|
||||
}
|
||||
/* .header2 p {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 20px;
|
||||
font-size: 20px;
|
||||
} */
|
||||
.slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 50px 10px 10px 10px;
|
||||
}
|
||||
|
||||
/* .red {
|
||||
background-color: rgb(228, 57, 97);
|
||||
}
|
||||
.blue {
|
||||
background-color: rgb(32, 174, 197);
|
||||
} */
|
||||
.colortip {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tipstring {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.tip {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.tipspan {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.comeBack {
|
||||
position: absolute;
|
||||
/* width: 2rem;
|
||||
height: 2rem; */
|
||||
bottom: 10%;
|
||||
left: 1.5rem;
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comeBack > i {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.AbnormalData {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* width: 2rem;
|
||||
height: 2rem; */
|
||||
bottom: 20%;
|
||||
right: 1%;
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
}
|
||||
.AbnormalData:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.AbnormalData > span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.popoverBOX {
|
||||
max-height: 15rem;
|
||||
font-size: 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.popoverBOX li {
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
.lookdown {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1c78c2;
|
||||
}
|
||||
.lookdown:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
height: 2rem;
|
||||
bottom: 30%;
|
||||
left: 4.2rem;
|
||||
font-size: 25px;
|
||||
}
|
||||
.i-badge {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.i-badge > i {
|
||||
font-size: 3rem;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
/* .dv-scroll-board /deep/ .ceil {
|
||||
font-size: 1.2rem;
|
||||
} */
|
||||
.dv-scroll-boardclass :deep(.ceil) {
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-popper.is-dark:deep() {
|
||||
background: #14274b !important;
|
||||
}
|
||||
.el-popover.el-popper:deep() {
|
||||
background: #14274b !important;
|
||||
}
|
||||
.Abnormal-icon-yellow {
|
||||
color: #ddb14f;
|
||||
}
|
||||
.lishijilu {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
.popoverHeader {
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.popoverHeader span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
/* border-radius: 50px;
|
||||
background: linear-gradient(315deg, #404040, #4c4c4c); */
|
||||
/* box-shadow: -20px -20px 60px #3c3c3c, 20px 20px 60px #525252; */
|
||||
}
|
||||
</style>
|
||||
@ -16,11 +16,13 @@ export default function( ){
|
||||
function gettime(){
|
||||
var time = new Date();
|
||||
|
||||
var year = time.getFullYear();
|
||||
var year:number|string = time.getFullYear();
|
||||
// 1月到12月(0-11)
|
||||
var month = time.getMonth()+1;
|
||||
var dates = time.getDate();
|
||||
|
||||
var month:number|string = time.getMonth()+1;
|
||||
var dates:number|string = time.getDate();
|
||||
if (year < 10) year = "0" + year;
|
||||
if (month < 10) month = "0" + month;
|
||||
if (dates < 10) dates = "0" + dates;
|
||||
// 周日-周六(0-6) 刚好对应数字下标
|
||||
var day = time.getDay();
|
||||
if (getStoredLanguage() == 'English/USD') {
|
||||
|
||||
39
src/http/changHao/index.ts
Normal file
39
src/http/changHao/index.ts
Normal file
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* @FilePath: index.ts
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-29 08:13:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-29 16:15:35
|
||||
* @Descripttion:
|
||||
*/
|
||||
import {get,post} from "@/utils/http"
|
||||
|
||||
// 设备信息
|
||||
export function reqdevicebyid(data:any){
|
||||
return get('/socket/getdevicebyid/'+ data.id)
|
||||
}
|
||||
|
||||
// 耗电量
|
||||
export function reqtelectricity(data:any){
|
||||
return get('/socket/getelectricity/' + data.id)
|
||||
}
|
||||
|
||||
// 生产情况列表
|
||||
export function reqproinfo(data:any){
|
||||
return get('/socket/getproinfo/' + data.id)
|
||||
}
|
||||
|
||||
// 故障时长
|
||||
export function reqfaultinfo(data:any){
|
||||
return get('/socket/getfaultinfo/' + data.id)
|
||||
}
|
||||
|
||||
// 急停时长
|
||||
export function reqstopinfo(data:any){
|
||||
return get('/socket/getstopinfo/' + data.id)
|
||||
}
|
||||
|
||||
// 设备告警
|
||||
export function reqtalarm(data:any){
|
||||
return get('/socket/getalarm/' + data.id)
|
||||
}
|
||||
@ -298,7 +298,7 @@ export default {
|
||||
'效益&效率':'Benefit&Efficiency',
|
||||
'效益':'Benefit',
|
||||
'效率':'Efficiency',
|
||||
'微工厂缝纫设备看板':'微工厂缝纫设备看板',
|
||||
'微工厂缝纫设备看板':'Micro factory sewing equipment signboard',
|
||||
'工作时间':'工作时间',
|
||||
'空闲时间':'空闲时间',
|
||||
'智能货架物联管理系统':'智能货架物联管理系统',
|
||||
@ -316,10 +316,42 @@ export default {
|
||||
'月':'Mes',
|
||||
'日':'Fecha',
|
||||
"再登软件工况物联系统": "GOATS Working Condition IoT",
|
||||
"富怡立式啧墨切割机": "Richpeace inkjet cutting machine",
|
||||
"富怡立式喷墨切割机": "Richpeace inkjet cutting machine",
|
||||
"富怡多功能绣花机": "Richpeace embroidery machine",
|
||||
"JUKI高速直驱平缝机": "JUKI lockstitch sewing machine",
|
||||
"Yamato包缝机": "Yamato overlock sewing machine",
|
||||
"花样名称": "花样名称",
|
||||
"花样总针数": "花样总针数",
|
||||
"当前针数": "当前针数",
|
||||
"断线提醒": "断线提醒",
|
||||
"冲缝一体机": "冲缝一体机",
|
||||
"再登机器物联管理系统": "再登机器物联管理系统",
|
||||
"工业缝纫机": "工业缝纫机",
|
||||
"剪线次数": "剪线次数",
|
||||
"针数": "针数",
|
||||
"压脚次数": "压脚次数",
|
||||
"能耗": "能耗",
|
||||
"次": "次",
|
||||
"设备稼动率": "设备稼动率",
|
||||
"产出进度": "产出进度",
|
||||
"稼动率说明":"稼动率：实际工作时间/设备开机时间",
|
||||
"已完成":"已完成",
|
||||
"未完成":"未完成",
|
||||
"工作速度":"工作速度",
|
||||
"产品合格率":"产品合格率",
|
||||
"维保信息":"维保信息",
|
||||
'件':'件',
|
||||
"日期":"日期",
|
||||
"工作人员":"工作人员",
|
||||
"操作员编号":"操作员编号",
|
||||
"完成":"完成",
|
||||
"合格率":"合格率",
|
||||
"通知":"通知",
|
||||
"轮播已开启":"轮播已开启",
|
||||
"轮播已关闭":"轮播已关闭",
|
||||
"加工时长":"加工时长",
|
||||
"当日总针数":"Total Stitches Today",
|
||||
"当日工作时长":"Working Time Today",
|
||||
},
|
||||
"default":{
|
||||
'年': 'Year',
|
||||
|
||||
@ -307,7 +307,7 @@ export default {
|
||||
'效益&效率':'Benefit&Efficiency',
|
||||
'效益':'Benefit',
|
||||
'效率':'Efficiency',
|
||||
'微工厂缝纫设备看板':'微工厂缝纫设备看板',
|
||||
'微工厂缝纫设备看板':'Micro factory sewing equipment signboard',
|
||||
'工作时间':'工作时间',
|
||||
'空闲时间':'空闲时间',
|
||||
'智能货架物联管理系统':'智能货架物联管理系统',
|
||||
@ -325,7 +325,7 @@ export default {
|
||||
'月':'Month',
|
||||
'日':'Date',
|
||||
"再登软件工况物联系统": "GOATS Working Condition IoT",
|
||||
"富怡立式啧墨切割机": "Richpeace inkjet cutting machine",
|
||||
"富怡立式喷墨切割机": "Richpeace inkjet cutting machine",
|
||||
"富怡多功能绣花机": "Richpeace embroidery machine",
|
||||
"JUKI高速直驱平缝机": "JUKI lockstitch sewing machine",
|
||||
"Yamato包缝机": "Yamato overlock sewing machine",
|
||||
@ -360,6 +360,8 @@ export default {
|
||||
"轮播已关闭":"Carousel has been turned off",
|
||||
"加工时长":"Processing Time",
|
||||
"合格率":"Qualified Rate",
|
||||
"当日总针数":"Total Stitches Today",
|
||||
"当日工作时长":"Working Time Today",
|
||||
},
|
||||
"default":{
|
||||
'年': 'Year',
|
||||
|
||||
@ -324,7 +324,7 @@ export default {
|
||||
'月': '月',
|
||||
'日': '日',
|
||||
"再登软件工况物联系统": "再登软件工况物联系统",
|
||||
"富怡立式啧墨切割机": "富怡立式啧墨切割机",
|
||||
"富怡立式喷墨切割机": "富怡立式喷墨切割机",
|
||||
"富怡多功能绣花机": "富怡多功能绣花机",
|
||||
"JUKI高速直驱平缝机": "JUKI高速直驱平缝机",
|
||||
"Yamato包缝机": "Yamato包缝机",
|
||||
@ -358,6 +358,8 @@ export default {
|
||||
"轮播已开启":"轮播已开启",
|
||||
"轮播已关闭":"轮播已关闭",
|
||||
"加工时长":"加工时长",
|
||||
"当日总针数":"当日总针数",
|
||||
"当日工作时长":"当日工作时长",
|
||||
},
|
||||
"default":{
|
||||
'年': '年',
|
||||
|
||||
@ -378,6 +378,13 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: () => import("../views/Exhibition/Germany/loop.vue"),
|
||||
},
|
||||
|
||||
// 昌昊大屏
|
||||
{
|
||||
path:"/ChangHaoView_:id",
|
||||
name:"ChangHaoView",
|
||||
component: () => import("../views/ChangHaoView/index.vue"),
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
//获取用户保存的语言首选项
|
||||
export function getStoredLanguage(): string | null {
|
||||
return localStorage.getItem("selectedLanguage");
|
||||
return localStorage.getItem("selectedLanguage")||'简体中文';
|
||||
}
|
||||
//保存新的语言选择
|
||||
export function saveStoredLanguage(language: string): void {
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
*/
|
||||
|
||||
import { getStoredLanguage } from "../utils/languageStorage";
|
||||
export function gettime(data = null,type = 1) {
|
||||
export function gettime(data = null, type = 1) {
|
||||
var time
|
||||
if (data) {
|
||||
data instanceof Date? time=data : time = new Date(data);
|
||||
data instanceof Date ? time = data : time = new Date(data);
|
||||
} else {
|
||||
time = new Date();
|
||||
}
|
||||
@ -38,11 +38,11 @@ export function gettime(data = null,type = 1) {
|
||||
if (minutes < 10) minutes = "0" + minutes;
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
|
||||
if(type==1){
|
||||
if (type == 1) {
|
||||
return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds + ' ' + arr[day];
|
||||
}else if (type == 2){
|
||||
} else if (type == 2) {
|
||||
return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds;
|
||||
}else{
|
||||
} else {
|
||||
return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds + ' ' + arr[day];
|
||||
}
|
||||
|
||||
@ -55,3 +55,17 @@ export function clacendTime(endtime, nowtime) {
|
||||
var s = Math.floor(newDate / 1000 % 60)
|
||||
return day + '天' + h + '时' + m + '分' + s + '秒'
|
||||
}
|
||||
|
||||
//时间戳转换
|
||||
export function timestampToTime(timestamp) {
|
||||
const startDate = new Date(0); // 0 就是 1970年1月1日
|
||||
const targetDate = new Date(timestamp);
|
||||
const diff = targetDate.getTime() - startDate.getTime(); // 计算时间差（毫秒）
|
||||
// let day = Math.floor(diff / (1000 * 60 * 60 * 24)); // 转换为天数
|
||||
let hour = (Math.floor(diff / (1000 * 60 * 60) % 24)) < 10 ? '0'+(Math.floor(diff / (1000 * 60 * 60) % 24)) :(Math.floor(diff / (1000 * 60 * 60) % 24)); // 转换为小时
|
||||
let minute = Math.floor(diff / (1000 * 60) % 60) < 10 ? '0'+Math.floor(diff / (1000 * 60) % 60) :Math.floor(diff / (1000 * 60) % 60); // 转换为分钟
|
||||
let second = Math.floor(diff / 1000 % 60) < 10 ? '0'+Math.floor(diff / 1000 % 60):Math.floor(diff / 1000 % 60); // 转换为秒
|
||||
|
||||
return `${hour}:${minute}:${second}`;
|
||||
}
|
||||
|
||||
|
||||
28
src/views/ChangHaoView/components/Border.vue
Normal file
28
src/views/ChangHaoView/components/Border.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<!--
|
||||
* @FilePath: Border.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 10:10:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-20 17:20:58
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div class="box" style="text-align: center">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
<style scoped>
|
||||
.box {
|
||||
background: linear-gradient(to top, #2667ab, #2667ab) left top no-repeat,
|
||||
/*上左*/ linear-gradient(to right, #2667ab, #2667ab) left top no-repeat,
|
||||
/*左上*/ linear-gradient(to left, #2667ab, #2667ab) right top no-repeat,
|
||||
/*上右*/ linear-gradient(to bottom, #2667ab, #2667ab) right top no-repeat,
|
||||
/*上右*/ linear-gradient(to left, #2667ab, #2667ab) left bottom no-repeat,
|
||||
/*下左*/ linear-gradient(to bottom, #2667ab, #2667ab) left bottom no-repeat,
|
||||
/*左下*/ linear-gradient(to top, #2667ab, #2667ab) right bottom no-repeat,
|
||||
/*下右*/ linear-gradient(to left, #2667ab, #2667ab) right bottom no-repeat; /*右下*/
|
||||
background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
|
||||
background-color: rgba(36, 56, 128, 0.04);
|
||||
}
|
||||
</style>
|
||||
105
src/views/ChangHaoView/components/Center.vue
Normal file
105
src/views/ChangHaoView/components/Center.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<!--
|
||||
* @FilePath: Center.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 11:04:25
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-19 11:11:38
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<Border class="center">
|
||||
<v-chart :option="options" class="line"></v-chart>
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
let lineRef = ref();
|
||||
let lineChart = null;
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
// 折线图配置
|
||||
|
||||
let options = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
legend: {
|
||||
data: ["日耗电曲线"],
|
||||
icon: "none",
|
||||
right: "10px",
|
||||
textStyle: {
|
||||
color: "#ff7b12",
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
// data: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
|
||||
data: props.data.x,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} ",
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "日耗电曲线",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
lineStyle: {
|
||||
color: "#ff7b12",
|
||||
},
|
||||
// data: [120, 135, 101, 134, 90, 230, 210],
|
||||
data: props.data.y,
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.center {
|
||||
height: 30%;
|
||||
width: 94%;
|
||||
margin: 2% 3%;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
128
src/views/ChangHaoView/components/CenterBottom.vue
Normal file
128
src/views/ChangHaoView/components/CenterBottom.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<!--
|
||||
* @FilePath: CenterBottom.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 11:04:25
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-19 11:08:37
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<Border class="centerbottom">
|
||||
<h2 class="components-header">
|
||||
<DecorationFadeOut> {{ title }} </DecorationFadeOut>
|
||||
</h2>
|
||||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
reactive,
|
||||
watch,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
list: [],
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const devList = ref(null);
|
||||
let config = reactive({
|
||||
header: [
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "程序名称" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "刀具号" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "加工数量" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "操作模式" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "运行模式" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工周期 " + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "轴状态" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工时间" + "</span>",
|
||||
],
|
||||
|
||||
headerBGC: "rgba(0, 11, 18, 1)",
|
||||
oddRowBGC: "#0d1625",
|
||||
evenRowBGC: "#000F1D",
|
||||
wrap: [false, false, false, false, false],
|
||||
columnWidth: [130, 120, 130, 120, 130, 160, 130, 160],
|
||||
align: ["center", "center", "center", "center", "center", "center", "center", "center"],
|
||||
rowNum: 3,
|
||||
fontsize: "18px",
|
||||
waitTime: 3000,
|
||||
// data: computed(() => prop.data),
|
||||
});
|
||||
|
||||
const handleData = () => {
|
||||
let config_data = prop.data.map((item: any) => {
|
||||
let statusString;
|
||||
if (item.axisstatus === 0) {
|
||||
statusString = "***";
|
||||
} else if (item.axisstatus === 1) {
|
||||
statusString = "移动";
|
||||
} else if (item.axisstatus === 2) {
|
||||
statusString = "暂停";
|
||||
} else {
|
||||
// 可选：如果axisstatus不是0、1或2，你可以设置一个默认值或抛出错误
|
||||
statusString = "未知状态";
|
||||
}
|
||||
return [
|
||||
item.procedurename,
|
||||
item.knifenum,
|
||||
item.pronum,
|
||||
item.operate,
|
||||
item.run,
|
||||
item.machining + "min",
|
||||
statusString,
|
||||
item.processingtime + "s",
|
||||
];
|
||||
});
|
||||
if (devList.value) {
|
||||
devList.value.updateRows(config_data, config);
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => prop.data,
|
||||
(newVal, oldVal) => {
|
||||
handleData();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
// console.log(config_data);
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.centerbottom {
|
||||
height: 30%;
|
||||
width: 94%;
|
||||
margin: 2% 3%;
|
||||
}
|
||||
.components-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #00c7ebfc;
|
||||
}
|
||||
.dev-list {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
:deep(.zd-scroll-board .rows .row-item) {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
270
src/views/ChangHaoView/components/CenterTop.vue
Normal file
270
src/views/ChangHaoView/components/CenterTop.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<Border class="centertop">
|
||||
<!-- <div ref="gaugeRef" id="gauge" style="width: 800px; height: 300px"></div> -->
|
||||
<v-chart class="chart" :option="option" style="width: 800px; height: 300px" />
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let gaugeRef = ref();
|
||||
let gaugeChart = null;
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
const option = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
formatter: "{a} <br/>{c} {b}",
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
series: [
|
||||
{
|
||||
name: "稼动率",
|
||||
type: "gauge",
|
||||
z: 3,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: "85%",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 4,
|
||||
color: [
|
||||
[0.9, "#00b2b9"],
|
||||
[1, "#e60007"],
|
||||
],
|
||||
},
|
||||
},
|
||||
//指针
|
||||
pointer: {
|
||||
itemStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: 1,
|
||||
length: 5, //长度
|
||||
splitNumber: 5, //数量
|
||||
lineStyle: { color: "#464646" }, //小刻度
|
||||
},
|
||||
//分隔线
|
||||
splitLine: {
|
||||
distance: -3,
|
||||
length: 14,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fbffff",
|
||||
distance: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
title: {
|
||||
offsetCenter: ["0", "90%"],
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
fontSize: 20,
|
||||
color: "#fbffff",
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
formatter: "{value} %",
|
||||
// formatter(params) {
|
||||
// return `${params.name}${params.value}h`;
|
||||
// },
|
||||
color: "inherit",
|
||||
fontSize: 40,
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 45.9,
|
||||
// name: "稼动率",
|
||||
// },
|
||||
// ],
|
||||
data: [
|
||||
props.data.find((item) => item.name === "稼动率") || {
|
||||
value: 0,
|
||||
name: "稼动率",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "主轴转速",
|
||||
type: "gauge",
|
||||
center: ["20%", "55%"],
|
||||
radius: "55%",
|
||||
min: 0,
|
||||
max: 100,
|
||||
endAngle: 45,
|
||||
splitNumber: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: [
|
||||
[0.9, "#00b2b9"],
|
||||
[1, "#e60007"],
|
||||
],
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: 1,
|
||||
length: 5, //长度
|
||||
splitNumber: 5, //数量
|
||||
lineStyle: { color: "#464646" }, //小刻度
|
||||
},
|
||||
//分隔线
|
||||
splitLine: {
|
||||
distance: -2,
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
offsetCenter: ["0", "115%"],
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
fontSize: 20,
|
||||
color: "#fbffff",
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
formatter: "{value}R/Min ",
|
||||
color: "inherit",
|
||||
fontSize: 20,
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 99.1,
|
||||
// name: "主轴转速",
|
||||
// },
|
||||
// ],
|
||||
data: [
|
||||
props.data.find((item) => item.name === "主轴转速") || {
|
||||
value: 0,
|
||||
name: "主轴转速",
|
||||
},
|
||||
],
|
||||
//指针
|
||||
pointer: {
|
||||
width: 5,
|
||||
itemStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "进给速度",
|
||||
type: "gauge",
|
||||
center: ["80%", "55%"],
|
||||
radius: "55%",
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 135,
|
||||
endAngle: -45,
|
||||
splitNumber: 7,
|
||||
axisLine: { lineStyle: { width: 8 } },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: [
|
||||
[0.9, "#00b2b9"],
|
||||
[1, "#e60007"],
|
||||
],
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: 1,
|
||||
length: 5, //长度
|
||||
splitNumber: 5, //数量
|
||||
lineStyle: { color: "#464646" }, //小刻度
|
||||
},
|
||||
//分隔线
|
||||
splitLine: {
|
||||
distance: -2,
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
offsetCenter: ["0", "115%"],
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
fontSize: 20,
|
||||
color: "#fbffff",
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
formatter: "{value}MM/Min",
|
||||
color: "inherit",
|
||||
fontSize: 20,
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 45.5,
|
||||
// name: "进给速度",
|
||||
// },
|
||||
// ],
|
||||
data: [
|
||||
props.data.find((item) => item.name === "进给速度") || {
|
||||
value: 0,
|
||||
name: "进给速度",
|
||||
},
|
||||
],
|
||||
//指针
|
||||
pointer: {
|
||||
width: 5,
|
||||
itemStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.centertop {
|
||||
height: 30%;
|
||||
width: 94%;
|
||||
margin: 2% 3%;
|
||||
}
|
||||
.gauge {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
.chart {
|
||||
padding-left: 50px;
|
||||
}
|
||||
</style>
|
||||
29
src/views/ChangHaoView/components/LeftBottom.vue
Normal file
29
src/views/ChangHaoView/components/LeftBottom.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<Border class="leftbottom">
|
||||
<devStatusTip
|
||||
:title="'设备告警'"
|
||||
:tipList="tipList"
|
||||
:label="{ name: '设备名称', alarmcode: '告警代码', alarminfo: '提示' }"
|
||||
:per_view="4"
|
||||
></devStatusTip>
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from "vue";
|
||||
import Border from "./Border.vue";
|
||||
import devStatusTip from "./devStatusTip.vue";
|
||||
|
||||
const props = defineProps({
|
||||
tipList: {
|
||||
type: Array as () => Array<{ name: string; alarmcode: string; alarminfo: string }>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.leftbottom {
|
||||
margin: 4%;
|
||||
height: 41%;
|
||||
/* width: 480px; */
|
||||
}
|
||||
</style>
|
||||
198
src/views/ChangHaoView/components/LeftTop.vue
Normal file
198
src/views/ChangHaoView/components/LeftTop.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<Border class="lefttop">
|
||||
<h2 class="components-header">
|
||||
<DecorationFadeOut> {{ title }} </DecorationFadeOut>
|
||||
</h2>
|
||||
<div class="chart-and-status">
|
||||
<div ref="ringRef" class="ring"></div>
|
||||
<!-- 新增的运行时间显示区域 -->
|
||||
<div class="status-display">
|
||||
<ul>
|
||||
<li v-for="(item, index) in data" :key="item.key" class="status-item">
|
||||
<span class="color-bar" :style="{ backgroundColor: colors[index] }"></span>
|
||||
<span class="label">{{ item.name }}:</span>
|
||||
<span class="value" :style="{ color: colors[index] }"
|
||||
>{{ item.value }}min</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Border>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
let ringRef = ref();
|
||||
let ringChart = null;
|
||||
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
statusList: {
|
||||
type: Array as any,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
// 生成颜色数组的计算属性
|
||||
const colors = computed(() => {
|
||||
const baseColors = ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"]; // 示例颜色
|
||||
return prop.data.map((_, index) => {
|
||||
return baseColors[index % baseColors.length]; // 循环使用颜色数组
|
||||
});
|
||||
});
|
||||
// 环形图配置
|
||||
const init = () => {
|
||||
ringChart = proxy.$echarts.init(ringRef.value, "dark");
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
color: ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"],
|
||||
backgroundColor: "transparent",
|
||||
legend: {
|
||||
show: false,
|
||||
// type: "scroll",
|
||||
// bottom: "0",
|
||||
// left: "center",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 16,
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["50%", "45%"],
|
||||
label: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return `${params.name}${params.value}min`;
|
||||
},
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
top: "5%",
|
||||
data: prop.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
ringChart.setOption(option);
|
||||
};
|
||||
onUpdated(() => {
|
||||
ringChart.setOption({
|
||||
series: [
|
||||
{
|
||||
data: prop.data,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// 初始化 ECharts 实例
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lefttop {
|
||||
margin: 4%;
|
||||
height: 50%;
|
||||
/* width: 480px; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
}
|
||||
.components-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #00c7ebfc;
|
||||
}
|
||||
.chart-and-status {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status-display {
|
||||
width: 90%;
|
||||
color: #f4f4f4;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
margin: 10px auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.color-bar {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
margin-right: 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #88beed33;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
text-align: left !important; /* 使用!important确保左对齐设置被优先考虑 */
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
margin-left: 40%;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.status-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
229
src/views/ChangHaoView/components/Right.vue
Normal file
229
src/views/ChangHaoView/components/Right.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<!--
|
||||
* @FilePath: Right.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-23 10:17:14
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-29 11:28:49
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<Border class="righttop">
|
||||
<div class="box-left">
|
||||
<!-- <el-image style="width: 100%; height: 60%" :src="imgSrc" fit="contain"></el-image> -->
|
||||
<div class="iconfont icon-caijishebeixinxichaxun"></div>
|
||||
<div class="device-status">
|
||||
<div
|
||||
class="status-indicator"
|
||||
:style="{ background: status_color[prop.deviceStatus] }"
|
||||
></div>
|
||||
<span style="margin-left: 10px" :style="{ color: statusTextColor }">{{
|
||||
statusText
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right">
|
||||
<ul style="margin-bottom: 30px">
|
||||
<li v-for="(item, index) in deviceList" :key="item.key" class="device-item">
|
||||
<span class="label">{{ item.label }}  </span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Border>
|
||||
|
||||
<Border class="rightcenter">
|
||||
<div class="box-item" style="width: 40%; padding-top: 30px;}">
|
||||
<span class="label">通讯状态:  </span
|
||||
><span class="value" :style="{ color: comTextColor }">{{ comvalue }}</span>
|
||||
</div>
|
||||
<div class="combox">
|
||||
<div class="top-item1" v-for="(item, index) in comList" :key="item.key">
|
||||
<span class="label">{{ item.label }}:   </span>
|
||||
<span class="value">{{ item.value + item.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Border>
|
||||
|
||||
<Border class="rightbottom">
|
||||
<div class="box-item" style="width: 40%; padding-top: 30px;}">
|
||||
<span class="label">实时电压、电流</span>
|
||||
</div>
|
||||
<div class="combox">
|
||||
<div class="top-item" v-for="(item, index) in CurList" :key="item.key">
|
||||
<span class="label">{{ item.label }}:   </span>
|
||||
<span class="value">{{ item.value + item.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import { defineComponent, ref, onMounted, computed } from "vue";
|
||||
const prop = defineProps({
|
||||
imgSrc: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
deviceList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
comList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
CurList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
communication: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
deviceStatus: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// const deviceStatus = ref(1);
|
||||
// const communicationValue = ref(5);
|
||||
|
||||
const comvalue = computed(() => {
|
||||
switch (prop.communication) {
|
||||
case 5:
|
||||
return "正常";
|
||||
case 15:
|
||||
return "断线";
|
||||
default:
|
||||
return "未知状态";
|
||||
}
|
||||
});
|
||||
|
||||
const com_color = {
|
||||
"5": "#44ce81",
|
||||
"15": "#c1c1c1",
|
||||
};
|
||||
const comTextColor = computed(() => {
|
||||
return com_color[prop.communication] || "#000000";
|
||||
});
|
||||
|
||||
const status_color = {
|
||||
"0": "#FF6E76",
|
||||
"1": "#44ce81",
|
||||
};
|
||||
|
||||
const statusText = computed(() => {
|
||||
switch (prop.deviceStatus) {
|
||||
case 0:
|
||||
return "停止";
|
||||
case 1:
|
||||
return "运行";
|
||||
default:
|
||||
return "未知状态";
|
||||
}
|
||||
});
|
||||
const statusTextColor = computed(() => {
|
||||
return status_color[prop.deviceStatus] || "#000000";
|
||||
});
|
||||
|
||||
// onMounted(() => {
|
||||
// console.log( devStatus.value);
|
||||
// }
|
||||
</script>
|
||||
<style scoped>
|
||||
@import url("@/assets/css/iconfont/iconfont.css");
|
||||
.righttop {
|
||||
margin: 4%;
|
||||
height: 22%;
|
||||
width: 440px;
|
||||
display: flex; /* 启用 Flexbox 布局 */
|
||||
align-items: center; /* 如果需要，可以在垂直方向上居中对齐子元素 */
|
||||
/* 其他样式，如高度、宽度、边距等 */
|
||||
}
|
||||
.rightcenter {
|
||||
margin: 4%;
|
||||
height: 40%;
|
||||
width: 440px;
|
||||
}
|
||||
.rightbottom {
|
||||
margin: 4%;
|
||||
height: 27%;
|
||||
width: 440px;
|
||||
}
|
||||
.box-left {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
/* background-color: red; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
}
|
||||
.status-indicator {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
width: 80%;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #aeeefafe;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.box-right {
|
||||
width: 70%;
|
||||
font-size: 20px;
|
||||
}
|
||||
.device-item {
|
||||
display: flex;
|
||||
padding: 8px 8px 8px 30px;
|
||||
list-style-type: none;
|
||||
}
|
||||
.value {
|
||||
color: #5abcfa;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
.label {
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
}
|
||||
/* .comvalue {
|
||||
color: #5abcfa;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
} */
|
||||
.combox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
vertical-align: middle;
|
||||
.top-item {
|
||||
padding: 10px 10px 10px 20px;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.top-item1 {
|
||||
padding: 10px 0px 10px 0px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 80px;
|
||||
/* color: #00b2b9; */
|
||||
}
|
||||
</style>
|
||||
241
src/views/ChangHaoView/components/devStatusTip.vue
Normal file
241
src/views/ChangHaoView/components/devStatusTip.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<!--
|
||||
* @FilePath: devStatusTip.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-20 17:06:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-20 17:57:53
|
||||
* @Descripttion:
|
||||
-->
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devStatusTip.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-12 08:52:40
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<h2 class="components-header">
|
||||
<DecorationFadeOut> {{ title }} </DecorationFadeOut>
|
||||
</h2>
|
||||
<div class="components-content" :key="keynum">
|
||||
<swiper-container
|
||||
:slidesPerView="props.per_view"
|
||||
:loop="true"
|
||||
:initialSlide="0"
|
||||
:spaceBetween="0"
|
||||
direction="vertical"
|
||||
:autoplay="{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}"
|
||||
autoHeight="true"
|
||||
observer="true"
|
||||
observeParents="true"
|
||||
@progress="onProgress"
|
||||
:loopAdditionalSlides="1"
|
||||
@slidechange="onSlideChange"
|
||||
v-if="props.tipList.length > 0"
|
||||
>
|
||||
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
|
||||
<div class="itemclass">
|
||||
<el-row :gutter="5" class="row-flex">
|
||||
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
|
||||
{{ index + 1 }}
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="18"
|
||||
class="col-flex"
|
||||
style="
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
align-items: flex-start;
|
||||
"
|
||||
>
|
||||
<p class="item-name">
|
||||
<span class="item-name-key">{{ label.name }}：</span
|
||||
><span class="item-name-value">{{ res.name }}</span>
|
||||
</p>
|
||||
<p style="margin-top: 10px 0">
|
||||
<span>{{ label.alarmcode }}：</span
|
||||
><span>{{ res.alarmcode }}</span>
|
||||
<span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="4"
|
||||
class="col-flex"
|
||||
style="font-size: 25px; font-weight: bold"
|
||||
:style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
|
||||
>
|
||||
{{ res.status }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<template
|
||||
v-if="
|
||||
props.tipList.length >= props.per_view &&
|
||||
props.tipList.length < props.per_view * 2
|
||||
"
|
||||
>
|
||||
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
|
||||
<div class="itemclass">
|
||||
<el-row :gutter="5" class="row-flex">
|
||||
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
|
||||
{{ index + 1 }}
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="18"
|
||||
class="col-flex"
|
||||
style="
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
align-items: flex-start;
|
||||
"
|
||||
>
|
||||
<p class="item-name">
|
||||
<span class="item-name-key">{{ label.name }}：</span
|
||||
><span class="item-name-value">{{ res.name }}</span>
|
||||
</p>
|
||||
<p style="margin-top: 10px 0">
|
||||
<span>{{ label.alarmcode }}：</span
|
||||
><span>{{ res.alarmcode }}</span>
|
||||
<span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="4"
|
||||
class="col-flex"
|
||||
style="font-size: 25px; font-weight: bold"
|
||||
:style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
|
||||
>
|
||||
{{ res.status }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</template>
|
||||
</swiper-container>
|
||||
<div
|
||||
v-else
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<el-empty :image-size="120" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { register } from "swiper/element/bundle";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
let { t } = useI18n();
|
||||
register();
|
||||
const props: any = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
tipList: {
|
||||
type: Array,
|
||||
default: [{ name: "", alarmcode: "", alarminfo: "" }],
|
||||
},
|
||||
label: {
|
||||
type: Object,
|
||||
default: { name: "设备名称", alarmcode: "告警代码", alarminfo: "提示" },
|
||||
},
|
||||
per_view: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
});
|
||||
let compare = {
|
||||
进行中: "#83C710",
|
||||
未开始: "#E44610",
|
||||
未进行: "#E54711",
|
||||
故障: "#DA0F10",
|
||||
维修中: "#83C710",
|
||||
};
|
||||
let useSwiper: any = ref(null);
|
||||
let swiperRef = ref(null);
|
||||
let listVal = ref([]);
|
||||
let keynum = ref(0);
|
||||
watch(
|
||||
() => props.tipList,
|
||||
(val) => {
|
||||
keynum.value++;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const onProgress = (e) => {};
|
||||
|
||||
const onSlideChange = (e) => {};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.components-header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #00c7ebfc;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.components-content {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemclass {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 120%;
|
||||
align-items: center;
|
||||
/* border-bottom: #0545a1 1px solid; */
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.col-flex {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper,
|
||||
swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.item-name-key {
|
||||
width: 92px;
|
||||
}
|
||||
.item-name-value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
22
src/views/ChangHaoView/config.js
Normal file
22
src/views/ChangHaoView/config.js
Normal file
@ -0,0 +1,22 @@
|
||||
export const caozuomoshi = {
|
||||
'0': 'MDI',
|
||||
'1':'MEM',
|
||||
'2':'***',
|
||||
'3':'EDIT',
|
||||
'4':'HND',
|
||||
'5':'JOG',
|
||||
'6':'Teach in JOG',
|
||||
'7':'Teaxh in HaNDle ' ,
|
||||
'8':'INC',
|
||||
'9':'REF',
|
||||
'10':'RMF',
|
||||
}
|
||||
|
||||
export const yunxingmoshi ={
|
||||
'0': '****',
|
||||
'1':'STOP ',
|
||||
'2':'***',
|
||||
'3':'HOLD',
|
||||
'4':'START',
|
||||
'5':'MSTR',
|
||||
}
|
||||
330
src/views/ChangHaoView/index.vue
Normal file
330
src/views/ChangHaoView/index.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<!--
|
||||
* @FilePath: index.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-18 17:18:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-20 17:23:36
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header3
|
||||
ref="headerref"
|
||||
:width="'100%'"
|
||||
:height="'100px'"
|
||||
:title="title"
|
||||
:titleTip="[]"
|
||||
:typeFun="['time', 'comback']"
|
||||
:alarmType="[]"
|
||||
></header3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-box">
|
||||
<dv-border-box-1 class="box-left" style="width: 30%"
|
||||
><h2 class="title2">设备运行</h2>
|
||||
<LeftTop :data="ringData" :title="'设备实时状态'"></LeftTop>
|
||||
<LeftBottom :tipList="tipList"></LeftBottom>
|
||||
</dv-border-box-1>
|
||||
|
||||
<dv-border-box-1 class="box-center" style="width: 50%"
|
||||
><h2 class="title2">设备绩效</h2>
|
||||
<CenterTop :data="gaugeData"></CenterTop>
|
||||
<Center :data="lineData"></Center>
|
||||
<CenterBottom :data="prodData" :title="'当日生产情况'"></CenterBottom>
|
||||
</dv-border-box-1>
|
||||
|
||||
<dv-border-box-1 class="box-right" style="width: 30%"
|
||||
><h2 class="title2">设备信息</h2>
|
||||
<Right
|
||||
:deviceList="deviceList"
|
||||
:comList="comList"
|
||||
:CurList="CurList"
|
||||
:communication="communication"
|
||||
:deviceStatus="deviceStatus"
|
||||
></Right>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
watch,
|
||||
onUpdated,
|
||||
computed,
|
||||
} from "vue";
|
||||
import header3 from "./../../components/headerBox/header3.vue";
|
||||
import LeftTop from "./components/LeftTop.vue";
|
||||
import LeftBottom from "./components/LeftBottom.vue";
|
||||
import CenterTop from "./components/CenterTop.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import Center from "./components/Center.vue";
|
||||
import CenterBottom from "./components/CenterBottom.vue";
|
||||
import Right from "./components/Right.vue";
|
||||
import {
|
||||
reqdevicebyid,
|
||||
reqtelectricity,
|
||||
reqproinfo,
|
||||
reqfaultinfo,
|
||||
reqstopinfo,
|
||||
reqtalarm,
|
||||
} from "@/http/changHao";
|
||||
import { caozuomoshi, yunxingmoshi } from "./config.js";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
let route = useRoute();
|
||||
let device_id = route.params.id;
|
||||
// console.log(device_id, "device_id");
|
||||
let timer = null;
|
||||
let devnum = reactive({
|
||||
on: 0,
|
||||
off: 0,
|
||||
wait: 0,
|
||||
});
|
||||
let title = ref("设备云眼");
|
||||
let ringData = ref([
|
||||
{ key: "a046", name: "运行时长", value: "5" },
|
||||
{ key: "a036", name: "故障时长", value: "5" },
|
||||
{ key: "a044", name: "停机时长", value: "5" },
|
||||
{ key: "idletime", name: "空闲时长", value: "5" },
|
||||
{ key: "stoptime", name: "急停时长", value: "5" },
|
||||
]);
|
||||
|
||||
// let deviceList = ref([]);
|
||||
// let comList = ref([]);
|
||||
// let CurList = ref([]);
|
||||
let communication = ref(5);
|
||||
let deviceStatus = ref(0);
|
||||
|
||||
let deviceList = ref([
|
||||
{ key: "devicenum", label: "设备编号", value: " F-20240723456111" },
|
||||
{ key: "serialnumber", label: "设备序列号", value: "iFc023456789154" },
|
||||
{ key: "description", label: "设备描述", value: "1600立车" },
|
||||
{ key: "modelnumber", label: "设备型号", value: "Series" },
|
||||
]);
|
||||
function getData() {
|
||||
setTimeout(() => {
|
||||
prodData.value = [
|
||||
{
|
||||
procedurename: "0",
|
||||
knifenum: "0",
|
||||
pronum: "0",
|
||||
operate: "0",
|
||||
run: "0",
|
||||
machining: "1.0",
|
||||
axisstatus: 0,
|
||||
processingtime: "0",
|
||||
},
|
||||
];
|
||||
}, 0);
|
||||
}
|
||||
const comList = ref([
|
||||
{ key: "a017", label: "主轴伺服温度", unit: "℃", value: "E-2" },
|
||||
{ key: "a082", label: "累计待机时长", unit: "分钟", value: "iF" },
|
||||
{ key: "a021", label: "X轴DC电压", unit: "V", value: "16" },
|
||||
{ key: "a085", label: "累计上电时长", unit: "分钟", value: "Ser" },
|
||||
{ key: "a022", label: "Y轴DC电压", unit: "V", value: "E-2" },
|
||||
{ key: "a006", label: "主轴转速", unit: "R/min", value: "iF" },
|
||||
{ key: "a023", label: "Z轴DC电压", unit: "V", value: "16" },
|
||||
{ key: "a007", label: "进给速度", unit: "mm/min", value: "589" },
|
||||
{ key: "a083", label: "累计故障时长", unit: "秒", value: "789" },
|
||||
{ key: "a084", label: "累计运行时长", unit: "分钟", value: "524" },
|
||||
]);
|
||||
const CurList = ref([
|
||||
{ key: "aphasev", label: "A相电压", unit: "V", value: "6.0" },
|
||||
{ key: "aphasea", label: "A相电流", unit: "A", value: "8" },
|
||||
{ key: "bphasev", label: "B相电压", unit: "V", value: "2" },
|
||||
{ key: "bphasea", label: "B相电流", unit: "A", value: "3" },
|
||||
{ key: "cphasev", label: "C相电压", unit: "V", value: "5" },
|
||||
{ key: "cphasea", label: "C相电流", unit: "A", value: "4" },
|
||||
]);
|
||||
// }
|
||||
|
||||
// 模设备告警数据
|
||||
const tipList = ref([{ name: "设备A", alarmcode: "001", alarminfo: "温度过高" }]);
|
||||
// 仪表盘数据
|
||||
let gaugeData = ref([
|
||||
{ key: "utilizationRate", name: "稼动率", value: "46.9" },
|
||||
{ key: "a006", name: "主轴转速", value: "91.1" },
|
||||
{ key: "a007", name: "进给速度", value: "31.5" },
|
||||
]);
|
||||
|
||||
// 折线图数据日耗电曲线
|
||||
let lineData = ref({
|
||||
y: [120, 135, 101, 134, 90, 230, 210],
|
||||
x: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
|
||||
});
|
||||
// 生产情况数据
|
||||
let prodData = ref([]);
|
||||
let deviceinfo = ref({});
|
||||
|
||||
// 设备信息接口数据
|
||||
function getdevicebyid() {
|
||||
reqdevicebyid({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
title.value = res.data.name;
|
||||
deviceList.value = [
|
||||
{ key: "devicenum", label: "设备编号", value: res.data.devicenum },
|
||||
{ key: "serialnumber", label: "设备序列号", value: res.data.serialnumber },
|
||||
{ key: "description", label: "设备描述", value: res.data.description },
|
||||
{ key: "modelnumber", label: "设备型号", value: res.data.modelnumber },
|
||||
];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//耗电量接口
|
||||
function getelectricity() {
|
||||
reqtelectricity({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
lineData.value.x = res.data.x;
|
||||
lineData.value.y = res.data.y;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 生产情况接口
|
||||
// function getproinfo() {
|
||||
// reqproinfo({ id: device_id }).then((res: any) => {
|
||||
// if (res.code == 0) {
|
||||
// prodData.value = res.data;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// 设备告警接口
|
||||
function getalarm() {
|
||||
reqtalarm({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
tipList.value = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 故障时长接口
|
||||
function getstopinfo() {
|
||||
reqstopinfo({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
ringData.value = ringData.value.map((item) => {
|
||||
if (item.key == "a036") {
|
||||
item.value = res.data.alltime;
|
||||
}
|
||||
if (item.key == "stoptime") {
|
||||
item.value = res.data.allstoptime;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let a036 = 0;
|
||||
//socket
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val);
|
||||
if (data.type == "deviceinfo" && data.msg.id == device_id) {
|
||||
let obj = data.msg;
|
||||
if (obj.a036 != a036) {
|
||||
getalarm();
|
||||
a036 = obj.a036;
|
||||
}
|
||||
// 运行状态
|
||||
ringData.value = ringData.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
// item.key
|
||||
return item;
|
||||
});
|
||||
// 仪表盘
|
||||
gaugeData.value = gaugeData.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
return item;
|
||||
});
|
||||
// 当日生产情况
|
||||
prodData.value = [
|
||||
{
|
||||
procedurename: obj.a039,
|
||||
knifenum: obj.a008,
|
||||
pronum: obj.a005,
|
||||
operate: caozuomoshi[obj.a032] || "未知状态",
|
||||
run: yunxingmoshi[obj.a033] || "未知状态",
|
||||
machining: obj.cycletimeInMinutes,
|
||||
axisstatus: obj.a034,
|
||||
processingtime: obj.a048,
|
||||
},
|
||||
];
|
||||
// 通讯状态
|
||||
communication.value = obj.a041;
|
||||
|
||||
let tempcomList = comList.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
return item;
|
||||
});
|
||||
comList.value = tempcomList;
|
||||
|
||||
// 设备状态
|
||||
deviceStatus.value = obj.a038;
|
||||
// 电压电流
|
||||
}
|
||||
if (data.type == "electinfo" && data.msg.id == device_id) {
|
||||
let obj = data.msg;
|
||||
|
||||
CurList.value = CurList.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
return item;
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
onMounted(() => {
|
||||
getdevicebyid();
|
||||
getelectricity();
|
||||
// getData();
|
||||
// getproinfo();
|
||||
getalarm();
|
||||
getstopinfo();
|
||||
timer = setInterval(() => {
|
||||
getstopinfo();
|
||||
getalarm();
|
||||
}, 1800000);
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #ffffff;
|
||||
background: url("./../../assets/img/CHBJ.png") no-repeat center center / 100% 100%;
|
||||
background-color: #0e0e0e;
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
.border-box {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.title2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<BorderVue :title="t('messages.富怡立式啧墨切割机')">
|
||||
<BorderVue :title="t('messages.富怡立式喷墨切割机')">
|
||||
<div class="box">
|
||||
<img src="./images/pmqgj.png" class="fzmbj-img" alt="">
|
||||
<div class="devcard-container">
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<NewBoder :title="'板房设备'">
|
||||
<NewBoder :title="'版房设备'">
|
||||
<BoardBar :data="banfang.value" :xData="banfang.chart.xData" :seriesData="banfang.chart.series"
|
||||
:rowNum="4"></BoardBar>
|
||||
</NewBoder>
|
||||
|
||||
@ -62,7 +62,7 @@ let objList = reactive({
|
||||
'裁剪设备': [],
|
||||
'一次性拖鞋生产线': [],
|
||||
'缝中设备': [],
|
||||
'板房设备': [],
|
||||
'版房设备': [],
|
||||
'座椅面套生产线': []
|
||||
})
|
||||
onMounted(() => {
|
||||
@ -101,7 +101,7 @@ async function fetchPlanProduction(): Promise<any> {
|
||||
objList.缝中设备.push(item)
|
||||
} else if (obj.banfang.includes(item.label)) {
|
||||
item.unit = '版'
|
||||
objList.板房设备.push(item)
|
||||
objList.版房设备.push(item)
|
||||
} else if (obj.zuoyi.includes(item.label)) {
|
||||
item.unit = '件'
|
||||
objList.座椅面套生产线.push(item)
|
||||
|
||||
@ -32,7 +32,8 @@ const echartsData = reactive<EDataPerson>({
|
||||
const setData = (value: any, type: number) => {
|
||||
//任务完成百分比
|
||||
let percentage = Math.floor((value.accomplish/value.counts)*100)
|
||||
|
||||
let accomplish = value.accomplish
|
||||
let counts = value.counts
|
||||
echartsData.installTable!.div = inTable.value;
|
||||
echartsData.installTable!.title = props.title;
|
||||
echartsData.installTable!.data = {
|
||||
@ -130,7 +131,7 @@ const setData = (value: any, type: number) => {
|
||||
// 中心title设置
|
||||
offsetCenter: ["0%", "0%"],
|
||||
color: "#01F8FF",
|
||||
formatter: "{value}%",
|
||||
formatter: accomplish + "/" + counts,
|
||||
// borderColor: '#01F8FF',
|
||||
// borderRadius: 20,
|
||||
// borderWidth: 1,
|
||||
|
||||
@ -5,9 +5,13 @@
|
||||
<div class="status" :class="statusClass">{{ prop.data.status }}</div>
|
||||
<div class="right-top">
|
||||
<div class="num">{{ prop.data.count }}</div>
|
||||
<div class="name">当日总针数</div>
|
||||
<div class="name">{{t('messages.当日总针数')}}</div>
|
||||
</div>
|
||||
<!-- <div class="chart" ref="chart"></div> -->
|
||||
<div class="online-time">
|
||||
<span style="font-size:20px; color: #fff;">{{t('messages.当日工作时长')}}</span>
|
||||
<span>{{ timestampToTime(prop.data.todayWorkTime) }}</span>
|
||||
</div>
|
||||
<div class="chart" ref="chart"></div>
|
||||
<div class="bottom">
|
||||
<text>{{ prop.data.name }}</text>
|
||||
<small>{{ prop.data.label }}</small>
|
||||
@ -20,6 +24,9 @@
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, ref, onMounted,watch, computed } from 'vue';
|
||||
import {timestampToTime} from '@/utils/time'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const { proxy } = getCurrentInstance()! as any;
|
||||
const chart = ref(null);
|
||||
let myChart: any = null;
|
||||
@ -43,45 +50,17 @@ const prop = defineProps({
|
||||
})
|
||||
|
||||
let statusClass = computed(() => {
|
||||
return prop.data.status == '在线' ? 'online' : 'outline'
|
||||
return prop.data.status == t('default.在线') ? 'online' : 'outline'
|
||||
})
|
||||
|
||||
const init = () => {
|
||||
if (!myChart) {
|
||||
myChart = proxy.$echarts.init(chart.value);
|
||||
}
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
color: ['#95A2FF', '#FA8080'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['35%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
formatter: '{c}小时',
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: prop.data.series
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
watch(() => prop.data, (newVal, oldVal) => {
|
||||
init();
|
||||
let borderBoxColor = computed(() => {
|
||||
return prop.data.status == t('default.在线') ? ['#FF8C00', '#FF8C00'] : ['#999999', '#999999']
|
||||
})
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
//init();
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -104,9 +83,9 @@ onMounted(() => {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
top: 8px;
|
||||
top: 20px;
|
||||
left: 12px;
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
@ -123,21 +102,21 @@ onMounted(() => {
|
||||
|
||||
.right-top .num {
|
||||
color: #1E90FF;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.right-top .name {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 75px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
@ -160,6 +139,15 @@ onMounted(() => {
|
||||
left: 0;
|
||||
bottom: 50px;
|
||||
}
|
||||
.online-time {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.online {
|
||||
color: rgb(255, 140, 0);
|
||||
|
||||
@ -21,60 +21,82 @@ import header2 from "@/components/headerBox/header2.vue";
|
||||
import RingChart from "./components/RingChart.vue";
|
||||
import { ref,onMounted,onUnmounted } from 'vue'
|
||||
import {getSewingBoard} from '@/http/device'
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { getStoredLanguage, saveStoredLanguage } from "@/utils/languageStorage";
|
||||
let { t } = useI18n();
|
||||
|
||||
const storedLocale = getStoredLanguage()
|
||||
document.title = t('messages.微工厂缝纫设备看板');
|
||||
let titleTip = [
|
||||
{
|
||||
color: "#95A2FF",
|
||||
name: t('messages.工作时间'),
|
||||
},
|
||||
{
|
||||
color: "#FA8080",
|
||||
name: t('messages.空闲时间'),
|
||||
},
|
||||
// {
|
||||
// color: "#95A2FF",
|
||||
// name: t('messages.工作时间'),
|
||||
// },
|
||||
// {
|
||||
// color: "#FA8080",
|
||||
// name: t('messages.空闲时间'),
|
||||
// },
|
||||
];
|
||||
let timer = null;
|
||||
let arr = ref([]);
|
||||
|
||||
let arr_num = ref([]);
|
||||
function reqSewingBoard() {
|
||||
getSewingBoard().then((res:any) => {
|
||||
if (res.code == 200) {
|
||||
let nums = []
|
||||
arr.value = res.data.map(item=>{
|
||||
nums.push(item.num)
|
||||
return {
|
||||
id: '',
|
||||
status: item.status == 'true'? '在线':'离线',
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
num: item.num,
|
||||
status: item.status == 'true'? t('default.在线'):t('messages.offline'),
|
||||
name: !storedLocale ||storedLocale == "简体中文"?item.name:item.ename,
|
||||
label: item.label,
|
||||
count: item.pins,
|
||||
series: item.series
|
||||
count: item.in4TodayCount,
|
||||
todayRunTime: item.todayRunTime,
|
||||
todayWorkTime: item.todayWorkTime,
|
||||
}
|
||||
});
|
||||
arr_num.value = nums;
|
||||
}
|
||||
})
|
||||
}
|
||||
// for (let index = 0; index < 21; index++) {
|
||||
// let random = +(Math.random() * 24).toFixed(1);
|
||||
// arr.push({
|
||||
// id: '',
|
||||
// status: '在线',
|
||||
// name: '五线包缝机',
|
||||
// label: 'RP2011158',
|
||||
// count: 0,
|
||||
// series: [
|
||||
// { value: random, name: '工作时间' },
|
||||
// { value: (24-random).toFixed(1), name: '空闲时间' }
|
||||
// ]
|
||||
// })
|
||||
|
||||
// }
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val);
|
||||
|
||||
//
|
||||
if (data.type == "mDeviceStatus"&&arr_num.value.includes(data.msg.num)) {
|
||||
let msg = arr.value.find(item=>item.num == data.msg.num)
|
||||
msg.status = data.msg.status === 0? t('messages.offline'):t('default.在线')
|
||||
|
||||
}
|
||||
if (data.type == "micSwingWorkingTime") {
|
||||
console.log(arr.value,data.msg);
|
||||
|
||||
let msg = arr.value.find(item=>item.id == data.msg.deviceId)
|
||||
msg.todayWorkTime = data.msg.todayWorkTime
|
||||
msg.count = data.msg.in4TodayCount
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.log(err, "报错了大哥", console.log(val)
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
reqSewingBoard()
|
||||
timer = setInterval(() => {
|
||||
reqSewingBoard()
|
||||
}, 60000);
|
||||
}, 60000 * 60);
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
clearInterval(timer);
|
||||
@ -94,13 +116,14 @@ onUnmounted(()=>{
|
||||
--header: 120px;
|
||||
height: calc(1080px - var(--header));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ringchart {
|
||||
width: 260px;
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
margin-left: 23px;
|
||||
}
|
||||
</style>
|
||||
|
||||
95
src/views/Recorder/components/Border.vue
Normal file
95
src/views/Recorder/components/Border.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="newboder">
|
||||
<!-- <img class="borderpng" src="" alt=""> -->
|
||||
<div class="title">
|
||||
<text class="title-text">{{ title }}</text>
|
||||
<div class="hr" v-if="hr_show"></div>
|
||||
</div>
|
||||
|
||||
<div class="newboder-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { computed } from 'vue'
|
||||
let prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '裁剪设备'
|
||||
},
|
||||
hr_show: {
|
||||
type:Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// let newTitle = computed(() => {
|
||||
// return prop.title.split('').join(' ')
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.newboder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: url(./../image/border.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.borderpng {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
padding-left: 10%;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 30px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
|
||||
}
|
||||
.hr {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: url(./../image/hr.png) no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newboder-content {
|
||||
width: 100%;
|
||||
height: 84%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/views/Recorder/image/border.png
Normal file
BIN
src/views/Recorder/image/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/views/Recorder/image/hr.png
Normal file
BIN
src/views/Recorder/image/hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
BIN
src/views/Recorder/image/workpiece.png
Normal file
BIN
src/views/Recorder/image/workpiece.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
@ -2,40 +2,68 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]" :typeFun="['time']"
|
||||
:alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-container">
|
||||
<div class="left-container">
|
||||
<div class="lt-box">
|
||||
<el-image :src="workpiece" :preview-src-list="[workpiece]" style="max-width: 100%;height: 500px;"
|
||||
fit="contain" />
|
||||
零件图片
|
||||
</div>
|
||||
<div class="lb-box">
|
||||
<!-- <el-image :src="drawing" :preview-src-list="[drawing]" style="max-width: 100%;height: 500px;" fit="contain" /> -->
|
||||
<!-- <showPdf pdfUrl="./image/drawing.pdf" /> -->
|
||||
<a style="color: #fff;" href="http://8.130.165.100:9015/profile/upload/2024/06/29/drawing_20240629103947A010.pdf" target="_blank">查看图纸</a>
|
||||
</div>
|
||||
<BorderView :title="'工件图纸'">
|
||||
<div v-show='pdfdata' ref="pdfContainer" style="height: 80%;width: 98%;"></div>
|
||||
<a :href="pdfdata" target="_blank" style="color: #fff;">查看图纸</a>
|
||||
</BorderView>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="right-container">
|
||||
<div class="lt-box">
|
||||
<BorderView :title="'工件图片'">
|
||||
<el-image :src="workpiece" :preview-src-list="[workpiece]" style="max-width: 100%;height: 400px;"
|
||||
fit="contain" />
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="input-text">
|
||||
<div class="" :style="{ width: '150px' }">关键尺寸:</div>
|
||||
<div class="text">
|
||||
<el-input v-model="text" input-style="font-size:20px;color:#fff;box-shadow:'0 0 0 1px #fff'" :rows="5" type="textarea" readonly />
|
||||
<el-input v-model="text" size="large" input-style="font-size:30px;color:#fff;height:60px;" type="text"
|
||||
readonly />
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top:5px;margin-bottom: 10px;"> <!-- 波形绘制区域 -->
|
||||
<!-- 波形绘制区域 -->
|
||||
<!-- <div style="padding-top:5px;margin-bottom: 10px;">
|
||||
<div style="display:inline-block;vertical-align:bottom">
|
||||
<div style="height:300px;width:600px;" ref="recwave"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div> <!-- 按钮 -->
|
||||
</div> -->
|
||||
<div class="item-btn"> <!-- 按钮 -->
|
||||
<!-- <button @click="recOpen">打开录音,请求权限</button> -->
|
||||
<el-button type="success" size="large" class="btn-class" @mousedown="recOpen"
|
||||
@mouseup="recStop">按住录音</el-button>
|
||||
<!-- | <el-button type="primary" size="large" @click="recPlay">本地试听</el-button> -->
|
||||
<div class="audio" :class="{ 'wave-start': is_start }">
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
</div>
|
||||
<el-button size="large" class="btn-class" @touchstart="recOpen" @touchend="recStop" v-if="isMobile">
|
||||
<template #icon>
|
||||
<i class="iconfont icon-yuyin" style="font-size: 80px;"></i>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button size="large" class="btn-class" @mousedown="recOpen" @mouseup="recStop" v-else>
|
||||
<template #icon>
|
||||
<i class="iconfont icon-yuyin" style="font-size: 80px;"></i>
|
||||
</template>
|
||||
</el-button>
|
||||
|
||||
<div class="audio " :class="{ 'wave-start': !!rec }">
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
<div class="wave"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,8 +72,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus';
|
||||
import PDFObject from 'pdfobject'
|
||||
import header2 from "./components/header2.vue";
|
||||
import BorderView from './components/Border.vue'
|
||||
//必须引入的核心
|
||||
import Recorder from 'recorder-core'
|
||||
|
||||
@ -66,10 +97,33 @@ let wave: any = null;
|
||||
let recwave = ref(null);
|
||||
let recBlob: any = null
|
||||
let text = ref('')
|
||||
|
||||
let workpiece = require('./image/workpiece.jpg')
|
||||
let is_start = ref(false)
|
||||
let workpiece = require('./image/workpiece.png')
|
||||
// let drawing = require('./image/drawing.png')
|
||||
|
||||
//pdf相关
|
||||
let pdfdata = ref('')
|
||||
let pdfContainer = ref(null)
|
||||
let pdfOptions = reactive({ //显示的配置信息
|
||||
pdfOpenParams: {
|
||||
toolbar: 0, // 设置为0来隐藏头部工具栏
|
||||
zoom: 80 //大小设置
|
||||
},
|
||||
})
|
||||
|
||||
let isMobile = ref(false)
|
||||
//判断当前环境是PC端还是移动端
|
||||
function heckMobile() {
|
||||
isMobile.value = typeof window.orientation !== "undefined" || // 判断是否存在window.orientation属性，此属性在移动设备上一般存在
|
||||
navigator.userAgent.indexOf('IEMobile') !== -1 || // 判断是否为Windows Phone
|
||||
navigator.userAgent.indexOf('iPhone') !== -1 || // 判断是否为iPhone
|
||||
navigator.userAgent.indexOf('Android') !== -1 && navigator.userAgent.indexOf('Mobile') !== -1 || // 判断是否为Android手机
|
||||
navigator.userAgent.indexOf('BlackBerry') !== -1 || // 判断是否为BlackBerry
|
||||
navigator.userAgent.indexOf('Opera Mini') !== -1 // 判断是否为Opera Mini浏览器
|
||||
console.log(isMobile.value,navigator.userAgent);
|
||||
|
||||
}
|
||||
|
||||
//打开录音，申请录音权限
|
||||
function recOpen() {
|
||||
//创建录音对象
|
||||
@ -87,11 +141,13 @@ function recOpen() {
|
||||
//打开录音，获得权限
|
||||
rec.open(() => {
|
||||
console.log("录音已打开");
|
||||
if (recwave.value) {//创建音频可视化图形绘制对象
|
||||
wave = Recorder.WaveView({ elem: recwave.value });
|
||||
}
|
||||
//创建音频可视化图形绘制对象
|
||||
// if (recwave.value) {
|
||||
// wave = Recorder.WaveView({ elem: recwave.value });
|
||||
// }
|
||||
rec.start();
|
||||
console.log("已开始录音");
|
||||
is_start.value = true
|
||||
}, (msg: any, isUserNotAllow: any) => {
|
||||
//用户拒绝了录音权限，或者浏览器不支持录音
|
||||
alert((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
|
||||
@ -111,6 +167,7 @@ function recStart() {
|
||||
*/
|
||||
function recStop() {
|
||||
if (!rec) { console.error("未打开录音"); return }
|
||||
is_start.value = false
|
||||
rec.stop((blob: any, duration: any) => {
|
||||
//blob就是我们要的录音文件对象，可以上传，或者本地播放
|
||||
recBlob = blob;
|
||||
@ -197,15 +254,43 @@ function recPlay() {
|
||||
setTimeout(function () { URL.revokeObjectURL(audio.src) }, 5000);
|
||||
}
|
||||
|
||||
// function handleWheel(event: any) {
|
||||
// if (event.deltaY < 0) {
|
||||
// console.log('鼠标向上滚动');
|
||||
// } else {
|
||||
// console.log('鼠标向下滚动');
|
||||
// }
|
||||
|
||||
// // 阻止页面滚动
|
||||
// event.preventDefault();
|
||||
// }
|
||||
|
||||
function getData() {
|
||||
pdfdata.value = 'http://8.130.165.100:9015/profile/upload/2024/06/29/drawing_20240629103947A010.pdf'
|
||||
//渲染PDF的方法，固定格式
|
||||
if (PDFObject.supportsPDFs) {//检测浏览器是否支持显示pdf
|
||||
PDFObject.embed(pdfdata.value, pdfContainer.value, pdfOptions);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '该浏览器不支持切换，请更换浏览器',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
heckMobile()
|
||||
getData()
|
||||
// recOpen()
|
||||
document.getElementById('app').style.background = '#fff'
|
||||
//document.getElementById('app').style.background = '#fff'
|
||||
})
|
||||
onUnmounted(() => {
|
||||
document.getElementById('app').style.background = 'block'
|
||||
//document.getElementById('app').style.background = 'block'
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/iconfont/iconfont.css";
|
||||
|
||||
.container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
@ -219,10 +304,12 @@ onUnmounted(() => {
|
||||
background: url('./../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
|
||||
background-color: #0E0E0E;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.body-container {
|
||||
width: 1920px;
|
||||
height: 980px;
|
||||
@ -231,18 +318,19 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.left-container {
|
||||
width: 800px;
|
||||
width: 950px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-container .lt-box {
|
||||
.right-container .lt-box {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
height: 400px;
|
||||
/* border: 1px solid #ccc; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -262,32 +350,117 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.right-container {
|
||||
width: 800px;
|
||||
width: 950px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-class {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
border-radius: 20px;
|
||||
/* font-weight: 700; */
|
||||
border-radius: 50%;
|
||||
border: 2px solid skyblue;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
width: 600px;
|
||||
width: 950px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-btn .wave-start {
|
||||
.wave {
|
||||
animation: audio-wave 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn .audio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
|
||||
.wave {
|
||||
height: 40px;
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
border-radius: 8px;
|
||||
background: orange;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes audio-wave {
|
||||
0% {
|
||||
height: 6px;
|
||||
transform: translateY(0px);
|
||||
background: #ff8e3a;
|
||||
}
|
||||
|
||||
25% {
|
||||
height: 6px;
|
||||
transform: translateY(0px);
|
||||
background: #9c73f8;
|
||||
}
|
||||
|
||||
50% {
|
||||
height: 30px;
|
||||
transform: translateY(-5px) scaleY(1.5);
|
||||
background: #ed509e;
|
||||
}
|
||||
|
||||
75% {
|
||||
height: 6px;
|
||||
transform: translateY(0px);
|
||||
background: #9c73f8;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 6px;
|
||||
transform: translateY(0px);
|
||||
background: #0fccce;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -18,15 +18,15 @@
|
||||
<div>{{ data.countdown }}</div>
|
||||
|
||||
</div>
|
||||
<!-- <img :style="{width:itemSize.imgwidth}" :src="data.src" alt=""> -->
|
||||
<el-image :style="{ width: itemSize.imgwidth, height: '60%' }" :src="data.src ? imgurlAddXhr(data.src) : ''"
|
||||
<img :style="{width:itemSize.imgwidth}" :src="data.src" alt="">
|
||||
<!-- <el-image :style="{ width: itemSize.imgwidth, height: '60%' }" :src="data.src ? imgurlAddXhr(data.src) : ''"
|
||||
fit="contain">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon><icon-picture /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</el-image> -->
|
||||
<!-- <img :style="{width:itemSize.imgwidth,height:itemSize.imgheight}" src="../../../../assets/img/download.jpg" alt=""> -->
|
||||
<!-- <ul class="uldianji">
|
||||
<li>
|
||||
|
||||
@ -89,7 +89,7 @@ function getNextMonth(date) {
|
||||
let t2 = year2 + '年' + month2 + '月' + day2 + '日';
|
||||
return t2;
|
||||
}
|
||||
|
||||
let imgage = require("@/assets/img/3c92b5010e6845229311385a05f864aa.jpg");
|
||||
async function getDeviceDetailfun() {
|
||||
setTimeout(() => {
|
||||
let result = {
|
||||
@ -146,7 +146,7 @@ async function getDeviceDetailfun() {
|
||||
],
|
||||
"imgTip": {
|
||||
"realityTime": "",
|
||||
"src": "3c92b5010e6845229311385a05f864aa.png",
|
||||
"src": imgage,
|
||||
"deliveryDate": "",
|
||||
"prtDeliveryDate": "2023年11月01日",
|
||||
"status": "调试中"
|
||||
|
||||
@ -30,10 +30,17 @@
|
||||
</div>
|
||||
|
||||
<div class="itemlist">
|
||||
<list v-for="res in routerList" :hash="res.hash" :path="res.path" :is-link="res.isLink" :title="res.title"
|
||||
<div class="category" v-for="(value, key) in categoryList">
|
||||
<h2 class="category-title">{{ key }}</h2>
|
||||
<div class="category-item">
|
||||
<list v-for="res in value" :hash="res.hash" :path="res.path" :is-link="res.isLink" :title="res.title"
|
||||
:key="res.id" :url="res.url"></list>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <list v-for="res in routerList" :hash="res.hash" :path="res.path" :is-link="res.isLink" :title="res.title"
|
||||
:key="res.id" :url="res.url"></list> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -41,7 +48,7 @@ import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||
import list from "@/components/assembly/indexList.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { getStoredLanguage, saveStoredLanguage, languageHash } from "@/utils/languageStorage";
|
||||
import { useRoute,useRouter } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { getScreenByHash } from "@/http/rule/index"
|
||||
import { imgurlAddXhr } from "@/utils/devSever"
|
||||
let langicon = require("@/assets/svg/language.svg")
|
||||
@ -72,8 +79,16 @@ function changelang(val) {
|
||||
saveStoredLanguage(languageHash(val))
|
||||
location.reload()
|
||||
}
|
||||
|
||||
|
||||
function convertChineseToArabic(str) {
|
||||
const nums = {
|
||||
零: 0, 一: 1, 二: 2, 两: 2, 三: 3, 四: 4, 五: 5, 六: 6, 七: 7, 八: 8, 九: 9
|
||||
};
|
||||
let result = str.replace(/[零一二两三四五六七八九]/g, (match) => {
|
||||
return nums[match];
|
||||
});
|
||||
return parseInt(result, 10);
|
||||
}
|
||||
const categoryList: any = ref({})
|
||||
async function reqScreenByHash() {
|
||||
let hash = sessionStorage.getItem('screen_hash')
|
||||
let res: any = await getScreenByHash({ hash });
|
||||
@ -88,10 +103,28 @@ async function reqScreenByHash() {
|
||||
path: item.path,
|
||||
title: item.title,
|
||||
url: isTrue ? item.img : imgurlAddXhr(item.img),
|
||||
hash: hash
|
||||
hash: hash,
|
||||
screenType: item.screenType
|
||||
}
|
||||
})
|
||||
|
||||
routerList.value.forEach(element => {
|
||||
if (element.screenType !== null) {
|
||||
if (categoryList.value.hasOwnProperty(element.screenType)) {
|
||||
categoryList.value[element.screenType].push(element)
|
||||
} else {
|
||||
categoryList.value[element.screenType] = [element]
|
||||
}
|
||||
} else {
|
||||
if (categoryList.value.hasOwnProperty('其他')) {
|
||||
categoryList.value['其他'].push(element)
|
||||
} else {
|
||||
categoryList.value['其他'] = [element]
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(categoryList.value);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -123,11 +156,28 @@ onUnmounted(() => { });
|
||||
width: 1920px;
|
||||
color: #20aec5;
|
||||
background-color: #100c2a;
|
||||
overflow: scroll !important;
|
||||
}
|
||||
|
||||
.category {
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
padding-left: 40px;
|
||||
font-size: 32px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: whitesmoke;
|
||||
|
||||
}
|
||||
.category-item {
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto !important;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@ -73,7 +73,7 @@ let { t } = useI18n();
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
let severdata = reactive([])
|
||||
let percentage = ref(0)
|
||||
let percentage = ref({})
|
||||
//军团id
|
||||
const deptId: any = route.params.deptId
|
||||
const title = route.query.title
|
||||
@ -87,7 +87,7 @@ let legion: any = {
|
||||
'15': '医防军团'
|
||||
}
|
||||
let scrollBoardConfig = reactive({
|
||||
header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
|
||||
header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.DebugProgress'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
|
||||
headerBGC: 'rgb(52, 105, 243)',
|
||||
oddRowBGC: '#100c2a',
|
||||
evenRowBGC: '#100c2a',
|
||||
@ -103,7 +103,7 @@ const getList = (deptId) => {
|
||||
let ringObj = {}
|
||||
res.data.forEach((item: any, index: number) => {
|
||||
let status = JSON.parse(item.deviceStatus) == true ? '在线' : '离线'
|
||||
let temp = [index + 1, item.name, item.model, item.label, item.typeName, item.status, status, item.assemblyGroup, item.electricGroup, item.inspector, item.deliveryDate]
|
||||
let temp = [index + 1, item.name, item.model, item.label, item.progress + "%", item.status, status, item.assemblyGroup, item.electricGroup, item.inspector, item.deliveryDate]
|
||||
scrollBoardConfig.data.push(temp)
|
||||
item.index = index + 1
|
||||
severdata.push(item)
|
||||
@ -131,7 +131,12 @@ const getprogressOfCorpsfun = () => {
|
||||
|
||||
res.data.forEach((item: any) => {
|
||||
if (item.deptId == deptId) {
|
||||
percentage.value = Math.floor((item.accomplish / item.counts) * 100)
|
||||
percentage.value = {
|
||||
accomplish: item.accomplish,
|
||||
counts: item.counts
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* @FilePath: \daping\vue.config.js
|
||||
* @FilePath: \screenFront\vue.config.js
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-01-29 15:16:36
|
||||
@ -11,12 +11,19 @@ const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig(
|
||||
{
|
||||
transpileDependencies: true,
|
||||
css: {
|
||||
loaderOptions: {
|
||||
sass: {
|
||||
// 这里的选项会传递给 sass-loader
|
||||
},
|
||||
},
|
||||
},
|
||||
devServer: {
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: 'http://192.168.2.125:2222', // 想要请求的url地址
|
||||
target: 'http://8.130.165.100:9015',
|
||||
// target: 'http://192.168.110.238:9015',
|
||||
target: 'http://192.168.10.98:9015', // 想要请求的url地址
|
||||
// target: 'http://8.130.165.100:9015',
|
||||
// target: 'http://192.168.110.19:8080',
|
||||
ws: true, // 是否要开启代理
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
@ -33,9 +40,18 @@ module.exports = defineConfig(
|
||||
// localAddress:"xxx", // 要为传出连接绑定的本地接口字符串
|
||||
// agent:{}, // 传递给http(s).request的对象
|
||||
// ssl:{}, // 传递给https.createServer()的对象
|
||||
},
|
||||
'/socket/': {
|
||||
// target: 'http://192.168.1.128:9011', // 想要请求的url地址
|
||||
target: 'http://8.130.165.100:9019',
|
||||
// target: 'http://192.168.110.19:8080',
|
||||
ws: true, // 是否要开启代理
|
||||
changeOrigin: true,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user