充值统计等

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
-    "@heroicons/vue": "^2.0.14",
+    "@heroicons/vue": "^2.0.18",
     "@tinymce/tinymce-vue": "^5.0.1",
     "@vueuse/core": "^9.12.0",
     "@wangeditor/editor": "^5.0.0",

src/components/admin/icons/index.vue

@@ -326,8 +326,6 @@ const constIcons = [
   'speaker-wave',
   'speaker-x-mark',
   'square-2-stack',
-  'square-3-stack-3d',
-  'squares-2x2',
   'squares-plus',
   'star',
   'stop-circle',

src/components/admin/table/search.vue

@@ -14,6 +14,7 @@
         <slot name="extra_button" />
       </el-form-item>
     </el-form>
+    <slot name="content" />
   </div>
 </template>
 

src/router/modules/charge.ts

@@ -1,28 +1,28 @@
-// import { RouteRecordRaw } from 'vue-router';
-// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// // @ts-ignore
-// const router: RouteRecordRaw[] = [
-//   {
-//     path: '/charge',
-//     component: () => import('@/layout/index.vue'),
-//     meta: { title: '数据统计', icon: 'user' },
-//     children: [
-//       {
-//         path: 'index',
-//         name: 'user-account11',
-//         meta: { title: '短剧统计', icon: 'home' },
-//         component: () =>
-//           import('@/views/dataStatistics/shortStatistical/index.vue')
-//       },
-//       {
-//         path: 'index1',
-//         name: 'user-account',
-//         meta: { title: '充值统计', icon: 'home' },
-//         component: () =>
-//           import('@/views/dataStatistics/rechargeStatistics/index.vue')
-//       }
-//     ]
-//   }
-// ];
+import { RouteRecordRaw } from 'vue-router';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const router: RouteRecordRaw[] = [
+  {
+    path: '/charge',
+    component: () => import('@/layout/index.vue'),
+    meta: { title: '数据统计', icon: 'user' },
+    children: [
+      {
+        path: 'index',
+        name: 'user-account11',
+        meta: { title: '短剧统计', icon: 'home' },
+        component: () =>
+          import('@/views/dataStatistics/shortStatistical/index.vue')
+      },
+      {
+        path: 'index1',
+        name: 'user-account',
+        meta: { title: '充值统计', icon: 'home' },
+        component: () =>
+          import('@/views/dataStatistics/rechargeStatistics/index.vue')
+      }
+    ]
+  }
+];
 
-// export default router;
+export default router;

src/utils/timerUtils.ts

@@ -0,0 +1,42 @@
+import { ref, onMounted, onUnmounted, Ref } from 'vue';
+
+export const useCountdownTimer = (
+  initialSeconds: number,
+  refreshCallback: () => void
+): { seconds: Ref<number> } => {
+  const seconds: Ref<number> = ref(initialSeconds);
+  let timerId: number;
+
+  const startTimer = (): void => {
+    timerId = setInterval(() => {
+      seconds.value--;
+
+      if (seconds.value === 0) {
+        clearInterval(timerId);
+        refreshCallback();
+        restartTimer();
+      }
+    }, 1000);
+  };
+
+  const stopTimer = (): void => {
+    clearInterval(timerId);
+  };
+
+  const restartTimer = (): void => {
+    seconds.value = initialSeconds;
+    startTimer();
+  };
+
+  onMounted(() => {
+    startTimer();
+  });
+
+  onUnmounted(() => {
+    stopTimer();
+  });
+
+  return {
+    seconds
+  };
+};

src/views/Permissions/permissions/form/create.vue

@@ -43,9 +43,9 @@
         </el-form-item>
         <el-form-item label="菜单Icon" prop="icon" v-if="!isAction">
           <!-- <el-input v-model="formData.icon" name="icon" clearable @click="open" /> -->
-          <el-popover placement="right" :width="500" trigger="click">
+          <el-popover :visible="visible" placement="right" :width="500" trigger="click">
             <template #reference>
-              <el-input v-model="formData.icon" name="icon" clearable />
+              <el-input v-model="formData.icon" name="icon" @click="open" clearable />
             </template>
             <div>
               <Icons v-model="formData.icon" @close="closeSelectIcon" />

src/views/dataStatistics/rechargeStatistics/excelTitle.ts

@@ -1,17 +1,133 @@
 // 导出中文/字段
 export const titleObj = {
-  商户名称: 'company_name',
-  商户ID: 'puser_id',
+  时间: 'day_at',
   优化师: 'username',
-  小程序: 'play_name',
-  用户ID: 'uid',
-  订单号: 'trade_no',
-  订单时间: 'created_at',
-  染色注册时间: 'ranse_created_at',
-  累计充值成功次数: 'total_count',
-  充值金额: 'price',
-  推广名称: 'promotion_title',
-  充值类型: 'tip_text',
-  支付方式: 'pay_name',
-  订单状态: 'status_txt'
-};
+  小程序名称: 'miniprogram_name',
+  充值金额: 'pay_money',
+  充值笔数: 'pay_count',
+  新增普通用户充值总额: 'new_user_common_pay_money',
+  新增会员用户充值总额: 'new_user_vip_pay_money',
+  普通充值总额: 'common_pay_money',
+  普通充值人均: 'common_pay_money_per',
+  普通充值已支付订单数: 'common_pay_count',
+  普通充值未支付订单数: 'common_unpay_count',
+  普通充值支付率: 'common_pay_rate',
+  会员充值总额: 'vip_pay_money',
+  会员充值人均: 'vip_pay_money_per',
+  会员充值已支付订单数: 'vip_pay_count',
+  会员充值未支付订单数: 'vip_unpay_count',
+  会员充值支付率: 'vip_pay_rate',
+};
+
+
+/**
+ * <el-table :data="tableData" class="mt-3" v-loading="loading">
+        <el-table-column prop="day_at" label="时间" />
+        <el-table-column prop="username" label="优化师" min-width="160px" />
+        <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
+        <el-table-column label="充值金额" prop="pay_money">
+          <template #header>
+            <div class="flex items-center">
+              <span>充值金额</span>
+              <el-tooltip placement="top">
+                <template #content>
+                  当日累计充值金额<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
+            <div class="wrapper">
+              <div>{{ scope.row.pay_money }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="充值笔数" prop="pay_count">
+          <template #header>
+            <div class="flex items-center">
+              <span>充值笔数</span>
+              <el-tooltip placement="top">
+                <template #content>
+                  当日累计充值笔数<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
+            <div class="wrapper">
+              <div>{{ scope.row.pay_count }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="新增用户充值总额" prop="new_user_pay_money">
+          <template #header>
+            <div class="flex items-center">
+              <span>新增用户充值总额</span>
+              <el-tooltip placement="top">
+                <template #content>
+                  当日新用户充值总额<br />
+                </template>
+                <el-icon>
+                  <InfoFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
+            <div class="wrapper">
+              <div>{{ scope.row.new_user_pay_money }}</div>
+              <div>普通：{{ scope.row.new_user_common_pay_money }}</div>
+              <div>会员：{{ scope.row.new_user_vip_pay_money }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="普通充值" min-width="250">
+          <el-table-column prop="common_pay_money" label="金额">
+            <template #default="scope">
+              <div class="wrapper">
+                <div>总额：{{ scope.row.common_pay_money }}</div>
+                <div>人均：{{ scope.row.common_pay_money }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付订单数" prop="common_pay_count">
+            <template #default="scope">
+              <div class="wrapper">
+                <div class="mb-2">
+                  <span class="mr-2">已：{{ scope.row.common_pay_count }}</span>
+                  <span>未：{{ scope.row.common_unpay_count }}</span>
+                </div>
+                <div>支付率：{{ scope.row.common_pay_rate }}</div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="会员充值" min-width="250">
+          <el-table-column prop="vip_pay_money" label="金额">
+            <template #default="scope">
+              <div class="wrapper">
+                <div>总额：{{ scope.row.vip_pay_money }}</div>
+                <div>人均：{{ scope.row.vip_pay_money_per }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付订单数" prop="vip_pay_count">
+            <template #default="scope">
+              <div class="wrapper">
+                <div class="mb-2">
+                  <span class="mr-2">已：{{ scope.row.vip_pay_count }}</span>
+                  <span>未：{{ scope.row.vip_unpay_count }}</span>
+                </div>
+                <div>支付率：{{ scope.row.vip_pay_rate }}</div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+ */

