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

src/layout/components/AppMain.vue

@@ -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;
 }
 

src/layout/index.vue

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

src/views/system/statistics/Payment/index.vue

@@ -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);
+      form.value.payZfb = Number.isNaN((payZfb / total) * 100) ? 0 : ((payZfb / total) * 100).toFixed(2);
-
+      const payTypeList = JSON.parse(JSON.stringify(paytypelist.value));
-      paytypelist.value[0].number = form.value.payOffline;
+      payTypeList[0].number = form.value.payWx;
-      paytypelist.value[1].number = form.value.payWx;
+      payTypeList[1].number = form.value.payZfb;
-      paytypelist.value[2].number = form.value.payZfb;
+      payTypeList[2].number = form.value.payOffline;
-      paytypelist.value.sort((a, b) => Number(b.number) - Number(a.number));
+      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[]) {
       }
     ];
   }
-
+  incomeChartOptions.value = statslist.map((item) => {
-  // 【修改点 2】映射生成多个独立的 ECharts 配置
-  incomeChartOptions.value = statslist.map((item, index) => {
     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%;

src/views/workbench/index2.vue

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