diff --git a/src/views/equipmentList/list.vue b/src/views/equipmentList/list.vue index 7901101..abde3f0 100644 --- a/src/views/equipmentList/list.vue +++ b/src/views/equipmentList/list.vue @@ -404,30 +404,19 @@ const onMonitorDrawClick = (e: MouseEvent) => { monitorDrawCollecting.value = false; monitorDrawPoints.value = []; - const minVx = Math.min(v1.vx, v2.vx); - const maxVx = Math.max(v1.vx, v2.vx); - const minVy = Math.min(v1.vy, v2.vy); - const maxVy = Math.max(v1.vy, v2.vy); - const rw = Math.max(maxVx - minVx, 1); - const rh = Math.max(maxVy - minVy, 1); - - const firstTopPctOfHeight = (v1.vy / VH) * 100; - const firstRightPctOfWidth = ((VW - v1.vx) / VW) * 100; - const rectWidthPctOfWidth = (rw / VW) * 100; - const rectHeightPctOfHeight = (rh / VH) * 100; + // 计算两个点相对于video的千分比坐标 + const point1RightPctOfWidth = ((VW - v1.vx) / VW) * 1000; + const point1TopPctOfHeight = (v1.vy / VH) * 1000; + const point2RightPctOfWidth = ((VW - v2.vx) / VW) * 1000; + const point2TopPctOfHeight = (v2.vy / VH) * 1000; 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)) + x1: Number(point1RightPctOfWidth.toFixed(4)), + y1: Number(point1TopPctOfHeight.toFixed(4)), + x2: Number(point2RightPctOfWidth.toFixed(4)), + y2: Number(point2TopPctOfHeight.toFixed(4)) }; - console.log('[监控区域] 四点百分比', payload.value); + console.log('[监控区域] 两点千分比坐标', payload.value); //proxy?.$modal.msgSuccess(`已采集(相对原视频):x右距${payload.value.x}% y顶距${payload.value.y}% w框宽${payload.value.w}% h框高${payload.value.h}%`); seeSee.value = 1; }; @@ -437,6 +426,9 @@ const clearImage = () => { console.log(payload.value); drawStart.value = false; seeSee.value = 0; + // 清除绘制的矩形图案 + monitorRectPx.value = null; + monitorDrawPoints.value = []; }; const saveImage = async () => {