From 882342b685fbb7ba64beb1e19892da815eb99f17 Mon Sep 17 00:00:00 2001
From: zhang_li <2235006734@qqq.com>
Date: Wed, 20 Dec 2023 13:16:07 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/main.ts                                   |   3 +
 src/permission.ts                             |   3 +-
 src/router/modules/remaining.ts               |  39 ++
 src/views/wms/board/productShippingBoard.vue  | 529 ++++++++++++++++++
 .../wms/board/productionMaterialBoard.vue     | 529 ++++++++++++++++++
 src/views/wms/board/productionPlanBoard.vue   | 529 ++++++++++++++++++
 src/views/wms/board/purchaseArrivalBoard.vue  | 528 +++++++++++++++++
 8 files changed, 2160 insertions(+), 1 deletion(-)
 create mode 100644 src/views/wms/board/productShippingBoard.vue
 create mode 100644 src/views/wms/board/productionMaterialBoard.vue
 create mode 100644 src/views/wms/board/productionPlanBoard.vue
 create mode 100644 src/views/wms/board/purchaseArrivalBoard.vue

diff --git a/package.json b/package.json
index 62dc38833..cf2eff10c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@form-create/designer": "^3.1.3",
     "@form-create/element-ui": "^3.1.24",
     "@iconify/iconify": "^3.1.1",
+    "@kjgl77/datav-vue3": "^1.7.1",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.4.1",
     "@wangeditor/editor": "^5.1.23",
diff --git a/src/main.ts b/src/main.ts
index f040f2b43..5ba59e543 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -42,6 +42,8 @@ import Logger from '@/utils/Logger'
 
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
 
+import DataVVue3 from '@kjgl77/datav-vue3'
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
@@ -63,6 +65,7 @@ const setupAll = async () => {
   await router.isReady()
 
   app.use(VueDOMPurifyHTML)
+  app.use(DataVVue3)
 
   app.mount('#app')
   app.config.warnHandler = () => null;
diff --git a/src/permission.ts b/src/permission.ts
index 0698dc880..199606f26 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -19,7 +19,8 @@ const whiteList = [
   '/auth-redirect',
   '/bind',
   '/register',
-  '/oauthLogin/gitee'
+  '/oauthLogin/gitee',
+  '/board/purchaseArrivalBoard'
 ]
 
 // 路由加载前
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 2c2ecf253..c1ce9f31c 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -362,7 +362,46 @@ const remainingRouter: AppRouteRecordRaw[] = [
       //     activeMenu: '/wms/itempackaging-manage/itempackaging'
       //   }
       // }
+      
     ]
+  },
+  {
+    path: '/board/purchaseArrivalBoard',
+    component: () => import('@/views/wms/board/purchaseArrivalBoard.vue'),
+    name: 'PurchaseArrivalBoard',
+    meta: {
+      hidden: true,
+      title: '采购到货看版',
+      noTagsView: true
+    }
+  },{
+    path: '/board/productionMaterialBoard',
+    component: () => import('@/views/wms/board/productionMaterialBoard.vue'),
+    name: 'ProductionMaterialBoard',
+    meta: {
+      hidden: true,
+      title:'生产叫料看板',
+      noTagsView: true
+    }
+  },{
+    path: '/board/productionPlanBoard',
+    component: () => import('@/views/wms/board/productionPlanBoard.vue'),
+    name: 'ProductionPlanBoard',
+    meta: {
+      hidden: true,
+      title:'生产计划看板',
+      noTagsView: true
+    }
+  },
+  {
+    path: '/board/productShippingBoard',
+    component: () => import('@/views/wms/board/productShippingBoard.vue'),
+    name: 'ProductShippingBoard',
+    meta: {
+      hidden: true,
+      title: '成品发运看板',
+      noTagsView: true
+    }
   }
 ]
 
