feature: 弱网环境检测和在线模式、离线模式自动切换

devzpx
zhaipx 2 months ago
parent 159f06800f
commit cbf0295bd8

@ -5,6 +5,7 @@ import BottomBar from "@/components/BottomBar.vue";
import Toolbar from "@/components/toolbar.vue"; import Toolbar from "@/components/toolbar.vue";
import CollisionDetection from "@/components/CollisionDetection.vue"; import CollisionDetection from "@/components/CollisionDetection.vue";
import {useMessage} from 'naive-ui' import {useMessage} from 'naive-ui'
import {useStaticStore} from "@/store/staticOptions.js";
export default defineComponent({ export default defineComponent({
name: "HomePage", name: "HomePage",
@ -13,8 +14,32 @@ export default defineComponent({
return { return {
showDetection: false, showDetection: false,
graphHeight: 0, graphHeight: 0,
message: useMessage() message: useMessage(),
staticStore: useStaticStore(),
timeId: undefined,
msgbox: true,
} }
},
mounted() {
if(!window.navigator.onLine) {
this.message.warning('无法连接互联网,当前为离线模式')
this.staticStore.networkStatus.offlineMode = true
}else{
this.setNetworkTimer()
}
//
window.addEventListener('online', () => {
this.message.success('网络已连接')
this.staticStore.networkStatus.offlineMode = false
this.setNetworkTimer()
})
window.addEventListener('offline', () => {
this.message.warning('无法连接互联网,已进入离线模式')
this.staticStore.networkStatus.offlineMode = true
//
this.timeId && clearInterval(this.timeId)
})
}, },
computed: { computed: {
setPageStyle: function () { setPageStyle: function () {
@ -31,6 +56,24 @@ export default defineComponent({
this.showDetection = true this.showDetection = true
} }
}, },
setNetworkTimer(){
this.timeId = setInterval(()=>{
console.log(navigator['connection'].downlink)
if(navigator['connection'].downlink < 1){
this.staticStore.networkStatus.offlineMode = true
if(this.msgbox){
this.message.warning('检测到当前网络环境差,已切换至离线模式')
this.msgbox = false
}
}else{
this.staticStore.networkStatus.offlineMode = false
if(!this.msgbox){
this.msgbox = true
this.message.info('已切换至在线模式')
}
}
},3000)
}
} }
}) })
</script> </script>

@ -201,7 +201,7 @@ async function connectWebSocket() {
hasPlane.value = true; hasPlane.value = true;
} }
// (50) () // (50) ()
if(frameCount>50 && lStore.openDetect && window.navigator.onLine){ if(frameCount>50 && lStore.openDetect && !store.networkStatus.offlineMode){
emit('resizeMap', detectDivHeight.value) emit('resizeMap', detectDivHeight.value)
showDetection.value = true showDetection.value = true
frameCount = 0 frameCount = 0

@ -11,6 +11,9 @@ export const useStaticStore = defineStore('staticOptions',{
password:"sysUser003", password:"sysUser003",
token:"", token:"",
}, },
networkStatus: {
offlineMode: false, //离线模式
},
menuOptions:{ menuOptions:{
EditOptions: [ EditOptions: [
{label: '绘制航线', key: 'createLine'}, {label: '绘制航线', key: 'createLine'},

Loading…
Cancel
Save