gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

智感、智库-时间线-海康视频可以随着滚动条的滚动隐藏和显示

main
滕嵩 2025-05-09 15:41:47 +08:00
parent 4ea4e53fa4
commit fc63a6ac57
16 changed files with 611 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/index.vue
View File

@ -128,12 +128,16 @@
src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
/>
<MonitorHK
:ref="(el) => setMonitorRef(el, index, videoIndex)"
:class="'MonitorHK' + index * 10 + videoIndex"
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '海康'"
:index="index + '-' + videoIndex"
:videourl="videoItem.videourl"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorLC
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '乐橙'"
@ -144,6 +148,10 @@
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:videoMuted="option.dataStyle.videoMuted"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorTX
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '腾讯'"
@ -155,15 +163,24 @@
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorQX
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '青犀'"
:videourl="videoItem.videourl"
:index="index + '-' + videoIndex"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
</div>
</div>
@ -181,42 +198,59 @@
src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
/>
<MonitorHK
:ref="(el) => setMonitorRef(el, index, 0)"
:class="'MonitorHK' + index * 10 + 0"
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '海康'"
:index="index + '-' + videoIndex"
:index="index + '-' + 0"
:videourl="item.videos.videourl"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorLC
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '乐橙'"
:deviceId="item.videos.videourl"
:channelId="0"
:index="index"
:index="index + '-' + 0"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:videoMuted="option.dataStyle.videoMuted"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorTX
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '腾讯'"
:videourl="item.videos.videourl"
:index="index + '-0'"
:index="index + '-' + 0"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorQX
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '青犀'"
:videourl="item.videos.videourl"
:index="index + '-' + 0"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
</div>
</div>
@ -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,

27
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorHK.vue
View File

@ -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,
});
</script>

26
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorLC.vue
View File

@ -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

35
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorQX.vue
View File

@ -14,11 +14,44 @@
</template>
<script setup lang="ts">
const props = defineProps(['videourl', 'width', 'height', 'videoMuted', 'videoLoop', 'videoFit']);
import { onMounted } from 'vue';
const props = defineProps([
'videourl',
'index',
'width',
'height',
'videoMuted',
'videoLoop',
'videoFit',
'nowFullScreenVideo',
]);
const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
function getUrl(value) {
return 'http://221.2.83.254:7012/live/' + value + '.m3u8';
}
// 开始检查宽度，全屏继续检查，非全屏后展示隐藏的海康视频
function checkSize() {
// 设置下一次检查
if (document.querySelector('.vjs-default-skin').offsetWidth > props.width) {
setTimeout(checkSize, 1000);
// 隐藏海康视频
emit('hideHKVideo');
emit('changeNowFullScreenVideo', '青犀' + props.index);
} else {
setTimeout(checkSize, 1000);
if ('青犀' + props.index == props.nowFullScreenVideo) {
// 展示隐藏的海康视频
emit('showHKVideo');
emit('changeNowFullScreenVideo', '');
}
}
}
onMounted(() => {
setTimeout(checkSize, 10 * 1000);
});
</script>
<style lang="scss" scoped>

47
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/video/monitorTX.vue
View File

