<template>
|
<div class="screen-page">
|
<div class="kpi-grid" style="--kpi-cols: 5">
|
<kpi-card v-for="item in kpis" :key="item.label" v-bind="item" />
|
</div>
|
|
<el-row :gutter="10" class="mid-row">
|
<el-col :lg="10" :xs="24">
|
<panel-card title="可回收物品类占比" sub="同一时间范围，看结构" :demo="isDemoSection('recycleItems')">
|
<screen-drill-chart
|
class="chart"
|
type="pie"
|
:source="data.recycleItems"
|
metric="weight"
|
unit="kg"
|
legend
|
:center="['50%', '46%']"
|
:radius="['36%', '60%']"
|
label="{b} {d}%"
|
/>
|
</panel-card>
|
</el-col>
|
<el-col :lg="14" :xs="24">
|
<panel-card title="各类回收量" sub="横向柱状图更适合长品类名" :demo="isDemoSection('recycleItems')">
|
<screen-drill-chart
|
class="chart"
|
type="bar"
|
:source="data.recycleItems"
|
metric="weight"
|
unit="kg"
|
:even-split="false"
|
/>
|
</panel-card>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="10">
|
<el-col :span="24">
|
<panel-card title="回收价值分析" sub="学校最关心：什么垃圾最值钱" :demo="isDemoSection('recycleItems')">
|
<v-chart :option="valueOption" autoresize class="chart chart--value" />
|
</panel-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'report-screen-resource'
|
});
|
|
import { computed } from 'vue';
|
import KpiCard from '../../components/kpi-card.vue';
|
import PanelCard from '../../components/panel-card.vue';
|
import ScreenDrillChart from '../../components/screen-drill-chart.vue';
|
import { chartSeries } from '../../data/screen-chart';
|
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
|
|
const { data } = useScreenData();
|
const { isDemoSection } = useScreenFieldSource();
|
const { mutedColor, splitColor, primary, tooltip } = useChartTheme();
|
|
const kpis = computed(() => [
|
{ 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 valueRows = computed(() =>
|
chartSeries(data.value.recycleItems, e => e.value, { evenSplit: false })
|
);
|
|
const valueOption = computed(() => ({
|
grid: { containLabel: true, left: 16, right: 16, top: 28, bottom: 8 },
|
tooltip: { trigger: 'axis', ...tooltip() },
|
xAxis: {
|
type: 'category',
|
data: valueRows.value.map(e => e.item.name),
|
axisLabel: { color: mutedColor.value },
|
axisLine: { show: false },
|
axisTick: { show: false }
|
},
|
yAxis: {
|
type: 'value',
|
name: '元',
|
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: 28,
|
data: valueRows.value.map(e => e.value),
|
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%;
|
|
&--value {
|
height: 280px;
|
}
|
}
|
}
|
</style>
|
