From bc65a8ceae0a1ab5b6af43b3bfa472ca191bff31 Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Tue, 12 Aug 2025 09:56:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/http/request.js | 2 + src/http/robot_request.js | 2 + src/style/naiveUi.scss | 4 + .../home/components/control-deck-new.vue | 1 + .../modal-content/add-or-edit-marker-form.vue | 117 +++---- .../components/modal-content/control-deck.vue | 6 +- .../modal-content/preset-setting.vue | 289 ++++++++++++++++-- 7 files changed, 343 insertions(+), 78 deletions(-) diff --git a/src/http/request.js b/src/http/request.js index 31bfffe..01bd70b 100644 --- a/src/http/request.js +++ b/src/http/request.js @@ -89,6 +89,8 @@ service.interceptors.response.use( setTimeout(() => { message.error('登录已经失效，请重新登录') + // 清除所有localStorage + localStorage.clear() window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws/#/unified/' }, 500) return Promise.reject(data) diff --git a/src/http/robot_request.js b/src/http/robot_request.js index b073fde..66b9232 100644 --- a/src/http/robot_request.js +++ b/src/http/robot_request.js @@ -86,6 +86,8 @@ service.interceptors.response.use( // modelShow = false // } message.error('登录已经失效，请重新登录') + // 清除所有localStorage + localStorage.clear() setTimeout(() => { window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws/#/unified/' }, 500) diff --git a/src/style/naiveUi.scss b/src/style/naiveUi.scss index 8e5f0d5..e6bf88e 100644 --- a/src/style/naiveUi.scss +++ b/src/style/naiveUi.scss @@ -134,4 +134,8 @@ .n-radio .n-radio__dot { background-color: #1d3861; +} + +.n-input.n-input--disabled { + background-color: #1d3861; } \ No newline at end of file diff --git a/src/views/home/components/control-deck-new.vue b/src/views/home/components/control-deck-new.vue index e0e5bdf..9343408 100644 --- a/src/views/home/components/control-deck-new.vue +++ b/src/views/home/components/control-deck-new.vue @@ -424,6 +424,7 @@ const audioMimeTypes = ref( '.pcm,.wav,.aac,audio/wav,audio/x-wav,audio/x-aiff,audio/aac,audio/x-aac', ) +// 音频操作选项 const audioOptions = ref([ { label: '播放', diff --git a/src/views/home/components/modal-content/add-or-edit-marker-form.vue b/src/views/home/components/modal-content/add-or-edit-marker-form.vue index accc42e..edd2858 100644 --- a/src/views/home/components/modal-content/add-or-edit-marker-form.vue +++ b/src/views/home/components/modal-content/add-or-edit-marker-form.vue @@ -7,11 +7,13 @@ >
@@ -24,7 +26,7 @@ - + @@ -153,9 +156,13 @@ const message = useMessage() const deviceToken = ref('') const deviceInfo = ref(null) const isCurrentPosition = ref(null) +const addOrEditFormRef = ref(null) const dialog = useDialog() const emits = defineEmits(['onHandleCloseAddMarkerModal', 'onHandleConfirm']) +const addOrEditMarkerFormRules = ref({ + markerName: [{ required: true, message: '请输入点位名称' }], +}) const cameraNode = ref({ token: '', puid: '', @@ -295,54 +302,58 @@ const addOrEditMarker = async (isCurrentPosition) => { const onHandleConfirm = () => { // emits('onHandleConfirm', markerParams.value) - handleRobotActionApi({ - puId: deviceInfo.value?.puId, - type: '2', - }).then(async (res) => { - const { Robot_x, Robot_y, PTZ_x, PTZ_y, PTZ_zoom, Robot_theta } = res?.data.data + addOrEditFormRef.value.validate().then(async (valid) => { + if (valid) { + handleRobotActionApi({ + puId: deviceInfo.value?.puId, + type: '2', + }).then(async (res) => { + const { Robot_x, Robot_y, PTZ_x, PTZ_y, PTZ_zoom, Robot_theta } = res?.data.data - const isCurrentPosition = { - Robot_x, - Robot_y, - PTZ_x, - PTZ_y, - PTZ_zoom, - Robot_theta, - } + const isCurrentPosition = { + Robot_x, + Robot_y, + PTZ_x, + PTZ_y, + PTZ_zoom, + Robot_theta, + } - // 判断当前点位和机器人位置是否一致 - if ( - Math.abs(Robot_x - markerParams.value.xCount) > 2 || - Math.abs(Robot_y - markerParams.value.yCount) > 2 - ) { - if (markerParams.value.type === '修改') { - dialog.warning({ - title: '温馨提示', - content: - '机器人当前位置与预置点位不一致，您可以点击前往点位按钮，也可以选择继续修改？', - positiveText: '前往点位', - negativeText: '继续修改', - onPositiveClick: () => { - onHandleGoToPoint() - }, - onNegativeClick: async () => { - addOrEditMarker(isCurrentPosition) - }, - }) - } else { - dialog.warning({ - title: '温馨提示', - content: '机器人当前位置与预置点位不一致，确定新增吗？', - positiveText: '确定新增', - negativeText: '取消', - onPositiveClick: async () => { - addOrEditMarker(isCurrentPosition) - }, - onNegativeClick: () => {}, - }) - } - } else { - addOrEditMarker(isCurrentPosition) + // 判断当前点位和机器人位置是否一致 + if ( + Math.abs(Robot_x - markerParams.value.xCount) > 2 || + Math.abs(Robot_y - markerParams.value.yCount) > 2 + ) { + if (markerParams.value.type === '修改') { + dialog.warning({ + title: '温馨提示', + content: + '机器人当前位置与预置点位不一致，您可以点击前往点位按钮，也可以选择继续修改？', + positiveText: '前往点位', + negativeText: '继续修改', + onPositiveClick: () => { + onHandleGoToPoint() + }, + onNegativeClick: async () => { + addOrEditMarker(isCurrentPosition) + }, + }) + } else { + dialog.warning({ + title: '温馨提示', + content: '机器人当前位置与预置点位不一致，确定新增吗？', + positiveText: '确定新增', + negativeText: '取消', + onPositiveClick: async () => { + addOrEditMarker(isCurrentPosition) + }, + onNegativeClick: () => {}, + }) + } + } else { + addOrEditMarker(isCurrentPosition) + } + }) } }) } @@ -390,7 +401,7 @@ watch( onMounted(async () => { deviceToken.value = await getRobotTokenFn() deviceInfo.value = await getRobotDeviceListFn() - const mapInfo = await getRobotMapInfoFn(deviceInfo?.puId) + const mapInfo = await getRobotMapInfoFn(deviceInfo.value?.puId) markerParams.value.mapId = mapInfo?.mapId cameraNode.value.puid = deviceInfo.value?.puId cameraNode.value.token = deviceToken.value diff --git a/src/views/home/components/modal-content/control-deck.vue b/src/views/home/components/modal-content/control-deck.vue index 1f269cf..865d89e 100644 --- a/src/views/home/components/modal-content/control-deck.vue +++ b/src/views/home/components/modal-content/control-deck.vue @@ -37,7 +37,7 @@
- +
@@ -132,7 +132,7 @@ const message = useMessage() const isStopLeft = ref(false) const isStopRight = ref(false) const isZoom = ref(false) -const robotBaseInfo = ref({}) +const robotBaseInfo = ref({ type: '' }) const props = defineProps({ deviceToken: { @@ -148,7 +148,7 @@ const props = defineProps({ // 获取机器人的基础信息 const getRobotBaseInfo = async () => { const { data: res } = await handleRobotActionApi({ - puId: deviceInfo.value?.puId, + puId: props.deviceInfo.value?.puId, type: '1', }) diff --git a/src/views/home/components/modal-content/preset-setting.vue b/src/views/home/components/modal-content/preset-setting.vue index 08e3350..4a3fc43 100644 --- a/src/views/home/components/modal-content/preset-setting.vue +++ b/src/views/home/components/modal-content/preset-setting.vue @@ -10,18 +10,18 @@
@@ -44,11 +44,59 @@ :ref="(el) => setItemRef(el, index)" @contextmenu.prevent="handlePointRightClick($event, point, index)" /> + + + + + + + + + + + + + + + + +
- X: {{ Math.floor(mousePosition.x) * 2 }}, Y: {{ Math.floor(mousePosition.y) * 2 }} + X: {{ Math.floor(mousePosition.x) * 2 }}, Y:{{ Math.floor(mousePosition.y) * 2 }}, + 角度：{{ Math.round(currentAngle) }}°
@@ -86,6 +134,7 @@ import { AddCircleOutline, RemoveCircleOutline } from '@vicons/ionicons5' import { getRobotDeviceListFn, getRobotMapInfoFn } from '@/utils/getRobotInfo' import { getMarkerListAllApi, deleteMarkerApi } from '@/api/home' import { useMessage } from 'naive-ui' +import demoImg from '@/assets/demo.png' const modalTitle = ref('预置位配置') // 模态框标题 const mousePosition = ref(null) // 鼠标位置 @@ -94,8 +143,8 @@ const isPointClickStatus = ref(true) // 是否点击点位 const mapInfo = ref({}) // 地图信息 // SVG 初始尺寸 -const INITIAL_WIDTH = ref(0) -const INITIAL_HEIGHT = ref(0) +const INITIAL_WIDTH = ref(400) +const INITIAL_HEIGHT = ref(400) // SVG 动态宽高 const svgWidth = ref(INITIAL_WIDTH.value) @@ -133,6 +182,13 @@ const emits = defineEmits(['onHandleCloseModal', 'onHandleAddMarker']) // 定义 const message = useMessage() +// 新增的状态变量 +const showDirectionIndicator = ref(false) // 是否显示方向指示器 +const selectedPoint = ref({ x: 0, y: 0 }) // 选中的点位坐标 +const currentAngle = ref(0) // 当前角度 +const arrowEndX = ref(0) // 箭头终点X +const arrowEndY = ref(0) // 箭头终点Y + // 定义props const props = defineProps({ markerInfoNew: { @@ -321,7 +377,26 @@ const showTooltip = ref(false) // 鼠标移动事件 const handleMouseMove = throttle((e) => { + // if (!svgMapRef.value) return + // // 检查鼠标是否在SVG内 + // const svgRect = svgMapRef.value.getBoundingClientRect() + // const isInside = + // e.clientX >= svgRect.left && + // e.clientX <= svgRect.right && + // e.clientY >= svgRect.top && + // e.clientY <= svgRect.bottom + + // showTooltip.value = isInside + // if (isInside) { + // mousePosition.value = getLogicalPosition(e.clientX, e.clientY) + // tooltipStyle.value = { + // left: `${e.clientX}px`, + // top: `${e.clientY}px`, + // } + // } + if (!svgMapRef.value) return + // 检查鼠标是否在SVG内 const svgRect = svgMapRef.value.getBoundingClientRect() const isInside = @@ -337,13 +412,69 @@ const handleMouseMove = throttle((e) => { left: `${e.clientX}px`, top: `${e.clientY}px`, } + + // 如果正在显示方向指示器，计算角度 + if (showDirectionIndicator.value) { + const centerX = selectedPoint.value.x * scale.value + offsetX.value / scale.value + const centerY = selectedPoint.value.y * scale.value + offsetY.value / scale.value + + // 获取鼠标在SVG中的坐标 + const mouseX = (e.clientX - svgRect.left - offsetX.value) / scale.value + const mouseY = (e.clientY - svgRect.top - offsetY.value) / scale.value + + // 计算相对于中心点的差值 + const dx = mouseX - selectedPoint.value.x + const dy = selectedPoint.value.y - mouseY // Y轴翻转 + + // 计算角度（0-360度） + let angle = (Math.atan2(dy, dx) * 180) / Math.PI + if (angle < 0) angle += 360 + + currentAngle.value = angle + updateArrowPosition(angle) + + // 更新点位的角度信息 + if (selectedPoint.value.index !== undefined) { + devicePoints.value[selectedPoint.value.index].markerAngle = Math.round(angle) + } + } } }, 30) // 左键点击标点 const handleMapClick = (e) => { + // isPointClickStatus.value = false + // if (!svgMapRef.value || isDragging.value) return // 拖拽过程中不标点 + // // 判断是否点击了标记的点位 + // const isPointClick = devicePoints.value.some((point, index) => { + // const pointRect = itemRefs.value[index].getBoundingClientRect() + // return ( + // e.clientX >= pointRect.left && + // e.clientX <= pointRect.right && + // e.clientY >= pointRect.top && + // e.clientY <= pointRect.bottom + // ) + // }) + + // if (isPointClick) { + // return + // } + + // const svgRect = svgMapRef.value.getBoundingClientRect() + // const isInside = + // e.clientX >= svgRect.left && + // e.clientX <= svgRect.right && + // e.clientY >= svgRect.top && + // e.clientY <= svgRect.bottom + + // if (isInside) { + // const pos = getLogicalPosition(e.clientX, e.clientY) + // addDevicePoint(pos.x, pos.y, pos.y1) + // } + isPointClickStatus.value = false - if (!svgMapRef.value || isDragging.value) return // 拖拽过程中不标点 + if (!svgMapRef.value || isDragging.value) return + // 判断是否点击了标记的点位 const isPointClick = devicePoints.value.some((point, index) => { const pointRect = itemRefs.value[index].getBoundingClientRect() @@ -355,20 +486,24 @@ const handleMapClick = (e) => { ) }) - if (isPointClick) { - return + // 如果点击了非点位区域，隐藏方向指示器 + if (!isPointClick) { + showDirectionIndicator.value = false } - const svgRect = svgMapRef.value.getBoundingClientRect() - const isInside = - e.clientX >= svgRect.left && - e.clientX <= svgRect.right && - e.clientY >= svgRect.top && - e.clientY <= svgRect.bottom + if (!isPointClick) { + const svgRect = svgMapRef.value.getBoundingClientRect() + const isInside = + e.clientX >= svgRect.left && + e.clientX <= svgRect.right && + e.clientY >= svgRect.top && + e.clientY <= svgRect.bottom - if (isInside) { - const pos = getLogicalPosition(e.clientX, e.clientY) - addDevicePoint(pos.x, pos.y, pos.y1) + if (isInside) { + const pos = getLogicalPosition(e.clientX, e.clientY) + addDevicePoint(pos.x, pos.y, pos.y1) + console.log(pos, 'pos') + } } } @@ -376,6 +511,7 @@ const handleMapClick = (e) => { const handlePointRightClick = (e, point, index) => { e.preventDefault() selectedPointIndex.value = index + showDirectionIndicator.value = false // 隐藏方向指示器 // 计算菜单位置 const containerRect = planeMapContainer.value.getBoundingClientRect() @@ -467,22 +603,121 @@ const addDevicePoint = (x, y, y1) => { }) } +// 更新箭头位置 +const updateArrowPosition = (angle) => { + const radius = 20 // 半径20像素 + const centerX = selectedPoint.value.x * scale.value + offsetX.value / scale.value + const centerY = selectedPoint.value.y * scale.value + offsetY.value / scale.value + + // 计算箭头终点坐标（注意SVG的Y轴是向下的） + arrowEndX.value = centerX + radius * Math.cos((angle * Math.PI) / 180) + arrowEndY.value = centerY - radius * Math.sin((angle * Math.PI) / 180) +} + // 点击标记的点位 const handlePointClick = (point, index) => { if (point.id) { message.warning('点位已存在，无需新增，可右击修改或删除') return } + // const markerInfo = { + // type: '新增', + // xCount: point.xCount, // 像素坐标 真实数据 + // yCount: point.yCount, // 像素坐标 真实数据 + // markerIndex: index, + // markerX: point.markerX, + // markerY: point.markerY, + // markerY1: point.markerY1, + // markerName: point.markerName, + // markerAngle: point.markerAngle, + // markerPreset: point.markerPreset, + // isAdd: point.isAdd, + // } + // emits('onHandleAddMarker', markerInfo) + + // if (point.id) { + // message.warning('点位已存在，无需新增，可右击修改或删除') + // return + // } + + // 设置选中的点位和初始角度 + selectedPoint.value = { + x: point.markerX, + y: point.markerY1, + index, + point, + } + currentAngle.value = 0 + updateArrowPosition(0) // 初始角度为0（向右） + showDirectionIndicator.value = true + + // const markerInfo = { + // type: '新增', + // xCount: point.xCount, // 像素坐标 真实数据 + // yCount: point.yCount, // 像素坐标 真实数据 + // markerIndex: index, + // markerX: point.markerX, + // markerY: point.markerY, + // markerY1: point.markerY1, + // markerName: point.markerName, + // markerAngle: point.markerAngle, + // markerPreset: point.markerPreset, + // isAdd: point.isAdd, + // } + // emits('onHandleAddMarker', markerInfo) + + // 如果已经显示方向指示器且是同一个点 + // if (showDirectionIndicator.value && selectedPoint.value.index === index) { + // // 检查是否有角度 + // if (currentAngle.value !== undefined && currentAngle.value !== null) { + // // 更新点位的角度信息 + // point.markerAngle = Math.round(currentAngle.value) + + // const markerInfo = { + // type: '新增', + // xCount: point.xCount, + // yCount: point.yCount, + // markerIndex: index, + // markerX: point.markerX, + // markerY: point.markerY, + // markerY1: point.markerY1, + // markerName: point.markerName, + // markerAngle: point.markerAngle, + // markerPreset: point.markerPreset, + // isAdd: point.isAdd, + // } + // emits('onHandleAddMarker', markerInfo) + // } + // showDirectionIndicator.value = false // 隐藏方向指示器 + // } else { + // // 设置选中的点位和初始角度 + // selectedPoint.value = { + // x: point.markerX, + // y: point.markerY1, + // index, + // point, + // } + // currentAngle.value = point.markerAngle || 0 // 使用已有角度或默认0 + // updateArrowPosition(currentAngle.value) + // showDirectionIndicator.value = true + // } +} + +// 点击了角度线 +const handlePointClickCircle = () => { + const point = devicePoints.value.find((item) => item.markerY1 == selectedPoint.value.y) + const index = devicePoints.value.findIndex((item) => item.markerY1 == selectedPoint.value.y) + const markerInfo = { type: '新增', - xCount: point.xCount, // 像素坐标 真实数据 - yCount: point.yCount, // 像素坐标 真实数据 + xCount: point.xCount, + yCount: point.yCount, markerIndex: index, markerX: point.markerX, markerY: point.markerY, markerY1: point.markerY1, markerName: point.markerName, - markerAngle: point.markerAngle, + markerAngle: point.markerAngle * 1, markerPreset: point.markerPreset, isAdd: point.isAdd, } @@ -691,4 +926,14 @@ watch( } } } + +/* 新增的样式 */ +.angle-display { + position: absolute; + background: rgba(255, 255, 255, 0.8); + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + pointer-events: none; +}