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/map.vue | 123 +++++++++++-----------------------------
1 files changed, 34 insertions(+), 89 deletions(-)
diff --git a/src/modules/report/views/screen/map.vue b/src/modules/report/views/screen/map.vue
index 0582eda..b626f2f 100755
--- a/src/modules/report/views/screen/map.vue
+++ b/src/modules/report/views/screen/map.vue
@@ -17,7 +17,15 @@
<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"
+ :center="['50%', '50%']"
+ :radius="['38%', '62%']"
+ />
</panel-card>
<panel-card
@@ -25,7 +33,16 @@
:demo="isDemoSection('recycleItems')"
class="dash-card dash-card--flex"
>
- <v-chart :option="carbonOption" autoresize class="chart" />
+ <screen-drill-chart
+ class="chart"
+ type="pie"
+ :source="data.recycleItems"
+ metric="carbon"
+ unit="kgCO鈧俥"
+ name-suffix="鍥炴敹"
+ :center="['50%', '50%']"
+ :radius="['36%', '60%']"
+ />
</panel-card>
</div>
@@ -57,7 +74,14 @@
<template #extra>
<cl-select-button v-model="itemMetric" :options="itemOptions" small />
</template>
- <v-chart :option="itemOption" autoresize class="chart chart--items" />
+ <screen-drill-chart
+ class="chart chart--items"
+ type="bar"
+ :source="data.recycleItems"
+ :metric="itemMetric"
+ :unit="itemUnit"
+ :even-split="false"
+ />
</panel-card>
</div>
</div>
@@ -85,12 +109,12 @@
import ScreenMapPanel from '../../components/screen-map-panel.vue';
import CameraMonitor from '../../../monitor/views/cameras.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();
const { isDemoSection } = useScreenFieldSource();
-const { textColor, mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();
+const { mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();
const mixMetric = ref<'weight' | 'value' | 'count'>('weight');
const trendMetric = ref<'weight' | 'value' | 'carbon'>('weight');
@@ -141,45 +165,11 @@
return 'kg';
});
-/** 鍨冨溇鍒嗙被缁撴瀯锛堥ゼ锛� */
-const mixOption = computed(() => ({
- tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() },
- series: [
- {
- type: 'pie',
- radius: ['38%', '62%'],
- center: ['50%', '50%'],
- 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 carbonOption = computed(() => ({
- tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kgCO鈧俥') },
- series: [
- {
- type: 'pie',
- radius: ['36%', '60%'],
- center: ['50%', '50%'],
- padAngle: 3,
- itemStyle: { borderRadius: 6 },
- label: { color: textColor.value, formatter: '{b}\n{d}%' },
- data: toPieData(
- chartSeries(data.value.recycleItems, e => e.carbon, { carbon: true }),
- e => e.name + '鍥炴敹',
- e => e.color
- )
- }
- ]
-}));
+const mixUnit = computed(() => {
+ if (mixMetric.value === 'value') return '鍏�';
+ if (mixMetric.value === 'count') return '娆�';
+ return 'kg';
+});
/** 鍥炴敹瓒嬪娍锛堟姌绾匡級 */
const trendOption = computed(() => ({
@@ -207,51 +197,6 @@
]
}));
-/** 鍚勭被鍥炴敹閲忥紙妯悜鏉″舰锛� */
-const itemOption = computed(() => {
- const carbon = itemMetric.value === 'carbon';
- const rows = chartSeries(
- data.value.recycleItems,
- e => Number(e[itemMetric.value] || 0),
- { carbon, evenSplit: false }
- ).reverse();
- return {
- grid: { containLabel: true, left: 8, right: 24, top: 12, bottom: 8 },
- tooltip: {
- trigger: 'axis',
- axisPointer: { type: 'shadow' },
- valueFormatter: (v: number) => `${Number(v || 0).toLocaleString()} ${itemUnit.value}`,
- ...tooltip()
- },
- xAxis: {
- type: 'value',
- name: itemUnit.value,
- nameTextStyle: { color: mutedColor.value },
- splitLine: { lineStyle: { color: splitColor.value, type: 'dashed' } },
- axisLabel: { color: mutedColor.value },
- axisLine: { show: false },
- axisTick: { show: false }
- },
- yAxis: {
- type: 'category',
- data: rows.map(e => e.item.name),
- axisLabel: { color: textColor.value },
- axisLine: { show: false },
- axisTick: { show: false }
- },
- series: [
- {
- type: 'bar',
- barWidth: 14,
- data: rows.map(e => e.value),
- itemStyle: {
- borderRadius: [0, 8, 8, 0],
- color: (params: any) => rows[params.dataIndex]?.item.color || primary.value
- }
- }
- ]
- };
-});
</script>
<style lang="scss" scoped>
--
Gitblit v1.9.1