7/6 优化 1缴费分析中缴费来源的排序问题，2收入来源的图表渲染问题
This commit is contained in:
Zy
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -136,6 +136,7 @@ const setLayout = () => {
|
||||
}
|
||||
.main-container {
|
||||
flex: 1;
|
||||
background-color: #dfedff;
|
||||
}
|
||||
|
||||
.drawer-bg {
|
||||
|
||||
@@ -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,23 +136,33 @@ const incomeChartOptions = ref<
|
||||
name: string;
|
||||
options?: EChartsOption;
|
||||
}[]
|
||||
>([
|
||||
{
|
||||
'name': '停车费'
|
||||
},
|
||||
{
|
||||
'name': '物业费'
|
||||
},
|
||||
{
|
||||
'name': '水电费'
|
||||
},
|
||||
{
|
||||
'name': '商铺租金'
|
||||
},
|
||||
{
|
||||
'name': '维修费'
|
||||
}
|
||||
]);
|
||||
>(
|
||||
[
|
||||
{
|
||||
'name': '停车费'
|
||||
},
|
||||
{
|
||||
'name': '物业费'
|
||||
},
|
||||
{
|
||||
'name': '水电费'
|
||||
},
|
||||
{
|
||||
'name': '商铺租金'
|
||||
},
|
||||
{
|
||||
'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%;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user