zhangchao/Visualize-electronic-fences
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 实时监控收集

Browse Source
This commit is contained in:
Ironsp
2026-05-14 17:32:58 +08:00
parent 4c9cd63ac0
commit d4129d66b1
3 changed files with 59 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/equipmentList/list.vue
View File

@@ -104,7 +104,11 @@
<template #header>
<div class="flex w-full items-center justify-between gap-2 min-w-0 pr-8">
<span class="truncate">实时监控-北门出入门监控</span>
<el-button type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button>
<div>
<el-button v-if="!drawStart" type="primary" class="shrink-0" @click="drawImage()">绘制区域</el-button>
<el-button v-if="drawStart" type="primary" class="shrink-0" @click="clearImage()">清空区域</el-button>
<el-button v-if="drawStart" type="primary" class="shrink-0" @click="saveImage()">保存区域</el-button>
</div>
</div>
</template>
<div class="monitor-video-wrap">
@@ -120,10 +124,11 @@
</template>
<script setup name="Demo" lang="ts">
import { addEquipment, getDevicetList, getDeviceInfo, delDevice, actDevice, updateDeviceInfo } from '@/api/equipmentList/index';
import { addEquipment, getDevicetList, getDeviceInfo, delDevice, actDevice, updateDeviceInfo, drawInfo } from '@/api/equipmentList/index';
import { EquipmentList, DeviceInfoForm } from '@/api/equipmentList/types';
import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
import { log } from 'node:console';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -336,6 +341,9 @@ const displayToVideoPixel = (px: number, py: number, video: HTMLVideoElement): {
};
/** 开始采集：视频上点击两个对角点 */
const drawStart = ref(false);
const payload = ref();
const drawImage = () => {
resetMonitorDraw();
monitorDrawCollecting.value = true;
@@ -395,17 +403,31 @@ const onMonitorDrawClick = (e: MouseEvent) => {
const rectWidthPctOfWidth = (rw / VW) * 100;
const rectHeightPctOfHeight = (rh / VH) * 100;
const payload = {
videoIntrinsicSize: { width: VW, height: VH },
firstPointTopOffset_pctOfVideoHeight: Number(firstTopPctOfHeight.toFixed(4)),
firstPointDistanceToRight_pctOfVideoWidth: Number(firstRightPctOfWidth.toFixed(4)),
rectWidth_pctOfVideoWidth: Number(rectWidthPctOfWidth.toFixed(4)),
rectHeight_pctOfVideoHeight: Number(rectHeightPctOfHeight.toFixed(4))
payload.value = {
// videoIntrinsicSize: { width: VW, height: VH },
// firstPointTopOffset_pctOfVideoHeight: Number(firstTopPctOfHeight.toFixed(4)),
// firstPointDistanceToRight_pctOfVideoWidth: Number(firstRightPctOfWidth.toFixed(4)),
// rectWidth_pctOfVideoWidth: Number(rectWidthPctOfWidth.toFixed(4)),
// rectHeight_pctOfVideoHeight: Number(rectHeightPctOfHeight.toFixed(4))
x: Number(firstRightPctOfWidth.toFixed(4)),
y: Number(firstTopPctOfHeight.toFixed(4)),
w: Number(rectWidthPctOfWidth.toFixed(4)),
h: Number(rectHeightPctOfHeight.toFixed(4))
};
console.log('[监控区域] 四点百分比(相对视频原始宽高 videoWidth/videoHeight):', payload);
proxy?.$modal.msgSuccess(
`已采集(相对原视频)：顶距${payload.firstPointTopOffset_pctOfVideoHeight}% 右距${payload.firstPointDistanceToRight_pctOfVideoWidth}% 框宽${payload.rectWidth_pctOfVideoWidth}% 框高${payload.rectHeight_pctOfVideoHeight}%`
);
console.log('[监控区域] 四点百分比', payload.value);
//proxy?.$modal.msgSuccess(`已采集(相对原视频)：x右距${payload.value.x}% y顶距${payload.value.y}% w框宽${payload.value.w}% h框高${payload.value.h}%`);
drawStart.value = true;
};
const clearImage = () => {
payload.value = {};
console.log(payload.value);
drawStart.value = false;
};
const saveImage = async () => {
await drawInfo(payload.value);
drawStart.value = false;
};
/** 删除按钮操作 */