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

This commit is contained in:
wkc
2026-03-19 17:41:18 +08:00
parent f858fbdcbc
commit 99f96e101e
4 changed files with 262 additions and 27 deletions

View File

@@ -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}`;