Browse Source
- 新增 src/views/workbench/index.vue：6 项 KPI + 近7日趋势柱状图 + 待办与预警表 + 最新上报前5条 - 新增 src/api/analysis/home.js：overview / todo-warning / trend-latest 三个接口封装 - 平台同步失败无接口展示占位、风控处理禁用；视觉沿用 prototype-theme - 同步更新 PAGES_TODO / CURRENT_STATUS / DEVELOPMENT_LOG；提交前 eslint 与 build:prod 通过master
5 changed files with 605 additions and 1 deletions
@ -0,0 +1,16 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
// 首页-核心指标概览：待审核数 / 本月已闭环数 / 今日新增上报数 / 今日兑换单数 / 今日发放积分数
|
||||||
|
export function getHomeOverview() { |
||||||
|
return request({ url: '/business/points/analysis/home/overview', method: 'get' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 首页-待办与预警：待审核超 24h / 风控预警(集中兑换) / 申诉待处理
|
||||||
|
export function getHomeTodoWarning() { |
||||||
|
return request({ url: '/business/points/analysis/home/todo-warning', method: 'get' }) |
||||||
|
} |
||||||
|
|
||||||
|
// 首页-近 7 日趋势与最新上报：trend7d[] / latestReports[]
|
||||||
|
export function getHomeTrendLatest() { |
||||||
|
return request({ url: '/business/points/analysis/home/trend-latest', method: 'get' }) |
||||||
|
} |
||||||
@ -0,0 +1,363 @@ |
|||||||
|
<template> |
||||||
|
<div v-loading="loading" class="app-container workbench"> |
||||||
|
<!-- KPI --> |
||||||
|
<div class="kpi-grid"> |
||||||
|
<div |
||||||
|
v-for="card in kpiCards" |
||||||
|
:key="card.key" |
||||||
|
class="kpi-card" |
||||||
|
:class="{ 'is-clickable': card.clickable }" |
||||||
|
@click="handleKpi(card)" |
||||||
|
> |
||||||
|
<div class="kpi-label">{{ card.label }}</div> |
||||||
|
<div class="kpi-value" :style="{ color: card.color }">{{ card.value }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 趋势 + 待办与预警 --> |
||||||
|
<div class="two-col"> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panel-title">近 7 日上报趋势</div> |
||||||
|
<div v-if="trendList.length" ref="trendChart" class="trend-chart" /> |
||||||
|
<div v-else class="panel-empty">暂无趋势数据</div> |
||||||
|
<div class="panel-note">{{ trendRangeText }}</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="panel"> |
||||||
|
<div class="panel-title">待办与预警</div> |
||||||
|
<el-table :data="todoRows" size="mini" :show-header="false" class="todo-table"> |
||||||
|
<el-table-column prop="label" min-width="150" /> |
||||||
|
<el-table-column width="90" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span class="count-tag" :class="scope.row.tagClass">{{ scope.row.countText }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column width="96" align="right"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-tooltip |
||||||
|
:disabled="!scope.row.disabled" |
||||||
|
:content="scope.row.tip" |
||||||
|
placement="top" |
||||||
|
> |
||||||
|
<span> |
||||||
|
<el-button |
||||||
|
size="mini" |
||||||
|
:type="scope.row.buttonType" |
||||||
|
:disabled="scope.row.disabled" |
||||||
|
@click="handleTodoAction(scope.row)" |
||||||
|
>{{ scope.row.actionText }}</el-button> |
||||||
|
</span> |
||||||
|
</el-tooltip> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 最新上报 --> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panel-title">最新上报（前 5 条）</div> |
||||||
|
<el-table :data="latestReports" size="mini" class="latest-table"> |
||||||
|
<el-table-column label="单号" prop="reportNo" min-width="120" show-overflow-tooltip /> |
||||||
|
<el-table-column label="描述" prop="hazardName" min-width="200" show-overflow-tooltip /> |
||||||
|
<el-table-column label="分级" width="90" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-tag :type="levelTagType(scope.row)" size="small">{{ levelLabel(scope.row) }}</el-tag> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="单位/区域" min-width="150" show-overflow-tooltip> |
||||||
|
<template slot-scope="scope">{{ scope.row.factoryDeptName || '—' }}</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="上报人" prop="reporterName" width="110" show-overflow-tooltip> |
||||||
|
<template slot-scope="scope">{{ scope.row.reporterName || '—' }}</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="时间" width="150"> |
||||||
|
<template slot-scope="scope">{{ formatTime(scope.row.createTime) }}</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" width="90" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" size="mini" @click="goAudit(scope.row)">审核</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div v-if="!latestReports.length && !loading" class="panel-empty">暂无上报数据</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as echarts from 'echarts' |
||||||
|
import resize from '@/views/dashboard/mixins/resize' |
||||||
|
import { getHomeOverview, getHomeTodoWarning, getHomeTrendLatest } from '@/api/analysis/home' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Workbench', |
||||||
|
mixins: [resize], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
chart: null, |
||||||
|
overview: {}, |
||||||
|
warning: {}, |
||||||
|
trendList: [], |
||||||
|
latestReports: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
kpiCards() { |
||||||
|
return [ |
||||||
|
{ key: 'pendingAudit', label: '待审核', value: this.num(this.overview.pendingAuditCount), color: '#d64550', clickable: true, route: '/hazard/ledger' }, |
||||||
|
{ key: 'monthClosed', label: '本月已闭环', value: this.num(this.overview.monthClosedCount), color: '#2d8a4e', clickable: true, route: '/hazard/ledger' }, |
||||||
|
{ key: 'syncFail', label: '平台同步失败', value: '—', color: '#d64550', clickable: false, tip: '后端暂未提供平台同步统计接口' }, |
||||||
|
{ key: 'todayReport', label: '今日新增上报', value: this.num(this.overview.todayReportCount), color: '#1a1a2e', clickable: true, route: '/hazard/ledger' }, |
||||||
|
{ key: 'todayExchange', label: '今日兑换单', value: this.num(this.overview.todayExchangeCount), color: '#1a1a2e', clickable: false, tip: '商城运营页面开发中' }, |
||||||
|
{ key: 'todayPoints', label: '今日发放积分', value: this.plus(this.overview.todayPointsIssued), color: '#2d8a4e', clickable: true, route: '/points/management' } |
||||||
|
] |
||||||
|
}, |
||||||
|
todoRows() { |
||||||
|
return [ |
||||||
|
{ key: 'auditOver24h', label: '待审核超 24h', countText: this.countText(this.warning.pendingAuditOver24hCount), tagClass: 'tag-orange', actionText: '去审核', buttonType: 'default', disabled: false, route: '/hazard/ledger' }, |
||||||
|
{ key: 'syncFail', label: '平台同步失败', countText: '—', tagClass: 'tag-red', actionText: '重试', buttonType: 'default', disabled: true, tip: '后端暂未提供重试接口' }, |
||||||
|
{ key: 'riskWarning', label: '风控预警（集中兑换）', countText: this.countText(this.warning.riskWarningCount), tagClass: 'tag-orange', actionText: '处理', buttonType: 'default', disabled: true, tip: '风控页面开发中' }, |
||||||
|
{ key: 'appealPending', label: '申诉待处理', countText: this.countText(this.warning.pendingAppealCount), tagClass: 'tag-blue', actionText: '查看', buttonType: 'default', disabled: false, route: '/points/management' } |
||||||
|
] |
||||||
|
}, |
||||||
|
trendRangeText() { |
||||||
|
if (!this.trendList.length) return '单位：条' |
||||||
|
const first = this.trendList[0].date || '' |
||||||
|
const last = this.trendList[this.trendList.length - 1].date || '' |
||||||
|
const range = first && last ? `${this.shortDate(first)} ~ ${this.shortDate(last)} · ` : '' |
||||||
|
return `${range}单位：条` |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.loadData() |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
if (this.chart) { |
||||||
|
this.chart.dispose() |
||||||
|
this.chart = null |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
loadData() { |
||||||
|
this.loading = true |
||||||
|
Promise.all([getHomeOverview(), getHomeTodoWarning(), getHomeTrendLatest()]) |
||||||
|
.then(([overviewRes, warningRes, trendRes]) => { |
||||||
|
this.overview = (overviewRes && overviewRes.data) || {} |
||||||
|
this.warning = (warningRes && warningRes.data) || {} |
||||||
|
const trend = (trendRes && trendRes.data) || {} |
||||||
|
this.trendList = Array.isArray(trend.trend7d) ? trend.trend7d : [] |
||||||
|
this.latestReports = Array.isArray(trend.latestReports) ? trend.latestReports : [] |
||||||
|
this.$nextTick(this.renderChart) |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
this.overview = {} |
||||||
|
this.warning = {} |
||||||
|
this.trendList = [] |
||||||
|
this.latestReports = [] |
||||||
|
this.$modal.msgError('工作台数据加载失败，请检查后端服务和登录状态') |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
renderChart() { |
||||||
|
const el = this.$refs.trendChart |
||||||
|
if (!el) return |
||||||
|
if (!this.chart) { |
||||||
|
this.chart = echarts.init(el) |
||||||
|
} |
||||||
|
this.chart.setOption({ |
||||||
|
grid: { top: 24, left: 8, right: 12, bottom: 4, containLabel: true }, |
||||||
|
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.trendList.map(item => this.shortDate(item.date)), |
||||||
|
axisTick: { alignWithLabel: true }, |
||||||
|
axisLine: { lineStyle: { color: '#e5e7eb' }}, |
||||||
|
axisLabel: { color: '#5a5a72', fontSize: 11 } |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
minInterval: 1, |
||||||
|
axisTick: { show: false }, |
||||||
|
axisLine: { show: false }, |
||||||
|
splitLine: { lineStyle: { color: '#f0f0f2' }}, |
||||||
|
axisLabel: { color: '#9898ae', fontSize: 11 } |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
type: 'bar', |
||||||
|
data: this.trendList.map(item => Number(item.count || 0)), |
||||||
|
barWidth: '46%', |
||||||
|
itemStyle: { color: '#1890ff', borderRadius: [4, 4, 0, 0] }, |
||||||
|
label: { show: true, position: 'top', color: '#5a5a72', fontSize: 11 } |
||||||
|
}] |
||||||
|
}, true) |
||||||
|
this.chart.resize() |
||||||
|
}, |
||||||
|
handleKpi(card) { |
||||||
|
if (card.route) { |
||||||
|
this.$router.push(card.route) |
||||||
|
} else if (card.tip) { |
||||||
|
this.$modal.msgWarning(card.tip) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleTodoAction(row) { |
||||||
|
if (row.disabled) return |
||||||
|
if (row.route) this.$router.push(row.route) |
||||||
|
}, |
||||||
|
goAudit(row) { |
||||||
|
if (row.id === undefined || row.id === null) { |
||||||
|
this.$modal.msgWarning('该记录缺少主键，无法进入审核') |
||||||
|
return |
||||||
|
} |
||||||
|
this.$router.push({ path: '/hazard/audit/detail', query: { id: String(row.id) }}) |
||||||
|
}, |
||||||
|
num(value) { |
||||||
|
return value === undefined || value === null || value === '' ? '—' : String(value) |
||||||
|
}, |
||||||
|
plus(value) { |
||||||
|
if (value === undefined || value === null || value === '') return '—' |
||||||
|
const n = Number(value) |
||||||
|
return Number.isNaN(n) ? String(value) : `${n >= 0 ? '+' : ''}${n.toLocaleString('en-US')}` |
||||||
|
}, |
||||||
|
countText(value) { |
||||||
|
if (value === undefined || value === null || value === '') return '—' |
||||||
|
return `${value} 条` |
||||||
|
}, |
||||||
|
shortDate(value) { |
||||||
|
const text = String(value || '') |
||||||
|
return text.length >= 5 ? text.slice(-5) : text |
||||||
|
}, |
||||||
|
formatTime(value) { |
||||||
|
if (!value) return '—' |
||||||
|
const text = String(value).replace('T', ' ') |
||||||
|
return text.length >= 16 ? text.slice(5, 16) : text |
||||||
|
}, |
||||||
|
levelLabel(row) { |
||||||
|
return row.hazardLevelName || ({ general: '一般', major: '较大', critical: '重大' }[String(row.hazardLevel || '').toLowerCase()] || '—') |
||||||
|
}, |
||||||
|
levelTagType(row) { |
||||||
|
const level = String(row.hazardLevel || '').toLowerCase() |
||||||
|
if (level === 'critical') return 'danger' |
||||||
|
if (level === 'major') return 'warning' |
||||||
|
return 'info' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.workbench { |
||||||
|
min-height: calc(100vh - 52px); |
||||||
|
} |
||||||
|
|
||||||
|
.kpi-grid { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(6, 1fr); |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.kpi-card { |
||||||
|
padding: 16px 18px; |
||||||
|
background: var(--prototype-panel, #fff); |
||||||
|
border: 1px solid var(--prototype-divider, #f0f0f2); |
||||||
|
border-radius: var(--prototype-radius, 8px); |
||||||
|
} |
||||||
|
|
||||||
|
.kpi-card.is-clickable { |
||||||
|
cursor: pointer; |
||||||
|
transition: border-color .2s, box-shadow .2s; |
||||||
|
} |
||||||
|
|
||||||
|
.kpi-card.is-clickable:hover { |
||||||
|
border-color: var(--prototype-primary, #1890ff); |
||||||
|
box-shadow: 0 4px 14px rgba(24, 144, 255, .12); |
||||||
|
} |
||||||
|
|
||||||
|
.kpi-label { |
||||||
|
color: var(--prototype-text-secondary, #5a5a72); |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.kpi-value { |
||||||
|
margin-top: 10px; |
||||||
|
font-size: 26px; |
||||||
|
font-weight: 800; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.two-col { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: 2fr 1fr; |
||||||
|
gap: 14px; |
||||||
|
margin-top: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.panel { |
||||||
|
margin-top: 14px; |
||||||
|
padding: 16px 18px; |
||||||
|
background: var(--prototype-panel, #fff); |
||||||
|
border: 1px solid var(--prototype-divider, #f0f0f2); |
||||||
|
border-radius: var(--prototype-radius, 8px); |
||||||
|
} |
||||||
|
|
||||||
|
.two-col .panel { |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-title { |
||||||
|
margin-bottom: 12px; |
||||||
|
color: var(--prototype-text, #1a1a2e); |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-note { |
||||||
|
margin-top: 8px; |
||||||
|
color: var(--prototype-text-muted, #9898ae); |
||||||
|
font-size: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-empty { |
||||||
|
padding: 28px 0; |
||||||
|
color: var(--prototype-text-muted, #9898ae); |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.trend-chart { |
||||||
|
width: 100%; |
||||||
|
height: 236px; |
||||||
|
} |
||||||
|
|
||||||
|
.count-tag { |
||||||
|
display: inline-block; |
||||||
|
padding: 1px 8px; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: 11px; |
||||||
|
line-height: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.tag-orange { color: #c97e24; background: #fff4ec; } |
||||||
|
.tag-red { color: #d64550; background: #fef0f0; } |
||||||
|
.tag-blue { color: #1890ff; background: #eaf4ff; } |
||||||
|
|
||||||
|
.todo-table, |
||||||
|
.latest-table { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 1400px) { |
||||||
|
.kpi-grid { grid-template-columns: repeat(3, 1fr); } |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 1100px) { |
||||||
|
.two-col { grid-template-columns: 1fr; } |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 900px) { |
||||||
|
.kpi-grid { grid-template-columns: repeat(2, 1fr); } |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue