<template>
|
<div class="screen-page">
|
<div class="kpi-grid" style="--kpi-cols: 3">
|
<kpi-card v-for="item in kpis" :key="item.label" v-bind="item" />
|
</div>
|
|
<el-row :gutter="10" class="mid-row">
|
<el-col :lg="14" :xs="24">
|
<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="按可回收子类拆分" :demo="isDemoSection('recycleItems')">
|
<screen-drill-chart
|
class="chart"
|
type="pie"
|
:source="data.recycleItems"
|
metric="carbon"
|
unit="kgCO₂e"
|
name-suffix="回收"
|
legend
|
:center="['50%', '46%']"
|
:radius="['36%', '60%']"
|
/>
|
</panel-card>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="10">
|
<el-col :lg="16" :xs="24">
|
<panel-card title="本年度月度碳减排" sub="日表 carbonTotal 单位 kgCO₂e，展示时 ÷1000 为吨" :demo="isDemoSection('yearCarbon')">
|
<v-chart :option="yearOption" autoresize class="chart" />
|
</panel-card>
|
</el-col>
|
<el-col :lg="8" :xs="24">
|
<panel-card title="口径说明" sub="大屏只展示 KPI，不直接绑表">
|
<ul class="note">
|
<li>碳减排 = Σ 分类重量 × 碳减因数 × 方向</li>
|
<li>因数来自垃圾种类 carbonFactor</li>
|
<li>日表字段单位为 kgCO₂e，大屏吨数已除以 1000</li>
|
<li>本页给学校双碳、ESG、绿色教育汇报，不展示分拣点明细</li>
|
</ul>
|
</panel-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'report-screen-carbon'
|
});
|
|
import { computed } from 'vue';
|
import KpiCard from '../../components/kpi-card.vue';
|
import PanelCard from '../../components/panel-card.vue';
|
import { TIME_RANGE_OPTIONS } from '../../data/screen';
|
import ScreenDrillChart from '../../components/screen-drill-chart.vue';
|
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
|
|
const { data, timeRange } = useScreenData();
|
const { isDemoSection } = useScreenFieldSource();
|
const { mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();
|
|
const rangeLabel = computed(
|
() => TIME_RANGE_OPTIONS.find(e => e.value === timeRange.value)?.label || '本区间'
|
);
|
|
const kpis = computed(() => [
|
{ 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(() =>
|
timeRange.value === 'year' ? isDemoSection('yearCarbon') : isDemoSection('trend')
|
);
|
|
const trendOption = computed(() => {
|
const isYear = timeRange.value === 'year';
|
return {
|
grid: baseGrid(),
|
tooltip: { trigger: 'axis', ...tooltip() },
|
xAxis: {
|
type: 'category',
|
data: isYear ? Array.from({ length: 12 }, (_, i) => `${i + 1}月`) : data.value.axis,
|
...axisStyle()
|
},
|
yAxis: {
|
type: 'value',
|
name: 'tCO₂e',
|
nameTextStyle: { color: mutedColor.value },
|
splitLine: { lineStyle: { color: splitColor.value, type: 'dashed' } },
|
axisLabel: { color: mutedColor.value },
|
axisLine: { show: false },
|
axisTick: { show: false }
|
},
|
series: [
|
{
|
type: 'line',
|
smooth: true,
|
showSymbol: true,
|
symbolSize: 8,
|
data: isYear ? data.value.yearCarbon : data.value.trend.carbon.map(v => Number((v / 1000).toFixed(3))),
|
itemStyle: { color: primary.value },
|
areaStyle: { color: primary.value, opacity: 0.12 }
|
}
|
]
|
};
|
});
|
|
const yearOption = computed(() => ({
|
grid: baseGrid(),
|
tooltip: { trigger: 'axis', ...tooltip() },
|
xAxis: {
|
type: 'category',
|
data: Array.from({ length: 12 }, (_, i) => `${i + 1}月`),
|
...axisStyle()
|
},
|
yAxis: {
|
type: 'value',
|
name: 'tCO₂e',
|
nameTextStyle: { color: mutedColor.value },
|
splitLine: { lineStyle: { color: splitColor.value, type: 'dashed' } },
|
axisLabel: { color: mutedColor.value },
|
axisLine: { show: false },
|
axisTick: { show: false }
|
},
|
series: [
|
{
|
type: 'bar',
|
barWidth: 16,
|
data: data.value.yearCarbon,
|
itemStyle: { color: primary.value, borderRadius: [6, 6, 0, 0] }
|
}
|
]
|
}));
|
|
</script>
|
|
<style lang="scss" scoped>
|
@use '../../styles/screen-kpi' as *;
|
|
.screen-page {
|
.mid-row {
|
margin-bottom: 10px;
|
|
:deep(.panel-card) {
|
min-height: 360px;
|
}
|
}
|
|
.chart {
|
height: 300px;
|
width: 100%;
|
}
|
|
.note {
|
margin: 8px 12px 12px;
|
padding-left: 18px;
|
color: var(--el-text-color-regular);
|
line-height: 1.9;
|
font-size: 13px;
|
}
|
}
|
</style>
|
