From 781539c6bea54b7689baf008e22fb25028729b4a Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期六, 26 九月 2026 11:42:26 +0800
Subject: [PATCH] 修改首页显示和统计任务
---
src/modules/report/views/screen/overview.vue | 13 +++---
src/modules/report/views/screen/carbon.vue | 13 +++---
src/modules/report/views/screen/resource.vue | 34 +++++++++++------
src/modules/report/views/screen/map.vue | 42 +++++++++++---------
4 files changed, 59 insertions(+), 43 deletions(-)
diff --git a/src/modules/report/views/screen/carbon.vue b/src/modules/report/views/screen/carbon.vue
index 3121ae7..17e6a2e 100644
--- a/src/modules/report/views/screen/carbon.vue
+++ b/src/modules/report/views/screen/carbon.vue
@@ -46,6 +46,7 @@
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { TIME_RANGE_OPTIONS } from '../../data/screen';
+import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data, timeRange } = useScreenData();
@@ -129,7 +130,7 @@
}));
const sourceOption = computed(() => ({
- tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kgCO鈧俥 ({d}%)', ...tooltip() },
+ tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kgCO鈧俥') },
legend: { bottom: 0, textStyle: { color: mutedColor.value } },
series: [
{
@@ -139,11 +140,11 @@
padAngle: 3,
itemStyle: { borderRadius: 6 },
label: { color: textColor.value, formatter: '{b}\n{d}%' },
- data: data.value.recycleItems.map(e => ({
- name: e.name + '鍥炴敹',
- value: e.carbon,
- itemStyle: { color: e.color }
- }))
+ data: toPieData(
+ chartSeries(data.value.recycleItems, e => e.carbon, { carbon: true }),
+ e => e.name + '鍥炴敹',
+ e => e.color
+ )
}
]
}));
diff --git a/src/modules/report/views/screen/map.vue b/src/modules/report/views/screen/map.vue
index 9d6faaa..213582e 100755
--- a/src/modules/report/views/screen/map.vue
+++ b/src/modules/report/views/screen/map.vue
@@ -85,6 +85,7 @@
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 { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data, timeRange } = useScreenData();
@@ -142,7 +143,7 @@
/** 鍨冨溇鍒嗙被缁撴瀯锛堥ゼ锛� */
const mixOption = computed(() => ({
- tooltip: { trigger: 'item', formatter: '{b}<br/>{c} ({d}%)', ...tooltip() },
+ tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() },
series: [
{
type: 'pie',
@@ -151,18 +152,18 @@
padAngle: 3,
itemStyle: { borderRadius: 6 },
label: { color: textColor.value, formatter: '{b}\n{d}%' },
- data: data.value.wasteMix.map(e => ({
- name: e.name,
- value: e[mixMetric.value],
- itemStyle: { color: e.color }
- }))
+ data: toPieData(
+ chartSeries(data.value.wasteMix, e => e[mixMetric.value]),
+ e => e.name,
+ e => e.color
+ )
}
]
}));
-/** 纰冲噺鎺掓潵婧愶紙楗硷級 */
+/** 纰冲噺鎺掓潵婧愶紙楗硷級锛氱⒊鍊煎彲涓鸿礋锛屾寜缁濆鍊煎睍绀哄噺鎺掗噺 */
const carbonOption = computed(() => ({
- tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kgCO鈧俥 ({d}%)', ...tooltip() },
+ tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kgCO鈧俥') },
series: [
{
type: 'pie',
@@ -171,11 +172,11 @@
padAngle: 3,
itemStyle: { borderRadius: 6 },
label: { color: textColor.value, formatter: '{b}\n{d}%' },
- data: data.value.recycleItems.map(e => ({
- name: e.name + '鍥炴敹',
- value: e.carbon,
- itemStyle: { color: e.color }
- }))
+ data: toPieData(
+ chartSeries(data.value.recycleItems, e => e.carbon, { carbon: true }),
+ e => e.name + '鍥炴敹',
+ e => e.color
+ )
}
]
}));
@@ -208,8 +209,12 @@
/** 鍚勭被鍥炴敹閲忥紙妯悜鏉″舰锛� */
const itemOption = computed(() => {
- // 鍙嶈浆璁╂暟鍊兼渶澶х殑鎺掑湪椤堕儴
- const rows = [...data.value.recycleItems].reverse();
+ 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: {
@@ -229,7 +234,7 @@
},
yAxis: {
type: 'category',
- data: rows.map(e => e.name),
+ data: rows.map(e => e.item.name),
axisLabel: { color: textColor.value },
axisLine: { show: false },
axisTick: { show: false }
@@ -238,11 +243,10 @@
{
type: 'bar',
barWidth: 14,
- data: rows.map(e => Number(e[itemMetric.value] || 0)),
+ data: rows.map(e => e.value),
itemStyle: {
borderRadius: [0, 8, 8, 0],
- // 娌跨敤鍚勭被鑷韩閰嶈壊锛屼笌宸︿晶纰冲噺鎺掗ゼ鍥捐瑙変竴鑷�
- color: (params: any) => rows[params.dataIndex]?.color || primary.value
+ color: (params: any) => rows[params.dataIndex]?.item.color || primary.value
}
}
]
diff --git a/src/modules/report/views/screen/overview.vue b/src/modules/report/views/screen/overview.vue
index 8dba391..9e201e3 100644
--- a/src/modules/report/views/screen/overview.vue
+++ b/src/modules/report/views/screen/overview.vue
@@ -52,6 +52,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 { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data, timeRange } = useScreenData();
@@ -88,7 +89,7 @@
]);
const mixOption = computed(() => ({
- tooltip: { trigger: 'item', formatter: '{b}<br/>{c} ({d}%)', ...tooltip() },
+ tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() },
legend: { bottom: 0, textStyle: { color: mutedColor.value } },
series: [
{
@@ -98,11 +99,11 @@
padAngle: 3,
itemStyle: { borderRadius: 6 },
label: { color: textColor.value, formatter: '{b}\n{d}%' },
- data: data.value.wasteMix.map(e => ({
- name: e.name,
- value: e[mixMetric.value],
- itemStyle: { color: e.color }
- }))
+ data: toPieData(
+ chartSeries(data.value.wasteMix, e => e[mixMetric.value]),
+ e => e.name,
+ e => e.color
+ )
}
]
}));
diff --git a/src/modules/report/views/screen/resource.vue b/src/modules/report/views/screen/resource.vue
index eefd114..dcb45ad 100644
--- a/src/modules/report/views/screen/resource.vue
+++ b/src/modules/report/views/screen/resource.vue
@@ -35,6 +35,7 @@
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 { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data } = useScreenData();
@@ -50,7 +51,7 @@
]);
const pieOption = computed(() => ({
- tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kg ({d}%)', ...tooltip() },
+ tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kg') },
legend: { bottom: 0, textStyle: { color: mutedColor.value } },
series: [
{
@@ -60,14 +61,18 @@
padAngle: 3,
itemStyle: { borderRadius: 6 },
label: { color: textColor.value, formatter: '{b} {d}%' },
- data: data.value.recycleItems.map(e => ({
- name: e.name,
- value: e.weight,
- itemStyle: { color: e.color }
- }))
+ 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 },
@@ -82,7 +87,7 @@
},
yAxis: {
type: 'category',
- data: data.value.recycleItems.map(e => e.name).reverse(),
+ data: weightRows.value.map(e => e.item.name),
axisLabel: { color: textColor.value },
axisLine: { show: false },
axisTick: { show: false }
@@ -91,19 +96,24 @@
{
type: 'bar',
barWidth: 16,
- data: data.value.recycleItems
- .map(e => ({ value: e.weight, itemStyle: { color: e.color, borderRadius: [0, 8, 8, 0] } }))
- .reverse()
+ 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 })
+);
const valueOption = computed(() => ({
grid: { containLabel: true, left: 16, right: 16, top: 28, bottom: 8 },
tooltip: { trigger: 'axis', ...tooltip() },
xAxis: {
type: 'category',
- data: data.value.recycleItems.map(e => e.name),
+ data: valueRows.value.map(e => e.item.name),
axisLabel: { color: mutedColor.value },
axisLine: { show: false },
axisTick: { show: false }
@@ -121,7 +131,7 @@
{
type: 'bar',
barWidth: 28,
- data: data.value.recycleItems.map(e => e.value),
+ data: valueRows.value.map(e => e.value),
itemStyle: { color: primary.value, borderRadius: [6, 6, 0, 0] }
}
]
--
Gitblit v1.9.1