看板微调

1 week ago · af7a890ead
3 changed files with 96 additions and 11 deletions
--- a/src/views/modules/haianWarehouse/dashboard/autoSortingBoard54.vue
+++ b/src/views/modules/haianWarehouse/dashboard/autoSortingBoard54.vue
@ -38,7 +38,8 @@
        <!-- 面板标题 -->

        <!-- 数据表格 -->
-        <div class="panel-table">
+        <!-- 行多时在表体内定时下滚，鼠标进入暂停，表头保持可见 - rqrq -->
+        <div ref="tableViewport" class="panel-table" @mouseenter="scrollPaused = true" @mouseleave="scrollPaused = false">
          <table class="data-table">
            <thead>
              <tr>
@ -96,7 +97,10 @@ export default {
      // connecting 黄、connected 绿、disconnected 红，只表示 STOMP 连接，不表示立库有没有任务 - rqrq
      connectionState: 'connecting',
      // 位置1和位置2合在一张表，按拣选口排列 - rqrq
-      boardList: []
+      boardList: [],
+      scrollTimer: null,
+      scrollPaused: false,
+      scrollResumeAt: 0
    }
  },
  computed: {
@ -123,6 +127,8 @@ export default {
    this.configTimer = setInterval(() => {
      this.checkBoardConfig()
    }, 30000)
+    // 和人工分拣一样每 60 毫秒走 1 像素；内容没超出时方法内直接返回 - rqrq
+    this.scrollTimer = setInterval(this.scrollTable, 60)
  },

  beforeDestroy() {
@ -137,6 +143,9 @@ export default {
    if (this.configTimer) {
      clearInterval(this.configTimer)
    }
+    if (this.scrollTimer) {
+      clearInterval(this.scrollTimer)
+    }
  },

  methods: {
@ -287,6 +296,18 @@ export default {
     */
    getStatusClass(status) {
      return status === '已完成' ? 'status-success' : 'status-pending'
+    },
+    // 到底停留 2 秒再回顶。没有数据或表格没超出可视高度时不滚 - rqrq
+    scrollTable () {
+      const viewport = this.$refs.tableViewport
+      if (!viewport || this.scrollPaused || !this.boardList.length || Date.now() < this.scrollResumeAt) return
+      if (viewport.scrollHeight <= viewport.clientHeight) return
+      if (viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 1) {
+        viewport.scrollTop = 0
+        this.scrollResumeAt = Date.now() + 2000
+      } else {
+        viewport.scrollTop += 1
+      }
    }
  }
 }
@ -555,6 +576,10 @@ export default {
    }

    th {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background: #1b6676;
      padding: 5px 6px;
      color: #fcfdfd;
      font-size: 16px;
--- a/src/views/modules/haianWarehouse/dashboard/errorAreaBoard54.vue
+++ b/src/views/modules/haianWarehouse/dashboard/errorAreaBoard54.vue
@ -38,7 +38,8 @@
        <!-- 面板标题 -->

        <!-- 数据表格 -->
-        <div class="panel-table">
+        <!-- 行多时在表体内定时下滚，鼠标进入暂停，表头保持可见 - rqrq -->
+        <div ref="tableViewport" class="panel-table" @mouseenter="scrollPaused = true" @mouseleave="scrollPaused = false">
          <table class="data-table error-area-table">
            <colgroup>
              <col style="width: 20%">
@ -88,7 +89,10 @@ export default {
      queryLoading: false,
      // 第一次请求中为黄，查询成功为绿，失败为红。没有栈板也保持绿灯 - rqrq
      connectionState: 'connecting',
-      boardList: []
+      boardList: [],
+      scrollTimer: null,
+      scrollPaused: false,
+      scrollResumeAt: 0
    }
  },
  computed: {
@ -115,6 +119,8 @@ export default {
    this.pollTimer = setInterval(() => {
      this.getDataList()
    }, 5000)
+    // 和人工分拣一样每 60 毫秒走 1 像素；内容没超出时方法内直接返回 - rqrq
+    this.scrollTimer = setInterval(this.scrollTable, 60)
  },

  beforeDestroy() {
@ -127,6 +133,9 @@ export default {
    if (this.pollTimer) {
      clearInterval(this.pollTimer)
    }
+    if (this.scrollTimer) {
+      clearInterval(this.scrollTimer)
+    }
  },

  methods: {
@ -172,6 +181,18 @@ export default {
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const weekDay = weekDays[now.getDay()]
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
+    },
+    // 到底停留 2 秒再回顶。没有数据或表格没超出可视高度时不滚 - rqrq
+    scrollTable () {
+      const viewport = this.$refs.tableViewport
+      if (!viewport || this.scrollPaused || !this.boardList.length || Date.now() < this.scrollResumeAt) return
+      if (viewport.scrollHeight <= viewport.clientHeight) return
+      if (viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 1) {
+        viewport.scrollTop = 0
+        this.scrollResumeAt = Date.now() + 2000
+      } else {
+        viewport.scrollTop += 1
+      }
    }
  }
 }
@ -440,6 +461,10 @@ export default {
    }

    th {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background: #1b6676;
      padding: 5px 6px;
      color: #fcfdfd;
      font-size: 16px;
--- a/src/views/modules/haianWarehouse/dashboard/palletOutboundBoard54.vue
+++ b/src/views/modules/haianWarehouse/dashboard/palletOutboundBoard54.vue
@ -38,14 +38,21 @@
        <!-- 面板标题 -->

        <!-- 数据表格 -->
-        <div class="panel-table">
-          <table class="data-table">
+        <!-- 行多时在表体内定时下滚，鼠标进入暂停，表头保持可见 - rqrq -->
+        <div ref="tableViewport" class="panel-table" @mouseenter="scrollPaused = true" @mouseleave="scrollPaused = false">
+          <table class="data-table outbound-table">
+            <colgroup>
+              <col style="width: 25%">
+              <col style="width: 25%">
+              <col style="width: 20%">
+              <col style="width: 30%">
+            </colgroup>
            <thead>
              <tr>
-                <th style="width: 180px;">托盘码</th>
-                <th style="width: 180px;">物料编码</th>
-                <th style="width: 120px;">数量</th>
-                <th style="width: 160px;">状态</th>
+                <th>托盘码</th>
+                <th>物料编码</th>
+                <th>数量</th>
+                <th>状态</th>
              </tr>
            </thead>
            <tbody>
@ -85,7 +92,10 @@ export default {
      queryLoading: false,
      // 第一次请求中为黄，立库 200 为绿，非 200 或调用失败为红 - rqrq
      connectionState: 'connecting',
-      boardList: []
+      boardList: [],
+      scrollTimer: null,
+      scrollPaused: false,
+      scrollResumeAt: 0
    }
  },
  computed: {
@ -112,6 +122,8 @@ export default {
    this.pollTimer = setInterval(() => {
      this.getDataList()
    }, 5000)
+    // 和人工分拣一样每 60 毫秒走 1 像素；内容没超出时方法内直接返回 - rqrq
+    this.scrollTimer = setInterval(this.scrollTable, 60)
  },

  beforeDestroy() {
@ -124,6 +136,9 @@ export default {
    if (this.pollTimer) {
      clearInterval(this.pollTimer)
    }
+    if (this.scrollTimer) {
+      clearInterval(this.scrollTimer)
+    }
  },

  methods: {
@ -179,6 +194,18 @@ export default {
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const weekDay = weekDays[now.getDay()]
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
+    },
+    // 到底停留 2 秒再回顶。没有数据或表格没超出可视高度时不滚 - rqrq
+    scrollTable () {
+      const viewport = this.$refs.tableViewport
+      if (!viewport || this.scrollPaused || !this.boardList.length || Date.now() < this.scrollResumeAt) return
+      if (viewport.scrollHeight <= viewport.clientHeight) return
+      if (viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 1) {
+        viewport.scrollTop = 0
+        this.scrollResumeAt = Date.now() + 2000
+      } else {
+        viewport.scrollTop += 1
+      }
    }
  }
 }
@ -441,12 +468,20 @@ export default {
  border-collapse: separate;
  border-spacing: 0;

+  &.outbound-table {
+    table-layout: fixed;
+  }
+
  thead {
    tr {
      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
    }

    th {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background: #1b6676;
      padding: 5px 6px;
      color: #fcfdfd;
      font-size: 16px;