bug修复,用真实数据

wangrong

2026-09-24 bf9400d4198094194439214b5e90036b2f040052

 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: '吨CO₂e', 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>