From cbf0295bd837711ffdef0ce3164f05cd930a99b6 Mon Sep 17 00:00:00 2001
From: zhaipx <zhaipeixiu@htsdfp.com>
Date: Wed, 23 Apr 2025 16:49:07 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E5=BC=B1=E7=BD=91=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E6=A3=80=E6=B5=8B=E5=92=8C=E5=9C=A8=E7=BA=BF=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E3=80=81=E7=A6=BB=E7=BA=BF=E6=A8=A1=E5=BC=8F=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/HomePage.vue | 47 ++++++++++++++++++++++++++++++--
 src/components/toolbar.vue       |  2 +-
 src/store/staticOptions.js       |  3 ++
 3 files changed, 49 insertions(+), 3 deletions(-)

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)
+		}
   }
 })
 </script>
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'},