admin-vben5/apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue

348 lines
7.9 KiB
Vue
Raw Normal View History

2025-06-26 18:02:43 +08:00
<script setup lang="ts">
2025-06-27 18:03:13 +08:00
import type { EchartsUIType } from '@vben/plugins/echarts';
import { onMounted, ref } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
2025-06-26 18:02:43 +08:00
import { Button } from 'ant-design-vue';
const orderLineRef = ref<EchartsUIType>();
const leasePieRef = ref<EchartsUIType>();
const customerTypesBarRef = ref<EchartsUIType>();
const customerRenewalLineRef = ref<EchartsUIType>();
const conservationTasksBarRef = ref<EchartsUIType>();
const maintenanceQualityScoresPeiRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(orderLineRef);
const { renderEcharts: renderLeasePie } = useEcharts(leasePieRef);
2025-06-27 18:03:13 +08:00
const { renderEcharts: renderCustomerTypesBar } =
useEcharts(customerTypesBarRef);
const { renderEcharts: renderCustomerRenewalLine } = useEcharts(
customerRenewalLineRef,
);
const { renderEcharts: renderConservationTasksBar } = useEcharts(
conservationTasksBarRef,
);
const { renderEcharts: renderMaintenanceQualityScoresPei } = useEcharts(
maintenanceQualityScoresPeiRef,
);
2025-06-26 18:02:43 +08:00
onMounted(() => {
renderEcharts({
title: { text: '订单数量趋势' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
boundaryGap: false,
},
yAxis: { type: 'value' },
series: [
{
name: '订单数',
type: 'line',
data: [120, 132, 101, 134, 90, 230],
smooth: true,
},
],
});
renderLeasePie({
title: { text: '租赁金额分布', left: 'center' },
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: 'left' },
series: [
{
name: '金额',
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
data: [
{ value: 1048, name: '办公楼' },
{ value: 735, name: '商场' },
{ value: 580, name: '酒店' },
{ value: 484, name: '医院' },
{ value: 300, name: '其他' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
label: {
formatter: '{b}: {c} ({d}%)',
show: true,
},
},
],
});
renderCustomerTypesBar({
title: { text: '客户类型分配' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
boundaryGap: false,
},
yAxis: { type: 'value' },
series: [
{
name: '订单数',
type: 'bar',
data: [120, 132, 101, 134, 90, 230],
},
],
});
renderCustomerRenewalLine({
2025-06-27 18:03:13 +08:00
title: { text: '客户续租率趋势' },
2025-06-26 18:02:43 +08:00
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
boundaryGap: false,
},
yAxis: { type: 'value' },
series: [
{
name: '订单数',
type: 'line',
data: [120, 132, 101, 134, 90, 230],
smooth: true,
},
],
});
renderConservationTasksBar({
2025-06-27 18:03:13 +08:00
title: { text: '养护任务完成情况' },
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
2025-06-26 18:02:43 +08:00
},
2025-06-27 18:03:13 +08:00
legend: {
data: ['计划任务数', '已完成数', '完成率'],
2025-06-26 18:02:43 +08:00
},
2025-06-27 18:03:13 +08:00
xAxis: [
{
type: 'category',
data: ['朝阳区', '海淀区', '西城区', '东城区'],
},
],
yAxis: [
{
type: 'value',
name: '任务数',
min: 0,
max: 200,
position: 'left',
},
{
type: 'value',
name: '完成率',
min: 0,
max: 100,
position: 'right',
axisLabel: {
formatter: '{value}%',
},
},
],
series: [
{
name: '计划任务数',
type: 'bar',
data: [156, 140, 130, 120],
},
{
name: '已完成数',
type: 'bar',
data: [152, 135, 125, 110],
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
data: [97.4, 96.4, 96.2, 91.7],
},
],
2025-06-26 18:02:43 +08:00
});
renderMaintenanceQualityScoresPei({
2025-06-27 18:03:13 +08:00
title: { text: '养护质量评分分布', left: 'center' },
tooltip: {
trigger: 'item',
formatter: '{b} : {d}%',
},
legend: {
orient: 'horizontal',
left: 'center',
bottom: 10,
data: ['一星', '两星', '三星', '四星', '五星'],
},
series: [
{
name: '评分',
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
data: [
{ value: 12.43, name: '一星' },
{ value: 12.26, name: '两星' },
{ value: 16.87, name: '三星' },
{ value: 25.75, name: '四星' },
{ value: 32.68, name: '五星' },
],
label: {
formatter: '{b} {d}%',
show: true,
},
},
],
});
2025-06-26 18:02:43 +08:00
});
</script>
2025-06-25 11:17:58 +08:00
<template>
2025-06-26 18:02:43 +08:00
<div class="main">
<div class="box">
2025-06-27 18:03:13 +08:00
<div class="title">
<div class="title-text">绿植租赁业务统计报表</div>
<div class="title-operate">
<div class="export">
<Button size="large" style="color: #fff; background-color: #22c55e">
导出数据
</Button>
</div>
</div>
</div>
<div class="content">
<div class="row"></div>
<div class="row-first">
<div class="item1">
<EchartsUI
ref="orderLineRef"
height="350px"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
<div class="item2">
<EchartsUI
ref="leasePieRef"
height="350px"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
</div>
<div class="row-second">
<div class="item1">
<EchartsUI
ref="customerTypesBarRef"
height="350px"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
<div class="item2">
<EchartsUI
ref="customerRenewalLineRef"
height="350px"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
</div>
<div class="row-third">
<EchartsUI
ref="conservationTasksBarRef"
height="100%"
width="100%"
style="background: #fff; border-radius: 8px"
/>
2025-06-26 18:02:43 +08:00
</div>
2025-06-27 18:03:13 +08:00
<div class="row-fouth">
<EchartsUI
ref="maintenanceQualityScoresPeiRef"
height="100%"
width="100%"
style="background: #fff; border-radius: 8px"
/>
2025-06-26 18:02:43 +08:00
</div>
2025-06-27 18:03:13 +08:00
</div>
2025-06-25 11:17:58 +08:00
</div>
2025-06-26 18:02:43 +08:00
</div>
</template>
<style lang="scss" scoped>
.main {
width: 100%;
2025-06-27 18:03:13 +08:00
.box {
2025-06-26 18:02:43 +08:00
height: 100%;
2025-06-27 18:03:13 +08:00
margin: 40px;
.title {
display: flex;
justify-content: space-between;
.title-text {
font-size: 25px;
font-weight: bold;
}
.title-operate {
2025-06-26 18:02:43 +08:00
display: flex;
2025-06-27 18:03:13 +08:00
.calendar {
2025-06-26 18:02:43 +08:00
}
2025-06-27 18:03:13 +08:00
.export {
margin-left: 20px;
2025-06-26 18:02:43 +08:00
}
2025-06-27 18:03:13 +08:00
}
2025-06-26 18:02:43 +08:00
}
2025-06-27 18:03:13 +08:00
.content {
flex: 1;
height: 100%;
padding: 10px;
background-color: #962020;
.row {
display: flex;
justify-content: space-between;
}
.row-first {
display: flex;
justify-content: space-between;
height: 400px;
}
.row-second {
display: flex;
justify-content: space-between;
height: 400px;
}
.row-third {
height: 400px;
margin-bottom: 50px;
}
.row-fouth {
height: 400px;
}
.item1 {
width: 45%;
2025-06-26 18:02:43 +08:00
height: 100%;
2025-06-27 18:03:13 +08:00
}
.item2 {
width: 50%;
height: 100%;
}
2025-06-26 18:02:43 +08:00
}
}
}
2025-06-27 18:03:13 +08:00
</style>