补充结果总览模型卡片联动交互

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

@@ -10,17 +10,22 @@
           <el-button size="mini" type="text">导出</el-button>
         </div>
 
-        <div class="model-card-grid">
+        <div v-loading="cardLoading" class="model-card-grid">
-          <div
+          <button
-            v-for="item in sectionData.cardList || []"
+            v-for="item in cards"
             :key="item.key"
+            type="button"
             class="model-card"
+            :class="{ 'is-active': isModelSelected(item.key) }"
+            @click="toggleModelSelection(item.key)"
           >
             <div class="model-card-title">{{ item.title }}</div>
             <div class="model-card-count">{{ item.count }}</div>
             <div class="model-card-meta">涉及 {{ item.peopleCount }} 人</div>
-            <el-button type="text" size="mini">查看详情</el-button>
+            <div class="model-card-action">
-          </div>
+              {{ isModelSelected(item.key) ? "再次点击取消" : "点击加入联动" }}
+            </div>
+          </button>
         </div>
       </div>
 
@@ -33,40 +38,30 @@
         </div>
 
         <div class="filter-bar">
-          <div class="filter-item">
+          <div class="filter-item filter-item--mode">
-            <span class="filter-label">筛查模型</span>
+            <span class="filter-label">触发方式</span>
-            <el-select
+            <el-radio-group
-              :value="sectionData.filterValues && sectionData.filterValues.model"
+              v-model="matchMode"
               size="mini"
-              placeholder="请选择筛查模型"
+              @change="handleMatchModeChange"
             >
-              <el-option
+              <el-radio-button label="ANY">任意触发</el-radio-button>
-                v-for="item in (sectionData.filterOptions && sectionData.filterOptions.modelOptions) || []"
+              <el-radio-button label="ALL">同时触发</el-radio-button>
-                :key="item.value"
+            </el-radio-group>
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
           </div>
 
-          <div class="filter-item">
+          <div class="filter-summary">
-            <span class="filter-label">预警类型</span>
+            <span class="summary-label">已选模型</span>
-            <el-select
+            <span class="summary-value">{{ selectedModelText }}</span>
-              :value="sectionData.filterValues && sectionData.filterValues.warningType"
+          </div>
-              size="mini"
+
-              placeholder="请选择预警类型"
+          <div class="filter-actions">
-            >
+            <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
-              <el-option
+            <el-button size="mini" plain @click="resetQuery">重置</el-button>
-                v-for="item in (sectionData.filterOptions && sectionData.filterOptions.warningTypeOptions) || []"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
           </div>
         </div>
 
-        <el-table :data="sectionData.peopleList || []" class="model-table">
+        <el-table v-loading="tableLoading" :data="peopleList" class="model-table">
           <el-table-column type="index" label="序号" width="60" />
           <el-table-column prop="name" label="姓名" min-width="100" />
           <el-table-column prop="idNo" label="身份证号" min-width="180" />
@@ -75,7 +70,9 @@
           <el-table-column prop="modelName" label="筛查模型" min-width="180" />
           <el-table-column label="操作" width="100" align="right">
             <template slot-scope="scope">
-              <el-button type="text" size="mini">{{ scope.row.actionLabel || "查看详情" }}</el-button>
+              <el-button type="text" size="mini">{{
+                scope.row.actionLabel || "查看详情"
+              }}</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -84,8 +81,10 @@
           <el-pagination
             background
             layout="prev, pager, next"
-            :page-size="5"
+            :current-page="pageNum"
-            :total="(sectionData.peopleList || []).length"
+            :page-size="pageSize"
+            :total="total"
+            @current-change="handlePageChange"
           />
         </div>
       </div>
@@ -94,6 +93,20 @@
 </template>
 
 <script>
