项目详情页打标状态轮询改为1秒刷新

ruoyi-ui/src/views/ccdiProject/detail.vue

@@ -69,7 +69,7 @@ import ParamConfig from "./components/detail/ParamConfig";
 import PreliminaryCheck from "./components/detail/PreliminaryCheck";
 import SpecialCheck from "./components/detail/SpecialCheck";
 import DetailQuery from "./components/detail/DetailQuery";
-import {getProject} from "@/api/ccdiProject";
+import { getProject } from "@/api/ccdiProject";
 
 export default {
   name: "ProjectDetail",
@@ -102,10 +102,15 @@ export default {
         warningThreshold: 60,
         projectStatus: "0",
       },
+      projectStatusPollingTimer: null,
+      projectStatusPollingInterval: 1000,
+      projectStatusPollingLoading: false,
     };
   },
   watch: {
     "$route.params.projectId"(newId) {
+      this.stopProjectStatusPolling();
+      this.projectStatusPollingLoading = false;
       if (newId) {
         this.projectId = newId;
         this.projectInfo.projectId = newId;
@@ -116,12 +121,18 @@ export default {
     "$route.query.tab"() {
       this.initActiveTabFromRoute();
     },
+    "projectInfo.projectStatus"() {
+      this.syncProjectStatusPolling();
+    },
   },
   created() {
     // 初始化页面数据
     this.initActiveTabFromRoute();
     this.initPageData();
   },
+  beforeDestroy() {
+    this.stopProjectStatusPolling();
+  },
   methods: {
     initActiveTabFromRoute() {
       const tab = (this.$route.query && this.$route.query.tab) || "";
@@ -142,35 +153,87 @@ export default {
     },
     /** 初始化页面数据 */
     initPageData() {
-      // 这里应该从API获取项目详细信息
+      return this.fetchProjectDetail();
+    },
+    async fetchProjectDetail(options = {}) {
+      const { silent = false } = options;
       if (!this.projectId) {
+        return null;
+      }
+      if (!silent) {
+        this.projectInfo.projectName = "";
+        this.updatePageTitle();
+      }
+
+      try {
+        const res = await getProject(this.projectId);
+        const data = res.data || {};
+        this.projectInfo = {
+          ...this.projectInfo,
+          ...data,
+          projectId: data.projectId || this.projectId,
+          projectName: data.projectName || "",
+          projectDesc: data.projectDesc || data.description || "",
+          projectStatus: String(
+            data.projectStatus !== undefined && data.projectStatus !== null
+              ? data.projectStatus
+              : data.status !== undefined && data.status !== null
+                ? data.status
+                : this.projectInfo.projectStatus
+          ),
+        };
+        this.updatePageTitle();
+        this.syncProjectStatusPolling();
+        return this.projectInfo;
+      } catch (error) {
+        if (!silent) {
+          this.$message.error("加载项目详情失败");
+        } else {
+          console.error("轮询项目状态失败:", error);
+          throw error;
+        }
+        this.updatePageTitle();
+        return null;
+      }
+    },
+    syncProjectStatusPolling() {
+      if (String(this.projectInfo.projectStatus) === "3") {
+        this.startProjectStatusPolling();
         return;
       }
-      this.projectInfo.projectName = "";
-      this.updatePageTitle();
-      getProject(this.projectId)
-        .then((res) => {
-          const data = res.data || {};
-          this.projectInfo = {
-            ...this.projectInfo,
-            ...data,
-            projectId: data.projectId || this.projectId,
-            projectName: data.projectName || "",
-            projectDesc: data.projectDesc || data.description || "",
-            projectStatus: String(
-              data.projectStatus !== undefined && data.projectStatus !== null
-                ? data.projectStatus
-                : data.status !== undefined && data.status !== null
-                  ? data.status
-                  : this.projectInfo.projectStatus
-            ),
-          };
-          this.updatePageTitle();
-        })
-        .catch(() => {
-          this.$message.error("Failed to load project details");
-          this.updatePageTitle();
-        });
+      this.stopProjectStatusPolling();
+    },
+    startProjectStatusPolling() {
+      if (this.projectStatusPollingTimer) {
+        return;
+      }
+      this.projectStatusPollingTimer = setInterval(() => {
+        this.pollProjectStatus();
+      }, this.projectStatusPollingInterval);
+    },
+    stopProjectStatusPolling() {
+      if (!this.projectStatusPollingTimer) {
+        return;
+      }
+      clearInterval(this.projectStatusPollingTimer);
+      this.projectStatusPollingTimer = null;
+    },
+    async pollProjectStatus() {
+      if (this.projectStatusPollingLoading || !this.projectId) {
+        return;
+      }
+
+      this.projectStatusPollingLoading = true;
+      try {
+        await this.fetchProjectDetail({ silent: true });
+        if (String(this.projectInfo.projectStatus) !== "3") {
+          this.stopProjectStatusPolling();
+        }
+      } catch (error) {
+        console.error("项目状态轮询请求失败:", error);
+      } finally {
+        this.projectStatusPollingLoading = false;
+      }
     },
     updatePageTitle() {
       const title = this.projectInfo.projectName || `ProjectDetail-${this.projectId}`;

ruoyi-ui/tests/unit/project-detail-tagging-polling.test.js

@@ -0,0 +1,47 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const componentPath = path.resolve(
+  __dirname,
+  "../../src/views/ccdiProject/detail.vue"
+);
+const source = fs.readFileSync(componentPath, "utf8");
+
+assert(
+  /projectStatusPollingTimer:\s*null/.test(source),
+  "详情页应声明项目状态轮询定时器"
+);
+
+assert(
+  /projectStatusPollingInterval:\s*1000/.test(source),
+  "详情页轮询间隔应为 1000ms"
+);
+
+assert(
+  /beforeDestroy\(\)\s*\{[\s\S]*?this\.stopProjectStatusPolling\(\)/.test(source),
+  "详情页销毁前应停止项目状态轮询"
+);
+
+assert(
+  /syncProjectStatusPolling\(\)\s*\{[\s\S]*?String\(this\.projectInfo\.projectStatus\)\s*===\s*"3"[\s\S]*?this\.startProjectStatusPolling\(\)[\s\S]*?this\.stopProjectStatusPolling\(\)/.test(
+    source
+  ),
+  "详情页应根据项目状态启停轮询"
+);
+
+assert(
+  /startProjectStatusPolling\(\)\s*\{[\s\S]*?setInterval\([\s\S]*?this\.pollProjectStatus\(\)[\s\S]*?this\.projectStatusPollingInterval/.test(
+    source
+  ),
+  "详情页应按固定间隔轮询项目状态"
+);
+
+assert(
+  /pollProjectStatus\(\)\s*\{[\s\S]*?await this\.fetchProjectDetail\(\{ silent: true \}\)[\s\S]*?if\s*\(String\(this\.projectInfo\.projectStatus\)\s*!==\s*"3"\)\s*\{[\s\S]*?this\.stopProjectStatusPolling\(\)/.test(
+    source
+  ),
+  "详情页轮询后应在状态脱离打标中时停止"
+);
+
+console.log("project-detail-tagging-polling test passed");