104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2022-03-07 15:31:13
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2022-07-08 08:36:01
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="main-body">
|
|
<div class="container-title">
|
|
浙江求精科技车间生产看板
|
|
</div>
|
|
<div class="container-body">
|
|
<board v-for="(item,index) in wbData" :key="index" :wbData="item" :imgUrl="item.kilnCode"></board>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import board from './board-part'
|
|
export default {
|
|
name: 'Board',
|
|
components: { board },
|
|
data () {
|
|
return {
|
|
websock: '',
|
|
url: '',
|
|
wbData: []
|
|
}
|
|
},
|
|
created () {
|
|
this.url = window.SITE_CONFIG.wbUrl
|
|
this.initWebSocket()
|
|
},
|
|
destroyed () {
|
|
// 页面销毁时关闭ws连接
|
|
if (this.websock) {
|
|
this.websock.close() // 关闭websocket
|
|
}
|
|
},
|
|
methods: {
|
|
initWebSocket () {
|
|
// 初始化weosocket
|
|
const path = `ws://${this.url}/qj/websocket/2`
|
|
this.websock = new WebSocket(path)
|
|
this.websock.onmessage = this.websocketonmessage
|
|
this.websock.onopen = this.websocketonopen
|
|
this.websock.onerror = this.websocketonerror
|
|
this.websock.onclose = this.websocketclose
|
|
},
|
|
websocketonopen () {
|
|
// 连接建立之后执行send方法发送数据
|
|
this.websocketsend(JSON.stringify('2'))
|
|
},
|
|
websocketonerror () {
|
|
// 连接建立失败重连
|
|
this.initWebSocket()
|
|
},
|
|
websocketonmessage (e) {
|
|
// 数据接收
|
|
this.wbData = JSON.parse(e.data)
|
|
console.log(this.wbData)
|
|
},
|
|
websocketsend (val) {
|
|
// 数据发送
|
|
this.websock.send(val)
|
|
},
|
|
websocketclose (e) {
|
|
// 关闭
|
|
console.log('断开连接', e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-body {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
background: url(~@/assets/img/board/1.png) center no-repeat;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
|
|
.container-title {
|
|
width: 100%;
|
|
height: 80px;
|
|
background: url(~@/assets/img/board/2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #00fff0;
|
|
font-size: 28px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-body {
|
|
display: flex;
|
|
margin: auto;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
</style>
|