From 623bcb248c90fb3d34c70b4bc6f604b12a8f50c9 Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Thu, 1 Jan 2026 21:45:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=BE=85=E5=8A=9E=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../erp/components/ChartBarAccount.vue        |   2 +-
 .../erp/components/ChartBarCycle.vue          |   2 +-
 .../erp/components/ChartLineExp.vue           |   2 +-
 .../erp/components/ChartLineInc.vue           |   2 +-
 .../erp/components/ChartLineRatio.vue         |   2 +-
 .../erp/components/ChartLineType.vue          |   2 +-
 .../dataReport/erp/components/ChartPie.vue    |   2 +-
 .../biz/views/biz/dataReport/erp/index.vue    | 156 ++++++++++--------
 8 files changed, 96 insertions(+), 74 deletions(-)

diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarAccount.vue b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarAccount.vue
index 7b9de070..cdcda54e 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarAccount.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarAccount.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card title="账户汇总" style="width: 100%; height: 400px; margin: 4px 0;">
+  <Card title="账户分析" style="width: 100%; height: 400px; margin: 4px 0;">
     <div ref="chartDom" style="width: 100%; height: 300px;"></div>
   </Card>
 </template>
diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarCycle.vue b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarCycle.vue
index b46ccb1b..1153ad00 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarCycle.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartBarCycle.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card title="周期汇总" style="width: 100%; height: 400px; margin: 4px 0;">
+  <Card title="周期分析" style="width: 100%; height: 400px; margin: 4px 0;">
     <div ref="chartDom" style="width: 100%; height: 300px;"></div>
   </Card>
 </template>
diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineExp.vue b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineExp.vue
index 5bd4561e..8fec38e8 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineExp.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineExp.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card title="支出汇总" style="width: 100%; height: 400px; margin: 4px 0;">
+  <Card title="支出分析" style="width: 100%; height: 400px; margin: 4px 0;">
     <div ref="chartDom" style="width: 100%; height: 300px;"></div>
   </Card>
 </template>
diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineInc.vue b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineInc.vue
index b202bd3a..5c34a6a8 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineInc.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineInc.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card title="收入汇总" style="width: 100%; height: 400px; margin: 4px 0;">
+  <Card title="收入分析" style="width: 100%; height: 400px; margin: 4px 0;">
     <div ref="chartDom" style="width: 100%; height: 300px;"></div>
   </Card>
 </template>
diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineRatio.vue b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineRatio.vue
index f146bc84..973b1df1 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineRatio.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineRatio.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card title="收支汇总" style="width: 100%; height: 400px; margin: 4px 0;">
+  <Card title="收支分析" style="width: 100%; height: 400px; margin: 4px 0;">
     <div ref="chartDom" style="width: 100%; height: 300px;"></div>
   </Card>
 </template>
diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineType.vue b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineType.vue
index b20ce7cf..f648c389 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineType.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLineType.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card title="用途汇总" style="width: 100%; height: 400px; margin: 4px 0;">
+  <Card title="用途分析" style="width: 100%; height: 400px; margin: 4px 0;">
     <div ref="chartDom" style="width: 100%; height: 300px;"></div>
   </Card>
 </template>
diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartPie.vue b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartPie.vue
index a024898f..cae7a45d 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartPie.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/components/ChartPie.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card title="账户占比" style="width: 100%; height: 400px; margin: 4px 0;">
+  <Card title="占比分析" style="width: 100%; height: 400px; margin: 4px 0;">
     <template #extra>
       <div class="total-amount">
         总金额：<span class="amount-value">{{ totalAmountText }}</span> 元
diff --git a/web-vue/packages/biz/views/biz/dataReport/erp/index.vue b/web-vue/packages/biz/views/biz/dataReport/erp/index.vue
index 018d692c..40deca68 100644
--- a/web-vue/packages/biz/views/biz/dataReport/erp/index.vue
+++ b/web-vue/packages/biz/views/biz/dataReport/erp/index.vue
@@ -3,6 +3,7 @@
     <div class="top-header-section">
       <div class="header-icon-wrapper">
         <img :src="headerImg" class="header-img" />
+        <span class="icon-text">财务可视化指标统计</span>
       </div>
       <BasicForm
         :labelWidth="100"
@@ -10,28 +11,32 @@
         class="search-form"
       />
     </div>
-    <div class="two-column-layout">
-      <ChartPie />
-      <ChartLineRatio :formParams="FormValues" />
+    <div class="chart-layout">
+      <div class="two-column-item">
+        <ChartPie />
+        <ChartLineRatio :formParams="FormValues" />
+      </div>
+      <div class="two-column-item">
+        <ChartBarAccount :formParams="FormValues" />
+		<ChartBarCycle :formParams="FormValues" />
+      </div>
+      <div class="two-column-item">
+        <ChartLineInc :formParams="FormValues" />
+		<ChartLineExp :formParams="FormValues" />
+      </div>
     </div>
-    <div class="two-column-layout">
-      <ChartBarCycle :formParams="FormValues" />
-      <ChartBarAccount :formParams="FormValues" />
-    </div>
-    <ChartLineType :formParams="FormValues" />
-    <div class="two-column-layout">
-      <ChartLineExp :formParams="FormValues" />
-      <ChartLineInc :formParams="FormValues" />
+    <div class="single-chart-item">
+      <ChartLineType :formParams="FormValues" />
     </div>
   </PageWrapper>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { Card } from 'ant-design-vue';
