From bf9400d4198094194439214b5e90036b2f040052 Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期四, 24 九月 2026 16:03:10 +0800
Subject: [PATCH] bug修复,用真实数据
---
src/modules/report/views/screen/map.vue | 77 +++++++++++++++++++++++++++++++++++---
1 files changed, 71 insertions(+), 6 deletions(-)
diff --git a/src/modules/report/views/screen/map.vue b/src/modules/report/views/screen/map.vue
index cd966e8..9d6faaa 100755
--- a/src/modules/report/views/screen/map.vue
+++ b/src/modules/report/views/screen/map.vue
@@ -1,7 +1,7 @@
<template>
<div class="screen-page dash">
<!-- KPI 鎸囨爣鏉� -->
- <div class="kpi-grid" style="--kpi-cols: 8">
+ <div class="kpi-grid" style="--kpi-cols: 7">
<kpi-card v-for="item in kpis" :key="item.label" v-bind="item" />
</div>
@@ -57,7 +57,7 @@
<template #extra>
<cl-select-button v-model="itemMetric" :options="itemOptions" small />
</template>
- <v-chart :option="itemOption" autoresize class="chart" />
+ <v-chart :option="itemOption" autoresize class="chart chart--items" />
</panel-card>
</div>
</div>
@@ -84,9 +84,10 @@
import PanelCard from '../../components/panel-card.vue';
import ScreenMapPanel from '../../components/screen-map-panel.vue';
import CameraMonitor from '../../../monitor/views/cameras.vue';
+import { TIME_RANGE_OPTIONS } from '../../data/screen';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
-const { data } = useScreenData();
+const { data, timeRange } = useScreenData();
const { isDemoSection } = useScreenFieldSource();
const { textColor, mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();
@@ -112,10 +113,13 @@
{ label: '纰冲噺鎺�', value: 'carbon' }
];
-/** 椤堕儴 KPI锛氬彇鎬昏鍩熸牳蹇� 8 椤� */
+const rangeLabel = computed(
+ () => TIME_RANGE_OPTIONS.find(e => e.value === timeRange.value)?.label || '鏈尯闂�'
+);
+
+/** 椤堕儴 KPI */
const kpis = computed(() => [
- { field: 'kpis.todayWeightKg', label: '浠婃棩鍥炴敹閲�', value: data.value.kpis.todayWeightKg, suffix: 'kg', fixed: 1 },
- { field: 'kpis.periodWeightTon', label: '鏈尯闂村洖鏀堕噺', value: data.value.kpis.periodWeightTon, suffix: '鍚�', fixed: 2 },
+ { field: 'kpis.periodWeightTon', label: `${rangeLabel.value}鍥炴敹閲廯, value: data.value.kpis.periodWeightTon, suffix: '鍚�', fixed: 2 },
{ field: 'kpis.resourceRate', label: '璧勬簮鍖栫巼', value: data.value.kpis.resourceRate, suffix: '%', fixed: 1 },
{ field: 'kpis.periodValue', label: '鍥炴敹浠峰��', value: data.value.kpis.periodValue, suffix: '鍏�', fixed: 0 },
{ field: 'kpis.periodCarbonTon', label: '纰冲噺鎺�', value: data.value.kpis.periodCarbonTon, suffix: '鍚–O鈧俥', fixed: 2 },
@@ -353,4 +357,65 @@
}
}
}
+
+@media (max-width: 768px) {
+ .dash,
+ .dash-body,
+ .dash-col {
+ height: auto;
+ min-height: 0;
+ overflow: visible;
+ flex: none;
+ }
+
+ .dash :deep(.kpi-grid) {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .dash-card--flex {
+ flex: none;
+ height: auto;
+ min-height: 0;
+ overflow: visible;
+
+ :deep(.panel-card) {
+ height: auto;
+ min-height: 0;
+ overflow: visible;
+ }
+
+ :deep(.panel-card__body) {
+ flex: none;
+ height: auto;
+ min-height: 0;
+ overflow: visible;
+ }
+ }
+
+ /* 鍦板浘鐢诲竷灞傜骇寰堥珮锛岄檺鍒跺湪涓爮鍐咃紝閬垮厤鐩栦綇涓婁笅涓ゅ潡鍥捐〃 */
+ .dash-card--map {
+ position: relative;
+ z-index: 0;
+ flex: none;
+ height: 480px;
+ min-height: 480px;
+ overflow: hidden;
+ }
+
+ .dash .chart {
+ display: block;
+ height: 260px;
+ min-height: 260px;
+ }
+
+ .dash .chart--items {
+ height: 420px;
+ min-height: 420px;
+ }
+
+ .dash-foot {
+ height: auto;
+ min-height: 300px;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1