171 lines
4.0 KiB
Vue
171 lines
4.0 KiB
Vue
<script setup lang="ts">
|
||
import { EditOutlined } from '@ant-design/icons-vue';
|
||
import {EchartsUI, type EchartsUIType, useEcharts} from "@vben/plugins/echarts";
|
||
import {onMounted, ref} from "vue";
|
||
import {statisticsByTime} from "#/api/property/reportStatistics";
|
||
|
||
const orderLineRef = ref<EchartsUIType>();
|
||
const { renderEcharts } = useEcharts(orderLineRef);
|
||
const xAxisData = ref<any[]>([]);
|
||
const seriesData = ref<any[]>([]);
|
||
async function fetchOrderTrend() {
|
||
const res = await statisticsByTime({ timeUnit: 1 });
|
||
xAxisData.value = res?.time ?? [];
|
||
seriesData.value = res?.counts ?? [];
|
||
renderEcharts({
|
||
title: { text: '客户续租率趋势' },
|
||
tooltip: { trigger: 'axis' },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xAxisData.value,
|
||
boundaryGap: false,
|
||
},
|
||
yAxis: { type: 'value', axisLabel: { formatter: (value) => `${value * 100}%` } },
|
||
series: [
|
||
{
|
||
name: '订单趋势',
|
||
type: 'line',
|
||
data: seriesData.value || [],
|
||
smooth: true,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
onMounted(async () => {
|
||
await fetchOrderTrend();
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="panel">
|
||
|
||
<div class="bulletin-board">
|
||
<div class="bulletin-board-title">工单看板</div>
|
||
<div class="bulletin-board-content">
|
||
<div>
|
||
<div>
|
||
<div>工单总数：</div>
|
||
<div>56</div>
|
||
<div style="color: #1890FF">点击前往工单池</div>
|
||
</div>
|
||
<div class="icon-edit"><EditOutlined /></div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<div>待派工单数：</div>
|
||
<div>56</div>
|
||
<div style="color: #1890FF">点击前往工单待办</div>
|
||
</div>
|
||
<div class="icon-edit"><EditOutlined /></div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<div>未办结超时工单：</div>
|
||
<div>56</div>
|
||
<div>处理中的工单数：<span style="color: green">5</span></div>
|
||
</div>
|
||
<div class="icon-edit"><EditOutlined /></div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<div>当月工单超时率：</div>
|
||
<div>56</div>
|
||
<div>超时工单数：<span style="color: red">0</span></div>
|
||
</div>
|
||
<div class="icon-edit"><EditOutlined /></div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<div>当月满意度：</div>
|
||
<div>100%</div>
|
||
<div>满意度：5</div>
|
||
</div>
|
||
<div class="icon-edit"><EditOutlined /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart">
|
||
<div class="chart-one">
|
||
<div>
|
||
<EchartsUI
|
||
ref="orderLineRef"
|
||
height="350px"
|
||
width="100%"
|
||
style="background: #fff; border-radius: 8px"
|
||
/>
|
||
</div>
|
||
<div style="background-color: red"></div>
|
||
</div>
|
||
<div class="chart-two">
|
||
<div>
|
||
<EchartsUI
|
||
ref="orderLineRef"
|
||
height="350px"
|
||
width="100%"
|
||
style="background: #fff; border-radius: 8px"
|
||
/>
|
||
</div>
|
||
<div style="background-color: red"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.panel{
|
||
width: 100%;
|
||
padding: 40px;
|
||
box-sizing: border-box;
|
||
|
||
.bulletin-board{
|
||
|
||
.bulletin-board-title{
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
.bulletin-board-content{
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 40px;
|
||
|
||
> div{
|
||
height: auto;
|
||
background-color: #FFFFFF;
|
||
padding: 18px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
> div:first-child {
|
||
line-height: 32px;
|
||
|
||
div:nth-child(2) {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.icon-edit{
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.chart{
|
||
|
||
.chart-one{
|
||
margin-top:40px;
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 40px;
|
||
}
|
||
.chart-two{
|
||
margin-top:40px;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 40px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|