新增待办信息

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>

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>

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>

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>

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>

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>

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> 元

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">
+    <div class="chart-layout">
-      <ChartPie />
+      <div class="two-column-item">
-      <ChartLineRatio :formParams="FormValues" />
+        <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">
+    <div class="single-chart-item">
-      <ChartBarCycle :formParams="FormValues" />
+      <ChartLineType :formParams="FormValues" />
-      <ChartBarAccount :formParams="FormValues" />
-    </div>
-    <ChartLineType :formParams="FormValues" />
-    <div class="two-column-layout">
-      <ChartLineExp :formParams="FormValues" />
-      <ChartLineInc :formParams="FormValues" />
     </div>
   </PageWrapper>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref } from 'vue';
-import { Card } from 'ant-design-vue';
+import { BasicForm, FormProps } from '@jeesite/core/components/Form';
-import { Icon } from '@jeesite/core/components/Icon';
-import { BasicForm, FormSchema, 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,8 +80,10 @@ const schemaForm: FormProps = {
 .dashboard-container {
   padding: 0 8px;
   min-height: 100vh;
+  box-sizing: border-box;
 }
 
+/* 顶部头部样式 */
 .top-header-section {
   display: flex;
   justify-content: space-between;
@@ -85,77 +95,70 @@ const schemaForm: FormProps = {
   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;          /* 固定宽度 */
+  width: 60px;
-  height: 30px;         /* 固定高度 */
+  height: 30px;
-  object-fit: contain;  /* 保持图片比例，不拉伸 */
+  object-fit: contain;
-  flex-shrink: 0;       /* 防止被压缩 */
+  flex-shrink: 0;
-  border-radius: 4px;   /* 轻微圆角，更美观 */
+  border-radius: 4px;
-}
+  transition: all 0.2s ease;
-
-/* 优化：图标核心样式 */
-.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);
 }
 
 /* 图标文本样式 */
 .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;
+  margin-bottom: 12px;
-  padding: 0;
 }
 
-/* 响应式适配优化 */
+/* 通用图表容器样式 - 强制子组件占满容器 */
-@media (max-width: 768px) {
+.two-column-item > *,
-  .two-column-layout {
+.single-chart-item > * {
-    flex-direction: column;
+  flex: 1;
-    gap: 8px;
+  min-width: 0; /* 解决flex子元素宽度溢出问题 */
-    margin-bottom: 8px;
+}
-  }
 
+/* 响应式适配 */
+@media (max-width: 768px) {
   .top-header-section {
     flex-direction: column;
     align-items: flex-start;
@@ -167,19 +170,38 @@ const schemaForm: FormProps = {
     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;
+  }
 }
 
-/* 额外优化：防止图片溢出 */
+/* Hover效果 */
-:deep(.header-img) {
+.header-icon-wrapper:hover .header-img {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+/* 防止图片溢出 */
+.header-img {
   max-width: 100%;
   height: auto;
 }