wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并结果总览顶部风险总览卡片

Browse Source
This commit is contained in:
wkc
2026-03-27 14:52:12 +08:00
parent 55c8f1c29c
commit a76806acfc
4 changed files with 103 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
ruoyi-ui/src/views/ccdiProject/components/detail/OverviewStats.vue
View File

@@ -1,37 +1,17 @@
<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 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 v-if="summary.actions && summary.actions.length" 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 class="stats-content">
<div class="stats-label">{{ item.label }}</div>
<div class="stats-value">{{ item.value }}</div>
</div>
</div>
</div>
@@ -55,38 +35,6 @@ export default {
margin-bottom: 16px;
}
.section-card {
padding: 20px;
border-radius: 0;
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: 10px;
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));

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

@@ -13,12 +13,20 @@
</div>
<div v-else class="preliminary-check-page">
<overview-stats :summary="currentData.summary" />
<risk-people-section
:section-data="currentData.riskPeople"
:selected-model-codes="selectedModelCodes"
@view-project-analysis="handleRiskPeopleProjectAnalysis"
/>
<section class="section-card risk-overview-card">
<div class="section-header">
<div>
<div class="section-title">风险总览</div>
<div class="section-subtitle">集中展示项目风险统计与命中人员总览</div>
</div>
</div>
<overview-stats :summary="currentData.summary" />
<risk-people-section
:section-data="currentData.riskPeople"
:selected-model-codes="selectedModelCodes"
@view-project-analysis="handleRiskPeopleProjectAnalysis"
/>
</section>
<risk-model-section
:section-data="currentData.riskModels"
@selection-change="handleRiskModelSelectionChange"
@@ -244,4 +252,31 @@ export default {
.preliminary-check-page {
min-height: 400px;
}
.section-card {
padding: 20px;
border-radius: 0;
background: #fff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.risk-overview-card {
margin-bottom: 16px;
}
.section-header {
margin-bottom: 16px;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
}
.section-subtitle {
margin-top: 4px;
font-size: 12px;
color: #94a3b8;
}
</style>

123
ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue
View File

@@ -1,59 +1,51 @@
<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="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="riskLevel" label="风险等级" min-width="110">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.riskLevelType" effect="plain">
{{ scope.row.riskLevel }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="modelCount" label="命中模型数" min-width="110" />
<el-table-column label="核心异常点" min-width="220">
<template slot-scope="scope">
<div
v-if="scope.row.riskPointTagList && scope.row.riskPointTagList.length"
class="risk-point-tag-list"
>
<el-tag
v-for="(tag, index) in scope.row.riskPointTagList"
:key="`${scope.row.idNo || scope.row.name || index}-risk-point-${index}`"
class="core-risk-tag"
:style="resolveModelTagStyle(tag)"
size="mini"
effect="plain"
>
{{ tag.ruleName }}
</el-tag>
</div>
<span v-else class="empty-text">-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="right">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleViewProject(scope.row)">{{
scope.row.actionLabel || "查看项目"
}}</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="section-toolbar">
<el-button size="mini" type="text">导出</el-button>
</div>
<el-table :data="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="riskLevel" label="风险等级" min-width="110">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.riskLevelType" effect="plain">
{{ scope.row.riskLevel }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="modelCount" label="命中模型数" min-width="110" />
<el-table-column label="核心异常点" min-width="220">
<template slot-scope="scope">
<div
v-if="scope.row.riskPointTagList && scope.row.riskPointTagList.length"
class="risk-point-tag-list"
>
<el-tag
v-for="(tag, index) in scope.row.riskPointTagList"
:key="`${scope.row.idNo || scope.row.name || index}-risk-point-${index}`"
class="core-risk-tag"
:style="resolveModelTagStyle(tag)"
size="mini"
effect="plain"
>
{{ tag.ruleName }}
</el-tag>
</div>
<span v-else class="empty-text">-</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="right">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleViewProject(scope.row)">{{
scope.row.actionLabel || "查看项目"
}}</el-button>
</template>
</el-table-column>
</el-table>
</section>
</template>
@@ -186,35 +178,16 @@ export default {
<style lang="scss" scoped>
.risk-people-section {
margin-bottom: 16px;
margin-bottom: 0;
}
.section-card {
padding: 20px;
border-radius: 0;
background: #fff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.block-header {
.section-toolbar {
display: flex;
justify-content: space-between;
justify-content: flex-end;
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;

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

@@ -1,14 +1,14 @@
export const mockOverviewData = {
summary: {
title: "风险仪表盘",
subtitle: "风险仪表盘数据概览",
title: "风险总览",
subtitle: "集中展示项目风险统计与命中人员总览",
actions: [],
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" },
{ key: "count", label: "无预警人数", value: 432, icon: "el-icon-document", tone: "blue" },
],
},
riskPeople: {