src/views/dataStatistics/rechargeStatistics/index.vue

@@ -1,185 +1,250 @@
 <template>
   <div>
-    <Search :search="search" :reset="resetQuery">
+    <!-- 统计 -->
+    <summaryStatistics></summaryStatistics>
+    <Search :search="moreSearch" :reset="moreReset">
       <template v-slot:body>
-        <el-form-item label="短剧名称" prop="trade_no">
-          <el-input v-model="query.trade_no" placeholder="请输入短剧名称" clearable />
-        </el-form-item>
         <el-form-item label="时间">
           <el-date-picker unlink-panels clearable @change="timeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
             v-model="query.time" type="daterange" :shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
             end-placeholder="结束时间" />
         </el-form-item>
+        <el-form-item label="优化师" prop="user_id" v-if="!rolesIdentify.includes('optimizer')">
+          <el-select v-model="query.user_id" filterable remote clearable
+            :remote-method="(query) => { remoteMethod(query, 'channelPromotionsUsers') }" placeholder="选择优化师">
+            <el-option v-for="item in promotionsUsersList" :key="item.user_id" :label="item.name" :value="item.user_id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="小程序" prop="miniprogram_id">
+          <el-select v-model="query.miniprogram_id" filterable remote
+            :remote-method="(query) => { remoteMethod(query, 'channelMiniprogram') }" clearable placeholder="选择小程序">
+            <el-option v-for="item in channelMiniprogram" :key="item.miniprogram_id" :label="item.name"
+              :value="item.miniprogram_id" />
+          </el-select>
+        </el-form-item>
       </template>
       <template v-slot:extra_button>
