大屏项目初始化

screen-vue/src/views/screen/Erp/components/ChartV10.vue

@@ -1,80 +1,53 @@
 <template>
   <div class="chart-card">
-    <el-carousel
+    <el-carousel height="100%" arrow="hover" trigger="click" :autoplay="false">
-      height="100%"
-      arrow="hover"
-	  trigger="click"
-    >
       <el-carousel-item>
         <div class="carousel-item-inner">
           <div class="chart-card-header">
-            <span class="chart-card-title">分类收入分析</span>
+            <span class="chart-card-title">账户收入分析</span>
+          </div>
+          <div class="table-container">
+            <div class="custom-loading" v-if="dataLoading">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span class="loading-text">加载中...</span>
             </div>
-          <div class="content-box">
             <el-table
-              :data="categoryIncomeData"
+              :data="incomeData"
               stripe
-              style="width: 100%; height: 100%"
+              empty-text="暂无账户收入数据"
-              empty-text="暂无分类收入数据"
+              :row-style="{ background: 'transparent' }"
-              :row-style="{
+              :cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-                background: 'transparent',
+              :header-row-style="{ background: 'transparent' }"
-                border: 'none'
+              :header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-              }"
-              :cell-style="{
-                border: 'none',
-                borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
-              }"
             >
-              <el-table-column prop="categoryName" label="分类名称" width="120" />
+              <el-table-column prop="xaxis" label="账户名称" width="120" show-overflow-tooltip />
-			  <el-table-column prop="index01" label="1月" width="65" />
+              <el-table-column v-for="m in 12" :key="`in-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
-			  <el-table-column prop="index01" label="2月" width="65" />
-			  <el-table-column prop="index01" label="3月" width="65" />
-			  <el-table-column prop="index01" label="4月" width="65" />
-			  <el-table-column prop="index01" label="5月" width="65" />
-			  <el-table-column prop="index01" label="6月" width="65" />
-			  <el-table-column prop="index01" label="7月" width="65" />
-			  <el-table-column prop="index01" label="8月" width="65" />
-			  <el-table-column prop="index01" label="9月" width="65" />
-			  <el-table-column prop="index01" label="10月" width="65" />
-			  <el-table-column prop="index01" label="11月" width="65" />
-			  <el-table-column prop="index01" label="12月" width="65" />
             </el-table>
           </div>
         </div>
       </el-carousel-item>
+
       <el-carousel-item>
         <div class="carousel-item-inner">
           <div class="chart-card-header">
-            <span class="chart-card-title">支出收入分析</span>
+            <span class="chart-card-title">账户支出分析</span>
+          </div>
+          <div class="table-container">
+            <div class="custom-loading" v-if="dataLoading">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span class="loading-text">加载中...</span>
             </div>
-          <div class="content-box">
             <el-table
-              :data="expenseIncomeData"
+              :data="expenseData"
               stripe
-              style="width: 100%; height: 100%"
+              empty-text="暂无账户支出数据"
-              empty-text="暂无收支分析数据"
+              :row-style="{ background: 'transparent' }"
-              :row-style="{
+              :cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-                background: 'transparent',
+              :header-row-style="{ background: 'transparent' }"
-                border: 'none'
+              :header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-              }"
-              :cell-style="{
-                border: 'none',
-                borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
-              }"
             >
-              <el-table-column prop="categoryName" label="分类名称" width="120" />
+              <el-table-column prop="xaxis" label="账户名称" width="120" show-overflow-tooltip />
-              <el-table-column prop="index01" label="1月" width="65" />
+              <el-table-column v-for="m in 12" :key="`ex-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
-              <el-table-column prop="index01" label="2月" width="65" />
-              <el-table-column prop="index01" label="3月" width="65" />
-              <el-table-column prop="index01" label="4月" width="65" />
-              <el-table-column prop="index01" label="5月" width="65" />
-              <el-table-column prop="index01" label="6月" width="65" />
-              <el-table-column prop="index01" label="7月" width="65" />
-              <el-table-column prop="index01" label="8月" width="65" />
-              <el-table-column prop="index01" label="9月" width="65" />
-              <el-table-column prop="index01" label="10月" width="65" />
-              <el-table-column prop="index01" label="11月" width="65" />
-              <el-table-column prop="index01" label="12月" width="65" />
             </el-table>
           </div>
         </div>
@@ -84,180 +57,47 @@
 </template>
 
 <script setup>
