实现结果总览详情弹窗前端接线

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

@@ -2,7 +2,7 @@
   <el-dialog
     title="项目分析"
     :visible.sync="visibleProxy"
-    width="1280px"
+    width="1440px"
     append-to-body
     custom-class="project-analysis-dialog"
     @close="handleDialogClosed"
@@ -12,7 +12,19 @@
         class="project-analysis-layout__sidebar"
         :sidebar-data="dialogData.sidebar"
       />
-      <div class="project-analysis-layout__main">
+      <div v-loading="detailLoading" class="project-analysis-layout__main">
+        <el-alert
+          v-if="detailError"
+          :closable="false"
+          class="project-analysis-layout__alert"
+          type="error"
+          show-icon
+          :title="detailError"
+        >
+          <template slot="default">
+            <el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
+          </template>
+        </el-alert>
         <div
           v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
           class="source-summary"
@@ -43,6 +55,7 @@
 </template>
 
 <script>
+import { getOverviewPersonAnalysisDetail } from "@/api/ccdi/projectOverview";
 import ProjectAnalysisAbnormalTab from "./ProjectAnalysisAbnormalTab";
 import ProjectAnalysisPlaceholderTab from "./ProjectAnalysisPlaceholderTab";
 import ProjectAnalysisSidebar from "./ProjectAnalysisSidebar";
@@ -60,6 +73,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    projectId: {
+      type: [String, Number],
+      default: null,
+    },
     person: {
       type: Object,
       default: () => null,
@@ -68,6 +85,14 @@ export default {
       type: String,
       default: "riskPeople",
     },
+    modelSummary: {
+      type: Object,
+      default: () => ({
+        modelCount: 0,
+        currentModel: "-",
+        riskTags: [],
+      }),
+    },
     projectName: {
       type: String,
       default: "",
@@ -76,15 +101,30 @@ export default {
   data() {
     return {
       activeTab: "abnormalDetail",
+      detailLoading: false,
+      detailError: "",
+      detailData: null,
     };
   },
   computed: {
     dialogData() {
-      return buildProjectAnalysisDialogData({
+      const mockData = buildProjectAnalysisDialogData({
         person: this.person,
         source: this.source,
         projectName: this.projectName,
       });
+      return {
+        ...mockData,
+        sidebar: {
+          ...mockData.sidebar,
+          basicInfo: (this.detailData && this.detailData.basicInfo) || mockData.sidebar.basicInfo,
+          modelSummary: {
+            ...mockData.sidebar.modelSummary,
+            ...(this.modelSummary || {}),
+          },
+        },
+        abnormalDetail: (this.detailData && this.detailData.abnormalDetail) || mockData.abnormalDetail,
+      };
     },
     visibleProxy: {
       get() {
@@ -99,12 +139,45 @@ export default {
     visible(value) {
       if (value) {
         this.resetDialogState();
+        this.fetchDetailData();
       }
     },
   },
   methods: {
     resetDialogState() {
       this.activeTab = "abnormalDetail";
+      this.detailLoading = false;
+      this.detailError = "";
+      this.detailData = null;
+    },
+    resolveStaffIdCard() {
+      return (this.modelSummary && this.modelSummary.staffIdCard)
+        || (this.person && (this.person.idNo || this.person.staffIdCard))
+        || "";
+    },
+    async fetchDetailData() {
+      const staffIdCard = this.resolveStaffIdCard();
+      if (!this.projectId || !staffIdCard) {
+        return;
+      }
+      this.detailLoading = true;
+      this.detailError = "";
+      try {
+        const response = await getOverviewPersonAnalysisDetail({
+          projectId: this.projectId,
+          staffIdCard,
+        });
+        this.detailData = (response && response.data) || null;
+      } catch (error) {
+        this.detailError = "项目分析详情加载失败，请稍后重试";
+        this.detailData = null;
+        console.error("加载项目分析详情失败", error);
+      } finally {
+        this.detailLoading = false;
+      }
+    },
+    handleRetryDetail() {
+      this.fetchDetailData();
     },
     getTabData(tabKey) {
       return (
@@ -130,7 +203,7 @@ export default {
 }
 
 .project-analysis-layout__sidebar {
-  flex: 0 0 320px;
+  flex: 0 0 340px;
 }
 
 .project-analysis-layout__main {
@@ -138,6 +211,10 @@ export default {
   min-width: 0;
 }
 
+.project-analysis-layout__alert {
+  margin-bottom: 16px;
+}
+
 .source-summary {
   display: flex;
   align-items: center;