178 lines
7.3 KiB
Plaintext
178 lines
7.3 KiB
Plaintext
<template>
|
|
<view class="admin-statistic">
|
|
<!-- 核心指标卡片：累计数据 -->
|
|
<view class="stats-grid">
|
|
<view class="stat-card border-shadow" v-for="(item, key) in totalStats" :key="key">
|
|
<view class="stat-icon-box" :class="item.color">
|
|
<text class="stat-ic">{{ item.icon }}</text>
|
|
</view>
|
|
<view class="stat-info">
|
|
<text class="stat-val">{{ item.value }}</text>
|
|
<text class="stat-label">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 今日实时数据 -->
|
|
<view class="section-title mt-24">
|
|
<text class="title-txt">今日实时</text>
|
|
<text class="sub-txt">更新时间：{{ currentTime }}</text>
|
|
</view>
|
|
<view class="stats-grid-mini">
|
|
<view class="stat-mini-card border-shadow" v-for="(item, key) in todayStats" :key="key">
|
|
<text class="sm-label">{{ item.label }}</text>
|
|
<text class="sm-val">{{ item.value }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 待办任务提醒 -->
|
|
<view class="section-title mt-24">
|
|
<text class="title-txt">待办提醒</text>
|
|
</view>
|
|
<view class="pending-grid">
|
|
<view class="pending-card border-shadow" v-for="(item, key) in pendingStats" :key="key">
|
|
<view class="p-left">
|
|
<text class="p-label">{{ item.label }}</text>
|
|
<text class="p-count">{{ item.value }}</text>
|
|
</view>
|
|
<view class="p-right">
|
|
<text class="p-link" @click="handlePending(key)">去处理 ></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图表占位 -->
|
|
<view class="chart-section mt-24 border-shadow">
|
|
<view class="chart-header">
|
|
<text class="chart-title">销售趋势概览</text>
|
|
</view>
|
|
<view class="chart-body">
|
|
<text class="chart-placeholder-txt">趋势图表正在对接中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isLoading" class="global-loading">
|
|
<text class="loading-txt">数据聚合中...</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import supa from '@/components/supadb/aksupainstance.uts'
|
|
|
|
const isLoading = ref(false)
|
|
const currentTime = ref('')
|
|
|
|
const totalStats = ref({
|
|
sales: { label: '总销售额', value: '0.00', icon: '💰', color: 'blue' },
|
|
orders: { label: '总订单数', value: '0', icon: '📦', color: 'orange' },
|
|
users: { label: '总用户数', value: '0', icon: '👥', color: 'green' },
|
|
products: { label: '总商品数', value: '0', icon: '🛒', color: 'pink' }
|
|
})
|
|
|
|
const todayStats = ref({
|
|
sales: { label: '今日成交额', value: '0.00' },
|
|
orders: { label: '今日订单数', value: '0' },
|
|
new_users: { label: '今日新增用户', value: '0' }
|
|
})
|
|
|
|
const pendingStats = ref({
|
|
delivery: { label: '待发货订单', value: '0' },
|
|
stock: { label: '库存预警商品', value: '0' },
|
|
extract: { label: '待审核提现', value: '0' }
|
|
})
|
|
|
|
onMounted(() => {
|
|
updateTime()
|
|
loadStats()
|
|
})
|
|
|
|
function updateTime() {
|
|
const now = new Date()
|
|
currentTime.value = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`
|
|
}
|
|
|
|
async function loadStats() {
|
|
isLoading.value = true
|
|
try {
|
|
const { data, error } = await supa.rpc('rpc_admin_get_overall_stats', {} as any)
|
|
if (error == null && data != null) {
|
|
const res = data as UTSJSONObject
|
|
const totals = res.get('totals') as UTSJSONObject
|
|
const today = res.get('today') as UTSJSONObject
|
|
const pending = res.get('pending') as UTSJSONObject
|
|
|
|
totalStats.value.sales.value = (totals.getNumber('total_sales') ?? 0).toFixed(2)
|
|
totalStats.value.orders.value = (totals.getInt('total_orders') ?? 0).toString()
|
|
totalStats.value.users.value = (totals.getInt('total_users') ?? 0).toString()
|
|
totalStats.value.products.value = (totals.getInt('total_products') ?? 0).toString()
|
|
|
|
todayStats.value.sales.value = (today.getNumber('today_sales') ?? 0).toFixed(2)
|
|
todayStats.value.orders.value = (today.getInt('today_orders') ?? 0).toString()
|
|
todayStats.value.new_users.value = (today.getInt('today_new_users') ?? 0).toString()
|
|
|
|
pendingStats.value.delivery.value = (pending.getInt('pending_delivery') ?? 0).toString()
|
|
pendingStats.value.stock.value = (pending.getInt('stock_warning') ?? 0).toString()
|
|
pendingStats.value.extract.value = (pending.getInt('pending_extract') ?? 0).toString()
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to fetch stats', e)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function handlePending(type: string) {
|
|
uni.showToast({ title: '正在跳转: ' + type, icon: 'none' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-statistic { padding: 24px; background-color: #f0f2f5; min-height: 100vh; }
|
|
.border-shadow { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
|
|
|
|
.mt-24 { margin-top: 24px; }
|
|
|
|
/* 核心指标卡片 */
|
|
.stats-grid { display: flex; flex-direction: row; gap: 20px; }
|
|
.stat-card { flex: 1; display: flex; flex-direction: row; align-items: center; padding: 24px; }
|
|
.stat-icon-box { width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }
|
|
.stat-icon-box.blue { background-color: #e6f7ff; color: #1890ff; }
|
|
.stat-icon-box.orange { background-color: #fff7e6; color: #ffa940; }
|
|
.stat-icon-box.green { background-color: #f6ffed; color: #52c41a; }
|
|
.stat-icon-box.pink { background-color: #fff0f6; color: #eb2f96; }
|
|
.stat-ic { font-size: 24px; }
|
|
.stat-info { display: flex; flex-direction: column; }
|
|
.stat-val { font-size: 24px; font-weight: bold; color: #303133; }
|
|
.stat-label { font-size: 13px; color: #909399; margin-top: 4px; }
|
|
|
|
/* 标题 */
|
|
.section-title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 16px; }
|
|
.title-txt { font-size: 16px; font-weight: bold; color: #333; position: relative; padding-left: 12px; }
|
|
.title-txt::before { content: ''; position: absolute; left: 0; top: 2px; width: 4px; height: 16px; background-color: #1890ff; border-radius: 2px; }
|
|
.sub-txt { font-size: 12px; color: #999; }
|
|
|
|
/* 今日实时 */
|
|
.stats-grid-mini { display: flex; flex-direction: row; gap: 16px; }
|
|
.stat-mini-card { flex: 1; padding: 20px; display: flex; flex-direction: column; }
|
|
.sm-label { font-size: 13px; color: #666; margin-bottom: 8px; }
|
|
.sm-val { font-size: 20px; font-weight: bold; color: #1890ff; }
|
|
|
|
/* 待办提醒 */
|
|
.pending-grid { display: flex; flex-direction: row; gap: 16px; }
|
|
.pending-card { flex: 1; padding: 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
|
|
.p-label { font-size: 13px; color: #666; display: block; margin-bottom: 4px; }
|
|
.p-count { font-size: 22px; font-weight: bold; color: #f5222d; }
|
|
.p-link { font-size: 12px; color: #1890ff; cursor: pointer; }
|
|
|
|
/* 图表占位 */
|
|
.chart-section { padding: 24px; height: 350px; display: flex; flex-direction: column; }
|
|
.chart-title { font-size: 15px; font-weight: bold; color: #333; }
|
|
.chart-body { flex: 1; display: flex; align-items: center; justify-content: center; }
|
|
.chart-placeholder-txt { font-size: 14px; color: #ccc; }
|
|
|
|
.global-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.6); z-index: 100; display: flex; align-items: center; justify-content: center; }
|
|
.loading-txt { font-size: 14px; color: #1890ff; }
|
|
</style>
|