-import { ElCarousel, ElCarouselItem, ElTable, ElTableColumn, ElButton } from 'element-plus'
+import { ref, watch } from 'vue'
-import { ref } from 'vue'
+import { getItemInfoList } from '@/api/bizApi'
 
-const categoryIncomeData = ref([
+const props = defineProps({
-  {
+  formParams: {
-    categoryName: '产品销售',
+    type: Object,
-    amount: '285.60',
+    default: () => ({})
-    proportion: '68.5',
-    month: '2026-03',
-    lastMonthAmount: '268.40',
-    growthRate: '+6.4'
-  },
-  {
-    categoryName: '服务收入',
-    amount: '85.20',
-    proportion: '20.4',
-    month: '2026-03',
-    lastMonthAmount: '78.90',
-    growthRate: '+7.9'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
   }
-])
+})
 
-// 模拟支出收入分析数据
+const incomeData = ref([])
-const expenseIncomeData = ref([
+const expenseData = ref([])
-  {
+const dataLoading = ref(false)
-    month: '2026-01',
+
-    totalIncome: '428.50',
+async function getIncomeList() {
-    totalExpense: '298.60',
+  try {
-    netProfit: '129.90',
+    const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_ACCOUNT_Y001' })
-    profitMargin: '30.3'
+    incomeData.value = res || []
-  },
+  } catch (e) {
-  {
+    incomeData.value = []
-    month: '2026-02',
+    console.error('数据加载失败:', e)
-    totalIncome: '456.80',
-    totalExpense: '312.40',
-    netProfit: '144.40',
-    profitMargin: '31.6'
-  },
-  {
-    month: '2026-03',
-    totalIncome: '417.60',
-    totalExpense: '289.50',
-    netProfit: '128.10',
-    profitMargin: '30.7'
   }
-])
+}
+
+async function getExpenseList() {
+  try {
+    const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_ACCOUNT_Y002' })
+    expenseData.value = res || []
+  } catch (e) {
+    expenseData.value = []
+    console.error('数据加载失败:', e)
+  }
+}
+
+async function getList() {
+  dataLoading.value = true
+  await Promise.all([getIncomeList(), getExpenseList()])
+  dataLoading.value = false
+}
+
+watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
 </script>
 
 <style scoped>
@@ -265,8 +105,8 @@ const expenseIncomeData = ref([
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat !important;
-  background-size: 100% 100%;
+  background-size: 100% 100% !important;
 }
 
 .carousel-item-inner {
@@ -274,6 +114,7 @@ const expenseIncomeData = ref([
   height: 100%;
   display: flex;
   flex-direction: column;
+  background: transparent !important;
 }
 
 .chart-card-header {
@@ -293,83 +134,109 @@ const expenseIncomeData = ref([
   letter-spacing: 0.5px;
 }
 
-.content-box {
+.table-container {
   flex: 1;
   width: 100%;
   height: calc(100% - 40px);
   padding: 10px;
   overflow: auto;
-  background-size: 100% 100%;
+  background: transparent !important;
+  position: relative;
 }
 
-:deep(.el-carousel) {
+.custom-loading {
-  height: 100% !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.1) !important; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
 }
-:deep(.el-carousel__container) {
+
-  height: 100% !important;
+.loading-icon {
+  font-size: 24px;
+  color: #409EFF;
+  animation: loading-rotate 2s linear infinite;
+  margin-bottom: 8px;
 }
+
+.loading-text {
+  font-size: 14px;
+  color: #b4c7e7;
+}
+
+@keyframes loading-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+:deep(.el-carousel),
+:deep(.el-carousel__container),
 :deep(.el-carousel__item) {
-  background: transparent;
+  height: 100% !important;
-}
-
-:deep(.el-table) {
-  --el-table-text-color: #b4c7e7;
-  --el-table-header-text-color: #b4c7e7;
-  --el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2);
-  --el-table-border-color: transparent !important;
-  --el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1);
-  background-color: transparent !important;
-  border: none !important;
-}
-
-:deep(.el-table__header-wrapper),
-:deep(.el-table__header),
-:deep(.el-table__header tr),
-:deep(.el-table__header th) {
-  background-color: transparent !important;
   background: transparent !important;
 }
 
-:deep(.el-table__header th) {
+:deep(.el-table) {
+  --el-table-bg-color: transparent !important;
+  --el-table-text-color: #b4c7e7 !important;
+  --el-table-header-text-color: #b4c7e7 !important;
+  --el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2) !important;
+  --el-table-border-color: transparent !important;
+  --el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1) !important;
+  
+  background: transparent !important;
   border: none !important;
-  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
+  width: 100%;
-  color: #b4c7e7 !important;
+  height: 100%;
-  font-weight: 600; 
+  position: relative;
+  z-index: 1;
 }
 
-:deep(.el-table td) {
+:deep(.el-table *),
-  border: none !important;
+:deep(.el-table__inner-wrapper),
-  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
+:deep(.el-table__body-wrapper),
-  background-color: transparent !important;
+:deep(.el-table__header-wrapper),
-  color: #b4c7e7 !important;
+:deep(.el-table__body),
-}
+:deep(.el-table__header),
-
+:deep(.el-table__body tr),
-:deep(.el-table__row:hover > td) {
+:deep(.el-table__header tr) {
-  background-color: rgba(26, 80, 139, 0.2) !important;
+  background: transparent !important;
-  color: #b4c7e7 !important;
-}
-
-:deep(.el-table-empty-text) {
-  color: #b4c7e7 !important;
   background-color: transparent !important;
 }
 
-.content-box::-webkit-scrollbar {
+:deep(.el-table__header th),
+:deep(.el-table__body td) {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
+  color: #b4c7e7 !important;
+}
+
+:deep(.el-table__empty-block),
+:deep(.el-table__empty-text) {
+  background: transparent !important;
+  color: #b4c7e7 !important;
+}
+
+.table-container::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-.content-box::-webkit-scrollbar-thumb {
+.table-container::-webkit-scrollbar-thumb {
   background: rgba(26, 80, 139, 0.5);
   border-radius: 3px;
 }
-.content-box::-webkit-scrollbar-track {
+.table-container::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.1);
 }
-
-:deep(.el-button--text) {
-  color: #409EFF !important;
-}
-:deep(.el-button--text:hover) {
-  color: #66b1ff !important;
-}
 </style>

screen-vue/src/views/screen/Erp/components/ChartV11.vue

@@ -1,80 +1,53 @@
 <template>
   <div class="chart-card">
-    <el-carousel
+    <el-carousel height="100%" arrow="hover" trigger="click" :autoplay="false">
-      height="100%"
-      arrow="hover"
-	  trigger="click"
-    >
       <el-carousel-item>
         <div class="carousel-item-inner">
           <div class="chart-card-header">
             <span class="chart-card-title">分类收入分析</span>
           </div>
-          <div class="content-box">
+          <div class="table-container">
+            <div class="custom-loading" v-if="dataLoading">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span class="loading-text">加载中...</span>
+            </div>
             <el-table
-              :data="categoryIncomeData"
+              :data="incomeData"
               stripe
-              style="width: 100%; height: 100%"
               empty-text="暂无分类收入数据"
-              :row-style="{
+              :row-style="{ background: 'transparent' }"
-                background: 'transparent',
+              :cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-                border: 'none'
+              :header-row-style="{ background: 'transparent' }"
-              }"
+              :header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-              :cell-style="{
-                border: 'none',
-                borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
-              }"
             >
-              <el-table-column prop="categoryName" label="分类名称" width="120" />
+              <el-table-column prop="xaxis" label="分类名称" width="120" show-overflow-tooltip />
-			  <el-table-column prop="index01" label="1月" width="65" />
+              <el-table-column v-for="m in 12" :key="`in-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
-			  <el-table-column prop="index01" label="2月" width="65" />
-			  <el-table-column prop="index01" label="3月" width="65" />
-			  <el-table-column prop="index01" label="4月" width="65" />
-			  <el-table-column prop="index01" label="5月" width="65" />
-			  <el-table-column prop="index01" label="6月" width="65" />
-			  <el-table-column prop="index01" label="7月" width="65" />
-			  <el-table-column prop="index01" label="8月" width="65" />
-			  <el-table-column prop="index01" label="9月" width="65" />
-			  <el-table-column prop="index01" label="10月" width="65" />
-			  <el-table-column prop="index01" label="11月" width="65" />
-			  <el-table-column prop="index01" label="12月" width="65" />
             </el-table>
           </div>
         </div>
       </el-carousel-item>
+
       <el-carousel-item>
         <div class="carousel-item-inner">
           <div class="chart-card-header">
-            <span class="chart-card-title">支出收入分析</span>
+            <span class="chart-card-title">分类支出分析</span>
+          </div>
+          <div class="table-container">
+            <div class="custom-loading" v-if="dataLoading">
+              <el-icon class="loading-icon"><Loading /></el-icon>
+              <span class="loading-text">加载中...</span>
             </div>
-          <div class="content-box">
             <el-table
-              :data="expenseIncomeData"
+              :data="expenseData"
               stripe
-              style="width: 100%; height: 100%"
+              empty-text="暂无分类支出数据"
-              empty-text="暂无收支分析数据"
+              :row-style="{ background: 'transparent' }"
-              :row-style="{
+              :cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-                background: 'transparent',
+              :header-row-style="{ background: 'transparent' }"
-                border: 'none'
+              :header-cell-style="{ borderBottom: '1px solid rgba(26, 80, 139, 0.3)' }"
-              }"
-              :cell-style="{
-                border: 'none',
-                borderBottom: '1px solid rgba(26, 80, 139, 0.3)'
-              }"
             >
-              <el-table-column prop="categoryName" label="分类名称" width="120" />
+              <el-table-column prop="xaxis" label="分类名称" width="120" show-overflow-tooltip />
-              <el-table-column prop="index01" label="1月" width="65" />
+              <el-table-column v-for="m in 12" :key="`ex-${m}`" :prop="`index${String(m).padStart(2, '0')}`" :label="`${m}月`" />
-              <el-table-column prop="index01" label="2月" width="65" />
-              <el-table-column prop="index01" label="3月" width="65" />
-              <el-table-column prop="index01" label="4月" width="65" />
-              <el-table-column prop="index01" label="5月" width="65" />
-              <el-table-column prop="index01" label="6月" width="65" />
-              <el-table-column prop="index01" label="7月" width="65" />
-              <el-table-column prop="index01" label="8月" width="65" />
-              <el-table-column prop="index01" label="9月" width="65" />
-              <el-table-column prop="index01" label="10月" width="65" />
-              <el-table-column prop="index01" label="11月" width="65" />
-              <el-table-column prop="index01" label="12月" width="65" />
             </el-table>
           </div>
         </div>
@@ -84,180 +57,47 @@
 </template>
 
 <script setup>
-import { ElCarousel, ElCarouselItem, ElTable, ElTableColumn, ElButton } from 'element-plus'
+import { ref, watch } from 'vue'
-import { ref } from 'vue'
+import { getItemInfoList } from '@/api/bizApi'
 
-const categoryIncomeData = ref([
+const props = defineProps({
-  {
+  formParams: {
-    categoryName: '产品销售',
+    type: Object,
-    amount: '285.60',
+    default: () => ({})
-    proportion: '68.5',
-    month: '2026-03',
-    lastMonthAmount: '268.40',
-    growthRate: '+6.4'
-  },
-  {
-    categoryName: '服务收入',
-    amount: '85.20',
-    proportion: '20.4',
-    month: '2026-03',
-    lastMonthAmount: '78.90',
-    growthRate: '+7.9'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
-  },
-  {
-    categoryName: '其他收入',
-    amount: '46.80',
-    proportion: '11.1',
-    month: '2026-03',
-    lastMonthAmount: '42.50',
-    growthRate: '+10.1'
   }
-])
+})
 
-// 模拟支出收入分析数据
+const incomeData = ref([])
-const expenseIncomeData = ref([
+const expenseData = ref([])
-  {
+const dataLoading = ref(false)
-    month: '2026-01',
+
-    totalIncome: '428.50',
+async function getIncomeList() {
-    totalExpense: '298.60',
+  try {
-    netProfit: '129.90',
+    const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_CATE_Y001' })
-    profitMargin: '30.3'
+    incomeData.value = res || []
-  },
+  } catch (e) {
-  {
+    incomeData.value = []
-    month: '2026-02',
+    console.error('数据加载失败:', e)
-    totalIncome: '456.80',
-    totalExpense: '312.40',
-    netProfit: '144.40',
-    profitMargin: '31.6'
-  },
-  {
-    month: '2026-03',
-    totalIncome: '417.60',
-    totalExpense: '289.50',
-    netProfit: '128.10',
-    profitMargin: '30.7'
   }
-])
+}
+
+async function getExpenseList() {
+  try {
+    const res = await getItemInfoList({ ...props.formParams, itemCode: 'ERP_YEAR_CATE_Y002' })
+    expenseData.value = res || []
+  } catch (e) {
+    expenseData.value = []
+    console.error('数据加载失败:', e)
+  }
+}
+
+async function getList() {
+  dataLoading.value = true
+  await Promise.all([getIncomeList(), getExpenseList()])
+  dataLoading.value = false
+}
+
+watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
 </script>
 
 <style scoped>
@@ -265,8 +105,8 @@ const expenseIncomeData = ref([
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat !important;
-  background-size: 100% 100%;
+  background-size: 100% 100% !important;
 }
 
 .carousel-item-inner {
@@ -274,6 +114,7 @@ const expenseIncomeData = ref([
   height: 100%;
   display: flex;
   flex-direction: column;
+  background: transparent !important;
 }
 
 .chart-card-header {
@@ -293,83 +134,109 @@ const expenseIncomeData = ref([
   letter-spacing: 0.5px;
 }
 
-.content-box {
+.table-container {
   flex: 1;
   width: 100%;
   height: calc(100% - 40px);
   padding: 10px;
   overflow: auto;
-  background-size: 100% 100%;
+  background: transparent !important;
+  position: relative;
 }
 
-:deep(.el-carousel) {
+.custom-loading {
-  height: 100% !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.1) !important; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
 }
-:deep(.el-carousel__container) {
+
-  height: 100% !important;
+.loading-icon {
+  font-size: 24px;
+  color: #409EFF;
+  animation: loading-rotate 2s linear infinite;
+  margin-bottom: 8px;
 }
+
+.loading-text {
+  font-size: 14px;
+  color: #b4c7e7;
+}
+
+@keyframes loading-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+:deep(.el-carousel),
+:deep(.el-carousel__container),
 :deep(.el-carousel__item) {
-  background: transparent;
+  height: 100% !important;
-}
-
-:deep(.el-table) {
-  --el-table-text-color: #b4c7e7;
-  --el-table-header-text-color: #b4c7e7;
-  --el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2);
-  --el-table-border-color: transparent !important;
-  --el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1);
-  background-color: transparent !important;
-  border: none !important;
-}
-
-:deep(.el-table__header-wrapper),
-:deep(.el-table__header),
-:deep(.el-table__header tr),
-:deep(.el-table__header th) {
-  background-color: transparent !important;
   background: transparent !important;
 }
 
-:deep(.el-table__header th) {
+:deep(.el-table) {
+  --el-table-bg-color: transparent !important;
+  --el-table-text-color: #b4c7e7 !important;
+  --el-table-header-text-color: #b4c7e7 !important;
+  --el-table-row-hover-bg-color: rgba(26, 80, 139, 0.2) !important;
+  --el-table-border-color: transparent !important;
+  --el-table-stripe-row-bg-color: rgba(0, 0, 0, 0.1) !important;
+  
+  background: transparent !important;
   border: none !important;
-  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
+  width: 100%;
-  color: #b4c7e7 !important;
+  height: 100%;
-  font-weight: 600; 
+  position: relative;
+  z-index: 1;
 }
 
-:deep(.el-table td) {
+:deep(.el-table *),
-  border: none !important;
+:deep(.el-table__inner-wrapper),
-  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
+:deep(.el-table__body-wrapper),
-  background-color: transparent !important;
+:deep(.el-table__header-wrapper),
-  color: #b4c7e7 !important;
+:deep(.el-table__body),
-}
+:deep(.el-table__header),
-
+:deep(.el-table__body tr),
-:deep(.el-table__row:hover > td) {
+:deep(.el-table__header tr) {
-  background-color: rgba(26, 80, 139, 0.2) !important;
+  background: transparent !important;
-  color: #b4c7e7 !important;
-}
-
-:deep(.el-table-empty-text) {
-  color: #b4c7e7 !important;
   background-color: transparent !important;
 }
 
-.content-box::-webkit-scrollbar {
+:deep(.el-table__header th),
+:deep(.el-table__body td) {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 1px solid rgba(26, 80, 139, 0.3) !important;
+  color: #b4c7e7 !important;
+}
+
+:deep(.el-table__empty-block),
+:deep(.el-table__empty-text) {
+  background: transparent !important;
+  color: #b4c7e7 !important;
+}
+
+.table-container::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-.content-box::-webkit-scrollbar-thumb {
+.table-container::-webkit-scrollbar-thumb {
   background: rgba(26, 80, 139, 0.5);
   border-radius: 3px;
 }
-.content-box::-webkit-scrollbar-track {
+.table-container::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.1);
 }
-
-:deep(.el-button--text) {
-  color: #409EFF !important;
-}
-:deep(.el-button--text:hover) {
-  color: #66b1ff !important;
-}
 </style>

screen-vue/src/views/screen/Erp/components/detail/indexV01.vue

@@ -54,16 +54,20 @@
           <el-button type="default" @click="handleReset" class="reset-btn">重置</el-button>
         </el-form-item>
       </el-form>
-
+      <div class="table-container">
+        <div class="custom-loading" v-if="loading">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span class="loading-text">加载中...</span>
+        </div>
         <el-table
           :data="tableData"
           stripe
           style="width: 100%"
           empty-text="暂无相关交易数据"
           class="data-table"
-        v-loading="loading"
+          :header-row-style="{ background: 'transparent' }"
           :header-cell-style="{ 
-          background: 'rgba(10, 30, 60, 0.8)', 
+            background: 'transparent',
             color: '#a0cfff',
             border: 'none',
             borderBottom: '1px solid rgba(64, 158, 255, 0.3)'
@@ -90,7 +94,7 @@
 		  <el-table-column prop="remark" label="交易备注" />
           <el-table-column prop="transactionTime" label="交易时间" />
         </el-table>
-
+      </div>
       <div class="pagination-wrapper">
         <el-pagination
           v-model:current-page="currentPage"
@@ -176,11 +180,12 @@ async function getTranTypes(){
 }
 
 async function getList() {
+  loading.value = true;
   try {
 	  const reqParmas = {
 		  ... searchForm,
-		  pageNum: currentPage.value, // 当前页
+		  pageNum: currentPage.value, 
-		  pageSize: pageSize.value,   // 每页条数
+		  pageSize: pageSize.value,
 		  accountId: props.accountData.rawData?.accountId || '',
 	  }
 	  const res = await getErpTransactionFlowList(reqParmas);
@@ -189,6 +194,8 @@ async function getList() {
   } catch (error) {
     console.error('获取数据失败:', error);
 	tableData.value = [];
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -299,13 +306,56 @@ onMounted(async () => {
   gap: 10px;
 }
 
-.data-table {
+.table-container {
   flex: 1;
+  width: 100%;
   overflow: auto;
   position: relative;
   z-index: 10001;
 }
 
+.custom-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.1) !important; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.loading-icon {
+  font-size: 24px;
+  color: #409EFF;
+  animation: loading-rotate 2s linear infinite;
+  margin-bottom: 8px;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #b4c7e7;
+}
+
+@keyframes loading-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.data-table {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
 .pagination-wrapper {
   display: flex;
   justify-content: flex-end;
@@ -378,7 +428,7 @@ onMounted(async () => {
 :deep(.el-table th) {
   border: none !important;
   border-bottom: 1px solid rgba(64, 158, 255, 0.3) !important;
-  background-color: rgba(10, 30, 60, 0.8) !important;
+  background-color: transparent !important;
   color: #a0cfff !important;
 }
 :deep(.el-table td) {
@@ -430,36 +480,28 @@ onMounted(async () => {
 }
 
 :deep(.el-loading-mask) {
-  background-color: rgba(10, 30, 60, 0.8) !important;
+  display: none !important;
-  z-index: 10002;
-}
-:deep(.el-table__loading-wrapper) {
-  background-color: transparent !important;
-}
-:deep(.el-loading-spinner .path) {
-  stroke: #409EFF !important;
-}
-:deep(.el-loading-text) {
-  color: #a0cfff !important;
 }
 
 .detail-body::-webkit-scrollbar,
-:deep(.el-table__body-wrapper)::-webkit-scrollbar {
+:deep(.el-table__body-wrapper)::-webkit-scrollbar,
+.table-container::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-.detail-body::-webkit-scrollbar-track {
+.detail-body::-webkit-scrollbar-track,
+.table-container::-webkit-scrollbar-track {
   background: rgba(10, 30, 60, 0.1);
   border-radius: 3px;
 }
-.detail-body::-webkit-scrollbar-thumb {
+.detail-body::-webkit-scrollbar-thumb,
+.table-container::-webkit-scrollbar-thumb {
   background: rgba(64, 158, 255, 0.5);
   border-radius: 3px;
 }
 </style>
 
 <style>
-
 .theme-select-popper {
   background-color: rgba(10, 30, 60, 0.95) !important;
   border: 1px solid #409EFF !important;