yudao-dev/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue

<template>
  <Container name="工单监控" size="middle" style="">
    <div style="padding: 5px 10px;" class="WOMonitoring">
      <!-- <dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/> -->
      <el-table
        :data="tableData"
        style="width: 575px"
        max-height="380"
        :header-cell-style="{ background:'rgba(32, 55, 96, 0.8)', color: '#fff', height: '35px', padding: 0 }"
        :row-style="rowStyle">
        <el-table-column fixed type="index" :index="indexMethod" label="序号" width="55"></el-table-column>
        <el-table-column fixed prop="name" show-overflow-tooltip label="工单名称" width="150"></el-table-column>
        <el-table-column prop="specifications" show-overflow-tooltip label="规格" width="150"></el-table-column>
        <el-table-column prop="lines" show-overflow-tooltip label="产线" width="70"></el-table-column>
        <el-table-column prop="status" show-overflow-tooltip label="工单状态" width="100"></el-table-column>
        <el-table-column prop="planFinishTime" show-overflow-tooltip label="计划完成时间" width="140"></el-table-column>
        <el-table-column prop="planQuantity" show-overflow-tooltip label="计划产量" width="110"></el-table-column>
        <el-table-column prop="planAssignQuantity" show-overflow-tooltip label="实际产量" width="110"></el-table-column>
      </el-table>
    </div>
  </Container>
</template>
<script>
import Container from '../components/Container.vue';
export default {
  name: 'WorkOrderMonitoring',
  components: { Container },
  computed: {
    order() {
      return this.$store.state.websocket.workOrder
    }
  },
  data() {
    return {
      tableData: [
        {name: '1111111111111111', specifications: '22222', lines: 'Y65', status: '已完成',planFinishTime:"2023-12-23 12:12:12"},
        {name: '11111', specifications: '22222'},
        {name: '11111', specifications: '22222'},
        {name: '11111', specifications: '22222'},
        {name: '11111', specifications: '22222'},
        {name: '11111'},
        {name: '11111'},
        {name: '11111'},
        {name: '11111'},
        {name: '11111'},
        {name: '11111'},
        {name: '11111'}
      ]
    }
  },
  methods:{
    rowStyle(v){
      if (v.rowIndex % 2 === 0) {
        return {
          background: 'rgba(14, 32, 62, 0.8)',
          color: '#fff',
          height: '35px',
          lineHeight:'35px',
          padding: 0,
          fontSize:'12px'
        }
      } else {
        return {
          background: 'rgba(32, 55, 96, 0.8)',
          color: '#fff',
          height: '35px',
          lineHeight:'35px',
          padding: 0,
          fontSize:'12px'
        }
      }
    },
    indexMethod(index) {
        return index+1;
      }
  },
  // watch:{
  //   order: {
	// 		handler(newVal, oldVal) {
  //     console.log(newVal)
  //       this.tableData = this.order
	// 		}
	// 	}
  // }
}
</script>
<style lang='scss'>
.WOMonitoring {
  .el-table {
    background-color: transparent;
    tr {
      background-color: transparent;
    }
  }
  .el-table tbody tr { 
      pointer-events:none; 
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: 1px solid #0d1728;
  }
  .el-table td.el-table__cell:last-child, .el-table th.el-table__cell.is-leaf:last-child {
    border-right: none;
  }
  .el-table--medium .el-table__cell {
    padding: 0;
  }
  // 滚动条
  ::-webkit-scrollbar-track-piece {
    background-color:#14305F;
  }

  ::-webkit-scrollbar-corner {
    background-color:#14305F;
  }

  ::-webkit-scrollbar-track {
    background: #14305F;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #118CA2;
    cursor: pointer;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #06214B;
  }
}
</style>