From 9f4609f4822222632ab2fcf85d58b0b4b8459160 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 26 五月 2025 17:30:33 +0800
Subject: [PATCH] fix:修改播放⑦
---
/dev/null | 118 -------------
package-lock.json | 281 ++++--------------------------
src/components/VideoPlayer/VideoPlayer.vue | 18 +
package.json | 2
src/views/screen/flow/graphic/index.vue | 83 ++------
5 files changed, 81 insertions(+), 421 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index afe1a1c..5f2d21b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,9 +15,9 @@
"axios": "0.27.2",
"echarts": "^5.5.1",
"element-plus": "^2.5.0",
- "ezuikit-js": "^8.1.9-beta.3",
"file-saver": "2.0.5",
"fuse.js": "6.6.2",
+ "html2canvas": "^1.4.1",
"js-cookie": "3.0.5",
"jsencrypt": "3.3.2",
"moment": "^2.30.1",
@@ -445,67 +445,6 @@
"node": ">=12"
}
},
- "node_modules/@ezuikit/player-ezopen": {
- "version": "8.1.9-beta.3",
- "resolved": "https://registry.npmjs.org/@ezuikit/player-ezopen/-/player-ezopen-8.1.9-beta.3.tgz",
- "integrity": "sha512-4YEA/Otp/lW8iiCOhgajhpkrbdFePUN3oMnSumrvYvDfiIMAKJLAiAmCCiXieoJ8hIzrCeXKjYUPgY5/HALHdg==",
- "dependencies": {
- "@ezuikit/player-plugin-record": "8.1.8-beta.3",
- "@ezuikit/utils-i18n": "^1.0.1",
- "@ezuikit/utils-logger": "^1.0.1",
- "@ezuikit/utils-service": "1.0.1",
- "@ezuikit/utils-tools": "^1.0.4",
- "@juggle/resize-observer": "^3.4.0",
- "dayjs": "^1.11.10",
- "deepmerge": "^4.3.1",
- "eventemitter3": "^5.0.1",
- "jquery": "^3.7.1",
- "screenfull": "^5.2.0",
- "ua-parser-js": "1.0.37"
- }
- },
- "node_modules/@ezuikit/player-ezopen/node_modules/eventemitter3": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
- "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
- },
- "node_modules/@ezuikit/player-plugin-record": {
- "version": "8.1.8-beta.3",
- "resolved": "https://registry.npmjs.org/@ezuikit/player-plugin-record/-/player-plugin-record-8.1.8-beta.3.tgz",
- "integrity": "sha512-YcQ5MR8zyg8b+o/ktr6r+YCXkiEX43HVmzVkfJsERgaokaHzoNIpOomEl51j/13gcemjSXuN6i1apCRC2v32pg=="
- },
- "node_modules/@ezuikit/utils-collect": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/@ezuikit/utils-collect/-/utils-collect-0.1.1.tgz",
- "integrity": "sha512-BgEOnTtAq8rQRBAKv5rLXbQLGOnfOZ6NS0QTmiviey80JbMJlxrLiqmjL5lxvkm4JtCcXCtSgPA4tskQKN4eDA=="
- },
- "node_modules/@ezuikit/utils-i18n": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/@ezuikit/utils-i18n/-/utils-i18n-1.0.1.tgz",
- "integrity": "sha512-uUjN3ADHV2ZG4QznuA7FB89/ck8AGV4qS8hm/sqeSA6/ie4ryYw8MS4wIv71WgPBIgIVDfASuEapyLOwq7R2aQ==",
- "dependencies": {
- "i18n-js": "^4.3.2"
- }
- },
- "node_modules/@ezuikit/utils-logger": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/@ezuikit/utils-logger/-/utils-logger-1.0.1.tgz",
- "integrity": "sha512-qak0MXh4vWZCji3aSCfHdWR3EbZCaqS0iMT8/QWuWPRr0vDmTRMP3kFOAw1MuMraR0ocjPBE2PaTEmUuwVqaAw=="
- },
- "node_modules/@ezuikit/utils-service": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/@ezuikit/utils-service/-/utils-service-1.0.1.tgz",
- "integrity": "sha512-iNjYuU7AScBJxvKBM9PjiGI2y64QJNPT/H1Fy/Y7ZIAlw4DO//TP+x50qCho+i+EOUpWLtOqBQvtRb7a0O4X4Q==",
- "dependencies": {
- "@ezuikit/utils-tools": "^1.0.1",
- "dayjs": "^1.11.10"
- }
- },
- "node_modules/@ezuikit/utils-tools": {
- "version": "1.0.4",
- "resolved": "https://registry.npmjs.org/@ezuikit/utils-tools/-/utils-tools-1.0.4.tgz",
- "integrity": "sha512-w+LZ03qowSqrSqDnuONKPpmEn0cuCaF2pkgHL1YicR0of/ZelCho5X8cy5TXQe7UsrQkIM2M7vVennv5KnAdpQ=="
- },
"node_modules/@floating-ui/core": {
"version": "1.6.4",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
@@ -532,11 +471,6 @@
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
- },
- "node_modules/@juggle/resize-observer": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
- "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
@@ -1079,11 +1013,6 @@
}
}
},
- "node_modules/abortcontroller-polyfill": {
- "version": "1.7.8",
- "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.8.tgz",
- "integrity": "sha512-9f1iZ2uWh92VcrU9Y8x+LdM4DLj75VE0MJB8zuF1iUnroEptStw+DQ8EQPMUdfe5k+PkB1uUfDQfWbhstH8LrQ=="
- },
"node_modules/acorn": {
"version": "8.12.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1295,19 +1224,19 @@
"node": ">=0.10.0"
}
},
+ "node_modules/base64-arraybuffer": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+ "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+ "engines": {
+ "node": ">= 0.6.0"
+ }
+ },
"node_modules/big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true,
- "engines": {
- "node": "*"
- }
- },
- "node_modules/bignumber.js": {
- "version": "9.2.1",
- "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.2.1.tgz",
- "integrity": "sha512-+NzaKgOUvInq9TIUZ1+DRspzf/HApkCwD4btfuasFTdrfnOxqx853TgDpMolp+uv4RpRp7bPcEU2zKr9+fRmyw==",
"engines": {
"node": "*"
}
@@ -1589,6 +1518,14 @@
"node": ">= 0.10"
}
},
+ "node_modules/css-line-break": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+ "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+ "dependencies": {
+ "utrie": "^1.0.2"
+ }
+ },
"node_modules/css-select": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -1767,11 +1704,6 @@
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz",
"integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg=="
},
- "node_modules/debounce-promise": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
- "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
- },
"node_modules/debug": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
@@ -1815,14 +1747,6 @@
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
- }
- },
- "node_modules/deepmerge": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
- "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
- "engines": {
- "node": ">=0.10.0"
}
},
"node_modules/define-data-property": {
@@ -1876,11 +1800,6 @@
"engines": {
"node": ">=0.4.0"
}
- },
- "node_modules/delegate": {
- "version": "3.2.0",
- "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
- "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"node_modules/dom-serializer": {
"version": "0.2.2",
@@ -2365,28 +2284,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/ezuikit-js": {
- "version": "8.1.9-beta.3",
- "resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-8.1.9-beta.3.tgz",
- "integrity": "sha512-BtpkKOafxRmZroVcol5yOpASVHi1ddUy7DGzFb/TLkoh3VER7xEOzJepiK0O7dOsXAMmxXwooMLO+DIfMXFXnw==",
- "dependencies": {
- "@ezuikit/player-ezopen": "8.1.9-beta.3",
- "@ezuikit/utils-collect": "0.1.1",
- "@ezuikit/utils-i18n": "^1.0.1",
- "@ezuikit/utils-logger": "^1.0.1",
- "@ezuikit/utils-tools": "^1.0.4",
- "@juggle/resize-observer": "^3.4.0",
- "abortcontroller-polyfill": "^1.7.5",
- "debounce-promise": "^3.1.2",
- "deepmerge": "^4.3.1",
- "delegate": "3.2.0",
- "formdata-polyfill": "^4.0.10",
- "jquery": "^3.3.1",
- "lodash-es": "^4.17.21",
- "screenfull": "^5.2.0",
- "uuid": "^8.3.0"
- }
- },
"node_modules/fast-diff": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
@@ -2415,28 +2312,6 @@
"dev": true,
"dependencies": {
"reusify": "^1.0.4"
- }
- },
- "node_modules/fetch-blob": {
- "version": "3.2.0",
- "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
- "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/jimmywarting"
- },
- {
- "type": "paypal",
- "url": "https://paypal.me/jimmywarting"
- }
- ],
- "dependencies": {
- "node-domexception": "^1.0.0",
- "web-streams-polyfill": "^3.0.3"
- },
- "engines": {
- "node": "^12.20 || >= 14.13"
}
},
"node_modules/file-saver": {
@@ -2504,17 +2379,6 @@
},
"engines": {
"node": ">= 6"
- }
- },
- "node_modules/formdata-polyfill": {
- "version": "4.0.10",
- "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
- "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
- "dependencies": {
- "fetch-blob": "^3.1.2"
- },
- "engines": {
- "node": ">=12.20.0"
}
},
"node_modules/fragment-cache": {
@@ -2857,6 +2721,18 @@
"he": "bin/he"
}
},
+ "node_modules/html2canvas": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+ "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+ "dependencies": {
+ "css-line-break": "^2.1.0",
+ "text-segmentation": "^1.0.3"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ }
+ },
"node_modules/htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -2869,16 +2745,6 @@
"entities": "^1.1.1",
"inherits": "^2.0.1",
"readable-stream": "^3.1.1"
- }
- },
- "node_modules/i18n-js": {
- "version": "4.5.1",
- "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.5.1.tgz",
- "integrity": "sha512-n7jojFj1WC0tztgr0I8jqTXuIlY1xNzXnC3mjKX/YjJhimdM+jXM8vOmn9d3xQFNC6qDHJ4ovhdrGXrRXLIGkA==",
- "dependencies": {
- "bignumber.js": "*",
- "lodash": "*",
- "make-plural": "*"
}
},
"node_modules/image-size": {
@@ -3284,11 +3150,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/jquery": {
- "version": "3.7.1",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
- "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
- },
"node_modules/js-base64": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -3414,11 +3275,6 @@
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
}
- },
- "node_modules/make-plural": {
- "version": "7.4.0",
- "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.4.0.tgz",
- "integrity": "sha512-4/gC9KVNTV6pvYg2gFeQYTW3mWaoJt7WZE5vrp1KnQDgW92JtYZnzmZT81oj/dUTqAIu0ufI2x3dkgu3bB1tYg=="
},
"node_modules/map-cache": {
"version": "0.2.2",
@@ -3673,24 +3529,6 @@
"dev": true,
"engines": {
"node": ">=0.10.0"
- }
- },
- "node_modules/node-domexception": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
- "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/jimmywarting"
- },
- {
- "type": "github",
- "url": "https://paypal.me/jimmywarting"
- }
- ],
- "engines": {
- "node": ">=10.5.0"
}
},
"node_modules/normalize-path": {
@@ -4488,17 +4326,6 @@
"node": ">=14.0.0"
}
},
- "node_modules/screenfull": {
- "version": "5.2.0",
- "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
- "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
- "engines": {
- "node": ">=0.10.0"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/scule": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -5149,6 +4976,14 @@
"node": ">=10.13.0"
}
},
+ "node_modules/text-segmentation": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+ "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+ "dependencies": {
+ "utrie": "^1.0.2"
+ }
+ },
"node_modules/to-object-path": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -5372,28 +5207,6 @@
},
"engines": {
"node": ">=14.17"
- }
- },
- "node_modules/ua-parser-js": {
- "version": "1.0.37",
- "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
- "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/ua-parser-js"
- },
- {
- "type": "paypal",
- "url": "https://paypal.me/faisalman"
- },
- {
- "type": "github",
- "url": "https://github.com/sponsors/faisalman"
- }
- ],
- "engines": {
- "node": "*"
}
},
"node_modules/ufo": {
@@ -5628,12 +5441,12 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true
},
- "node_modules/uuid": {
- "version": "8.3.2",
- "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
- "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
- "bin": {
- "uuid": "dist/bin/uuid"
+ "node_modules/utrie": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+ "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+ "dependencies": {
+ "base64-arraybuffer": "^1.0.2"
}
},
"node_modules/vary": {
@@ -5776,14 +5589,6 @@
},
"peerDependencies": {
"vue": "^3.2.0"
- }
- },
- "node_modules/web-streams-polyfill": {
- "version": "3.3.3",
- "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
- "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
- "engines": {
- "node": ">= 8"
}
},
"node_modules/webpack-sources": {
diff --git a/package.json b/package.json
index 4e1884a..b323d65 100644
--- a/package.json
+++ b/package.json
@@ -22,9 +22,9 @@
"axios": "0.27.2",
"echarts": "^5.5.1",
"element-plus": "^2.5.0",
- "ezuikit-js": "^8.1.9-beta.3",
"file-saver": "2.0.5",
"fuse.js": "6.6.2",
+ "html2canvas": "^1.4.1",
"js-cookie": "3.0.5",
"jsencrypt": "3.3.2",
"moment": "^2.30.1",
diff --git a/src/components/VideoPlayer/VideoPlayer.vue b/src/components/VideoPlayer/VideoPlayer.vue
index ee5f2a8..084aca4 100644
--- a/src/components/VideoPlayer/VideoPlayer.vue
+++ b/src/components/VideoPlayer/VideoPlayer.vue
@@ -62,7 +62,7 @@
}
const handleEnter = () => {
- if(!showPlay.value && !showLoading.value) {
+ if(props.item.deviceId && props.item.channelId && !showPlay.value && !showLoading.value) {
showPause.value = true;
}
}
@@ -92,10 +92,17 @@
audio: true,
recorder: false,
},
- controlAutoHide: true,
- forceNoOffscreen: true,
+ controlAutoHide: false,
+ forceNoOffscreen: false,
+ hasAudio: false,
+ heartTimeout: 5,
+ heartTimeoutReplay:true,
+ heartTimeoutReplayTimes: 3,
+ hiddenAutoPause: false,
isNotMute: false,
- heartTimeoutReplay:false,
+ hotKey: true,
+ isFlv: false,
+ recordType: "mp4",
})
);
}
@@ -107,6 +114,9 @@
if(props.autoPlay && props.item.deviceId && props.item.channelId) {
handlePlayer()
}
+ if(!props.item.deviceId || !props.item.channelId) {
+ showPlay.value = false;
+ }
};
onMounted(() => {
diff --git a/src/views/screen/flow/graphic/components/FullScreenVideo.vue b/src/views/screen/flow/graphic/components/FullScreenVideo.vue
deleted file mode 100644
index 3e28545..0000000
--- a/src/views/screen/flow/graphic/components/FullScreenVideo.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script setup>
-import EZUIKit from 'ezuikit-js';
-
-const props = defineProps({
- data: {
- type: Object,
- default: {},
- }
-})
-
-const emit = defineEmits(['close'])
-
-let ezKitEl = ''
-let ezKitId = 'ezid'
-
-const closeScreen = () => {
- ezKitEl.stop(); //停止播放视频
- emit('close')
-}
-
-onMounted(() => {
- ezKitEl = new EZUIKit.EZUIKitPlayer({
- id: ezKitId,
- url: props.data.url,
- accessToken: props.data.accessToken,
- })
-})
-
-</script>
-
-<template>
- <div class="modal">
- <div class="vb" :id="ezKitId"></div>
- <div class="close" @click="closeScreen"><el-icon><CircleClose /></el-icon></div>
- <div class="mask">
- <div class="list">
- <div class="item">
- <div class="name">水位:</div>
- <div class="val"><span>{{props.data.waterLevel}}</span>m</div>
- </div>
- <div class="item">
- <div class="name">流速:</div>
- <div class="val"><span>{{props.data.flowVelocity}}</span>m/s</div>
- </div>
- <div class="item">
- <div class="name">瞬时流量:</div>
- <div class="val"><span>{{props.data.newFlow}}</span>m³/h</div>
- </div>
- <div class="item">
- <div class="name">累计流量:</div>
- <div class="val"><span>{{props.data.totalFlow}}</span>m³</div>
- </div>
- <div class="item">
- <div class="name">水面宽度:</div>
- <div class="val"><span>{{props.data.waterWidth}}</span>m</div>
- </div>
- <div class="item">
- <div class="name">过水面积:</div>
- <div class="val"><span>{{props.data.waterArea}}</span>m³</div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<style scoped lang="scss">
-.modal{
- position: absolute;
- left: 2%;
- top: 2%;
- width: 96%;
- height: 96%;
- z-index: 100;
- .vb{
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
- .close{
- position: absolute;
- right: 1%;
- top: 1%;
- font-size: 2rem;
- color: #fff;
- }
- .mask{
- position: absolute;
- left: 5%;
- bottom: 5%;
- width: 15%;
- background-color: rgba(0, 0, 0, 0.5);
- color: #fff;
- padding: 1rem;
- border-radius: 1rem;
- .item{
- display: flex;
- align-items: center;
- padding: 0.5rem 0;
- .name{
- width: 6rem;
- }
- .val{
- display: flex;
- align-items: center;
- span{
- display: inline-block;
- width: 6rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/screen/flow/graphic/index.vue b/src/views/screen/flow/graphic/index.vue
index 621d13b..8fce991 100644
--- a/src/views/screen/flow/graphic/index.vue
+++ b/src/views/screen/flow/graphic/index.vue
@@ -1,11 +1,11 @@
<script setup>
-import {onMounted, ref, onUnmounted} from "vue";
+import {onMounted, ref} from "vue";
import {getUserType} from '@/utils/auth.js'
import {getFlowPointList} from '@/api/screen/index'
import {getFlowVideoData} from '@/api/screen/graphic/index.js'
-import EZUIKit from 'ezuikit-js';
import {useRoute, useRouter} from "vue-router";
-import FullScreenVideo from "./components/FullScreenVideo.vue";
+import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
+import html2canvas from 'html2canvas';
const route = useRoute();
const router = useRouter();
@@ -14,26 +14,28 @@
const userType = ref(getUserType())
const searchVal = ref('')
const playerData = ref([])
-const hasFullScreen = ref(false)
-const fullIndex = ref()
-let ezKitList = []; //视频组件实例数组
-let ezKitId = []; //视频盒子id数组
-let timer = null;
// 全屏弹窗
const handleFullScreen = (index) => {
- fullIndex.value = index;
- hasFullScreen.value = true;
-}
-
-// 关闭全屏弹窗
-const closeFullScreen = () => {
- hasFullScreen.value = false;
+ const dom = document.getElementById(`player${index}`)
+ dom.requestFullscreen()
}
// 抓拍
-const handleSnap = (index) => {
- ezKitList[index].capturePicture(`capture-${new Date().getTime()}`, 0.8);
+const handleSnap = async (index) => {
+ const dom = document.getElementById(`player${index}`)
+ const canvas = await html2canvas(dom, {
+ backgroundColor: null, // 透明背景
+ scale: 2, // 提高分辨率
+ logging: false, // 关闭日志
+ useCORS: true, // 允许跨域图片
+ allowTaint: true, // 允许污染图片
+ });
+ const imgUrl = canvas.toDataURL('image/png');
+ const adom = document.createElement("a");
+ adom.download = `截图_${new Date().getTime()}.png`
+ adom.href = imgUrl;
+ adom.click()
}
// 获取监控点菜单
@@ -45,63 +47,27 @@
// 选择菜单
const handleSelect = (id) => {
- ezKitList = []
- ezKitId = []
playerData.value = []
- clearInterval(timer)
getPlayerList(id)
}
// 搜索
const handleSearch = () => {
- ezKitList = []
- ezKitId = []
playerData.value = []
- clearInterval(timer)
getPlayerList()
}
// 获取监控点
const getPlayerList = async (id) => {
getFlowVideoData({pointId: id, pointName: searchVal.value}).then(async res => {
- res.data.forEach((item, index) => {
- ezKitId[index] = `ezuikitPlayer${index}`
- })
playerData.value = res.data
- await nextTick()
-
- // 渲染视频
- res.data.forEach((item, index) => {
- ezKitList[index] = new EZUIKit.EZUIKitPlayer({
- id: ezKitId[index],
- url: item.url,
- accessToken: item.accessToken,
- })
- })
})
-
- // 挂载定时器, 只获取数据，不重新渲染视频节点
- timer = setInterval(() => {
- getFlowVideoData({pointId: id, pointName: searchVal.value}).then(res => {
- playerData.value = res.data
- })
- }, 10000)
}
onMounted(() => {
getMoitorList()
getPlayerList(route.params.id || '')
-})
-
-onUnmounted(() => {
- if (timer) {
- clearInterval(timer)
- }
- // 停止播放
- ezKitList?.forEach(item => {
- item.stop();
- })
})
</script>
@@ -149,7 +115,9 @@
<div class="monitor-list">
<div class="item" v-for="(item, index) in playerData" :key="index">
<div class="title">{{ item.pointName }}</div>
- <div class="videoBox" :id="ezKitId[index]"></div>
+ <div class="item-video" :id="`player${index}`">
+ <VideoPlayer :item="item" :autoPlay="true" />
+ </div>
<div class="info">
<div class="info-list">
<div class="info-item">
@@ -197,11 +165,6 @@
</div>
</div>
</div>
- <FullScreenVideo
- v-if="hasFullScreen"
- :data="playerData[fullIndex]"
- @close="closeFullScreen"
- />
</div>
</template>
@@ -301,7 +264,7 @@
color: #fff;
}
- .videoBox {
+ .item-video {
width: 100%;
height: 60%;
background-color: #000;
--
Gitblit v1.9.3