任务列表屏

2022-07-04 08:45:26 +08:00
parent a34ddd9924
commit 5f9bf824a9
4 changed files with 243 additions and 0 deletions
--- a/mes/qd/src/views/wms/sb/stat/taskscreen/taskScreen.vue
+++ b/mes/qd/src/views/wms/sb/stat/taskscreen/taskScreen.vue
@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <div style="font-size: 20px; color: #f4f4f5; padding: 6px 50px 6px 10px; background-color: #2c3e50">报修任务</div>
+    <div class="my_table">
+      <el-table border style="width: 100%;" :data="table" max-height="300" :cell-style="cellStyle" :highlight-current-row="true" >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column align="center" property="fault_time" label="日期"/>
+        <el-table-column align="center" property="create_time" label="报修时间"/>
+        <el-table-column align="center" property="name" label="报修部门"/>
+        <el-table-column align="center" property="device_name" label="设备"/>
+        <el-table-column align="center" property="class_name" label="故障类型"/>
+        <el-table-column align="center" property="create_name" label="报修人"/>
+      </el-table>
+    </div>
+    <div style="font-size: 20px; color: #f4f4f5; background-color: #2c3e50; padding: 6px 50px 6px 10px">在修任务</div>
+    <div class="my_table">
+      <el-table border style="width: 100%;" :data="table2" max-height="300" :cell-style="cellStyle2" :highlight-current-row="true" >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column align="center" property="fault_time" label="日期"/>
+        <el-table-column align="center" property="create_time" label="报修时间"/>
+        <el-table-column align="center" property="name" label="报修部门"/>
+        <el-table-column align="center" property="device_name" label="设备"/>
+        <el-table-column align="center" property="class_name" label="故障类型"/>
+        <el-table-column align="center" property="fault_level_name" label="故障等级"/>
+        <el-table-column align="center" property="update_optname" label="维修员"/>
+        <el-table-column align="center" property="real_start_date" label="开始维修"/>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Test',
+  data() {
+    return {
+      path: 'ws://localhost:8010/webSocket/21',
+      table: [
+        { 'fault_time': '暂无数据', 'create_time': '暂无数据', 'name': '暂无数据', 'device_name': '暂无数据', 'class_name': '暂无数据' }
+      ],
+      table2: [
+        { 'fault_time': '暂无数据', 'create_time': '暂无数据', 'name': '暂无数据', 'device_name': '暂无数据', 'class_name': '暂无数据' }
+      ]
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    // webSocket
+    init: function() {
+      if (typeof (WebSocket) === 'undefined') {
+        alert('您的浏览器不支持socket')
+      } else {
+        // 实例化socket
+        this.socket = new WebSocket(this.path)
+        // 监听socket连接
+        this.socket.onopen = this.open
+        // 监听socket错误信息
+        this.socket.onerror = this.error
+        // 监听socket消息
+        this.socket.onmessage = this.getMessage
+      }
+    },
+    open: function() {
+      console.log('socket连接成功')
+    },
+    error: function() {
+      console.log('连接错误')
+    },
+    getMessage: function(msg) {
+      debugger
+      const data = JSON.parse(msg.data)
+      this.table = data.msg.requestArr
+      this.table2 = data.msg.repaiArr
+    },
+    send: function() {
+      // eslint-disable-next-line no-undef
+      this.socket.send(params)
+    },
+    close: function() {
+      console.log('socket已经关闭')
+    },
+    // ----------------我是分割线-----------------
+    handleClose() {
+      this.$emit('update:visible', false)
+    },
+    cellStyle(row, column, rowIndex, columnIndex) {
+      return 'color:red; font-size: 14px;'
+    },
+    cellStyle2(row, column, rowIndex, columnIndex) {
+      return 'font-size: 14px;'
+    }
+  },
+  beforeCreate() {
+    this.$nextTick(() => {
+      document.body.setAttribute('style', 'background-color: #2D2F3F')
+    })
+  },
+  // 实例销毁之前钩子--移除body 标签的属性style
+  beforeDestroy() {
+    document.body.removeAttribute('style')
+  }
+}
+</script>
+
+<style scoped>
+
+/*.my_table >>> .el-table::before {
+  !* 去除下边框 *!
+  height: 0;
+}*/
+
+.my_table >>> .el-table__row>td {
+  /* 去除表格线 */
+  border: none;
+}
+
+.my_table >>> .el-table th.is-leaf {
+  /* 去除上边框 */
+  border: none;
+}
+
+.my_table >>> .el-table tr {
+  /* 设置每行的颜色和字体颜色 */
+  background-color: #2D2F3F;
+  color: #FFFFFF;
+  font-weight: 500;
+}
+
+.my_table >>> .el-table th {
+  /* 设置表头的颜色和字体颜色 */
+  background-color: rgb(19, 71, 98);
+  color: #FFFFFF;
+  font-size: 17px;
+}
+.my_span {
+  padding: 10px 50px 10px 0px;
+  font-size: 17px;
+}
+
+</style>