wuHanXinRui/mes/qd/src/views/wms/sb/stat/taskscreen/taskScreen.vue

<template>
  <div class="login" :style="'background-image:url('+ Background +');'">
    <div style="font-size: 22px; color: #f4f4f5; padding: 6px 50px 6px 700px;background-color: transparent">维修班组任务列表</div>
    <div style="font-size: 20px; color: #f4f4f5; padding: 6px 50px 6px 10px; background-color: transparent">报修任务</div>
    <div class="t_btn1">
      <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>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div style="font-size: 20px; color: #f4f4f5; background-color: transparent; padding: 6px 50px 6px 10px">在修任务</div>
    <div class="t_btn2">
      <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>
import Background from '@/assets/images/bigScreen.png'

export default {
  name: 'Test',
  data() {
    return {
      // path: 'ws://192.168.81.252:8086//webSocket/21',
      // path: window.g.dev.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/21',
      path: window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/21',
      Background: Background,
      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)
      if (data.msg.requestArr.length !== 0) {
        this.table = data.msg.requestArr
      }
      if (data.msg.repaiArr.length !== 0) {
        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: #fff,backgroundColor: transparent,fontSize: fontSize(23),textAlign: center'
    },
    cellStyle2(row, column, rowIndex, columnIndex) {
      return 'color: #fff,backgroundColor: transparent,fontSize: fontSize(23),textAlign: center'
    }
  }
}
</script>

<style scoped>

.login {
  height: 100%;
  background-size: cover;
}

/*.t_btn2 >>> .el-table::before {*/
/*  !* 去除下边框 *!*/
/*  height: 0;*/
/*}*/

/*.t_btn2 >>> .el-table--border {*/
/*  !* 去除上边框 *!*/
/*  border: none;*/
/*}*/

.t_btn2 >>> .el-table th.is-leaf {
  /* 去除表头边框 */
  border: none;
}
.t_btn2 >>> .el-table__row>td {
  /* 去除表格线 */
  border: none;
}
.t_btn2 >>> .el-table th {
  /* 设置表头的颜色和字体颜色 */
  background-color: #012957;
  color: #FFFFFF;
  font-size: 17px;
}
.t_btn2 >>>.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.t_btn2 >>> .el-table tr {
  background-color: transparent !important;
  color: #FFFFFF;
  font-weight: 500;
}
.t_btn2 >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  padding: 0;
  background-color: transparent;
}

/*.t_btn1 >>> .el-table::before {*/
/*  !* 去除下边框 *!*/
/*  height: 0;*/
/*}*/

/*.t_btn1 >>> .el-table--border {*/
/*  !* 去除上边框 *!*/
/*  border: none;*/
/*}*/

.t_btn1 >>> .el-table th.is-leaf {
  /* 去除表头边框 */
  border: none;
}

.t_btn1 >>> .el-table th.is-leaf {
  /* 去除上边框 */
  border: none;
}
.t_btn1 >>> .el-table__row>td {
  /* 去除表格线 */
  border: none;
}
.t_btn1 >>> .el-table th {
  /* 设置表头的颜色和字体颜色 */
  background-color: #012957;
  color: #FFFFFF;
  font-size: 17px;
}
.t_btn1 >>>.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.t_btn1 >>> .el-table tr {
  background-color: transparent !important;
  color: #FF0000;
  font-weight: 500;
}
.t_btn1 >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  padding: 0;
  background-color: transparent;
}

</style>