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

2026-03-20 11:27:46 +08:00
parent 37e6eef26c
commit e147d6dfee
3 changed files with 246 additions and 36 deletions
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
+++ b/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-for="item in sectionData.cardList || []"
+        <div v-loading="cardLoading" class="model-card-grid">
+          <button
+            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>
+            <div class="model-card-action">
+              {{ isModelSelected(item.key) ? "再次点击取消" : "点击加入联动" }}
+            </div>
+          </button>
        </div>
      </div>

@@ -33,40 +38,30 @@
        </div>

        <div class="filter-bar">
-          <div class="filter-item">
-            <span class="filter-label">筛查模型</span>
-            <el-select
-              :value="sectionData.filterValues && sectionData.filterValues.model"
+          <div class="filter-item filter-item--mode">
+            <span class="filter-label">触发方式</span>
+            <el-radio-group
+              v-model="matchMode"
              size="mini"
-              placeholder="请选择筛查模型"
+              @change="handleMatchModeChange"
            >
-              <el-option
-                v-for="item in (sectionData.filterOptions && sectionData.filterOptions.modelOptions) || []"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
+              <el-radio-button label="ANY">任意触发</el-radio-button>
+              <el-radio-button label="ALL">同时触发</el-radio-button>
+            </el-radio-group>
          </div>

-          <div class="filter-item">
-            <span class="filter-label">预警类型</span>
-            <el-select
-              :value="sectionData.filterValues && sectionData.filterValues.warningType"
-              size="mini"
-              placeholder="请选择预警类型"
-            >
-              <el-option
-                v-for="item in (sectionData.filterOptions && sectionData.filterOptions.warningTypeOptions) || []"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
+          <div class="filter-summary">
+            <span class="summary-label">已选模型</span>
+            <span class="summary-value">{{ selectedModelText }}</span>
+          </div>
+
+          <div class="filter-actions">
+            <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
+            <el-button size="mini" plain @click="resetQuery">重置</el-button>
          </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"
-            :total="(sectionData.peopleList || []).length"
+            :current-page="pageNum"
+            :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;
--- a/ruoyi-ui/tests/unit/preliminary-check-model-match-mode.test.js
+++ b/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));
--- a/ruoyi-ui/tests/unit/preliminary-check-model-multiselect.test.js
+++ b/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));