-        <exportExcel api="channel/order_list" sheet_name="订单列表" :title_obj="titleObj"
+        <exportExcel api="statistic/charge/list" sheet_name="充值统计" :title_obj="titleObj"
           :extro_params="{ is_export: true, ...query }">
         </exportExcel>
       </template>
-    </Search>
-    <div style="margin:8px 0;">
-      <el-card shadow="hover" :body-style="{ padding: '20px' }">
-        <div class="stat-wrapper">
-          <div>所选时间段内累计充值金额:
-            <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_total_coins || '暂无数据' }}</span>
-          </div>
-          <div>累计充值笔数:
-            <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_available_amount || '暂无数据' }}</span>
-          </div>
+      <template v-slot:content>
+        <div style="margin:8px 6px;" v-action="'statistic.chargeTJ.listTotalCharge'">
+          <el-card shadow="hover" :body-style="{ padding: '20px' }">
+            <div class="stat-wrapper">
+              <div>所选时间段内累计充值金额:
+                <span class="ml-2 mr-4 stat">{{ statisticalData.sum_pay_money || '暂无数据' }}</span>
+              </div>
+              <div>累计充值笔数:
+                <span class="ml-2 mr-4 stat">{{ statisticalData.sum_pay_count || '暂无数据' }}</span>
+              </div>
+            </div>
+          </el-card>
         </div>
