diff --git a/src/components/page/HomePage.vue b/src/components/page/HomePage.vue index 6ee57b4..898aa5b 100644 --- a/src/components/page/HomePage.vue +++ b/src/components/page/HomePage.vue @@ -5,6 +5,7 @@ import BottomBar from "@/components/BottomBar.vue"; import Toolbar from "@/components/toolbar.vue"; import CollisionDetection from "@/components/CollisionDetection.vue"; import {useMessage} from 'naive-ui' +import {useStaticStore} from "@/store/staticOptions.js"; export default defineComponent({ name: "HomePage", @@ -13,10 +14,34 @@ export default defineComponent({ return { showDetection: false, graphHeight: 0, - message: useMessage() + message: useMessage(), + staticStore: useStaticStore(), + timeId: undefined, + msgbox: true, } }, - computed: { + 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: { setPageStyle: function () { return this.showDetection? 100 - this.graphHeight : 100 } @@ -31,6 +56,24 @@ export default defineComponent({ 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) + } } }) diff --git a/src/components/toolbar.vue b/src/components/toolbar.vue index ff0bbc6..1cd5437 100644 --- a/src/components/toolbar.vue +++ b/src/components/toolbar.vue @@ -201,7 +201,7 @@ async function connectWebSocket() { hasPlane.value = true; } // 加载和更新碰撞检测图(50帧更新一次) (只在联网模式下启用) - if(frameCount>50 && lStore.openDetect && window.navigator.onLine){ + if(frameCount>50 && lStore.openDetect && !store.networkStatus.offlineMode){ emit('resizeMap', detectDivHeight.value) showDetection.value = true frameCount = 0 diff --git a/src/store/staticOptions.js b/src/store/staticOptions.js index b1d7804..ee66b93 100644 --- a/src/store/staticOptions.js +++ b/src/store/staticOptions.js @@ -11,6 +11,9 @@ export const useStaticStore = defineStore('staticOptions',{ password:"sysUser003", token:"", }, + networkStatus: { + offlineMode: false, //离线模式 + }, menuOptions:{ EditOptions: [ {label: '绘制航线', key: 'createLine'},