+import { getOverviewRiskModelPeople } from "@/api/ccdi/projectOverview";
+
+function normalizePeopleRows(rows) {
+  if (!Array.isArray(rows)) {
+    return [];
+  }
+  return rows.map((item) => ({
+    ...item,
+    name: item.staffName || item.name || "",
+    modelName: Array.isArray(item.modelNames) ? item.modelNames.join("、") : item.modelName || "",
+    warningType: item.warningType || "-",
+  }));
+}
+
 export default {
   name: "RiskModelSection",
   props: {
@@ -102,6 +115,120 @@ export default {
       default: () => ({}),
     },
   },
+  data() {
+    return {
+      selectedModelCodes: [],
+      matchMode: "ANY",
+      keyword: "",
+      deptId: undefined,
+      pageNum: 1,
+      pageSize: 5,
+      cardLoading: false,
+      tableLoading: false,
+      peopleList: [],
+      total: 0,
+    };
+  },
+  computed: {
+    projectId() {
+      return this.sectionData && this.sectionData.projectId;
+    },
+    cards() {
+      if (!Array.isArray(this.sectionData && this.sectionData.cardList)) {
+        return [];
+      }
+      return this.sectionData.cardList.map((item) => ({
+        key: item.key || item.modelCode,
+        title: item.title || item.modelName,
+        count: item.count || item.warningCount || 0,
+        peopleCount: item.peopleCount || 0,
+      }));
+    },
+    selectedModelText() {
+      if (!this.selectedModelCodes.length) {
+        return "全部模型";
+      }
+      return this.cards
+        .filter((item) => this.selectedModelCodes.includes(item.key))
+        .map((item) => item.title)
+        .join("、");
+    },
+  },
+  watch: {
+    projectId: {
+      immediate: true,
+      handler() {
+        this.pageNum = 1;
+        this.fetchPeopleList();
+      },
+    },
+  },
+  methods: {
+    isModelSelected(modelCode) {
+      return this.selectedModelCodes.includes(modelCode);
+    },
+    toggleModelSelection(modelCode) {
+      if (this.selectedModelCodes.includes(modelCode)) {
+        this.selectedModelCodes = this.selectedModelCodes.filter((item) => item !== modelCode);
+      } else {
+        this.selectedModelCodes = [...this.selectedModelCodes, modelCode];
+      }
+      this.pageNum = 1;
+      this.fetchPeopleList();
+    },
+    handleMatchModeChange() {
+      this.pageNum = 1;
+      this.fetchPeopleList();
+    },
+    handleQuery() {
+      this.pageNum = 1;
+      this.fetchPeopleList();
+    },
+    resetQuery() {
+      this.selectedModelCodes = [];
+      this.matchMode = "ANY";
+      this.keyword = "";
+      this.deptId = undefined;
+      this.pageNum = 1;
+      this.fetchPeopleList();
+    },
+    handlePageChange(pageNum) {
+      this.pageNum = pageNum;
+      this.fetchPeopleList();
+    },
+    buildPeopleParams() {
+      return {
+        projectId: this.projectId,
+        modelCodes: this.selectedModelCodes,
+        matchMode: this.matchMode,
+        keyword: this.keyword,
+        deptId: this.deptId,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+      };
+    },
+    async fetchPeopleList() {
+      if (!this.projectId) {
+        this.peopleList = [];
+        this.total = 0;
+        return;
+      }
+
+      this.tableLoading = true;
+      try {
+        const response = await getOverviewRiskModelPeople(this.buildPeopleParams());
+        const data = (response && response.data) || {};
+        this.peopleList = normalizePeopleRows(data.rows);
+        this.total = Number(data.total || 0);
+      } catch (error) {
+        this.peopleList = [];
+        this.total = 0;
+        console.error("加载风险模型命中人员失败", error);
+      } finally {
+        this.tableLoading = false;
+      }
+    },
+  },
 };
 </script>
 
@@ -147,10 +274,22 @@ export default {
 }
 
 .model-card {
+  display: block;
+  width: 100%;
   padding: 18px;
   border: 1px solid #e2e8f0;
   border-radius: 0;
   background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.model-card:hover,
+.model-card.is-active {
+  border-color: #2563eb;
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
+  transform: translateY(-2px);
 }
 
 .model-card-title {
@@ -172,8 +311,15 @@ export default {
   color: #94a3b8;
 }
 
+.model-card-action {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #2563eb;
+}
+
 .filter-bar {
   display: flex;
+  align-items: center;
   gap: 16px;
   margin-bottom: 14px;
   padding: 14px 16px;
@@ -187,11 +333,39 @@ export default {
   gap: 8px;
 }
 
-.filter-label {
+.filter-item--mode {
+  flex-wrap: wrap;
+}
+
+.filter-label,
+.summary-label {
   font-size: 12px;
   color: #64748b;
 }
 
+.filter-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+
+.summary-value {
+  min-width: 0;
+  color: #1e293b;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filter-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+}
+
 .model-table {
   border-radius: 12px;
   overflow: hidden;

ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js

@@ -0,0 +1,18 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/RiskModelSection.vue"
+  ),
+  "utf8"
+);
+
+[
+  "matchMode",
+  'matchMode: "ANY"',
+  "任意触发",
+  "同时触发",
+].forEach((token) => assert(source.includes(token), token));

ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js

@@ -0,0 +1,18 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/RiskModelSection.vue"
+  ),
+  "utf8"
+);
+
+[
+  "selectedModelCodes",
+  "toggleModelSelection",
+  "this.selectedModelCodes.includes(modelCode)",
+  "this.selectedModelCodes = this.selectedModelCodes.filter",
+].forEach((token) => assert(source.includes(token), token));