zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7/6 优化 1缴费分析中缴费来源的排序问题，2收入来源的图表渲染问题

Browse Source
This commit is contained in:
Zy
2026-07-06 09:12:44 +08:00
parent 54d467ede7
commit 3a808750ac
4 changed files with 54 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/layout/components/AppMain.vue
View File

@@ -1,6 +1,6 @@
<template>
<section class="app-main">
<div style="background-color: #f2f1f6; height: 100%">
<div style="background-color: #f2f1f6; height: 100%; overflow-y: auto; display: flex; flex-direction: column">
<router-view v-slot="{ Component, route }" :key="$route.fullPath">
<transition :enter-active-class="animate" mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews">
@@ -55,14 +55,10 @@ function addIframe() {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
// min-height: calc(100vh - 50px);
flex: 1;
width: 100%;
position: relative;
overflow: hidden;
overflow-y: auto;
background-color: #f2f1f6;
background-color: #dfedff;
}

1
src/layout/index.vue
View File

@@ -136,6 +136,7 @@ const setLayout = () => {
}
.main-container {
flex: 1;
background-color: #dfedff;
}
.drawer-bg {

50
src/views/system/statistics/Payment/index.vue
View File

@@ -30,7 +30,7 @@
class="chart-item flex flex-col items-center"
style="width: 165px; height: 100%"
>
<Echarts :options="opt.options as EChartsOption" style="width: 100%; height: 165px"></Echarts>
<Echarts :options="opt.options ?? []" style="width: 100%; height: 165px"></Echarts>
<!-- 如果需要额外显示名称，可以在这里加 div，但图表中心已显示 -->
<div class="chart-item-name">{{ opt.name }}</div>
</div>
@@ -63,7 +63,7 @@
<div style="height: 50px; margin-bottom: 20px">缴费来源</div>
<div class="flex flex-items-center justify-center">
<ul class="legendbox">
<li v-for="(item, index) in paytypelist" :key="index">
<li v-for="(item, index) in sortPayList" :key="index">
<i
:style="{
backgroundColor: item.color
@@ -73,7 +73,7 @@
</li>
</ul>
<ul class="circlebox">
<li :data-level="index" :style="{ backgroundColor: item.color }" v-for="(item, index) in paytypelist" :key="index">
<li :data-level="index" :style="{ backgroundColor: item.color }" v-for="(item, index) in sortPayList" :key="index">
{{ item.number }}%
</li>
</ul>
@@ -110,7 +110,7 @@ import Echarts from '@/components/Echarts/index.vue';
import { formatMoneyWithUnit } from '@/utils/money';
import { EChartsOption } from 'echarts';
import { getLast7Days, getPastDayDate } from '@/utils/time';
import { income_statsApi } from '@/api/system/Payment/index';
import { income_statsApi } from '@/api/system/Payment';
const open = ref(false);
const dataTime = ref('2025-01-01');
@@ -136,7 +136,8 @@ const incomeChartOptions = ref<
name: string;
options?: EChartsOption;
}[]
>([
>(
[
{
'name': '停车费'
},
@@ -152,7 +153,16 @@ const incomeChartOptions = ref<
{
'name': '维修费'
}
]);
].map((i) => {
return {
name: i.name,
options: {
tooltip: {},
series: []
}
};
})
);
/** 缴费方式 */
const options2 = shallowRef<EChartsOption>({
@@ -390,23 +400,24 @@ const paytypelist = ref([
{ label: '支付宝', value: 'payZfb', number: 0, color: '#1e1b39' },
{ label: '线下', value: 'payOffline', number: 0, color: '#c893fd' }
]);
// 排序后
const sortPayList = ref([]);
function getlist() {
function getList() {
const startData = getPastDayDate(defaultDay);
income_statsApi(dataTime.value === '' ? startData : dataTime.value).then((res) => {
form.value = res.data;
const { payOffline, payWx, payZfb, feeTypeStats, dailyStats } = res.data;
const total = (payOffline ?? 0) + (payWx ?? 0) + (payZfb ?? 0);
if (total > 0) {
form.value.payOffline = Number.isNaN((payOffline / total) * 100) ? 0 : ((payOffline / total) * 100).toFixed(2);
form.value.payWx = Number.isNaN((payWx / total) * 100) ? 0 : ((payWx / total) * 100).toFixed(2);
form.value.payZfb = Number.isNaN((payZfb / total) * 100) ? 0 : ((payWx / total) * 100).toFixed(2);
paytypelist.value[0].number = form.value.payOffline;
paytypelist.value[1].number = form.value.payWx;
paytypelist.value[2].number = form.value.payZfb;
paytypelist.value.sort((a, b) => Number(b.number) - Number(a.number));
form.value.payZfb = Number.isNaN((payZfb / total) * 100) ? 0 : ((payZfb / total) * 100).toFixed(2);
const payTypeList = JSON.parse(JSON.stringify(paytypelist.value));
payTypeList[0].number = form.value.payWx;
payTypeList[1].number = form.value.payZfb;
payTypeList[2].number = form.value.payOffline;
sortPayList.value = payTypeList.toSorted((a, b) => Number(b.number) - Number(a.number));
}
// 收入来源
@@ -501,9 +512,9 @@ function updateFlowLineChart(stats: any[]) {
* @param stats 后端返回的 feeTypeStats 数组
*/
function updateIncomeChart(stats: any[]) {
incomeChartOptions.value = [];
let statslist = stats;
if (statslist.length === 0) {
incomeChartOptions.value = [];
statslist = [
{
'feeName': '停车费'
@@ -522,9 +533,7 @@ function updateIncomeChart(stats: any[]) {
}
];
}
// 【修改点 2】映射生成多个独立的 ECharts 配置
incomeChartOptions.value = statslist.map((item, index) => {
incomeChartOptions.value = statslist.map((item) => {
const percentage = Number(item.paidPercentage) || 0;
const color = '#409eff';
return {
@@ -584,15 +593,15 @@ function updateIncomeChart(stats: any[]) {
console.log(incomeChartOptions.value);
}
function querySearch() {
getlist();
getList();
}
function reset() {
dataTime.value = '';
querySearch();
}
getList();
onMounted(() => {
open.value = true;
getlist();
});
onUnmounted(() => {
open.value = false;
@@ -685,7 +694,6 @@ onUnmounted(() => {
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
width: 20px;
height: 20px;
border-radius: 50%;

9
src/views/workbench/index2.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- 外层缩放容器 -->
<div class="scale-container h-full">
<div class="scale-container">
<div class="w-full h-full workBenchBox">
<el-row>
<el-col :span="18">
@@ -146,9 +146,16 @@ enum SideList {
</script>
<style scoped lang="scss">
.scale-container {
background-color: #eaf2ff;
height: 100%;
min-height: 0;
}
.workBenchBox {
padding: 20px;
background-color: #eaf2ff;
overflow-y: auto; /* 滚动放到这里 */
// tabs
.tabbox1 {
margin-left: 20px;