129 lines
3.7 KiB
Vue
129 lines
3.7 KiB
Vue
<template>
|
|
<div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">统计任务看板</h2></div>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div class="grid-content bg-purple-light">
|
|
<h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
|
|
</div>
|
|
<div class="grid-content bg-purple-light">
|
|
<p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
|
|
</div>
|
|
|
|
</el-col>
|
|
</el-row>
|
|
<br>
|
|
<br>
|
|
<div>
|
|
<!--表格渲染-->
|
|
<el-table
|
|
ref="table"
|
|
:data="tableData"
|
|
size="small"
|
|
style="width: 100%;"
|
|
border
|
|
:header-cell-style="{background:'#f5f7fa',color:'#606266'}"
|
|
>
|
|
<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: []
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
// 定时器
|
|
const timer = setInterval(() => {
|
|
this.settime()// 你所加载数据的方法
|
|
}, 1000)
|
|
// 销毁定时器
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(timer)
|
|
})
|
|
this.init()
|
|
},
|
|
methods: {
|
|
settime() {
|
|
const _this = this
|
|
const yy = new Date().getFullYear()
|
|
const mm = new Date().getMonth() + 1
|
|
const dd = new Date().getDate()
|
|
const hh = new Date().getHours()
|
|
const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
|
|
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
|
|
_this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
|
|
_this.getTime = hh + ':' + mf + ':' + ss
|
|
},
|
|
// 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已经关闭')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
|
</style>
|