驾驶舱提测ui

2024-01-11 13:44:38 +08:00
parent b1458827f1
commit 6c02990cb5
20 changed files with 441 additions and 254 deletions
--- a/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
+++ b/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
@@ -1,11 +1,24 @@
 <template>
-  <div style="flex: 1;">
-    <Container name="工单监控" size="small" style="">
-      <div style="padding: 5px 10px;">
-        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/>
-      </div>
-    </Container>
-  </div>
+  <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';
@@ -19,47 +32,99 @@ export default {
  },
  data() {
    return {
-      config: {
-        header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'],
-        // headerHeight: '17',
-        headerBGC: 'rgba(32, 55, 96, 0.8)',
-        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
-        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        columnWidth: [60, 120, 80, 60, 80, 120, 120, 120],
-        align: ['center'],
-        data: [
-          [1, '工单1', '行1列3', '', '','','',''],
-          [2, '工单2', '行2列3', '', '','','',''],
-          [3, '工单3', '行3列3', '', '','','',''],
-          [4, '工单4', '行4列3', '', '','','',''],
-          [5, '工单5', '行5列3', '', '','','',''],
-          [6, '工单6', '行6列3', '', '','','',''],
-          [7, '工单7', '行7列3', '', '','','',''],
-          [8, '工单8', '行8列3', '', '','','',''],
-          [9, '工单9', '行9列3', '', '','','',''],
-          [10, '工单10', '行10列3', '', '','','','']
-        ],
-        rowNum: 10
-      }
+      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'}
+      ]
    }
  },
-  watch:{
-    order: {
-			handler(newVal, oldVal) {
-        let outArr = this.order.map((item, index) => [
-          index+1,
-          item.name,
-          item.specifications,
-          item.lines,
-          item.status,
-          item.planFinishTime,
-          item.planQuantity,
-          item.planAssignQuantity
-      ]);
-        this.config.data = outArr
-        this.$refs['worderScrollBoard'].updateRows(outArr)
-			}
-		}
+  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;
  }
 }
-</script>
+</style>