504 lines
12 KiB
Plaintext
504 lines
12 KiB
Plaintext
<template>
|
|
<view class="statistic-page">
|
|
<!-- 筛选栏 -->
|
|
<view class="filter-card">
|
|
<view class="filter-item">
|
|
<text class="filter-label">用户渠道：</text>
|
|
<view class="select-box">
|
|
<text class="select-text">全部</text>
|
|
<text class="select-arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filter-item">
|
|
<text class="filter-label">选择月份：</text>
|
|
<AnalyticsDateRangePicker
|
|
:initialStartDate="startDate"
|
|
:initialEndDate="endDate"
|
|
@apply="onDateRangeApply"
|
|
@clear="onDateRangeClear"
|
|
/>
|
|
</view>
|
|
|
|
<view class="filter-btns">
|
|
<button class="btn primary" @click="onSearch">查询</button>
|
|
<button class="btn" @click="onExport">导出</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户概况卡片区 -->
|
|
<view class="section-card">
|
|
<view class="section-header">
|
|
<text class="section-title">用户概况</text>
|
|
<text class="info-icon">ⓘ</text>
|
|
</view>
|
|
|
|
<view class="kpi-row">
|
|
<view class="kpi-card" v-for="item in kpiData" :key="item.title">
|
|
<view class="kpi-icon-box" :style="{ backgroundColor: item.bg }">
|
|
<text class="kpi-icon">{{ item.icon }}</text>
|
|
</view>
|
|
<view class="kpi-content">
|
|
<text class="kpi-label">{{ item.title }}</text>
|
|
<text class="kpi-value">{{ item.value }}</text>
|
|
<view class="kpi-meta">
|
|
<text class="meta-label">环比增长：</text>
|
|
<text class="meta-value" :class="item.trend">{{ item.percent }} {{ item.trend === 'up' ? '▲' : '▼' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图表区 -->
|
|
<view class="chart-container">
|
|
<view class="chart-header">
|
|
<view class="header-left"></view>
|
|
<view class="header-right">
|
|
<text class="download-icon">📥</text>
|
|
</view>
|
|
</view>
|
|
<AnalyticsMultiLineChart
|
|
:xLabels="chartData.x"
|
|
:series="chartData.series"
|
|
:height="450"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 地域分布与性别比例 -->
|
|
<view class="analysis-row">
|
|
<view class="map-col">
|
|
<AnalyticsUserMapTable />
|
|
</view>
|
|
<view class="gender-col">
|
|
<AnalyticsUserGenderSection :startDate="startDate" :endDate="endDate" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import AnalyticsMultiLineChart from '@/components/analytics/AnalyticsMultiLineChart.uvue'
|
|
import AnalyticsUserMapTable from '@/components/analytics/AnalyticsUserMapTable.uvue'
|
|
import AnalyticsUserGenderSection from '@/components/analytics/AnalyticsUserGenderSection.uvue'
|
|
import AnalyticsDateRangePicker from '@/components/analytics/AnalyticsDateRangePicker.uvue'
|
|
import supa, { ensureSupabaseReady } from '@/components/supadb/aksupainstance.uts'
|
|
import { ensureAnalyticsLogin } from '@/services/analytics/authGuard.uts'
|
|
import { getCurrentUser } from '@/utils/store.uts'
|
|
import { computed, ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
type KpiCard = {
|
|
title: string
|
|
value: string
|
|
percent: string
|
|
trend: string
|
|
icon: string
|
|
bg: string
|
|
}
|
|
|
|
type LineSeries = {
|
|
name: string
|
|
color: string
|
|
data: Array<number>
|
|
}
|
|
|
|
const selectedMonth = ref<string>('')
|
|
const startDate = ref<string>('')
|
|
const endDate = ref<string>('')
|
|
|
|
const dateRangeText = computed((): string => {
|
|
if (!startDate.value || !endDate.value) return '请选择月份'
|
|
const fmt = (s: string): string => s.replace(/-/g, '/')
|
|
return `${fmt(startDate.value)} - ${fmt(endDate.value)}`
|
|
})
|
|
|
|
const kpiData = ref<Array<KpiCard>>([
|
|
{ title: '累计用户', value: '-', percent: '-', trend: 'up', icon: '👤', bg: '#f3e8ff' },
|
|
{ title: '活跃用户', value: '-', percent: '-', trend: 'up', icon: '👤', bg: '#e0f2fe' },
|
|
{ title: '新增用户数', value: '-', percent: '-', trend: 'up', icon: '👤', bg: '#ffedd5' },
|
|
{ title: '下单用户数', value: '-', percent: '-', trend: 'up', icon: '👤', bg: '#dcfce7' },
|
|
{ title: '支付用户数', value: '-', percent: '-', trend: 'up', icon: '👤', bg: '#f3e8ff' },
|
|
{ title: '复购率', value: '-', percent: '-', trend: 'up', icon: '💎', bg: '#f3e8ff' }
|
|
])
|
|
|
|
const chartData = ref<{ x: Array<string>; series: Array<LineSeries> }>({
|
|
x: [],
|
|
series: [
|
|
{ name: '新增用户数', color: '#1890ff', data: [] },
|
|
{ name: '活跃用户', color: '#52c41a', data: [] }
|
|
]
|
|
})
|
|
|
|
function safeNumber(v: any): number {
|
|
const n = Number(v)
|
|
return isFinite(n) ? n : 0
|
|
}
|
|
|
|
function formatInt(v: any): string {
|
|
const n = Math.round(safeNumber(v))
|
|
return n.toString()
|
|
}
|
|
|
|
function formatPct(v: any): string {
|
|
const n = safeNumber(v)
|
|
const s = n.toFixed(2) + '%'
|
|
return s
|
|
}
|
|
|
|
function trendOf(pct: number): string {
|
|
return pct >= 0 ? 'up' : 'down'
|
|
}
|
|
|
|
async function loadData() {
|
|
try {
|
|
await ensureSupabaseReady()
|
|
|
|
if (!startDate.value || !endDate.value) {
|
|
uni.showToast({ title: '请先选择月份', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
const startStr = startDate.value
|
|
const endStr = endDate.value
|
|
|
|
const p = new UTSJSONObject()
|
|
p.set('p_start_date', startStr)
|
|
p.set('p_end_date', endStr)
|
|
|
|
const kRes: any = await supa.rpc('rpc_analytics_user_kpis', p)
|
|
const row = Array.isArray(kRes.data) && kRes.data.length > 0 ? kRes.data[0] : (kRes.data || {})
|
|
|
|
const totalUsers = safeNumber(row.total_users)
|
|
const totalGrowth = safeNumber(row.user_growth)
|
|
const newUsers = safeNumber(row.new_users)
|
|
const newGrowth = safeNumber(row.new_user_growth)
|
|
const activeUsers = safeNumber(row.active_users)
|
|
const activeGrowth = safeNumber(row.active_growth)
|
|
const orderingUsers = safeNumber(row.ordering_users)
|
|
const orderingGrowth = safeNumber(row.ordering_growth)
|
|
const paidUsers = safeNumber(row.paid_users)
|
|
const paidGrowth = safeNumber(row.paid_growth)
|
|
const repurchaseRate = safeNumber(row.repurchase_rate)
|
|
const repurchaseGrowth = safeNumber(row.repurchase_growth)
|
|
|
|
kpiData.value = [
|
|
{ title: '累计用户', value: formatInt(totalUsers), percent: formatPct(totalGrowth), trend: trendOf(totalGrowth), icon: '👤', bg: '#f3e8ff' },
|
|
{ title: '活跃用户', value: formatInt(activeUsers), percent: formatPct(activeGrowth), trend: trendOf(activeGrowth), icon: '👤', bg: '#e0f2fe' },
|
|
{ title: '新增用户数', value: formatInt(newUsers), percent: formatPct(newGrowth), trend: trendOf(newGrowth), icon: '👤', bg: '#ffedd5' },
|
|
{ title: '下单用户数', value: formatInt(orderingUsers), percent: formatPct(orderingGrowth), trend: trendOf(orderingGrowth), icon: '👤', bg: '#dcfce7' },
|
|
{ title: '支付用户数', value: formatInt(paidUsers), percent: formatPct(paidGrowth), trend: trendOf(paidGrowth), icon: '👤', bg: '#f3e8ff' },
|
|
{ title: '复购率', value: formatPct(repurchaseRate), percent: formatPct(repurchaseGrowth), trend: trendOf(repurchaseGrowth), icon: '💎', bg: '#f3e8ff' }
|
|
]
|
|
|
|
const tRes: any = await supa.rpc('rpc_analytics_user_growth_trend', p)
|
|
const rows: Array<any> = Array.isArray(tRes.data) ? (tRes.data as Array<any>) : []
|
|
|
|
const x: Array<string> = []
|
|
const newArr: Array<number> = []
|
|
const activeArr: Array<number> = []
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const d = `${rows[i].date}`
|
|
x.push(d.slice(5))
|
|
newArr.push(Number(rows[i].new_users) || 0)
|
|
activeArr.push(Number(rows[i].active_users) || 0)
|
|
}
|
|
|
|
chartData.value = {
|
|
x,
|
|
series: [
|
|
{ name: '新增用户数', color: '#1890ff', data: newArr },
|
|
{ name: '活跃用户', color: '#52c41a', data: activeArr }
|
|
]
|
|
}
|
|
} catch (e) {
|
|
console.error('admin user statistic loadData failed', e)
|
|
uni.showToast({ title: '数据加载失败', icon: 'none', duration: 2000 })
|
|
}
|
|
}
|
|
|
|
function onSearch() {
|
|
loadData()
|
|
}
|
|
|
|
function onExport() {
|
|
uni.showToast({ title: '导出功能待接入', icon: 'none' })
|
|
}
|
|
|
|
function onDateRangeApply(range: { start: string; end: string }) {
|
|
startDate.value = range.start
|
|
endDate.value = range.end
|
|
loadData()
|
|
}
|
|
|
|
function onDateRangeClear() {
|
|
startDate.value = ''
|
|
endDate.value = ''
|
|
kpiData.value.forEach(item => {
|
|
item.value = '-'
|
|
item.percent = '-'
|
|
})
|
|
chartData.value.x = []
|
|
chartData.value.series.forEach(s => s.data = [])
|
|
}
|
|
|
|
// 初始化默认月份为当前月
|
|
function initCurrentMonth() {
|
|
const now = new Date()
|
|
const year = now.getFullYear()
|
|
const month = now.getMonth() + 1
|
|
const firstDay = new Date(year, month - 1, 1)
|
|
const lastDay = new Date(year, month, 0)
|
|
startDate.value = firstDay.toISOString().slice(0, 10)
|
|
endDate.value = lastDay.toISOString().slice(0, 10)
|
|
}
|
|
|
|
onLoad(async () => {
|
|
if (!ensureAnalyticsLogin({ toastTitle: '请先登录以访问用户统计' })) return
|
|
|
|
const profile = await getCurrentUser()
|
|
const role = profile?.role
|
|
if (!role || !['admin', 'analytics'].includes(role)) {
|
|
uni.showToast({ title: '权限不足', icon: 'none' })
|
|
setTimeout(() => uni.switchTab({ url: '/pages/mall/consumer/index' }), 800)
|
|
return
|
|
}
|
|
|
|
initCurrentMonth()
|
|
loadData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.statistic-page {
|
|
padding: 16px;
|
|
background-color: #f0f2f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.filter-card {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 32px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.select-box {
|
|
width: 180px;
|
|
height: 32px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.select-text { font-size: 14px; color: #333; }
|
|
.select-arrow { font-size: 10px; color: #bfbfbf; }
|
|
|
|
.date-picker-box {
|
|
min-width: 240px;
|
|
height: 32px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.date-icon { font-size: 14px; }
|
|
.date-text { font-size: 14px; color: #333; }
|
|
|
|
.filter-btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn {
|
|
height: 32px;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 2px;
|
|
background-color: #fff;
|
|
border: 1px solid #d9d9d9;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn.primary {
|
|
background-color: #1890ff;
|
|
border-color: #1890ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.section-card {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.info-icon {
|
|
font-size: 14px;
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.kpi-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.kpi-row {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.kpi-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.kpi-card {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.kpi-icon-box {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.kpi-icon { font-size: 14px; }
|
|
|
|
.kpi-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.kpi-label {
|
|
font-size: 12px;
|
|
color: #8c8c8c;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.kpi-value {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.kpi-meta {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.meta-label {
|
|
color: #8c8c8c;
|
|
flex: 0 0 auto;
|
|
}
|
|
.meta-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.meta-value.up { color: #ff4d4f; }
|
|
.meta-value.down { color: #52c41a; }
|
|
|
|
.chart-container {
|
|
border-top: 1px solid #f0f0f0;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.download-icon {
|
|
font-size: 18px;
|
|
color: #8c8c8c;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.analysis-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
width: 100%;
|
|
}
|
|
|
|
.map-col {
|
|
flex: 7;
|
|
}
|
|
|
|
.gender-col {
|
|
flex: 3;
|
|
}
|
|
</style>
|