@ -9,10 +9,6 @@
autoplay
:loop="props.videoLoop"
:muted="props.videoMuted"
:style="{
width: props.width + 'px',
height: props.height + 'px',
}"
/>
</div>
</template>
@ -28,7 +24,9 @@
'videoLoop',
'videoMuted',
'videoFit',
'nowFullScreenVideo',
]);
const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
watch(
() => props.videourl,
@ -44,28 +42,53 @@
);
// 视频控件初始化
let player: any = null;
let txPlayer: any = null;
function handlerPlayVideo() {
nextTick(function () {
if (player) {
player.src(props.videourl);
if (txPlayer) {
txPlayer.src(props.videourl);
txPlayer.width(props.width);
txPlayer.height(props.height);
} else {
player = TCPlayer('ZhiGan_ModalTimeLine' + props.index + props.timestamp, {});
player.src(props.videourl);
txPlayer = TCPlayer('ZhiGan_ModalTimeLine' + props.index + props.timestamp, {
width: props.width,
height: props.height,
});
txPlayer.src(props.videourl);
}
});
}
function closePlayerVideo() {
if (player) {
player.dispose();
player = null;
if (txPlayer) {
txPlayer.dispose();
txPlayer = null;
}
}
// 开始检查宽度，全屏继续检查，非全屏后展示隐藏的海康视频
function checkSize() {
// 设置下一次检查
if (document.querySelector('.TCPlayer-video-contaiiner').offsetWidth > props.width) {
setTimeout(checkSize, 1000);
// 隐藏海康视频
emit('hideHKVideo');
emit('changeNowFullScreenVideo', '腾讯' + props.index);
} else {
// 展示隐藏的海康视频
setTimeout(checkSize, 1000);
if ('腾讯' + props.index == props.nowFullScreenVideo) {
// 展示隐藏的海康视频
emit('showHKVideo');
emit('changeNowFullScreenVideo', '');
}
}
}
onMounted(() => {
handlerPlayVideo();
setTimeout(checkSize, 1000);
});
onUnmounted(() => {

16
src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/index.vue
View File

@ -65,6 +65,8 @@
:width="`${option.dataStyle.videowidth - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
:height="`${option.dataStyle.videoheight - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
:timestamp="option.dataStyle.timestamp"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorLC
v-if="!isEdit && !option.status.hide && item.manufacturer == '乐橙'"
@ -77,6 +79,8 @@
:videoMuted="option.dataStyle.videoMuted"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorTX
v-if="!isEdit && !option.status.hide && item.manufacturer == '腾讯'"
@ -90,10 +94,13 @@
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorQX
v-if="!isEdit && !option.status.hide && item.manufacturer == '青犀'"
:videourl="item.videourl"
:index="index"
:width="`${option.dataStyle.videowidth - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
:height="`${option.dataStyle.videoheight - 2 * option.dataStyle.borderWidth - 2 * option.dataStyle.padding}`"
:videoLoop="option.dataStyle.videoLoop"
@ -101,6 +108,8 @@
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
</div>
<Title
@ -175,7 +184,12 @@
}
}
// 其他视频组件全屏，隐藏海康视频组件
// 当前全屏的视频组件编号
const nowFullScreenVideo = ref('');
function changeNowFullScreenVideo(value) {
nowFullScreenVideo.value = value;
}
// 海康视频ref
const monitorRefs: any = ref([]);
let monitorHKList: any = [];
function setMonitorRef(el, index) {

11
src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/video/monitorHK.vue
View File

@ -8,7 +8,15 @@
import { onMounted, onUnmounted, watch, nextTick, ref, computed } from 'vue';
import { JSEncrypt } from 'jsencrypt';
const props = defineProps(['serialNumberValue', 'index', 'width', 'height', 'timestamp']);
const props = defineProps([
'serialNumberValue',
'index',
'width',
'height',
'timestamp',
'nowFullScreenVideo',
]);
const emit = defineEmits(['changeNowFullScreenVideo']);
//声明公用变量
let initCount = 0;
@ -235,6 +243,7 @@
oWebControl.JS_RequestInterface({
funcName: 'setFullScreen',
});
emit('changeNowFullScreenVideo', '海康' + props.index);
}
watch(

10
src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/video/monitorLC.vue
View File

@ -84,8 +84,9 @@
'height',
'timestamp',
'videoMuted',
'nowFullScreenVideo',
]);
const emit = defineEmits(['hideHKVideo', 'showHKVideo']);
const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
let clPlayer: any = null;
@ -123,6 +124,7 @@
emit('hideHKVideo');
// 开始检查宽度，全屏继续检查，非全屏后展示隐藏的海康视频
setTimeout(checkSize, 1000);
emit('changeNowFullScreenVideo', '乐橙' + props.index);
}
// 开始检查宽度，全屏继续检查，非全屏展示隐藏的海康视频
@ -133,7 +135,13 @@
if (currentWidth > props.width) {
setTimeout(checkSize, 1000);
} else {
// 展示隐藏的海康视频
setTimeout(checkSize, 1000);
if ('乐橙' + props.index == props.nowFullScreenVideo) {
// 展示隐藏的海康视频
emit('showHKVideo');
emit('changeNowFullScreenVideo', '');
}
}
}

