From 5ebdf612b8291106370bba5e79996b28a7452e67 Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期一, 12 十月 2026 00:04:33 +0800
Subject: [PATCH] 首页图表做下钻
---
src/modules/report/views/screen/overview.vue | 37 ++++++++++++++++---------------------
1 files changed, 16 insertions(+), 21 deletions(-)
diff --git a/src/modules/report/views/screen/overview.vue b/src/modules/report/views/screen/overview.vue
index 2c12d09..0051a15 100644
--- a/src/modules/report/views/screen/overview.vue
+++ b/src/modules/report/views/screen/overview.vue
@@ -10,7 +10,16 @@
<template #extra>
<cl-select-button v-model="mixMetric" :options="mixOptions" small />
</template>
- <v-chart :option="mixOption" autoresize class="chart" />
+ <screen-drill-chart
+ class="chart"
+ type="pie"
+ :source="data.wasteMix"
+ :metric="mixMetric"
+ :unit="mixUnit"
+ legend
+ :center="['50%', '46%']"
+ :radius="['38%', '62%']"
+ />
</panel-card>
</el-col>
<el-col :lg="10" :xs="24">
@@ -52,7 +61,7 @@
import PanelCard from '../../components/panel-card.vue';
import ScreenCameraPreview from '../../components/screen-camera-preview.vue';
import { TIME_RANGE_OPTIONS } from '../../data/screen';
-import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
+import ScreenDrillChart from '../../components/screen-drill-chart.vue';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data, timeRange } = useScreenData();
@@ -88,25 +97,11 @@
{ field: 'kpis.totalParticipants', label: '绱鍙備笌浜烘暟', value: data.value.kpis.totalParticipants, suffix: '浜�', fixed: 0, hint: '鍘婚噸鏍″洯鐢ㄦ埛' }
]);
-const mixOption = computed(() => ({
- tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() },
- legend: { bottom: 0, textStyle: { color: mutedColor.value } },
- series: [
- {
- type: 'pie',
- radius: ['38%', '62%'],
- center: ['50%', '46%'],
- padAngle: 3,
- itemStyle: { borderRadius: 6 },
- label: { color: textColor.value, formatter: '{b}\n{d}%' },
- data: toPieData(
- chartSeries(data.value.wasteMix, e => e[mixMetric.value]),
- e => e.name,
- e => e.color
- )
- }
- ]
-}));
+const mixUnit = computed(() => {
+ if (mixMetric.value === 'value') return '鍏�';
+ if (mixMetric.value === 'count') return '娆�';
+ return 'kg';
+});
const trendHint = computed(() => {
const map = { today: '杩� 7 鏃�', week: '鎸夋棩', month: '鎸夋棩', quarter: '鎸夋棩', year: '鎸夋湀' };
--
Gitblit v1.9.1