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

@@ -6,36 +6,30 @@
     class="node-form-dialog"
     @close="dialogClose"
   >
-    <el-form :model="form" label-width="80" ref="ruleFormRef" :rules="rules">
+    <el-form :model="form" label-width="auto" ref="ruleFormRef">
-      <el-form-item label="X" prop="locationX" required>
+      <el-form-item
-        <el-input-number
+        label="X"
-          style="width: 100%"
+        prop="locationX"
-          v-model="form.locationX"
+        required
-          :min="0"
+        :rules="{ required: true, message: '请输入x轴坐标', trigger: 'change' }"
-          :max="imgBgObj.width"
+      >
-          placeholder="请输入"
+        <el-input type="number" v-model="form.locationX" placeholder="请输入" :min="0" />
-          controls-position="right"
-        />
       </el-form-item>
-      <el-form-item label="Y" prop="locationY" required>
+      <el-form-item
-        <el-input-number
+        label="Y"
-          style="width: 100%"
+        prop="locationY"
-          v-model="form.locationY"
+        required
-          :min="0"
+        :rules="{ required: true, message: '请输入y轴坐标', trigger: 'change' }"
-          :max="imgBgObj.height"
+      >
-          placeholder="请输入"
+        <el-input type="number" v-model="form.locationY" placeholder="请输入" :min="0" />
-          controls-position="right"
-        />
       </el-form-item>
-      <el-form-item label="弧度" prop="locationYaw" required>
+      <el-form-item
-        <el-input-number
+        label="弧度"
-          style="width: 100%"
+        prop="locationYaw"
-          v-model="form.locationYaw"
+        required
-          :min="0"
+        :rules="{ required: true, message: '请输入弧度', trigger: 'change' }"
-          placeholder="请输入"
+      >
-          controls-position="right"
+        <el-input type="number" v-model="form.locationYaw" placeholder="请输入" :min="0" />
-          :precision="2"
-        />
       </el-form-item>
       <el-form-item label="类型" prop="type" required>
         <el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
@@ -49,22 +43,31 @@
       </el-form-item>
 
       <div v-if="form.type === 2 || form.type === 3 || form.type === 4">
-        <el-form-item label="层数" prop="layersNumber" required v-if="form.type === 2">
+        <el-form-item
-          <el-input-number
+          label="层数"
-            v-model="form.layersNumber"
+          prop="layersNumber"
-            :min="1"
+          :rules="{ required: true, message: '请输入层数', trigger: 'change' }"
-            :max="4"
+          required
-            :precision="0"
+          v-if="form.type === 2"
-            :step="1"
+        >
-            step-strictly
+          <el-input-number v-model="form.layersNumber" :min="1" :max="3" />
-          />
-          <el-text class="mx-1">（最大层数：4）</el-text>
         </el-form-item>
-        <el-form-item label="排序" prop="locationNumber" v-if="form.type === 2" required>
+        <el-form-item
+          label="排序"
+          prop="locationNumber"
+          v-if="form.type === 2"
+          required
+          :rules="{ required: true, message: '请输入排序', trigger: 'change' }"
+        >
           <el-input-number v-model="form.locationNumber" :min="1" :max="10000000" />
-          <el-text class="mx-1">（最大值：10000000）</el-text>
         </el-form-item>
-        <el-form-item label="编号" prop="deviceId" required v-if="form.type === 3">
+        <el-form-item
+          label="编号"
+          prop="deviceId"
+          required
+          v-if="form.type === 3"
+          :rules="{ required: true, message: '请选择设备编号', trigger: 'change' }"
+        >
           <div>
             <el-select
               v-model="deviceInfo.deviceType"
@@ -80,6 +83,7 @@
                 :value="dict.value"
               />
             </el-select>
+
             <el-select
               v-model="form.deviceId"
               class="!w-160px ml-4"
@@ -97,25 +101,15 @@
             </el-select>
           </div>
         </el-form-item>
-        <el-form-item label="库位长度" prop="locationDeep" required>
+        <el-form-item label="库位长度" prop="locationDeep">
           <div style="display: flex">
