130 lines
3.4 KiB
Vue
130 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<div style="font-size: 22px; color: #f4f4f5; padding: 6px 50px 6px 700px;background-color: #2c3e50">当日任务列表</div>
|
|
<div class="my_table">
|
|
<el-table border style="width: 100%;" :data="tableData" max-height="800" :cell-style="cellStyle" :highlight-current-row="true" >
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column prop="input_time" label="生成时间" />
|
|
<el-table-column prop="repair_code" label="任务号" />
|
|
<el-table-column prop="maintenancecycle" label="任务类型" />
|
|
<!-- <el-table-column prop="" label="部门" />-->
|
|
<el-table-column prop="device_code" label="设备编码" />
|
|
<el-table-column prop="device_name" label="设备名称" />
|
|
<el-table-column prop="invstatus" label="状态" />
|
|
<el-table-column prop="real_start_date" label="开始时间" />
|
|
<el-table-column prop="real_end_date" label="结束时间" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import crud from '@/mixins/crud'
|
|
|
|
export default {
|
|
name: 'BigscreenTask',
|
|
mixins: [crud],
|
|
data() {
|
|
return {
|
|
path: 'ws://localhost:8010/webSocket/20',
|
|
currentDate: new Date(),
|
|
getTime: '',
|
|
getDate: '',
|
|
tableData: [
|
|
{ 'input_time': '暂无数据', 'repair_code': '暂无数据', 'maintenancecycle': '暂无数据', 'device_code': '暂无数据', 'device_name': '暂无数据' }
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
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.tableData = data.msg
|
|
},
|
|
send: function() {
|
|
// eslint-disable-next-line no-undef
|
|
this.socket.send(params)
|
|
},
|
|
close: function() {
|
|
console.log('socket已经关闭')
|
|
},
|
|
cellStyle(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>
|