Compare commits
10 Commits
fa85515d9b
...
3e4e455dbe
| Author | SHA1 | Date | |
|---|---|---|---|
|
3e4e455dbe | ||
|
|
62a7971f7a | ||
|
|
056c1c95bf | ||
|
|
7551409394 | ||
|
|
9081420148 | ||
|
|
220bf593aa | ||
|
|
bcb0c77111 | ||
|
|
ccf101167a | ||
|
|
207913a253 | ||
|
|
f0b6d900ac |
24
README.md
24
README.md
@@ -624,6 +624,30 @@ public async updateRule(token: string | null = null, rules: RuleData[]): Promise
|
||||
|
||||
|
||||
|
||||
### 2024.11.26
|
||||
|
||||
- 对话框大图显示
|
||||
- 删除告警按钮
|
||||
- 主页定时刷新
|
||||
- 布局滚动查看调整
|
||||
- 用户删除限制
|
||||
|
||||
|
||||
|
||||
### 2024.12.3
|
||||
|
||||
- 告警设置
|
||||
- 消息队列设置
|
||||
- 声音设置
|
||||
- 弹窗动画添加
|
||||
- 弹窗队列添加，错误重试机制（2s*5次）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
240
package-lock.json
generated
240
package-lock.json
generated
@@ -21,6 +21,7 @@
|
||||
"lodash": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"papaparse": "^5.4.1",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
@@ -63,27 +64,27 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-string-parser": {
|
||||
"version": "7.24.8",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
|
||||
"integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
|
||||
"version": "7.25.9",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
|
||||
"integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
|
||||
"integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
|
||||
"version": "7.25.9",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
|
||||
"integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.25.3",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.25.3.tgz",
|
||||
"integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
|
||||
"version": "7.26.2",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.26.2.tgz",
|
||||
"integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.25.2"
|
||||
"@babel/types": "^7.26.0"
|
||||
},
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
@@ -104,13 +105,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.25.2",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.25.2.tgz",
|
||||
"integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
|
||||
"version": "7.26.0",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.26.0.tgz",
|
||||
"integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.24.8",
|
||||
"@babel/helper-validator-identifier": "^7.24.7",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
"@babel/helper-string-parser": "^7.25.9",
|
||||
"@babel/helper-validator-identifier": "^7.25.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@@ -963,49 +963,49 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-core": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.4.37.tgz",
|
||||
"integrity": "sha512-ZDDT/KiLKuCRXyzWecNzC5vTcubGz4LECAtfGPENpo0nrmqJHwuWtRLxk/Sb9RAKtR9iFflFycbkjkY+W/PZUQ==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
|
||||
"integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.24.7",
|
||||
"@vue/shared": "3.4.37",
|
||||
"entities": "^5.0.0",
|
||||
"@babel/parser": "^7.25.3",
|
||||
"@vue/shared": "3.5.13",
|
||||
"entities": "^4.5.0",
|
||||
"estree-walker": "^2.0.2",
|
||||
"source-map-js": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-dom": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.4.37.tgz",
|
||||
"integrity": "sha512-rIiSmL3YrntvgYV84rekAtU/xfogMUJIclUMeIKEtVBFngOL3IeZHhsH3UaFEgB5iFGpj6IW+8YuM/2Up+vVag==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
|
||||
"integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-core": "3.4.37",
|
||||
"@vue/shared": "3.4.37"
|
||||
"@vue/compiler-core": "3.5.13",
|
||||
"@vue/shared": "3.5.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.4.37.tgz",
|
||||
"integrity": "sha512-vCfetdas40Wk9aK/WWf8XcVESffsbNkBQwS5t13Y/PcfqKfIwJX2gF+82th6dOpnpbptNMlMjAny80li7TaCIg==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
|
||||
"integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.24.7",
|
||||
"@vue/compiler-core": "3.4.37",
|
||||
"@vue/compiler-dom": "3.4.37",
|
||||
"@vue/compiler-ssr": "3.4.37",
|
||||
"@vue/shared": "3.4.37",
|
||||
"@babel/parser": "^7.25.3",
|
||||
"@vue/compiler-core": "3.5.13",
|
||||
"@vue/compiler-dom": "3.5.13",
|
||||
"@vue/compiler-ssr": "3.5.13",
|
||||
"@vue/shared": "3.5.13",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.30.10",
|
||||
"postcss": "^8.4.40",
|
||||
"magic-string": "^0.30.11",
|
||||
"postcss": "^8.4.48",
|
||||
"source-map-js": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-ssr": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.4.37.tgz",
|
||||
"integrity": "sha512-TyAgYBWrHlFrt4qpdACh8e9Ms6C/AZQ6A6xLJaWrCL8GCX5DxMzxyeFAEMfU/VFr4tylHm+a2NpfJpcd7+20XA==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
|
||||
"integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.4.37",
|
||||
"@vue/shared": "3.4.37"
|
||||
"@vue/compiler-dom": "3.5.13",
|
||||
"@vue/shared": "3.5.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-vue2": {
|
||||
@@ -1048,49 +1048,49 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.4.37.tgz",
|
||||
"integrity": "sha512-UmdKXGx0BZ5kkxPqQr3PK3tElz6adTey4307NzZ3whZu19i5VavYal7u2FfOmAzlcDVgE8+X0HZ2LxLb/jgbYw==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.13.tgz",
|
||||
"integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
|
||||
"dependencies": {
|
||||
"@vue/shared": "3.4.37"
|
||||
"@vue/shared": "3.5.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/runtime-core": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.4.37.tgz",
|
||||
"integrity": "sha512-MNjrVoLV/sirHZoD7QAilU1Ifs7m/KJv4/84QVbE6nyAZGQNVOa1HGxaOzp9YqCG+GpLt1hNDC4RbH+KtanV7w==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
|
||||
"integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.4.37",
|
||||
"@vue/shared": "3.4.37"
|
||||
"@vue/reactivity": "3.5.13",
|
||||
"@vue/shared": "3.5.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/runtime-dom": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.4.37.tgz",
|
||||
"integrity": "sha512-Mg2EwgGZqtwKrqdL/FKMF2NEaOHuH+Ks9TQn3DHKyX//hQTYOun+7Tqp1eo0P4Ds+SjltZshOSRq6VsU0baaNg==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
|
||||
"integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.4.37",
|
||||
"@vue/runtime-core": "3.4.37",
|
||||
"@vue/shared": "3.4.37",
|
||||
"@vue/reactivity": "3.5.13",
|
||||
"@vue/runtime-core": "3.5.13",
|
||||
"@vue/shared": "3.5.13",
|
||||
"csstype": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/server-renderer": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.4.37.tgz",
|
||||
"integrity": "sha512-jZ5FAHDR2KBq2FsRUJW6GKDOAG9lUTX8aBEGq4Vf6B/35I9fPce66BornuwmqmKgfiSlecwuOb6oeoamYMohkg==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
|
||||
"integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-ssr": "3.4.37",
|
||||
"@vue/shared": "3.4.37"
|
||||
"@vue/compiler-ssr": "3.5.13",
|
||||
"@vue/shared": "3.5.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "3.4.37"
|
||||
"vue": "3.5.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/shared": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.37.tgz",
|
||||
"integrity": "sha512-nIh8P2fc3DflG8+5Uw8PT/1i17ccFn0xxN/5oE9RfV5SVnd7G0XEFRwakrnNFE/jlS95fpGXDVG5zDETS26nmg=="
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.13.tgz",
|
||||
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
|
||||
},
|
||||
"node_modules/@vue/tsconfig": {
|
||||
"version": "0.5.1",
|
||||
@@ -1407,9 +1407,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/entities/-/entities-5.0.0.tgz",
|
||||
"integrity": "sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==",
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
|
||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
@@ -1725,9 +1725,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.11",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.11.tgz",
|
||||
"integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
|
||||
"version": "0.30.13",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.13.tgz",
|
||||
"integrity": "sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==",
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0"
|
||||
}
|
||||
@@ -1936,9 +1936,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz",
|
||||
"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
|
||||
},
|
||||
"node_modules/pidtree": {
|
||||
"version": "0.6.0",
|
||||
@@ -1962,10 +1962,60 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.2.6.tgz",
|
||||
"integrity": "sha512-vIsR8JkDN5Ga2vAxqOE2cJj4VtsHnzpR1Fz30kClxlh0yCHfec6uoMeM3e/ddqmwFUejK3NlrcQa/shnpyT4hA==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.3",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.5.11"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.41",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.41.tgz",
|
||||
"integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
|
||||
"version": "8.4.49",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.49.tgz",
|
||||
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
@@ -1982,8 +2032,8 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.0.1",
|
||||
"source-map-js": "^1.2.0"
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
@@ -2139,9 +2189,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -2159,14 +2209,6 @@
|
||||
"node": ">=12.22"
|
||||
}
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
@@ -2257,15 +2299,15 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "3.4.37",
|
||||
"resolved": "https://registry.npmmirror.com/vue/-/vue-3.4.37.tgz",
|
||||
"integrity": "sha512-3vXvNfkKTBsSJ7JP+LyR7GBuwQuckbWvuwAid3xbqK9ppsKt/DUvfqgZ48fgOLEfpy1IacL5f8QhUVl77RaI7A==",
|
||||
"version": "3.5.13",
|
||||
"resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.13.tgz",
|
||||
"integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.4.37",
|
||||
"@vue/compiler-sfc": "3.4.37",
|
||||
"@vue/runtime-dom": "3.4.37",
|
||||
"@vue/server-renderer": "3.4.37",
|
||||
"@vue/shared": "3.4.37"
|
||||
"@vue/compiler-dom": "3.5.13",
|
||||
"@vue/compiler-sfc": "3.5.13",
|
||||
"@vue/runtime-dom": "3.5.13",
|
||||
"@vue/server-renderer": "3.5.13",
|
||||
"@vue/shared": "3.5.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "*"
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"lodash": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"papaparse": "^5.4.1",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
|
||||
114
src/App.vue
114
src/App.vue
@@ -1,119 +1,14 @@
|
||||
<template>
|
||||
<div id="app" class="app-container">
|
||||
<router-view></router-view>
|
||||
<el-dialog title="告警提示" v-model="globalDialogVisible" width="50%" @close="handleDialogClose">
|
||||
<el-row style="margin-bottom: 2vh;">
|
||||
<el-col :span="17" style="text-align: center;">
|
||||
<img :src="globalDialogContent.snapshotUrl" alt="告警图片" v-if="globalDialogContent.snapshotUrl"
|
||||
style="max-width: 100%;" />
|
||||
<!-- 可选的视频展示 -->
|
||||
<!-- <video v-if="globalDialogContent.videoUrl" :src="globalDialogContent.videoUrl" controls style="max-width: 100%;"></video> -->
|
||||
</el-col>
|
||||
<el-col :span="7" >
|
||||
<el-row class="dialog-event-col">
|
||||
<el-col :span="24"><strong >告警编号</strong>：{{ globalDialogContent.id }}</el-col>
|
||||
<el-col :span="24"><strong >告警点位</strong>：{{ globalDialogContent.camera?.name }}</el-col>
|
||||
<el-col :span="24"><strong >告警类型</strong>：{{ globalDialogContent.types }}</el-col>
|
||||
<el-col :span="24"><strong >告警时间</strong>：{{ globalDialogContent.started_at }}</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
<GlobalDialog />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import eventBus from '@/utils/eventBus';
|
||||
import { BoxApi } from '@/utils/boxApi';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface GlobalDialogContent {
|
||||
id: number | null;
|
||||
camera_id: number | null;
|
||||
camera: { name: string };
|
||||
types: string | null;
|
||||
started_at: string | null; // 支持 null 或字符串类型
|
||||
snapshotUrl: string;
|
||||
videoUrl: string;
|
||||
}
|
||||
import GlobalDialog from '@/components/GlobalDialog.vue';
|
||||
|
||||
|
||||
const apiInstance = new BoxApi();
|
||||
|
||||
const globalDialogVisible = ref(false); // 控制全局对话框的可见性
|
||||
const globalDialogContent = ref<GlobalDialogContent>({
|
||||
id: null,
|
||||
camera_id: null,
|
||||
camera: { name: '' },
|
||||
types: null,
|
||||
started_at: null,
|
||||
snapshotUrl: '',
|
||||
videoUrl: ''
|
||||
});
|
||||
const algorithmMap = ref(new Map()); // 算法类型映射表
|
||||
|
||||
// 加载算法映射表
|
||||
const loadAlgorithms = async () => {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
if (token) {
|
||||
const algorithms = await apiInstance.getAlgorithms(token);
|
||||
algorithmMap.value = new Map(
|
||||
algorithms.map((algo: { code_name: string; name: string }) => [algo.code_name, algo.name])
|
||||
);
|
||||
} else {
|
||||
console.error('Token 未找到，请登录');
|
||||
}
|
||||
};
|
||||
|
||||
// 显示告警详情对话框
|
||||
const showDialog = async (data: any) => {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
if (!token) {
|
||||
console.error('Token 未找到，请登录');
|
||||
return;
|
||||
}
|
||||
console.log('showDialog>>>>>>>>>>>>>', data);
|
||||
// 获取告警事件的详细信息
|
||||
const eventDetails = await apiInstance.getEventById(data.id, token);
|
||||
const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
|
||||
const video = eventDetails.mediums.find((item: any) => item.name === 'video');
|
||||
|
||||
// 更新对话框内容
|
||||
globalDialogContent.value = {
|
||||
id: eventDetails.id,
|
||||
camera_id: eventDetails.camera_id,
|
||||
camera: eventDetails.camera,
|
||||
types: algorithmMap.value.get(eventDetails.types),
|
||||
started_at: formatDateTime(eventDetails.started_at) ,
|
||||
snapshotUrl: snapshot?.file || '',
|
||||
videoUrl: video?.file || ''
|
||||
};
|
||||
|
||||
globalDialogVisible.value = true; // 显示对话框
|
||||
};
|
||||
|
||||
const formatDateTime = (isoString: string): string => dayjs(isoString).format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
// 关闭对话框并重置内容
|
||||
const handleDialogClose = () => {
|
||||
globalDialogVisible.value = false;
|
||||
globalDialogContent.value = {
|
||||
id: null,
|
||||
camera_id: null,
|
||||
camera: { name: '' },
|
||||
types: null,
|
||||
started_at: null,
|
||||
snapshotUrl: '',
|
||||
videoUrl: ''
|
||||
};
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
loadAlgorithms(); // 加载算法数据
|
||||
eventBus.on('showDialog', showDialog); // 监听事件总线的 showDialog 事件
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -123,9 +18,4 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dialog-event-col{
|
||||
font-size: 14px;
|
||||
gap: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
body{
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
@@ -152,6 +152,21 @@ const filterCameras = () => {
|
||||
// console.log("filteredCameras>>:", filteredCameras.value);
|
||||
};
|
||||
|
||||
|
||||
// 名称+ID查询
|
||||
// const filterCameras = () => {
|
||||
// const keyword = searchKeyword.value.trim().toLowerCase();
|
||||
// if (!keyword) {
|
||||
// filteredCameras.value = [...cameras.value];
|
||||
// } else {
|
||||
// filteredCameras.value = cameras.value.filter(camera => {
|
||||
// const idMatch = camera.id.toString().toLowerCase().includes(keyword);
|
||||
// const nameMatch = camera.name.toLowerCase().includes(keyword);
|
||||
// return idMatch || nameMatch;
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
|
||||
const selectCameraById = (cameraId) => {
|
||||
const camera = cameras.value.find(c => c.id === cameraId);
|
||||
if (camera && !selectedCameras.value.some(c => c.id === camera.id)) {
|
||||
@@ -175,7 +190,7 @@ const handleSettings = async (cameraId) => {
|
||||
};
|
||||
|
||||
const handleSaveResult = ({ success, message }) => {
|
||||
console.log('收到子组件保存结果事件:', { success, message });
|
||||
// console.log('收到子组件保存结果事件:', { success, message });
|
||||
|
||||
ElMessage({
|
||||
message,
|
||||
@@ -517,16 +532,17 @@ onBeforeUnmount(() => {
|
||||
width: 68vw;
|
||||
height: 55vh;
|
||||
max-height: 58vh;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
/* overflow-y: scroll; */
|
||||
overflow-y: auto;
|
||||
scrollbar-width:thin;
|
||||
/* background-color: #ffffff; */
|
||||
background-color: #F1F1F1;
|
||||
/* background-color: #c71515; */
|
||||
}
|
||||
|
||||
.camera-grid::-webkit-scrollbar {
|
||||
/* .camera-grid::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.grid-item {
|
||||
margin: 1vh;
|
||||
|
||||
220
src/components/GlobalDialog.vue
Normal file
220
src/components/GlobalDialog.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<el-dialog title="告警提示" v-model="globalDialogVisible" width="50%" @close="handleDialogClose">
|
||||
<el-row style="margin-bottom: 2vh;">
|
||||
<el-col :span="17" style="text-align: center;">
|
||||
<img :src="globalDialogContent.snapshotUrl" alt="告警图片" v-if="globalDialogContent.snapshotUrl"
|
||||
style="max-width: 100%;" />
|
||||
<!-- 可选的视频展示 -->
|
||||
<!-- <video v-if="globalDialogContent.videoUrl" :src="globalDialogContent.videoUrl" controls style="max-width: 100%;"></video> -->
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-row class="dialog-event-col">
|
||||
<el-col :span="24"><strong>告警编号</strong>：{{ globalDialogContent.id }}</el-col>
|
||||
<el-col :span="24"><strong>告警点位</strong>：{{ globalDialogContent.camera?.name }}</el-col>
|
||||
<el-col :span="24"><strong>告警类型</strong>：{{ globalDialogContent.types }}</el-col>
|
||||
<el-col :span="24"><strong>告警时间</strong>：{{ globalDialogContent.started_at }}</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted,watch } from 'vue';
|
||||
import eventBus from '@/utils/eventBus';
|
||||
import { BoxApi } from '@/utils/boxApi';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface GlobalDialogContent {
|
||||
id: number | null;
|
||||
camera_id: number | null;
|
||||
camera: { name: string };
|
||||
types: string | null;
|
||||
started_at: string | null; // 支持 null 或字符串类型
|
||||
snapshotUrl: string;
|
||||
videoUrl: string;
|
||||
}
|
||||
|
||||
const apiInstance = new BoxApi();
|
||||
|
||||
const globalDialogVisible = ref(false); // 控制全局对话框的可见性
|
||||
const globalDialogContent = ref<GlobalDialogContent>({
|
||||
id: null,
|
||||
camera_id: null,
|
||||
camera: { name: '' },
|
||||
types: null,
|
||||
started_at: null,
|
||||
snapshotUrl: '',
|
||||
videoUrl: ''
|
||||
});
|
||||
const algorithmMap = ref(new Map()); // 算法类型映射表
|
||||
|
||||
|
||||
const requestQueue: any[] = []; // 消息队列
|
||||
let isProcessing = false; // 标志是否正在处理队列
|
||||
|
||||
// 加载算法映射表
|
||||
const loadAlgorithms = async () => {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
if (token) {
|
||||
const algorithms = await apiInstance.getAlgorithms(token);
|
||||
algorithmMap.value = new Map(
|
||||
algorithms.map((algo: { code_name: string; name: string }) => [algo.code_name, algo.name])
|
||||
);
|
||||
} else {
|
||||
console.error('Token 未找到，请登录');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchWithRetry = async (fetchFn: () => Promise<any>, retries = 5, delay = 2000): Promise<any> => {
|
||||
for (let i = 0; i < retries; i++) {
|
||||
try {
|
||||
return await fetchFn();
|
||||
} catch (error) {
|
||||
console.error(`Retry ${i + 1} failed:`, error);
|
||||
if (i < retries - 1) await new Promise((resolve) => setTimeout(resolve, delay));
|
||||
}
|
||||
}
|
||||
throw new Error('All retries failed');
|
||||
};
|
||||
|
||||
|
||||
// const showDialog = async (data: any) => {
|
||||
// const token = localStorage.getItem('alertToken');
|
||||
// if (!token) {
|
||||
// console.error('Token 未找到，请登录');
|
||||
// return;
|
||||
// }
|
||||
// console.log('弹窗接收>>>>>>>>>>>>>', data);
|
||||
|
||||
// const eventDetails = await apiInstance.getEventById(data.id, token);
|
||||
// console.log('showDialog>>>>>>>>>>>>>', eventDetails);
|
||||
// const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
|
||||
// const video = eventDetails.mediums.find((item: any) => item.name === 'video');
|
||||
|
||||
// globalDialogContent.value = {
|
||||
// id: eventDetails.id,
|
||||
// camera_id: eventDetails.camera_id,
|
||||
// camera: eventDetails.camera,
|
||||
// types: algorithmMap.value.get(eventDetails.types),
|
||||
// started_at: formatDateTime(eventDetails.started_at),
|
||||
// snapshotUrl: snapshot?.file || '',
|
||||
// videoUrl: video?.file || ''
|
||||
// };
|
||||
// globalDialogVisible.value = true;
|
||||
// };
|
||||
|
||||
const processQueue = async () => {
|
||||
if (isProcessing || requestQueue.length === 0) return; // 正在处理或队列为空时不执行
|
||||
isProcessing = true; // 标记正在处理
|
||||
const data = requestQueue.shift(); // 从队列中取出数据
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
if (!token) throw new Error('Token 未找到，请登录');
|
||||
|
||||
// 使用延时重试获取数据
|
||||
const eventDetails = await fetchWithRetry(() => apiInstance.getEventById(data.id, token));
|
||||
// console.log('processQueue>>>>>>>>>>>>>', eventDetails);
|
||||
if (!eventDetails || !eventDetails.mediums) {
|
||||
console.error('Event details or mediums not found:', eventDetails);
|
||||
return;
|
||||
}
|
||||
|
||||
const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
|
||||
const video = eventDetails.mediums.find((item: any) => item.name === 'video');
|
||||
|
||||
globalDialogContent.value = {
|
||||
id: eventDetails.id,
|
||||
camera_id: eventDetails.camera_id,
|
||||
camera: eventDetails.camera,
|
||||
types: algorithmMap.value.get(eventDetails.types) || '未知类型',
|
||||
started_at: formatDateTime(eventDetails.started_at),
|
||||
snapshotUrl: snapshot?.file || '',
|
||||
videoUrl: video?.file || ''
|
||||
};
|
||||
|
||||
globalDialogVisible.value = true; // 显示对话框
|
||||
} catch (error) {
|
||||
console.error('Error processing data in queue:', error);
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
processQueue(); // 处理队列中的下一个请求
|
||||
}
|
||||
};
|
||||
|
||||
const enqueueRequest = (data: any) => {
|
||||
requestQueue.push(data);
|
||||
processQueue();
|
||||
};
|
||||
|
||||
const formatDateTime = (isoString: string): string => dayjs(isoString).format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
// 关闭对话框并重置内容
|
||||
const handleDialogClose = () => {
|
||||
globalDialogVisible.value = false;
|
||||
globalDialogContent.value = {
|
||||
id: null,
|
||||
camera_id: null,
|
||||
camera: { name: '' },
|
||||
types: null,
|
||||
started_at: null,
|
||||
snapshotUrl: '',
|
||||
videoUrl: ''
|
||||
};
|
||||
};
|
||||
|
||||
watch(globalDialogContent, (newValue, oldValue) => {
|
||||
|
||||
if (newValue !== oldValue) {
|
||||
|
||||
const dialogElement = document.querySelector('.dialog-event-col');
|
||||
if (dialogElement) {
|
||||
dialogElement.classList.add('border-blink');
|
||||
|
||||
setTimeout(() => {
|
||||
dialogElement.classList.remove('border-blink');
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await loadAlgorithms();
|
||||
// eventBus.on('showDialog', showDialog);
|
||||
eventBus.on('showDialog', enqueueRequest);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// eventBus.off('showDialog', showDialog);
|
||||
eventBus.off('showDialog', enqueueRequest);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-event-col {
|
||||
font-size: 14px;
|
||||
gap: 30px;
|
||||
padding: 20px;
|
||||
/* transition: border 0.3s ease-in-out; */
|
||||
}
|
||||
|
||||
.border-blink {
|
||||
animation: borderBlink 1s infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes borderBlink {
|
||||
0% {
|
||||
border: 2px solid red;
|
||||
}
|
||||
50% {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 2px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="alert-container">
|
||||
<!-- <el-card class="alert-card">
|
||||
<div class="alert-container">
|
||||
<!-- <el-card class="alert-card">
|
||||
<div class="alert-header">告警趋势</div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" class="alert-tabs">
|
||||
<el-tab-pane label="今日" name="first">
|
||||
@@ -14,247 +14,274 @@
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card> -->
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" class="alert-tabs">
|
||||
<el-tab-pane label="今日" name="first">
|
||||
<div ref="todayLineChartDom" class="chart-container"></div> <!-- 今日图表 -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="本周" name="second">
|
||||
<div ref="weekLineChartDom" class="chart-container"></div> <!-- 本周图表 -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="最近30天" name="third"> <!-- 新增最近30天选项卡 -->
|
||||
<div ref="monthLineChartDom" class="chart-container"></div> <!-- 最近30天图表 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" class="alert-tabs">
|
||||
<el-tab-pane label="今日" name="first">
|
||||
<div ref="todayLineChartDom" class="chart-container"></div> <!-- 今日图表 -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="本周" name="second">
|
||||
<div ref="weekLineChartDom" class="chart-container"></div> <!-- 本周图表 -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="最近30天" name="third"> <!-- 新增最近30天选项卡 -->
|
||||
<div ref="monthLineChartDom" class="chart-container"></div> <!-- 最近30天图表 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
import dayjs from 'dayjs';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
|
||||
const activeName = ref('first');
|
||||
const hourlyCounts = ref(Array(24).fill(0));
|
||||
const dailyCounts = ref(Array(7).fill(0));
|
||||
const monthlyCounts = ref(Array(30).fill(0));
|
||||
|
||||
const todayLineChartDom = ref(null);
|
||||
const weekLineChartDom = ref(null);
|
||||
const monthLineChartDom = ref(null);
|
||||
|
||||
const chartInstance = ref(null);
|
||||
|
||||
const weekDates = ref([]);
|
||||
const monthDates = ref([]);
|
||||
|
||||
const apiInstance = new BoxApi();
|
||||
|
||||
// 设置时间范围获取计数
|
||||
const getEventCount = async (timeBefore, timeAfter) => {
|
||||
try {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
const response = await apiInstance.getEventsByParams(token, 1, 1, timeBefore, timeAfter);
|
||||
return response.count;
|
||||
} catch (error) {
|
||||
console.error("Error fetching event count:", error);
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 生成图表的配置选项
|
||||
const createChartOption = (title, xAxisData, seriesData) => ({
|
||||
// title: {
|
||||
// text: title,
|
||||
// left: 'center',
|
||||
// top: '0%',
|
||||
// textStyle: {
|
||||
// color: '#ffffff',
|
||||
// fontSize: 16,
|
||||
// fontWeight: 'bold',
|
||||
// fontFamily: 'Arial, sans-serif',
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: { type: 'line' },
|
||||
formatter: (params) => {
|
||||
const date = params.name;
|
||||
const value = params.value;
|
||||
return `<strong>时间:${date}</strong><br/>告警数量: ${value}`;
|
||||
},
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.3)',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 'bold',
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
fontSize: 12
|
||||
},
|
||||
padding: 10
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '20%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value', minInterval: 1, axisLabel: { color: '#fff' },
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: { color: '#cccccc', width: 1, type: 'solid' }
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '告警数量',
|
||||
type: 'line',
|
||||
data: seriesData,
|
||||
smooth: true,
|
||||
areaStyle: { color: 'rgba(74, 172, 178, 0.3)' },
|
||||
lineStyle: { color: 'rgb(60,178,239)', width: 2 },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 更新计数数据
|
||||
const updateCounts = async (range) => {
|
||||
let timeAfter, timeBefore = dayjs().format();
|
||||
|
||||
if (range === 'day') {
|
||||
// 获取“今日”每小时的事件数量
|
||||
for (let i = 0; i < 24; i++) {
|
||||
timeAfter = dayjs().startOf('day').add(i, 'hour').format();
|
||||
timeBefore = dayjs().startOf('day').add(i + 1, 'hour').format();
|
||||
hourlyCounts.value[i] = await getEventCount(timeBefore, timeAfter);
|
||||
// console.log(`Hour ${i}: ${hourlyCounts.value[i]}`);
|
||||
}
|
||||
delayedInitChart(todayLineChartDom, createChartOption('今日告警趋势', Array.from({ length: 24 }, (_, i) => `${i}:00`), hourlyCounts.value));
|
||||
|
||||
} else if (range === 'week') {
|
||||
// 获取“本周”每天的事件数量
|
||||
for (let i = 0; i < 7; i++) {
|
||||
timeAfter = dayjs().subtract(i + 1, 'day').endOf('day').format();
|
||||
timeBefore = dayjs().subtract(i, 'day').endOf('day').format();
|
||||
dailyCounts.value[6 - i] = await getEventCount(timeBefore, timeAfter);
|
||||
}
|
||||
delayedInitChart(weekLineChartDom, createChartOption('本周告警趋势', weekDates.value, dailyCounts.value));
|
||||
|
||||
} else if (range === 'month') {
|
||||
// 获取“最近30天”每天的事件数量
|
||||
for (let i = 0; i < 30; i++) {
|
||||
timeAfter = dayjs().subtract(i + 1, 'day').endOf('day').format();
|
||||
timeBefore = dayjs().subtract(i, 'day').endOf('day').format();
|
||||
monthlyCounts.value[29 - i] = await getEventCount(timeBefore, timeAfter);
|
||||
}
|
||||
delayedInitChart(monthLineChartDom, createChartOption('近30天告警趋势', monthDates.value, monthlyCounts.value));
|
||||
}
|
||||
};
|
||||
|
||||
// 处理选项卡切换
|
||||
const handleClick = async (tab) => {
|
||||
const range = tab.props.name === 'first' ? 'day' : tab.props.name === 'second' ? 'week' : 'month';
|
||||
await updateCounts(range);
|
||||
};
|
||||
|
||||
// 初始化日期
|
||||
const calculateWeekDates = () => {
|
||||
weekDates.value = Array.from({ length: 7 }, (_, i) => dayjs().subtract(i, 'day').format('YYYY-MM-DD')).reverse();
|
||||
};
|
||||
const calculateMonthDates = () => {
|
||||
monthDates.value = Array.from({ length: 30 }, (_, i) => dayjs().subtract(i, 'day').format('YYYY-MM-DD')).reverse();
|
||||
};
|
||||
|
||||
// 图表延迟初始化
|
||||
const delayedInitChart = debounce((domRef, option) => {
|
||||
nextTick(() => {
|
||||
if (domRef.value) {
|
||||
chartInstance.value = echarts.init(domRef.value);
|
||||
chartInstance.value.setOption(option);
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
|
||||
// 组件挂载时调用
|
||||
onMounted(async () => {
|
||||
calculateWeekDates();
|
||||
calculateMonthDates();
|
||||
await handleClick({ props: { name: 'first' } });
|
||||
window.addEventListener('resize', debounce(() => {
|
||||
if (chartInstance.value) chartInstance.value.resize();
|
||||
}, 300));
|
||||
});
|
||||
</script>
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
import dayjs from 'dayjs';
|
||||
import { debounce } from 'lodash';
|
||||
import { useGlobalTimerStore } from '@/stores/globalTimerStore';
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.alert-card {
|
||||
background-color: #001529;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
/* padding: 10px; */
|
||||
/* margin: 10px; */
|
||||
const activeName = ref('first');
|
||||
const hourlyCounts = ref(Array(24).fill(0));
|
||||
const dailyCounts = ref(Array(7).fill(0));
|
||||
const monthlyCounts = ref(Array(30).fill(0));
|
||||
|
||||
const todayLineChartDom = ref(null);
|
||||
const weekLineChartDom = ref(null);
|
||||
const monthLineChartDom = ref(null);
|
||||
|
||||
const chartInstance = ref(null);
|
||||
|
||||
const weekDates = ref([]);
|
||||
const monthDates = ref([]);
|
||||
|
||||
const apiInstance = new BoxApi();
|
||||
const globalTimerStore = useGlobalTimerStore();
|
||||
|
||||
const updateChartData = async () => {
|
||||
const range =
|
||||
activeName.value === 'first' ? 'day' :
|
||||
activeName.value === 'second' ? 'week' : 'month';
|
||||
|
||||
await updateCounts(range);
|
||||
};
|
||||
|
||||
|
||||
// 设置时间范围获取计数
|
||||
const getEventCount = async (timeBefore, timeAfter) => {
|
||||
try {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
const response = await apiInstance.getEventsByParams(token, 1, 1, timeBefore, timeAfter);
|
||||
return response.count;
|
||||
} catch (error) {
|
||||
console.error("Error fetching event count:", error);
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
.alert-container {
|
||||
background-color: #001529;
|
||||
margin: 0vh 1vw 1vh 1vw;
|
||||
/* margin-top: 0; */
|
||||
// 生成图表的配置选项
|
||||
const createChartOption = (title, xAxisData, seriesData) => ({
|
||||
// title: {
|
||||
// text: title,
|
||||
// left: 'center',
|
||||
// top: '0%',
|
||||
// textStyle: {
|
||||
// color: '#ffffff',
|
||||
// fontSize: 16,
|
||||
// fontWeight: 'bold',
|
||||
// fontFamily: 'Arial, sans-serif',
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: { type: 'line' },
|
||||
formatter: (params) => {
|
||||
const date = params.name;
|
||||
const value = params.value;
|
||||
return `<strong>时间:${date}</strong><br/>告警数量: ${value}`;
|
||||
},
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.3)',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 'bold',
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
fontSize: 12
|
||||
},
|
||||
padding: 10
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '7%',
|
||||
right: '5%',
|
||||
bottom: '20%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value', minInterval: 1, axisLabel: { color: '#fff' },
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: { color: '#cccccc', width: 1, type: 'solid' }
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '告警数量',
|
||||
type: 'line',
|
||||
data: seriesData,
|
||||
smooth: true,
|
||||
areaStyle: { color: 'rgba(74, 172, 178, 0.3)' },
|
||||
lineStyle: { color: 'rgb(60,178,239)', width: 2 },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 更新计数数据
|
||||
const updateCounts = async (range) => {
|
||||
let timeAfter, timeBefore = dayjs().format();
|
||||
|
||||
if (range === 'day') {
|
||||
// 获取“今日”每小时的事件数量
|
||||
for (let i = 0; i < 24; i++) {
|
||||
timeAfter = dayjs().startOf('day').add(i, 'hour').format();
|
||||
timeBefore = dayjs().startOf('day').add(i + 1, 'hour').format();
|
||||
hourlyCounts.value[i] = await getEventCount(timeBefore, timeAfter);
|
||||
// console.log(`Hour ${i}: ${hourlyCounts.value[i]}`);
|
||||
}
|
||||
delayedInitChart(todayLineChartDom, createChartOption('今日告警趋势', Array.from({ length: 24 }, (_, i) => `${i}:00`), hourlyCounts.value));
|
||||
|
||||
} else if (range === 'week') {
|
||||
// 获取“本周”每天的事件数量
|
||||
for (let i = 0; i < 7; i++) {
|
||||
timeAfter = dayjs().subtract(i + 1, 'day').endOf('day').format();
|
||||
timeBefore = dayjs().subtract(i, 'day').endOf('day').format();
|
||||
dailyCounts.value[6 - i] = await getEventCount(timeBefore, timeAfter);
|
||||
}
|
||||
delayedInitChart(weekLineChartDom, createChartOption('本周告警趋势', weekDates.value, dailyCounts.value));
|
||||
|
||||
} else if (range === 'month') {
|
||||
// 获取“最近30天”每天的事件数量
|
||||
for (let i = 0; i < 30; i++) {
|
||||
timeAfter = dayjs().subtract(i + 1, 'day').endOf('day').format();
|
||||
timeBefore = dayjs().subtract(i, 'day').endOf('day').format();
|
||||
monthlyCounts.value[29 - i] = await getEventCount(timeBefore, timeAfter);
|
||||
}
|
||||
delayedInitChart(monthLineChartDom, createChartOption('近30天告警趋势', monthDates.value, monthlyCounts.value));
|
||||
}
|
||||
};
|
||||
|
||||
/* .alert-header {
|
||||
// 处理选项卡切换
|
||||
const handleClick = async (tab) => {
|
||||
const range = tab.props.name === 'first' ? 'day' : tab.props.name === 'second' ? 'week' : 'month';
|
||||
await updateCounts(range);
|
||||
};
|
||||
|
||||
// 初始化日期
|
||||
const calculateWeekDates = () => {
|
||||
weekDates.value = Array.from({ length: 7 }, (_, i) => dayjs().subtract(i, 'day').format('YYYY-MM-DD')).reverse();
|
||||
};
|
||||
const calculateMonthDates = () => {
|
||||
monthDates.value = Array.from({ length: 30 }, (_, i) => dayjs().subtract(i, 'day').format('YYYY-MM-DD')).reverse();
|
||||
};
|
||||
|
||||
// 图表延迟初始化
|
||||
const delayedInitChart = debounce((domRef, option) => {
|
||||
nextTick(() => {
|
||||
if (domRef.value) {
|
||||
chartInstance.value = echarts.init(domRef.value);
|
||||
chartInstance.value.setOption(option);
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
|
||||
// 组件挂载时调用
|
||||
onMounted(async () => {
|
||||
calculateWeekDates();
|
||||
calculateMonthDates();
|
||||
await handleClick({ props: { name: 'first' } });
|
||||
// 注册定时器回调
|
||||
globalTimerStore.registerCallback(updateChartData);
|
||||
|
||||
// 启动全局定时器
|
||||
globalTimerStore.startTimer();
|
||||
window.addEventListener('resize', debounce(() => {
|
||||
if (chartInstance.value) chartInstance.value.resize();
|
||||
}, 300));
|
||||
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
globalTimerStore.unregisterCallback(updateChartData);
|
||||
globalTimerStore.stopTimer();
|
||||
window.removeEventListener('resize', debounce(() => {
|
||||
if (chartInstance.value) chartInstance.value.resize();
|
||||
}));
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.alert-card {
|
||||
background-color: #001529;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
/* padding: 10px; */
|
||||
/* margin: 10px; */
|
||||
}
|
||||
|
||||
.alert-container {
|
||||
background-color: #001529;
|
||||
margin: 0vh 1vw 1vh 1vw;
|
||||
/* margin-top: 0; */
|
||||
}
|
||||
|
||||
/* .alert-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #3a4b5c;
|
||||
} */
|
||||
|
||||
.chart-container {
|
||||
/* min-height: 350px; */
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
padding: 0;
|
||||
margin-left: 1vh;
|
||||
height: 20px;
|
||||
}
|
||||
.chart-container {
|
||||
/* min-height: 350px; */
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
color: #2ea0ec;
|
||||
}
|
||||
::v-deep .el-tabs__item {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
padding: 0;
|
||||
margin-left: 1vh;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* ::v-deep .el-tabs___nav-wrap.is-top::after{
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
color: #2ea0ec;
|
||||
}
|
||||
|
||||
/* ::v-deep .el-tabs___nav-wrap.is-top::after{
|
||||
border: none;
|
||||
} */
|
||||
|
||||
/* ::v-deep .el-tabs__active-bar.is-top{
|
||||
/* ::v-deep .el-tabs__active-bar.is-top{
|
||||
padding: 0 204px;
|
||||
box-sizing: border-box !important;
|
||||
background-clip: content-box !important;
|
||||
} */
|
||||
.el-tabs__active-bar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
/* width: 15vw; */
|
||||
position: static !important;
|
||||
}
|
||||
</style>
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
/* width: 15vw; */
|
||||
position: static !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,48 @@
|
||||
<template>
|
||||
<div class="alert-container">
|
||||
<div class="title-count">
|
||||
<!-- <el-row class="title-row">
|
||||
<div class="alert-container">
|
||||
<div class="title-count">
|
||||
<!-- <el-row class="title-row">
|
||||
今日事件列表
|
||||
</el-row> -->
|
||||
<el-row class="total-row">
|
||||
<div class="total-text">
|
||||
今日告警
|
||||
</div>
|
||||
<div class="total-text">
|
||||
{{ totalItems }}条
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row class="total-row">
|
||||
<div class="total-text">
|
||||
今日告警
|
||||
</div>
|
||||
<div class="total-text">
|
||||
{{ totalItems }}条
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row class="table-row">
|
||||
<el-col :span="24" class="table-col">
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData" @row-click="handleRowClick" class="table-part">
|
||||
<el-table-column v-show="false" prop="id" label="告警编号" v-if="false"></el-table-column>
|
||||
<el-table-column label="告警类型" :width="adjustedWidths[0]" align="center"
|
||||
:show-overflow-tooltip="true">
|
||||
<template v-slot="scope">
|
||||
{{ typeMapping[scope.row.types] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="camera.name" label="告警位置" :width="adjustedWidths[1]" align="center"
|
||||
:show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column label="告警时间" :width="adjustedWidths[2]" align="center"
|
||||
:show-overflow-tooltip="true">
|
||||
<template v-slot="scope">
|
||||
{{ formatDateTime(scope.row.ended_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="告警状态" v-if="false">
|
||||
<template v-slot="scope">
|
||||
<el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{
|
||||
statusMapping[scope.row.status]
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row class="table-row">
|
||||
<el-row class="table-row">
|
||||
<el-col :span="24" class="table-col">
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData" @row-click="handleRowClick" class="table-part">
|
||||
<el-table-column v-show="false" prop="id" label="告警编号" v-if="false"></el-table-column>
|
||||
<el-table-column label="告警类型" :width="adjustedWidths[0]" align="center" :show-overflow-tooltip="true">
|
||||
<template v-slot="scope">
|
||||
{{ typeMapping[scope.row.types] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="camera.name" label="告警位置" :width="adjustedWidths[1]" align="center"
|
||||
:show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column label="告警时间" :width="adjustedWidths[2]" align="center" :show-overflow-tooltip="true">
|
||||
<template v-slot="scope">
|
||||
{{ formatDateTime(scope.row.ended_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="告警状态" v-if="false">
|
||||
<template v-slot="scope">
|
||||
<el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{
|
||||
statusMapping[scope.row.status]
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row class="table-row">
|
||||
<el-col :span="24" class="table-col">
|
||||
<div class="table-container">
|
||||
<dv-scroll-board :config="tableConfig" class="table-part" @row-click="handleRowClick"></dv-scroll-board>
|
||||
@@ -52,382 +50,402 @@
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
|
||||
<!-- <div class="adjusted-widths-display">
|
||||
<!-- <div class="adjusted-widths-display">
|
||||
当前列宽: {{ adjustedWidths.join(', ') }}
|
||||
</div> -->
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="告警详情" width="50%" class="dialog-container">
|
||||
<div>
|
||||
<el-row class="dialog-row">
|
||||
<el-col :span="12" class="dialog-left">
|
||||
<el-row gutter class="dialog-image-container">
|
||||
<template v-if="hasSnapshot">
|
||||
<el-image :src="snapshotFile"></el-image>
|
||||
</template>
|
||||
<!-- <template v-if="hasVideo">
|
||||
<el-dialog v-model="dialogVisible" title="告警详情" width="50%" class="dialog-container">
|
||||
<div>
|
||||
<el-row class="dialog-row">
|
||||
<el-col :span="12" class="dialog-left">
|
||||
<el-row gutter class="dialog-image-container">
|
||||
<template v-if="hasSnapshot">
|
||||
<el-image :src="snapshotFile" @click="handleImageClick(snapshotFile)" style="cursor: pointer;"></el-image>
|
||||
</template>
|
||||
<!-- <template v-if="hasVideo">
|
||||
<video :src="videoFile" controls></video>
|
||||
</template> -->
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="11" class="dialog-right">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<p>告警编号: {{ selectedRow.id }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警位置: {{ selectedRow.camera.name }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警时间: {{ selectedRow.formatted_started_at }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
|
||||
statusMapping[selectedRow.status]
|
||||
}}</el-tag></p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>摄像头编号: {{ selectedRow.camera_id }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>持续时间: {{ duration }}</p>
|
||||
</el-col>
|
||||
<!-- <el-col :span="24">
|
||||
<el-col :span="11" class="dialog-right">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<p>告警编号: {{ selectedRow.id }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警位置: {{ selectedRow.camera.name }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警时间: {{ selectedRow.formatted_started_at }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
|
||||
statusMapping[selectedRow.status]
|
||||
}}</el-tag></p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>摄像头编号: {{ selectedRow.camera_id }}</p>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<p>持续时间: {{ duration }}</p>
|
||||
</el-col>
|
||||
<!-- <el-col :span="24">
|
||||
<p>备注: {{ selectedRow.remark }}</p>
|
||||
</el-col> -->
|
||||
|
||||
<!-- <el-col :span="24">
|
||||
<!-- <el-col :span="24">
|
||||
<el-form-item style="width: 90%;">
|
||||
<el-input v-model="remark" placeholder="请描述事件原因" type="textarea" rows="5" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
<el-dialog v-model="previewVisible" width="60%" custom-class="image-preview-dialog" :close-on-click-modal="true">
|
||||
<img :src="previewImage" alt="预览图片" style="width: 100%; height: auto; display: block; margin: auto;" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
const boxApi = new BoxApi();
|
||||
const tableData = ref([]);
|
||||
const dialogVisible = ref(false);
|
||||
const remark = ref("");
|
||||
const selectedRow = ref({});
|
||||
const typeMapping = reactive({});
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const totalItems = ref(0);
|
||||
const displayTotalItems = ref(0);
|
||||
const token = ref(null);
|
||||
const apiInstance = new BoxApi();
|
||||
const statusMapping = {
|
||||
'pending': '待处理',
|
||||
'assigned': '处理中',
|
||||
'closed': '已处理'
|
||||
};
|
||||
const duration = ref('');
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
import { useGlobalTimerStore } from '@/stores/globalTimerStore';
|
||||
|
||||
const hasSnapshot = ref(false);
|
||||
const hasVideo = ref(false);
|
||||
const snapshotFile = ref("");
|
||||
const videoFile = ref("");
|
||||
const originalWidths = [97, 150, 160]; // 默认宽度
|
||||
const adjustedWidths = ref([...originalWidths]);
|
||||
const baseWidth = 2150;
|
||||
const boxApi = new BoxApi();
|
||||
const tableData = ref([]);
|
||||
const dialogVisible = ref(false);
|
||||
const remark = ref("");
|
||||
const selectedRow = ref({});
|
||||
const typeMapping = reactive({});
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const totalItems = ref(0);
|
||||
const displayTotalItems = ref(0);
|
||||
const token = ref(null);
|
||||
const apiInstance = new BoxApi();
|
||||
const statusMapping = {
|
||||
'pending': '待处理',
|
||||
'assigned': '处理中',
|
||||
'closed': '已处理'
|
||||
};
|
||||
const duration = ref('');
|
||||
|
||||
const formatDateTimeToISO = (datetime) => {
|
||||
const hasSnapshot = ref(false);
|
||||
const hasVideo = ref(false);
|
||||
const snapshotFile = ref("");
|
||||
const videoFile = ref("");
|
||||
const originalWidths = [97, 150, 160]; // 默认宽度
|
||||
const adjustedWidths = ref([...originalWidths]);
|
||||
const baseWidth = 2150;
|
||||
const previewVisible = ref(false); // 控制预览弹窗显示
|
||||
const previewImage = ref(''); // 预览的图片路径
|
||||
|
||||
const handleImageClick = (imagePath) => {
|
||||
previewImage.value = imagePath; // 设置预览图片路径
|
||||
previewVisible.value = true; // 显示预览弹窗
|
||||
};
|
||||
|
||||
const formatDateTimeToISO = (datetime) => {
|
||||
return new Date(datetime).toISOString().replace('.000', '');
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const adjustColumnWidths = () => {
|
||||
const currentWidth = window.innerWidth;
|
||||
// console.log(">>>>>>>>>>", currentWidth);
|
||||
const scale = currentWidth / baseWidth;
|
||||
// console.log(">>>>>>>>>>", scale);
|
||||
const adjustColumnWidths = () => {
|
||||
const currentWidth = window.innerWidth;
|
||||
// console.log(">>>>>>>>>>", currentWidth);
|
||||
const scale = currentWidth / baseWidth;
|
||||
// console.log(">>>>>>>>>>", scale);
|
||||
|
||||
// const adjustedScale = Math.max(scale, 0.5);
|
||||
adjustedWidths.value = originalWidths.map(width => {
|
||||
return currentWidth < baseWidth
|
||||
? width * scale // 缩小
|
||||
: width * scale; // 放大
|
||||
});
|
||||
// nextTick(() => {
|
||||
// const adjustedScale = Math.max(scale, 0.5);
|
||||
adjustedWidths.value = originalWidths.map(width => {
|
||||
return currentWidth < baseWidth
|
||||
? width * scale // 缩小
|
||||
: width * scale; // 放大
|
||||
});
|
||||
// nextTick(() => {
|
||||
|
||||
// });
|
||||
};
|
||||
|
||||
// const tableConfig = ref({
|
||||
// header: ['告警类型', '告警位置', '告警时间'],
|
||||
// data: [],
|
||||
// rowNum: 5,
|
||||
// columnWidth: [100, 160, 190],
|
||||
// carousel: 'single',
|
||||
// });
|
||||
};
|
||||
|
||||
const fetchTypeMapping = async (token) => {
|
||||
try {
|
||||
const algorithms = await boxApi.getAlgorithms(token);
|
||||
// console.log("Algorithms:", algorithms);
|
||||
algorithms.forEach((algorithm) => {
|
||||
typeMapping[algorithm.code_name] = algorithm.name;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching algorithms:", error);
|
||||
}
|
||||
};
|
||||
// const tableConfig = ref({
|
||||
// header: ['告警类型', '告警位置', '告警时间'],
|
||||
// data: [],
|
||||
// rowNum: 5,
|
||||
// columnWidth: [100, 160, 190],
|
||||
// carousel: 'single',
|
||||
// });
|
||||
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
const limit = 1000;
|
||||
let allEvents = [];
|
||||
let currentPage = 1;
|
||||
|
||||
const { endOfToday, startOfToday } = getDateParams();
|
||||
|
||||
const timeBefore = formatDateTimeToISO(endOfToday);
|
||||
const timeAfter = formatDateTimeToISO(startOfToday);
|
||||
// console.log("Start of today:", timeAfter);
|
||||
// const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage);
|
||||
const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage,timeBefore, timeAfter);
|
||||
// console.log("Total items:", firstResponse);
|
||||
|
||||
const total = firstResponse.count;
|
||||
totalItems.value = total;
|
||||
|
||||
allEvents = firstResponse.results;
|
||||
|
||||
while (allEvents.length < total) {
|
||||
currentPage += 1;
|
||||
const response = await apiInstance.getEventsByParams(token, limit, currentPage);
|
||||
allEvents = allEvents.concat(response.results);
|
||||
}
|
||||
tableData.value = allEvents;
|
||||
// tableConfig.value.data = allEvents.map(event => [
|
||||
// typeMapping[event.types],
|
||||
// event.camera.name,
|
||||
// formatDateTime(event.ended_at)
|
||||
// ]);
|
||||
// console.log(">>>>>>>>>>events IDs:", allEvents.map(event => event.id));
|
||||
} catch (error) {
|
||||
console.error("Error fetching events data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getDateParams = () => {
|
||||
const today = new Date();
|
||||
const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
||||
const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
|
||||
|
||||
return {
|
||||
startOfToday,
|
||||
endOfToday,
|
||||
};
|
||||
};
|
||||
const formatDateTime = (datetime) => {
|
||||
const date = new Date(datetime);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
const calculateDuration = (started_at, ended_at) => {
|
||||
const start = new Date(started_at);
|
||||
const end = new Date(ended_at);
|
||||
const durationMs = end - start;
|
||||
const minutes = Math.floor(durationMs / 60000);
|
||||
const seconds = ((durationMs % 60000) / 1000).toFixed(0);
|
||||
return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`;
|
||||
};
|
||||
|
||||
const handleRowClick = (row) => {
|
||||
selectedRow.value = row;
|
||||
duration.value = calculateDuration(row.started_at, row.ended_at);
|
||||
row.formatted_started_at = formatDateTime(row.started_at);
|
||||
|
||||
// 重置媒体类型
|
||||
hasSnapshot.value = false;
|
||||
hasVideo.value = false;
|
||||
snapshotFile.value = "";
|
||||
videoFile.value = "";
|
||||
|
||||
// 判断并设置媒体文件路径
|
||||
row.mediums.forEach((medium) => {
|
||||
if (medium.name === "snapshot") {
|
||||
hasSnapshot.value = true;
|
||||
snapshotFile.value = medium.file;
|
||||
} else if (medium.name === "video") {
|
||||
hasVideo.value = true;
|
||||
videoFile.value = medium.file;
|
||||
}
|
||||
const fetchTypeMapping = async (token) => {
|
||||
try {
|
||||
const algorithms = await boxApi.getAlgorithms(token);
|
||||
// console.log("Algorithms:", algorithms);
|
||||
algorithms.forEach((algorithm) => {
|
||||
typeMapping[algorithm.code_name] = algorithm.name;
|
||||
});
|
||||
dialogVisible.value = true;
|
||||
} catch (error) {
|
||||
console.error("Error fetching algorithms:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
const limit = 1000;
|
||||
let allEvents = [];
|
||||
let currentPage = 1;
|
||||
|
||||
const { endOfToday, startOfToday } = getDateParams();
|
||||
|
||||
const timeBefore = formatDateTimeToISO(endOfToday);
|
||||
const timeAfter = formatDateTimeToISO(startOfToday);
|
||||
// console.log("Start of today:", timeAfter);
|
||||
// const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage);
|
||||
const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage, timeBefore, timeAfter);
|
||||
// console.log("Total items:", firstResponse);
|
||||
|
||||
const total = firstResponse.count;
|
||||
totalItems.value = total;
|
||||
|
||||
allEvents = firstResponse.results;
|
||||
|
||||
while (allEvents.length < total) {
|
||||
currentPage += 1;
|
||||
const response = await apiInstance.getEventsByParams(token, limit, currentPage);
|
||||
allEvents = allEvents.concat(response.results);
|
||||
}
|
||||
tableData.value = allEvents;
|
||||
// tableConfig.value.data = allEvents.map(event => [
|
||||
// typeMapping[event.types],
|
||||
// event.camera.name,
|
||||
// formatDateTime(event.ended_at)
|
||||
// ]);
|
||||
// console.log(">>>>>>>>>>events IDs:", allEvents.map(event => event.id));
|
||||
} catch (error) {
|
||||
console.error("Error fetching events data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getDateParams = () => {
|
||||
const today = new Date();
|
||||
const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
||||
const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
|
||||
|
||||
return {
|
||||
startOfToday,
|
||||
endOfToday,
|
||||
};
|
||||
};
|
||||
const formatDateTime = (datetime) => {
|
||||
const date = new Date(datetime);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
const calculateDuration = (started_at, ended_at) => {
|
||||
const start = new Date(started_at);
|
||||
const end = new Date(ended_at);
|
||||
const durationMs = end - start;
|
||||
const minutes = Math.floor(durationMs / 60000);
|
||||
const seconds = ((durationMs % 60000) / 1000).toFixed(0);
|
||||
return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`;
|
||||
};
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
currentPage.value = page;
|
||||
fetchEvents();
|
||||
};
|
||||
const handleRowClick = (row) => {
|
||||
selectedRow.value = row;
|
||||
duration.value = calculateDuration(row.started_at, row.ended_at);
|
||||
row.formatted_started_at = formatDateTime(row.started_at);
|
||||
|
||||
// const calculateColumnWidths = () => {
|
||||
// const containerWidth = document.querySelector('.table-container').clientWidth;
|
||||
// };
|
||||
// 重置媒体类型
|
||||
hasSnapshot.value = false;
|
||||
hasVideo.value = false;
|
||||
snapshotFile.value = "";
|
||||
videoFile.value = "";
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
token.value = localStorage.getItem('alertToken');
|
||||
await fetchTypeMapping(token.value);
|
||||
await fetchEvents();
|
||||
await adjustColumnWidths();
|
||||
window.addEventListener('resize', adjustColumnWidths);
|
||||
// 判断并设置媒体文件路径
|
||||
row.mediums.forEach((medium) => {
|
||||
if (medium.name === "snapshot") {
|
||||
hasSnapshot.value = true;
|
||||
snapshotFile.value = medium.file;
|
||||
} else if (medium.name === "video") {
|
||||
hasVideo.value = true;
|
||||
videoFile.value = medium.file;
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', adjustColumnWidths);
|
||||
});
|
||||
</script>
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
|
||||
<style scoped>
|
||||
.alert-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
margin: 0 0 0 1vw;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
const handlePageChange = (page) => {
|
||||
currentPage.value = page;
|
||||
fetchEvents();
|
||||
};
|
||||
|
||||
.table-continer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
// const calculateColumnWidths = () => {
|
||||
// const containerWidth = document.querySelector('.table-container').clientWidth;
|
||||
// };
|
||||
|
||||
|
||||
.title-count {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
onMounted(async () => {
|
||||
|
||||
/* background-color: transparent; */
|
||||
}
|
||||
token.value = localStorage.getItem('alertToken');
|
||||
await fetchTypeMapping(token.value);
|
||||
await fetchEvents();
|
||||
await adjustColumnWidths();
|
||||
window.addEventListener('resize', adjustColumnWidths);
|
||||
const globalTimerStore = useGlobalTimerStore();
|
||||
globalTimerStore.registerCallback(fetchEvents);
|
||||
globalTimerStore.startTimer();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', adjustColumnWidths);
|
||||
const globalTimerStore = useGlobalTimerStore();
|
||||
globalTimerStore.unregisterCallback(fetchEvents);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
/* .total-text{
|
||||
<style scoped>
|
||||
.alert-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
margin: 0 0 0 1vw;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.table-continer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.title-count {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
|
||||
/* background-color: transparent; */
|
||||
}
|
||||
|
||||
|
||||
/* .total-text{
|
||||
padding-right: 1vw;
|
||||
} */
|
||||
/* title-row内容水平上下居中 */
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* title-row内容水平上下居中 */
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* total-row左右等分，分别靠左和靠右 */
|
||||
.total-row {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
justify-content: right;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding-right: 0vw;
|
||||
}
|
||||
/* total-row左右等分，分别靠左和靠右 */
|
||||
.total-row {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
justify-content: right;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding-right: 0vw;
|
||||
}
|
||||
|
||||
.dialog-row {
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
}
|
||||
.dialog-row {
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dialog-image-container {
|
||||
gap: 20px;
|
||||
}
|
||||
.dialog-image-container {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.el-dialog .el-image,
|
||||
.el-dialog video {
|
||||
width: 100%;
|
||||
}
|
||||
.el-dialog .el-image,
|
||||
.el-dialog video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* 基础表格样式 */
|
||||
::v-deep .el-table {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
/* font-weight: bold; */
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 14vh;
|
||||
}
|
||||
/* 基础表格样式 */
|
||||
::v-deep .el-table {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
/* font-weight: bold; */
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 14vh;
|
||||
}
|
||||
|
||||
/* 表头和单元格基本样式 */
|
||||
/* 表头和单元格基本样式 */
|
||||
|
||||
::v-deep .el-table td {
|
||||
border: none;
|
||||
background-color: #001529;
|
||||
transition: border 0.3s ease, background-color 0.3s ease;
|
||||
color: white;
|
||||
padding: 0;
|
||||
/* height: 10px; */
|
||||
/* white-space: nowrap; */
|
||||
/* overflow: hidden; */
|
||||
/* text-overflow: ellipsis; */
|
||||
}
|
||||
::v-deep .el-table td {
|
||||
border: none;
|
||||
background-color: #001529;
|
||||
transition: border 0.3s ease, background-color 0.3s ease;
|
||||
color: white;
|
||||
padding: 0;
|
||||
/* height: 10px; */
|
||||
/* white-space: nowrap; */
|
||||
/* overflow: hidden; */
|
||||
/* text-overflow: ellipsis; */
|
||||
}
|
||||
|
||||
/* 去掉中间数据的分割线 */
|
||||
/* ::v-deep .el-table .el-table__row>td{
|
||||
/* 去掉中间数据的分割线 */
|
||||
/* ::v-deep .el-table .el-table__row>td{
|
||||
border: none;
|
||||
} */
|
||||
|
||||
.table-container >>> .el-table__row>td{
|
||||
border: none;
|
||||
}
|
||||
.table-container >>> .el-table th.is-leaf{
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-table__inner-wrapper::before{
|
||||
height: 0;
|
||||
}
|
||||
.table-container>>>.el-table__row>td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table thead th {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: #001529;
|
||||
padding: 0;
|
||||
}
|
||||
.table-container>>>.el-table th.is-leaf {
|
||||
border: none;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__cell:hover {
|
||||
background-color: transparent;
|
||||
color: rgb(238, 150, 49);
|
||||
/* font-size: 26px; */
|
||||
/* 保持文本为白色 */
|
||||
}
|
||||
::v-deep .el-table__inner-wrapper::before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.el-tooltip__popper {
|
||||
font-size: 26px;
|
||||
max-width:50%
|
||||
}
|
||||
</style>
|
||||
::v-deep .el-table thead th {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: #001529;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__cell:hover {
|
||||
background-color: transparent;
|
||||
color: rgb(238, 150, 49);
|
||||
/* font-size: 26px; */
|
||||
/* 保持文本为白色 */
|
||||
}
|
||||
|
||||
.el-tooltip__popper {
|
||||
font-size: 26px;
|
||||
max-width: 50%
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,9 @@ import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
import { DCaret } from '@element-plus/icons-vue';
|
||||
import { useGlobalTimerStore } from '@/stores/globalTimerStore';
|
||||
|
||||
const globalTimerStore = useGlobalTimerStore();
|
||||
const chartContainer = ref(null);
|
||||
let myChart = null;
|
||||
const cameras = ref([]);
|
||||
@@ -98,7 +100,7 @@ const option = ref({
|
||||
data: [], // 动态填充告警数量
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
padding:[0],
|
||||
padding: [0],
|
||||
showBackground: true,
|
||||
barBorderRadius: [30, 0, 0, 30],
|
||||
backgroundStyle: { color: 'rgba(9, 68, 131, .2)' },
|
||||
@@ -236,18 +238,14 @@ const fetchCameras = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 清理轮播和事件监听
|
||||
onBeforeUnmount(() => {
|
||||
if (dataZoomMoveTimer) {
|
||||
clearInterval(dataZoomMoveTimer);
|
||||
dataZoomMoveTimer = null; // 确保计时器被清空
|
||||
const resizeChart = () => {
|
||||
if (myChart && !myChart.isDisposed()) {
|
||||
myChart.resize();
|
||||
} else {
|
||||
console.warn('Attempted to resize a disposed ECharts instance.');
|
||||
}
|
||||
if (myChart) {
|
||||
window.removeEventListener('resize', resizeChart); // 确保事件监听器被移除
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -259,16 +257,26 @@ onMounted(async () => {
|
||||
|
||||
// 监听窗口变化事件，调整图表大小
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
globalTimerStore.registerCallback(fetchCameras);
|
||||
globalTimerStore.startTimer();
|
||||
|
||||
});
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
if (myChart && !myChart.isDisposed()) {
|
||||
myChart.resize();
|
||||
} else {
|
||||
console.warn('Attempted to resize a disposed ECharts instance.');
|
||||
// 清理轮播和事件监听
|
||||
onBeforeUnmount(() => {
|
||||
if (dataZoomMoveTimer) {
|
||||
clearInterval(dataZoomMoveTimer);
|
||||
dataZoomMoveTimer = null; // 确保计时器被清空
|
||||
}
|
||||
};
|
||||
if (myChart) {
|
||||
window.removeEventListener('resize', resizeChart); // 确保事件监听器被移除
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
globalTimerStore.unregisterCallback(fetchCameras);
|
||||
globalTimerStore.stopTimer();
|
||||
});
|
||||
|
||||
|
||||
// const resizeChart = () => {
|
||||
@@ -283,23 +291,25 @@ const resizeChart = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.leftMiddle-box{
|
||||
.leftMiddle-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 41vh;
|
||||
margin: 20px;
|
||||
}
|
||||
.show-bt{
|
||||
|
||||
.show-bt {
|
||||
background-color: #001529;
|
||||
border: #001529;
|
||||
width: 6vw;
|
||||
height: 4vh;
|
||||
width: 79px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
font-size: 15px;
|
||||
font-size: 0.9rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
/* margin: 0 1vw 0 1vw; */
|
||||
padding-top: 0;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<!-- 右侧分为两行 -->
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-col :sm="24" :md="24" class="inner-title-text">
|
||||
通道总数：
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -41,7 +41,7 @@
|
||||
<!-- 右侧分为两行 -->
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-col :sm="24" :md="24" class="inner-title-text">
|
||||
在线：
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -64,7 +64,7 @@
|
||||
<!-- 右侧分为两行 -->
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-col :sm="24" :md="24" class="inner-title-text">
|
||||
离线:
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -89,7 +89,7 @@
|
||||
<!-- 右侧分为两行 -->
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-col :sm="24" :md="24" class="inner-title-text">
|
||||
事件总数：
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -112,7 +112,7 @@
|
||||
<!-- 右侧分为两行 -->
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-col :sm="24" :md="24" class="inner-title-text">
|
||||
已处理:
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -135,7 +135,7 @@
|
||||
<!-- 右侧分为两行 -->
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-col :sm="24" :md="24" class="inner-title-text">
|
||||
未处理:
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -163,6 +163,7 @@ import CameraOffline from '@/icons/CameraOffline.vue';
|
||||
import EventAll from '@/icons/EventAll.vue';
|
||||
import EventClosed from '@/icons/EventClosed.vue';
|
||||
import EventPending from '@/icons/EventPending.vue';
|
||||
import { useGlobalTimerStore } from '@/stores/globalTimerStore';
|
||||
|
||||
const apiInstance = new BoxApi();
|
||||
const cameraCount = ref(0);
|
||||
@@ -320,8 +321,19 @@ onMounted(() => {
|
||||
// getMonthData();
|
||||
fetchCameras();
|
||||
fetchEvents();
|
||||
const globalTimerStore = useGlobalTimerStore();
|
||||
globalTimerStore.registerCallback(fetchCameras);
|
||||
globalTimerStore.registerCallback(fetchEvents);
|
||||
|
||||
globalTimerStore.startTimer();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
const globalTimerStore = useGlobalTimerStore();
|
||||
|
||||
// 注销回调
|
||||
globalTimerStore.unregisterCallback(fetchCameras);
|
||||
globalTimerStore.unregisterCallback(fetchEvents);
|
||||
});
|
||||
|
||||
|
||||
@@ -332,8 +344,12 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 1vh;
|
||||
padding: 2vh 0;
|
||||
|
||||
padding: 1vh 1vw;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width:none;
|
||||
}
|
||||
.count-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -341,14 +357,19 @@ onMounted(() => {
|
||||
.bottom-row {
|
||||
background-color: #001529;
|
||||
color: aliceblue;
|
||||
padding: 0;
|
||||
padding: 0.5vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inner-title-text{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.inner-count-text {
|
||||
color: rgb(91, 224, 241);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tab-div {
|
||||
@@ -357,7 +378,7 @@ onMounted(() => {
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
margin-left: 1vh;
|
||||
height: 20px;
|
||||
|
||||
@@ -3,18 +3,18 @@
|
||||
|
||||
<div class="search-row">
|
||||
<div class="bt-search">
|
||||
<el-button type="primary" @click="handleFilter" class="alert-bt">点击查询</el-button>
|
||||
<el-button type="primary" @click="handleFilter" class="alert-bt"><el-icon><Search /></el-icon>点击查询</el-button>
|
||||
</div>
|
||||
<div class="start-col">
|
||||
<el-date-picker v-model="filterParams.timeAfter" :teleported="false" type="datetime" placeholder="请选择开始时间" prefix-icon="CaretBottom" popper-class="popperClass" ></el-date-picker>
|
||||
<el-date-picker v-model="filterParams.timeAfter" :teleported="false" type="datetime" placeholder="请选择开始时间"
|
||||
prefix-icon="CaretBottom" popper-class="popperClass"></el-date-picker>
|
||||
</div>
|
||||
<div class="end-col">
|
||||
<el-date-picker v-model="filterParams.timeBefore" :teleported="false" type="datetime" placeholder="请选择结束时间" prefix-icon="CaretBottom" popper-class="popperClass" ></el-date-picker>
|
||||
<el-date-picker v-model="filterParams.timeBefore" :teleported="false" type="datetime" placeholder="请选择结束时间"
|
||||
prefix-icon="CaretBottom" popper-class="popperClass"></el-date-picker>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="3d-bar-chart" class="myPanChart" ></div>
|
||||
<div id="3d-bar-chart" class="myPanChart"></div>
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col :span="24">
|
||||
@@ -31,9 +31,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted,onBeforeUnmount,computed} from 'vue';
|
||||
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
import * as echarts from 'echarts';
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { useGlobalTimerStore } from '@/stores/globalTimerStore';
|
||||
|
||||
const globalTimerStore = useGlobalTimerStore();
|
||||
|
||||
const apiInstance = new BoxApi();
|
||||
const typeMapping = reactive({});
|
||||
@@ -60,22 +64,118 @@ const renderChart = () => {
|
||||
const chartInstance = echarts.init(chartDom);
|
||||
|
||||
const colorList = [
|
||||
// new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// { offset: 0, color: "rgba(69,233,254,1)" },
|
||||
// { offset: 1, color: "rgba(69,233,254,0.3)" }
|
||||
// ]),
|
||||
|
||||
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(255,181,111,1)" },
|
||||
{ offset: 1, color: "rgba(255,181,111,0.3)" }
|
||||
{ offset: 0, color: "rgba(135, 206, 250,0.7)" },
|
||||
{ offset: 1, color: "rgba(135, 206, 250,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(101,122,250,1)" },
|
||||
{ offset: 1, color: "rgba(101,122,250,0.3)" }
|
||||
{ offset: 0, color: "rgba(95, 158, 160,0.8)" },
|
||||
{ offset: 1, color: "rgba(95, 158, 160,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(255, 99, 71, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 99, 71, 0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(218, 112, 214,0.6)" },
|
||||
{ offset: 1, color: "rgba(218, 112, 214,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(138, 43, 226,0.7)" },
|
||||
{ offset: 1, color: "rgba(138, 43, 226,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(45,190,146,1)" },
|
||||
{ offset: 1, color: "rgba(45,190,146,0.3)" }
|
||||
{ offset: 0, color: "rgba(75, 0, 130,0.8)" },
|
||||
{ offset: 1, color: "rgba(75, 0, 130,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(173, 216, 230,0.7)" },
|
||||
{ offset: 1, color: "rgba(173, 216, 230,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(100, 149, 237,0.8)" },
|
||||
{ offset: 1, color: "rgba(100, 149, 237,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(25, 25, 112,0.9)" },
|
||||
{ offset: 1, color: "rgba(25, 25, 112,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(64, 224, 208,0.7)" },
|
||||
{ offset: 1, color: "rgba(64, 224, 208,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(32, 178, 170,0.8)" },
|
||||
{ offset: 1, color: "rgba(32, 178, 170,0.3)" }
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(47, 79, 79,0.9)" },
|
||||
{ offset: 1, color: "rgba(47, 79, 79,0.3)" }
|
||||
]),
|
||||
//深海绿 //海浪青 //薄荷青 //幽夜蓝 //极地蓝 //浅冰蓝 //深紫罗兰 //静夜紫 //薰衣草紫 //薄暮紫 //冰川青 //清晨蓝
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(123, 104, 238,0.7)" },
|
||||
{ offset: 1, color: "rgba(123, 104, 238,0.3)" }
|
||||
]),
|
||||
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(255, 165, 0, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 165, 0, 0.3)" }
|
||||
]), // 橙色
|
||||
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(255, 182, 193, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 182, 193, 0.3)" }
|
||||
]), // 浅粉红
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(250, 128, 114, 1)" },
|
||||
{ offset: 1, color: "rgba(250, 128, 114, 0.3)" }
|
||||
]), // 鲑鱼橙
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(240, 128, 128, 1)" },
|
||||
{ offset: 1, color: "rgba(240, 128, 128, 0.3)" }
|
||||
]), // 浅珊瑚红
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(255, 140, 0, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 140, 0, 0.3)" }
|
||||
]), // 深橙色
|
||||
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(255, 215, 0, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 215, 0, 0.3)" }
|
||||
]), // 金色
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(255, 228, 181, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 228, 181, 0.3)" }
|
||||
]), // 小麦色
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(255, 160, 122, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 160, 122, 0.3)" }
|
||||
]), // 浅鲑鱼色
|
||||
|
||||
new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "rgba(250, 250, 210, 1)" },
|
||||
{ offset: 1, color: "rgba(250, 250, 210, 0.3)" }
|
||||
]), // 浅金黄
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 0, color: "rgba(255, 223, 186, 1)" },
|
||||
{ offset: 1, color: "rgba(255, 223, 186, 0.3)" }
|
||||
]), // 暖杏色
|
||||
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(245, 222, 179, 1)" },
|
||||
{ offset: 1, color: "rgba(245, 222, 179, 0.3)" }
|
||||
]), // 小麦暖黄
|
||||
|
||||
];
|
||||
|
||||
@@ -134,7 +234,7 @@ const renderChart = () => {
|
||||
radius: ['10%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
padding:[0,10],
|
||||
padding: [0, 10],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
@@ -202,9 +302,9 @@ const handleFilter = () => {
|
||||
const timeAfter = filterParams.timeAfter ? formatDateTimeToISO(new Date(filterParams.timeAfter)) : null;
|
||||
const timeBefore = filterParams.timeBefore ? formatDateTimeToISO(new Date(filterParams.timeBefore)) : null;
|
||||
fetchTypeCounts(timeAfter, timeBefore); // 重新统计数量，添加时间条件
|
||||
|
||||
};
|
||||
|
||||
|
||||
const formatDateTime = (datetime) => {
|
||||
const date = new Date(datetime);
|
||||
const year = date.getFullYear();
|
||||
@@ -238,10 +338,14 @@ onMounted(async () => {
|
||||
await fetchTypeCounts(); // 初次加载时不加时间条件
|
||||
window.addEventListener('resize', handleResize);
|
||||
await renderChart();
|
||||
globalTimerStore.registerCallback(handleFilter);
|
||||
globalTimerStore.startTimer();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
globalTimerStore.unregisterCallback(handleFilter);
|
||||
globalTimerStore.stopTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -249,7 +353,7 @@ onBeforeUnmount(() => {
|
||||
/* .statistics-container {
|
||||
margin-top: 20px;
|
||||
} */
|
||||
.alert-container{
|
||||
.alert-container {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -262,7 +366,7 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
height: 5vh;
|
||||
} */
|
||||
.search-row{
|
||||
.search-row {
|
||||
width: 95%;
|
||||
padding: 0;
|
||||
background-color: #001529;
|
||||
@@ -271,11 +375,13 @@ onBeforeUnmount(() => {
|
||||
align-items: left;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
gap:1vh;
|
||||
gap: 1vh;
|
||||
|
||||
}
|
||||
|
||||
.start-col,.end-col,.bt-search{
|
||||
.start-col,
|
||||
.end-col,
|
||||
.bt-search {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
@@ -289,18 +395,18 @@ onBeforeUnmount(() => {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.myPanChart{
|
||||
.myPanChart {
|
||||
width: 95%;
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
::v-deep .search-row .el-input__wrapper{
|
||||
::v-deep .search-row .el-input__wrapper {
|
||||
background-color: transparent;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert-bt{
|
||||
.alert-bt {
|
||||
background-color: #001529;
|
||||
/* background-color: #4a4a4a; */
|
||||
border: #001529;
|
||||
|
||||
@@ -1,17 +1,73 @@
|
||||
<template>
|
||||
<div class="settings-container">
|
||||
<el-row class="popup-row">
|
||||
<el-col :sm="24" :md="24">弹窗设置</el-col>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-checkbox v-model="isInteractivePopupEnabled" @change="handleInteractiveChange" style="color: aliceblue;">
|
||||
开启交互式弹窗
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-checkbox v-model="isResponsivePopupEnabled" @change="handleResponsiveChange" style="color: aliceblue;">
|
||||
开启响应式弹窗
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-row class="tip-row">
|
||||
|
||||
<div class="model-row">
|
||||
<el-col :sm="24" :md="8">
|
||||
<el-card style="max-width: 480px" >
|
||||
<template #header>
|
||||
弹窗模式设置
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-checkbox v-model="isInteractivePopupEnabled" @change="handleInteractiveChange">
|
||||
开启交互式弹窗
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-checkbox v-model="isResponsivePopupEnabled" @change="handleResponsiveChange">
|
||||
开启响应式弹窗
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>(Tips: 不支持同时生效,关闭状态无声音)</template>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="8">
|
||||
<el-card style="max-width: 480px" >
|
||||
<template #header>
|
||||
<span>弹窗队列设置</span>
|
||||
</template>
|
||||
<el-col :sm="24" :md="24" style="margin:1vh 0;">
|
||||
<el-button @click="loadNextNotification" size="small" type="primary">加载更多</el-button>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-button @click="clearAllNotifications" size="small" type="danger">清空所有</el-button>
|
||||
</el-col>
|
||||
<template #footer>(Tips: 交互模式下加载/清空累积弹窗提示)</template>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="8" class="audio-card">
|
||||
<el-card style="max-width: 480px" >
|
||||
<template #header>
|
||||
<span>弹窗声音设置</span>
|
||||
</template>
|
||||
<el-col :sm="24" :md="24">
|
||||
开启提示声音:
|
||||
<el-switch v-model="isSoundEnabled" @change="handleSoundSwitch">开启振荡器发声</el-switch>
|
||||
</el-col>
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :md="5" >
|
||||
<span>音量设置: </span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-slider v-model="volume" :min="0" :max="1" :step="0.01" :disabled="isSoundEnabled"
|
||||
@change="previewSound" size="small" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :md="5" >
|
||||
<span>音调设置: </span>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="16">
|
||||
<el-slider v-model="frequency" :min="300" :max="1200" :step="10" :disabled="isSoundEnabled"
|
||||
@change="previewSound" size="small" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>(Tips: 开启后锁定声音设置)</template>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row class="channel-row">
|
||||
<Channel />
|
||||
@@ -20,26 +76,90 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, onMounted } from 'vue';
|
||||
import { ref, inject, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import type { GlobalWebSocket } from '@/utils/useGlobalWebSocket';
|
||||
import Channel from '@/components/Channel.vue';
|
||||
|
||||
|
||||
const isInteractivePopupEnabled = ref(false); // 交互式弹窗状态
|
||||
const isResponsivePopupEnabled = ref(false); // 响应式弹窗状态
|
||||
const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket');
|
||||
|
||||
if (!globalWebSocket) {
|
||||
throw new Error('globalWebSocket 注入失败');
|
||||
}
|
||||
const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket');
|
||||
if (!globalWebSocket) throw new Error('globalWebSocket 注入失败');
|
||||
|
||||
const { notificationSoundParams, setNotificationSoundParams } = globalWebSocket;
|
||||
const isSoundEnabled = ref(notificationSoundParams.isSoundEnabled);
|
||||
const volume = ref(notificationSoundParams.volume);
|
||||
const frequency = ref(notificationSoundParams.frequency);
|
||||
let audioContext: AudioContext | null = null;
|
||||
const loadNextNotification = () => {
|
||||
if (globalWebSocket) globalWebSocket.loadNextNotification();
|
||||
};
|
||||
|
||||
const clearAllNotifications = () => {
|
||||
if (globalWebSocket) globalWebSocket.clearAllNotifications();
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 初始化时加载弹窗模式状态
|
||||
onMounted(() => {
|
||||
isInteractivePopupEnabled.value = localStorage.getItem('isInteractivePopupEnabled') === 'true';
|
||||
isResponsivePopupEnabled.value = localStorage.getItem('isResponsivePopupEnabled') === 'true';
|
||||
isSoundEnabled.value = notificationSoundParams.isSoundEnabled;
|
||||
volume.value = notificationSoundParams.volume;
|
||||
frequency.value = notificationSoundParams.frequency;
|
||||
updateWebSocketConnection();
|
||||
});
|
||||
|
||||
const handleSoundSwitch = () => {
|
||||
setNotificationSoundParams({
|
||||
isSoundEnabled: isSoundEnabled.value,
|
||||
volume: volume.value,
|
||||
frequency: frequency.value,
|
||||
});
|
||||
ElMessage.success(isSoundEnabled.value ? '提示音已开启，当前参数已锁定' : '提示音已关闭');
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 预览提示音
|
||||
const previewSound = () => {
|
||||
if (audioContext) {
|
||||
audioContext.close();
|
||||
}
|
||||
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
oscillator.type = 'triangle';
|
||||
oscillator.frequency.setValueAtTime(frequency.value, audioContext.currentTime);
|
||||
gainNode.gain.setValueAtTime(volume.value, audioContext.currentTime);
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
oscillator.start();
|
||||
setTimeout(() => {
|
||||
oscillator.stop();
|
||||
audioContext?.close();
|
||||
audioContext = null;
|
||||
}, 300); // 持续播放 300ms
|
||||
};
|
||||
|
||||
watch([isSoundEnabled, volume, frequency], () => {
|
||||
setNotificationSoundParams({
|
||||
isSoundEnabled: isSoundEnabled.value,
|
||||
volume: volume.value,
|
||||
frequency: frequency.value,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// const handleInteractiveChange = () => {
|
||||
// if (isInteractivePopupEnabled.value) {
|
||||
// isResponsivePopupEnabled.value = false;
|
||||
@@ -132,6 +252,10 @@ const updateWebSocketConnection = () => {
|
||||
globalWebSocket.closeWebSocket();
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
audioContext?.close();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -143,7 +267,9 @@ const updateWebSocketConnection = () => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup-row {
|
||||
.tip-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
height: 20vh;
|
||||
width: 80vw;
|
||||
@@ -154,6 +280,62 @@ const updateWebSocketConnection = () => {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tip-row .el-card{
|
||||
border: none !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tip-row .el-card .el-checkbox{
|
||||
color: white;
|
||||
}
|
||||
|
||||
::v-deep .tip-row .el-card__header {
|
||||
background-color: #001529;
|
||||
/* height: 3vh; */
|
||||
padding: 1vh 0 1vh 1vw;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
::v-deep .tip-row .el-card__body {
|
||||
background-color: #001529;
|
||||
height: 12vh;
|
||||
font-size: 16px;
|
||||
/* border: 0px ; */
|
||||
}
|
||||
|
||||
::v-deep .tip-row .el-card .is-always-shadow{
|
||||
color: aqua;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .tip-row .el-card__footer {
|
||||
background-color: #001529;
|
||||
|
||||
/* height: 3vh; */
|
||||
padding: 0 1vw 0 0;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-top: none !important;
|
||||
color: #a8a3a3;
|
||||
}
|
||||
|
||||
|
||||
.model-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
::v-deep .audio-card .el-card__body {
|
||||
padding: 1vh 1vw;
|
||||
/* background-color: aqua; */
|
||||
}
|
||||
|
||||
|
||||
.channel-row {
|
||||
margin: 1vh 2vw;
|
||||
width: 80vw;
|
||||
|
||||
@@ -48,34 +48,38 @@
|
||||
<el-date-picker v-model="filterParams.timeBefore" type="datetime" placeholder="请选择结束时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" class="filter-buttons" :offset="15">
|
||||
<el-col :span="8" class="filter-buttons" :offset="0">
|
||||
<el-button type="primary" @click="handleFilter">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
<el-button :disabled="isExporting" @click="exportData">
|
||||
{{ isExporting ? '正在导出，请勿重复点击' : '导出' }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1" :offset="0">
|
||||
<el-button type="primary" :disabled="!selectedAlerts.length" @click="batchMarkAsProcessed">
|
||||
批量标记为已处理
|
||||
</el-button>
|
||||
<!-- <el-button type="danger" :disabled="!selectedAlerts.length" @click="handleDelete">删除选中</el-button> -->
|
||||
</el-col>
|
||||
<el-col :span="15" :offset="0">
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="table-row">
|
||||
<el-col :span="24" class="table-col">
|
||||
<div class="table-container">
|
||||
<el-table :data="tableData" header-row-class-name="table-header" :fit="true" height="580"
|
||||
<el-table :data="tableData" class="events-table" :fit="true"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" min-width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="告警编号" min-width="100"></el-table-column>
|
||||
<el-table-column label="告警类型" min-width="150">
|
||||
<el-table-column type="selection" min-width="55" align="center"></el-table-column>
|
||||
<el-table-column type="index" label="序号" min-width="30"
|
||||
:index="(index) => index + 1 + (currentPage - 1) * pageSize" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="id" label="告警编号" min-width="100" align="center" v-if="showColumn"></el-table-column>
|
||||
<el-table-column label="告警类型" min-width="100" align="center">
|
||||
<template v-slot="scope">
|
||||
{{ typeMapping[scope.row.types] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="camera.name" label="告警位置" min-width="150"></el-table-column>
|
||||
<el-table-column label="告警时间" min-width="200">
|
||||
<el-table-column prop="camera.name" label="告警位置" min-width="100" align="center"></el-table-column>
|
||||
<el-table-column label="告警时间" min-width="200" align="center">
|
||||
<template v-slot="scope">
|
||||
{{ formatDateTime(scope.row.ended_at) }}
|
||||
</template>
|
||||
@@ -149,7 +153,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="event-media" :class="{ 'center-media': mediums.length === 1 }"> -->
|
||||
<div class="event-media" >
|
||||
<div class="event-media">
|
||||
<!-- 告警关联视频 -->
|
||||
<!-- <div v-if="hasVideo" class="media-container video-item">
|
||||
<p>告警关联视频</p>
|
||||
@@ -200,9 +204,9 @@ import { ref, reactive, onMounted, computed } from 'vue';
|
||||
// import Statistics from '@/components/Statistics.vue';
|
||||
// import AlertChart from '@/components/AlertChart.vue';
|
||||
import { BoxApi } from '@/utils/boxApi.ts'; // 导入 BoxApi
|
||||
|
||||
import { saveAs } from 'file-saver';
|
||||
import Papa from 'papaparse';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 创建 BoxApi 实例
|
||||
const boxApi = new BoxApi();
|
||||
@@ -232,6 +236,7 @@ const displayTotalItems = ref(0); // 用于展示的数字
|
||||
const cameras = ref([]);
|
||||
|
||||
const selectedAlerts = ref([]);
|
||||
const showColumn = ref(true);
|
||||
|
||||
const handleSelectionChange = (selectedRows) => {
|
||||
selectedAlerts.value = selectedRows.map(row => row.id);
|
||||
@@ -250,6 +255,49 @@ const batchMarkAsProcessed = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
// 显示确认框
|
||||
ElMessageBox.confirm(
|
||||
`确认删除选中的 ${selectedAlerts.value.length} 条告警吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
try {
|
||||
// 调用 API 删除选中的告警
|
||||
const results = await boxApi.delEvents(token.value, selectedAlerts.value);
|
||||
|
||||
// 检查结果，显示操作成功或失败
|
||||
const failedDeletions = results.filter(item => !item.success);
|
||||
if (failedDeletions.length === 0) {
|
||||
ElMessage.success('删除成功');
|
||||
} else {
|
||||
ElMessage.error(
|
||||
`部分删除失败：${failedDeletions
|
||||
.map(item => `ID: ${item.id}`)
|
||||
.join(', ')}`
|
||||
);
|
||||
}
|
||||
|
||||
// 刷新表格数据
|
||||
await fetchEvents();
|
||||
selectedAlerts.value = []; // 清空选中项
|
||||
} catch (error) {
|
||||
console.error('删除操作失败:', error);
|
||||
ElMessage.error('删除失败，请稍后再试');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消删除操作
|
||||
ElMessage.info('删除已取消');
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
const formatDateTimeToISO = (datetime) => {
|
||||
return new Date(datetime).toISOString().replace('.000', '');
|
||||
@@ -447,9 +495,10 @@ const fetchTypeMapping = async (token) => {
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const { tableData: data, totalItems: total } = await boxApi.getEvents(token.value, pageSize.value, currentPage.value); // 使用 BoxApi 的 getEvents 方法
|
||||
tableData.value = data;
|
||||
// tableData.value = data;
|
||||
tableData.value = data.sort((a, b) => new Date(b.ended_at) - new Date(a.ended_at));
|
||||
totalItems.value = total;
|
||||
animateNumberChange(total);
|
||||
// animateNumberChange(total);
|
||||
} catch (error) {
|
||||
console.error("Error fetching events data:", error);
|
||||
}
|
||||
@@ -588,7 +637,8 @@ onMounted(async () => {
|
||||
|
||||
.table-container {
|
||||
max-width: 100%;
|
||||
height: 80%;
|
||||
height: 100%;
|
||||
height: 56vh;
|
||||
/* min-height: 50vh; */
|
||||
/* max-height: 70vh; */
|
||||
overflow-x: auto;
|
||||
@@ -600,6 +650,11 @@ onMounted(async () => {
|
||||
|
||||
}
|
||||
|
||||
::v-deep .events-table .el-table__inner-wrapper{
|
||||
height: 55vh;
|
||||
max-height: 56vh;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@@ -608,10 +663,10 @@ onMounted(async () => {
|
||||
margin: 0vh 6vw 5vh 1vw;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
/* .table-header {
|
||||
background-color: #f7f8fa;
|
||||
font-weight: bold;
|
||||
}
|
||||
} */
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background-color: #e9eefca4;
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
if (newVal) {
|
||||
// cameraDataZ.value = JSON.parse(JSON.stringify(newVal));
|
||||
Object.assign(cameraDataZ.value, JSON.parse(JSON.stringify(props.cameraData)));
|
||||
console.log("cameraDataZ:", cameraDataZ.value);
|
||||
// console.log("cameraDataZ:", cameraDataZ.value);
|
||||
formatCameraData(cameraDataZ.value);
|
||||
}
|
||||
}
|
||||
@@ -299,7 +299,7 @@
|
||||
// mode: rule.mode,
|
||||
// })),
|
||||
};
|
||||
console.log("页面的cameraUpdate》》》》》》》》》》》:", cameraUpdate);
|
||||
// console.log("页面的cameraUpdate》》》》》》》》》》》:", cameraUpdate);
|
||||
|
||||
// 构造 ruleUpdate 数据
|
||||
const ruleUpdate = CameraDialog.value.rules.map((rule) => ({
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
<template>
|
||||
<div class="list-view">
|
||||
<div class="background-overlay"></div>
|
||||
<div class="container">
|
||||
<!-- 头栏 -->
|
||||
<div class="header">
|
||||
<div class="title-left">
|
||||
<div small-bg>
|
||||
<dv-decoration8 :reverse="true" style="width:28vw;height:60px;" />
|
||||
</div>
|
||||
<div small-bg>
|
||||
<dv-decoration3 style="width:250px;height:30px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line-title">
|
||||
<div text-2xl pt10>
|
||||
<div small-bg>
|
||||
<dv-decoration-11 class="custom-decoration" style="width:25vw;height:70px;">
|
||||
<div color-green font-700 bg="~ dark/0">
|
||||
<dv-decoration7 style="width:20vw;height:30px;">
|
||||
<div color-white font-400 >
|
||||
告警数据面板
|
||||
</div>
|
||||
</dv-decoration7>
|
||||
</div>
|
||||
</dv-decoration-11>
|
||||
</div>
|
||||
</div>
|
||||
<div small-bg>
|
||||
<dv-decoration5 :dur="2" style="width:25vw;height:80px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-right">
|
||||
<div small-bg class="first-row">
|
||||
<dv-decoration8 style="width:28vw;height:60px;" />
|
||||
</div>
|
||||
<div small-bg class="second-row">
|
||||
<dv-decoration3 style="width:250px;height:30px;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="background-overlay"></div>
|
||||
<div class="container">
|
||||
<!-- 头栏 -->
|
||||
<div class="header">
|
||||
<div class="title-left">
|
||||
<div small-bg>
|
||||
<dv-decoration8 :reverse="true" style="width:28vw;height:60px;" />
|
||||
</div>
|
||||
<div small-bg>
|
||||
<dv-decoration3 style="width:250px;height:30px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-section">
|
||||
<!-- 左侧区域 -->
|
||||
<div class="left-section">
|
||||
<!-- <div class="section top-left corner-style" >左上
|
||||
<div class="line-title">
|
||||
<div text-2xl pt10>
|
||||
<div small-bg>
|
||||
<dv-decoration-11 class="custom-decoration" style="width:25vw;height:70px;">
|
||||
<div color-green font-700 bg="~ dark/0">
|
||||
<dv-decoration7 style="width:20vw;height:30px;">
|
||||
<div color-white font-400>
|
||||
告警数据面板
|
||||
</div>
|
||||
</dv-decoration7>
|
||||
</div>
|
||||
</dv-decoration-11>
|
||||
</div>
|
||||
</div>
|
||||
<div small-bg>
|
||||
<dv-decoration5 :dur="2" style="width:25vw;height:80px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-right">
|
||||
<div small-bg class="first-row">
|
||||
<dv-decoration8 style="width:28vw;height:60px;" />
|
||||
</div>
|
||||
<div small-bg class="second-row">
|
||||
<dv-decoration3 style="width:250px;height:30px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-section">
|
||||
<!-- 左侧区域 -->
|
||||
<div class="left-section">
|
||||
<!-- <div class="section top-left corner-style" >左上
|
||||
<div class="section hiden"></div>
|
||||
</div>
|
||||
<div class="section middle-left corner-style">左中
|
||||
@@ -54,49 +54,49 @@
|
||||
<div class="section bottom-left corner-style">左下
|
||||
<div class="section hiden"></div>
|
||||
</div> -->
|
||||
<dv-border-box-13 title="告警数据概览（数据计算数字）" class="section top-left">
|
||||
<LeftTop />
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-13 title="点位告警数量（不同点位的数量）" class="section middle-left">不同点位告警的数量
|
||||
<LeftMiddle/>
|
||||
</dv-border-box-13>
|
||||
<!-- <dv-border-box-13 title="今日告警列表（告警详情）" class="section bottom-left ">今日告警列表（告警详情）
|
||||
<dv-border-box-13 title="告警数据概览（数据计算数字）" class="section top-left"><strong>告警数据统计</strong>
|
||||
<LeftTop />
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-13 title="点位告警数量（不同点位的数量）" class="section middle-left"><strong>告警点位数据</strong>
|
||||
<LeftMiddle />
|
||||
</dv-border-box-13>
|
||||
<!-- <dv-border-box-13 title="今日告警列表（告警详情）" class="section bottom-left ">今日告警列表（告警详情）
|
||||
|
||||
</dv-border-box-13> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中部区域 -->
|
||||
<div class="center-section">
|
||||
<dv-border-box8 class="center-top">
|
||||
<CenterTop/>
|
||||
<!-- <dv-border-box8 class="center-top-header">警戒画面</dv-border-box8>
|
||||
<!-- 中部区域 -->
|
||||
<div class="center-section">
|
||||
<dv-border-box8 class="center-top">
|
||||
<CenterTop />
|
||||
<!-- <dv-border-box8 class="center-top-header">警戒画面</dv-border-box8>
|
||||
<div class="center-top-grids">
|
||||
<div class="grid-item">栅格左上</div>
|
||||
<div class="grid-item">栅格右上</div>
|
||||
<div class="grid-item">栅格左下</div>
|
||||
<div class="grid-item">栅格右下</div>
|
||||
</div> -->
|
||||
</dv-border-box8>
|
||||
<div class="center-bottom">
|
||||
<!-- <dv-border-box-13 class="center-bottom-left">中下左</dv-border-box-13> -->
|
||||
<dv-border-box-13 class="center-bottom-right">告警数量分布情况
|
||||
<CenterBottom/>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧区域 -->
|
||||
<div class="right-section">
|
||||
<dv-border-box-13 class="section top-right corner-style">时间段告警总数分布
|
||||
<RightTop/>
|
||||
</dv-border-box-13>
|
||||
<!-- <dv-border-box-13 class="section middle-right corner-style">告警数量分布</dv-border-box-13> -->
|
||||
<dv-border-box-13 class="section bottom-right corner-style">告警种类划分
|
||||
<LeftBottom/>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</dv-border-box8>
|
||||
<div class="center-bottom">
|
||||
<!-- <dv-border-box-13 class="center-bottom-left">中下左</dv-border-box-13> -->
|
||||
<dv-border-box-13 class="center-bottom-right"><strong>告警数量分布</strong>
|
||||
<CenterBottom />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧区域 -->
|
||||
<div class="right-section">
|
||||
<dv-border-box-13 class="section top-right corner-style"><strong>告警种类数据</strong>
|
||||
<RightTop />
|
||||
</dv-border-box-13>
|
||||
<!-- <dv-border-box-13 class="section middle-right corner-style">告警数量分布</dv-border-box-13> -->
|
||||
<dv-border-box-13 class="section bottom-right corner-style"><strong>今日告警数据</strong>
|
||||
<LeftBottom />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -105,12 +105,12 @@
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
|
||||
import { BoxApi } from '@/utils/boxApi.ts';
|
||||
import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
|
||||
import LeftTop from '@/components/Max/LeftTop.vue';
|
||||
import LeftBottom from '@/components/Max/LeftBottom.vue';
|
||||
import LeftMiddle from '@/components/Max/LeftMiddle.vue';
|
||||
import RightTop from '@/components/Max/RightTop.vue';
|
||||
import CenterBottom from '@/components/Max/CenterBottom.vue';
|
||||
import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
import LeftTop from '@/components/Max/LeftTop.vue';
|
||||
import LeftBottom from '@/components/Max/LeftBottom.vue';
|
||||
import LeftMiddle from '@/components/Max/LeftMiddle.vue';
|
||||
import RightTop from '@/components/Max/RightTop.vue';
|
||||
import CenterBottom from '@/components/Max/CenterBottom.vue';
|
||||
import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
// import '/src/assets/viewListStyle.css'
|
||||
|
||||
</script>
|
||||
@@ -122,7 +122,7 @@ import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 4vh 10vw 10vh 7vw;
|
||||
padding: 4vh 10vw 10vh 9vw;
|
||||
/* background-color: rgb(121, 184, 243); */
|
||||
background-color: #001529;
|
||||
/* background-image: url('/bg05.png'); */
|
||||
@@ -133,10 +133,12 @@ import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
position: relative;
|
||||
color: black;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.custom-decoration{
|
||||
color: #70e5fa;;
|
||||
.custom-decoration {
|
||||
color: #70e5fa;
|
||||
;
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
}
|
||||
@@ -161,12 +163,13 @@ import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80vw;
|
||||
width: 82vw;
|
||||
height: 100%;
|
||||
gap: 1vh;
|
||||
position: relative;
|
||||
/* 为了在背景下显示 */
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -194,25 +197,31 @@ import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
|
||||
.title-right {
|
||||
display: flex;
|
||||
flex-direction: column; /* 设置为垂直布局 */
|
||||
flex-direction: column;
|
||||
/* 设置为垂直布局 */
|
||||
}
|
||||
|
||||
.first-row {
|
||||
display: flex;
|
||||
justify-content: flex-start; /* 第一行内容靠左 */
|
||||
justify-content: flex-start;
|
||||
/* 第一行内容靠左 */
|
||||
}
|
||||
|
||||
.second-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; /* 第二行内容靠右 */
|
||||
justify-content: flex-end;
|
||||
/* 第二行内容靠右 */
|
||||
|
||||
}
|
||||
|
||||
.main-section {
|
||||
width: 84vw;
|
||||
height: 72vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1vw;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.left-section,
|
||||
@@ -240,18 +249,20 @@ import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
/* box-shadow: 0 2px 5px rgba(221, 204, 204, 0.5); */
|
||||
}
|
||||
|
||||
.top-left{
|
||||
position: relative;
|
||||
padding: 1vh 1vw;
|
||||
.top-left {
|
||||
/* position: relative; */
|
||||
color: white;
|
||||
text-align: center;
|
||||
/* padding: 1vh 1vw; */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 20vw;
|
||||
width: 22vw;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.middle-left{
|
||||
.middle-left {
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 22vw;
|
||||
@@ -259,14 +270,14 @@ import CenterTop from '@/components/Max/CenterTop.vue';
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.top-right{
|
||||
.top-right {
|
||||
width: 22vw;
|
||||
height: 46vh;
|
||||
display: flex;
|
||||
/* padding: 1.5vh; */
|
||||
}
|
||||
|
||||
.bottom-left{
|
||||
.bottom-left {
|
||||
/* color: white; */
|
||||
/* position: relative; */
|
||||
padding-left: 0.5vw;
|
||||
|
||||
@@ -1,164 +1,62 @@
|
||||
<template>
|
||||
<div class="settings-container">
|
||||
<el-row class="popup-row">
|
||||
<el-col :sm="24" :md="24">弹窗设置</el-col>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-checkbox v-model="isInteractivePopupEnabled" @change="handleInteractiveChange" style="color: aliceblue;">
|
||||
开启交互式弹窗
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="24">
|
||||
<el-checkbox v-model="isResponsivePopupEnabled" @change="handleResponsiveChange" style="color: aliceblue;">
|
||||
开启响应式弹窗
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="channel-row">
|
||||
<Channel />
|
||||
</el-row>
|
||||
<div class="glowing-border">
|
||||
<div class="content">
|
||||
<!-- 在这里插入你想要的内容 -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, onMounted } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import type { GlobalWebSocket } from '@/utils/useGlobalWebSocket';
|
||||
import Channel from '@/components/Channel.vue';
|
||||
|
||||
const isInteractivePopupEnabled = ref(false); // 交互式弹窗状态
|
||||
const isResponsivePopupEnabled = ref(false); // 响应式弹窗状态
|
||||
const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket');
|
||||
|
||||
if (!globalWebSocket) {
|
||||
throw new Error('globalWebSocket 注入失败');
|
||||
}
|
||||
|
||||
// 初始化时加载弹窗模式状态
|
||||
onMounted(() => {
|
||||
isInteractivePopupEnabled.value = localStorage.getItem('isInteractivePopupEnabled') === 'true';
|
||||
isResponsivePopupEnabled.value = localStorage.getItem('isResponsivePopupEnabled') === 'true';
|
||||
updateWebSocketConnection();
|
||||
});
|
||||
|
||||
// const handleInteractiveChange = () => {
|
||||
// if (isInteractivePopupEnabled.value) {
|
||||
// isResponsivePopupEnabled.value = false;
|
||||
// localStorage.setItem('isResponsivePopupEnabled', 'false');
|
||||
// }
|
||||
// localStorage.setItem('isInteractivePopupEnabled', String(isInteractivePopupEnabled.value));
|
||||
// updateWebSocketConnection();
|
||||
// };
|
||||
|
||||
// const handleResponsiveChange = () => {
|
||||
// if (isResponsivePopupEnabled.value) {
|
||||
// isInteractivePopupEnabled.value = false;
|
||||
// localStorage.setItem('isInteractivePopupEnabled', 'false');
|
||||
// }
|
||||
// localStorage.setItem('isResponsivePopupEnabled', String(isResponsivePopupEnabled.value));
|
||||
// updateWebSocketConnection();
|
||||
// };
|
||||
|
||||
const handleInteractiveChange = () => {
|
||||
if (isInteractivePopupEnabled.value) {
|
||||
ElMessageBox.confirm('是否开启交互式弹窗提示？', '确认提示', {
|
||||
confirmButtonText: '是',
|
||||
cancelButtonText: '否',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
isResponsivePopupEnabled.value = false;
|
||||
localStorage.setItem('isResponsivePopupEnabled', 'false');
|
||||
|
||||
localStorage.setItem('isInteractivePopupEnabled', 'true');
|
||||
updateWebSocketConnection();
|
||||
})
|
||||
.catch(() => {
|
||||
isInteractivePopupEnabled.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessageBox.confirm('是否关闭交互式弹窗？', '确认提示', {
|
||||
confirmButtonText: '是',
|
||||
cancelButtonText: '否',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
localStorage.setItem('isInteractivePopupEnabled', 'false');
|
||||
updateWebSocketConnection();
|
||||
})
|
||||
.catch(() => {
|
||||
isInteractivePopupEnabled.value = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleResponsiveChange = () => {
|
||||
if (isResponsivePopupEnabled.value) {
|
||||
ElMessageBox.confirm('是否开启响应式弹窗提示？', '确认提示', {
|
||||
confirmButtonText: '是',
|
||||
cancelButtonText: '否',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
isInteractivePopupEnabled.value = false;
|
||||
localStorage.setItem('isInteractivePopupEnabled', 'false');
|
||||
localStorage.setItem('isResponsivePopupEnabled', 'true');
|
||||
updateWebSocketConnection();
|
||||
})
|
||||
.catch(() => {
|
||||
isResponsivePopupEnabled.value = false;
|
||||
});
|
||||
} else {
|
||||
ElMessageBox.confirm('是否关闭响应式弹窗？', '确认提示', {
|
||||
confirmButtonText: '是',
|
||||
cancelButtonText: '否',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
localStorage.setItem('isResponsivePopupEnabled', 'false');
|
||||
updateWebSocketConnection();
|
||||
})
|
||||
.catch(() => {
|
||||
isResponsivePopupEnabled.value = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 根据开关状态更新 WebSocket 连接
|
||||
const updateWebSocketConnection = () => {
|
||||
if (isInteractivePopupEnabled.value || isResponsivePopupEnabled.value) {
|
||||
globalWebSocket.connectWebSocket();
|
||||
} else {
|
||||
globalWebSocket.closeWebSocket();
|
||||
}
|
||||
};
|
||||
// 这里可以留空或者添加其他逻辑
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F1F1F1;
|
||||
/* 外层容器 */
|
||||
.glowing-border {
|
||||
width: 400px; /* 设置容器宽度 */
|
||||
height: 200px; /* 设置容器高度 */
|
||||
background-color: #1a1a1a; /* 背景颜色 */
|
||||
border-radius: 15px; /* 圆角 */
|
||||
position: relative;
|
||||
box-shadow: 0 0 20px 5px rgba(138, 43, 226, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* .glowing-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: calc(100% + 40px);
|
||||
height: calc(100% + 40px);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(45deg, rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.8));
|
||||
filter: blur(15px);
|
||||
z-index: -1;
|
||||
animation: glow 3s infinite alternate;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup-row {
|
||||
margin-bottom: 20px;
|
||||
height: 20vh;
|
||||
width: 80vw;
|
||||
padding: 1vh 1vw;
|
||||
margin: 1vh 2vw;
|
||||
background-color: #001529;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.channel-row {
|
||||
margin: 1vh 2vw;
|
||||
width: 80vw;
|
||||
height: 70vh;
|
||||
background-color: #001529;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
@@ -35,8 +35,7 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="table-part">
|
||||
<el-table v-loading="loading" :data="tableData"
|
||||
class="user-table" border max-height="700px">
|
||||
<el-table v-loading="loading" :data="tableData" class="user-table" border max-height="700px">
|
||||
<el-table-column v-if="getColumnVisibility('selection')" type="selection"
|
||||
min-width="55"></el-table-column>
|
||||
<el-table-column v-if="getColumnVisibility('id')" prop="id" label="序号"
|
||||
@@ -45,11 +44,21 @@
|
||||
min-width="180"></el-table-column>
|
||||
<el-table-column v-if="getColumnVisibility('email')" prop="email" label="邮箱"
|
||||
min-width="200"></el-table-column>
|
||||
<el-table-column v-if="getColumnVisibility('actions')" label="操作" min-width="200" align="center">
|
||||
<el-table-column v-if="getColumnVisibility('actions')" label="操作" min-width="200"
|
||||
align="center">
|
||||
<!-- 用户编辑限制 -->
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="small"
|
||||
@click="showEditUserDialog(scope.row)">编辑</el-button>
|
||||
<el-button type="text" size="small" @click="confirmDelete(scope.row)">删除</el-button>
|
||||
<el-tooltip v-if="scope.row.isLocked" content="此用户无法被编辑或删除">
|
||||
<el-button type="text" size="small" disabled>
|
||||
编辑
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-button v-else type="text" size="small" @click="showEditUserDialog(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" size="small" :disabled="scope.row.isLocked"
|
||||
@click="confirmDelete(scope.row)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -138,9 +147,10 @@ const refreshTable = async () => {
|
||||
try {
|
||||
const users = await apiInstance.getAllUsers(); // 调用getAllUsers方法获取用户
|
||||
tableData.value = users.map((user: any, index: number) => ({
|
||||
id: index + 1, // 增加id索引
|
||||
id: index + 1,
|
||||
username: user.username,
|
||||
email: user.email
|
||||
email: user.email,
|
||||
isLocked: ['csmixc','admin'].includes(user.username)
|
||||
}));
|
||||
} catch (error) {
|
||||
ElMessage.error('刷新用户列表失败');
|
||||
@@ -267,7 +277,7 @@ const handleDeleteSelected = () => {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.user-table{
|
||||
.user-table {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: auto;
|
||||
|
||||
@@ -13,16 +13,20 @@ import '@kjgl77/datav-vue3/dist/style.css';
|
||||
import mitt from 'mitt';
|
||||
import Antd from 'ant-design-vue';
|
||||
import 'ant-design-vue/dist/reset.css';
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
const globalWebSocket = useGlobalWebSocket();
|
||||
const pinia = createPinia();
|
||||
|
||||
app.provide('globalWebSocket', globalWebSocket);
|
||||
// app.provide('axios', axiosInstance);
|
||||
app.use(ElementPlus, { locale: zhCn });
|
||||
app.use(router);
|
||||
app.use(DataVVue3);
|
||||
app.use(Antd);
|
||||
app.use(pinia)
|
||||
|
||||
// 导航守卫，检查登录状态
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
59
src/stores/globalTimerStore.ts
Normal file
59
src/stores/globalTimerStore.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import {ref} from 'vue'
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
// 定义回调类型
|
||||
type TimerCallback = () => void;
|
||||
|
||||
export const useGlobalTimerStore = defineStore('globalTimer', () => {
|
||||
const intervalId = ref<number | null>(null); // 定时器 ID
|
||||
const refreshIntervalMs = ref(300000); // 默认刷新间隔（5 分钟）
|
||||
const registeredCallbacks = ref<TimerCallback[]>([]); // 注册的回调函数列表
|
||||
|
||||
// 注册回调
|
||||
const registerCallback = (callback: TimerCallback) => {
|
||||
if (typeof callback === 'function' && !registeredCallbacks.value.includes(callback)) {
|
||||
registeredCallbacks.value.push(callback);
|
||||
}
|
||||
};
|
||||
|
||||
// 注销回调
|
||||
const unregisterCallback = (callback: TimerCallback) => {
|
||||
const index = registeredCallbacks.value.indexOf(callback);
|
||||
if (index !== -1) {
|
||||
registeredCallbacks.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 启动定时器
|
||||
const startTimer = () => {
|
||||
if (!intervalId.value) {
|
||||
intervalId.value = window.setInterval(() => {
|
||||
registeredCallbacks.value.forEach((callback) => callback());
|
||||
}, refreshIntervalMs.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 停止定时器
|
||||
const stopTimer = () => {
|
||||
if (intervalId.value) {
|
||||
clearInterval(intervalId.value);
|
||||
intervalId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 设置定时器间隔
|
||||
const setRefreshInterval = (interval: number) => {
|
||||
refreshIntervalMs.value = interval;
|
||||
stopTimer();
|
||||
startTimer();
|
||||
};
|
||||
|
||||
return {
|
||||
refreshIntervalMs,
|
||||
registerCallback,
|
||||
unregisterCallback,
|
||||
startTimer,
|
||||
stopTimer,
|
||||
setRefreshInterval,
|
||||
};
|
||||
});
|
||||
@@ -19,10 +19,7 @@ class BoxApi {
|
||||
private readonly apiAllCameras: string = "/camera/cameras/get_all";
|
||||
private readonly superCamera: string = "/camera/cameras";
|
||||
private readonly superRule: string = "/rules";
|
||||
private readonly getEventByIdUrl: string = "/event/events/retrieves";
|
||||
|
||||
|
||||
|
||||
private readonly superEvents: string = "/event/events";
|
||||
|
||||
private readonly loginConfig: object = {
|
||||
headers: {
|
||||
@@ -85,7 +82,7 @@ class BoxApi {
|
||||
|
||||
try {
|
||||
const res = await this.axios.post(this.apiLogin, loginData, this.loginConfig)
|
||||
console.log(res)
|
||||
// console.log(res)
|
||||
if (res.data.err.ec === 0) {
|
||||
this.token = res.data.ret.token;
|
||||
await this.updateCodemap(this.token);
|
||||
@@ -253,7 +250,7 @@ class BoxApi {
|
||||
public async updateCamera(token: string | null = null, cameraId: number, jsonData: CameraData): Promise<any> {
|
||||
const url = `${this.superCamera}/${cameraId}`;
|
||||
// const { rules, ...cameraData } = jsonData;
|
||||
console.log("接口接收的摄像设置>>>>>>>>>>>>>>", jsonData);
|
||||
// console.log("接口接收的摄像设置>>>>>>>>>>>>>>", jsonData);
|
||||
|
||||
try {
|
||||
const newCamera = {
|
||||
@@ -300,6 +297,26 @@ class BoxApi {
|
||||
// throw error;
|
||||
// }
|
||||
// }
|
||||
public async delEvents(token: string | null = null, eventIds: number[]): Promise<{ id: number, success: boolean, message?: string }[]> {
|
||||
const results: { id: number, success: boolean, message?: string }[] = [];
|
||||
|
||||
for (const eventId of eventIds) {
|
||||
const url = `${this.superEvents}/${eventId}`;
|
||||
try {
|
||||
await this.axios.delete(url, this._authHeader(token));
|
||||
results.push({ id: eventId, success: true });
|
||||
} catch (error: any) {
|
||||
results.push({
|
||||
id: eventId,
|
||||
success: false,
|
||||
message: error.response?.data?.err?.dm || error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
|
||||
|
||||
public async updateRule(token: string | null = null, rules: RuleData[]): Promise<any[]> {
|
||||
@@ -312,7 +329,7 @@ class BoxApi {
|
||||
...rule,
|
||||
schedule: rule.schedule || {},
|
||||
};
|
||||
console.log("接口接收的规则设置>>>>>>>>>>>>>>", cleanedRule);
|
||||
// console.log("接口接收的规则设置>>>>>>>>>>>>>>", cleanedRule);
|
||||
const res = await this.axios.patch(url, cleanedRule, this._authHeader(token));
|
||||
if (res.data.err.ec === 0) {
|
||||
results.push({ id: rule.id, success: true, data: res.data.ret });
|
||||
@@ -476,23 +493,25 @@ class BoxApi {
|
||||
|
||||
public async getEventById(id: number, token: string | null = null): Promise<any> {
|
||||
try {
|
||||
const url = `${this.getEventByIdUrl}`;
|
||||
const url = `${this.superEvents}/retrieves`;
|
||||
const params = { id };
|
||||
const res = await this.axios.get(url, {
|
||||
...this._authHeader(token),
|
||||
params: params
|
||||
});
|
||||
|
||||
if (res.data.err.ec === 0) {
|
||||
// return res.data.ret.objects[0];
|
||||
if (res.data.err.ec === 0 && res.data.ret.objects.length > 0) {
|
||||
return res.data.ret.objects[0];
|
||||
} else {
|
||||
throw new Error(res.data.err.dm);
|
||||
throw new Error(res.data.err.dm || '未获取到有效数据');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`getEventById error for ID ${id}:`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// public async getOneEvent(token: string | null = null): Promise<any> {
|
||||
// try {
|
||||
// return await this.getEvents(1, 0, token);
|
||||
|
||||
@@ -1,12 +1,53 @@
|
||||
import { ref } from 'vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage, ElNotification } from 'element-plus';
|
||||
import eventBus from '@/utils/eventBus';
|
||||
import dayjs from 'dayjs';
|
||||
import { BoxApi } from '@/utils/boxApi';
|
||||
const apiInstance = new BoxApi();
|
||||
const websocket = ref<WebSocket | null>(null); // WebSocket 实例
|
||||
const isWebSocketConnected = ref(false); // WebSocket 连接状态
|
||||
let heartbeatInterval: number | null = null; // 心跳定时器
|
||||
const formatDateTime = (isoString: string): string => dayjs(isoString).format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
const apiInstance = new BoxApi();
|
||||
const algorithmMap = ref(new Map());
|
||||
|
||||
const maxVisibleNotifications = 2; // 最多同时显示的通知数量
|
||||
const visibleNotifications: Map<string, any> = new Map(); // 当前显示的通知
|
||||
const notificationQueue: any[] = []; // 等待显示的通知队列
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
webkitAudioContext?: typeof AudioContext;
|
||||
}
|
||||
}
|
||||
// let notificationSoundParams = { volume: 0.5, frequency: 440 };
|
||||
// const setNotificationSoundParams = (params: { volume: number; frequency: number }) => {
|
||||
// notificationSoundParams = params;
|
||||
// };
|
||||
|
||||
const notificationSoundParams = reactive({
|
||||
volume: 0.5,
|
||||
frequency: 440,
|
||||
isSoundEnabled: false,
|
||||
});
|
||||
|
||||
const setNotificationSoundParams = (params: { volume?: number; frequency?: number; isSoundEnabled?: boolean }) => {
|
||||
Object.assign(notificationSoundParams, params);
|
||||
|
||||
// 更新 localStorage
|
||||
if (params.volume !== undefined) localStorage.setItem('volume', String(notificationSoundParams.volume));
|
||||
if (params.frequency !== undefined) localStorage.setItem('frequency', String(notificationSoundParams.frequency));
|
||||
if (params.isSoundEnabled !== undefined) localStorage.setItem('isSoundEnabled', String(notificationSoundParams.isSoundEnabled));
|
||||
};
|
||||
|
||||
// 初始化：从 localStorage 加载参数
|
||||
const initializeNotificationSoundParams = () => {
|
||||
notificationSoundParams.volume = parseFloat(localStorage.getItem('volume') || '0.5');
|
||||
notificationSoundParams.frequency = parseFloat(localStorage.getItem('frequency') || '440');
|
||||
notificationSoundParams.isSoundEnabled = localStorage.getItem('isSoundEnabled') === 'true';
|
||||
};
|
||||
initializeNotificationSoundParams();
|
||||
|
||||
// 加载算法映射表
|
||||
const loadAlgorithms = async () => {
|
||||
const token = localStorage.getItem('alertToken');
|
||||
@@ -20,17 +61,14 @@ const loadAlgorithms = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const websocket = ref<WebSocket | null>(null); // WebSocket 实例
|
||||
const isWebSocketConnected = ref(false); // WebSocket 连接状态
|
||||
let heartbeatInterval: number | null = null; // 心跳定时器
|
||||
const formatDateTime = (isoString: string): string => dayjs(isoString).format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
// 连接 WebSocket
|
||||
const connectWebSocket = () => {
|
||||
const connectWebSocket = async () => {
|
||||
const rememberedAddress = localStorage.getItem('rememberedAddress'); // 获取存储的主机地址
|
||||
if (rememberedAddress) {
|
||||
websocket.value = new WebSocket(`ws://${rememberedAddress}:8080/ws/event`);
|
||||
// websocket.value = new WebSocket(`ws://192.168.28.33:8080/ws/event`);
|
||||
loadAlgorithms();
|
||||
// websocket.value = new WebSocket(`ws://${rememberedAddress}:8080/ws/event`);
|
||||
websocket.value = new WebSocket(`ws://172.19.7.9:8080/ws/event`);
|
||||
await loadAlgorithms();
|
||||
websocket.value.onopen = () => {
|
||||
ElMessage.success('全局 WebSocket 连接成功');
|
||||
isWebSocketConnected.value = true;
|
||||
@@ -38,6 +76,17 @@ const connectWebSocket = () => {
|
||||
};
|
||||
websocket.value.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data); // 解析收到的数据
|
||||
|
||||
const isInteractive = localStorage.getItem('isInteractivePopupEnabled') === 'true';
|
||||
const isResponsive = localStorage.getItem('isResponsivePopupEnabled') === 'true';
|
||||
if (!isInteractive && !isResponsive) {
|
||||
return; // 弹窗关闭，直接返回
|
||||
}
|
||||
|
||||
let num = 0;
|
||||
num += 1;
|
||||
// console.log(`${new Date().toISOString()}收到新的第${num}弹窗信息:`, data);
|
||||
playNotificationSound();
|
||||
handlePopupNotification(data); // 根据模式处理弹窗通知
|
||||
};
|
||||
websocket.value.onclose = handleClose; // 处理连接关闭
|
||||
@@ -47,6 +96,33 @@ const connectWebSocket = () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const playNotificationSound = () => {
|
||||
// if (!isWebSocketConnected.value) return;
|
||||
if (!notificationSoundParams.isSoundEnabled) return;
|
||||
try {
|
||||
const audioContext = new (window.AudioContext || window.webkitAudioContext!)();
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
oscillator.type = 'triangle';
|
||||
oscillator.frequency.setValueAtTime(notificationSoundParams.frequency, audioContext.currentTime);
|
||||
gainNode.gain.setValueAtTime(notificationSoundParams.volume, audioContext.currentTime);
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
oscillator.start();
|
||||
setTimeout(() => {
|
||||
oscillator.stop();
|
||||
audioContext.close();
|
||||
}, 350); // 持续播放 200 毫秒
|
||||
} catch (error) {
|
||||
console.error('播放提示音时出错:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭 WebSocket
|
||||
const closeWebSocket = () => {
|
||||
if (websocket.value) {
|
||||
@@ -90,30 +166,92 @@ const handleError = () => {
|
||||
stopHeartbeat(); // 停止心跳
|
||||
};
|
||||
|
||||
// 显示通知
|
||||
const showNotification = (notification: any) => {
|
||||
const id = `${Date.now()}-${Math.random()}`; // 唯一 ID
|
||||
notification.id = id;
|
||||
|
||||
if (visibleNotifications.size < maxVisibleNotifications) {
|
||||
// 如果未达到最大显示数量，直接显示
|
||||
const elNotification = ElNotification({
|
||||
...notification,
|
||||
onClose: () => {
|
||||
// 从显示列表中移除
|
||||
visibleNotifications.delete(id);
|
||||
|
||||
// 显示下一条队列中的通知
|
||||
if (notificationQueue.length > 0) {
|
||||
showNotification(notificationQueue.shift());
|
||||
}
|
||||
|
||||
// 调用用户定义的关闭回调（如果有）
|
||||
notification.onClose?.();
|
||||
},
|
||||
});
|
||||
|
||||
visibleNotifications.set(id, elNotification);
|
||||
} else {
|
||||
// 如果达到最大显示数量，存入队列
|
||||
notificationQueue.push(notification);
|
||||
}
|
||||
};
|
||||
|
||||
const loadNextNotification = () => {
|
||||
// 清空当前所有显示的通知
|
||||
visibleNotifications.forEach((notif) => notif.close());
|
||||
visibleNotifications.clear();
|
||||
|
||||
// 从队列中加载下一条通知
|
||||
if (notificationQueue.length > 0) {
|
||||
const nextNotification = notificationQueue.shift();
|
||||
if (nextNotification) {
|
||||
showNotification(nextNotification);
|
||||
}
|
||||
} else {
|
||||
// console.log('通知队列为空');
|
||||
}
|
||||
};
|
||||
// 手动清空所有通知
|
||||
const clearAllNotifications = () => {
|
||||
visibleNotifications.forEach((notif) => notif.close());
|
||||
visibleNotifications.clear();
|
||||
notificationQueue.length = 0;
|
||||
};
|
||||
|
||||
|
||||
const seenNotificationIds = new Set();
|
||||
// 根据弹窗模式处理通知
|
||||
const handlePopupNotification = (data: any) => {
|
||||
const isInteractive = localStorage.getItem('isInteractivePopupEnabled') === 'true'; // 是否为交互式弹窗
|
||||
const isResponsive = localStorage.getItem('isResponsivePopupEnabled') === 'true'; // 是否为响应式弹窗
|
||||
|
||||
if (seenNotificationIds.has(data.id)) return;
|
||||
seenNotificationIds.add(data.id);
|
||||
setTimeout(() => seenNotificationIds.delete(data.id), 30000);
|
||||
|
||||
|
||||
if (isResponsive) {
|
||||
// 响应式模式：直接显示对话框
|
||||
// console.log('handlePopupNotification triggered:', data);
|
||||
eventBus.emit('showDialog', data);
|
||||
} else if (isInteractive) {
|
||||
|
||||
const formattedTime = formatDateTime(data.started_at);
|
||||
ElNotification({
|
||||
showNotification({
|
||||
title: '新告警',
|
||||
message: `
|
||||
<div style="max-height: 200px; overflow-y: auto;">
|
||||
<p><strong>告警编号：</strong>${data.id || '未知'}</p>
|
||||
<p><strong>告警点位：</strong>${data.camera?.name|| '未知'}</p>
|
||||
<p><strong>告警点位：</strong>${data.camera?.name || '未知'}</p>
|
||||
<p><strong>告警类型：</strong>${algorithmMap.value.get(data.types) || '未知'}</p>
|
||||
<p><strong>告警时间：</strong>${formattedTime || '未知'}</p>
|
||||
</div>
|
||||
`,
|
||||
dangerouslyUseHTMLString: true,
|
||||
duration: 5000,
|
||||
duration: 10000,
|
||||
customClass: 'custom-notification',
|
||||
position: 'bottom-right',
|
||||
type: 'info',
|
||||
onClick: () => {
|
||||
eventBus.emit('showDialog', data); // 点击通知触发对话框
|
||||
}
|
||||
@@ -126,10 +264,22 @@ export interface GlobalWebSocket {
|
||||
connectWebSocket: () => void; // 连接 WebSocket
|
||||
closeWebSocket: () => void; // 关闭 WebSocket
|
||||
isWebSocketConnected: typeof isWebSocketConnected; // WebSocket 连接状态
|
||||
loadNextNotification: () => void; // 加载下一条通知
|
||||
clearAllNotifications: () => void; // 清空所有通知
|
||||
setNotificationSoundParams: (params: { volume?: number; frequency?: number; isSoundEnabled?: boolean }) => void;
|
||||
notificationSoundParams: {
|
||||
volume: number;
|
||||
frequency: number;
|
||||
isSoundEnabled: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export const useGlobalWebSocket = (): GlobalWebSocket => ({
|
||||
connectWebSocket,
|
||||
closeWebSocket,
|
||||
isWebSocketConnected,
|
||||
loadNextNotification, // 导出加载下一条通知的方法
|
||||
clearAllNotifications, // 导出清空所有通知的方法
|
||||
notificationSoundParams,
|
||||
setNotificationSoundParams,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user