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

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

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

src/views/mapPage/realTimeMap/test.vue

@@ -1,115 +1,68 @@
 <template>
-  <div @click="handleClick" style="position: relative; width: 100%; height: 100vh">
+  <div>
-    <!-- 画线 -->
+    <label for="width">宽度:</label>
-    <div v-if="state.measureDistancesPoints.length === 2" :style="rangingLineStyle"></div>
+    <input v-model="width" type="number" id="width" />
-
+    <label for="height">高度:</label>
-    <!-- 显示距离信息 -->
+    <input v-model="height" type="number" id="height" />
-    <div v-if="state.measureDistancesNum !== null" :style="rangingTextStyle">
+    <div ref="scaleRef"></div>
-      距离: {{ state.measureDistancesNum.toFixed(2) }} 像素
-    </div>
-
-    <!-- 显示点 -->
-    <div
-      v-for="(point, index) in state.measureDistancesPoints"
-      :key="index"
-      :style="getRangingPointStyle(point)"
-    ></div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import * as d3 from 'd3'
 
-const state = reactive({
+const width = ref(500)
-  measureDistancesPoints: [],
+const height = ref(300)
-  measureDistancesNum: null
+const scaleRef = ref(null)
-})
 
-// 处理点击事件
+const drawScalesWithContent = () => {
-const handleClick = (event) => {
+  const margin = { top: 20, right: 20, bottom: 20, left: 40 }
-  if (state.measureDistancesPoints.length === 2) {
+  const innerWidth = width.value - margin.left - margin.right
-    // 如果已经有两个点，清空信息
+  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
-    if (state.measureDistancesPoints.length === 2) {
+    .select(scaleRef.value)
-      const [point1, point2] = state.measureDistancesPoints
+    .html('')
-      state.measureDistancesNum = Math.sqrt(
+    .append('svg')
-        Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)
+    .attr('width', width.value)
-      )
+    .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(() => {
-const rangingLineStyle = computed(() => {
+  drawScalesWithContent()
-  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], () => {
-const rangingTextStyle = computed(() => {
+  drawScalesWithContent()
-  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>
+<style scoped>
-/* 你可以在这里添加一些样式 */
+/* 可根据需要添加样式 */
 </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" label="序号" type="expand" width="60">
+      <el-table-column align="center" type="expand" width="30">
         <template #default="props">
           <div class="family-table">
             <el-table
@@ -175,6 +175,7 @@
           </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 />