-            <el-input-number
+            <el-input type="number" v-model="form.locationDeep" placeholder="请输入" />
-              placeholder="请输入"
-              v-model="form.locationDeep"
-              :min="10"
-              :max="imgBgObj.height"
-            />
             <span class="ml-2">cm</span>
           </div>
         </el-form-item>
-        <el-form-item label="库位宽度" prop="locationWide" required>
+        <el-form-item label="库位宽度" prop="locationWide">
           <div style="display: flex">
-            <el-input-number
+            <el-input type="number" v-model="form.locationWide" placeholder="请输入" />
-              placeholder="请输入"
-              v-model="form.locationWide"
-              :min="10"
-              :max="imgBgObj.width"
-            />
             <span class="ml-2">cm</span>
           </div>
         </el-form-item>
@@ -171,10 +165,6 @@ const props = defineProps({
   positionMapId: {
     type: String,
     default: () => ''
-  },
-  imgBgObj: {
-    type: Object,
-    default: () => {}
   }
 })
 
@@ -201,10 +191,7 @@ const rules = reactive({
   locationYaw: [{ required: true, message: '请输入弧度', trigger: 'blur' }],
   type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
   layersNumber: [{ required: true, message: '请输入层数', trigger: 'blur' }],
-  locationNumber: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+  locationNumber: [{ required: true, message: '请输入排序', trigger: 'blur' }]
-  deviceId: [{ required: true, message: '请选择设备编号', trigger: 'blur' }],
-  locationDeep: [{ required: true, message: '请选择库位长度', trigger: 'blur' }],
-  locationWide: [{ required: true, message: '请选择库位宽度', trigger: 'blur' }]
 })
 
 const emit = defineEmits(['submitNodeSuccess', 'addEventListener'])

src/views/mapPage/realTimeMap/editMap.vue

@@ -644,7 +644,6 @@
     <editNodeProperties
       ref="editNodePropertiesRef"
       :positionMapId="imgBgObj.positionMapId"
-      :imgBgObj="imgBgObj"
       @submitNodeSuccess="submitNodeSuccess"
       @addEventListener="addEventListener"
     />

src/views/mapPage/realTimeMap/test.vue

@@ -1,68 +1,115 @@
 <template>
-  <div>
+  <div @click="handleClick" style="position: relative; width: 100%; height: 100vh">
-    <label for="width">宽度:</label>
+    <!-- 画线 -->
-    <input v-model="width" type="number" id="width" />
+    <div v-if="state.measureDistancesPoints.length === 2" :style="rangingLineStyle"></div>
-    <label for="height">高度:</label>
+
-    <input v-model="height" type="number" id="height" />
+    <!-- 显示距离信息 -->
-    <div ref="scaleRef"></div>
+    <div v-if="state.measureDistancesNum !== null" :style="rangingTextStyle">
+      距离: {{ state.measureDistancesNum.toFixed(2) }} 像素
+    </div>
+
+    <!-- 显示点 -->
+    <div
+      v-for="(point, index) in state.measureDistancesPoints"
+      :key="index"
+      :style="getRangingPointStyle(point)"
+    ></div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { ref, computed } from 'vue'
-import * as d3 from 'd3'
 
-const width = ref(500)
+const state = reactive({
-const height = ref(300)
+  measureDistancesPoints: [],
-const scaleRef = ref(null)
+  measureDistancesNum: null
+})
 
