fix: 统一优化统计分析界面，图标样式等！

2025-11-20 14:50:16 +08:00
parent 1ad3ce0a25
commit 73a5a75f30
56 changed files with 2228 additions and 1853 deletions
--- a/src/pages/statistic/bill/onlineLendAnalysis/index.vue
+++ b/src/pages/statistic/bill/onlineLendAnalysis/index.vue
@@ -1,15 +1,14 @@

 <template>
    <view class="container">
-      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      <u-sticky offsetTop="0rpx"
+ customNavHeight="0rpx">
         
         <view class="search-view">
          <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择贷款机构" suffixIcon="search"
          suffixIconStyle="color: #909399" class="search-input">
          </u-input>
       </view>
-       </u-sticky>
-        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
        <view class="search-view">
          <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
          suffixIconStyle="color: #909399" class="search-input">
@@ -18,56 +17,7 @@
            <uni-icons type="list" size="18" color="#667eea"></uni-icons>
            <text>筛选</text>
          </view>
-        <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
-             
-              <view class="select-header">还款日期</view>
-            <view class="selcet-content" style="padding: 0 24rpx">
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.startTime"
-                placeholder="请选择开始时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
-            </view>
-            <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
-            </view>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="date"
-              :minDate="-2209017600000"
-              @close="openOrCloseDate"
-              @cancel="openOrCloseDate"
-              @confirm="confirm"
-            ></u-datetime-picker>
-          </view>
-        </u-transition>
      </view>
-      </u-sticky>
        <div class="app-container">
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
@@ -149,8 +99,8 @@
        </div>
      </div>
    </div>
-    <div></div>
  </div>
+  
  <view class="section-title" v-show="listData.length>0">
    <view class="title-decorator"></view>
    <text class="title-text">贷款待还统计</text>
@@ -178,6 +128,56 @@
      </view>
    </view>
  </view>
+  </u-sticky>
+  
+  <u-transition :show="filterPanel" mode="fade">
+          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+            <view class="filter-panel-content">
+             
+              <view class="select-header">还款日期</view>
+            <view class="selcet-content" style="padding: 0 24rpx">
+              <u-input
+                :disabled="true"
+                :disabledColor="'#fff'"
+                class="dateInput"
+                border="surround"
+                v-model="queryParams.startTime"
+                placeholder="请选择开始时间"
+              >
+                <template v-slot:suffix>
+                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+                </template>
+              </u-input>
+              <u-input
+                :disabled="true"
+                :disabledColor="'#fff'"
+                class="dateInput"
+                border="surround"
+                v-model="queryParams.endTime"
+                placeholder="请选择结束时间"
+              >
+                <template v-slot:suffix>
+                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+                </template>
+              </u-input>
+            </view>
+            </view>
+            <view class="btn-box">
+              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+            </view>
+            <u-datetime-picker
+              :closeOnClickOverlay="true"
+              :show="timeShow"
+              v-model="time"
+              mode="date"
+              :minDate="-2209017600000"
+              @close="openOrCloseDate"
+              @cancel="openOrCloseDate"
+              @confirm="confirm"
+            ></u-datetime-picker>
+          </view>
+        </u-transition>
  
  <!-- 曲线图展示 -->
  <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -202,7 +202,7 @@
  </view>
  
  <!-- 列表展示 -->
-      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
+      <u-list :spaceHeight="700" lowerThreshold="100" v-show="viewMode === 'list'">
        <u-list-item v-for="(item, index) in listData" :key="index">
          <view class="list-item">
            <view class="item-header">
@@ -289,61 +289,70 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
  const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
  
  // 曲线图配置
