From 0c5ac04069ddfcd128a395aaf45ef35e115cd3e8 Mon Sep 17 00:00:00 2001 From: lzh Date: Sun, 1 Mar 2026 16:18:44 +0800 Subject: [PATCH] =?UTF-8?q?style(ops):=20=E4=BC=98=E5=8C=96=E5=B7=A5?= =?UTF-8?q?=E5=8D=95=E7=8A=B6=E6=80=81=E5=88=86=E5=B8=83=E5=92=8C=E5=B7=A5?= =?UTF-8?q?=E7=89=8C=E9=98=9F=E5=88=97=E7=BB=9F=E8=AE=A1=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 状态分布饼图： - 使用 Ant Design 色板统一配色 - legend 显示数量和百分比（rich text） - 中心数字加大加粗，饼块增大圆角 - emphasis 放大效果增强 工牌队列柱状图： - 最大值柱子高亮深色，其余渐变浅色 - 柱顶显示数值标签 - tooltip 改为卡片式样式 - hover 加深色强调效果，圆角加大 Co-Authored-By: Claude Opus 4.6 --- .../cleaning/work-order/dashboard/index.vue | 136 ++++++++++++------ 1 file changed, 91 insertions(+), 45 deletions(-) diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue b/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue index e80ce9d72..cd79e2606 100644 --- a/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue +++ b/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue @@ -400,58 +400,73 @@ function getTimeTrendChartOptions(): ECOption { function getStatusDistributionChartOptions(): ECOption { const { statusDistribution } = statsData.value; const STATUS_COLORS: Record = { - 待处理: '#f5a623', - 排队中: '#8b5cf6', - 已派单: '#3b82f6', - 已到岗: '#06b6d4', - 已完成: '#10b981', - 已取消: '#f43f5e', - 已暂停: '#94a3b8', + 待处理: '#faad14', + 排队中: '#722ed1', + 已派单: '#1677ff', + 已到岗: '#13c2c2', + 已完成: '#52c41a', + 已取消: '#ff4d4f', + 已暂停: '#8c8c8c', }; const total = statusDistribution.reduce((sum, item) => sum + item.value, 0); return { tooltip: { trigger: 'item', backgroundColor: 'rgba(255, 255, 255, 0.96)', - borderColor: '#e5e7eb', + borderColor: '#f0f0f0', borderWidth: 1, - textStyle: { color: '#374151', fontSize: 13 }, + padding: [8, 12], + textStyle: { color: '#262626', fontSize: 13 }, formatter: (params: any) => { const marker = ``; - return `${marker}${params.name}
${params.value}个 · ${params.percent}%`; + return `${marker}${params.name}
${params.value} 个 ${params.percent}%`; }, }, legend: { orient: 'vertical', - right: '2%', + right: '4%', top: 'center', - itemWidth: 8, - itemHeight: 8, - itemGap: 12, + itemWidth: 10, + itemHeight: 10, + itemGap: 14, icon: 'circle', - textStyle: { fontSize: 12, color: '#6b7280' }, + textStyle: { fontSize: 12, color: '#595959' }, + formatter: (name: string) => { + const item = statusDistribution.find((d) => d.name === name); + if (!item) return name; + const pct = total > 0 ? ((item.value / total) * 100).toFixed(1) : '0'; + return `${name} {val|${item.value}} {pct|${pct}%}`; + }, + textStyle: { + fontSize: 12, + color: '#595959', + rich: { + val: { fontSize: 13, fontWeight: 600, color: '#262626', padding: [0, 4, 0, 8] }, + pct: { fontSize: 11, color: '#8c8c8c' }, + }, + }, }, graphic: [ { type: 'text', - left: '28%', - top: '40%', + left: '23%', + top: '38%', style: { text: `${total}`, - fontSize: 22, - fontWeight: '600', - fill: '#1f2937', + fontSize: 26, + fontWeight: '700', + fill: '#262626', textAlign: 'center', }, }, { type: 'text', - left: '28%', - top: '54%', + left: '23%', + top: '55%', style: { text: '近7天工单', fontSize: 11, - fill: '#9ca3af', + fill: '#bfbfbf', textAlign: 'center', }, }, @@ -460,30 +475,31 @@ function getStatusDistributionChartOptions(): ECOption { { name: '工单状态分布', type: 'pie', - radius: ['50%', '72%'], - center: ['30%', '50%'], + radius: ['48%', '70%'], + center: ['25%', '50%'], avoidLabelOverlap: false, label: { show: false }, emphasis: { scale: true, - scaleSize: 6, + scaleSize: 8, label: { show: true, - fontSize: 13, + fontSize: 14, fontWeight: '600', - color: '#374151', + color: '#262626', formatter: '{b}\n{c}个', + lineHeight: 20, }, }, itemStyle: { borderColor: '#fff', borderWidth: 2, - borderRadius: 4, + borderRadius: 6, }, data: statusDistribution.map((item) => ({ ...item, itemStyle: { - color: STATUS_COLORS[item.name] || '#d1d5db', + color: STATUS_COLORS[item.name] || '#d9d9d9', }, })), }, @@ -682,25 +698,32 @@ function getFunctionTypeRankingChartOptions(): ECOption { function getBadgeQueueChartOptions(): ECOption { const queue = statsData.value.badgeQueueStats; if (!queue || queue.dates.length === 0) return {}; + const maxVal = Math.max(...queue.queueData, 1); return { tooltip: { trigger: 'axis', + backgroundColor: 'rgba(255, 255, 255, 0.96)', + borderColor: '#f0f0f0', + borderWidth: 1, + padding: [8, 12], + textStyle: { color: '#262626', fontSize: 13 }, formatter: (params: any) => { const param = params[0]; - return `${param.name}
队列数量: ${param.value}`; + return `${param.name}
${param.value} 个排队`; }, }, grid: { left: '3%', right: '4%', bottom: '3%', - top: '10%', + top: '15%', containLabel: true, }, xAxis: [{ type: 'category', data: queue.dates, - axisLine: { lineStyle: { color: '#d9d9d9' } }, + axisLine: { lineStyle: { color: '#f0f0f0' } }, + axisTick: { show: false }, axisLabel: { color: '#8c8c8c', fontSize: 11 }, }], yAxis: [{ @@ -708,24 +731,47 @@ function getBadgeQueueChartOptions(): ECOption { name: '队列数', nameTextStyle: { color: '#8c8c8c', fontSize: 12 }, axisLine: { show: false }, + axisTick: { show: false }, axisLabel: { color: '#8c8c8c' }, - splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }, + splitLine: { lineStyle: { color: '#f5f5f5', type: 'dashed' } }, }], series: [{ name: '队列数量', type: 'bar', - barWidth: '50%', - data: queue.queueData, - itemStyle: { - color: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: '#722ed1' }, - { offset: 1, color: '#b37feb' }, - ], + barWidth: '40%', + data: queue.queueData.map((val) => ({ + value: val, + itemStyle: { + color: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: val === maxVal ? '#531dab' : '#722ed1' }, + { offset: 1, color: val === maxVal ? '#9254de' : '#d3adf7' }, + ], + }, + borderRadius: [6, 6, 0, 0], + }, + })), + label: { + show: true, + position: 'top', + fontSize: 11, + fontWeight: '600', + color: '#722ed1', + formatter: (params: any) => params.value > 0 ? params.value : '', + }, + emphasis: { + itemStyle: { + color: { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: '#391085' }, + { offset: 1, color: '#722ed1' }, + ], + }, }, - borderRadius: [4, 4, 0, 0], }, }], };