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>
|