实现结果总览前两块静态页面
This commit is contained in:
@@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<section class="overview-stats">
|
||||||
|
<div class="section-card">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-title-group">
|
||||||
|
<div class="section-title">{{ summary.title || "风险总览" }}</div>
|
||||||
|
<div class="section-subtitle">{{ summary.subtitle || "风险总体数据概览" }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-actions">
|
||||||
|
<el-button
|
||||||
|
v-for="action in summary.actions || []"
|
||||||
|
:key="action.key"
|
||||||
|
size="mini"
|
||||||
|
:type="action.type || 'primary'"
|
||||||
|
:plain="action.plain !== false"
|
||||||
|
>
|
||||||
|
{{ action.label }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div
|
||||||
|
v-for="item in summary.stats || []"
|
||||||
|
:key="item.key"
|
||||||
|
class="stats-card"
|
||||||
|
>
|
||||||
|
<div class="stats-icon" :class="`stats-icon-${item.tone || 'blue'}`">
|
||||||
|
<i :class="item.icon || 'el-icon-data-analysis'" />
|
||||||
|
</div>
|
||||||
|
<div class="stats-content">
|
||||||
|
<div class="stats-label">{{ item.label }}</div>
|
||||||
|
<div class="stats-value">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "OverviewStats",
|
||||||
|
props: {
|
||||||
|
summary: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.overview-stats {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-card {
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 18px 16px;
|
||||||
|
border: 1px solid #eef2ff;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-icon-blue {
|
||||||
|
color: #2563eb;
|
||||||
|
background: rgba(37, 99, 235, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-icon-red {
|
||||||
|
color: #ef4444;
|
||||||
|
background: rgba(239, 68, 68, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-icon-amber {
|
||||||
|
color: #f59e0b;
|
||||||
|
background: rgba(245, 158, 11, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-icon-green {
|
||||||
|
color: #10b981;
|
||||||
|
background: rgba(16, 185, 129, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-content {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-value {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -19,28 +19,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mockOverviewData } from "./preliminaryCheck.mock";
|
import { mockOverviewData } from "./preliminaryCheck.mock";
|
||||||
|
import OverviewStats from "./OverviewStats";
|
||||||
const OverviewStats = {
|
import RiskPeopleSection from "./RiskPeopleSection";
|
||||||
name: "OverviewStats",
|
|
||||||
props: {
|
|
||||||
summary: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
template: '<section class="overview-stats-placeholder"></section>',
|
|
||||||
};
|
|
||||||
|
|
||||||
const RiskPeopleSection = {
|
|
||||||
name: "RiskPeopleSection",
|
|
||||||
props: {
|
|
||||||
sectionData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
template: '<section class="risk-people-placeholder"></section>',
|
|
||||||
};
|
|
||||||
|
|
||||||
const RiskModelSection = {
|
const RiskModelSection = {
|
||||||
name: "RiskModelSection",
|
name: "RiskModelSection",
|
||||||
|
|||||||
@@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<section class="risk-people-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.overviewList || []" class="people-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="riskCount" label="疑似违规数" min-width="100" />
|
||||||
|
<el-table-column prop="riskPoint" label="核心异常点" min-width="220" />
|
||||||
|
<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">中高风险人员TOP10</div>
|
||||||
|
<div class="block-subtitle">按风险等级和命中数量聚焦重点对象</div>
|
||||||
|
</div>
|
||||||
|
<el-button size="mini" type="text">导出</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="sectionData.topRiskList || []" class="people-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="riskLevel" label="风险等级" min-width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag size="mini" :type="scope.row.riskLevelType || 'danger'" effect="plain">
|
||||||
|
{{ scope.row.riskLevel }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="modelCount" 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: "RiskPeopleSection",
|
||||||
|
props: {
|
||||||
|
sectionData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.risk-people-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.people-table {
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.people-table /deep/ th {
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,67 @@
|
|||||||
export const mockOverviewData = {
|
export const mockOverviewData = {
|
||||||
summary: {},
|
summary: {
|
||||||
riskPeople: {},
|
title: "风险总览",
|
||||||
|
subtitle: "风险总览数据概览",
|
||||||
|
actions: [
|
||||||
|
{ key: "download", label: "批量导出", type: "primary", plain: false },
|
||||||
|
{ key: "state", label: "切换视图", type: "primary", plain: true },
|
||||||
|
],
|
||||||
|
stats: [
|
||||||
|
{ key: "people", label: "总人数", value: 500, icon: "el-icon-user", tone: "blue" },
|
||||||
|
{ key: "riskPeople", label: "风险人数", value: 10, icon: "el-icon-warning-outline", tone: "red" },
|
||||||
|
{ key: "medium", label: "中风险", value: 20, icon: "el-icon-s-opportunity", tone: "amber" },
|
||||||
|
{ key: "low", label: "低风险", value: 38, icon: "el-icon-data-line", tone: "green" },
|
||||||
|
{ key: "count", label: "风险交易", value: 432, icon: "el-icon-document", tone: "blue" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
riskPeople: {
|
||||||
|
overviewList: [
|
||||||
|
{
|
||||||
|
name: "李四",
|
||||||
|
idNo: "331081199003230321",
|
||||||
|
department: "信息二部",
|
||||||
|
riskCount: 5,
|
||||||
|
riskPoint: "跨地域转账频繁交易",
|
||||||
|
actionLabel: "查看详情",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "王五",
|
||||||
|
idNo: "331081199003231077",
|
||||||
|
department: "办公室",
|
||||||
|
riskCount: 2,
|
||||||
|
riskPoint: "多工资转入频繁交易",
|
||||||
|
actionLabel: "查看详情",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "赵六",
|
||||||
|
idNo: "331081199003231099",
|
||||||
|
department: "信息五部",
|
||||||
|
riskCount: 2,
|
||||||
|
riskPoint: "频繁小额转账",
|
||||||
|
actionLabel: "查看详情",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
topRiskList: [
|
||||||
|
{
|
||||||
|
name: "张三",
|
||||||
|
idNo: "331081199003231021",
|
||||||
|
department: "信贷部",
|
||||||
|
riskLevel: "高风险",
|
||||||
|
riskLevelType: "danger",
|
||||||
|
modelCount: 8,
|
||||||
|
actionLabel: "查看详情",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "李四",
|
||||||
|
idNo: "331081199003230321",
|
||||||
|
department: "信息二部",
|
||||||
|
riskLevel: "中风险",
|
||||||
|
riskLevelType: "warning",
|
||||||
|
modelCount: 6,
|
||||||
|
actionLabel: "查看详情",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
riskModels: {},
|
riskModels: {},
|
||||||
riskDetails: {},
|
riskDetails: {},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
const assert = require("assert");
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
const entry = fs.readFileSync(
|
||||||
|
path.resolve(
|
||||||
|
__dirname,
|
||||||
|
"../../src/views/ccdiProject/components/detail/PreliminaryCheck.vue"
|
||||||
|
),
|
||||||
|
"utf8"
|
||||||
|
);
|
||||||
|
const stats = fs.readFileSync(
|
||||||
|
path.resolve(
|
||||||
|
__dirname,
|
||||||
|
"../../src/views/ccdiProject/components/detail/OverviewStats.vue"
|
||||||
|
),
|
||||||
|
"utf8"
|
||||||
|
);
|
||||||
|
const people = fs.readFileSync(
|
||||||
|
path.resolve(
|
||||||
|
__dirname,
|
||||||
|
"../../src/views/ccdiProject/components/detail/RiskPeopleSection.vue"
|
||||||
|
),
|
||||||
|
"utf8"
|
||||||
|
);
|
||||||
|
|
||||||
|
["风险总览", "overview-stats"].forEach((token) => assert(stats.includes(token), token));
|
||||||
|
["风险人员总览", "中高风险人员TOP10", "查看详情"].forEach((token) =>
|
||||||
|
assert(people.includes(token), token)
|
||||||
|
);
|
||||||
|
assert(entry.includes("risk-people-section"), "入口应挂载风险人员区");
|
||||||
Reference in New Issue
Block a user