| | |
| | | import { computed, ref } from 'vue'; |
| | | import KpiCard from '../../components/kpi-card.vue'; |
| | | import PanelCard from '../../components/panel-card.vue'; |
| | | import { type RankMetric } from '../../data/screen'; |
| | | import { TIME_RANGE_OPTIONS, type RankMetric } 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(); |
| | | |
| | |
| | | { label: '碳减排', value: 'carbon' } |
| | | ]; |
| | | |
| | | const rangeLabel = computed( |
| | | () => TIME_RANGE_OPTIONS.find(e => e.value === timeRange.value)?.label || '本区间' |
| | | ); |
| | | |
| | | const kpis = computed(() => [ |
| | | { 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.newParticipants', label: `${rangeLabel.value}新增参与`, 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 } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 576px) { |
| | | .screen-page .flow__split { |
| | | grid-template-columns: 1fr; |
| | | } |
| | | } |
| | | </style> |