507 lines
16 KiB
Plaintext
507 lines
16 KiB
Plaintext
<template>
|
||
<view class="page" @click="closeMoreMenu">
|
||
<AnalyticsTopBar
|
||
:title="'数据分析详情'"
|
||
:lastUpdateTime="lastUpdateTime"
|
||
:sidebarVisible="showSidebarMenu"
|
||
@menu-click="handleMenu"
|
||
@refresh="refreshData"
|
||
@search="handleSearch"
|
||
@notification="handleNotification"
|
||
@fullscreen="handleFullscreen"
|
||
@mobile="handleMobile"
|
||
@dropdown="handleDropdown"
|
||
@settings="handleSettings"
|
||
/>
|
||
|
||
<view class="page-layout">
|
||
<AnalyticsSidebarMenu
|
||
:visible="showSidebarMenu"
|
||
:currentPath="currentPath"
|
||
@visible-change="handleSidebarUpdate"
|
||
/>
|
||
|
||
<view class="main-content">
|
||
<view class="container">
|
||
<view class="filter-bar">
|
||
<view class="filter-item">
|
||
<text class="filter-label">时间范围：</text>
|
||
<view class="filter-value" @click="selectTimeRange">{{ timeRangeText }}</view>
|
||
</view>
|
||
<view class="filter-item">
|
||
<text class="filter-label">数据维度：</text>
|
||
<view class="filter-value" @click="selectDimension">{{ dimensionText }}</view>
|
||
</view>
|
||
<view class="filter-item">
|
||
<text class="filter-label">对比模式：</text>
|
||
<view class="filter-value" @click="toggleCompare">{{ compareMode ? '开启' : '关闭' }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card card-full">
|
||
<view class="card-head">
|
||
<text class="card-title">详细数据</text>
|
||
<text class="card-desc">支持排序、筛选、导出</text>
|
||
</view>
|
||
<view class="data-table">
|
||
<view class="table-header">
|
||
<view class="table-cell" v-for="col in tableColumns" :key="col.key">
|
||
<text>{{ col.label }}</text>
|
||
<text class="sort-icon" v-if="col.sortable" @click="sortBy(col.key)">⇅</text>
|
||
</view>
|
||
</view>
|
||
<view class="table-body">
|
||
<view class="table-row" v-for="row in tableData" :key="row.id">
|
||
<view class="table-cell" v-for="col in tableColumns" :key="col.key">
|
||
<text>{{ formatCellValue(row[col.key], col.type) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card card-full" v-if="compareMode">
|
||
<view class="card-head">
|
||
<text class="card-title">数据对比</text>
|
||
<text class="card-desc">当前周期 vs 对比周期</text>
|
||
</view>
|
||
<EChartsView class="chart-box" :option="compareChartOption" />
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="card-head">
|
||
<text class="card-title">数据钻取</text>
|
||
<text class="card-desc">点击数据项查看详情</text>
|
||
</view>
|
||
<view class="drill-down-list">
|
||
<view v-for="item in drillDownItems" :key="item.id" class="drill-item" @click="drillDown(item)">
|
||
<text class="drill-label">{{ item.label }}</text>
|
||
<text class="drill-value">{{ item.value }}</text>
|
||
<text class="drill-arrow">→</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 24px;"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { reactive, ref } from 'vue'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
|
||
import AnalyticsSidebarMenu from '@/components/analytics/AnalyticsSidebarMenu.uvue'
|
||
import AnalyticsTopBar from '@/components/analytics/AnalyticsTopBar.uvue'
|
||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||
import supa from '@/components/supadb/aksupainstance.uts'
|
||
|
||
import { fetchDataDetailReportInfo, fetchDataDetailRows } from '@/services/analytics/dataDetailService.uts'
|
||
import { mapAnalyticsError } from '@/services/analytics/errorMapper.uts'
|
||
import { rpcOrEmptyArray } from '@/services/analytics/rpc.uts'
|
||
|
||
import type { TableColumn, DrillDownItem } from '@/types/analytics/data-detail.uts'
|
||
|
||
const lastUpdateTime = ref('')
|
||
const showMoreMenu = ref(false)
|
||
const showSidebarMenu = ref(false)
|
||
const currentPath = ref('/pages/mall/analytics/data-detail')
|
||
|
||
const timeRangeText = ref('最近7天')
|
||
const dimensionText = ref('全部')
|
||
const compareMode = ref(true)
|
||
const sortKey = ref('')
|
||
const sortOrder = ref<'asc' | 'desc'>('asc')
|
||
const reportId = ref('')
|
||
|
||
const tableColumns = ref<Array<TableColumn>>([
|
||
{ key: 'date', label: '日期', type: 'date', sortable: true },
|
||
{ key: 'gmv', label: 'GMV', type: 'money', sortable: true },
|
||
{ key: 'orders', label: '订单数', type: 'number', sortable: true },
|
||
{ key: 'users', label: '用户数', type: 'number', sortable: true }
|
||
])
|
||
|
||
const tableData = reactive<Array<any>>([])
|
||
const drillDownItems = reactive<Array<DrillDownItem>>([])
|
||
const compareChartOption = ref<any>({})
|
||
|
||
const _currentRows = ref<Array<UTSJSONObject>>([])
|
||
const _compareRows = ref<Array<UTSJSONObject>>([])
|
||
|
||
onLoad((options: any) => {
|
||
currentPath.value = '/pages/mall/analytics/data-detail'
|
||
const rid = (options.reportId || options.id) as string
|
||
if (rid) {
|
||
reportId.value = rid
|
||
}
|
||
updateTime()
|
||
void loadDetailData()
|
||
})
|
||
|
||
onShow(() => {
|
||
currentPath.value = '/pages/mall/analytics/data-detail'
|
||
})
|
||
|
||
async function loadDetailData() {
|
||
try {
|
||
if (reportId.value && reportId.value.length > 0) {
|
||
const info = await fetchDataDetailReportInfo(reportId.value)
|
||
if (info != null) {
|
||
const period = info.period
|
||
if (period === '7d') timeRangeText.value = '最近7天'
|
||
else if (period === '30d') timeRangeText.value = '最近30天'
|
||
else if (period === '90d') timeRangeText.value = '最近90天'
|
||
}
|
||
|
||
const sortByKey = sortKey.value.length > 0 ? sortKey.value : 'row_date'
|
||
const sortDir = sortOrder.value === 'desc' ? 'desc' : 'asc'
|
||
const rows = await fetchDataDetailRows(reportId.value, sortByKey, sortDir, 500, 0)
|
||
tableData.splice(0, tableData.length, ...rows)
|
||
|
||
const drillAny = await rpcOrEmptyArray('rpc_data_detail_drill_items', {
|
||
p_report_id: reportId.value
|
||
} as UTSJSONObject)
|
||
|
||
const drillList: Array<DrillDownItem> = []
|
||
for (let i = 0; i < drillAny.length; i++) {
|
||
const m = drillAny[i]
|
||
const key = m.getString('metric_key') ?? ''
|
||
const label = m.getString('metric_label') ?? key
|
||
const fmt = m.getString('format') ?? 'number'
|
||
const valueNum = m.getNumber('metric_value_num') ?? 0
|
||
const vStr = formatCellValue(valueNum, fmt === 'currency' ? 'money' : (fmt === 'percent' ? 'percent' : 'number'))
|
||
drillList.push({
|
||
id: key.length > 0 ? key : 'metric_' + i.toString(),
|
||
label,
|
||
value: vStr,
|
||
type: key
|
||
})
|
||
}
|
||
drillDownItems.splice(0, drillDownItems.length, ...drillList)
|
||
|
||
const cmpRes: any = await supa.rpc('rpc_data_detail_compare_gmv', {
|
||
p_report_id: reportId.value
|
||
} as any)
|
||
|
||
let cmpRows: Array<UTSJSONObject> = []
|
||
if (cmpRes.error != null) {
|
||
console.error('rpc_data_detail_compare_gmv error:', cmpRes.error)
|
||
} else {
|
||
const anyCmp = cmpRes.data as any
|
||
if (Array.isArray(anyCmp)) {
|
||
cmpRows = anyCmp as Array<UTSJSONObject>
|
||
}
|
||
}
|
||
|
||
const curDays: string[] = []
|
||
const curGmv: number[] = []
|
||
const prevGmv: number[] = []
|
||
for (let i = 0; i < cmpRows.length; i++) {
|
||
const r = cmpRows[i]
|
||
const dayStr = r.getString('day') ?? ''
|
||
curDays.push(dayStr.length >= 10 ? dayStr.substring(5, 10) : dayStr)
|
||
curGmv.push(r.getNumber('gmv_current') ?? 0)
|
||
prevGmv.push(r.getNumber('gmv_previous') ?? 0)
|
||
}
|
||
|
||
compareChartOption.value = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: ['当前周期 GMV', '对比周期 GMV'], top: 'bottom' },
|
||
grid: { left: 50, right: 20, top: 30, bottom: 60 },
|
||
xAxis: { type: 'category', data: curDays },
|
||
yAxis: { type: 'value', name: 'GMV' },
|
||
series: [
|
||
{ name: '当前周期 GMV', type: 'line', smooth: true, data: curGmv },
|
||
{ name: '对比周期 GMV', type: 'line', smooth: true, data: prevGmv }
|
||
]
|
||
}
|
||
|
||
_currentRows.value = []
|
||
_compareRows.value = []
|
||
} else {
|
||
// 兼容旧逻辑：无报表ID时，直接按时间范围调用市场趋势 RPC
|
||
const now = new Date()
|
||
const end = new Date(now.getTime())
|
||
const start = new Date(now.getTime())
|
||
|
||
if (timeRangeText.value === '最近7天') {
|
||
start.setDate(start.getDate() - 7)
|
||
} else if (timeRangeText.value === '最近30天') {
|
||
start.setDate(start.getDate() - 30)
|
||
} else if (timeRangeText.value === '最近90天') {
|
||
start.setDate(start.getDate() - 90)
|
||
} else {
|
||
start.setDate(start.getDate() - 30)
|
||
}
|
||
|
||
const startIso = start.toISOString()
|
||
const endIso = end.toISOString()
|
||
|
||
let currentRows: Array<UTSJSONObject> = []
|
||
let compareRows: Array<UTSJSONObject> = []
|
||
|
||
const curRes = await supa.rpc('rpc_analytics_market_trend_daily', {
|
||
p_start: startIso,
|
||
p_end: endIso
|
||
} as any)
|
||
|
||
if (curRes.status === 404) {
|
||
console.warn('rpc_analytics_market_trend_daily not found, data-detail will be empty')
|
||
} else if (curRes.error != null) {
|
||
console.error('rpc_analytics_market_trend_daily error:', curRes.error)
|
||
} else {
|
||
const anyData = curRes.data as any
|
||
currentRows = Array.isArray(anyData) ? (anyData as Array<UTSJSONObject>) : []
|
||
}
|
||
|
||
const spanMs = end.getTime() - start.getTime()
|
||
const prevEnd = new Date(start.getTime())
|
||
const prevStart = new Date(start.getTime() - spanMs)
|
||
const prevStartIso = prevStart.toISOString()
|
||
const prevEndIso = prevEnd.toISOString()
|
||
|
||
const prevRes = await supa.rpc('rpc_analytics_market_trend_daily', {
|
||
p_start: prevStartIso,
|
||
p_end: prevEndIso
|
||
} as any)
|
||
|
||
if (prevRes.status === 404) {
|
||
console.warn('rpc_analytics_market_trend_daily not found for compare period')
|
||
} else if (prevRes.error != null) {
|
||
console.error('rpc_analytics_market_trend_daily (compare) error:', prevRes.error)
|
||
} else {
|
||
const anyPrev = prevRes.data as any
|
||
compareRows = Array.isArray(anyPrev) ? (anyPrev as Array<UTSJSONObject>) : []
|
||
}
|
||
|
||
const table: Array<any> = []
|
||
for (let i = 0; i < currentRows.length; i++) {
|
||
const r = currentRows[i]
|
||
const dayStr = r.getString('day') ?? ''
|
||
table.push({
|
||
id: dayStr + '_' + i.toString(),
|
||
date: dayStr,
|
||
gmv: r.getNumber('gmv') ?? 0,
|
||
orders: r.getNumber('orders') ?? 0,
|
||
users: r.getNumber('users') ?? 0
|
||
} as any)
|
||
}
|
||
|
||
tableData.splice(0, tableData.length, ...table)
|
||
|
||
let totalGmv = 0
|
||
let totalOrders = 0
|
||
let totalUsers = 0
|
||
for (let i = 0; i < table.length; i++) {
|
||
const row = table[i]
|
||
totalGmv += row.gmv as number
|
||
totalOrders += row.orders as number
|
||
totalUsers += row.users as number
|
||
}
|
||
|
||
drillDownItems.splice(0, drillDownItems.length,
|
||
{ id: 'gmv_total', label: '当前周期 GMV 总计', value: formatCellValue(totalGmv, 'money'), type: 'gmv' },
|
||
{ id: 'orders_total', label: '当前周期订单总数', value: formatCellValue(totalOrders, 'number'), type: 'orders' },
|
||
{ id: 'users_total', label: '当前周期下单用户数', value: formatCellValue(totalUsers, 'number'), type: 'users' }
|
||
)
|
||
|
||
_currentRows.value = currentRows
|
||
_compareRows.value = compareRows
|
||
|
||
buildChartOptions()
|
||
}
|
||
|
||
updateTime()
|
||
} catch (e) {
|
||
console.error('loadDetailData failed:', e)
|
||
updateTime()
|
||
buildChartOptions()
|
||
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '详细数据加载失败' }), icon: 'none' })
|
||
}
|
||
}
|
||
|
||
function selectTimeRange() {
|
||
uni.showActionSheet({
|
||
itemList: ['最近7天', '最近30天', '最近90天', '自定义'],
|
||
success: (res) => {
|
||
const ranges = ['最近7天', '最近30天', '最近90天', '自定义']
|
||
timeRangeText.value = ranges[res.tapIndex]
|
||
void loadDetailData()
|
||
}
|
||
})
|
||
}
|
||
|
||
function selectDimension() {
|
||
uni.showActionSheet({
|
||
itemList: ['全部', '按商家', '按分类', '按地域'],
|
||
success: (res) => {
|
||
const dims = ['全部', '按商家', '按分类', '按地域']
|
||
dimensionText.value = dims[res.tapIndex]
|
||
void loadDetailData()
|
||
}
|
||
})
|
||
}
|
||
|
||
function toggleCompare() {
|
||
compareMode.value = !compareMode.value
|
||
if (compareMode.value) {
|
||
buildChartOptions()
|
||
}
|
||
}
|
||
|
||
function sortBy(key: string) {
|
||
if (sortKey.value === key) {
|
||
sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
|
||
} else {
|
||
sortKey.value = key
|
||
sortOrder.value = 'asc'
|
||
}
|
||
|
||
const data = tableData.slice()
|
||
data.sort((a: any, b: any) => {
|
||
const va = a[key]
|
||
const vb = b[key]
|
||
const na = typeof va === 'number' ? va : Number(va)
|
||
const nb = typeof vb === 'number' ? vb : Number(vb)
|
||
if (sortOrder.value === 'asc') return na - nb
|
||
return nb - na
|
||
})
|
||
|
||
tableData.splice(0, tableData.length, ...data)
|
||
}
|
||
|
||
function formatCellValue(value: any, type: string): string {
|
||
if (value == null) return '-'
|
||
if (type === 'money') {
|
||
const v = Number(value)
|
||
if (v >= 10000) return (v / 10000).toFixed(1) + '万'
|
||
return v.toFixed(2)
|
||
}
|
||
if (type === 'percent') {
|
||
const v = Number(value)
|
||
return `${v.toFixed(1)}%`
|
||
}
|
||
if (type === 'number') {
|
||
return String(Math.round(Number(value)))
|
||
}
|
||
if (type === 'date') {
|
||
return String(value)
|
||
}
|
||
return String(value)
|
||
}
|
||
|
||
function drillDown(item: DrillDownItem) {
|
||
uni.showToast({ title: `查看 ${item.label} 详情`, icon: 'none' })
|
||
}
|
||
|
||
function refreshData() {
|
||
void loadDetailData()
|
||
uni.showToast({ title: '已刷新', icon: 'success' })
|
||
}
|
||
|
||
function exportReport() {
|
||
uni.showActionSheet({
|
||
itemList: ['导出Excel', '导出PDF', '导出CSV'],
|
||
success: () => uni.showToast({ title: '导出成功', icon: 'success' })
|
||
})
|
||
}
|
||
|
||
function updateTime() {
|
||
const now = new Date()
|
||
const hh = now.getHours().toString().padStart(2, '0')
|
||
const mm = now.getMinutes().toString().padStart(2, '0')
|
||
lastUpdateTime.value = `${hh}:${mm}`
|
||
}
|
||
|
||
function buildChartOptions() {
|
||
const curRows = Array.isArray(_currentRows.value) ? (_currentRows.value as Array<UTSJSONObject>) : []
|
||
const prevRows = Array.isArray(_compareRows.value) ? (_compareRows.value as Array<UTSJSONObject>) : []
|
||
|
||
if (curRows.length === 0) {
|
||
compareChartOption.value = {}
|
||
return
|
||
}
|
||
|
||
const curDays: string[] = []
|
||
const curGmv: number[] = []
|
||
const prevGmv: number[] = []
|
||
|
||
for (let i = 0; i < curRows.length; i++) {
|
||
const r = curRows[i]
|
||
const dayStr = r.getString('day') ?? ''
|
||
curDays.push(dayStr.length >= 10 ? dayStr.substring(5, 10) : dayStr)
|
||
curGmv.push(r.getNumber('gmv') ?? 0)
|
||
}
|
||
|
||
for (let i = 0; i < curRows.length; i++) {
|
||
const rPrev = i < prevRows.length ? prevRows[i] : null
|
||
if (rPrev == null) {
|
||
prevGmv.push(0)
|
||
} else {
|
||
prevGmv.push(rPrev.getNumber('gmv') ?? 0)
|
||
}
|
||
}
|
||
|
||
compareChartOption.value = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: ['当前周期 GMV', '对比周期 GMV'], top: 'bottom' },
|
||
grid: { left: 50, right: 20, top: 30, bottom: 60 },
|
||
xAxis: { type: 'category', data: curDays },
|
||
yAxis: { type: 'value', name: 'GMV' },
|
||
series: [
|
||
{ name: '当前周期 GMV', type: 'line', smooth: true, data: curGmv },
|
||
{ name: '对比周期 GMV', type: 'line', smooth: true, data: prevGmv }
|
||
]
|
||
}
|
||
}
|
||
|
||
function handleMenu() {
|
||
showSidebarMenu.value = true
|
||
}
|
||
|
||
function handleSidebarUpdate(visible: boolean) {
|
||
showSidebarMenu.value = visible
|
||
}
|
||
|
||
function toggleMoreMenu() {
|
||
showMoreMenu.value = !showMoreMenu.value
|
||
}
|
||
|
||
function closeMoreMenu() {
|
||
showMoreMenu.value = false
|
||
}
|
||
|
||
function handleSearch() {
|
||
uni.showToast({ title: '搜索', icon: 'none' })
|
||
}
|
||
|
||
function handleNotification() {
|
||
uni.showToast({ title: '通知', icon: 'none' })
|
||
}
|
||
|
||
function handleFullscreen() {
|
||
uni.showToast({ title: '全屏', icon: 'none' })
|
||
}
|
||
|
||
function handleMobile() {
|
||
uni.showToast({ title: '移动端', icon: 'none' })
|
||
}
|
||
|
||
function handleDropdown() {
|
||
uni.showToast({ title: '下拉菜单', icon: 'none' })
|
||
}
|
||
|
||
function handleSettings() {
|
||
uni.showToast({ title: '设置', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #f6f7fb;
|
||
}
|
||
</style>
|