17
src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/video/monitorQX.vue
View File

@ -15,8 +15,17 @@
<script setup lang="ts">
import { onMounted } from 'vue';
const props = defineProps(['videourl', 'width', 'height', 'videoMuted', 'videoLoop', 'videoFit']);
const emit = defineEmits(['hideHKVideo', 'showHKVideo']);
const props = defineProps([
'videourl',
'index',
'width',
'height',
'videoMuted',
'videoLoop',
'videoFit',
'nowFullScreenVideo',
]);
const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
function getUrl(value) {
return 'http://221.2.83.254:7012/live/' + value + '.m3u8';
@ -29,10 +38,14 @@
setTimeout(checkSize, 1000);
// 隐藏海康视频
emit('hideHKVideo');
emit('changeNowFullScreenVideo', '青犀' + props.index);
} else {
setTimeout(checkSize, 1000);
if ('青犀' + props.index == props.nowFullScreenVideo) {
// 展示隐藏的海康视频
emit('showHKVideo');
emit('changeNowFullScreenVideo', '');
}
}
}

22
src/packages/components/Zhigan/Zhigan/ZhiGan_WuRenJiShiShiHuaMian/video/monitorTX.vue
View File

@ -9,8 +9,6 @@
autoplay
:loop="props.videoLoop"
:muted="props.videoMuted"
:width="props.width"
:height="props.height"
/>
</div>
</template>
@ -26,8 +24,9 @@
'videoLoop',
'videoMuted',
'videoFit',
'nowFullScreenVideo',
]);
const emit = defineEmits(['hideHKVideo', 'showHKVideo']);
const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
// 视频控件初始化
let txPlayer: any = null;
@ -43,8 +42,13 @@
nextTick(function () {
if (txPlayer) {
txPlayer.src(props.videourl);
txPlayer.width(props.width);
txPlayer.height(props.height);
} else {
txPlayer = TCPlayer('ZhiGan_WuRenJiShiShiHuaMian' + props.index + props.timestamp, {});
txPlayer = TCPlayer('ZhiGan_WuRenJiShiShiHuaMian' + props.index + props.timestamp, {
width: props.width,
height: props.height,
});
txPlayer.src(props.videourl);
}
});
@ -64,19 +68,21 @@
setTimeout(checkSize, 1000);
// 隐藏海康视频
emit('hideHKVideo');
emit('changeNowFullScreenVideo', '腾讯' + props.index);
} else {
// 展示隐藏的海康视频
setTimeout(checkSize, 1000);
if ('腾讯' + props.index == props.nowFullScreenVideo) {
// 展示隐藏的海康视频
emit('showHKVideo');
emit('changeNowFullScreenVideo', '');
}
}
}
onMounted(() => {
setTimeout(checkSize, 1000);
});
onMounted(() => {
handlerPlayVideo();
setTimeout(checkSize, 1000);
});
onUnmounted(() => {

132
src/packages/components/Zhiku/Zhiku/HuoQingDetailModalLeft/index.vue
View File

@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import { computed, PropType, toRefs, reactive } from 'vue';
import { PropType, toRefs, reactive } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { icon } from '@/plugins';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
@ -18,7 +18,7 @@
},
});
const { w, h, x, y } = toRefs(props.chartConfig.attr);
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
dataStyle: props.chartConfig.option.dataStyle,
@ -26,88 +26,108 @@
// 添加鼠标拖动监听器
let isGroup = 0;
addListener();
// 监听器-参数
let isDragging = false;
let initialMouseX;
let initialMouseY;
let initialDocumentX;
let initialDocumentY;
let initialDocumentX_left;
let initialDocumentY_left;
let initialDocumentX_right;
let initialDocumentY_right;
addListenerByid();
// 添加鼠标拖动监听器
function addListener() {
function addListenerByid() {
if (option.dataStyle.mouseListener) {
let HuoQingDetailModalLeft_id;
let HuoQingDetailModalRight_id;
let HuoQingDetailModalLeft_group_id;
let HuoQingDetailModalRight_group_id;
chartEditStore.getComponentList.forEach((element) => {
// 未分组
if (isGroup == 1 || element.key == 'HuoQingDetailModalLeft') {
isGroup = 1;
setTimeout(() => {
const dragDocument: any = document.querySelector('.HuoQingDetailModalLeft');
if (dragDocument) {
// 鼠标按下
dragDocument.addEventListener('mousedown', function (event) {
isDragging = true;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
initialDocumentX = cloneDeep(x.value);
initialDocumentY = cloneDeep(y.value);
dragDocument.style.cursor = 'grabbing';
});
// 鼠标移动
dragDocument.addEventListener('mousemove', function (event) {
if (isDragging) {
const deltaX = event.clientX - initialMouseX;
const deltaY = event.clientY - initialMouseY;
x.value = initialDocumentX + deltaX;
y.value = initialMouseY + deltaY;
// 获取四个id
if (!element.isGroup && element.key == 'HuoQingDetailModalLeft') {
HuoQingDetailModalLeft_id = element.id;
}
});
// 鼠标放开
dragDocument.addEventListener('mouseup', function (event) {
isDragging = false;
dragDocument.style.cursor = 'default';
});
if (!element.isGroup && element.key == 'HuoQingDetailModalRight') {
HuoQingDetailModalRight_id = element.id;
}
}, 1000);
}
// 分组
if (
isGroup == 2 ||
(element.isGroup && element?.groupList?.some((li) => li.key == 'HuoQingDetailModalLeft'))
element.isGroup &&
element?.groupList?.some((li) => li.key == 'HuoQingDetailModalLeft')
) {
isGroup = 2;
HuoQingDetailModalLeft_group_id = element.id;
}
if (
element.isGroup &&
element?.groupList?.some((li) => li.key == 'HuoQingDetailModalRight')
) {
HuoQingDetailModalRight_group_id = element.id;
}
});
setTimeout(() => {
const dragDocument = document.getElementById(element.id); // 使用 id 获取元素
if (dragDocument) {
let dragDocument_left: any;
let dragDocument_right: any;
let dragDocument_group_left: any;
let dragDocument_group_right: any;
// 通过id获取元素
if (HuoQingDetailModalLeft_id) {
dragDocument_left = document.getElementById(HuoQingDetailModalLeft_id);
}
if (HuoQingDetailModalRight_id) {
dragDocument_right = document.getElementById(HuoQingDetailModalRight_id);
}
if (HuoQingDetailModalLeft_group_id) {
dragDocument_group_left = document.getElementById(HuoQingDetailModalLeft_group_id);
}
if (HuoQingDetailModalRight_group_id) {
dragDocument_group_right = document.getElementById(HuoQingDetailModalRight_group_id);
}
// 添加监视器
addListener(
dragDocument_left || dragDocument_group_left,
dragDocument_right || dragDocument_group_right,
);
}, 1000);
}
}
// 添加鼠标拖动监听器
function addListener(dragDocumentLeft, dragDocumentRight) {
// 鼠标按下
dragDocument.addEventListener('mousedown', function (event) {
dragDocumentLeft.addEventListener('mousedown', function (event) {
isDragging = true;
initialMouseX = event.clientX;
initialMouseY = event.clientY;
initialDocumentX = dragDocument.offsetLeft;
initialDocumentY = dragDocument.offsetTop;
dragDocument.style.cursor = 'grabbing';
initialDocumentX_left = dragDocumentLeft.offsetLeft;
initialDocumentY_left = dragDocumentLeft.offsetTop;
dragDocumentLeft.style.cursor = 'grabbing';
if (dragDocumentRight) {
initialDocumentX_right = dragDocumentRight.offsetLeft;
initialDocumentY_right = dragDocumentRight.offsetTop;
}
});
// 鼠标移动
dragDocument.addEventListener('mousemove', function (event) {
dragDocumentLeft.addEventListener('mousemove', function (event) {
if (isDragging) {
const deltaX = event.clientX - initialMouseX;
const deltaY = event.clientY - initialMouseY;
dragDocument.style.left = initialDocumentX + deltaX + 'px';
dragDocument.style.top = initialDocumentY + deltaY + 'px';
dragDocumentLeft.style.left = initialDocumentX_left + deltaX + 'px';
dragDocumentLeft.style.top = initialDocumentY_left + deltaY + 'px';
if (dragDocumentRight) {
dragDocumentRight.style.left = initialDocumentX_right + deltaX + 'px';
dragDocumentRight.style.top = initialDocumentY_right + deltaY + 'px';
}
}
});
// 鼠标放开
dragDocument.addEventListener('mouseup', function (event) {
dragDocumentLeft.addEventListener('mouseup', function (event) {
isDragging = false;
dragDocument.style.cursor = 'default';
dragDocumentLeft.style.cursor = 'default';
});
}
}, 1000);
}
});
}
}
</script>
<style lang="scss" scoped>

109
src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/index.vue
View File

@ -128,12 +128,16 @@
src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
/>
<MonitorHK
:ref="(el) => setMonitorRef(el, index, videoIndex)"
:class="'MonitorHK' + index * 10 + videoIndex"
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '海康'"
:index="index + '-' + videoIndex"
:videourl="videoItem.videourl"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorLC
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '乐橙'"
@ -144,6 +148,10 @@
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:videoMuted="option.dataStyle.videoMuted"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorTX
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '腾讯'"
@ -155,15 +163,24 @@
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorQX
v-if="!isEdit && !option.status.hide && videoItem.manufacturer == '青犀'"
:videourl="videoItem.videourl"
:index="index + '-' + videoIndex"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
</div>
</div>
@ -181,42 +198,59 @@
src="@/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
/>
<MonitorHK
:ref="(el) => setMonitorRef(el, index, 0)"
:class="'MonitorHK' + index * 10 + 0"
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '海康'"
:index="index + '-' + videoIndex"
:index="index + '-' + 0"
:videourl="item.videos.videourl"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorLC
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '乐橙'"
:deviceId="item.videos.videourl"
:channelId="0"
:index="index"
:index="index + '-' + 0"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:videoMuted="option.dataStyle.videoMuted"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorTX
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '腾讯'"
:videourl="item.videos.videourl"
:index="index + '-0'"
:index="index + '-' + 0"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:timestamp="option.dataStyle.timestamp"
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
<MonitorQX
v-if="!isEdit && !option.status.hide && item.videos.manufacturer == '青犀'"
:videourl="item.videos.videourl"
:index="index + '-' + 0"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:height="`${option.dataStyle.videoHeight - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
:videoLoop="option.dataStyle.videoLoop"
:videoMuted="option.dataStyle.videoMuted"
:videoFit="option.dataStyle.videoFit"
@hideHKVideo="hideHKVideo"
@showHKVideo="showHKVideo"
:nowFullScreenVideo="nowFullScreenVideo"
@changeNowFullScreenVideo="changeNowFullScreenVideo"
/>
</div>
</div>
@ -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('.HuoQingDetailTimeLine');
scrollableDiv.addEventListener('scroll', scrollHKVideoIsHideOrShow);
setTimeout(scrollHKVideoIsHideOrShow, 1000);
});
onBeforeUnmount(() => {
// 移除滚动监听：判断海康视频是否隐藏
const scrollableDiv = document.querySelector('.HuoQingDetailTimeLine');
scrollableDiv.removeEventListener('scroll', scrollHKVideoIsHideOrShow);
});
function scrollHKVideoIsHideOrShow() {
const parent = document.querySelector('.HuoQingDetailTimeLine');
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,

27
src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/video/monitorHK.vue
View File

@ -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,
});
</script>

