实现结果总览模型与明细区块

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

@@ -21,28 +21,8 @@
 import { mockOverviewData } from "./preliminaryCheck.mock";
 import OverviewStats from "./OverviewStats";
 import RiskPeopleSection from "./RiskPeopleSection";
-
-const RiskModelSection = {
-  name: "RiskModelSection",
-  props: {
-    sectionData: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  template: '<section class="risk-model-placeholder"></section>',
-};
-
-const RiskDetailSection = {
-  name: "RiskDetailSection",
-  props: {
-    sectionData: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  template: '<section class="risk-detail-placeholder"></section>',
-};
+import RiskModelSection from "./RiskModelSection";
+import RiskDetailSection from "./RiskDetailSection";
 
 export default {
   name: "PreliminaryCheck",

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

@@ -0,0 +1,137 @@
+<template>
+  <section class="risk-detail-section">
+    <div class="section-card">
+      <div class="block">
+        <div class="block-header">
+          <div>
+            <div class="block-title">涉险交易明细</div>
+            <div class="block-subtitle">展示涉险交易的关键字段与风险金额</div>
+          </div>
+          <el-button size="mini" type="text">导出</el-button>
+        </div>
+
+        <el-table :data="sectionData.transactionList || []" class="detail-table">
+          <el-table-column type="index" label="序号" width="60" />
+          <el-table-column prop="tradeDate" label="交易日期" min-width="120" />
+          <el-table-column prop="counterparty" label="对手方" min-width="120" />
+          <el-table-column prop="direction" label="方向" min-width="100" />
+          <el-table-column prop="accountNo" label="账号" min-width="180" />
+          <el-table-column prop="summary" label="摘要" min-width="180" />
+          <el-table-column prop="amount" label="金额" min-width="120" align="right">
+            <template slot-scope="scope">
+              <span :class="scope.row.amount >= 0 ? 'amount-in' : 'amount-out'">
+                {{ formatAmount(scope.row.amount) }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="100" align="right">
+            <template slot-scope="scope">
+              <el-button type="text" size="mini">{{ scope.row.actionLabel || "查看详情" }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="block">
+        <div class="block-header">
+          <div>
+            <div class="block-title">异常账户人员信息</div>
+            <div class="block-subtitle">展示异常账户关联人员与处理状态</div>
+          </div>
+          <el-button size="mini" type="text">导出</el-button>
+        </div>
+
+        <el-table :data="sectionData.abnormalAccountList || []" class="detail-table">
+          <el-table-column prop="accountNo" label="账户号" min-width="160" />
+          <el-table-column prop="accountName" label="账户人姓名" min-width="120" />
+          <el-table-column prop="bankName" label="开户银行" min-width="180" />
+          <el-table-column prop="lastTradeDate" label="异常发生时间" min-width="140" />
+          <el-table-column prop="handler" label="状态" min-width="100" />
+          <el-table-column label="操作" width="100" align="right">
+            <template slot-scope="scope">
+              <el-button type="text" size="mini">{{ scope.row.actionLabel || "查看详情" }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "RiskDetailSection",
+  props: {
+    sectionData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    formatAmount(value) {
+      const amount = Number(value || 0);
+      const absValue = Math.abs(amount).toLocaleString("zh-CN", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+      return `${amount >= 0 ? "+" : "-"}${absValue}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.risk-detail-section {
+  margin-bottom: 16px;
+}
+
+.section-card {
+  padding: 20px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+}
+
+.block + .block {
+  margin-top: 24px;
+}
+
+.block-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.block-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.block-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.detail-table {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.detail-table /deep/ th {
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.amount-in {
+  color: #16a34a;
+  font-weight: 600;
+}
+
+.amount-out {
+  color: #ef4444;
+  font-weight: 600;
+}
+</style>

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

@@ -0,0 +1,210 @@
+<template>
+  <section class="risk-model-section">
+    <div class="section-card">
+      <div class="block">
+        <div class="block-header">
+          <div>
+            <div class="block-title">模型预警次数统计</div>
+            <div class="block-subtitle">按模型汇总预警命中次数与涉及人数</div>
+          </div>
+          <el-button size="mini" type="text">导出</el-button>
+        </div>
+
+        <div class="model-card-grid">
+          <div
+            v-for="item in sectionData.cardList || []"
+            :key="item.key"
+            class="model-card"
+          >
+            <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>
+      </div>
+
+      <div class="block">
+        <div class="block-header">
+          <div>
+            <div class="block-title">命中模型涉及人员</div>
+            <div class="block-subtitle">基于筛选条件查看模型命中人员</div>
+          </div>
+        </div>
+
+        <div class="filter-bar">
+          <div class="filter-item">
+            <span class="filter-label">筛查模型</span>
+            <el-select
+              :value="sectionData.filterValues && sectionData.filterValues.model"
+              size="mini"
+              placeholder="请选择筛查模型"
+            >
+              <el-option
+                v-for="item in (sectionData.filterOptions && sectionData.filterOptions.modelOptions) || []"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </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>
+        </div>
+
+        <el-table :data="sectionData.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" />
+          <el-table-column prop="department" label="所属部门" min-width="140" />
+          <el-table-column prop="warningType" label="预警类型" min-width="120" />
+          <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>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="pagination-bar">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="5"
+            :total="(sectionData.peopleList || []).length"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "RiskModelSection",
+  props: {
+    sectionData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.risk-model-section {
+  margin-bottom: 16px;
+}
+
+.section-card {
+  padding: 20px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+}
+
+.block + .block {
+  margin-top: 24px;
+}
+
+.block-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.block-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.block-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.model-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.model-card {
+  padding: 18px;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+}
+
+.model-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.model-card-count {
+  margin-top: 12px;
+  font-size: 28px;
+  font-weight: 700;
+  color: #2563eb;
+}
+
+.model-card-meta {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.filter-bar {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 14px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  background: #f8fafc;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-label {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.model-table {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.model-table /deep/ th {
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.pagination-bar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+</style>

ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js

@@ -62,6 +62,83 @@ export const mockOverviewData = {
       },
     ],
   },
-  riskModels: {},
-  riskDetails: {},
+  riskModels: {
+    cardList: [
+      { key: "large", title: "大额交易频繁", count: 45, peopleCount: 9 },
+      { key: "salary", title: "可疑部门产薪异常", count: 32, peopleCount: 6 },
+      { key: "transfer", title: "频繁转账交易", count: 28, peopleCount: 5 },
+    ],
+    filterOptions: {
+      modelOptions: [
+        { label: "大额交易频繁", value: "large" },
+        { label: "频繁转账交易", value: "transfer" },
+      ],
+      warningTypeOptions: [
+        { label: "高风险", value: "high" },
+        { label: "中风险", value: "medium" },
+      ],
+    },
+    filterValues: {
+      model: "large",
+      warningType: "high",
+    },
+    peopleList: [
+      {
+        name: "黄明",
+        idNo: "331081199403150329",
+        department: "风险管理部",
+        warningType: "高风险",
+        modelName: "大额交易频繁",
+        actionLabel: "查看详情",
+      },
+      {
+        name: "王江",
+        idNo: "331081199102031209",
+        department: "运营管理部",
+        warningType: "中风险",
+        modelName: "频繁转账交易",
+        actionLabel: "查看详情",
+      },
+    ],
+  },
+  riskDetails: {
+    transactionList: [
+      {
+        tradeDate: "2024-01-15",
+        counterparty: "李七",
+        direction: "转出",
+        accountNo: "李七(08901)",
+        summary: "转账",
+        amount: 500000,
+        actionLabel: "查看详情",
+      },
+      {
+        tradeDate: "2024-01-16",
+        counterparty: "王五",
+        direction: "转出",
+        accountNo: "王五(08901)",
+        summary: "转账",
+        amount: -200000,
+        actionLabel: "查看详情",
+      },
+    ],
+    abnormalAccountList: [
+      {
+        accountNo: "62209****1234",
+        accountName: "李四",
+        bankName: "中国农业银行",
+        lastTradeDate: "2024-01-15",
+        handler: "正常",
+        actionLabel: "查看详情",
+      },
+      {
+        accountNo: "62209****5678",
+        accountName: "王五",
+        bankName: "中国工商银行",
+        lastTradeDate: "2024-01-10",
+        handler: "正常",
+        actionLabel: "查看详情",
+      },
+    ],
+  },
 };

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

@@ -0,0 +1,25 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const model = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/RiskModelSection.vue"
+  ),
+  "utf8"
+);
+const detail = fs.readFileSync(
+  path.resolve(
+    __dirname,
+    "../../src/views/ccdiProject/components/detail/RiskDetailSection.vue"
+  ),
+  "utf8"
+);
+
+["模型预警次数统计", "命中模型涉及人员", "筛查模型", "预警类型"].forEach((token) =>
+  assert(model.includes(token), token)
+);
+["涉险交易明细", "异常账户人员信息", "查看详情"].forEach((token) =>
+  assert(detail.includes(token), token)
+);