chendingwei
/
ar-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

解除标签setTimeout注释

master
chendingwei 2 years ago
parent
37558d3f26
commit
2b5a47170c
1 changed files with 92 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 187
      src/views/page/cameraCenter.vue

187
src/views/page/cameraCenter.vue
View File

@ -6,10 +6,13 @@
@mousedown="mouseDownVideo">
</video> -->
<div id="videoPlayer" @mousedown="mouseDownVideo"></div>
<div v-for="item in labelList" :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
:key="item.id" :id="item.id"
:style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
@click="itemClick(item)">
<div v-for="item in labelList"
:class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
:key="item.id"
:id="item.id"
:style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
@click="itemClick(item)"
>
<a-dropdown :trigger="['contextmenu']">
<div class="labels-item" v-if="item.groupName == '视频标签'">
<!-- <div class="labels-item" v-if="item.inFlag"> -->
@ -32,22 +35,9 @@
</a-menu>
</template>
</a-dropdown>
<a-popconfirm
placement="bottomRight"
ok-text="Yes"
cancel-text="No"
:visible="item.windowVisible"
@cancel="windowCancel(item)"
>
<template #title>
<cameraWindow :itemData="item"></cameraWindow>
</template>
<!-- <a-button>TL</a-button> -->
</a-popconfirm>
</div>
<div class="labels lavels-build" v-if="addLabel.isAddLabel && addLabel.labelType == '建筑标签'"
:style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
:style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
<div class="labels-item" alt="">
<img src="@/assets/images/buildLabelLine.png">
<div>
@ -57,7 +47,7 @@
</div>
</div>
<div class="labels lavels-video" v-if="addLabel.isAddLabel && addLabel.labelType == '视频标签'"
:style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
:style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
<div class="labels-item">
<!-- <div class="labels-item" v-if="item.inFlag"> -->
<div>
@ -66,7 +56,7 @@
</div>
</div>
</div>
<CameraLeftMenu></CameraLeftMenu>
<CameraRightMenu></CameraRightMenu>
<!-- 云台控制 -->
@ -76,15 +66,15 @@
<script setup lang='ts'>
////@ts-nocheck
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode } from "vue";
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
import {Modal} from 'ant-design-vue';
import {ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode} from "vue";
import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
import * as markSearchApi from '@/axios/core/markSearchApi';
import * as zlmApi from '@/axios/core/zlmApi';
import { useStore } from '@/store/index';
import { apiUrl } from "@/axios";
import { storeToRefs } from 'pinia';
import {useStore} from '@/store/index';
import {apiUrl} from "@/axios";
import {storeToRefs} from 'pinia';
import Msg from "@/utils/message";
import CameraLeftMenu from '@/views/page/Aside/cameraLeftMenu.vue'
import CameraRightMenu from '@/views/page/Aside/cameraRightMenu.vue'
@ -92,7 +82,8 @@ import LabelEditModel from '@/views/page/Model/LabelEditModel.vue'
import cameraWindow from '@/views/page/cameraWindow.vue'
import popup from "@/utils/popup";
import VideoControlSimple from './VideoControl/VideoControlSimple.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let piniaStore = useStore();
let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
let canvasWidth = ref(0)
@ -103,7 +94,6 @@ let cameraMap = storeToRefs(piniaStore).cameraMap
let isActiveChoose = ref(false)
let labelList = ref<any[]>([])
let addLabel = storeToRefs(piniaStore).addLabel
let screenshot = storeToRefs(piniaStore).screenshot
let addLabelLeft = ref(0);
let addLabelTop = ref(0);
var jessibuca = ref();
@ -116,22 +106,6 @@ onMounted(() => {
}
})
watch(screenshot, (newVal, oldVal) => {
if (newVal) {
console.log(123);
//jessibuca.value.isPlaying() 判断是否正在播放
if (!jessibuca.value.isPlaying()) {
Msg.info("请先选择监控画面")
piniaStore.updateScreenshot(false)
return
}
jessibuca.value.screenshot("", "png", 1)
piniaStore.updateScreenshot(false)
}
})
watch(curSelectKey, (newVal, oldVal) => {
switchCamera(newVal)
})
@ -141,7 +115,6 @@ watch(closeVideoKey, (newVal, oldVal) => {
piniaStore.updateCloseVideoKey("")
piniaStore.updateCurSelectKey("")
}
})
watch(addLabel, (newVal, oldVal) => {
if (newVal.isAddLabel) {
@ -153,6 +126,7 @@ watch(addLabel, (newVal, oldVal) => {
}
}
})
function closeVideo() {
jessibuca.value.close();
labelList.value = []
@ -160,53 +134,75 @@ function closeVideo() {
//删除标签
function deleteLabel(id: number) {
markLabelApi.Delete({ id }).then((res: any) => {
console.log(res.data);
if (res.data.code == 200) {
let msg = res.data.data == true ? "删除成功" : "删除失败"
if (res.data.data) {
labelList.value = labelList.value.filter((element: any) => {
return element.id != id
});
Msg.success("删除成功")
return
}
markLabelApi.Delete({id}).then((res: any) => {
if (judgeResponse(res)) return;
let flag = res.data.data;
let msg = flag === true ? "删除成功" : "删除失败";
if (flag) {
labelList.value = labelList.value.filter((element: any) => {
return element.id != id;
});
Msg.success("删除成功");
} else {
Msg.error("删除失败");
}
Msg.error("删除失败")
})
}
//标签点击事件
function itemClick(item: any) {
// console.log("点击",item);
// popup("监控画面", [h(cameraWindow, { windowData: item })], "cameraWindow");
//打开小窗
item.windowVisible = true
popup("监控画面", [h(cameraWindow, {windowData: item})], "cameraWindow");
}
//小窗关闭
function windowCancel(item: any){
item.windowVisible = false
}
function loadVideoPlayer() {
let elmId = 'videoPlayer';
let url = apiUrl.WebRtcUrl;
// webRtcServer.value = new WebRtcStreamer(elmId, url);
var showOperateBtns = false; // 是否显示按钮
var forceNoOffscreen = true; //
jessibuca.value = new Jessibuca({
container: player,
videoBuffer: 0.2, // 缓存时长
isResize: false,
text: "",
loadingText: "",
autoWasm: true,
useMSE: false,
debug: false,
showBandwidth: showOperateBtns, // 显示网速
operateBtns: {
fullscreen: showOperateBtns,
screenshot: showOperateBtns,
play: showOperateBtns,
audio: false,
recorder: false
},
forceNoOffscreen: forceNoOffscreen,
hasAudio: false,
isNotMute: false,
},);
jessibuca.value.onLog = (msg: any) => console.error(msg);
jessibuca.value.onRecord = (status: any) => console.log('onRecord', status);
jessibuca.value.onPause = () => console.log('onPause');
jessibuca.value.onPlay = () => console.log('onPlay');
jessibuca.value.onFullscreen = (msg: any) => console.log('onFullscreen', msg);
jessibuca.value.onMute = (msg: any) => console.log('onMute', msg);
}
function loadVideoCanvas() {
window.addEventListener('resize', () => {
changeVideoCanvasSize();
});
changeVideoCanvasSize();
}
const onContextMenuClick = (item: any, menuKey: string,) => {
console.log(`labelId: ${item.id}, menuKey: ${menuKey}`);
// console.log(`item: ${item}`);
// console.log(item);
//防止添加多个key值，再次点击不能关闭。数组去重
if (menuKey == "edit") {
popup("编辑标签", [h(LabelEditModel, { modelData: item })], "editLabel");
popup("编辑标签", [h(LabelEditModel, {modelData: item})], "editLabel");
} else if (menuKey == "delete") {
Modal.confirm({
zIndex: 10000,
@ -215,11 +211,11 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
content: () =>
h(
"span",
{ style: { color: "black" } },
{style: {color: "black"}},
"是否确认删除该标签？"
),
okText:
// () => h('span', { style: { color: 'black' } }, '确定'),
// () => h('span', { style: { color: 'black' } }, '确定'),
"确定",
// okType: 'primary',
cancelText: () => "取消",
@ -240,6 +236,7 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
}
};
function changeVideoCanvasSize() {
canvasWidth.value = player.clientWidth;
canvasHeight.value = player.clientHeight;
@ -247,7 +244,6 @@ function changeVideoCanvasSize() {
function mouseDownVideo(e: MouseEvent) {
if (!isActiveChoose.value) return;
//鼠标左键 e.buttons == 1
if (e.buttons == 1) {
@ -276,7 +272,6 @@ function mouseDownVideo(e: MouseEvent) {
if (judgeResponse(res)) return;
let markLabelId: number = res.data.data;
console.log(markLabelId);
if (markLabelId <= 0) return;
markSearchApi.ActivateMarkLabel({
'cameraId': cameraId,
@ -284,7 +279,6 @@ function mouseDownVideo(e: MouseEvent) {
}).then((res: any) => {
if (judgeResponse(res)) return;
let ret: boolean = res.data.data;
console.log(ret, 'ret');
if (ret) {
let obj = {
cbCameraId: cameraId,
@ -296,20 +290,18 @@ function mouseDownVideo(e: MouseEvent) {
isDelete: false,
inFlag: true,
name: name,
groupName: name,
windowVisible: false //小窗开关状态
groupName: name
}
labelList.value.push(obj)
isActiveChoose.value = false
piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
}
});
})
} else {
//右键取消
isActiveChoose.value = false
piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
}
}
@ -320,10 +312,8 @@ function switchCamera(cameraId: string) {
console.log('get camera obj.', cameraMap.value);
let cameraObj = cameraMap.value.get(cameraId);
console.log(cameraObj, 'cameraObj');
if (!cameraObj) {
console.log('camera obj not found.');
return;
}
curVideoKey.value = cameraId;
@ -344,13 +334,16 @@ function switchCamera(cameraId: string) {
jessibuca.value.play(wsStreamUrl);
}
);
console.log("step4, active camera searcher.");
// step4, active camera searcher.
markSearchApi.IsExistsSearcher({
'cameraId': cameraObj.id
}).then((res: any) => {
if (judgeResponse(res)) return;
let flag: boolean = res.data.data;
console.log(flag, res,111111111111111111111111111111111111111111);
if (!flag) {
console.log('not exist searcher.');
markSearchApi.ActiveSearcher({
@ -363,7 +356,6 @@ function switchCamera(cameraId: string) {
console.log('load camera labels');
getLabel(cameraObj.id);
loadMarkLabelsByLoop(cameraObj);
}
});
} else {
@ -375,6 +367,7 @@ function switchCamera(cameraId: string) {
// step5, load camera labels.
}
function getLabel(cbCameraId: string | number) {
let str = JSON.stringify({cbCameraId})
markLabelApi.GetList({queryJson: str}).then((res: any) => {
@ -392,17 +385,23 @@ function getLabel(cbCameraId: string | number) {
console.log(labelList.value, 'labelList.value');
});
}
function loadMarkLabelsByLoop(cameraObj: any, ms: number = 1000) {
if (curSelectKey.value !== cameraObj.id) {
console.log(curSelectKey.value,cameraObj.id);
if (curSelectKey.value != cameraObj.id) {
console.log('load camera labels end.');
return;
}
loadMarkLabels(cameraObj);
// let timer = setTimeout(() => {
// loadMarkLabelsByLoop(cameraObj, ms);
// clearTimeout(timer)
// }, ms);
let timer = setTimeout(() => {
loadMarkLabelsByLoop(cameraObj, ms);
clearTimeout(timer)
console.log(new Date());
}, ms);
}
function loadMarkLabels(cameraObj: any) {
markSearchApi.GetMarkLabelCalcResultList({
'cameraId': cameraObj.id
@ -410,7 +409,6 @@ function loadMarkLabels(cameraObj: any) {
if (judgeResponse(res)) return;
let list: Array<any> = res.data.data;
console.log(list);
list.forEach((element: any) => {
labelList.value.forEach((item: any, index: number) => {
if (element.id == item.id) {
@ -418,12 +416,11 @@ function loadMarkLabels(cameraObj: any) {
labelList.value[index].canvasTopRatio = element.canvasTopRatio
labelList.value[index].inFlag = element.inFlag
}
});
});
});
}
function judgeResponse(res: any): boolean {
let flag = false;
if (flag) promptError();
@ -433,6 +430,7 @@ function judgeResponse(res: any): boolean {
function promptError() {
// promptError
}
//刷新页面
window.onbeforeunload = () => {
jessibuca.value.destroy()
@ -441,7 +439,7 @@ onUnmounted(() => {
{
jessibuca.value.destroy()
}
})
})
</script>
<style scoped lang='less'>
@ -471,7 +469,7 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
>div {
> div {
position: relative;
}
@ -480,7 +478,6 @@ onUnmounted(() => {
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
color: white;
}
img {

Write Preview
Loading…
Cancel
Save