Browse Source

mod:7074python访问没打开之前,增加页面loading

panqiuyao 7 months ago
parent
commit
c03ecf76ae
1 changed files with 45 additions and 25 deletions
  1. 45 25
      frontend/src/views/Home/index.vue

+ 45 - 25
frontend/src/views/Home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <headerBar title="首页" />
-  <div class="home-container">
+  <div class="home-container" v-loading="loading">
     <!-- 背景图片 -->
     <img src="@/assets/images/home/bg.png" alt="背景图片" class="background-image" />
 
@@ -20,39 +20,59 @@
 
 <script setup lang="ts">
 import headerBar from "@/components/header-bar/index.vue";
-import {useRouter} from "vue-router";
-import  configInfo  from '@/stores/modules/config';
+import { useRouter } from "vue-router";
+import configInfo from '@/stores/modules/config';
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+
 const configInfoStore = configInfo();
-const router = useRouter()
+const router = useRouter();
+const loading = ref(true);
 
 
 import socket from "@/stores/modules/socket";
 // 初始化 WebSocket 状态管理
-const socketStore = socket()
+const socketStore = socket();
 
 function socketConnect(){
-    socketStore.connectSocket()
-}
-
-
-
-
-const goCheck = ()=>{
-
-  configInfoStore.updateAppModel(1)
-  router.push({
-    name:'PhotographyCheck'
-  })
-}
-
-const goShot = ()=>{
-  socketConnect()
-  configInfoStore.updateAppModel(2)
-  router.push({
-    name:'PhotographyShot'
-  })
+    socketStore.connectSocket();
 }
 
+const goCheck = () => {
+    configInfoStore.updateAppModel(1);
+    router.push({
+        name: 'PhotographyCheck'
+    });
+};
+
+const goShot = () => {
+    socketConnect();
+    configInfoStore.updateAppModel(2);
+    router.push({
+        name: 'PhotographyShot'
+    });
+};
+
+// 健康检查函数
+const checkHealth = async () => {
+    try {
+        const response = await axios.get('http://127.0.0.1:7074');
+        if (response.status === 200) {
+            loading.value = false; // 健康检查成功,关闭 loading
+        }
+    } catch (error) {
+        console.error('健康检查失败:', error);
+        setTimeout(() => {
+            checkHealth(); // 延迟检查
+        }, 2000);
+        // 可以在这里处理错误,例如显示错误提示
+    }
+};
+
+// 在组件挂载时执行健康检查
+onMounted(() => {
+    checkHealth();
+});
 </script>