bug修改

2025-03-20 17:35:23 +08:00 · 2025-03-20 17:35:23 +08:00 · 87e57f59f2
commit 87e57f59f2
parent 00cfeae17a
4 changed files with 117 additions and 149 deletions
--- a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
+++ b/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-item
-        label="X"
-        prop="locationX"
-        required
-        :rules="{ required: true, message: '请输入x轴坐标', trigger: 'change' }"
-      >
-        <el-input type="number" v-model="form.locationX" placeholder="请输入" :min="0" />
+    <el-form :model="form" label-width="80" ref="ruleFormRef" :rules="rules">
+      <el-form-item label="X" prop="locationX" required>
+        <el-input-number
+          style="width: 100%"
+          v-model="form.locationX"
+          :min="0"
+          :max="imgBgObj.width"
+          placeholder="请输入"
+          controls-position="right"
+        />
      </el-form-item>
-      <el-form-item
-        label="Y"
-        prop="locationY"
-        required
-        :rules="{ required: true, message: '请输入y轴坐标', trigger: 'change' }"
-      >
-        <el-input type="number" v-model="form.locationY" placeholder="请输入" :min="0" />
+      <el-form-item label="Y" prop="locationY" required>
+        <el-input-number
+          style="width: 100%"
+          v-model="form.locationY"
+          :min="0"
+          :max="imgBgObj.height"
+          placeholder="请输入"
+          controls-position="right"
+        />
      </el-form-item>
-      <el-form-item
-        label="弧度"
-        prop="locationYaw"
-        required
-        :rules="{ required: true, message: '请输入弧度', trigger: 'change' }"
-      >
-        <el-input type="number" v-model="form.locationYaw" placeholder="请输入" :min="0" />
+      <el-form-item label="弧度" prop="locationYaw" required>
+        <el-input-number
+          style="width: 100%"
+          v-model="form.locationYaw"
+          :min="0"
+          placeholder="请输入"
+          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
-          label="层数"
-          prop="layersNumber"
-          :rules="{ required: true, message: '请输入层数', trigger: 'change' }"
-          required
-          v-if="form.type === 2"
-        >
-          <el-input-number v-model="form.layersNumber" :min="1" :max="3" />
+        <el-form-item label="层数" prop="layersNumber" required v-if="form.type === 2">
+          <el-input-number
+            v-model="form.layersNumber"
+            :min="1"
+            :max="4"
+            :precision="0"
+            :step="1"
+            step-strictly
+          />
+          <el-text class="mx-1">（最大层数：4）</el-text>
        </el-form-item>
-        <el-form-item
-          label="排序"
-          prop="locationNumber"
-          v-if="form.type === 2"
-          required
-          :rules="{ required: true, message: '请输入排序', trigger: 'change' }"
-        >
+        <el-form-item label="排序" prop="locationNumber" v-if="form.type === 2" required>
          <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"
-          :rules="{ required: true, message: '请选择设备编号', trigger: 'change' }"
-        >
+        <el-form-item label="编号" prop="deviceId" required v-if="form.type === 3">
          <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'])
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@ -644,6 +644,7 @@
    <editNodeProperties
      ref="editNodePropertiesRef"
      :positionMapId="imgBgObj.positionMapId"
+      :imgBgObj="imgBgObj"
      @submitNodeSuccess="submitNodeSuccess"
      @addEventListener="addEventListener"
    />
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@ -1,115 +1,68 @@
 <template>
-  <div @click="handleClick" style="position: relative; width: 100%; height: 100vh">
-    <!-- 画线 -->
-    <div v-if="state.measureDistancesPoints.length === 2" :style="rangingLineStyle"></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>
+    <label for="width">宽度:</label>
+    <input v-model="width" type="number" id="width" />
+    <label for="height">高度:</label>
+    <input v-model="height" type="number" id="height" />
+    <div ref="scaleRef"></div>
  </div>
 </template>

 <script setup>
-import { ref, computed } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import * as d3 from 'd3'

-const state = reactive({
-  measureDistancesPoints: [],
-  measureDistancesNum: null
-})
+const width = ref(500)
+const height = ref(300)
+const scaleRef = ref(null)

-// 处理点击事件
-const handleClick = (event) => {
-  if (state.measureDistancesPoints.length === 2) {
-    // 如果已经有两个点，清空信息
-    state.measureDistancesPoints = []
-    state.measureDistancesNum = null
-  } else {
-    // 添加当前点击的点
-    state.measureDistancesPoints.push({ x: event.clientX, y: event.clientY })
+const drawScalesWithContent = () => {
+  const margin = { top: 20, right: 20, bottom: 20, left: 40 }
+  const innerWidth = width.value - margin.left - margin.right
+  const innerHeight = height.value - margin.top - margin.bottom

-    // 当有两个点时，计算距离
-    if (state.measureDistancesPoints.length === 2) {
-      const [point1, point2] = state.measureDistancesPoints
-      state.measureDistancesNum = Math.sqrt(
-        Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)
-      )
-    }
+  const svg = d3
+    .select(scaleRef.value)
+    .html('')
+    .append('svg')
+    .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')
  }
 }

-// 计算连线的样式
-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 {}
+onMounted(() => {
+  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%'
+watch([width, height], () => {
+  drawScalesWithContent()
 })
 </script>

-<style>
-/* 你可以在这里添加一些样式 */
+<style scoped>
+/* 可根据需要添加样式 */
 </style>
--- a/src/views/mapPage/taskManagement/taskList.vue
+++ b/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 />