Browse Source
- 新增 src/views/analysis/index.vue：处理时效与积分排行左右一行、分类/级别分布（echarts）、月度运营报告+导出 - 新增 src/api/analysis/index.js：stats/timeliness/ranking/report 相关接口封装 - 修正 report/monthly 与 /export 需必填 year（文档未写），补年份选择 - 按甲方调整：去掉隐患热力图与顶部筛选列 - 同步更新 PAGES_TODO / CURRENT_STATUS / DEVELOPMENT_LOG；提交前 eslint 与 build:prod 通过master
5 changed files with 427 additions and 2 deletions
@ -0,0 +1,46 @@
@@ -0,0 +1,46 @@
|
||||
import request from '@/utils/request' |
||||
|
||||
// 隐患统计-按分类（饼图/柱状）
|
||||
export function getStatsCategory() { |
||||
return request({ url: '/business/points/analysis/stats/category', method: 'get' }) |
||||
} |
||||
|
||||
// 隐患统计-按级别
|
||||
export function getStatsLevel() { |
||||
return request({ url: '/business/points/analysis/stats/level', method: 'get' }) |
||||
} |
||||
|
||||
// 处理时效-按级别（平均处理时长 / 已完成数）
|
||||
export function getTimelinessByLevel() { |
||||
return request({ url: '/business/points/analysis/timeliness/level', method: 'get' }) |
||||
} |
||||
|
||||
// 积分排行榜-总入账
|
||||
export function getRankingPoints() { |
||||
return request({ url: '/business/points/analysis/ranking/points', method: 'get' }) |
||||
} |
||||
|
||||
// 上报积分排行
|
||||
export function getRankingReport() { |
||||
return request({ url: '/business/points/analysis/ranking/report', method: 'get' }) |
||||
} |
||||
|
||||
// 兑换排行统计（按单位）
|
||||
export function getRankingExchange() { |
||||
return request({ url: '/business/points/analysis/ranking/exchange', method: 'get' }) |
||||
} |
||||
|
||||
// 月度安全运营报告（year 必填；month=0 全年，1~12 指定月份）
|
||||
export function getMonthlyReport(params) { |
||||
return request({ url: '/business/points/analysis/report/monthly', method: 'get', params }) |
||||
} |
||||
|
||||
// 月度安全运营报告导出（Excel，直接下载；year 必填）
|
||||
export function exportMonthlyReport(params) { |
||||
return request({ |
||||
url: '/business/points/analysis/report/monthly/export', |
||||
method: 'get', |
||||
params, |
||||
responseType: 'blob' |
||||
}) |
||||
} |
||||
@ -0,0 +1,365 @@
@@ -0,0 +1,365 @@
|
||||
<template> |
||||
<div v-loading="loading" class="app-container analysis-page"> |
||||
<div class="two-col"> |
||||
<!-- 处理时效 --> |
||||
<div class="panel"> |
||||
<div class="panel-title">处理时效（按级别）</div> |
||||
<el-table :data="timeliness" size="mini" class="analysis-table"> |
||||
<el-table-column label="级别" prop="levelName" min-width="120"> |
||||
<template slot-scope="scope">{{ scope.row.levelName || '—' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="平均处理时长" width="140" align="center"> |
||||
<template slot-scope="scope">{{ hoursText(scope.row.avgHours) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="已完成数" width="110" align="center"> |
||||
<template slot-scope="scope">{{ num(scope.row.completedCount) }}</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div v-if="!timeliness.length && !loading" class="panel-empty">暂无数据</div> |
||||
</div> |
||||
|
||||
<!-- 积分排行 --> |
||||
<div class="panel"> |
||||
<div class="panel-title">积分排行</div> |
||||
<el-tabs v-model="rankTab"> |
||||
<el-tab-pane label="积分" name="points"> |
||||
<el-table :data="rankPoints" size="mini" class="analysis-table"> |
||||
<el-table-column label="#" width="60" align="center"> |
||||
<template slot-scope="scope">{{ rankBadge(scope.$index) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="用户" prop="userName" min-width="120"> |
||||
<template slot-scope="scope">{{ scope.row.userName || '—' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="总入账积分" prop="totalIncome" width="120" align="right" /> |
||||
</el-table> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="上报" name="report"> |
||||
<el-table :data="rankReport" size="mini" class="analysis-table"> |
||||
<el-table-column label="#" width="60" align="center"> |
||||
<template slot-scope="scope">{{ rankBadge(scope.$index) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="用户" prop="userName" min-width="120"> |
||||
<template slot-scope="scope">{{ scope.row.userName || '—' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="上报次数" prop="reportCount" width="120" align="right" /> |
||||
</el-table> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="兑换" name="exchange"> |
||||
<el-table :data="rankExchange" size="mini" class="analysis-table"> |
||||
<el-table-column label="#" width="60" align="center"> |
||||
<template slot-scope="scope">{{ rankBadge(scope.$index) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="单位" prop="unitName" min-width="140"> |
||||
<template slot-scope="scope">{{ scope.row.unitName || '—' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="兑换单数" prop="orderCount" width="100" align="right" /> |
||||
<el-table-column label="消耗积分" prop="totalPoints" width="110" align="right" /> |
||||
<el-table-column label="兑换人数" prop="userCount" width="100" align="right" /> |
||||
</el-table> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="two-col"> |
||||
<div class="panel"> |
||||
<div class="panel-title">隐患分类分布</div> |
||||
<div v-if="categoryList.length" ref="categoryChart" class="chart" /> |
||||
<div v-else class="panel-empty">暂无数据</div> |
||||
</div> |
||||
<div class="panel"> |
||||
<div class="panel-title">隐患级别分布</div> |
||||
<div v-if="levelList.length" ref="levelChart" class="chart" /> |
||||
<div v-else class="panel-empty">暂无数据</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="panel"> |
||||
<div class="panel-head"> |
||||
<div class="panel-title">月度安全运营报告</div> |
||||
<div class="panel-actions"> |
||||
<el-select v-model="reportYear" size="mini" style="width:110px" @change="loadMonthlyReport"> |
||||
<el-option v-for="y in yearOptions" :key="y" :label="`${y} 年`" :value="y" /> |
||||
</el-select> |
||||
<el-select v-model="reportMonth" size="mini" style="width:120px" @change="loadMonthlyReport"> |
||||
<el-option label="全年各月" :value="0" /> |
||||
<el-option v-for="m in 12" :key="m" :label="`${m} 月`" :value="m" /> |
||||
</el-select> |
||||
<el-button size="mini" type="primary" :loading="exporting" @click="handleExport">导出报告</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="monthlyReport" size="mini" class="analysis-table"> |
||||
<el-table-column label="月份" width="80" align="center"> |
||||
<template slot-scope="scope">{{ scope.row.month === 0 ? '全年合计' : `${scope.row.month} 月` }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="隐患总数" prop="hazardCount" align="right" /> |
||||
<el-table-column label="已通过" prop="approvedCount" align="right" /> |
||||
<el-table-column label="已驳回" prop="rejectedCount" align="right" /> |
||||
<el-table-column label="发放积分" prop="pointsIssued" align="right" /> |
||||
<el-table-column label="平均处理时长" align="right"> |
||||
<template slot-scope="scope">{{ hoursText(scope.row.avgProcessHours) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="准时率" align="right"> |
||||
<template slot-scope="scope">{{ percent(scope.row.onTimeRate) }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="兑换单数" prop="exchangeOrderCount" align="right" /> |
||||
<el-table-column label="兑换消耗积分" prop="exchangePoints" align="right" /> |
||||
</el-table> |
||||
<div v-if="!monthlyReport.length && !loading" class="panel-empty">暂无数据</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from 'echarts' |
||||
import { saveAs } from 'file-saver' |
||||
import { blobValidate } from '@/utils/ruoyi' |
||||
import { |
||||
getStatsCategory, |
||||
getStatsLevel, |
||||
getTimelinessByLevel, |
||||
getRankingPoints, |
||||
getRankingReport, |
||||
getRankingExchange, |
||||
getMonthlyReport, |
||||
exportMonthlyReport |
||||
} from '@/api/analysis' |
||||
|
||||
export default { |
||||
name: 'DataAnalysis', |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
exporting: false, |
||||
rankTab: 'points', |
||||
timeliness: [], |
||||
rankPoints: [], |
||||
rankReport: [], |
||||
rankExchange: [], |
||||
categoryList: [], |
||||
levelList: [], |
||||
reportYear: new Date().getFullYear(), |
||||
reportMonth: 0, |
||||
monthlyReport: [], |
||||
categoryChart: null, |
||||
levelChart: null |
||||
} |
||||
}, |
||||
computed: { |
||||
yearOptions() { |
||||
const current = new Date().getFullYear() |
||||
return [current, current - 1, current - 2, current - 3, current - 4] |
||||
} |
||||
}, |
||||
created() { |
||||
this.loadData() |
||||
}, |
||||
mounted() { |
||||
window.addEventListener('resize', this.handleResize) |
||||
}, |
||||
activated() { |
||||
this.handleResize() |
||||
}, |
||||
beforeDestroy() { |
||||
window.removeEventListener('resize', this.handleResize) |
||||
this.disposeCharts() |
||||
}, |
||||
deactivated() { |
||||
this.disposeCharts() |
||||
}, |
||||
methods: { |
||||
loadData() { |
||||
this.loading = true |
||||
Promise.all([ |
||||
getTimelinessByLevel().catch(() => ({ data: [] })), |
||||
getRankingPoints().catch(() => ({ data: [] })), |
||||
getRankingReport().catch(() => ({ data: [] })), |
||||
getRankingExchange().catch(() => ({ data: [] })), |
||||
getStatsCategory().catch(() => ({ data: [] })), |
||||
getStatsLevel().catch(() => ({ data: [] })) |
||||
]) |
||||
.then(([timeliness, points, report, exchange, category, level]) => { |
||||
this.timeliness = this.toList(timeliness) |
||||
this.rankPoints = this.toList(points) |
||||
this.rankReport = this.toList(report) |
||||
this.rankExchange = this.toList(exchange) |
||||
this.categoryList = this.toList(category) |
||||
this.levelList = this.toList(level) |
||||
this.$nextTick(this.renderCharts) |
||||
}) |
||||
.catch(() => { |
||||
this.$modal.msgError('数据分析加载失败，请检查后端服务和登录状态') |
||||
}) |
||||
.finally(() => { |
||||
this.loading = false |
||||
}) |
||||
this.loadMonthlyReport() |
||||
}, |
||||
loadMonthlyReport() { |
||||
getMonthlyReport({ year: this.reportYear, month: this.reportMonth }) |
||||
.then(response => { |
||||
const data = response.data || response |
||||
this.monthlyReport = Array.isArray(data) ? data : (data && (data.list || data.rows)) || [] |
||||
}) |
||||
.catch(() => { |
||||
this.monthlyReport = [] |
||||
}) |
||||
}, |
||||
toList(response) { |
||||
const data = response && response.data |
||||
if (Array.isArray(data)) return data |
||||
if (data && Array.isArray(data.list)) return data.list |
||||
if (data && Array.isArray(data.rows)) return data.rows |
||||
return [] |
||||
}, |
||||
renderCharts() { |
||||
this.renderCategoryChart() |
||||
this.renderLevelChart() |
||||
}, |
||||
renderCategoryChart() { |
||||
const el = this.$refs.categoryChart |
||||
if (!el || !this.categoryList.length) return |
||||
if (!this.categoryChart) this.categoryChart = echarts.init(el) |
||||
const names = this.categoryList.map(item => item.categoryName || '未分类') |
||||
const values = this.categoryList.map(item => Number(item.count || 0)) |
||||
this.categoryChart.setOption({ |
||||
grid: { top: 16, left: 8, right: 24, bottom: 8, containLabel: true }, |
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }}, |
||||
xAxis: { type: 'value', minInterval: 1, axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: '#f0f0f2' }}, axisLabel: { color: '#9898ae', fontSize: 11 }}, |
||||
yAxis: { type: 'category', data: names, axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e7eb' }}, axisLabel: { color: '#5a5a72', fontSize: 11 }}, |
||||
series: [{ type: 'bar', data: values, barWidth: '46%', itemStyle: { color: '#1890ff', borderRadius: [0, 4, 4, 0] }, label: { show: true, position: 'right', color: '#5a5a72', fontSize: 11 }}] |
||||
}, true) |
||||
this.categoryChart.resize() |
||||
}, |
||||
renderLevelChart() { |
||||
const el = this.$refs.levelChart |
||||
if (!el || !this.levelList.length) return |
||||
if (!this.levelChart) this.levelChart = echarts.init(el) |
||||
const data = this.levelList.map(item => ({ name: item.levelName || '未分级', value: Number(item.count || 0) })) |
||||
this.levelChart.setOption({ |
||||
tooltip: { trigger: 'item' }, |
||||
legend: { bottom: 0, textStyle: { color: '#5a5a72', fontSize: 11 }}, |
||||
color: ['#1890ff', '#e8952f', '#d64550', '#2d8a4e'], |
||||
series: [{ |
||||
type: 'pie', |
||||
radius: ['42%', '68%'], |
||||
center: ['50%', '46%'], |
||||
avoidLabelOverlap: true, |
||||
label: { color: '#5a5a72', fontSize: 11 }, |
||||
data |
||||
}] |
||||
}, true) |
||||
this.levelChart.resize() |
||||
}, |
||||
handleResize() { |
||||
this.categoryChart && this.categoryChart.resize() |
||||
this.levelChart && this.levelChart.resize() |
||||
}, |
||||
disposeCharts() { |
||||
if (this.categoryChart) { this.categoryChart.dispose(); this.categoryChart = null } |
||||
if (this.levelChart) { this.levelChart.dispose(); this.levelChart = null } |
||||
}, |
||||
handleExport() { |
||||
this.exporting = true |
||||
exportMonthlyReport({ year: this.reportYear, month: this.reportMonth }) |
||||
.then(async data => { |
||||
if (blobValidate(data)) { |
||||
const scope = this.reportMonth === 0 ? '全年' : `${this.reportMonth}月` |
||||
saveAs(new Blob([data]), `月度安全运营报告-${this.reportYear}年${scope}.xlsx`) |
||||
this.$modal.msgSuccess('报告已导出') |
||||
} else { |
||||
const text = typeof data.text === 'function' ? await data.text() : String(data) |
||||
let message = '导出失败' |
||||
try { message = JSON.parse(text).msg || message } catch (error) { /* 非 JSON 响应 */ } |
||||
this.$modal.msgError(message) |
||||
} |
||||
}) |
||||
.catch(() => { |
||||
this.$modal.msgError('导出失败，请稍后重试') |
||||
}) |
||||
.finally(() => { |
||||
this.exporting = false |
||||
}) |
||||
}, |
||||
rankBadge(index) { |
||||
return ['🥇', '🥈', '🥉'][index] || String(index + 1) |
||||
}, |
||||
num(value) { |
||||
return value === undefined || value === null || value === '' ? '—' : value |
||||
}, |
||||
hoursText(value) { |
||||
if (value === undefined || value === null || value === '') return '—' |
||||
const n = Number(value) |
||||
if (Number.isNaN(n)) return String(value) |
||||
return n >= 24 ? `${(n / 24).toFixed(1)} d` : `${n} h` |
||||
}, |
||||
percent(value) { |
||||
if (value === undefined || value === null || value === '') return '—' |
||||
const n = Number(value) |
||||
return Number.isNaN(n) ? String(value) : `${n}%` |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.analysis-page { |
||||
min-height: calc(100vh - 52px); |
||||
} |
||||
|
||||
.two-col { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
gap: 14px; |
||||
margin-bottom: 14px; |
||||
} |
||||
|
||||
.panel { |
||||
padding: 16px 18px; |
||||
background: var(--prototype-panel, #fff); |
||||
border: 1px solid var(--prototype-divider, #f0f0f2); |
||||
border-radius: var(--prototype-radius, 8px); |
||||
} |
||||
|
||||
.panel-head { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 16px; |
||||
} |
||||
|
||||
.panel-title { |
||||
margin-bottom: 12px; |
||||
color: var(--prototype-text, #1a1a2e); |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.panel-head .panel-title { |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.panel-actions { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8px; |
||||
} |
||||
|
||||
.panel-empty { |
||||
padding: 28px 0; |
||||
color: var(--prototype-text-muted, #9898ae); |
||||
font-size: 12px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.chart { |
||||
width: 100%; |
||||
height: 264px; |
||||
} |
||||
|
||||
@media (max-width: 1100px) { |
||||
.two-col { |
||||
grid-template-columns: 1fr; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue