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/resource.vue | 79 +++++++++++----------------------------
1 files changed, 22 insertions(+), 57 deletions(-)
diff --git a/src/modules/report/views/screen/resource.vue b/src/modules/report/views/screen/resource.vue
index cc65457..8e0c854 100644
--- a/src/modules/report/views/screen/resource.vue
+++ b/src/modules/report/views/screen/resource.vue
@@ -7,12 +7,29 @@
<el-row :gutter="10" class="mid-row">
<el-col :lg="10" :xs="24">
<panel-card title="鍙洖鏀剁墿鍝佺被鍗犳瘮" sub="鍚屼竴鏃堕棿鑼冨洿锛岀湅缁撴瀯" :demo="isDemoSection('recycleItems')">
- <v-chart :option="pieOption" autoresize class="chart" />
+ <screen-drill-chart
+ class="chart"
+ type="pie"
+ :source="data.recycleItems"
+ metric="weight"
+ unit="kg"
+ legend
+ :center="['50%', '46%']"
+ :radius="['36%', '60%']"
+ label="{b} {d}%"
+ />
</panel-card>
</el-col>
<el-col :lg="14" :xs="24">
<panel-card title="鍚勭被鍥炴敹閲�" sub="妯悜鏌辩姸鍥炬洿閫傚悎闀垮搧绫诲悕" :demo="isDemoSection('recycleItems')">
- <v-chart :option="weightOption" autoresize class="chart" />
+ <screen-drill-chart
+ class="chart"
+ type="bar"
+ :source="data.recycleItems"
+ metric="weight"
+ unit="kg"
+ :even-split="false"
+ />
</panel-card>
</el-col>
</el-row>
@@ -35,12 +52,13 @@
import { computed } from 'vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
-import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
+import ScreenDrillChart from '../../components/screen-drill-chart.vue';
+import { chartSeries } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data } = useScreenData();
const { isDemoSection } = useScreenFieldSource();
-const { textColor, mutedColor, splitColor, primary, tooltip } = useChartTheme();
+const { mutedColor, splitColor, primary, tooltip } = useChartTheme();
const kpis = computed(() => [
{ field: 'kpis.periodWeightTon', label: '鎬婚噺', value: data.value.kpis.periodWeightTon, suffix: '鍚�', fixed: 2, hint: '鍏ㄩ儴鍒嗙被閲嶉噺鍚堣' },
@@ -50,59 +68,6 @@
{ field: 'kpis.fabricTon', label: '搴熸棫缁囩墿', value: data.value.kpis.fabricTon, suffix: '鍚�', fixed: 2, hint: '鍙洖鏀跺瓙绫�' }
]);
-const pieOption = computed(() => ({
- tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kg') },
- legend: { bottom: 0, textStyle: { color: mutedColor.value } },
- series: [
- {
- type: 'pie',
- radius: ['36%', '60%'],
- center: ['50%', '46%'],
- padAngle: 3,
- itemStyle: { borderRadius: 6 },
- label: { color: textColor.value, formatter: '{b} {d}%' },
- data: toPieData(
- chartSeries(data.value.recycleItems, e => e.weight),
- e => e.name,
- e => e.color
- )
- }
- ]
-}));
-
-const weightRows = computed(() =>
- chartSeries(data.value.recycleItems, e => e.weight, { evenSplit: false }).reverse()
-);
-
-const weightOption = computed(() => ({
- grid: { containLabel: true, left: 8, right: 28, top: 12, bottom: 8 },
- tooltip: { trigger: 'axis', ...tooltip() },
- xAxis: {
- type: 'value',
- name: 'kg',
- splitLine: { lineStyle: { color: splitColor.value, type: 'dashed' } },
- axisLabel: { color: mutedColor.value },
- axisLine: { show: false },
- axisTick: { show: false }
- },
- yAxis: {
- type: 'category',
- data: weightRows.value.map(e => e.item.name),
- axisLabel: { color: textColor.value },
- axisLine: { show: false },
- axisTick: { show: false }
- },
- series: [
- {
- type: 'bar',
- barWidth: 16,
- data: weightRows.value.map(e => ({
- value: e.value,
- itemStyle: { color: e.item.color, borderRadius: [0, 8, 8, 0] }
- }))
- }
- ]
-}));
const valueRows = computed(() =>
chartSeries(data.value.recycleItems, e => e.value, { evenSplit: false })
--
Gitblit v1.9.1