feat: 银行卡数量统计分析，编码。

src/api/invest/statisticAnalysis.js

@@ -115,3 +115,12 @@ export function getOpenCardList(query) {
     params: query
   })
 }
+
+// 查询按银行统计银行卡数量
+export function getBankCardStatistics(query) {
+  return request({
+    url: '/invest/analysis/bankCardStatistics',
+    method: 'get',
+    params: query
+  })
+}

src/pages.json

@@ -214,6 +214,14 @@
       }
     }
     ,
+    {
+      "path": "pages/statistic/accounts/bankCardStatistics/index",
+      "style": {
+        "navigationBarTitleText": "银行卡数量统计",
+        "disableScroll": true
+      }
+    }
+    ,
     {
       "path": "pages/statistic/accounts/accountDealAnalysis/index",
       "style": {

src/pages/statistic/accounts/bankCardStatistics/index.vue

@@ -0,0 +1,452 @@
+<template>
+  <view class="container">
+    <!-- 统计概览卡片 -->
+    <view class="statistics-overview">
+      <view class="overview-item">
+        <view class="icon-wrapper icon-blue">
+          <uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="card-info">
+          <text class="card-title">银行总数</text>
+          <text class="card-num">{{ totalStats.bankCount || 0 }}<text class="unit-text">行</text></text>
+        </view>
+      </view>
+      <view class="overview-item">
+        <view class="icon-wrapper icon-purple">
+          <uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="card-info">
+          <text class="card-title">卡片总数</text>
+          <text class="card-num">{{ totalStats.cardCount || 0 }}<text class="unit-text">卡</text></text>
+        </view>
+      </view>
+      <view class="overview-item">
+        <view class="icon-wrapper icon-pink">
+          <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="card-info">
+          <text class="card-title">信用卡总数</text>
+          <text class="card-num">{{ totalStats.creditCardBanksCount || 0 }}<text class="unit-text">行</text>{{ totalStats.creditCardCount || 0 }}<text class="unit-text">卡</text></text>
+        </view>
+      </view>
+      <view class="overview-item">
+        <view class="icon-wrapper icon-green">
+          <uni-icons type="paperplane" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="card-info">
+          <text class="card-title">储蓄卡总数</text>
+          <text class="card-num">{{ totalStats.debitCardBanksCount || 0 }}<text class="unit-text">行</text>{{ totalStats.debitCardCount || 0 }}<text class="unit-text">卡</text></text>
+        </view>
+      </view>
+      <view class="overview-item">
+        <view class="icon-wrapper icon-orange">
+          <uni-icons type="flag-filled" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="card-info">
+          <text class="card-title">I类储蓄卡总数</text>
+          <text class="card-num">{{ totalStats.debitTypeOneCount || 0 }}<text class="unit-text">卡</text></text>
+        </view>
+      </view>
+      <view class="overview-item">
+        <view class="icon-wrapper icon-teal">
+          <uni-icons type="flag" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <view class="card-info">
+          <text class="card-title">II类储蓄卡总数</text>
+          <text class="card-num">{{ totalStats.debitTypeTwoCount || 0 }}<text class="unit-text">卡</text></text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 银行列表 -->
+    <view class="section-title" v-if="bankList.length > 0">
+      <view class="title-decorator"></view>
+      <text class="title-text">银行卡数量统计</text>
+    </view>
+
+    <u-list v-if="bankList.length > 0" @scrolltolower="loadmore" :spaceHeight="720" lowerThreshold="100">
+      <u-list-item v-for="(item, index) in bankList" :key="index">
+        <view class="list-item">
+          <view class="item-header">
+            <view class="header-left">
+              <view class="card-badge">
+                <uni-icons type="wallet-filled" size="16" color="#ffffff"></uni-icons>
+                <text>{{ item.bankName }}</text>
+              </view>
+            </view>
+            <view class="header-right">
+              <text class="total-label">卡片总数：</text>
+              <text class="total-value">{{ (item.creditCardCount || 0) + (item.debitCardCount || 0) }}</text>
+            </view>
+          </view>
+          <view class="item-body">
+            <view class="item-row">
+              <text class="row-label">信用卡数量：</text>
+              <text class="row-value highlight-blue">{{ item.creditCardCount || 0 }}</text>
+            </view>
+            <view class="item-row">
+              <text class="row-label highlight-green">储蓄卡总数：</text>
+              <text class="row-value highlight-green">{{ item.debitCardCount || 0 }}</text>
+            </view>
+            <view class="item-row sub-item">
+              <text class="row-label">└ I类储蓄卡：</text>
+              <text class="row-value">{{ item.debitTypeOneCount || 0 }}</text>
+            </view>
+            <view class="item-row sub-item">
+              <text class="row-label">└ II类储蓄卡：</text>
+              <text class="row-value">{{ item.debitTypeTwoCount || 0 }}</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+    </u-list>
+
+    <!-- 空状态 -->
+    <view class="empty-state" v-if="bankList.length === 0 && !loading">
+      <uni-icons type="info" size="64" color="#c0c4cc"></uni-icons>
+      <text class="empty-text">暂无数据</text>
+    </view>
+
+    <!-- 悬停按钮返回统计分析-->
+    <statisticBtn></statisticBtn>
+  </view>
+</template>
+
+<script setup>
+import { getBankCardStatistics } from '@/api/invest/statisticAnalysis'
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref, computed } from "vue";
+
+const bankList = ref([])
+const loading = ref(false)
+
+// 总统计数据
+const totalStats = computed(() => {
+  if (!bankList.value || bankList.value.length === 0) {
+    return {
+      bankCount: 0,
+      cardCount: 0,
+      creditCardCount: 0,
+      debitCardCount: 0,
+      debitTypeOneCount: 0,
+      debitTypeTwoCount: 0,
+      creditCardBanksCount: 0,
+      debitCardBanksCount: 0
+    }
+  }
+
+  return bankList.value.reduce((acc, item) => {
+    acc.bankCount++
+    const creditCardCount = item.creditCardCount || 0
+    const debitCardCount = item.debitCardCount || 0
+    const debitTypeOneCount = item.debitTypeOneCount || 0
+    const debitTypeTwoCount = item.debitTypeTwoCount || 0
+
+    // 统计有信用卡的银行数量
+    if (creditCardCount > 0) {
+      acc.creditCardBanksCount++
+    }
+
+    // 统计有储蓄卡的银行数量
+    if (debitCardCount > 0) {
+      acc.debitCardBanksCount++
+    }
+
+    acc.creditCardCount += creditCardCount
+    acc.debitCardCount += debitCardCount
+    acc.debitTypeOneCount += debitTypeOneCount
+    acc.debitTypeTwoCount += debitTypeTwoCount
+    acc.cardCount += creditCardCount + debitCardCount
+
+    return acc
+  }, {
+    bankCount: 0,
+    cardCount: 0,
+    creditCardCount: 0,
+    debitCardCount: 0,
+    debitTypeOneCount: 0,
+    debitTypeTwoCount: 0,
+    creditCardBanksCount: 0,
+    debitCardBanksCount: 0
+  })
+})
+
+onLoad(() => {
+  getList()
+})
+
+onShow(() => {
+  // 页面显示时刷新数据
+})
+
+function getList() {
+  loading.value = true
+  getBankCardStatistics().then(res => {
+    bankList.value = res.data || []
+  }).catch(() => {
+    bankList.value = []
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+function loadmore() {
+  // 暂无分页需求，如有需要可扩展
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+  background-color: #f5f7fa;
+}
+
+.container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 40rpx;
+}
+
+// 统计概览
+.statistics-overview {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 16rpx 16rpx;
+  gap: 12rpx;
+
+  .overview-item {
+    width: calc(50% - 6rpx);
+    display: flex;
+    align-items: center;
+    padding: 24rpx 20rpx;
+    background: #ffffff;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+    border: 2rpx solid #e8edf3;
+    transition: all 0.3s ease;
+
+    &:active {
+      transform: scale(0.98);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+    }
+
+    .icon-wrapper {
+      width: 72rpx;
+      height: 72rpx;
+      border-radius: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
+      flex-shrink: 0;
+
+      // 图标背景渐变
+      &.icon-blue {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+
+      &.icon-purple {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+      }
+
+      &.icon-pink {
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+      }
+
+      &.icon-green {
+        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+      }
+
+      &.icon-orange {
+        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+      }
+
+      &.icon-teal {
+        background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
+      }
+    }
+
+    .card-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-width: 0;
+
+      .card-title {
+        color: #7f8c8d;
+        font-size: 22rpx;
+        line-height: 1.4;
+        margin-bottom: 8rpx;
+      }
+
+      .card-num {
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 1;
+        display: flex;
+        align-items: baseline;
+
+        .unit-text {
+          font-size: 20rpx;
+          font-weight: normal;
+          margin-left: 4rpx;
+          color: #95a5a6;
+        }
+      }
+    }
+  }
+}
+
+// 区块标题
+.section-title {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx 16rpx;
+  background-color: #f5f7fa;
+
+  .title-decorator {
+    width: 6rpx;
+    height: 32rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 3rpx;
+    margin-right: 12rpx;
+  }
+
+  .title-text {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #2c3e50;
+    line-height: 1;
+    flex: 1;
+  }
+}
+
+// 列表项
+.list-item {
+  margin: 0 24rpx 16rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+    .header-left {
+      flex: 1;
+
+      .card-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6rpx;
+        padding: 4rpx 12rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 12rpx;
+
+        text {
+          font-size: 24rpx;
+          color: #ffffff;
+          font-weight: 600;
+          line-height: 1;
+        }
+      }
+    }
+
+    .header-right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4rpx;
+
+      .total-label {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.85);
+        line-height: 1;
+      }
+
+      .total-value {
+        font-size: 28rpx;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1;
+      }
+    }
+  }
+
+  .item-body {
+    padding: 24rpx;
+  }
+
+  .item-row {
+    padding: 12rpx 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1rpx solid #f0f0f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .row-label {
+      color: #7f8c8d;
+      font-size: 26rpx;
+
+      &.highlight-green {
+        color: #059669;
+        font-weight: 600;
+      }
+    }
+
+    .row-value {
+      color: #2c3e50;
+      font-size: 26rpx;
+      font-weight: 600;
+
+      &.highlight-blue {
+        color: #667eea;
+      }
+
+      &.highlight-green {
+        color: #059669;
+      }
+    }
+
+    // 子项样式
+    &.sub-item {
+      padding-left: 24rpx;
+      .row-label {
+        color: #95a5a6;
+        font-size: 24rpx;
+      }
+      .row-value {
+        font-size: 24rpx;
+        font-weight: normal;
+      }
+    }
+  }
+}
+
+// 空状态
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 160rpx 0;
+
+  .empty-text {
+    margin-top: 24rpx;
+    font-size: 28rpx;
+    color: #c0c4cc;
+  }
+}
+</style>

