Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.74:48080'
+VITE_BASE_URL='http://192.168.0.172:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务

src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue

@@ -229,10 +229,10 @@ const open = (item, list) => {
   console.log(item)
   form.value = item
   form.value.layersNumber = item.dataList.length || ''
-  form.value.deviceId = item.deviceId || item.dataObj.id || ''
+  form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
   form.value.positionMapId = props.positionMapId
   equipmentList.value = list
-  if (item.dataObj.deviceType) {
+  if (item?.dataObj?.deviceType) {
     deviceInfo.value.deviceType = item.dataObj.deviceType || ''
     getDeviceList()
   } else {

src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue

@@ -2,7 +2,12 @@
 <template>
   <div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
     <section>
-      <div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
+      <div
+        ref="horizontalRuler"
+        class="vue-ruler-h"
+        @mousedown.stop="horizontalDragRuler"
+        :style="{ width: width + 'px' }"
+      >
         <span
           v-for="(item, index) in xScale"
           :key="index"
@@ -11,7 +16,12 @@
           >{{ item.id }}</span
         >
       </div>
-      <div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
+      <div
+        ref="verticalRuler"
+        class="vue-ruler-v"
+        @mousedown.stop="verticalDragRuler"
+        :style="{ height: height + 'px' }"
+      >
         <span
           v-for="(item, index) in yScale"
           :key="index"
@@ -82,6 +92,12 @@ const props = defineProps({
     type: Number,
     default: 100,
     validator: (val) => val % 10 === 0
+  },
+  width: {
+    type: Number
+  },
+  height: {
+    type: Number
   }
 })
 
@@ -166,12 +182,10 @@ onBeforeUnmount(() => {
   off(document, 'mouseup', dottedLineUp)
   off(window, 'resize', windowResize)
 })
-//function
 const init = () => {
   box()
   scaleCalc()
 }
-
 const windowResize = () => {
   xScale.value = [{ id: 0 }]
   yScale.value = [{ id: 0 }]
@@ -193,8 +207,10 @@ const box = () => {
     getCalcRevise(xScale.value, contentLeft)
     getCalcRevise(yScale.value, contentTop)
   }
-  windowWidth.value = document.documentElement.clientWidth - leftSpacing
+  // windowWidth.value = document.documentElement.clientWidth - leftSpacing
-  windowHeight.value = document.documentElement.clientHeight - topSpacing - 80
+  // windowHeight.value = document.documentElement.clientHeight - topSpacing - 80
+  windowWidth.value = props.width + 18
+  windowHeight.value = props.height + 18
   rulerWidth = verticalRuler.value.clientWidth
   rulerHeight = horizontalRuler.value.clientHeight
 }
@@ -204,8 +220,8 @@ const setSpacing = () => {
 }
 // 计算刻度
 const scaleCalc = () => {
-  getCalc(xScale.value, windowWidth.value)
+  getCalc(xScale.value, props.width)
-  getCalc(yScale.value, windowHeight.value)
+  getCalc(yScale.value, props.height)
 }
 
 //获取刻度
@@ -360,7 +376,7 @@ const dragVerticalLine = (id) => {
 }
 
 .vue-ruler-h {
-  width: calc(100% - 18px);
+  // width: calc(100% - 18px);
   background-color: #333;
   height: 18px;
   left: 18px;
@@ -371,7 +387,7 @@ const dragVerticalLine = (id) => {
 
 .vue-ruler-v {
   width: 18px;
-  height: 85vh;
+  // height: 85vh;
   top: 18px;
   opacity: 0.6;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)

src/views/mapPage/realTimeMap/test.vue

@@ -1,110 +1,190 @@
 <template>
   <div>
-    <svg width="800" height="600">
+    <svg
-      <path
+      ref="svgElement"
-        v-for="(curve, index) in curves"
+      :width="width"
+      :height="height"
+      @mousedown="startDrawing"
+      @mousemove="drawLine"
+      @mouseup="stopDrawing"
+      @mouseleave="stopDrawing"
+    >
+      <!-- 渲染所有点 -->
+      <circle
+        v-for="(point, index) in points"
         :key="index"
-        :d="getCurvePath(curve)"
+        :cx="point.x"
-        :stroke="curve.isSelected ? 'red' : 'blue'"
+        :cy="point.y"
+        r="5"
+        fill="red"
+        @mousedown="startFromPoint(index, $event)"
+      />
+
+      <!-- 渲染所有直线 -->
+      <path
+        v-for="(line, index) in lines"
+        :key="'line-' + index"
+        :d="`M ${line.startPointX} ${line.startPointY} L ${line.endPointX} ${line.endPointY}`"
+        stroke="black"
         stroke-width="2"
         fill="none"
-        @mousedown="selectCurve(index)"
       />
-      <circle
+
-        v-for="(curve, index) in curves"
+      <!-- 实时绘制当前直线 -->
-        :key="'start-' + index"
+      <path
-        :cx="curve.beginControlX"
+        v-if="isDrawing"
-        :cy="curve.beginControlY"
+        :d="`M ${startX} ${startY} L ${currentX} ${currentY}`"
-        r="5"
+        stroke="blue"
-        fill="green"
+        stroke-width="2"
-        @mousedown="startDrag(index, 'start')"
+        fill="none"
-      />
-      <circle
-        v-for="(curve, index) in curves"
-        :key="'end-' + index"
-        :cx="curve.endControlX"
-        :cy="curve.endControlY"
-        r="5"
-        fill="green"
-        @mousedown="startDrag(index, 'end')"
       />
     </svg>
+
+    <!-- 显示直线数据 -->
+    <div>
+      <h3>直线数据：</h3>
+      <pre>{{ lines }}</pre>
+    </div>
   </div>
 </template>
 
-<script setup>
+<script>
 import { ref } from 'vue'
 
-// 初始点位数据
+export default {
-const curves = ref([
+  setup() {
-  {
+    const svgElement = ref(null) // SVG 元素的引用
-    startPointX: 100,
+    const width = 800 // SVG 宽度
-    startPointY: 100,
+    const height = 600 // SVG 高度
-    endPointX: 300,
-    endPointY: 100,
-    beginControlX: 100,
-    beginControlY: 100,
-    endControlX: 300,
-    endControlY: 100,
-    isSelected: false
-  },
-  {
-    startPointX: 200,
-    startPointY: 200,
-    endPointX: 400,
-    endPointY: 200,
-    beginControlX: 200,
-    beginControlY: 200,
-    endControlX: 400,
-    endControlY: 200,
-    isSelected: false
-  }
-])
 
-// 当前拖动的曲线索引和控制点类型
+    // 点位数据
-const dragging = ref({
+    const points = ref([
-  index: null,
+      { x: 10, y: 10 },
-  type: null
+      { x: 30, y: 100 },
-})
+      { x: 40, y: 40 },
+      { x: 230, y: 400 },
+      { x: 750, y: 640 }
+    ])
 
-// 获取曲线的路径字符串
+    // 直线数据
-const getCurvePath = (curve) => {
+    const lines = ref([])
-  return `M${curve.startPointX},${curve.startPointY} C${curve.beginControlX},${curve.beginControlY} ${curve.endControlX},${curve.endControlY} ${curve.endPointX},${curve.endPointY}`
-}
 
-// 选中曲线
+    // 当前绘制的直线状态
-const selectCurve = (index) => {
+    const isDrawing = ref(false)
-  curves.value.forEach((curve, i) => {
+    const startX = ref(0)
-    curve.isSelected = i === index
+    const startY = ref(0)
-  })
+    const currentX = ref(0)
-  console.log('Selected curve:', curves.value[index])
+    const currentY = ref(0)
-}
+    const startPointIndex = ref(null) // 起始点的索引
 
-// 开始拖动控制点
+    // 从点开始绘制
-const startDrag = (index, type) => {
+    const startFromPoint = (index, event) => {
-  dragging.value = { index, type }
+      const point = points.value[index]
-  window.addEventListener('mousemove', handleDrag)
+      startX.value = point.x
-  window.addEventListener('mouseup', endDrag)
+      startY.value = point.y
-}
+      startPointIndex.value = index
+      isDrawing.value = true
+      event.preventDefault() // 防止默认行为
+    }
 
-// 处理拖动事件
+    // 实时绘制
-const handleDrag = (event) => {
+    const drawLine = (event) => {
-  if (dragging.value.index !== null) {
+      if (isDrawing.value) {
-    const curve = curves.value[dragging.value.index]
+        const rect = svgElement.value.getBoundingClientRect()
-    if (dragging.value.type === 'start') {
+        currentX.value = event.clientX - rect.left
-      curve.beginControlX = event.offsetX
+        currentY.value = event.clientY - rect.top
-      curve.beginControlY = event.offsetY
+      }
-    } else {
+    }
-      curve.endControlX = event.offsetX
+
-      curve.endControlY = event.offsetY
+    // 结束绘制
+    const stopDrawing = () => {
+      if (isDrawing.value) {
+        // 找到最近的终点
+        const endPointIndex = findClosestPoint(currentX.value, currentY.value)
+
+        if (endPointIndex !== null && endPointIndex !== startPointIndex.value) {
+          const endPoint = points.value[endPointIndex]
+          const newLine = {
+            startPointX: startX.value,
+            startPointY: startY.value,
+            endPointX: endPoint.x,
+            endPointY: endPoint.y
+          }
+
+          // 检查是否已存在相同的直线
+          const isDuplicate = lines.value.some(
+            (line) =>
+              (line.startPointX === newLine.startPointX &&
+                line.startPointY === newLine.startPointY &&
+                line.endPointX === newLine.endPointX &&
+                line.endPointY === newLine.endPointY) ||
+              (line.startPointX === newLine.endPointX &&
+                line.startPointY === newLine.endPointY &&
+                line.endPointX === newLine.startPointX &&
+                line.endPointY === newLine.startPointY)
+          )
+
+          if (!isDuplicate) {
+            // 保存当前直线
+            lines.value.push(newLine)
+          }
+        }
+
+        // 重置状态
+        isDrawing.value = false
+        startX.value = 0
+        startY.value = 0
+        currentX.value = 0
+        currentY.value = 0
+        startPointIndex.value = null
+      }
+    }
+
+    // 找到最近的点
+    const findClosestPoint = (x, y) => {
+      let minDistance = Infinity
+      let closestIndex = null
+
+      points.value.forEach((point, index) => {
+        const distance = Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2)
+        if (distance < minDistance && distance < 10) {
+          // 10 是点的捕捉范围
+          minDistance = distance
+          closestIndex = index
+        }
+      })
+
+      return closestIndex
+    }
+
+    return {
+      svgElement,
+      width,
+      height,
+      points,
+      lines,
+      isDrawing,
+      startX,
+      startY,
+      currentX,
+      currentY,
+      startFromPoint,
+      drawLine,
+      stopDrawing
     }
   }
 }
-
-// 结束拖动
-const endDrag = () => {
-  dragging.value = { index: null, type: null }
-  window.removeEventListener('mousemove', handleDrag)
-  window.removeEventListener('mouseup', endDrag)
-}
 </script>
+
+<style scoped>
+svg {
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+}
+
+pre {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-radius: 5px;
+}
+</style>