11.03

src/api/production/board.js

@@ -0,0 +1,5 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+
+
+export const scheduleBoard = data => createAPI(`/board/scheduleBoard`,'post',data)

src/router/index.js

@@ -20,7 +20,7 @@ const _import = require('./import-' + process.env.NODE_ENV)
 const globalRoutes = [
   { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
   { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
-
+  { path: '/scheduleBoard', component: _import('modules/board/scheduleBoard'), name: 'scheduleBoard', meta: { title: '派工单看板' } },
 ]
 
 // 主入口路由(需嵌套上左右整体布局)

src/views/modules/board/scheduleBoard.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="mod-config">
+    <div style="text-align: center">
+      <h1>派工单看板</h1>
+    </div>
+    <div class="board2">
+      <!--        @mouseenter.native="mouseEnter"-->
+      <!--        @mouseleave.native="mouseLeave"-->
+      <el-table
+        cell-style="cc"
+        :height="height"
+        :data="tableData"
+        ref="wt_table"
+        border
+        :row-class-name="tableRowClassName"
+        style="width: 100%;">
+        <el-table-column
+          prop="site"
+          header-align="center"
+          align="left"
+          min-width="50"
+          style="font-size: 20px"
+          label="工厂编号">
+        </el-table-column>
+        <el-table-column
+          prop="seqNo"
+          header-align="center"
+          align="right"
+          min-width="80"
+          style="font-size: 20px"
+          label="派工单号">
+        </el-table-column>
+        <el-table-column
+          prop="orderNo"
+          header-align="center"
+          align="left"
+          min-width="100"
+          style="font-size: 20px"
+          label="生产订单">
+        </el-table-column>
+        <el-table-column
+          prop="itemNo"
+          header-align="center"
+          align="left"
+          min-width="65"
+          style="font-size: 20px"
+          label="工序编号">
+        </el-table-column>
+        <el-table-column
+          prop="operationDesc"
+          header-align="center"
+          align="left"
+          min-width="160"
+          label="工序名称">
+        </el-table-column>
+        <el-table-column
+          prop="partNo"
+          header-align="center"
+          align="left"
+          min-width="105"
+          label="产品编号">
+        </el-table-column>
+        <el-table-column
+          prop="partDesc"
+          header-align="center"
+          align="left"
+          min-width="200"
+          label="产品名称">
+        </el-table-column>
+        <el-table-column
+          prop="qtyRequired"
+          header-align="center"
+          align="right"
+          min-width="60"
+          label="需求数量">
+        </el-table-column>
+        <el-table-column
+          prop="qtyReported"
+          header-align="center"
+          align="right"
+          min-width="60"
+          label="报工数量">
+        </el-table-column>
+        <el-table-column
+          prop="qtyApprove"
+          header-align="center"
+          align="right"
+          min-width="60"
+          label="合格数量">
+        </el-table-column>
+      </el-table>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  let rollstop = ''
+  let rolltimer = ''// 自动滚动的定时任务
+  let refresher = '' //数据刷新定时器
+  import {
+    scheduleBoard,
+  } from '@/api/production/board.js'
+  export default {
+    name: 'scheduleBoard',
+    data () {
+      return {
+        pageIndex: 1,
+        totalPage: 1,
+        height: 200,
+        tableData: [],
+        // 默认的刷新，滚动时间，滚动间距
+        // refreshTime: 5,
+        // rollTime: 5,
+        // rollPx: 1,
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.height = window.innerHeight - 80
+      })
+      // this.autoRoll()
+    },
+    methods: {
+      tableRowClassName ({row, rowIndex}) {
+      },
+      search () {
+        let inData= {number:this.pageIndex};
+        scheduleBoard(inData).then(({data}) => {
+          this.tableData = data.rows;
+          this.totalPage= data.maxPage;
+          if(this.pageIndex+1>data.maxPage){
+            this.pageIndex=1
+          }else {
+            this.pageIndex=this.pageIndex+1
+          }
+        })
+      },
+      // 鼠标进入
+      // mouseEnter (time) {
+      //   // 鼠标进入停止滚动和切换的定时任务
+      //   this.autoRoll(true)
+      // },
+// 鼠标离开
+//       mouseLeave () {
+//         // 开启
+//         this.autoRoll()
+//       },
+// 设置自动滚动
+//       autoRoll (stop) {
+//         if (stop) {
+//           clearInterval(rolltimer)
+//           return
+//         }
+//         // 拿到表格挂载后的真实DOM
+//         const table = this.$refs.wt_table
+//         // 拿到表格中承载数据的div元素
+//         const divData = table.bodyWrapper
+//         // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
+//         rolltimer = setInterval(() => {
+//           // 元素自增距离顶部像素
+//           divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx))
+//           // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+//           if (divData.clientHeight + divData.scrollTop +1>= divData.scrollHeight) {
+//             // 重置table距离顶部距离
+//               divData.scrollTop = 0
+//           }
+//         }, this.rollTime * 10)
+//       },
+      refreshTable () {
+        refresher = setInterval(() => {
+          this.search()
+        }, 30000)
+      }
+    },
+    created () {
+      this.search()
+      this.refreshTable()
+    }
+  }
+</script>
+
+<style >
+
+
+  .board2 .el-table .cell {
+    line-height: 13px;
+    font-size: 12px;
+    height: 13px;
+    padding: 0px;
+  }
+
+  .board2 .el-table .success-row {
+    background: #1bb61b;
+  }
+  .board2 .el-table .false-row {
+    /*background: #cbcb14;*/
+    background: #db1212;
+  }
+  .board2 .el-table .yellow-row{
+    background: #ffff00;
+  }
+</style>