src/pages/statistic/index.vue

@@ -83,6 +83,7 @@
         { path: '/pages/statistic/accounts/debitDealAnalysis/index', text: '储蓄账户统计', icon: 'paperplane', color: 'linear-gradient(135deg, #00b4db 0%, #0083b0 100%)', permission: 'invest:debitCard'  },
          { path: '/pages/statistic/accounts/sleepAccounts/index', text: '睡眠账户统计', icon: 'eye-slash-filled', color: 'linear-gradient(135deg, #636e72 0%, #2d3436 100%)', permission: 'invest:debitCard' },
         { path: '/pages/statistic/accounts/openCardStatics/index', text: '储蓄卡开卡统计', icon: 'gift-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'invest:debitCard' },
+        { path: '/pages/statistic/accounts/bankCardStatistics/index', text: '银行卡数量统计', icon: 'wallet-filled', color: 'linear-gradient(135deg, #00b4db 0%, #0083b0 100%)', permission: 'invest:bankCardStatistics:list' },
         { path: '/pages/statistic/accounts/dailyLiabilities/index', text: '每日净资产统计', icon: 'bars', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'invest:dailyLiabilities:list' },
         { path: '/pages/statistic/accounts/debitCardAnalysis/index', text: '结算卡统计', icon: 'star', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'invest:debitCardAnalysis:list' },
         { path: '/pages/statistic/accounts/posStatics/index', text: 'POS机统计', icon: 'navigate-filled', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'invest:posmachine:list' },