26
src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/video/monitorLC.vue
View File

@ -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

35
src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/video/monitorQX.vue
View File

@ -14,11 +14,44 @@
</template>
<script setup lang="ts">
const props = defineProps(['videourl', 'width', 'height', 'videoMuted', 'videoLoop', 'videoFit']);
import { onMounted } from 'vue';
const props = defineProps([
'videourl',
'index',
'width',
'height',
'videoMuted',
'videoLoop',
'videoFit',
'nowFullScreenVideo',
]);
const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
function getUrl(value) {
return 'http://221.2.83.254:7012/live/' + value + '.m3u8';
}
// 开始检查宽度，全屏继续检查，非全屏后展示隐藏的海康视频
function checkSize() {
// 设置下一次检查
if (document.querySelector('.vjs-default-skin').offsetWidth > props.width) {
setTimeout(checkSize, 1000);
// 隐藏海康视频
emit('hideHKVideo');
emit('changeNowFullScreenVideo', '青犀' + props.index);
} else {
setTimeout(checkSize, 1000);
if ('青犀' + props.index == props.nowFullScreenVideo) {
// 展示隐藏的海康视频
emit('showHKVideo');
emit('changeNowFullScreenVideo', '');
}
}
}
onMounted(() => {
setTimeout(checkSize, 10 * 1000);
});
</script>
<style lang="scss" scoped>

