From c1829fe4aa1bcf2928433bb704e660c8aa908ab3 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Wed, 5 Mar 2025 18:36:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=99=BA=E8=81=AA=E8=AE=B0=E8=B4=A6?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=EF=BC=8C=E5=82=A8=E8=93=84=E5=8D=A1=E5=BC=80?=
 =?UTF-8?q?=E5=8D=A1=E7=BB=9F=E8=AE=A1=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/invest/statisticAnalysis.js           |  11 +-
 src/pages.json                                |   6 +
 .../accounts/openCardStatics/index.vue        | 461 ++++++++++++++++++
 src/pages/statistic/index.vue                 |   1 +
 4 files changed, 478 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/statistic/accounts/openCardStatics/index.vue

diff --git a/src/api/invest/statisticAnalysis.js b/src/api/invest/statisticAnalysis.js
index 3d02f20..d089ea1 100644
--- a/src/api/invest/statisticAnalysis.js
+++ b/src/api/invest/statisticAnalysis.js
@@ -98,7 +98,7 @@ export function getPosStatics(query) {
   })
 }
 
-// 查询记账账户列表
+// 查询睡眠账户列表
 export function listSleepAccounts(query) {
   return request({
     url: '/invest/analysis/sleepAccountsList',
@@ -106,3 +106,12 @@ export function listSleepAccounts(query) {
     params: query
   })
 }
+
+// 查询储蓄卡开卡统计数据
+export function getOpenCardList(query) {
+  return request({
+    url: '/invest/analysis/openCardList',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/pages.json b/src/pages.json
index 65d0d83..efcd9bb 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -179,6 +179,12 @@
       "style": {
         "navigationBarTitleText": "睡眠账户统计"
       }
+    },
+    {
+      "path": "pages/statistic/accounts/openCardStatics/index",
+      "style": {
+        "navigationBarTitleText": "储蓄卡开卡统计"
+      }
     }
     ,
     {
diff --git a/src/pages/statistic/accounts/openCardStatics/index.vue b/src/pages/statistic/accounts/openCardStatics/index.vue
new file mode 100644
index 0000000..a434e01
--- /dev/null
+++ b/src/pages/statistic/accounts/openCardStatics/index.vue
@@ -0,0 +1,461 @@
+<template>
+    <view class="container">
+        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+        <view class="search-view">
+          <u-input v-model="queryParams.time" border="false" type="select"   placeholder="" suffixIcon="calendar"
+          suffixIconStyle="color: #909399" class="search-input">  
+          </u-input>
+          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
+          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <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" style="overflow: auto">
+        
+    <div class="header-con" v-show ="accountsList.length>0" ref="searchHeightRef">
+      <div class="item"  v-show ="accountsList.length>0">
+        <img src="@/static/images/one.png" alt="" />
+        <div class="info-sum">
+          <div class="title">{{ getNameAndCounts(0).name  }}</div>
+          <div class="num">{{ getNameAndCounts(0).count }}<span>张</span></div>
+        </div>
+      </div>
+      <div class="item"  v-show ="accountsList.length>1">
+        <img src="@/static/images/ticketSum.png" alt="" />
+        <div class="info-sum">
+          <div class="title">{{  getNameAndCounts(1).name  }}</div>
+          <div class="num">{{  getNameAndCounts(1).count }}<span>张</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show ="accountsList.length>2" ref="searchHeightRef">
+      <div class="item"  v-show ="accountsList.length>2">
+        <img src="@/static/images/one.png" alt="" />
+        <div class="info-sum">
+          <div class="title">{{getNameAndCounts(2).name  }}</div>
+          <div class="num">{{ getNameAndCounts(2).count }}<span>张</span></div>
+        </div>
+      </div>
+      <div class="item"   v-show ="accountsList.length>3">
+        <img src="@/static/images/ticketSum.png" alt="" />
+        <div class="info-sum">
+          <div class="title">{{ getNameAndCounts(3).name  }}</div>
+          <div class="num">{{ getNameAndCounts(3).count }}<span>张</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" v-show ="accountsList.length>4" ref="searchHeightRef">
+      <div class="item" v-show ="accountsList.length>4">
+        <img src="@/static/images/one.png" alt="" />
+        <div class="info-sum">
+          <div class="title">{{ getNameAndCounts(4).name  }}</div>
+          <div class="num">{{ getNameAndCounts(4).count }}<span>张</span></div>
+        </div>
+      </div>
+    </div>
+    <div></div>
+  </div>
+  <div style="margin:8px" v-show="listData.length>0">
+    <button type="primary" style="margin-right:5px" size=mini>储蓄卡开卡统计</button>
+  </div>
+      <u-list  :spaceHeight="116" lowerThreshold="100">
+        <u-list-item v-for="(item, index) in listData" :key="index">
+          <view class="list-item">
+            <view class="item-header">
+              <u--text  lines="2" 
+                :text="item.time+' 开卡：'+item.value+' 张 '" size="30rpx" color="#333333" ></u--text>
+            </view>
+            <view class="item-row">
+            <text class="row-label">开卡明细：</text><br>
+            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
+          </view>
+          </view>
+        </u-list-item>
+        <view>
+        </view>
+      </u-list>
+    </view>
+    <!-- 悬停按钮返回工作台-->
+      <suspend></suspend>
+      <refresh></refresh>
+  </template>
+  
+  <script setup>
+  import { getOpenCardList } from '@/api/invest/statisticAnalysis'
+    import dayjs from 'dayjs'
+  import { timeHandler } from '@/utils/common.ts'
+  import {onLoad,onShow} from "@dcloudio/uni-app";
+      // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+  import {reactive ,toRefs,ref,computed }from "vue";
+  const pageNum = ref(1)
+  const listData = ref([])
+  const isShow = ref(false)
+  const accountsList = ref([])
+  const timeShow= ref(false)
+  const time =ref( Number(new Date()))
+  const  flag= ref(true)
+  const account = ref({
+    amount: '',
+  income: '',
+  expenses: '',
+  incomeCount: '',
+  expensesCount: '',
+  posExpensesCount: '',
+  posExpenses: '',
+  realExpenses: '',
+  realExpensesCount: '',
+  otherExpensesCount: '',
+  acccountsList: []
+})
+  const data = reactive({
+    filterPanel: false,
+    queryAccountParams: {
+    pageNum: 1,
+    state: '1',
+    pageSize: 100
+  },
+    queryParams: {
+    type: 2,
+    time: null,
+    id: null
+     } 
+  })
+
+  const { filterPanel, queryParams} = toRefs(data)
+  const windowHeight = computed(() => {
+              uni.getSystemInfoSync().windowHeight - 50
+          })	
+  onLoad(() => {
+      getList()
+    });
+  
+   onShow(() => {
+      if (isShow.value) {
+      listData.value=[]
+        getList()
+        isShow.value = false
+      }
+    });
+
+    function formatMultiLineData(data) {
+  if (data != null) {
+    return data.replace(/<br\/>/g, '\n')
+  }
+}
+
+function getNameAndCounts(i) {
+  
+  if (accountsList.value != null&&accountsList.value != '') 
+  { 
+    if(accountsList.value.length>i){
+      return accountsList.value[i]
+    }
+  }
+  else{
+    return {name:"",count:""}
+  }
+}
+
+function  openOrCloseDate(data) {
+      timeShow.value = !timeShow.value
+      flag.value = data
+    }
+    function confirm(e) {
+      const date = timeHandler(new Date(e.value), '-', ':')
+            let formatValue = 'YYYY-MM-DD'
+            dayjs(date).format(formatValue)
+      if (flag.value) {
+        queryParams.value.startTime =  dayjs(date).format(formatValue)
+      } else {
+        queryParams.value.endTime =  dayjs(date).format(formatValue)
+      }
+      timeShow.value = false
+    }
+function searchSubmit() {
+  queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime 
+      pageNum.value = 1
+      listData.value = []
+      getList()
+      filterPanel.value = false
+    }
+    function resetQuery() {
+        queryParams.value.id = ''
+        queryParams.value.type = '2'
+       queryParams.value.startTime = ''
+        queryParams.value.time = ''
+      queryParams.value.endTime =  ''
+    }
+  function getList() {
+    getOpenCardList({...queryParams.value }).then(res => {
+            account.value = { ...res.data }
+          listData.value = listData.value.concat(res.data.tableDebitList)
+          accountsList.value =  accountsList.value.concat(res.data.accountsList)
+        }).catch(() => {
+        })
+      }
+  </script>
+  
+  <style lang="scss" scoped>
+
+.app-container {
+  .header-con {
+    width: 100%;
+    height: 100px;
+    background-color: #ffffff;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      align-items: center;
+      margin: 5px 10px 5px 10px;
+      .title {
+        margin-left: 5px;
+        color: rgb(133, 133, 148);
+        margin-bottom: 5px;
+        font-size: 14px;
+      }
+      .num {
+        margin-left: 5px;
+        font-weight: bold;
+        font-size: 14px;
+      }
+    }
+    img {
+      height: 30px;
+      width: 30px;
+    }
+  }
+  .header-title {
+    width: 100%;
+    height: 30px;
+    background-color: #ffffff;
+    margin-bottom: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+  }
+}
+  .btnAdd {
+        width: 146rpx;
+        height: 56rpx;
+        line-height: 56rpx;
+        border-radius: 8rpx;
+        display:float;
+        text-align: center;
+      }
+  
+  .search-view {
+    padding: 12rpx 32rpx;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  
+    .search-input {
+      background: #F5F5F5;
+      color: #333333;
+      margin-right: 36rpx;
+    }
+  
+    .filter-panel {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 96rpx;
+      background-color: rgba(0, 0, 0, 0.5);
+  
+      .filter-panel-content {
+        background-color: #ffff;
+        padding: 0 30rpx 30rpx;
+  
+        .filter-title {
+          color: #000000;
+          font-size: 30rpx;
+          font-weight: 500;
+          padding: 30rpx 0;
+        }
+  
+        .state-list {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+  
+          .state-item {
+            width: 210rpx;
+            height: 72rpx;
+            border: 1rpx solid rgba(0, 0, 0, 0.25);
+            border-radius: 72rpx;
+            text-align: center;
+            line-height: 72rpx;
+            margin: 0 20rpx 20rpx 0;
+            font-size: 28rpx;
+            color: #000000;
+          }
+  
+          .active {
+            background-color: rgba(222, 241, 255, 1);
+            border: 1rpx solid rgba(22, 119, 255, 1);
+          }
+        }
+      }
+  
+      .btn-box {
+        display: flex;
+        padding: 24rpx 30rpx;
+        background-color: #fff;
+        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      }
+    }
+  }
+  
+  .list-item {
+    margin: 0 24rpx 24rpx;
+    padding: 32rpx;
+    background-color: #fff;
+  
+    .item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 16rpx;
+  
+      .status {
+        .status-item {
+          width: 120rpx;
+          height: 44rpx;
+          text-align: center;
+          line-height: 44rpx;
+          border-radius: 4rpx;
+          font-size: 24rpx;
+        }
+  
+        .status1 {
+          background: #F0F0F0;
+          color: #8C8C8C;
+        }
+  
+        .status2 {
+          background: rgba(38, 129, 255, 0.2);
+          color: #2681FF;
+        }
+  
+        .status3 {
+          background: #F7F7F7;
+          color: #2681FF;
+        }
+  
+        .status4 {
+          background: rgba(255, 85, 51, 0.2);
+          color: #FF5533;
+        }
+  
+        .status5 {
+          background: #F7F7F7;
+          color: rgba(0, 0, 0, 0.85);
+        }
+  
+        .status7 {
+          background: rgba(255, 129, 51, 0.2);
+          color: #FF8133;
+        }
+  
+        .status8 {
+          background: rgba(65, 217, 165, 0.2);
+          color: #41D9A5;
+        }
+      }
+    }
+  
+    .item-row {
+      padding: 16rpx 0;
+  
+      .row-label {
+        color: rgba(0, 0, 0, 0.55);
+      }
+  
+      .row-value {
+        color: rgba(0, 0, 0, 0.85)
+      }
+    }
+  
+    .operate {
+      display: flex;
+      justify-content: flex-end;
+  
+      .btn {
+        width: 146rpx;
+        height: 56rpx;
+        line-height: 56rpx;
+        border-radius: 8rpx;
+        margin-left: 5rpx;
+        text-align: center;
+      }
+  
+      .circulation {
+        background: rgba(0, 0, 0, 0.04);
+        margin-right: 24rpx;
+        color: rgba(0, 0, 0, 0.85);
+      }
+  
+      .filling {
+        background: #2681FF;
+        border-radius: 8rpx;
+        color: #FFFFFF;
+      }
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/pages/statistic/index.vue b/src/pages/statistic/index.vue
index 1bb0249..7279647 100644
--- a/src/pages/statistic/index.vue
+++ b/src/pages/statistic/index.vue
@@ -81,6 +81,7 @@
         { path: '/pages/statistic/accounts/debitCardAnalysis/index', text: '结算卡统计', icon: 'shop-filled' , permission: 'invest:debitCardAnalysis:list' },
         { path: '/pages/statistic/accounts/posStatics/index', text: 'POS机统计', icon: 'shop-filled' , permission: 'invest:posStatics:list' },
         { path: '/pages/statistic/accounts/sleepAccounts/index', text: '睡眠账户统计', icon: 'cloud-upload' , permission: 'invest:debitCard' },
+        { path: '/pages/statistic/accounts/openCardStatics/index', text: '储蓄卡开卡统计', icon: 'map' , permission: 'invest:debitCard' },
       ])
 
 	function navigateTo(path) {