增加首页大屏显示

wangrong

2026-08-28 17b92e9b60dda6dcc20c748046a5ff3c3958d52e

 src/modules/report/views/screen/carbon.vue

@@ -2,18 +2,18 @@
   <div class="screen-page">
         <el-row :gutter="10" class="kpi-row">
            <el-col v-for="item in kpis" :key="item.label" :lg="4" :sm="12" :xs="24">
               <kpi-card v-bind="item" />
               <kpi-card v-bind="item" :demo="isDemoField(item.field)" />
            </el-col>
         </el-row>

         <el-row :gutter="10" class="mid-row">
            <el-col :lg="14" :xs="24">
               <panel-card title="碳减排趋势" sub="今日看近 7 日；年视图按月，其余按日">
               <panel-card title="碳减排趋势" sub="今日看近 7 日；年视图按月，其余按日" :demo="carbonTrendDemo">
                  <v-chart :option="trendOption" autoresize class="chart" />
               </panel-card>
            </el-col>
            <el-col :lg="10" :xs="24">
               <panel-card title="碳减排来源" sub="按可回收子类拆分">
               <panel-card title="碳减排来源" sub="按可回收子类拆分" :demo="isDemoSection('recycleItems')">
                  <v-chart :option="sourceOption" autoresize class="chart" />
               </panel-card>
            </el-col>
@@ -21,7 +21,7 @@

         <el-row :gutter="10">
            <el-col :lg="16" :xs="24">
               <panel-card title="本年度月度碳减排" sub="日表 carbonTotal 单位 kgCO₂e，展示时 ÷1000 为吨">
               <panel-card title="本年度月度碳减排" sub="日表 carbonTotal 单位 kgCO₂e，展示时 ÷1000 为吨" :demo="isDemoSection('yearCarbon')">
                  <v-chart :option="yearOption" autoresize class="chart" />
               </panel-card>
            </el-col>
@@ -47,20 +47,25 @@
import { computed } from 'vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { useChartTheme, useScreenData } from '../../hooks/use-screen';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data, timeRange } = useScreenData();
const { isDemoField, isDemoSection } = useScreenFieldSource();
const { textColor, mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();

const kpis = computed(() => [
   { label: '累计碳减排', value: data.value.kpis.totalCarbonTon, suffix: '吨CO₂e', fixed: 1 },
   { label: '本年度碳减排', value: data.value.kpis.yearCarbonTon, suffix: '吨CO₂e', fixed: 1 },
   { label: '本区间碳减排', value: data.value.kpis.periodCarbonTon, suffix: '吨CO₂e', fixed: 2 },
   { label: '累计资源回收', value: data.value.kpis.totalWeightTon, suffix: '吨', fixed: 1 },
   { label: '累计参与师生', value: data.value.kpis.totalParticipants, suffix: '人', fixed: 0 },
   { label: '累计环保行为', value: data.value.kpis.greenActions, suffix: '次', fixed: 0 }
   { field: 'kpis.totalCarbonTon', label: '累计碳减排', value: data.value.kpis.totalCarbonTon, suffix: '吨CO₂e', fixed: 1 },
   { field: 'kpis.yearCarbonTon', label: '本年度碳减排', value: data.value.kpis.yearCarbonTon, suffix: '吨CO₂e', fixed: 1 },
   { field: 'kpis.periodCarbonTon', label: '本区间碳减排', value: data.value.kpis.periodCarbonTon, suffix: '吨CO₂e', fixed: 2 },
   { field: 'kpis.totalWeightTon', label: '累计资源回收', value: data.value.kpis.totalWeightTon, suffix: '吨', fixed: 1 },
   { field: 'kpis.totalParticipants', label: '累计参与师生', value: data.value.kpis.totalParticipants, suffix: '人', fixed: 0 },
   { field: 'kpis.greenActions', label: '累计环保行为', value: data.value.kpis.greenActions, suffix: '次', fixed: 0 }
]);

const carbonTrendDemo = computed(() =>
   timeRange.value === 'year' ? isDemoSection('yearCarbon') : isDemoSection('trend')
);

const trendOption = computed(() => {
   const isYear = timeRange.value === 'year';
   return {