9/10

src/views/system/report/chargeTrend.vue

@@ -52,8 +52,13 @@
         </el-row>
       </template>
 
-      <el-table v-loading="loading" :data="chargeTrendList" border>
-        <el-table-column v-for="(item, index) in rows" :key="index" :label="item" align="center">
+      <el-table v-loading="loading" :data="chargeTrendList" border style="min-height: 80px">
+        <el-table-column align="center" fixed="left" label="月份">
+          <template #default>
+            <span>金额</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(item, index) in rows" :key="index" :label="item" align="center" min-width="100">
           <template #default="scope">
             <span>{{ scope.row[item] }}</span>
           </template>
@@ -66,7 +71,6 @@
     </el-card>
   </div>
 </template>
-账龄
 <script lang="ts" name="Arrears" setup>
 import pagination from '@/components/Pagination/index.vue';
 import pageHeader from '@/components/Pageheader/index.vue';
@@ -85,8 +89,13 @@ const total = ref(0);
 const queryFormRef = ref<ElFormInstance>();
 const queryTime = ref([]);
 function handleQueryTime(val: string[]) {
-  queryParams.value.startTime = val[0];
-  queryParams.value.endTime = val[1];
+  if (val && val.length > 0) {
+    queryParams.value.startTime = val[0];
+    queryParams.value.endTime = val[1];
+  } else {
+    queryParams.value.startTime = '';
+    queryParams.value.endTime = '';
+  }
 }
 const data = reactive({
   queryParams: {
@@ -145,9 +154,11 @@ const getList = async () => {
   getChargeTend(search)
     .then((res) => {
       const obj = {};
+      const length = res.data.length;
       res.data.forEach((item) => {
         const label = item.month.split('-')[1];
-        const key = `${label}月`;
+        // const key = `${label}月`;
+        const key = length > 12 ? `${item.month}月` : `${label}月`;
         rows.value.push(key);
         obj[key] = item.amount;
       });
@@ -219,6 +230,7 @@ const chartConfig = shallowRef<EChartsOption>({
 
 function handleChartsData() {
   const data = Object.entries(chargeTrendList.value[0]);
+  console.log(data);
   const x = data.map((item) => item[0]);
   const y = data.map((item) => item[1]);
   // 如果使用的是 ref，直接修改属性即可触发响应式