This commit is contained in:
BianLzhaoMin 2025-07-16 15:39:53 +08:00
parent 5a448431aa
commit 50dd58254e
4 changed files with 39 additions and 11 deletions

View File

@ -2,11 +2,12 @@
<!-- 视频播放器 Flv格式视频 -->
<video
:id="videoId"
ref="videoPlayer"
class="video-player"
autoplay
controls
muted
@timeupdate="progress($event)"
@dblclick="toggleFullscreen"
style="border-radius: 12px"
/>
</template>
@ -15,6 +16,7 @@
import flv from 'flv.js'
import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
const videoPlayer = ref(null)
let flvPlayerList = []
let replayCount = 0
@ -106,6 +108,16 @@ const progress = (e) => {
}
}
const toggleFullscreen = () => {
if (!videoPlayer.value) return
if (document.fullscreenElement) {
document.exitFullscreen()
} else {
videoPlayer.value.requestFullscreen()
}
}
onBeforeUnmount(() => {
stopvideo()
})

View File

@ -54,8 +54,12 @@ const markPoints = (Robot_x, Robot_y) => {
console.log(Robot_x, Robot_y, 'Robot_x, Robot_y')
const svgRect = svgMapRef.value.getBoundingClientRect()
console.log(svgRect, 'svgRect', svgHeight.value, yScale.value, svgRect.top)
const clientY = svgHeight.value - yScale.value * Robot_y + svgRect.top
const logicalY1 = (clientY - svgRect.top) / yScale.value
console.log(clientY, logicalY1, 'xScale.value, yScale.value')
devicePoints.value.push({ x: Robot_x, y: logicalY1 })
}
@ -76,6 +80,8 @@ onMounted(async () => {
mapInfo.value = await getRobotMapInfoFn(deviceInfo?.puId)
mapImage.value = mapInfo.value?.mapBase64
//
console.log(mapInfo.value, 'mapInfo.value----')
calculateScale(mapInfo.value?.mapWidth, mapInfo.value?.mapHeight)
//
const pointsInfo = await getRobotPointsInfoFn(deviceInfo?.puId)

View File

@ -326,10 +326,10 @@ const onHandleConfirm = () => {
content: '机器人当前位置与预置点位不一致,确定新增吗?',
positiveText: '确定新增',
negativeText: '取消',
onPositiveClick: () => {},
onNegativeClick: async () => {
onPositiveClick: async () => {
addOrEditMarker(isCurrentPosition)
},
onNegativeClick: () => {},
})
}
} else {

View File

@ -3,7 +3,7 @@
<DialogModal
@onHandleCloseModal="onHandleCloseModal"
:modalTitle="modalTitle"
:width="`90vw`"
:width="`80vw`"
style="position: relative"
>
<!-- 平面图操作区域 -->
@ -12,6 +12,7 @@
ref="planeMapContainer"
:class="{ 'can-drag': canDrag() }"
:style="{ height: INITIAL_HEIGHT + 'px' }"
style="min-height: 60vh"
@mousemove="handleMouseMove"
>
<svg
@ -57,14 +58,14 @@
<!-- 操作按钮 -->
<n-flex vertical class="operation-container">
<n-button strong size="small" color="#5c96fa" @click="zoomIn($event)">
<n-button strong size="small" color="#5c96fa" @click="zoomIn()">
<template #icon>
<NIcon color="#fff">
<AddCircleOutline />
</NIcon>
</template>
</n-button>
<n-button strong size="small" color="#5c96fa" @click="zoomOut($event)">
<n-button strong size="small" color="#5c96fa" @click="zoomOut()">
<template #icon>
<NIcon color="#fff">
<RemoveCircleOutline />
@ -114,7 +115,7 @@ const scale = ref(1.0)
//
const MIN_SCALE = 0.5 //
const MAX_SCALE = 3 //
const MAX_SCALE = 5 //
const SCALE_STEP = 0.1 //
//
@ -172,7 +173,7 @@ const adjustOffsetOnZoom = (e, newScale) => {
}
//
const zoom = (direction, e = { clientX: 0, clientY: 0 }) => {
const zoom = (direction) => {
const delta = direction === 'in' ? SCALE_STEP : -SCALE_STEP
const newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale.value + delta))
@ -180,15 +181,15 @@ const zoom = (direction, e = { clientX: 0, clientY: 0 }) => {
const oldScale = scale.value
scale.value = newScale
updateSvgSize() //
adjustOffsetOnZoom(e, newScale) //
// adjustOffsetOnZoom(e, newScale) //
}
}
//
const zoomIn = (e) => zoom('in', e)
const zoomIn = () => zoom('in')
//
const zoomOut = (e) => zoom('out', e)
const zoomOut = () => zoom('out')
//
const handleWheel = (e) => {
@ -517,6 +518,13 @@ const getMarkerListAll = async () => {
markerAngle: item.theta,
isAdd: false,
})
if (svgWidth.value < 500 || svgHeight.value < 500) {
zoomIn()
zoomIn()
zoomIn()
zoomIn()
}
})
}
}
@ -591,6 +599,8 @@ watch(
if (newVal.mapWidth && newVal.mapHeight) {
INITIAL_WIDTH.value = Math.ceil(newVal.mapWidth / 2)
INITIAL_HEIGHT.value = Math.ceil(newVal.mapHeight / 2)
// INITIAL_WIDTH.value = newVal.mapWidth * 2
// INITIAL_HEIGHT.value = newVal.mapHeight * 2
svgWidth.value = INITIAL_WIDTH.value
svgHeight.value = INITIAL_HEIGHT.value
}