-const drawScalesWithContent = () => {
+// 处理点击事件
-  const margin = { top: 20, right: 20, bottom: 20, left: 40 }
+const handleClick = (event) => {
-  const innerWidth = width.value - margin.left - margin.right
+  if (state.measureDistancesPoints.length === 2) {
-  const innerHeight = height.value - margin.top - margin.bottom
+    // 如果已经有两个点，清空信息
+    state.measureDistancesPoints = []
+    state.measureDistancesNum = null
+  } else {
+    // 添加当前点击的点
+    state.measureDistancesPoints.push({ x: event.clientX, y: event.clientY })
 
-  const svg = d3
+    // 当有两个点时，计算距离
-    .select(scaleRef.value)
+    if (state.measureDistancesPoints.length === 2) {
-    .html('')
+      const [point1, point2] = state.measureDistancesPoints
-    .append('svg')
+      state.measureDistancesNum = Math.sqrt(
-    .attr('width', width.value)
+        Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)
-    .attr('height', height.value)
+      )
-    .append('g')
+    }
-    .attr('transform', `translate(${margin.left},${margin.top})`)
-
-  // 水平刻度尺
-  const xScale = d3.scaleLinear().domain([0, 100]).range([0, innerWidth])
-
-  const xAxis = d3.axisTop(xScale)
-
-  svg.append('g').call(xAxis)
-
-  // 竖直刻度尺
-  const yScale = d3.scaleLinear().domain([0, 100]).range([innerHeight, 0])
-
-  const yAxis = d3.axisLeft(yScale)
-
-  svg.append('g').call(yAxis)
-
-  // 中间添加内容，这里以绘制圆形为例
-  const numCircles = 10
-  for (let i = 0; i < numCircles; i++) {
-    const x = Math.random() * innerWidth
-    const y = Math.random() * innerHeight
-    const radius = Math.random() * 10 + 5
-    svg.append('circle').attr('cx', x).attr('cy', y).attr('r', radius).attr('fill', 'blue')
   }
 }
 
-onMounted(() => {
+// 计算连线的样式
-  drawScalesWithContent()
+const rangingLineStyle = computed(() => {
+  if (state.measureDistancesPoints.length === 2) {
+    const [point1, point2] = state.measureDistancesPoints
+    const length = Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+    return {
+      position: 'absolute',
+      left: `${point1.x}px`,
+      top: `${point1.y}px`,
+      width: `${length}px`,
+      height: '2px',
+      backgroundColor: 'red',
+      transform: `rotate(${angle}deg)`,
+      transformOrigin: '0 0'
+    }
+  }
+  return {}
 })
 
-watch([width, height], () => {
+// 计算距离信息的样式（显示在连线中间，并根据角度调整文字方向）
-  drawScalesWithContent()
+const rangingTextStyle = computed(() => {
+  if (state.measureDistancesPoints.length === 2) {
+    const [point1, point2] = state.measureDistancesPoints
+    const midX = (point1.x + point2.x) / 2
+    const midY = (point1.y + point2.y) / 2
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+
+    // 调整文字方向，使其始终易于阅读
+    let textRotation = 0
+    if (angle > 90 || angle < -90) {
+      textRotation = angle + 180 // 翻转文字方向
+    } else {
+      textRotation = angle
+    }
+
+    return {
+      position: 'absolute',
+      left: `${midX}px`,
+      top: `${midY}px`,
+      transform: `translate(-50%, -50%) rotate(${textRotation}deg)`,
+      backgroundColor: 'rgba(255, 255, 255, 0.8)',
+      padding: '4px 8px',
+      borderRadius: '4px',
+      fontSize: '14px',
+      color: 'black',
+      whiteSpace: 'nowrap', // 防止文字换行
+      pointerEvents: 'none' // 防止文字遮挡点击事件
+    }
+  }
+  return {}
+})
+
+// 计算点的样式
+const getRangingPointStyle = (point) => ({
+  position: 'absolute',
+  left: `${point.x - 5}px`,
+  top: `${point.y - 5}px`,
+  width: '10px',
+  height: '10px',
+  backgroundColor: 'blue',
+  borderRadius: '50%'
 })
 </script>
 
-<style scoped>
+<style>
-/* 可根据需要添加样式 */
+/* 你可以在这里添加一些样式 */
 </style>

src/views/mapPage/taskManagement/taskList.vue

@@ -75,7 +75,7 @@
       :header-cell-style="{ backgroundColor: '#EBF1FF', color: '#0D162A', padding: '13px 0' }"
       v-loading="loading"
     >
-      <el-table-column align="center" type="expand" width="30">
+      <el-table-column align="center" label="序号" type="expand" width="60">
         <template #default="props">
           <div class="family-table">
             <el-table
@@ -175,7 +175,6 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="序号" type="index" align="center" width="60" />
       <el-table-column label="任务号" prop="taskNo" align="center" />
       <el-table-column label="优先级" prop="priority" align="center" />
       <el-table-column label="物料信息" prop="skuInfo" align="center" show-overflow-tooltip />