129 lines
3.5 KiB
Vue
129 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="site-wrapper"
|
||
|
|
:class="{ 'site-sidebar--fold': sidebarFold }"
|
||
|
|
v-loading.fullscreen.lock="loading"
|
||
|
|
element-loading-text="拼命加载中">
|
||
|
|
<template v-if="!loading">
|
||
|
|
<main-navbar />
|
||
|
|
<main-sidebar />
|
||
|
|
<div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
|
||
|
|
<main-content />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MainNavbar from './main-navbar'
|
||
|
|
import MainSidebar from './main-sidebar'
|
||
|
|
import MainContent from './main-content'
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
loading: true,
|
||
|
|
websock: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
MainNavbar,
|
||
|
|
MainSidebar,
|
||
|
|
MainContent
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
documentClientHeight: {
|
||
|
|
get () { return this.$store.state.common.documentClientHeight },
|
||
|
|
set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
|
||
|
|
},
|
||
|
|
sidebarFold: {
|
||
|
|
get () { return this.$store.state.common.sidebarFold }
|
||
|
|
},
|
||
|
|
userId: {
|
||
|
|
get () { return this.$store.state.user.id },
|
||
|
|
set (val) { this.$store.commit('user/updateId', val) }
|
||
|
|
},
|
||
|
|
userName: {
|
||
|
|
get () { return this.$store.state.user.name },
|
||
|
|
set (val) { this.$store.commit('user/updateName', val) }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
this.getUserInfo()
|
||
|
|
this.initWebSocket()
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.resetDocumentClientHeight()
|
||
|
|
setInterval(this.websocketsend, 30000)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 重置窗口可视高度
|
||
|
|
resetDocumentClientHeight () {
|
||
|
|
this.documentClientHeight = document.documentElement['clientHeight']
|
||
|
|
window.onresize = () => {
|
||
|
|
this.documentClientHeight = document.documentElement['clientHeight']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取当前管理员信息
|
||
|
|
getUserInfo () {
|
||
|
|
this.$http({
|
||
|
|
url: this.$http.adornUrl('/sys/user/info'),
|
||
|
|
method: 'get',
|
||
|
|
params: this.$http.adornParams()
|
||
|
|
}).then(({data}) => {
|
||
|
|
if (data && data.code === 0) {
|
||
|
|
this.loading = false
|
||
|
|
this.userId = data.user.userId
|
||
|
|
this.userName = data.user.username
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initWebSocket () { // 初始化weosocket
|
||
|
|
var gFloor = localStorage.getItem('Floor')
|
||
|
|
let id = 0
|
||
|
|
switch (gFloor) {
|
||
|
|
case 'A1':
|
||
|
|
id = 1
|
||
|
|
break
|
||
|
|
case 'A2':
|
||
|
|
id = 2
|
||
|
|
break
|
||
|
|
case 'A3':
|
||
|
|
id = 3
|
||
|
|
break
|
||
|
|
case 'A4':
|
||
|
|
id = 4
|
||
|
|
break
|
||
|
|
case 'B1':
|
||
|
|
id = 5
|
||
|
|
break
|
||
|
|
}
|
||
|
|
const path = `ws://192.168.0.147:8083/benyi/websocket/${id}`
|
||
|
|
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())
|
||
|
|
},
|
||
|
|
websocketonerror () { // 连接建立失败重连
|
||
|
|
this.initWebSocket()
|
||
|
|
},
|
||
|
|
websocketonmessage (e) { // 数据接收
|
||
|
|
this.$notify.error({
|
||
|
|
title: '报警提示',
|
||
|
|
message: e.data,
|
||
|
|
duration: 15000
|
||
|
|
})
|
||
|
|
},
|
||
|
|
websocketsend () { // 数据发送
|
||
|
|
this.websock.send()
|
||
|
|
},
|
||
|
|
websocketclose (e) { // 关闭
|
||
|
|
console.log('断开连接', e)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|