网络状态标志

src/assets/icon_wifi_red.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="82" height="66" viewBox="0 0 82 66"><g><path d="M0,19.3215L7.45687,27.808C25.9786,6.7155,56.0214,6.7155,74.5431,27.808L82,19.3215C59.3731,-6.4405,22.6628,-6.4405,0,19.3215ZM29.8172,53.2675L41,66L52.1827,53.2675C46.0328,46.2275,36.0031,46.2275,29.8172,53.2675ZM14.9137,36.3L22.3706,44.7865C32.6565,33.0715,49.3538,33.0715,59.6396,44.7865L67.0914,36.3C52.7055,19.921,29.3355,19.921,14.9086,36.3L14.9137,36.3Z" fill="#FF0000" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/components/HeaderBar.vue

@@ -4,7 +4,7 @@
 		<div v-if="route.path !== '/home'" class="w-0.5 h-5 bg-white mx-3"></div>
 		<p class="text-lg">{{ pageNameMap[route.path] }}</p>
 
-		<img src="@/assets/icon_wifi.svg" alt="" class="ml-auto w-8" />
+		<img :src="`${isWifiNormal ? icon_wifi : icon_wifi2}`" alt="" class="ml-auto w-8" />
 
 		<div v-if="route.path === '/home'" class="btn-light px-5 py-1 mx-6 rounded min-w-[102px]">
 			<el-dropdown trigger="click">
@@ -16,13 +16,13 @@
 					<el-dropdown-menu>
 						<el-dropdown-item>
 							<div class="flex items-center gap-4 text-lg text-primary" @click="router.push('/matrixManage')">
-								<img :src="icon_substrate" class="w-[18px]" alt="">
+								<img :src="icon_substrate" class="w-[18px]" alt="" />
 								<span>基质管理</span>
 							</div>
 						</el-dropdown-item>
 						<el-dropdown-item>
 							<div class="flex items-center gap-4 text-lg text-primary" @click="router.push('/debug')">
-								<img :src="icon_debug" class="w-[18px]" alt="">
+								<img :src="icon_debug" class="w-[18px]" alt="" />
 								<span>调试</span>
 							</div>
 						</el-dropdown-item>
@@ -37,14 +37,28 @@
 	</header>
 </template>
 <script setup lang="ts">
-import { watch, ref, computed } from "vue";
+import { watch, ref, computed, onMounted, onUnmounted } from "vue";
 import Time from "@/components/Time.vue";
-import icon_substrate from "@/assets/menu/icon_substrate.svg"
+import icon_substrate from "@/assets/menu/icon_substrate.svg";
 import icon_debug from "@/assets/menu/icon_debug.svg";
+import icon_wifi from "@/assets/icon_wifi.svg";
+import icon_wifi2 from "@/assets/icon_wifi_red.svg";
 import { useRoute, useRouter } from "vue-router";
+import { createWebSocket, sharedWsUrl } from "@/services/socket";
 
 const route = useRoute();
 const router = useRouter();
+const isWifiNormal = ref(true);
+
+onMounted(() => {
+	const wsClient = createWebSocket(sharedWsUrl);
+	const subscription = wsClient.stateOb.subscribe(state => {
+		isWifiNormal.value = state === "open";
+	});
+	onUnmounted(() => {
+		subscription.unsubscribe();
+	});
+});
 
 const pageNameMap: Record<string, string> = {
 	"/": "基质喷涂转印仪",
@@ -55,7 +69,7 @@ const pageNameMap: Record<string, string> = {
 	"/matrixManage": "基质管理",
 	"/matrixCraft": "工艺管理",
 	"/debug": "调试",
-	"/history": "历史喷涂"
+	"/history": "历史喷涂",
 };
 
 function onReturnBtnClick() {
@@ -65,13 +79,4 @@ function onReturnBtnClick() {
 		// router.push("/menu");
 	}
 }
-
-// watch(
-// 	() => route.path,
-// 	newPath => {
-// 		console.log(newPath);
-// 		if (newPath !== "/") {
-// 		}
-// 	}
-// );
 </script>