增加首页大屏显示

wangrong

2026-08-28 17b92e9b60dda6dcc20c748046a5ff3c3958d52e

 src/modules/report/views/screen/resource.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="10" :xs="24">
               <panel-card title="可回收物品类占比" sub="同一时间范围，看结构">
               <panel-card title="可回收物品类占比" sub="同一时间范围，看结构" :demo="isDemoSection('recycleItems')">
                  <v-chart :option="pieOption" autoresize class="chart" />
               </panel-card>
            </el-col>
            <el-col :lg="14" :xs="24">
               <panel-card title="各类回收量" sub="横向柱状图更适合长品类名">
               <panel-card title="各类回收量" sub="横向柱状图更适合长品类名" :demo="isDemoSection('recycleItems')">
                  <v-chart :option="weightOption" autoresize class="chart" />
               </panel-card>
            </el-col>
@@ -21,7 +21,7 @@

         <el-row :gutter="10">
            <el-col :span="24">
               <panel-card title="回收价值分析" sub="学校最关心：什么垃圾最值钱">
               <panel-card title="回收价值分析" sub="学校最关心：什么垃圾最值钱" :demo="isDemoSection('recycleItems')">
                  <v-chart :option="valueOption" autoresize class="chart chart--value" />
               </panel-card>
            </el-col>
@@ -37,17 +37,18 @@
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 } = useScreenData();
const { isDemoField, isDemoSection } = useScreenFieldSource();
const { textColor, mutedColor, splitColor, primary, tooltip } = useChartTheme();

const kpis = computed(() => [
   { label: '回收总量', value: data.value.kpis.periodWeightTon, suffix: '吨', fixed: 2, hint: '全部分类重量合计' },
   { label: '可回收物', value: data.value.kpis.recyclableTon, suffix: '吨', fixed: 2, hint: 'SW62' },
   { label: '大件垃圾', value: data.value.kpis.bulkTon, suffix: '吨', fixed: 2, hint: 'SW63' },
   { label: '电子产品', value: data.value.kpis.elecTon, suffix: '吨', fixed: 2, hint: '可回收子类' },
   { label: '废旧织物', value: data.value.kpis.fabricTon, suffix: '吨', fixed: 2, hint: '可回收子类' }
   { field: 'kpis.periodWeightTon', label: '回收总量', value: data.value.kpis.periodWeightTon, suffix: '吨', fixed: 2, hint: '全部分类重量合计' },
   { field: 'kpis.recyclableTon', label: '可回收物', value: data.value.kpis.recyclableTon, suffix: '吨', fixed: 2, hint: 'SW62' },
   { field: 'kpis.bulkTon', label: '大件垃圾', value: data.value.kpis.bulkTon, suffix: '吨', fixed: 2, hint: 'SW63' },
   { field: 'kpis.elecTon', label: '电子产品', value: data.value.kpis.elecTon, suffix: '吨', fixed: 2, hint: '可回收子类' },
   { field: 'kpis.fabricTon', label: '废旧织物', value: data.value.kpis.fabricTon, suffix: '吨', fixed: 2, hint: '可回收子类' }
]);

const pieOption = computed(() => ({