-      </el-card>
-    </div>
-    <div class="table-default">
-      <el-table :data="tableData" class="mt-3" v-loading="loading">
-        <el-table-column prop="day_at" label="时间" />
-        <el-table-column prop="username" label="优化师" min-width="160px" />
-        <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
-        <el-table-column label="充值金额" prop="pay_money">
-          <template #header>
-            <div class="flex items-center">
-              <span>充值金额</span>
-              <el-tooltip placement="top">
-                <template #content>
-                  当日累计充值金额<br />
+        <div class="table-default" v-action="'statistic.chargeTJ.list'">
+          <el-table :data="tableData" class="mt-3" v-loading="loading">
+            <el-table-column prop="day_at" label="时间" />
+            <el-table-column prop="username" label="优化师" min-width="160px" />
+            <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
+            <el-table-column label="充值金额" prop="pay_money" min-width="160px">
+              <template #header>
+                <div class="flex items-center">
+                  <span>充值金额</span>
+                  <el-tooltip placement="top">
+                    <template #content>
+                      当日累计充值金额<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.pay_money }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="充值笔数" prop="pay_count" min-width="160px">
+              <template #header>
+                <div class="flex items-center">
+                  <span>充值笔数</span>
+                  <el-tooltip placement="top">
+                    <template #content>
+                      当日累计充值笔数<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.pay_count }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="新增用户充值总额" prop="new_user_pay_money" min-width="160px">
+              <template #header>
+                <div class="flex items-center">
+                  <span>新增用户充值总额</span>
+                  <el-tooltip placement="top">
+                    <template #content>
+                      当日新用户充值总额<br />
+                    </template>
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="wrapper">
+                  <div>{{ scope.row.new_user_pay_money }}</div>
+                  <div>普通：{{ scope.row.new_user_common_pay_money }}</div>
+                  <div>会员：{{ scope.row.new_user_vip_pay_money }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="普通充值" min-width="250">
+              <el-table-column prop="common_pay_money" label="金额" min-width="160px">
+                <template #default="scope">
+                  <div class="wrapper">
+                    <div>总额：{{ scope.row.common_pay_money }}</div>
+                    <div>人均：{{ scope.row.common_pay_money_per }}</div>
+                  </div>
                 </template>
-                <el-icon>
-                  <InfoFilled />
-                </el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-          <template #default="scope">
-            <div class="wrapper">
-              <div>{{ scope.row.pay_money }}</div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="充值笔数" prop="pay_count">
-          <template #header>
-            <div class="flex items-center">
-              <span>充值笔数</span>
-              <el-tooltip placement="top">
-                <template #content>
-                  当日累计充值笔数<br />
+              </el-table-column>
+              <el-table-column label="支付订单数" prop="common_pay_count" min-width="160px">
+                <template #default="scope">
+                  <div class="wrapper">
+                    <div class="mb-2">
+                      <span class="mr-2">已：{{ scope.row.common_pay_count }}</span>
+                      <span>未：{{ scope.row.common_unpay_count }}</span>
+                    </div>
+                    <div>支付率：{{ scope.row.common_pay_rate }}</div>
+                  </div>
                 </template>
-                <el-icon>
-                  <InfoFilled />
-                </el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-          <template #default="scope">
-            <div class="wrapper">
-              <div>{{ scope.row.pay_count }}</div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="新增用户充值总额" prop="new_user_pay_money">
-          <template #header>
-            <div class="flex items-center">
-              <span>新增用户充值总额</span>
-              <el-tooltip placement="top">
-                <template #content>
-                  当日新用户充值总额<br />
+              </el-table-column>
+            </el-table-column>
+            <el-table-column label="会员充值" min-width="250">
+              <el-table-column prop="vip_pay_money" label="金额" min-width="160px">
+                <template #default="scope">
+                  <div class="wrapper">
+                    <div>总额：{{ scope.row.vip_pay_money }}</div>
+                    <div>人均：{{ scope.row.vip_pay_money_per }}</div>
+                  </div>
                 </template>
-                <el-icon>
-                  <InfoFilled />
-                </el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-          <template #default="scope">
-            <div class="wrapper">
-              <div>{{ scope.row.new_user_pay_money }}</div>
-              <div>普通：{{ scope.row.new_user_common_pay_money }}</div>
-              <div>会员：{{ scope.row.new_user_vip_pay_money }}</div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="普通充值" min-width="250">
-          <el-table-column prop="common_pay_money" label="金额">
-            <template #default="scope">
-              <div class="wrapper">
-                <div>总额：{{ scope.row.common_pay_money }}</div>
-                <div>人均：{{ scope.row.common_pay_money }}</div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="支付订单数" prop="common_pay_count">
-            <template #default="scope">
-              <div class="wrapper">
-                <div class="mb-2">
-                  <span class="mr-2">已：{{ scope.row.common_pay_count }}</span>
-                  <span>未：{{ scope.row.common_unpay_count }}</span>
-                </div>
-                <div>支付率：{{ scope.row.common_pay_rate }}</div>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table-column>
-        <el-table-column label="会员充值" min-width="250">
-          <el-table-column prop="vip_pay_money" label="金额">
-            <template #default="scope">
-              <div class="wrapper">
-                <div>总额：{{ scope.row.vip_pay_money }}</div>
-                <div>人均：{{ scope.row.vip_pay_money_per }}</div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="支付订单数" prop="vip_pay_count">
-            <template #default="scope">
-              <div class="wrapper">
-                <div class="mb-2">
-                  <span class="mr-2">已：{{ scope.row.vip_pay_count }}</span>
-                  <span>未：{{ scope.row.vip_unpay_count }}</span>
-                </div>
-                <div>支付率：{{ scope.row.vip_pay_rate }}</div>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table-column>
-      </el-table>
-      <Paginate />
-    </div>
+              </el-table-column>
+              <el-table-column label="支付订单数" prop="vip_pay_count" min-width="160px">
+                <template #default="scope">
+                  <div class="wrapper">
+                    <div class="mb-2">
+                      <span class="mr-2">已：{{ scope.row.vip_pay_count }}</span>
+                      <span>未：{{ scope.row.vip_unpay_count }}</span>
+                    </div>
+                    <div>支付率：{{ scope.row.vip_pay_rate }}</div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table-column>
+          </el-table>
+          <Paginate />
+        </div>
+      </template>
+    </Search>
   </div>
 </template>
 
 <script lang="ts" setup>
+import summaryStatistics from './summaryStatistics.vue';
 import { shortcuts } from '@/utils/shortcuts'
 import { useRouter, useRoute } from 'vue-router'
 import { InfoFilled } from '@element-plus/icons-vue';
 import { useGetList } from '@/hook/curd/useGetList';
+import { statisticChargeListTotalCharge } from '@/api/dataStatistics/rechargeStatistics/index'
 import { titleObj } from "./excelTitle";
 import moment from 'moment';
-const start_date = moment().startOf('month').format('YYYY-MM-DD')
-const end_date = moment().endOf('month').format('YYYY-MM-DD')
+const start_date = moment().subtract(7, 'days').format('YYYY-MM-DD');
+const end_date = moment().format('YYYY-MM-DD');
 const statisticalData = ref({})
 const api = 'statistic/charge/list';
 const router = useRouter()
 const route = useRoute()
 const { data, query, search, reset, loading } = useGetList(api);
 const rolesIdentify = inject('rolesIdentify')
+import {
+  channelMiniprogramUseList,
+  channelPromotionsUsers,
+} from '@/api/orders/index'
+const channelMiniprogram = ref([])
+const promotionsUsersList = ref([])
+
+const remoteMethod = (query: string, type: string,) => {
+  console.log(query, 'queryquery', type);
+  switch (type) {
+    case 'channelPromotionsUsers':
+      initRemoteOption('channelPromotionsUsers', { name: query })
+      break;
+    case 'channelMiniprogram':
+      initRemoteOption('channelMiniprogram', { name: query })
+      break;
+  }
+}
+
+const initRemoteOption = (type: string, params?: object) => {
+  switch (type) {
+    case 'channelPromotionsUsers':
+      channelPromotionsUsers({ limit: 30, ...params }).then(res => {
+        promotionsUsersList.value = res.data
+      })
+      break;
+    case 'channelMiniprogram':
+      channelMiniprogramUseList({ limit: 30, ...params }).then(res => {
+        channelMiniprogram.value = res.data
+      })
+      break;
+  }
+}
+
 
 const timeChange = (e: object) => {
   console.log(e, 'timeChangetimeChangetimeChange');
   if (query.value.time) {
     const timeArr = toRaw(e);
-    query.value.created_at_start = timeArr[0]
-    query.value.created_at_end = timeArr[1]
+    query.value.start_at = timeArr[0]
+    query.value.end_at = timeArr[1]
   } else {
-    delete query.value.created_at_start
-    delete query.value.created_at_end
+    delete query.value.start_at
+    delete query.value.end_at
   }
 }
 
-const resetQuery = () => {
+const moreSearch = () => {
+  search();
+  statisticChargeListTotalCharge({ ...query.value }).then(res => {
+    statisticalData.value = res.data
+  })
+}
+
+const moreReset = () => {
   reset()
+  statisticChargeListTotalCharge({ ...query.value }).then(res => {
+    statisticalData.value = res.data
+  })
 }
 
 const tableData = computed(() => data.value?.data);
 
 onMounted(() => {
-  search();
+  initRemoteOption('channelPromotionsUsers')
+  initRemoteOption('channelMiniprogram')
+  query.value.time = [start_date, end_date];
+  query.value.start_at = start_date;
+  query.value.end_at = end_date;
+  moreSearch();
 });
 </script>
 

src/views/dataStatistics/rechargeStatistics/summary.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <div class="flex">
-      <el-card class="box-card">
-        <template #header>
-          <div class="flex items-center card-header">
-            <span>今日充值</span>
-            <el-tooltip placement="top">
-              <template #content>
-                当前推广链接的状态<br />
-                启用：当前推广ID已绑定回传配置<br />
-                禁用：当前推广ID未绑定回传配置
-              </template>
-              <el-icon>
-                <InfoFilled />
-              </el-icon>
-            </el-tooltip>
-          </div>
-        </template>
-        <div class="money-wrapper">￥890</div>
-        <div class="flex items-center justify-around">
-          <div>
-            <p class="text-lg font-bold">普通充值</p>
-            <div><span class="text-sm">已支付：</span><span class="text-base">25单</span></div>
-            <div><span class="text-sm">未支付：</span><span class="text-base">4单</span></div>
-            <div><span class="text-sm">支付率：</span><span class="text-base">83.33%</span></div>
-          </div>
-          <div>
-            <p class="text-lg font-bold">会员充值</p>
-            <div><span class="text-sm">已支付：</span><span class="text-base">25单</span></div>
-            <div><span class="text-sm">未支付：</span><span class="text-base">4单</span></div>
-            <div><span class="text-sm">支付率：</span><span class="text-base">83.33%</span></div>
-          </div>
-        </div>
-      </el-card>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useRouter, useRoute } from 'vue-router'
-import { InfoFilled } from '@element-plus/icons-vue';
-import { useGetList } from '@/hook/curd/useGetList';
-const statisticalData = ref({})
-const router = useRouter()
-const route = useRoute()
-const rolesIdentify = inject('rolesIdentify')
-
-onMounted(() => {
-  
-});
-</script>
-
-<style scoped lang="scss">
-.box-card {
-  width: 300px;
-  margin: 8px;
-
-  .money-wrapper {
-    height: 50px;
-    width: 100%;
-    color: #ed892c;
-    font-size: 26px;
-  }
-}
-</style>

src/views/dataStatistics/rechargeStatistics/summaryStatistics.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="flex w-full card-wrapper">
+    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.todayCharge'">
+      <template #header>
+        <div class="flex items-center justify-between card-header">
+          <div class="flex items-center">
+            <span>今日充值</span>
+            <el-tooltip placement="top">
+              <template #content>
+                截至当前时间，今日累计充值<br />
+              </template>
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+            </el-tooltip>
+          </div>
+          <p class="text-red-300">{{ timer.seconds }}s后刷新</p>
+        </div>
+      </template>
+      <div class="money-wrapper">￥{{ todayChargeData.pay_money || '-' }}</div>
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-lg font-bold">普通充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ todayChargeData.common_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ todayChargeData.common_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ todayChargeData.company_pay_rate || '-' }}</span>
+          </div>
+        </div>
+        <div>
+          <p class="text-lg font-bold">会员充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ todayChargeData.vip_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ todayChargeData.vip_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ todayChargeData.vip_pay_rate || '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.currentMonthCharge'">
+      <template #header>
+        <div class="flex items-center justify-between card-header">
+          <div class="flex items-center">
+            <span>本月充值</span>
+            <el-tooltip placement="top">
+              <template #content>
+                本月截至昨日的累计充值金额<br />
+              </template>
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+            </el-tooltip>
+            <span class="ml-2 text-red-300">(不包含当日)</span>
+          </div>
+        </div>
+      </template>
+      <div class="money-wrapper">￥{{ currentMonthChargeData.pay_money || '-' }}</div>
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-lg font-bold">普通充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ currentMonthChargeData.common_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ currentMonthChargeData.common_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ currentMonthChargeData.company_pay_rate || '-' }}</span>
+          </div>
+        </div>
+        <div>
+          <p class="text-lg font-bold">会员充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ currentMonthChargeData.vip_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ currentMonthChargeData.vip_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ currentMonthChargeData.vip_pay_rate || '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.lastMonthCharge'">
+      <template #header>
+        <div class="flex items-center justify-between card-header">
+          <div class="flex items-center">
+            <span>上月充值</span>
+            <el-tooltip placement="top">
+              <template #content>
+                上月的累计充值<br />
+              </template>
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </div>
+      </template>
+      <div class="money-wrapper">￥{{ lastMonthChargeData.pay_money || '-' }}</div>
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-lg font-bold">普通充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ lastMonthChargeData.common_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ lastMonthChargeData.common_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ lastMonthChargeData.company_pay_rate || '-' }}</span>
+          </div>
+        </div>
+        <div>
+          <p class="text-lg font-bold">会员充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ lastMonthChargeData.vip_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ lastMonthChargeData.vip_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ lastMonthChargeData.vip_pay_rate || '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card" shadow="hover" v-action="'statistic.chargeTJ.totalCharge'">
+      <template #header>
+        <div class="flex items-center justify-between card-header">
+          <div class="flex items-center">
+            <span>累计充值</span>
+            <el-tooltip placement="top">
+              <template #content>
+                昨日及之前的所有累计充值金额<br />
+              </template>
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+            </el-tooltip>
+            <span class="ml-2 text-red-300">(不包含当日)</span>
+          </div>
+        </div>
+      </template>
+      <div class="money-wrapper">￥{{ totalChargeData.pay_money || '-' }}</div>
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-lg font-bold">普通充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ totalChargeData.common_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ totalChargeData.common_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ totalChargeData.company_pay_rate || '-' }}</span>
+          </div>
+        </div>
+        <div>
+          <p class="text-lg font-bold">会员充值</p>
+          <div>
+            <span class="text-sm">已支付：</span>
+            <span class="text-base">{{ totalChargeData.vip_pay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">未支付：</span>
+            <span class="text-base">{{ totalChargeData.vip_unpay_count || '-' }}单</span>
+          </div>
+          <div>
+            <span class="text-sm">支付率：</span>
+            <span class="text-base">{{ totalChargeData.vip_pay_rate || '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { checkPermission } from '@/directives/permission';
+import { InfoFilled } from '@element-plus/icons-vue';
+import { useCountdownTimer } from '@/utils/timerUtils';
+import {
+  statisticChargeTodayCharge,
+  statisticChargeCurrentMonthCharge,
+  statisticChargeLastMonthCharge,
+  statisticChargeTotalCharge
+} from '@/api/dataStatistics/rechargeStatistics/index'
+
+const todayChargeData = ref({})
+const currentMonthChargeData = ref({})
+const lastMonthChargeData = ref({})
+const totalChargeData = ref({})
+const rolesIdentify = inject('rolesIdentify')
+const refreshInterface = (): void => {
+  initTodayCharge()
+};
+const timer = useCountdownTimer(60, refreshInterface);
+
+const initTodayCharge = () => {
+  if (!checkPermission('statistic.chargeTJ.todayCharge')) return;
+  statisticChargeTodayCharge().then(res => {
+    todayChargeData.value = res.data
+  })
+}
+const init = () => {
+  if (checkPermission('statistic.chargeTJ.currentMonthCharge')) {
+    statisticChargeCurrentMonthCharge().then(res => {
+      currentMonthChargeData.value = res.data;
+    })
+  }
+  if (checkPermission('statistic.chargeTJ.lastMonthCharge')) {
+    statisticChargeLastMonthCharge().then(res => {
+      currentMonthChargeData.value = res.data;
+    })
+  }
+  if (checkPermission('statistic.chargeTJ.totalCharge')) {
+    statisticChargeTotalCharge().then(res => {
+      currentMonthChargeData.value = res.data;
+    })
+  }
+}
+
+onMounted(() => {
+  init()
+  initTodayCharge()
+});
+
+</script>
+
+<style scoped lang="scss">
+.box-card {
+  width: 300px;
+  margin: 8px;
+
+  .money-wrapper {
+    height: 50px;
+    width: 100%;
+    color: #ed892c;
+    font-size: 26px;
+  }
+}
+
+.card-wrapper {
+  background-color: #ffffff;
+  margin-bottom: 8px;
+  padding: 16px;
+}
+</style>

src/views/dataStatistics/shortStatistical/index.vue

@@ -38,7 +38,7 @@
             <span>充值金额</span>
             <el-tooltip placement="top">
               <template #content>
-                当日短剧充值总额<br />
+                当日短剧充值总额，基于小程序统计<br />
               </template>
               <el-icon>
                 <InfoFilled />
@@ -56,7 +56,7 @@
             <span>充值次数</span>
             <el-tooltip placement="top">
               <template #content>
-                当日短剧充值总次数<br />
+                当日短剧充值总次数，基于小程序统计<br />
               </template>
               <el-icon>
                 <InfoFilled />
@@ -74,7 +74,7 @@
             <span>充值人数</span>
             <el-tooltip placement="top">
               <template #content>
-                当日累计充值人数<br />
+                当日累计充值人数，基于小程序统计<br />
               </template>
               <el-icon>
                 <InfoFilled />