| | |
| | | <template> |
| | | <div class="screen-page"> |
| | | <div class="kpi-grid" style="--kpi-cols: 5"> |
| | | <div class="kpi-grid" style="--kpi-cols: 3"> |
| | | <kpi-card v-for="item in kpis" :key="item.label" v-bind="item" /> |
| | | </div> |
| | | |
| | |
| | | ); |
| | | |
| | | const kpis = computed(() => [ |
| | | { field: 'kpis.totalCarbonTon', label: '累计碳减排', value: data.value.kpis.totalCarbonTon, suffix: '吨CO₂e', fixed: 1 }, |
| | | { field: 'kpis.periodCarbonTon', label: `${rangeLabel.value}碳减排`, 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 } |
| | | { field: 'kpis.periodWeightTon', label: `${rangeLabel.value}资源回收`, value: data.value.kpis.periodWeightTon, suffix: '吨', fixed: 2, hint: '当前时间范围' }, |
| | | { field: 'kpis.newParticipants', label: `${rangeLabel.value}参与师生`, value: data.value.kpis.newParticipants, suffix: '人', fixed: 0, hint: '区间内出现过的去重用户' }, |
| | | { field: 'kpis.greenActions', label: `${rangeLabel.value}环保行为`, value: data.value.kpis.greenActions, suffix: '次', fixed: 0, hint: '区间内已完成订单数' } |
| | | ]); |
| | | |
| | | const carbonTrendDemo = computed(() => |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '吨CO₂e', |
| | | name: 'tCO₂e', |
| | | nameTextStyle: { color: mutedColor.value }, |
| | | splitLine: { lineStyle: { color: splitColor.value, type: 'dashed' } }, |
| | | axisLabel: { color: mutedColor.value }, |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '吨CO₂e', |
| | | name: 'tCO₂e', |
| | | nameTextStyle: { color: mutedColor.value }, |
| | | splitLine: { lineStyle: { color: splitColor.value, type: 'dashed' } }, |
| | | axisLabel: { color: mutedColor.value }, |