Browse Source
- 新增 src/views/risk/index.vue：风控预警 Tab（异常行为检测、自报自审检测）+ 审计日志 Tab（筛选/分页/展开前后数据） - 新增 src/api/risk/index.js：audit/log 与 anti/farm 检测接口封装 - 风控预警列表与处置无后端接口，保留占位 - 同步更新 PAGES_TODO / CURRENT_STATUS / DEVELOPMENT_LOG；提交前 eslint 与 build:prod 通过master
5 changed files with 408 additions and 2 deletions
@ -0,0 +1,25 @@
@@ -0,0 +1,25 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
// 审计日志分页查询（操作类型 / 操作人 / 业务单号）
|
||||
export function listAuditLogs(params) { |
||||
return request({ url: '/business/audit/log/getListByPage', method: 'get', params }) |
||||
} |
||||
|
||||
// 按业务单号查询关联审计日志（时间倒序）
|
||||
export function listAuditLogsByBiz(bizId) { |
||||
return request({ url: '/business/audit/log/biz/' + bizId, method: 'get' }) |
||||
} |
||||
|
||||
// 异常行为一键检测（指定用户，聚合上报/积分获取/兑换 3 类校验）
|
||||
export function detectAbnormal(userId) { |
||||
return request({ url: '/business/points/anti/farm/detectAll', method: 'get', params: { userId }}) |
||||
} |
||||
|
||||
// 自报自审行为检测（上报人 = 审核人？）
|
||||
export function detectSelfAudit(reporterId, auditorId) { |
||||
return request({ |
||||
url: '/business/points/anti/farm/detectSelfAudit', |
||||
method: 'get', |
||||
params: { reporterId, auditorId } |
||||
}) |
||||
} |
||||
@ -0,0 +1,372 @@
@@ -0,0 +1,372 @@
|
||||
<template> |
||||
<div class="app-container risk-audit"> |
||||
<el-tabs v-model="activeTab"> |
||||
<!-- 风控预警 --> |
||||
<el-tab-pane label="风控预警" name="alert"> |
||||
<div class="panel"> |
||||
<div class="panel-title">异常行为检测</div> |
||||
<el-form :inline="true" size="small"> |
||||
<el-form-item label="检测用户"> |
||||
<select-tree |
||||
ref="detectUserTree" |
||||
type="tree_person" |
||||
:chenk-parent-node="false" |
||||
:echo-back="detectForm.userId" |
||||
placeholder="请选择要检测的用户" |
||||
style="width:240px" |
||||
@OrgNodeClick="handleDetectUserSelect" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" size="mini" :loading="detecting" @click="handleDetect">执行异常行为检测</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div v-if="detectResult" class="detect-result"> |
||||
<div class="detect-result__overall" :class="detectResult.overallPassed ? 'is-pass' : 'is-fail'"> |
||||
综合结果：{{ detectResult.overallPassed ? '未发现异常' : '存在异常' }} |
||||
</div> |
||||
<div v-for="check in detectChecks" :key="check.key" class="detect-result__item"> |
||||
<span class="detect-result__name">{{ check.name }}</span> |
||||
<el-tag :type="check.passed ? 'success' : 'danger'" size="small">{{ check.passed ? '通过' : '异常' }}</el-tag> |
||||
<span class="detect-result__reason">{{ check.reason || '—' }}</span> |
||||
</div> |
||||
</div> |
||||
<div v-else class="panel-note">选择用户后点击检测，返回上报防刷、积分获取防刷、兑换防刷三类校验结果。</div> |
||||
</div> |
||||
|
||||
<div class="panel"> |
||||
<div class="panel-title">自报自审检测</div> |
||||
<el-form :inline="true" size="small"> |
||||
<el-form-item label="上报人"> |
||||
<select-tree |
||||
ref="reporterTree" |
||||
type="tree_person" |
||||
:chenk-parent-node="false" |
||||
:echo-back="selfAuditForm.reporterId" |
||||
placeholder="请选择上报人" |
||||
style="width:220px" |
||||
@OrgNodeClick="node => handleSelfAuditSelect('reporterId', node)" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="审核人"> |
||||
<select-tree |
||||
ref="auditorTree" |
||||
type="tree_person" |
||||
:chenk-parent-node="false" |
||||
:echo-back="selfAuditForm.auditorId" |
||||
placeholder="请选择审核人" |
||||
style="width:220px" |
||||
@OrgNodeClick="node => handleSelfAuditSelect('auditorId', node)" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" size="mini" :loading="selfAuditing" @click="handleSelfAudit">检测</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div v-if="selfAuditResult" class="panel-note">检测结果：{{ selfAuditResult }}</div> |
||||
</div> |
||||
|
||||
<div class="panel"> |
||||
<div class="panel-title">预警列表</div> |
||||
<el-alert |
||||
title="预警列表与处置（放行 / 冻结 24h / 黑名单）后端暂未提供接口，待补齐后再接入。" |
||||
type="warning" |
||||
:closable="false" |
||||
show-icon |
||||
/> |
||||
<div class="panel-note">防刷 4 维度开关已在「安全兑换管理」页维护，此处不重复。</div> |
||||
</div> |
||||
</el-tab-pane> |
||||
|
||||
<!-- 审计日志 --> |
||||
<el-tab-pane label="审计日志" name="log"> |
||||
<data-list-panel modern-table> |
||||
<template #filters> |
||||
<el-form :inline="true" size="small" class="data-list-filter-form"> |
||||
<el-form-item label="操作类型"> |
||||
<el-select v-model="queryParams.operationType" clearable placeholder="全部类型"> |
||||
<el-option v-for="item in operationTypeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="操作人"> |
||||
<el-input v-model="queryParams.operator" clearable placeholder="操作人" @keyup.enter.native="handleQuery" /> |
||||
</el-form-item> |
||||
<el-form-item label="业务单号"> |
||||
<el-input v-model="queryParams.bizId" clearable placeholder="业务单号" @keyup.enter.native="handleQuery" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</template> |
||||
|
||||
<template #actions> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="getLogs">刷新</el-button> |
||||
</template> |
||||
|
||||
<el-table v-loading="logLoading" :data="logList" size="mini" class="data-list-table"> |
||||
<el-table-column type="expand"> |
||||
<template slot-scope="scope"> |
||||
<div class="log-detail"> |
||||
<div><b>操作前：</b><pre>{{ formatJson(scope.row.beforeData) }}</pre></div> |
||||
<div><b>操作后：</b><pre>{{ formatJson(scope.row.afterData) }}</pre></div> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作时间" width="170"> |
||||
<template slot-scope="scope">{{ formatTime(scope.row.createTime) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作人" prop="operator" width="120" show-overflow-tooltip> |
||||
<template slot-scope="scope">{{ scope.row.operator || '—' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作 IP" prop="operatorIp" width="140" show-overflow-tooltip> |
||||
<template slot-scope="scope">{{ scope.row.operatorIp || '—' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作类型" width="130" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-tag :type="operationTypeTag(scope.row)" size="small">{{ operationTypeLabel(scope.row) }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="业务单号" prop="bizId" min-width="150" show-overflow-tooltip> |
||||
<template slot-scope="scope">{{ scope.row.bizId || '—' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip> |
||||
<template slot-scope="scope">{{ scope.row.remark || '—' }}</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<template #footer> |
||||
<el-pagination |
||||
background |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="logTotal" |
||||
:current-page.sync="queryParams.pageNum" |
||||
:page-size.sync="queryParams.pageSize" |
||||
:page-sizes="[10, 20, 50]" |
||||
@size-change="getLogs" |
||||
@current-change="getLogs" |
||||
/> |
||||
</template> |
||||
</data-list-panel> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import SelectTree from '@/components/SelectTree' |
||||
import { listAuditLogs, detectAbnormal, detectSelfAudit } from '@/api/risk' |
||||
|
||||
const OPERATION_TYPES = [ |
||||
{ value: 'AUDIT_PASS', label: '审核通过' }, |
||||
{ value: 'POINTS_ADJUST', label: '积分调整' }, |
||||
{ value: 'EXCHANGE_REFUND', label: '兑换退款' } |
||||
] |
||||
|
||||
export default { |
||||
name: 'RiskAudit', |
||||
components: { SelectTree }, |
||||
data() { |
||||
return { |
||||
activeTab: 'alert', |
||||
detectForm: { userId: '' }, |
||||
selfAuditForm: { reporterId: '', auditorId: '' }, |
||||
detecting: false, |
||||
selfAuditing: false, |
||||
detectResult: null, |
||||
selfAuditResult: '', |
||||
operationTypeOptions: OPERATION_TYPES, |
||||
logLoading: false, |
||||
logList: [], |
||||
logTotal: 0, |
||||
queryParams: { pageNum: 1, pageSize: 10, operationType: undefined, operator: undefined, bizId: undefined } |
||||
} |
||||
}, |
||||
computed: { |
||||
detectChecks() { |
||||
const result = this.detectResult || {} |
||||
return [ |
||||
{ key: 'report', name: '上报防刷', ...(result.reportCheck || {}) }, |
||||
{ key: 'points', name: '积分获取防刷', ...(result.pointsEarnCheck || {}) }, |
||||
{ key: 'exchange', name: '兑换防刷', ...(result.exchangeCheck || {}) } |
||||
] |
||||
} |
||||
}, |
||||
created() { |
||||
this.getLogs() |
||||
}, |
||||
methods: { |
||||
handleDetectUserSelect(node) { |
||||
this.$set(this.detectForm, 'userId', node.id) |
||||
}, |
||||
handleSelfAuditSelect(field, node) { |
||||
this.$set(this.selfAuditForm, field, node.id) |
||||
}, |
||||
handleDetect() { |
||||
if (!this.detectForm.userId) { |
||||
this.$modal.msgWarning('请先选择要检测的用户') |
||||
return |
||||
} |
||||
this.detecting = true |
||||
detectAbnormal(this.detectForm.userId) |
||||
.then(response => { |
||||
this.detectResult = response.data || response || {} |
||||
}) |
||||
.catch(() => { |
||||
this.detectResult = null |
||||
this.$modal.msgError('异常行为检测失败，请稍后重试') |
||||
}) |
||||
.finally(() => { |
||||
this.detecting = false |
||||
}) |
||||
}, |
||||
handleSelfAudit() { |
||||
if (!this.selfAuditForm.reporterId || !this.selfAuditForm.auditorId) { |
||||
this.$modal.msgWarning('请选择上报人和审核人') |
||||
return |
||||
} |
||||
this.selfAuditing = true |
||||
detectSelfAudit(this.selfAuditForm.reporterId, this.selfAuditForm.auditorId) |
||||
.then(response => { |
||||
this.selfAuditResult = response.data || response || '—' |
||||
}) |
||||
.catch(() => { |
||||
this.selfAuditResult = '' |
||||
this.$modal.msgError('自报自审检测失败，请稍后重试') |
||||
}) |
||||
.finally(() => { |
||||
this.selfAuditing = false |
||||
}) |
||||
}, |
||||
getLogs() { |
||||
this.logLoading = true |
||||
listAuditLogs(this.queryParams) |
||||
.then(response => { |
||||
const page = response.data || response |
||||
this.logList = page.list || page.rows || page.records || [] |
||||
this.logTotal = Number(page.total || page.totalCount || this.logList.length) |
||||
}) |
||||
.catch(() => { |
||||
this.logList = [] |
||||
this.logTotal = 0 |
||||
this.$modal.msgError('审计日志加载失败，请检查后端服务和登录状态') |
||||
}) |
||||
.finally(() => { |
||||
this.logLoading = false |
||||
}) |
||||
}, |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1 |
||||
this.getLogs() |
||||
}, |
||||
resetQuery() { |
||||
this.queryParams = { pageNum: 1, pageSize: this.queryParams.pageSize, operationType: undefined, operator: undefined, bizId: undefined } |
||||
this.getLogs() |
||||
}, |
||||
operationTypeLabel(row) { |
||||
const item = OPERATION_TYPES.find(option => option.value === row.operationType) |
||||
return item ? item.label : (row.operationType || '—') |
||||
}, |
||||
operationTypeTag(row) { |
||||
const map = { AUDIT_PASS: 'primary', POINTS_ADJUST: 'warning', EXCHANGE_REFUND: 'success' } |
||||
return map[row.operationType] || 'info' |
||||
}, |
||||
formatJson(value) { |
||||
if (!value) return '—' |
||||
try { |
||||
return JSON.stringify(JSON.parse(value), null, 2) |
||||
} catch (error) { |
||||
return String(value) |
||||
} |
||||
}, |
||||
formatTime(value) { |
||||
if (!value) return '—' |
||||
return String(value).replace('T', ' ').slice(0, 19) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.risk-audit { |
||||
min-height: calc(100vh - 52px); |
||||
} |
||||
|
||||
.panel { |
||||
margin-bottom: 14px; |
||||
padding: 16px 18px; |
||||
background: var(--prototype-panel, #fff); |
||||
border: 1px solid var(--prototype-divider, #f0f0f2); |
||||
border-radius: var(--prototype-radius, 8px); |
||||
} |
||||
|
||||
.panel-title { |
||||
margin-bottom: 12px; |
||||
color: var(--prototype-text, #1a1a2e); |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.panel-note { |
||||
margin-top: 10px; |
||||
color: var(--prototype-text-muted, #9898ae); |
||||
font-size: 12px; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.detect-result { |
||||
margin-top: 12px; |
||||
padding: 12px 14px; |
||||
border-radius: 8px; |
||||
background: var(--prototype-panel-soft, #fafbfc); |
||||
} |
||||
|
||||
.detect-result__overall { |
||||
margin-bottom: 10px; |
||||
font-size: 13px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.detect-result__overall.is-pass { |
||||
color: #2d8a4e; |
||||
} |
||||
|
||||
.detect-result__overall.is-fail { |
||||
color: #d64550; |
||||
} |
||||
|
||||
.detect-result__item { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
padding: 4px 0; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.detect-result__name { |
||||
width: 110px; |
||||
color: var(--prototype-text-secondary, #5a5a72); |
||||
} |
||||
|
||||
.detect-result__reason { |
||||
color: var(--prototype-text-muted, #9898ae); |
||||
} |
||||
|
||||
.log-detail { |
||||
padding: 8px 16px; |
||||
} |
||||
|
||||
.log-detail pre { |
||||
margin: 4px 0 12px; |
||||
padding: 8px 10px; |
||||
max-height: 220px; |
||||
overflow: auto; |
||||
background: #f7f8fa; |
||||
border-radius: 6px; |
||||
color: var(--prototype-text, #1a1a2e); |
||||
font-size: 12px; |
||||
white-space: pre-wrap; |
||||
word-break: break-all; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue