优化

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)

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)

src/style/naiveUi.scss

@@ -135,3 +135,7 @@
 .n-radio .n-radio__dot {
     background-color: #1d3861; 
 }
+
+.n-input.n-input--disabled {
+    background-color: #1d3861;
+}

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: '播放',

src/views/home/components/modal-content/add-or-edit-marker-form.vue

@@ -7,11 +7,13 @@
     >
         <div class="add-or-edit-marker-form">
             <n-form
-                ref="addOrEditFormRef"
                 size="small"
-                label-placement="left"
-                style="margin-top: 10px"
                 label-width="140"
+                label-placement="left"
+                ref="addOrEditFormRef"
+                style="margin-top: 10px"
+                require-mark-placement="left"
+                :rules="addOrEditMarkerFormRules"
             >
                 <n-grid x-gap="24" :cols="24">
                     <n-gi :span="24">
@@ -24,7 +26,7 @@
                 </n-grid>
                 <n-grid x-gap="24" :cols="24">
                     <n-gi :span="24">
-                        <n-form-item label="点位名称：" prop="markerName">
+                        <n-form-item label="点位名称：" path="markerName">
                             <n-input
                                 v-model:value="markerParams.markerName"
                                 placeholder="点位名称"
@@ -65,9 +67,10 @@
                     <n-gi :span="24">
                         <n-form-item label="角度：" prop="markerAngle">
                             <n-input
-                                v-model:value="markerParams.markerAngle"
+                                disabled
-                                placeholder="角度"
                                 clearable
+                                placeholder="角度"
+                                v-model:value="markerParams.markerAngle"
                             />
                         </n-form-item>
                     </n-gi>
@@ -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,6 +302,8 @@ const addOrEditMarker = async (isCurrentPosition) => {
 const onHandleConfirm = () => {
     // emits('onHandleConfirm', markerParams.value)
 
+    addOrEditFormRef.value.validate().then(async (valid) => {
+        if (valid) {
             handleRobotActionApi({
                 puId: deviceInfo.value?.puId,
                 type: '2',
@@ -345,6 +354,8 @@ const onHandleConfirm = () => {
                     addOrEditMarker(isCurrentPosition)
                 }
             })
+        }
+    })
 }
 
 const onHandleGoToPoint = () => {
@@ -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

src/views/home/components/modal-content/control-deck.vue

@@ -37,7 +37,7 @@
 
                     <!-- 中间的按钮 -->
                     <div class="row-3-item-1-center" @click="handleStopCamera">
-                        <img alt="" class="center-icon" :src="!isStopLeft ? startImg : stopImg" />
+                        <img alt="" class="center-icon" :src="isStopLeft ? startImg : stopImg" />
                     </div>
 
                     <!-- 描述文字 -->
@@ -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',
     })
 

src/views/home/components/modal-content/preset-setting.vue

@@ -10,18 +10,18 @@
         <div
             class="plane-map-container"
             ref="planeMapContainer"
-            :class="{ 'can-drag': canDrag() }"
-            :style="{ height: INITIAL_HEIGHT + 'px' }"
             style="min-height: 70vh"
             @mousemove="handleMouseMove"
+            :class="{ 'can-drag': canDrag() }"
+            :style="{ height: INITIAL_HEIGHT + 'px' }"
         >
             <svg
                 ref="svgMapRef"
-                class="svg-map-container"
                 :width="svgWidth"
                 :height="svgHeight"
-                @wheel.passive="handleWheel"
                 @click="handleMapClick"
+                class="svg-map-container"
+                @wheel.passive="handleWheel"
                 :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
             >
                 <!-- 图片，宽高 100% 跟随 SVG -->
@@ -44,11 +44,59 @@
                     :ref="(el) => setItemRef(el, index)"
                     @contextmenu.prevent="handlePointRightClick($event, point, index)"
                 />
+
+                <!-- 方向指示器 -->
+                <g v-if="showDirectionIndicator">
+                    <!-- 圆环 -->
+                    <circle
+                        :cx="selectedPoint.x * scale + offsetX / scale"
+                        :cy="selectedPoint.y * scale + offsetY / scale"
+                        r="20"
+                        fill="none"
+                        stroke="#5c96fa"
+                        stroke-width="1"
+                    />
+                    <!-- 箭头线 -->
+                    <line
+                        :x1="selectedPoint.x * scale + offsetX / scale"
+                        :y1="selectedPoint.y * scale + offsetY / scale"
+                        :x2="arrowEndX"
+                        :y2="arrowEndY"
+                        stroke="#5c96fa"
+                        stroke-width="2"
+                        marker-end="url(#arrowhead)"
+                        @click="handlePointClickCircle()"
+                    />
+                    <!-- 角度显示 -->
+                    <!-- <text
+                        :x="selectedPoint.x * scale + offsetX / scale + 30"
+                        :y="selectedPoint.y * scale + offsetY / scale - 30"
+                        fill="#5c96fa"
+                        font-size="12"
+                    >
+                        {{ Math.round(currentAngle) }}°
+                    </text> -->
+                </g>
+
+                <!-- 箭头标记定义 -->
+                <defs>
+                    <marker
+                        id="arrowhead"
+                        markerWidth="10"
+                        markerHeight="7"
+                        refX="0"
+                        refY="3.5"
+                        orient="auto"
+                    >
+                        <polygon points="0 0, 10 3.5, 0 7" fill="#5c96fa" />
+                    </marker>
+                </defs>
             </svg>
 
             <div v-if="showTooltip && mousePosition" class="coord-tooltip" :style="tooltipStyle">
                 <!-- 数据向下取整 -->
-                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) }}°
             </div>
 
             <div v-if="showContextMenu" class="context-menu" :style="contextMenuStyle" @click.stop>
@@ -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_WIDTH = ref(400)
-const INITIAL_HEIGHT = ref(0)
+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,10 +486,12 @@ const handleMapClick = (e) => {
         )
     })
 
-    if (isPointClick) {
+    // 如果点击了非点位区域，隐藏方向指示器
-        return
+    if (!isPointClick) {
+        showDirectionIndicator.value = false
     }
 
+    if (!isPointClick) {
         const svgRect = svgMapRef.value.getBoundingClientRect()
         const isInside =
             e.clientX >= svgRect.left &&
@@ -369,6 +502,8 @@ const handleMapClick = (e) => {
         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, // 像素坐标 真实数据
+        xCount: point.xCount,
-        yCount: point.yCount, // 像素坐标 真实数据
+        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;
+}
 </style>