feat(screen): 更新主屏幕组件和风险统计面板

- 调整了组件标签格式,移除多余空格
- 修复了导入语句的空格格式问题
- 更新了JSON解析的空格格式
- 修改了工作订单类型从"安全生产"为"物业服务-安全"
- 增加了API响应数据的rate字段支持
- 将图表中心显示从总数改为完成率百分比
- 将状态标签从"已作废"更新为"已关闭"
- 优化了背景图片的CSS配置
- 添加了空行以提高代码可读性
This commit is contained in:
2025-12-24 10:18:33 +08:00
parent fcb0a38523
commit 301d47368d
2 changed files with 115 additions and 101 deletions

View File

@@ -16,8 +16,8 @@
<div class="chart-wrapper">
<Echart class="donut-chart" :options="buildOption(item)" />
<div class="chart-center">
<div class="center-title">总数</div>
<div class="center-value">{{ item.total }}</div>
<div class="center-title">完成率</div>
<div class="center-value">{{ item.rate }}%</div>
</div>
</div>
<div class="legend">
@@ -55,6 +55,7 @@ type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
interface ChartItem {
title: string
total: number
rate: number
status: Record<StatusKey, number>
}
@@ -62,16 +63,16 @@ const statusList: { key: StatusKey; label: string; color: string }[] = [
{ key: 'notStarted', label: '未开始', color: '#2a59ff' },
{ key: 'inProgress', label: '进行中', color: '#ff8a00' },
{ key: 'done', label: '已完成', color: '#1bd9ff' },
{ key: 'voided', label: '已作废', color: '#9fa0a6' }
{ key: 'voided', label: '已关闭', color: '#9fa0a6' }
]
const defaultChart: ChartItem[] = [
{ title: '每日检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每月检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每年检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每日检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每月检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每年检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
{ title: '每日检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每月检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每年检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每日检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每月检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每年检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
]
const tabCharts = ref<Record<TabType, ChartItem[]>>({
@@ -114,7 +115,7 @@ const buildOption = (item: ChartItem): EChartsOption => ({
{ value: item.status.notStarted, name: '未开始', itemStyle: { color: '#2a59ff' }, label: { show: false } },
{ value: item.status.inProgress, name: '进行中', itemStyle: { color: '#ff8a00' }, label: { show: false } },
{ value: item.status.done, name: '已完成', itemStyle: { color: '#1bd9ff' }, label: { show: false } },
{ value: item.status.voided, name: '已作废', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
{ value: item.status.voided, name: '已关闭', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
],
emphasis: { scale: true, scaleSize: 4 }
}