-import { Icon } from '@jeesite/core/components/Icon';
-import { BasicForm, FormSchema, FormProps } from '@jeesite/core/components/Form';
+import { ref } from 'vue';
+import { BasicForm, FormProps } from '@jeesite/core/components/Form';
 import { PageWrapper } from '@jeesite/core/components/Page';
+
+// 图表组件导入
 import ChartPie from './components/ChartPie.vue';
 import ChartLineExp from './components/ChartLineExp.vue';
 import ChartLineInc from './components/ChartLineInc.vue';
@@ -40,12 +45,15 @@ import ChartBarAccount from './components/ChartBarAccount.vue';
 import ChartLineType from './components/ChartLineType.vue';
 import ChartLineRatio from './components/ChartLineRatio.vue';
 
+// 静态资源
 import headerImg from '@jeesite/assets/images/bigview.png';
 
+// 表单数据
 const FormValues = ref<Record<string, any>>({
   cycleType: 'M'
 });
 
+// 表单配置
 const schemaForm: FormProps = {
   baseColProps: { md: 8, lg: 6 },
   labelWidth: 90,
@@ -72,114 +80,128 @@ const schemaForm: FormProps = {
 .dashboard-container {
   padding: 0 8px;
   min-height: 100vh;
+  box-sizing: border-box;
 }
 
+/* 顶部头部样式 */
 .top-header-section {
   display: flex;
-  justify-content: space-between; 
-  align-items: center; 
+  justify-content: space-between;
+  align-items: center;
   padding: 16px 20px;
   width: 100%;
   background-color: #e6f7ff;
-  border-radius: 8px; 
-  margin-bottom: 16px; 
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); 
+  border-radius: 8px;
+  margin-bottom: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
   border: 1px solid #bde5ff;
+  box-sizing: border-box;
 }
 
-/* 优化：图标容器样式 */
+/* 图标容器样式 */
 .header-icon-wrapper {
   display: flex;
   align-items: center;
-  gap: 8px; /* 图标与文本间距 */
+  gap: 8px;
   font-size: 16px;
   font-weight: 500;
   transition: all 0.2s ease;
 }
 
-/* 核心优化：限制图片尺寸 */
+/* 头部图片样式 */
 .header-img {
-  width: 60px;          /* 固定宽度 */
-  height: 30px;         /* 固定高度 */
-  object-fit: contain;  /* 保持图片比例，不拉伸 */
-  flex-shrink: 0;       /* 防止被压缩 */
-  border-radius: 4px;   /* 轻微圆角，更美观 */
-}
-
-/* 优化：图标核心样式 */
-.dashboard-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  transition: transform 0.2s ease, filter 0.2s ease;
-  background: transparent;
-}
-
-/* hover效果 */
-.header-icon-wrapper:hover .header-img {
-  transform: scale(1.05);
-  filter: brightness(1.1);
+  width: 60px;
+  height: 30px;
+  object-fit: contain;
+  flex-shrink: 0;
+  border-radius: 4px;
+  transition: all 0.2s ease;
 }
 
 /* 图标文本样式 */
 .icon-text {
   color: #1890ff;
-  margin-left: 4px;
-  white-space: nowrap;  /* 防止文本换行 */
+  white-space: nowrap;
 }
 
-/* 右侧表单样式 */
+/* 表单样式 */
 .search-form {
   width: 245px;
 }
 
-.two-column-layout {
+/* 图表布局容器 */
+.chart-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+/* 双列图表项 */
+.two-column-item {
   display: flex;
   gap: 12px;
   width: 100%;
-  padding: 0;
-  margin-bottom: 12px; /* 增加图表区域间距 */
 }
 
-.chart-line-wrapper {
+/* 单列图表项 */
+.single-chart-item {
   width: 100%;
-  margin-top: 0;
-  padding: 0;
+  margin-bottom: 12px;
 }
 
-/* 响应式适配优化 */
+/* 通用图表容器样式 - 强制子组件占满容器 */
+.two-column-item > *,
+.single-chart-item > * {
+  flex: 1;
+  min-width: 0; /* 解决flex子元素宽度溢出问题 */
+}
+
+/* 响应式适配 */
 @media (max-width: 768px) {
-  .two-column-layout {
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 8px;
-  }
-  
   .top-header-section {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
     padding: 12px 16px;
   }
-  
+
   .search-form {
     width: 100%;
   }
-  
-  /* 移动端图片适配 */
+
   .header-img {
-    width: 32px;
+    width: 42px;
     height: 32px;
   }
-  
+
   .header-icon-wrapper {
     font-size: 14px;
   }
+
+  .two-column-item {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .chart-layout {
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .single-chart-item {
+    margin-bottom: 8px;
+  }
 }
 
-/* 额外优化：防止图片溢出 */
-:deep(.header-img) {
+/* Hover效果 */
+.header-icon-wrapper:hover .header-img {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+/* 防止图片溢出 */
+.header-img {
   max-width: 100%;
   height: auto;
 }