This commit is contained in:
parent
5a448431aa
commit
50dd58254e
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -326,10 +326,10 @@ const onHandleConfirm = () => {
|
|||
content: '机器人当前位置与预置点位不一致,确定新增吗?',
|
||||
positiveText: '确定新增',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {},
|
||||
onNegativeClick: async () => {
|
||||
onPositiveClick: async () => {
|
||||
addOrEditMarker(isCurrentPosition)
|
||||
},
|
||||
onNegativeClick: () => {},
|
||||
})
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue