From fc63a6ac5737a8ece7a519031dd253782f62ee83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Fri, 9 May 2025 15:41:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E6=84=9F=E3=80=81=E6=99=BA=E5=BA=93-?=
=?UTF-8?q?=E6=97=B6=E9=97=B4=E7=BA=BF-=E6=B5=B7=E5=BA=B7=E8=A7=86?=
=?UTF-8?q?=E9=A2=91=E5=8F=AF=E4=BB=A5=E9=9A=8F=E7=9D=80=E6=BB=9A=E5=8A=A8?=
=?UTF-8?q?=E6=9D=A1=E7=9A=84=E6=BB=9A=E5=8A=A8=E9=9A=90=E8=97=8F=E5=92=8C?=
=?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Zhigan/ZhiGan_ModalTimeLine/index.vue | 109 +++++++++++-
.../ZhiGan_ModalTimeLine/video/monitorHK.vue | 27 ++-
.../ZhiGan_ModalTimeLine/video/monitorLC.vue | 26 +++
.../ZhiGan_ModalTimeLine/video/monitorQX.vue | 35 +++-
.../ZhiGan_ModalTimeLine/video/monitorTX.vue | 47 ++++--
.../ZhiGan_WuRenJiShiShiHuaMian/index.vue | 16 +-
.../video/monitorHK.vue | 11 +-
.../video/monitorLC.vue | 12 +-
.../video/monitorQX.vue | 21 ++-
.../video/monitorTX.vue | 26 +--
.../Zhiku/HuoQingDetailModalLeft/index.vue | 158 ++++++++++--------
.../Zhiku/HuoQingDetailTimeLine/index.vue | 109 +++++++++++-
.../HuoQingDetailTimeLine/video/monitorHK.vue | 27 ++-
.../HuoQingDetailTimeLine/video/monitorLC.vue | 26 +++
.../HuoQingDetailTimeLine/video/monitorQX.vue | 35 +++-
.../HuoQingDetailTimeLine/video/monitorTX.vue | 47 ++++--
16 files changed, 611 insertions(+), 121 deletions(-)
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue
index 153be5d..71a5aa5 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue
@@ -128,12 +128,16 @@
src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
/>
@@ -181,42 +198,59 @@
src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
/>
@@ -256,6 +290,37 @@
// 是否是编辑状态
const isEdit = window.location.href.includes('/chart/home/');
+ // 当前全屏的视频组件编号
+ const nowFullScreenVideo = ref('');
+ function changeNowFullScreenVideo(value) {
+ nowFullScreenVideo.value = value;
+ }
+ // 海康视频ref
+ const monitorRefs: any = ref([]);
+ let monitorHKList: any = [];
+ function setMonitorRef(el, index, videoIndex) {
+ monitorHKList.push(index * 10 + '' + videoIndex);
+ monitorHKList = [...new Set(monitorHKList)];
+ monitorRefs.value[index * 10 + '' + videoIndex] = el;
+ }
+ // 隐藏海康视频组件
+ function hideHKVideo() {
+ monitorHKList.forEach((index) => {
+ if (monitorRefs.value[index]?.hideHkVideo) {
+ monitorRefs.value[index].hideHkVideo();
+ }
+ });
+ }
+ // 展示被隐藏的海康视频组件
+ function showHKVideo() {
+ monitorHKList.forEach((index) => {
+ if (monitorRefs.value[index]?.hideHkVideo) {
+ monitorRefs.value[index].showHkVideo();
+ }
+ });
+ scrollHKVideoIsHideOrShow();
+ }
+
// 初始化视频控件
onMounted(() => {
// 用于规避视频id重复
@@ -272,8 +337,46 @@
option.dataset = resData;
});
});
+
+ // 滚动监听：判断海康视频是否隐藏
+ const scrollableDiv = document.querySelector('.ZhiGan_ModalTimeLine');
+ scrollableDiv.addEventListener('scroll', scrollHKVideoIsHideOrShow);
+ setTimeout(scrollHKVideoIsHideOrShow, 1000);
});
+ onBeforeUnmount(() => {
+ // 移除滚动监听：判断海康视频是否隐藏
+ const scrollableDiv = document.querySelector('.ZhiGan_ModalTimeLine');
+ scrollableDiv.removeEventListener('scroll', scrollHKVideoIsHideOrShow);
+ });
+
+ function scrollHKVideoIsHideOrShow() {
+ const parent = document.querySelector('.ZhiGan_ModalTimeLine');
+ monitorHKList.forEach((index) => {
+ const child = document.querySelector('.MonitorHK' + index);
+ if (isElementFullyVisible(child, parent)) {
+ monitorRefs.value[index].showHkVideo();
+ } else {
+ monitorRefs.value[index].hideHkVideo();
+ }
+ });
+ }
+
+ function isElementFullyVisible(child, parent) {
+ if (!child || !parent) return false;
+ // 获取父容器相对于视口的位置
+ const parentRect = parent.getBoundingClientRect();
+ // 获取子元素相对于视口的位置
+ const childRect = child.getBoundingClientRect();
+ // 检查子元素是否完全位于父容器的可视区域内
+ return (
+ childRect.top >= parentRect.top &&
+ childRect.bottom <= parentRect.bottom &&
+ childRect.left >= parentRect.left &&
+ childRect.right <= parentRect.right
+ );
+ }
+
// 显示+非编辑状态下运行
watch(
() => option.status.hide,
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorHK.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorHK.vue
index 2c2b33d..2cd4bab 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorHK.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorHK.vue
@@ -8,7 +8,15 @@
import { onMounted, onUnmounted, watch, ref, nextTick } from 'vue';
import { JSEncrypt } from 'jsencrypt';
- const props = defineProps(['videourl', 'index', 'width', 'height', 'timestamp']);
+ const props = defineProps([
+ 'videourl',
+ 'index',
+ 'width',
+ 'height',
+ 'timestamp',
+ 'nowFullScreenVideo',
+ ]);
+ const emit = defineEmits(['changeNowFullScreenVideo']);
//声明公用变量
let initCount = 0;
@@ -171,6 +179,20 @@
}
}
+ // 标签显示
+ function showHkVideo() {
+ if (oWebControl != null) {
+ oWebControl.JS_ShowWnd();
+ }
+ }
+
+ // 标签隐藏
+ function hideHkVideo() {
+ if (oWebControl != null) {
+ oWebControl.JS_HideWnd();
+ }
+ }
+
// 重定大小
function reSizeVideo() {
if (oWebControl != null) {
@@ -197,6 +219,7 @@
oWebControl.JS_RequestInterface({
funcName: 'setFullScreen',
});
+ emit('changeNowFullScreenVideo', '海康' + props.index);
}
watch(
@@ -274,6 +297,8 @@
initPlugin,
init,
closeHkVideo,
+ showHkVideo,
+ hideHkVideo,
});
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorLC.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorLC.vue
index 9d8a17d..c13c5b6 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorLC.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorLC.vue
@@ -84,7 +84,10 @@
'height',
'timestamp',
'videoMuted',
+ 'nowFullScreenVideo',
]);
+ const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
+
let clPlayer: any = null;
// 开始播放/暂停播放
@@ -117,6 +120,29 @@
// 全屏
function fullScreenClick() {
clPlayer.fullScreen();
+ // 隐藏海康视频
+ emit('hideHKVideo');
+ // 开始检查宽度，全屏继续检查，非全屏后展示隐藏的海康视频
+ setTimeout(checkSize, 1000);
+ emit('changeNowFullScreenVideo', '乐橙' + props.index);
+ }
+
+ // 开始检查宽度，全屏继续检查，非全屏展示隐藏的海康视频
+ function checkSize() {
+ const element = document.querySelector('.LCPlayer-video-contaiiner');
+ const currentWidth = element.offsetWidth;
+ // 设置下一次检查
+ if (currentWidth > props.width) {
+ setTimeout(checkSize, 1000);
+ } else {
+ // 展示隐藏的海康视频
+ setTimeout(checkSize, 1000);
+ if ('乐橙' + props.index == props.nowFullScreenVideo) {
+ // 展示隐藏的海康视频
+ emit('showHKVideo');
+ emit('changeNowFullScreenVideo', '');
+ }
+ }
}
// 获取kitToken
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorQX.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorQX.vue
index fc027d8..acdbeb4 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorQX.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorQX.vue
@@ -14,11 +14,44 @@