Jiantengmes-vue/src/views/modules/board/SORoutingBoard.vue

<template>
  <div class="mod-config">
    <img class="logo" src="~@/assets/img/jtLogo.png" style="  width: 10%; position: absolute;top: 0;left:0;" >
    <div style="text-align: center">
      <h1>{{lineName}}生产看板</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="productionLineDesc"
          header-align="center"
          align="center"
          min-width="20"
          style="font-size: 20px"
          label="车间">
        </el-table-column>
        <el-table-column
          prop="seqNo"
          header-align="center"
          align="center"
          min-width="25"
          style="font-size: 20px"
          label="派工单号">
        </el-table-column>
        <el-table-column
          prop="orderNo"
          header-align="center"
          align="center"
          min-width="50"
          style="font-size: 20px"
          label="生产订单号">
        </el-table-column>
        <el-table-column
          prop="partNo"
          header-align="center"
          align="center"
          min-width="30"
          label="物料编码">
        </el-table-column>
        <el-table-column
          prop="operationDesc"
          header-align="center"
          align="center"
          min-width="30"
          label="工序">
        </el-table-column>
        <el-table-column
          prop="sScheduledDate"
          header-align="center"
          align="center"
          min-width="40"
          label="派工日期">
        </el-table-column>
        <el-table-column
          prop="operatorName"
          header-align="center"
          align="center"
          min-width="30"
          label="操作员">
        </el-table-column>
        <el-table-column
          prop="needDate"
          header-align="center"
          align="center"
          min-width="40"
          label="要求完工日期">
        </el-table-column>
        <el-table-column
          prop="qtyRequired"
          header-align="center"
          align="right"
          min-width="30"
          label="需求数量">
        </el-table-column>
        <el-table-column
          prop="qtyReported"
          header-align="center"
          align="right"
          min-width="30"
          label="报工数量">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="lastLineName"-->
<!--          header-align="center"-->
<!--          align="center"-->
<!--          min-width="30"-->
<!--          label="上道生产线">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="lastSeqNoDoing"
          header-align="center"
          align="center"
          min-width="30"
          label="上道派工单">
        </el-table-column>
        <el-table-column
          prop="lastOperationDesc"
          header-align="center"
          align="center"
          min-width="30"
          label="上道工序">
        </el-table-column>

<!--        <el-table-column-->
<!--          prop="lastReportQty"-->
<!--          header-align="center"-->
<!--          align="right"-->
<!--          min-width="40"-->
<!--          label="上道完成数量">-->
<!--        </el-table-column>-->
      </el-table>

    </div>

  </div>
</template>

<script>
  let rollstop = ''
  let rolltimer = ''// 自动滚动的定时任务
  let refresher = '' //数据刷新定时器
  import {
    SORoutingBoard,
  } from '@/api/production/board.js'
  export default {
    name: 'SORoutingBoard',
    data () {
      return {
        lineNo:this.$route.query.lineNo?this.$route.query.lineNo:'',
        lineName:this.$route.query.lineName?this.$route.query.lineName:'',
        pageIndex: 1,
        totalPage: 1,
        height: 200,
        tableData: [],
        pageIndex2: 1,
        totalPage2: 1,
        tableData2: [],
        // 默认的刷新，滚动时间，滚动间距
        // refreshTime: 5,
        // rollTime: 5,
        // rollPx: 1,
      }
    },
    mounted () {
      this.$nextTick(() => {
        // this.height = window.innerHeight - 172
        this.height = window.innerHeight - 80
      })
      // this.autoRoll()
    },
    methods: {
      tableRowClassName ({row, rowIndex}) {
        if (row.outWorkFlag == 'N') {
          return 'success-row'
        }

        return ''
      },
      search () {
        let inData= {number:this.pageIndex,number2:this.pageIndex2,
        text1:this.lineNo};
        SORoutingBoard(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
          }

          // this.tableData2 = data.rows2;
          // this.totalPage2= data.maxPage2;
          // if(this.pageIndex2+1>data.maxPage2){
          //   this.pageIndex2=1
          // }else {
          //   this.pageIndex2=this.pageIndex2+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>