feat: 保洁接口对接
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
This commit is contained in:
@@ -1,7 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { EchartsUI, useEcharts, type EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
const orderLineRef = ref<EchartsUIType>();
|
||||
const leasePieRef = ref<EchartsUIType>();
|
||||
@@ -12,10 +16,17 @@ const maintenanceQualityScoresPeiRef = ref<EchartsUIType>();
|
||||
|
||||
const { renderEcharts } = useEcharts(orderLineRef);
|
||||
const { renderEcharts: renderLeasePie } = useEcharts(leasePieRef);
|
||||
const {renderEcharts: renderCustomerTypesBar} = useEcharts(customerTypesBarRef);
|
||||
const {renderEcharts: renderCustomerRenewalLine} = useEcharts(customerRenewalLineRef);
|
||||
const {renderEcharts: renderConservationTasksBar} = useEcharts(conservationTasksBarRef);
|
||||
const {renderEcharts: renderMaintenanceQualityScoresPei} = useEcharts(maintenanceQualityScoresPeiRef);
|
||||
const { renderEcharts: renderCustomerTypesBar } =
|
||||
useEcharts(customerTypesBarRef);
|
||||
const { renderEcharts: renderCustomerRenewalLine } = useEcharts(
|
||||
customerRenewalLineRef,
|
||||
);
|
||||
const { renderEcharts: renderConservationTasksBar } = useEcharts(
|
||||
conservationTasksBarRef,
|
||||
);
|
||||
const { renderEcharts: renderMaintenanceQualityScoresPei } = useEcharts(
|
||||
maintenanceQualityScoresPeiRef,
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
renderEcharts({
|
||||
@@ -85,7 +96,7 @@ onMounted(() => {
|
||||
],
|
||||
});
|
||||
renderCustomerRenewalLine({
|
||||
title: { text: '客户续租率趋势' },
|
||||
title: { text: '客户续租率趋势' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -103,191 +114,234 @@ onMounted(() => {
|
||||
],
|
||||
});
|
||||
renderConservationTasksBar({
|
||||
title: { text: '养护任务完成情况' },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['计划任务数', '已完成数', '完成率']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['朝阳区', '海淀区', '西城区', '东城区']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '任务数',
|
||||
min: 0,
|
||||
max: 200,
|
||||
position: 'left'
|
||||
title: { text: '养护任务完成情况' },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '完成率',
|
||||
min: 0,
|
||||
max: 100,
|
||||
position: 'right',
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '计划任务数',
|
||||
type: 'bar',
|
||||
data: [156, 140, 130, 120]
|
||||
legend: {
|
||||
data: ['计划任务数', '已完成数', '完成率'],
|
||||
},
|
||||
{
|
||||
name: '已完成数',
|
||||
type: 'bar',
|
||||
data: [152, 135, 125, 110]
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [97.4, 96.4, 96.2, 91.7]
|
||||
}
|
||||
]
|
||||
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],
|
||||
},
|
||||
],
|
||||
});
|
||||
renderMaintenanceQualityScoresPei({
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="box">
|
||||
<div class="title">
|
||||
<div class="title-text">绿植租赁业务统计报表：</div>
|
||||
<div class="title-operate">
|
||||
<div class="export">
|
||||
<Button size="large" style="background-color: #22C55E; color: #fff;">导出数据</Button>
|
||||
</div>
|
||||
</div>
|
||||
<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 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;" />
|
||||
</div>
|
||||
<div class="row-fouth">
|
||||
<EchartsUI ref="maintenanceQualityScoresPeiRef" height="100%" width="100%" style="background:#fff;border-radius:8px;" />
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
<div class="row-fouth">
|
||||
<EchartsUI
|
||||
ref="maintenanceQualityScoresPeiRef"
|
||||
height="100%"
|
||||
width="100%"
|
||||
style="background: #fff; border-radius: 8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
.box{
|
||||
margin: 40px;
|
||||
|
||||
.box {
|
||||
height: 100%;
|
||||
.title{
|
||||
margin: 40px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-text {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title-operate {
|
||||
display: flex;
|
||||
|
||||
.calendar {
|
||||
}
|
||||
|
||||
.export {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
background-color: #962020;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title-text{
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.title-operate{
|
||||
display: flex;
|
||||
.calendar{
|
||||
}
|
||||
.export{
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
flex:1;
|
||||
padding: 10px;
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
.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%;
|
||||
height: 100%;
|
||||
.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%;
|
||||
height: 100%;
|
||||
}
|
||||
.item2{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user