diff --git a/src/assets/images/videoSurveillance/page-icon.png b/src/assets/images/videoSurveillance/page-icon.png new file mode 100644 index 00000000..b6ce7ec0 Binary files /dev/null and b/src/assets/images/videoSurveillance/page-icon.png differ diff --git a/src/assets/images/videoSurveillance/page-icon_active.png b/src/assets/images/videoSurveillance/page-icon_active.png new file mode 100644 index 00000000..51ee3563 Binary files /dev/null and b/src/assets/images/videoSurveillance/page-icon_active.png differ diff --git a/src/assets/images/videoSurveillance/page-icon_down.png b/src/assets/images/videoSurveillance/page-icon_down.png new file mode 100644 index 00000000..f3b830d3 Binary files /dev/null and b/src/assets/images/videoSurveillance/page-icon_down.png differ diff --git a/src/assets/images/videoSurveillance/page-icon_up.png b/src/assets/images/videoSurveillance/page-icon_up.png new file mode 100644 index 00000000..e51ff327 Binary files /dev/null and b/src/assets/images/videoSurveillance/page-icon_up.png differ diff --git a/src/components/videoModule/isc_plugin/isc_plugin.vue b/src/components/videoModule/isc_plugin/isc_plugin.vue index 92137eca..2b5a207d 100644 --- a/src/components/videoModule/isc_plugin/isc_plugin.vue +++ b/src/components/videoModule/isc_plugin/isc_plugin.vue @@ -1,15 +1,25 @@ \ No newline at end of file diff --git a/src/components/videoModule/isc_plugin/isc_plugin_h5.vue b/src/components/videoModule/isc_plugin/isc_plugin_h5.vue index c8021872..db4ba1b6 100644 --- a/src/components/videoModule/isc_plugin/isc_plugin_h5.vue +++ b/src/components/videoModule/isc_plugin/isc_plugin_h5.vue @@ -1,5 +1,5 @@ @@ -111,7 +119,7 @@ import reloadImg from "@/assets/images/iscImage/reload.png"; import moment from "moment"; export default { name: "hik", - props: ["devList", "type", "isIframe", "shrinkCloseFlag"], + props: ["devList", "type", "isIframe", "shrinkCloseFlag", "devListAll"], data() { return { // 监控点编码 @@ -135,6 +143,8 @@ export default { isFullScreen: false, isFullScreenAll: false, randomNumber: "", + pageNo: 1, + pageBtn: false, }; }, watch: { @@ -207,6 +217,11 @@ export default { this.onTwoSubmit(this.numCount); }, }, + created() { + if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) { + this.pageBtn = true; + } + }, mounted() { this.devH5List = this.devList.map((item, index) => ({ ...item, @@ -217,19 +232,44 @@ export default { this.initPlayer(); }, methods: { + onPageClick(type) { + if(type == "up") { + if(this.pageNo <= 1) return; + this.pageNo -= 1; + } else if(type == "next") { + console.log("pageNo", this.pageSizeFlag); + if(this.pageNo >= this.pageSizeFlag) return; + this.pageNo += 1; + } + const dataList = this.pageList; + this.devH5List = dataList.map((item, index) => ({ + ...item, + eIndex: index, + })); + this.devH5List.forEach((item) => { + this.play(item,item.eIndex); + }) + console.log("dataList", dataList, this.pageNo); + }, // 关闭所有视频 stopAllPlay() { + // 调用播放器API停止所有实时播放 this.player.JS_StopRealPlayAll().then( () => { + // 重置播放速率为0 this.playback.rate = 0; console.log("stopAllPlay success"); + // 遍历所有设备,清理对应的DOM元素 this.devH5List.forEach((item, index) => { + // 查找视频播放容器 const wnd = document.querySelector(`#player #player-container-${index}`); if (wnd) { + // 移除控制栏的显示样式 const controls = document.getElementById(`controls-${index + 1}`); if (controls) { controls.classList.remove("video-controls_flex"); } + // 查找并移除播放器中的图片元素(封面或占位图) const findIndex = Array.from(wnd.childNodes).findIndex( (item) => item.localName == "img" || item.className == "classImg" ); @@ -238,6 +278,7 @@ export default { } } }); + // 清空设备列表 this.devH5List = []; }, (e) => { @@ -775,6 +816,15 @@ export default { return find ? find.videoName : ""; }; }, + pageList() { + const pageSize = this.numCount * this.numCount; + return this.devListAll.slice((this.pageNo - 1) * pageSize, this.pageNo * pageSize) + }, + pageSizeFlag() { + console.log("aassss", this.devListAll.length, (this.numCount * this.numCount)) + + return this.devListAll.length / (this.numCount * this.numCount) + } }, }; @@ -784,6 +834,54 @@ export default { }