feat(screen): 更新风险统计面板的标签和图表标题

- 将标签从"安全类"和"工程类"更新为"安全类事项"和"工程类事项"
- 将图表标题从"每日检查(维保类)"等更新为"当日维保"、"本月维保"、"本年维保"等
- 更新类型定义以匹配新的标签名称
- 调整默认图表数据的标题文本
- 更新活动标签的初始值和数据映射逻辑
This commit is contained in:
2026-01-08 10:58:03 +08:00
parent f909230546
commit f9ad37c92c

View File

@@ -2,9 +2,9 @@
<div class="left-bottom"> <div class="left-bottom">
<div class="panel-title"> <div class="panel-title">
<div class="tabs"> <div class="tabs">
<span class="tab" :class="{ active: activeTab === '安全类' }" @click="handleTabClick('安全类')">安全类</span> <span class="tab" :class="{ active: activeTab === '安全类事项' }" @click="handleTabClick('安全类事项')">安全类事项</span>
<span class="divider">|</span> <span class="divider">|</span>
<span class="tab" :class="{ active: activeTab === '工程类' }" @click="handleTabClick('工程类')">工程类</span> <span class="tab" :class="{ active: activeTab === '工程类事项' }" @click="handleTabClick('工程类事项')">工程类事项</span>
</div> </div>
</div> </div>
<img class="title-line" src="@/assets/images/title_border_line.png" /> <img class="title-line" src="@/assets/images/title_border_line.png" />
@@ -49,7 +49,7 @@ import { computed, ref, watch } from 'vue'
import { ElTooltip } from 'element-plus' import { ElTooltip } from 'element-plus'
import type { EChartsOption } from 'echarts' import type { EChartsOption } from 'echarts'
type TabType = '安全类' | '工程类' type TabType = '安全类事项' | '工程类事项'
type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided' type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
interface ChartItem { interface ChartItem {
@@ -67,12 +67,12 @@ const statusList: { key: StatusKey; label: string; color: string }[] = [
] ]
const defaultChart: ChartItem[] = [ const defaultChart: ChartItem[] = [
{ 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 } },
{ 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 handleChartTitleClick = () => { const handleChartTitleClick = () => {
@@ -80,23 +80,23 @@ const handleChartTitleClick = () => {
} }
const tabCharts = ref<Record<TabType, ChartItem[]>>({ const tabCharts = ref<Record<TabType, ChartItem[]>>({
安全类: [...defaultChart], 安全类事项: [...defaultChart],
工程类: [...defaultChart] 工程类事项: [...defaultChart]
}) })
const props = defineProps<{ const props = defineProps<{
riskStatistics?: Record<TabType, ChartItem[]> riskStatistics?: Record<TabType, ChartItem[]>
}>() }>()
const activeTab = ref<TabType>('安全类') const activeTab = ref<TabType>('安全类事项')
const emit = defineEmits<{ tabChange: [tab: TabType] }>() const emit = defineEmits<{ tabChange: [tab: TabType] }>()
// 监听props变化更新图表数据 // 监听props变化更新图表数据
watch(() => props.riskStatistics, (newData) => { watch(() => props.riskStatistics, (newData) => {
if (newData) { if (newData) {
tabCharts.value = { tabCharts.value = {
安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart], 安全类事项: newData['安全类事项'] ? JSON.parse(JSON.stringify(newData['安全类事项'])) : [...defaultChart],
工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart] 工程类事项: newData['工程类事项'] ? JSON.parse(JSON.stringify(newData['工程类事项'])) : [...defaultChart]
} }
} }
}, { deep: true, immediate: true }) }, { deep: true, immediate: true })