0412 新看板

src/api/board.js

@@ -5,3 +5,4 @@ export const thisWeekShipmentBoardData = data => createAPI(`board/thisWeekShipme
 export const nextWeekShipmentBoardData = data => createAPI(`board/nextWeekShipmentBoardData`,'post',data)
 
 export const productionBlankingBoard = data => createAPI(`board/productionBlankingBoard`,'post',data)
+export const soLiuhuaBoard= data => createAPI(`board/soLiuhuaBoard`,'post',data)

src/router/index.js

@@ -24,6 +24,7 @@ const globalRoutes = [
   { path: '/thisWeekShipmentBoard', component: _import('modules/board/thisWeekShipmentBoard'), name: 'thisWeekShipmentBoard', meta: { title: '本周发货看板' } },
   { path: '/nextWeekShipmentBoard', component: _import('modules/board/nextWeekShipmentBoard'), name: 'nextWeekShipmentBoard', meta: { title: '下周发货看板' } },
   { path: '/productionBlankingBoard', component: _import('modules/board/productionBlankingBoard'), name: 'productionBlankingBoard', meta: { title: '生产打料看板' } },
+  { path: '/soLiuhuaBoard', component: _import('modules/board/soLiuhuaBoard'), name: 'soLiuhuaBoard', meta: { title: '硫化看板' } },
   { path: '/padPart', component: _import('modules/pad/padPart1'), name: 'padPart1', meta: { title: '产品搜索' } },
   { path: '/padPartAttribute', component: _import('modules/pad/padPartAttribute'), name: 'padPartAttribute', meta: { title: '产品属性' } },
   { path: '/padPartPhoto', component: _import('modules/pad/padPartPhoto'), name: 'padPartPhoto', meta: { title: '产品图片' } }

src/views/modules/board/soLiuhuaBoard.vue

@@ -0,0 +1,201 @@
+<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="erpStatus"
+          header-align="center"
+          align="left"
+          min-width="30"
+          style="font-size: 20px"
+          label="ERP">
+        </el-table-column>
+        <el-table-column
+          prop="orderNo"
+          header-align="center"
+          align="left"
+          min-width="65"
+          style="font-size: 20px"
+          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="partDescSpec"
+          header-align="center"
+          align="left"
+          min-width="180"
+          label="产品名称">
+        </el-table-column>
+        <el-table-column
+          prop="qtyRequired"
+          header-align="center"
+          align="right"
+          min-width="45"
+          label="计划数量">
+        </el-table-column>
+        <el-table-column
+          prop="qtyFinished"
+          header-align="center"
+          align="right"
+          min-width="45"
+          label="完成数量">
+        </el-table-column>
+        <el-table-column
+          prop="planStartDate"
+          header-align="center"
+          align="right"
+          min-width="80"
+          label="要求开工日期">
+        </el-table-column>
+      </el-table>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  let rollstop = ''
+  let rolltimer = ''// 自动滚动的定时任务
+  let refresher = '' //数据刷新定时器
+  import {
+    soLiuhuaBoard,
+  } from '@/api/board.js'
+  export default {
+    name: 'soLiuhuaBoard',
+    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}) {
+        if (row.finishedFlag == '2') {
+          return 'success-row'
+        }
+        if (row.finishedFlag == '3') {
+          return 'false-row'
+        }
+        if (row.finishedFlag == '4') {
+          return 'yellow-row'
+        }
+        return ''
+
+        // if (row.finishedFlag == '2') {
+        //
+        //   // return {css:{"background-color":"#1bb61b"}};
+        //   return 'success-row'
+        // }
+        // if (row.finishedFlag == '3') {
+        //   return 'false-row'
+        //   // return {css:{"background-color":"#cbcb14"}};
+        // }
+        // return ''
+      },
+      search () {
+        let inData= {number:this.pageIndex};
+        soLiuhuaBoard(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>