<template>
|
<section class="app-main" ref="container" v-bind:style="appMainsStyleObject">
|
<transition name="fade" mode="out-in">
|
<!-- <router-view :key="key"></router-view> -->
|
<router-view></router-view>
|
</transition>
|
</section>
|
</template>
|
|
<script>
|
// import { default as Bus, SCROLL_TOP, ON_VISIBILITY_CHANGE } from '@/bus/EventBus'
|
// import { default as Bus, SCROLL_TOP, ON_MESSAGE, ON_VISIBILITY_CHANGE } from '@/bus/EventBus'
|
import { default as Bus, SCROLL_TOP, ON_VISIBILITY_CHANGE } from '@/bus/EventBus'
|
import { URL_CFG } from '@/api/MdcApi'
|
import { getToken } from '@/utils/auth'
|
import { mapGetters } from 'vuex'
|
export default {
|
name: 'AppMain',
|
computed: {
|
appMainsStyleObject: function() {
|
return `height: ${this.$store.getters.mainHeight}px`
|
},
|
...mapGetters({
|
userInfo: 'userInfo'
|
})
|
// key() {
|
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
|
// }
|
},
|
created() {
|
Bus.$on(SCROLL_TOP, () => {
|
this.$refs.container.scrollTop = 0
|
})
|
// this.openWebSocket()
|
document.addEventListener('click', ev => {
|
this.$store.dispatch('GetInfo')
|
}, false)
|
let state
|
let visibilityChange
|
if (typeof document.hidden !== 'undefined') {
|
visibilityChange = 'visibilitychange'
|
state = 'visibilityState'
|
} else if (typeof document.mozHidden !== 'undefined') {
|
visibilityChange = 'mozvisibilitychange'
|
state = 'mozVisibilityState'
|
} else if (typeof document.msHidden !== 'undefined') {
|
visibilityChange = 'msvisibilitychange'
|
state = 'msVisibilityState'
|
} else if (typeof document.webkitHidden !== 'undefined') {
|
visibilityChange = 'webkitvisibilitychange'
|
state = 'webkitVisibilityState'
|
}
|
// 页面可见性变化
|
document.addEventListener(visibilityChange, () => {
|
if (document[state] === 'visible') {
|
Bus.$emit(ON_VISIBILITY_CHANGE)
|
// this.openWebSocket()
|
} else {
|
if (this.webSocket) {
|
// this.webSocket.close()
|
}
|
}
|
}, false)
|
},
|
data() {
|
return {
|
webSocket: null
|
}
|
},
|
methods: {
|
/**
|
*
|
* @param msg
|
* @param type (success warning error)
|
*/
|
showToast(msg, type) {
|
const opt = { message: msg }
|
if (type) {
|
opt.type = type
|
}
|
this.$message(opt)
|
},
|
openWebSocket() {
|
// let webSocket = null
|
if ('WebSocket' in window) {
|
this.webSocket = new WebSocket(URL_CFG.WEB_SOCKET_URL)
|
this.webSocket.onopen = () => {
|
// console.log('数据同步已开启')
|
}
|
window.onbeforeunload = () => {
|
if (this.webSocket) {
|
this.webSocket.close()
|
}
|
}
|
this.webSocket.onclose = () => {
|
// console.log('数据同步已关闭')
|
}
|
this.webSocket.onmessage = (res) => {
|
// console.log(res)
|
const data = res.data || '{}'
|
// console.log(data)
|
if (data.user && data.user === this.userInfo.user) {
|
if (getToken().value !== data.token) {
|
this.showToast(`您已经被迫下线，请重新登录或联系管理员`, 'error')
|
setTimeout(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
location.reload() // 为了重新实例化vue-router对象 避免bug
|
})
|
}, 2000)
|
} else {
|
this.$store.dispatch('GetInfo').then(res => {
|
const currentRouter = this.$router.currentRoute
|
const workshopList = this.$store.getters.workshopList || []
|
const workshopIdArr = workshopList.map(item => item.id)
|
if (workshopIdArr.length === 0 || workshopIdArr.indexOf(currentRouter.params.pid) === -1) {
|
// console.log(`您已经没有权限操作此页面，请重新登录`)
|
this.showToast(`您已经被迫下线，请重新登录或联系管理员`, 'error')
|
setTimeout(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
location.reload() // 为了重新实例化vue-router对象 避免bug
|
})
|
}, 2000)
|
}
|
})
|
}
|
return
|
}
|
// 广播socket数据
|
// Bus.$emit(ON_MESSAGE, data)
|
}
|
} else {
|
// console.log('请使用ie9以上的浏览器访问')
|
}
|
}
|
}
|
}
|
</script>
|
