增加首页大屏显示

wangrong

2026-08-28 17b92e9b60dda6dcc20c748046a5ff3c3958d52e

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

@@ -2,13 +2,13 @@
   <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="可在人数与投递次数之间切换">
               <panel-card title="参与趋势" sub="可在人数与投递次数之间切换" :demo="participationTrendDemo">
                  <template #extra>
                     <cl-select-button v-model="trendKind" :options="trendOptions" small />
                  </template>
@@ -16,7 +16,7 @@
               </panel-card>
            </el-col>
            <el-col :lg="10" :xs="24">
               <panel-card title="碳积分流转" sub="第一版用流向，不做 Sankey">
               <panel-card title="碳积分流转" sub="第一版用流向，不做 Sankey" :demo="isDemoSection('pointFlow')">
                  <div class="flow">
                     <div class="flow__node is-in">
                        <span>发放</span>
@@ -49,7 +49,7 @@

         <el-row :gutter="10">
            <el-col :span="24">
               <panel-card title="组织排行榜" sub="人均按参与人数；院系不统计参与率">
               <panel-card title="组织排行榜" sub="人均按参与人数；院系不统计参与率" :demo="rankDemo">
                  <template #extra>
                     <div class="rank-tools">
                        <cl-select-button v-model="rankOrg" :options="orgOptions" small />
@@ -72,9 +72,10 @@
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { type RankMetric } from '../../data/screen';
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, baseGrid, axisStyle, tooltip } = useChartTheme();

const trendKind = ref<'people' | 'times'>('people');
@@ -101,14 +102,24 @@
];

const kpis = computed(() => [
   { label: '参与师生', value: data.value.kpis.totalParticipants, suffix: '人', fixed: 0 },
   { label: '参与率', value: data.value.kpis.participateRate, suffix: '%', fixed: 1, hint: '参与人数 / 参数 student.count.{部门ID}' },
   { label: '本区间新增参与', value: data.value.kpis.newParticipants, suffix: '人', fixed: 0, hint: '区间内出现过的去重用户' },
   { label: '碳积分发放', value: data.value.kpis.pointsIssued, suffix: '分', fixed: 0 },
   { label: '碳积分消费', value: data.value.kpis.pointsConsumed, suffix: '分', fixed: 0 },
   { label: '碳积分余额', value: data.value.kpis.pointsBalance, suffix: '分', fixed: 0 }
   { field: 'kpis.totalParticipants', label: '参与师生', value: data.value.kpis.totalParticipants, suffix: '人', fixed: 0 },
   { field: 'kpis.participateRate', label: '参与率', value: data.value.kpis.participateRate, suffix: '%', fixed: 1, hint: '参与人数 / 参数 student.count.{部门ID}' },
   { field: 'kpis.newParticipants', label: '本区间新增参与', value: data.value.kpis.newParticipants, suffix: '人', fixed: 0, hint: '区间内出现过的去重用户' },
   { field: 'kpis.pointsIssued', label: '碳积分发放', value: data.value.kpis.pointsIssued, suffix: '分', fixed: 0 },
   { field: 'kpis.pointsConsumed', label: '碳积分消费', value: data.value.kpis.pointsConsumed, suffix: '分', fixed: 0 },
   { field: 'kpis.pointsBalance', label: '碳积分余额', value: data.value.kpis.pointsBalance, suffix: '分', fixed: 0 }
]);

const participationTrendDemo = computed(() =>
   trendKind.value === 'people' ? isDemoSection('participateTrend') : isDemoSection('deliverTrend')
);

const rankDemo = computed(() => {
   if (rankOrg.value === 'major') return isDemoSection('majorRank');
   if (rankOrg.value === 'dept') return isDemoSection('deptRank');
   return isDemoSection('classRank');
});

const trendOption = computed(() => ({
   grid: baseGrid(),
   tooltip: { trigger: 'axis', ...tooltip() },