看板代码更新

board/CODE/src/App.vue

@@ -30,7 +30,10 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import Inbound from './views/Inbound.vue';
 import Outbound from './views/Outbound.vue';
-import Pick from './views/Pick.vue';
+import PickP1 from './views/PickP1.vue';
+import Stacker from "@/views/Stacker.vue";
+import PickP2 from "@/views/PickP2.vue";
+import PickP3 from "@/views/PickP3.vue";
 
 const debounce = (fn, delay) => {
   let timer = null;
@@ -56,7 +59,10 @@ export default {
   components: {
     Inbound,
     Outbound,
-    Pick
+    Stacker,
+    PickP1,
+    PickP2,
+    PickP3
   },
   setup() {
     const route = useRoute();
@@ -72,7 +78,10 @@ export default {
     const titleMapping = {
       '1': '入库',
       '2': '出库',
-      '3': '拣选'
+      '3': '堆垛机',
+      '4': 'P1 站台拣选',
+      '5': 'P2 站台拣选',
+      '6': 'P3 站台拣选',
     };
 
     // 动态标题
@@ -93,8 +102,12 @@ export default {
     // 根据standId动态选择组件
     const currentComponent = computed(() => {
       const standId = currentStandId.value;
+      if (standId === '1') return 'Inbound';
       if (standId === '2') return 'Outbound';
-      if (standId === '3') return 'Pick';
+      if (standId === '3') return 'Stacker';
+      if (standId === '4') return 'PickP1';
+      if (standId === '5') return 'PickP2';
+      if (standId === '6') return 'PickP3';
       return 'Inbound'; // 默认显示入库组件
     });
 
@@ -166,4 +179,28 @@ export default {
 
 <style>
 @import './assets/board-styles.css';
+
+/* 增大标题字体大小 */
+.navbar .brand {
+  font-size: 50px !important;
+  font-weight: 700;
+}
+
+/* 增加标题与内容区域的间距 */
+.navbar {
+  margin-bottom: 30px;
+}
+
+.navbar::after {
+  display: none !important;
+}
+
+/* 或者增加品牌标题的上下边距 */
+.navbar .brand {
+  font-size: 50px !important;
+  font-weight: 700;
+  margin: 0 35px;
+}
 </style>
+
+

board/CODE/src/assets/board-styles.css

@@ -22,7 +22,7 @@ body {
 }
 
 .board-title {
-  font-size: 22px;
+  font-size: 40px;
   margin: 0 0 12px 4px;
   color: var(--brand);
 }

board/CODE/src/components/DataTable.vue

@@ -2,23 +2,31 @@
   <div class="table-wrapper">
     <table>
       <thead>
-        <tr>
+      <tr>
-          <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
+        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
-        </tr>
+      </tr>
       </thead>
       <tbody>
-        <tr v-if="!data?.length" class="empty-row"><td :colspan="columns.length">暂无数据</td></tr>
+      <tr v-if="!data?.length" class="empty-row"><td :colspan="columns.length">暂无数据</td></tr>
-        <tr v-for="(row, idx) in data" :key="idx">
+      <tr v-for="(row, idx) in data" :key="idx">
-          <td v-for="col in columns" :key="col.key">{{ formatCell(row, col) }}</td>
+        <td v-for="col in columns" :key="col.key" :class="getCellClass(col, row)">
-        </tr>
+            <span
+                v-if="col.key === 'stackerStatus'"
+                class="stacker-status"
+            >
+              {{ formatCell(row, col) }}
+            </span>
+          <template v-else>
+            {{ formatCell(row, col) }}
+          </template>
+        </td>
+      </tr>
       </tbody>
     </table>
   </div>
 </template>
 
 <script setup>
-import {compileToFunction} from "vue";
-
 const props = defineProps({
   data: {
     type: Array,
@@ -34,6 +42,14 @@ function formatCell(row, col){
   const v = row?.[col.key];
   return col.formatter ? col.formatter(v, row) : (v ?? '');
 }
+
+function getCellClass(col, row) {
+  // 为特定列添加类名
+  if (col.key === 'stackerStatus') {
+    return 'status-cell';
+  }
+  return '';
+}
 </script>
 
 <style scoped>
@@ -80,4 +96,20 @@ tbody td:last-child {
   color: #8fa3d6;
   padding: 24px 0;
 }
+
+/* 为设备状态添加淡色框包围样式 */
+.stacker-status {
+  display: inline-block;
+  padding: 4px 8px;
+  border: 1px solid #d0d7de;
+  border-radius: 4px;
+  background-color: #f6f8fa;
+  color: #24292f;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.status-cell {
+  /* 可以为状态单元格添加额外样式 */
+}
 </style>

board/CODE/src/services/api.js

@@ -5,6 +5,12 @@ const baseURL = process.env.VUE_APP_API_BASE_URL || (typeof window !== 'undefine
 
 export const http = axios.create({ baseURL, timeout: 15000 });
 
+// 创建专门用于堆垛机数据的axios实例
+const stackerHttp = axios.create({
+  baseURL: 'http://172.18.222.253:9980',
+  timeout: 15000
+});
+
 export async function queryTasksByPage(params) {
   const { data } = await http.post('/wms/taskQuery/queryTasksByPage', params);
   return data?.data;
@@ -46,7 +52,22 @@ export async function getOutsData(params = {}) {
   return data;
 }
 
-export async function getPickTaskData(params = {}) {
+export async function getPickTaskDataP1(params = {}) {
-  const { data } = await http.get('/wms/board/getPickTaskData', { params });
+  const { data } = await http.get('/wms/board/getPickTaskDataP1', { params });
+  return data;
+}
+
+export async function getPickTaskDataP2(params = {}) {
+  const { data } = await http.get('/wms/board/getPickTaskDataP2', { params });
+  return data;
+}
+
+export async function getPickTaskDataP3(params = {}) {
+  const { data } = await http.get('/wms/board/getPickTaskDataP3', { params });
+  return data;
+}
+
+export async function getStackerData(params = {}) {
+  const { data } = await stackerHttp.get('/api/upper/pub/queryStackerInfo', params);
   return data;
 }

board/CODE/src/views/Inbound.vue

@@ -76,4 +76,18 @@ onUnmounted(() => {
 .title-center {
   text-align: center;
 }
+
+/* 增大表格整体字体 */
+:deep(.table-wrapper) {
+  font-size: 40px;
+}
+
+:deep(thead th) {
+  font-size: 40px; /* 表头字体稍大 */
+}
+
+:deep(tbody td) {
+  font-size: 40px; /* 表格内容字体 */
+  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
+}
 </style>

board/CODE/src/views/Outbound.vue

@@ -7,7 +7,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import DataTable from '../components/DataTable.vue';
-import { getOutsData } from '../services/api';
+import { getOutsData } from '@/services/api';
 
 // 出库字段（与数据库一致：物料号、需求数量、分配数量、拣选数量、原因）
 const columns = [
@@ -53,4 +53,17 @@ onUnmounted(() => {
 .title-center {
   text-align: center;
 }
+/* 增大表格整体字体 */
+:deep(.table-wrapper) {
+  font-size: 40px;
+}
+
+:deep(thead th) {
+  font-size: 40px; /* 表头字体稍大 */
+}
+
+:deep(tbody td) {
+  font-size: 40px; /* 表格内容字体 */
+  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
+}
 </style>

board/CODE/src/views/PickP1.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <DataTable :columns="columns" :data="rows" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import DataTable from '../components/DataTable.vue';
+import { getPickTaskDataP1 } from '@/services/api';
+
+// 拣选字段
+const columns = [
+  { key: 'vehicleId', title: '料箱号', width: 200 },
+  { key: 'pickStand', title: '拣选站台' },
+  { key: 'createTime', title: '创建时间' },
+  { key: 'arriveTime', title: '到达时间' },
+  { key: 'pickStatus', title: '状态' },
+];
+
+const rows = ref([]);
+let timer = null;
+
+function mapStatus(status) {
+  const code = Number(status);
+  // 对齐后端 WmsPickTaskStatusEnum
+  switch (code) {
+    case -2: return '入库用';
+    case -1: return '暂存中';
+    case 0: return '待下发';
+    case 1: return '已下发';
+    case 2: return '执行中';
+    case 3: return '已到达';
+    case 4: return '已离开';
+    case 5: return '已取消';
+    default: return String(status ?? '');
+  }
+}
+
+async function load() {
+  try {
+    const tasksData = await getPickTaskDataP1({ pageNum: 1, pageSize: 1000 });
+    const tasks = tasksData || [];
+    rows.value = tasks.map((t) => ({
+      vehicleId: t?.vehicleId ?? '',
+      pickStand: t?.pickStand ?? t?.pick_stand ?? t?.pickStation ?? t?.station ?? '',
+      createTime: t?.createTime ?? t?.gmtCreate ?? '',
+      arriveTime: t?.arriveTime ?? t?.reachTime ?? '',
+      pickStatus: mapStatus(t?.pickStatus ?? t?.pick_status ?? t?.taskStatus ?? t?.status),
+    }));
+  } catch (error) {
+    console.error('加载拣选数据失败:', error);
+  }
+}
+
+onMounted(() => {
+  load();
+  timer = setInterval(load, 5000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+</script>
+
+<style scoped>
+.title-center {
+  text-align: center;
+}
+/* 增大表格整体字体 */
+:deep(.table-wrapper) {
+  font-size: 40px;
+}
+
+:deep(thead th) {
+  font-size: 40px; /* 表头字体稍大 */
+}
+
+:deep(tbody td) {
+  font-size: 40px; /* 表格内容字体 */
+  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
+}
+
+/* 设置料箱号列更宽 */
+:deep(th:first-child),
+:deep(td:first-child) {
+  width: 25%;
+ }
+</style>

board/CODE/src/views/PickP2.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <DataTable :columns="columns" :data="rows" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import DataTable from '../components/DataTable.vue';
+import { getPickTaskDataP2 } from '@/services/api';
+
+// 拣选字段
+const columns = [
+  { key: 'vehicleId', title: '料箱号', width: 200 },
+  { key: 'pickStand', title: '拣选站台' },
+  { key: 'createTime', title: '创建时间' },
+  { key: 'arriveTime', title: '到达时间' },
+  { key: 'pickStatus', title: '状态' },
+];
+
+const rows = ref([]);
+let timer = null;
+
+function mapStatus(status) {
+  const code = Number(status);
+  // 对齐后端 WmsPickTaskStatusEnum
+  switch (code) {
+    case -2: return '入库用';
+    case -1: return '暂存中';
+    case 0: return '待下发';
+    case 1: return '已下发';
+    case 2: return '执行中';
+    case 3: return '已到达';
+    case 4: return '已离开';
+    case 5: return '已取消';
+    default: return String(status ?? '');
+  }
+}
+
+async function load() {
+  try {
+    const tasksData = await getPickTaskDataP2({ pageNum: 1, pageSize: 1000 });
+    const tasks = tasksData || [];
+    rows.value = tasks.map((t) => ({
+      vehicleId: t?.vehicleId ?? '',
+      pickStand: t?.pickStand ?? t?.pick_stand ?? t?.pickStation ?? t?.station ?? '',
+      createTime: t?.createTime ?? t?.gmtCreate ?? '',
+      arriveTime: t?.arriveTime ?? t?.reachTime ?? '',
+      pickStatus: mapStatus(t?.pickStatus ?? t?.pick_status ?? t?.taskStatus ?? t?.status),
+    }));
+  } catch (error) {
+    console.error('加载拣选数据失败:', error);
+  }
+}
+
+onMounted(() => {
+  load();
+  timer = setInterval(load, 5000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+</script>
+
+<style scoped>
+.title-center {
+  text-align: center;
+}
+/* 增大表格整体字体 */
+:deep(.table-wrapper) {
+  font-size: 40px;
+}
+
+:deep(thead th) {
+  font-size: 40px; /* 表头字体稍大 */
+}
+
+:deep(tbody td) {
+  font-size: 40px; /* 表格内容字体 */
+  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
+}
+
+/* 设置料箱号列更宽 */
+:deep(th:first-child),
+:deep(td:first-child) {
+  width: 25%;
+}
+</style>

board/CODE/src/views/PickP3.vue

@@ -7,7 +7,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import DataTable from '../components/DataTable.vue';
-import { getPickTaskData } from '../services/api';
+import { getPickTaskDataP3 } from '@/services/api';
 
 // 拣选字段
 const columns = [
@@ -39,7 +39,7 @@ function mapStatus(status) {
 
 async function load() {
   try {
-    const tasksData = await getPickTaskData({ pageNum: 1, pageSize: 1000 });
+    const tasksData = await getPickTaskDataP3({ pageNum: 1, pageSize: 1000 });
     const tasks = tasksData || [];
     rows.value = tasks.map((t) => ({
       vehicleId: t?.vehicleId ?? '',
@@ -69,4 +69,23 @@ onUnmounted(() => {
 .title-center {
   text-align: center;
 }
+/* 增大表格整体字体 */
+:deep(.table-wrapper) {
+  font-size: 40px;
+}
+
+:deep(thead th) {
+  font-size: 40px; /* 表头字体稍大 */
+}
+
+:deep(tbody td) {
+  font-size: 40px; /* 表格内容字体 */
+  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
+}
+
+/* 设置料箱号列更宽 */
+:deep(th:first-child),
+:deep(td:first-child) {
+  width: 25%;
+}
 </style>

board/CODE/src/views/Stacker.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <DataTable :columns="columns" :data="rows" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import DataTable from '../components/DataTable.vue';
+import { getStackerData } from '@/services/api';
+
+// 堆垛机状态字段
+const columns = [
+  { key: 'tunnelId', title: '堆垛机编号' },
+  { key: 'plcId', title: '任务号' },
+  {
+    key: 'stackerStatus',
+    title: '设备状态',
+    formatter: (value) => value // 添加格式化函数
+  },
+  { key: 'controlModel', title: '堆垛机控制方式' },
+];
+
+const rows = ref([]);
+
+let timer = null;
+
+// 状态码映射
+const statusMap = {
+  '-1': '未知',
+  0: '脱机',
+  1: '空闲',
+  2: '任务接收',
+  3: '取货移动',
+  4: '取货中',
+  5: '取货完成',
+  6: '卸货移动',
+  7: '卸货中',
+  8: '卸货完成',
+  9: '任务完成',
+  10: '删除任务',
+  11: '盘点中',
+  21: '二次预约申请'
+};
+
+// 控制模式映射
+const controlModeMap = {
+  '-1': '未知',
+  0: '离线',
+  1: '自学习',
+  2: '调试',
+  3: '手动',
+  4: '单机',
+  5: '联机'
+};
+
+async function load() {
+  try {
+    const response = await getStackerData({ pageNum: 1, pageSize: 100 });
+
+    // 解析返回的数据结构
+    const stackerData = response?.returnData || response?.data || [];
+
+    if (Array.isArray(stackerData)) {
+      rows.value = stackerData.map(item => ({
+        tunnelId: item?.tunnelId ?? '',
+        plcId: item?.plcId ?? '',
+        stackerStatus: statusMap[item?.stackerStatus] || item?.stackerStatus || '',
+        controlModel: controlModeMap[item?.controlModel] || item?.controlModel || ''
+      }));
+    } else {
+      rows.value = [];
+    }
+  } catch (error) {
+    console.error('加载堆垛机状态数据失败:', error);
+    rows.value = [];
+  }
+}
+
+onMounted(() => {
+  load();
+  timer = setInterval(load, 5000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+</script>
+
+<style scoped>
+.title-center {
+  text-align: center;
+}
+
+/* 为设备状态添加淡色框包围样式，增大字体 */
+:deep(.stacker-status) {
+  display: inline-block;
+  padding: 6px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 4px;
+  background-color: #f6f8fa;
+  color: #24292f;
+  font-size: 40px; /* 增大字体 */
+  line-height: 1.4;
+}
+
+/* 增大表格整体字体 */
+:deep(.table-wrapper) {
+  font-size: 40px;
+}
+
+:deep(thead th) {
+  font-size: 40px; /* 表头字体稍大 */
+}
+
+:deep(tbody td) {
+  font-size: 40px; /* 表格内容字体 */
+  padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
+}
+</style>