handy 2 周之前
父节点
当前提交
b4441a9d1d
共有 2 个文件被更改,包括 101 次插入37 次删除
  1. 85 27
      src/components/WarehouseMap.vue
  2. 16 10
      src/components/warehouse-layout-special-cells.ts

+ 85 - 27
src/components/WarehouseMap.vue

@@ -70,7 +70,13 @@
             v-else-if="isSpecialCell(cell) && cell.label && !shouldHideNonLocationCells"
             :class="['special-cell-label', ...getSpecialCellLabelClasses(cell)]"
           >
-            {{ cell.label }}
+            <span class="special-cell-label-primary">{{ cell.label }}</span>
+            <span
+              v-if="getSpecialCellTypeText(cell)"
+              class="special-cell-label-secondary"
+            >
+              {{ getSpecialCellTypeText(cell) }}
+            </span>
           </div>
         </div>
       </div>
@@ -539,14 +545,14 @@ const getSpecialCellClasses = (cell: WarehouseLayoutSpecialCell) => {
     return [cell.type]
   }
 
-  const normalizedLabel = String(cell.label || '')
-    .trim()
-    .toUpperCase()
-  if (normalizedLabel.startsWith('A')) {
-    return ['workpoint', 'workpoint-a']
+  if (cell.stationType === 'inbound') {
+    return ['workpoint', 'workpoint-inbound']
+  }
+  if (cell.stationType === 'outbound') {
+    return ['workpoint', 'workpoint-outbound']
   }
-  if (normalizedLabel.startsWith('B')) {
-    return ['workpoint', 'workpoint-b']
+  if (cell.stationType === 'picking') {
+    return ['workpoint', 'workpoint-picking']
   }
   return ['workpoint']
 }
@@ -557,17 +563,32 @@ const getSpecialCellLabelClasses = (cell: WarehouseLayoutSpecialCell) => {
     return classNames
   }
 
-  const normalizedLabel = String(cell.label || '')
-    .trim()
-    .toUpperCase()
-  if (normalizedLabel.startsWith('A')) {
-    classNames.push('special-cell-label-workpoint-a')
-  } else if (normalizedLabel.startsWith('B')) {
-    classNames.push('special-cell-label-workpoint-b')
+  if (cell.stationType === 'inbound') {
+    classNames.push('special-cell-label-workpoint-inbound')
+  } else if (cell.stationType === 'outbound') {
+    classNames.push('special-cell-label-workpoint-outbound')
+  } else if (cell.stationType === 'picking') {
+    classNames.push('special-cell-label-workpoint-picking')
   }
   return classNames
 }
 
+const getSpecialCellTypeText = (cell: WarehouseLayoutSpecialCell) => {
+  if (cell.type !== 'workpoint') {
+    return ''
+  }
+  if (cell.stationType === 'inbound') {
+    return '入库站'
+  }
+  if (cell.stationType === 'outbound') {
+    return '出库站'
+  }
+  if (cell.stationType === 'picking') {
+    return '拣货站'
+  }
+  return ''
+}
+
 const getCellClass = (cell: MapCell) => {
   if (isSpecialCell(cell)) {
     return shouldHideNonLocationCells.value ? ['hidden-cell'] : getSpecialCellClasses(cell)
@@ -1039,8 +1060,9 @@ onBeforeUnmount(() => {
   --wall-bg: #151515;
   --elevator-bg: #101010;
   --charger-bg: #231b06;
-  --workpoint-a-bg: #12311b;
-  --workpoint-b-bg: #3b102a;
+  --workpoint-inbound-bg: #173524;
+  --workpoint-outbound-bg: #3a2410;
+  --workpoint-picking-bg: #2a153a;
   --cell-category-a: rgba(31, 122, 63, 0.18);
   --cell-category-b: rgba(47, 95, 215, 0.18);
   --cell-category-c: rgba(184, 146, 31, 0.2);
@@ -1068,8 +1090,9 @@ onBeforeUnmount(() => {
   --wall-bg: #d9dee6;
   --elevator-bg: #e2e6ec;
   --charger-bg: #f0e4b8;
-  --workpoint-a-bg: #cfe9d5;
-  --workpoint-b-bg: #f4d2e2;
+  --workpoint-inbound-bg: #d7efe0;
+  --workpoint-outbound-bg: #f4dec6;
+  --workpoint-picking-bg: #ead8f4;
   --cell-category-a: rgba(31, 122, 63, 0.12);
   --cell-category-b: rgba(47, 95, 215, 0.12);
   --cell-category-c: rgba(184, 146, 31, 0.18);
@@ -1167,17 +1190,22 @@ onBeforeUnmount(() => {
   cursor: default;
 }
 
-.grid-cell.workpoint-a {
-  background: var(--workpoint-a-bg);
+.grid-cell.workpoint-inbound {
+  background: var(--workpoint-inbound-bg);
   cursor: default;
 }
 
-.grid-cell.workpoint-b {
-  background: var(--workpoint-b-bg);
+.grid-cell.workpoint-outbound {
+  background: var(--workpoint-outbound-bg);
   cursor: default;
 }
 
-.grid-cell.workpoint:not(.workpoint-a):not(.workpoint-b) {
+.grid-cell.workpoint-picking {
+  background: var(--workpoint-picking-bg);
+  cursor: default;
+}
+
+.grid-cell.workpoint:not(.workpoint-inbound):not(.workpoint-outbound):not(.workpoint-picking) {
   background: var(--charger-bg);
   cursor: default;
 }
@@ -1345,12 +1373,38 @@ onBeforeUnmount(() => {
 }
 
 .special-cell-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
   font-size: calc(var(--cell-id-font-size, 11px) - 1px);
   font-weight: 700;
   color: var(--special-label);
-  letter-spacing: 1px;
+  letter-spacing: 0.5px;
   user-select: none;
   padding: 1px;
+  text-align: center;
+}
+
+.special-cell-label-primary {
+  font-size: var(--cell-id-font-size, 11px);
+  font-weight: bold;
+  line-height: 1;
+  white-space: normal;
+  word-break: break-all;
+  padding: 0 1px;
+}
+
+.special-cell-label-secondary {
+  max-width: 100%;
+  font-size: calc(var(--cell-id-font-size, 11px) - 2px);
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: 0;
+  opacity: 0.88;
+  white-space: normal;
+  word-break: break-all;
 }
 
 .special-cell-label-wall {
@@ -1377,11 +1431,15 @@ onBeforeUnmount(() => {
   letter-spacing: 0;
 }
 
-.special-cell-label-workpoint-a {
+.special-cell-label-workpoint-inbound {
+  color: var(--special-label-strong);
+}
+
+.special-cell-label-workpoint-outbound {
   color: var(--special-label-strong);
 }
 
-.special-cell-label-workpoint-b {
+.special-cell-label-workpoint-picking {
   color: var(--special-label-strong);
 }
 

+ 16 - 10
src/components/warehouse-layout-special-cells.ts

@@ -8,18 +8,21 @@ export interface WarehouseLayoutSpecialCell {
   gridCol: number
   type: 'wall' | 'elevator' | 'charger' | 'workpoint'
   label?: string
+  stationType?: 'inbound' | 'outbound' | 'picking'
 }
 
 const specialCell = (
   gridRow: number,
   gridCol: number,
   type: WarehouseLayoutSpecialCell['type'],
-  label?: string
+  label?: string,
+  stationType?: WarehouseLayoutSpecialCell['stationType']
 ): WarehouseLayoutSpecialCell => ({
   gridRow,
   gridCol,
   type,
-  label
+  label,
+  stationType
 })
 
 const specialArea = (
@@ -63,14 +66,17 @@ const SHARED_SPECIAL_CELLS: readonly WarehouseLayoutSpecialCell[] = [
 ] as const
 
 const LEVEL_1_SPECIAL_CELLS: readonly WarehouseLayoutSpecialCell[] = [
-  specialCell(34, 1, 'workpoint', 'A1'),
-  specialCell(34, 2, 'workpoint', 'A2'),
-  specialCell(34, 3, 'workpoint', 'A3'),
-  specialCell(34, 4, 'workpoint', 'B1'),
-  specialCell(34, 6, 'workpoint', 'A4'),
-  specialCell(34, 7, 'workpoint', 'B2'),
-  specialCell(34, 12, 'workpoint', 'B3'),
-  specialCell(34, 13, 'workpoint', 'B4'),
+  // 一层作业点位按业务类型区分,便于前端统一配色和展示说明。
+  specialCell(34, 1, 'workpoint', 'A1', 'inbound'),
+  specialCell(34, 2, 'workpoint', 'A2', 'inbound'),
+  specialCell(34, 3, 'workpoint', 'A3', 'outbound'),
+  specialCell(34, 4, 'workpoint', 'B1', 'picking'),
+  specialCell(34, 6, 'workpoint', 'A4', 'outbound'),
+  specialCell(34, 7, 'workpoint', 'B2', 'picking'),
+  specialCell(34, 12, 'workpoint', 'B3', 'picking'),
+  specialCell(34, 13, 'workpoint', 'B4', 'picking'),
+  specialCell(34, 20, 'workpoint', 'A6', 'outbound'),
+  specialCell(34, 21, 'workpoint', 'A5', 'inbound'),
   specialCell(34, 26, 'charger', '充电桩'),
   specialCell(34, 27, 'charger', '充电桩')
 ] as const