ha-mes-vue/src/views/modules/board/productionBlankingBoard.vue

<template>
  <div class="mod-config">
    <div style="text-align: center">
      <h1>生产打料看板</h1>
    </div>
    <div class="board2">
      <el-table
        cell-style="cc"
        :height="height"
        :data="tableData"
        ref="wt_table"
        @mouseenter.native="mouseEnter"
        @mouseleave.native="mouseLeave"
        border
        :row-class-name="tableRowClassName"
        style="width: 100%;">
        <el-table-column
          prop="orderNo"
          header-align="center"
          align="left"
          min-width="50"
          style="font-size: 20px"
          label="硫化订单号">
        </el-table-column>
        <el-table-column
          prop="partDescSpec"
          header-align="center"
          align="left"
          min-width="120"
          label="硫化产品名称">
        </el-table-column>
        <el-table-column
          prop="compPartDescSpec"
          header-align="center"
          align="left"
          min-width="120"
          label="混炼胶名称">
        </el-table-column>
        <el-table-column
          prop="qtyRequired"
          header-align="center"
          align="right"
          min-width="50"
          label="计划需求量">
        </el-table-column>
        <el-table-column
          prop="sjph1"
          header-align="center"
          align="left"
          min-width="50"
          label="生胶牌号1">
        </el-table-column>
        <el-table-column
          prop="sjphQtyReq1"
          header-align="center"
          align="right"
          min-width="50"
          label="生胶1用量">
        </el-table-column>
        <el-table-column
          prop="sjph2"
          header-align="center"
          align="left"
          min-width="50"
          label="生胶牌号2">
        </el-table-column>
        <el-table-column
          prop="sjphQtyReq2"
          header-align="center"
          align="right"
          min-width="50"
          label="生胶2用量">
        </el-table-column>
        <el-table-column
          prop="planStartDate"
          header-align="center"
          align="left"
          min-width="45"
          label="需求日期">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
  let rollstop = ''
  let rolltimer = ''// 自动滚动的定时任务
  let refresher = '' //数据刷新定时器
  import {
    productionBlankingBoard,
  } from '@/api/board.js'
  export default {
    name: 'productionBlankingBoard',
    data () {
      return {
        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'
        }
        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 () {
        productionBlankingBoard().then(({data}) => {
          this.tableData = data.rows
        })
      },
      // 鼠标进入
      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()
        }, 600000)
      }
    },
    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;
  }

</style>