-  const lineChartOpts = ref({
-    color: ['#667eea'],
-    padding: [20, 15, 35, 5],
-    enableScroll: false,
-    enableMarkLine: true,
-    dataLabel: false,
-    dataPointShape: true,
-    legend: {
-      show: false
-    },
-    xAxis: {
-      disableGrid: true,
-      boundaryGap: 'justify',
-      axisLine: false,
-      scrollShow: true,
-      itemCount: 5,
-      fontSize: 10,
-      fontColor: '#999999',
-      rotateLabel: true,
-      rotateAngle: 30
-    },
-    yAxis: {
-      gridType: 'dash',
-      dashLength: 4,
-      gridColor: '#EEEEEE',
-      splitNumber: 5,
-      fontSize: 10,
-      fontColor: '#999999',
-      format: (val) => {
-        if (val >= 10000) {
-          return (val / 10000).toFixed(1) + 'w'
-        }
-        return val.toFixed(0)
+  const lineChartOpts = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
+    return {
+      color: ['#667eea'],
+      padding: [20, 15, 35, 5],
+      enableScroll: false,
+      enableMarkLine: true,
+      dataLabel: false,
+      dataPointShape: true,
+      legend: {
+        show: false
      },
-      data: [
-        {
-          min: 0
+      xAxis: {
+        disableGrid: true,
+        boundaryGap: 'justify',
+        axisLine: false,
+        scrollShow: true,
+        itemCount: 5,
+        fontSize: showXAxisLabel ? 10 : 0,
+        fontColor: showXAxisLabel ? '#999999' : 'transparent',
+        rotateLabel: true,
+        rotateAngle: 30,
+        disabled: !showXAxisLabel
+      },
+      yAxis: {
+        gridType: 'dash',
+        dashLength: 4,
+        gridColor: '#EEEEEE',
+        splitNumber: 5,
+        fontSize: 10,
+        fontColor: '#999999',
+        format: (val) => {
+          if (val >= 10000) {
+            return (val / 10000).toFixed(1) + 'w'
+          }
+          return val.toFixed(0)
+        },
+        data: [
+          {
+            min: 0
+          }
+        ]
+      },
+      extra: {
+        line: {
+          type: 'curve',
+          width: 3,
+          activeType: 'hollow',
+          linearType: 'custom',
+          linearOpacity: 0.2,
+          onShadow: true,
+          animation: true
        }
-      ]
-    },
-    extra: {
-      line: {
-        type: 'curve',
-        width: 3,
-        activeType: 'hollow',
-        linearType: 'custom',
-        linearOpacity: 0.2,
-        onShadow: true,
-        animation: true
      }
    }
  })
  
  // 柱状图配置
  const columnChartOpts = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
    // 计算数据范围以动态设置Y轴
    let minValue = 0
    let maxValue = 0
@@ -366,7 +375,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
    
    return {
      color: ['#667eea'],
-      padding: [15, 15, 80, 15],
+      padding: [15, 15, 30, 5],
+
      enableScroll: false,
      dataLabel: false,
      legend: {
@@ -378,10 +388,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
        axisLine: false,
        scrollShow: true,
        itemCount: 5,
-        fontSize: 10,
-        fontColor: '#999999',
+        fontSize: showXAxisLabel ? 10 : 0,
+        fontColor: showXAxisLabel ? '#999999' : 'transparent',
        rotateLabel: true,
-        rotateAngle: 30
+        rotateAngle: 30,
+        disabled: !showXAxisLabel
      },
      yAxis: {
        gridType: 'dash',
@@ -562,7 +573,10 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
  </script>
  
  <style lang="scss" scoped>
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .app-container {
  background-color: #f5f7fa;
  padding: 0;
@@ -644,6 +658,7 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
  
  .section-title {
    display: flex;
+    margin-top: -10rpx;
    align-items: center;
    padding: 24rpx 32rpx 16rpx;
    background-color: #f5f7fa;
@@ -705,13 +720,13 @@ const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padS
  }
  
  .chart-container {
-    margin: 16rpx 24rpx 160rpx;
+    margin: 16rpx 24rpx 60rpx;
    padding: 16rpx;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    width: calc(100% - 48rpx);
-    height: 850rpx;
+    height: 650rpx;
    overflow: visible;
    position: relative;
  }