diff --git a/src/views/wms/board/productShippingBoard.vue b/src/views/wms/board/productShippingBoard.vue
new file mode 100644
index 000000000..1cab4c850
--- /dev/null
+++ b/src/views/wms/board/productShippingBoard.vue
@@ -0,0 +1,529 @@
+<!-- 成品发运看板 -->
+<template>
+  <div class="box">
+    <div class="title">成品发运看板</div>
+    <div class="table">
+      <table border class="table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <div>9-15</div>
+              <div>8:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>9:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>10:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>11:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>12:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>13:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>14:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>15:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>16:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>17:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>18:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>19:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>20:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>21:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>22:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>23:00</div>
+            </th>
+            <th>
+              <div>9-15</div>
+              <div>0:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>1:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>2:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>3:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>4:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>5:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>6:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>7:00</div>
+            </th>
+          </tr>
+        </thead>
+        <tBody>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td class="flist-col">{{ item.name }}</td>
+            <template v-for="(cur, key) in item.dock" :key="key">
+              <td :colspan="cur.span"  v-if="cur.backgroundColor">
+                <div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div>
+              </td>
+              <td  v-if="!cur.backgroundColor"></td>
+            </template>
+          </tr>
+        </tBody>
+      </table>
+    </div>
+    <div class="list mt-16px">
+      <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
+const tableData = [
+  {
+    name: 'dock1',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span: 2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#dfa041',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock2',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#f46c6c',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:1,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#90939a',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock3',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'2',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '', 
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }
+]
+const config = reactive({
+  header: ['状态', '流水号', '月台号', '客户', '发货单', '车牌号', '计划发货时间', '实际发货时间'],
+  data: [
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8'],
+    ['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8'],
+  ],
+  index: false,
+  // columnWidth: [50],
+  align: ['center','center','center','center','center','center','center','center'],
+  rowNum:8,
+  headerHeight:50,
+  headerBGC:'#616267',
+  oddRowBGC:'#303133',
+  evenRowBGC:'#303133',
+  
+})
+</script>
+<style lang="scss" scoped>
+.box {
+  width: 98vw;
+  height: 96vh;
+  background: #303133;
+  padding: 2vh 1vw;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  color: #9d9f9e;
+  font-size: 30px;
+  text-align: center;
+  line-height: 7vh;
+  width: 100%;
+}
+.table {
+  width: 98vw;
+  border-collapse: collapse;
+  border-spacing: 0;
+  tr {
+    color: #b3b4b8;
+  }
+  td {
+    width: calc(92vw / 24);
+    text-align: center;
+    div {
+      width: calc(100% - 16px);
+      height: 28px;
+      margin: 8px;
+      line-height: 28px;
+      color: white;
+      text-align: left;
+      text-indent: 10px;
+    }
+    &.flist-col {
+      width: 6vw;
+    }
+  }
+  thead {
+    tr {
+      text-indent: -100%;
+      border-left: 1px solid rgba(255, 255, 255, 0);
+      border-top: 1px solid rgba(255, 255, 255, 0);
+      border-right: 1px solid rgba(255, 255, 255, 0);
+    }
+    th {
+      font-size: 14px;
+      font-weight: normal !important;
+      height: 6vh;
+      div {
+        height: 2.5vh;
+        line-height: 2.5vh;
+      }
+    }
+  }
+}
+.list{
+  flex: 1;
+  width: 100%;
+}
+::v-deep(.row-item){
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.ceil){
+  border-right: 1px solid rgba(255,255,255,0.5);
+  padding: 0px!important;
+}
+::v-deep(.dv-scroll-board){
+  border-top: 1px solid rgba(255,255,255,0.5);
+  border-left: 1px solid rgba(255,255,255,0.5);
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.header-item){
+  border-right: 1px solid rgba(255,255,255,0.5);
+}
+</style>
+
diff --git a/src/views/wms/board/productionMaterialBoard.vue b/src/views/wms/board/productionMaterialBoard.vue
new file mode 100644
index 000000000..ea7a661f8
--- /dev/null
+++ b/src/views/wms/board/productionMaterialBoard.vue
@@ -0,0 +1,529 @@
+<!-- 生产叫料看板 -->
+<template>
+  <div class="box">
+    <div class="title">生产叫料看板</div>
+    <div class="table">
+      <table border class="table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <div>9-15</div>
+              <div>8:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>9:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>10:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>11:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>12:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>13:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>14:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>15:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>16:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>17:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>18:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>19:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>20:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>21:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>22:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>23:00</div>
+            </th>
+            <th>
+              <div>9-15</div>
+              <div>0:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>1:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>2:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>3:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>4:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>5:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>6:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>7:00</div>
+            </th>
+          </tr>
+        </thead>
+        <tBody>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td class="flist-col">{{ item.name }}</td>
+            <template v-for="(cur, key) in item.dock" :key="key">
+              <td :colspan="cur.span"  v-if="cur.backgroundColor">
+                <div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div>
+              </td>
+              <td  v-if="!cur.backgroundColor"></td>
+            </template>
+          </tr>
+        </tBody>
+      </table>
+    </div>
+    <div class="list mt-16px">
+      <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
+const tableData = [
+  {
+    name: 'dock1',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span: 2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#dfa041',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock2',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#f46c6c',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:1,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#90939a',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock3',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'2',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '', 
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }
+]
+const config = reactive({
+  header: ['状态', '流水号', '生产线', '工位', '叫料单', '物料号', '数量',  '叫料人', '叫料时间','实际到货时间'],
+  data: [
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8', '行1列9', '行1列10'],
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8', '行1列9', '行1列10'],
+    ['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8', '行1列9', '行1列10'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8', '行1列9', '行1列10'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8', '行1列9', '行1列10'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8', '行1列9', '行1列10'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8', '行1列9', '行1列10'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8', '行1列9', '行1列10'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8', '行1列9', '行1列10'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8', '行1列9', '行1列10'],
+  ],
+  index: false,
+  // columnWidth: [50],
+  align: ['center','center','center','center','center','center','center','center','center','center'],
+  rowNum:8,
+  headerHeight:50,
+  headerBGC:'#616267',
+  oddRowBGC:'#303133',
+  evenRowBGC:'#303133',
+  
+})
+</script>
+<style lang="scss" scoped>
+.box {
+  width: 98vw;
+  height: 96vh;
+  background: #303133;
+  padding: 2vh 1vw;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  color: #9d9f9e;
+  font-size: 30px;
+  text-align: center;
+  line-height: 7vh;
+  width: 100%;
+}
+.table {
+  width: 98vw;
+  border-collapse: collapse;
+  border-spacing: 0;
+  tr {
+    color: #b3b4b8;
+  }
+  td {
+    width: calc(92vw / 24);
+    text-align: center;
+    div {
+      width: calc(100% - 16px);
+      height: 28px;
+      margin: 8px;
+      line-height: 28px;
+      color: white;
+      text-align: left;
+      text-indent: 10px;
+    }
+    &.flist-col {
+      width: 6vw;
+    }
+  }
+  thead {
+    tr {
+      text-indent: -100%;
+      border-left: 1px solid rgba(255, 255, 255, 0);
+      border-top: 1px solid rgba(255, 255, 255, 0);
+      border-right: 1px solid rgba(255, 255, 255, 0);
+    }
+    th {
+      font-size: 14px;
+      font-weight: normal !important;
+      height: 6vh;
+      div {
+        height: 2.5vh;
+        line-height: 2.5vh;
+      }
+    }
+  }
+}
+.list{
+  flex: 1;
+  width: 100%;
+}
+::v-deep(.row-item){
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.ceil){
+  border-right: 1px solid rgba(255,255,255,0.5);
+  padding: 0px!important;
+}
+::v-deep(.dv-scroll-board){
+  border-top: 1px solid rgba(255,255,255,0.5);
+  border-left: 1px solid rgba(255,255,255,0.5);
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.header-item){
+  border-right: 1px solid rgba(255,255,255,0.5);
+}
+</style>
+
diff --git a/src/views/wms/board/productionPlanBoard.vue b/src/views/wms/board/productionPlanBoard.vue
new file mode 100644
index 000000000..2b2eca1dd
--- /dev/null
+++ b/src/views/wms/board/productionPlanBoard.vue
@@ -0,0 +1,529 @@
+<!-- 生产计划看板 -->
+<template>
+  <div class="box">
+    <div class="title">生产计划看板</div>
+    <div class="table">
+      <table border class="table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <div>9-15</div>
+              <div>8:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>9:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>10:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>11:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>12:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>13:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>14:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>15:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>16:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>17:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>18:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>19:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>20:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>21:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>22:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>23:00</div>
+            </th>
+            <th>
+              <div>9-15</div>
+              <div>0:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>1:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>2:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>3:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>4:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>5:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>6:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>7:00</div>
+            </th>
+          </tr>
+        </thead>
+        <tBody>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td class="flist-col">{{ item.name }}</td>
+            <template v-for="(cur, key) in item.dock" :key="key">
+              <td :colspan="cur.span"  v-if="cur.backgroundColor">
+                <div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div>
+              </td>
+              <td  v-if="!cur.backgroundColor"></td>
+            </template>
+          </tr>
+        </tBody>
+      </table>
+    </div>
+    <div class="list mt-16px">
+      <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
+const tableData = [
+  {
+    name: 'dock1',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span: 2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#dfa041',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock2',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#f46c6c',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:1,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#90939a',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock3',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'2',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '', 
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }
+]
+const config = reactive({
+  header: ['状态', '流水号', '生产线', '产品号', '产品名称', '批次', '计划数量', '完成数量', '完成百分比', '报废数量', '报废百分比'],
+  data: [
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8', '行1列6', '行1列7', '行1列8'],
+  ],
+  index: false,
+  // columnWidth: [50],
+  align: ['center','center','center','center','center','center','center','center','center','center','center'],
+  rowNum:8,
+  headerHeight:50,
+  headerBGC:'#616267',
+  oddRowBGC:'#303133',
+  evenRowBGC:'#303133',
+  
+})
+</script>
+<style lang="scss" scoped>
+.box {
+  width: 98vw;
+  height: 96vh;
+  background: #303133;
+  padding: 2vh 1vw;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  color: #9d9f9e;
+  font-size: 30px;
+  text-align: center;
+  line-height: 7vh;
+  width: 100%;
+}
+.table {
+  width: 98vw;
+  border-collapse: collapse;
+  border-spacing: 0;
+  tr {
+    color: #b3b4b8;
+  }
+  td {
+    width: calc(92vw / 24);
+    text-align: center;
+    div {
+      width: calc(100% - 16px);
+      height: 28px;
+      margin: 8px;
+      line-height: 28px;
+      color: white;
+      text-align: left;
+      text-indent: 10px;
+    }
+    &.flist-col {
+      width: 6vw;
+    }
+  }
+  thead {
+    tr {
+      text-indent: -100%;
+      border-left: 1px solid rgba(255, 255, 255, 0);
+      border-top: 1px solid rgba(255, 255, 255, 0);
+      border-right: 1px solid rgba(255, 255, 255, 0);
+    }
+    th {
+      font-size: 14px;
+      font-weight: normal !important;
+      height: 6vh;
+      div {
+        height: 2.5vh;
+        line-height: 2.5vh;
+      }
+    }
+  }
+}
+.list{
+  flex: 1;
+  width: 100%;
+}
+::v-deep(.row-item){
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.ceil){
+  border-right: 1px solid rgba(255,255,255,0.5);
+  padding: 0px!important;
+}
+::v-deep(.dv-scroll-board){
+  border-top: 1px solid rgba(255,255,255,0.5);
+  border-left: 1px solid rgba(255,255,255,0.5);
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.header-item){
+  border-right: 1px solid rgba(255,255,255,0.5);
+}
+</style>
+>
diff --git a/src/views/wms/board/purchaseArrivalBoard.vue b/src/views/wms/board/purchaseArrivalBoard.vue
new file mode 100644
index 000000000..63f1514b6
--- /dev/null
+++ b/src/views/wms/board/purchaseArrivalBoard.vue
@@ -0,0 +1,528 @@
+<!-- 采购到货看版 -->
+<template>
+  <div class="box">
+    <div class="title">采购到货看版</div>
+    <div class="table">
+      <table border class="table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <div>9-15</div>
+              <div>8:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>9:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>10:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>11:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>12:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>13:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>14:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>15:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>16:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>17:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>18:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>19:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>20:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>21:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>22:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>23:00</div>
+            </th>
+            <th>
+              <div>9-15</div>
+              <div>0:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>1:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>2:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>3:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>4:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>5:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>6:00</div>
+            </th>
+            <th>
+              <div></div>
+              <div>7:00</div>
+            </th>
+          </tr>
+        </thead>
+        <tBody>
+          <tr v-for="(item, index) in tableData" :key="index">
+            <td class="flist-col">{{ item.name }}</td>
+            <template v-for="(cur, key) in item.dock" :key="key">
+              <td :colspan="cur.span"  v-if="cur.backgroundColor">
+                <div :style="{ background: cur.backgroundColor }">{{cur.num1}}</div>
+              </td>
+              <td  v-if="!cur.backgroundColor"></td>
+            </template>
+          </tr>
+        </tBody>
+      </table>
+    </div>
+    <div class="list mt-16px">
+      <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
+const tableData = [
+  {
+    name: 'dock1',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span: 2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#dfa041',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock2',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#f46c6c',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:1,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'3',
+        backgroundColor: '#90939a',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3 ,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }, {
+    name: 'dock3',
+    dock: [
+      {
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#529b2f',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'2',
+        backgroundColor: '#e6a23d',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:"",
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:2,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '', 
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:4,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:3,
+        backgroundColor: '#3275b9',
+        num1: '234'
+      },{
+        time: '9:00',
+        startTime: '8:00',
+        endTime: '10:00',
+        span:'',
+        backgroundColor: '',
+        num1: '234'
+      }
+    ]
+  }
+]
+const config = reactive({
+  header: ['状态', '流水号', '月台号', '供应商', '发货单', '车牌号', '计划到货时间', '实际到货时间'],
+  data: [
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行1列1</span>', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6', '行1列7', '行1列8'],
+    ['<span style="background:#529b2f;width:100%;height:100%;display:block">行2列1</span>', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6', '行2列7', '行2列8'],
+    ['<span style="background:#f46c6c;width:100%;height:100%;display:block">行3列1</span>', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6', '行3列7', '行3列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行4列1</span>', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6', '行4列7', '行4列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行5列1</span>', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6', '行5列7', '行5列8'],
+    ['<span style="background:#e6a23d;width:100%;height:100%;display:block">行6列1</span>', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6', '行6列7', '行6列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行7列1</span>', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6', '行7列7', '行7列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行8列1</span>', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6', '行8列7', '行8列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行9列1</span>', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6', '行9列7', '行9列8'],
+    ['<span style="background:#3275b9;width:100%;height:100%;display:block">行10列1</span>', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6', '行10列7', '行10列8'],
+  ],
+  index: false,
+  // columnWidth: [50],
+  align: ['center','center','center','center','center','center','center','center'],
+  rowNum:8,
+  headerHeight:50,
+  headerBGC:'#616267',
+  oddRowBGC:'#303133',
+  evenRowBGC:'#303133',
+  
+})
+</script>
+<style lang="scss" scoped>
+.box {
+  width: 98vw;
+  height: 96vh;
+  background: #303133;
+  padding: 2vh 1vw;
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  color: #9d9f9e;
+  font-size: 30px;
+  text-align: center;
+  line-height: 7vh;
+  width: 100%;
+}
+.table {
+  width: 98vw;
+  border-collapse: collapse;
+  border-spacing: 0;
+  tr {
+    color: #b3b4b8;
+  }
+  td {
+    width: calc(92vw / 24);
+    text-align: center;
+    div {
+      width: calc(100% - 16px);
+      height: 28px;
+      margin: 8px;
+      line-height: 28px;
+      color: white;
+      text-align: left;
+      text-indent: 10px;
+    }
+    &.flist-col {
+      width: 6vw;
+    }
+  }
+  thead {
+    tr {
+      text-indent: -100%;
+      border-left: 1px solid rgba(255, 255, 255, 0);
+      border-top: 1px solid rgba(255, 255, 255, 0);
+      border-right: 1px solid rgba(255, 255, 255, 0);
+    }
+    th {
+      font-size: 14px;
+      font-weight: normal !important;
+      height: 6vh;
+      div {
+        height: 2.5vh;
+        line-height: 2.5vh;
+      }
+    }
+  }
+}
+.list{
+  flex: 1;
+  width: 100%;
+}
+::v-deep(.row-item){
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.ceil){
+  border-right: 1px solid rgba(255,255,255,0.5);
+  padding: 0px!important;
+}
+::v-deep(.dv-scroll-board){
+  border-top: 1px solid rgba(255,255,255,0.5);
+  border-left: 1px solid rgba(255,255,255,0.5);
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+::v-deep(.header-item){
+  border-right: 1px solid rgba(255,255,255,0.5);
+}
+</style>