47
src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/video/monitorTX.vue
View File

@ -9,10 +9,6 @@
autoplay
:loop="props.videoLoop"
:muted="props.videoMuted"
:style="{
width: props.width + 'px',
height: props.height + 'px',
}"
/>
</div>
</template>
@ -28,7 +24,9 @@
'videoLoop',
'videoMuted',
'videoFit',
'nowFullScreenVideo',
]);
const emit = defineEmits(['hideHKVideo', 'showHKVideo', 'changeNowFullScreenVideo']);
watch(
() => props.videourl,
@ -44,28 +42,53 @@
);
// 视频控件初始化
let player: any = null;
let txPlayer: any = null;
function handlerPlayVideo() {
nextTick(function () {
if (player) {
player.src(props.videourl);
if (txPlayer) {
txPlayer.src(props.videourl);
txPlayer.width(props.width);
txPlayer.height(props.height);
} else {
player = TCPlayer('HuoQingDetailTimeLine' + props.index + props.timestamp, {});
player.src(props.videourl);
txPlayer = TCPlayer('HuoQingDetailTimeLine' + props.index + props.timestamp, {
width: props.width,
height: props.height,
});
txPlayer.src(props.videourl);
}
});
}
function closePlayerVideo() {
if (player) {
player.dispose();
player = null;
if (txPlayer) {
txPlayer.dispose();
txPlayer = null;
}
}
// 开始检查宽度，全屏继续检查，非全屏后展示隐藏的海康视频
function checkSize() {
// 设置下一次检查
if (document.querySelector('.TCPlayer-video-contaiiner').offsetWidth > props.width) {
setTimeout(checkSize, 1000);
// 隐藏海康视频
emit('hideHKVideo');
emit('changeNowFullScreenVideo', '腾讯' + props.index);
} else {
// 展示隐藏的海康视频
setTimeout(checkSize, 1000);
if ('腾讯' + props.index == props.nowFullScreenVideo) {
// 展示隐藏的海康视频
emit('showHKVideo');
emit('changeNowFullScreenVideo', '');
}
}
}
onMounted(() => {
handlerPlayVideo();
setTimeout(checkSize, 1000);
});
onUnmounted(() => {