接入数据库
This commit is contained in:
comlibmb
@@ -25,232 +25,232 @@
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<view class="main-content">
|
||||
<view class="analytics-profile">
|
||||
<!-- 分析师信息头部 -->
|
||||
<view class="profile-header">
|
||||
<image :src="analystInfo.avatar_url || '/static/default-avatar.png'" class="analyst-avatar" @click="editProfile" />
|
||||
<view class="analyst-info">
|
||||
<text class="analyst-name">{{ analystInfo.nickname || analystInfo.phone }}</text>
|
||||
<text class="analyst-role">{{ getAnalystRole() }}</text>
|
||||
<view class="analyst-stats">
|
||||
<text class="stat-item">工作经验: {{ workExperience }}年</text>
|
||||
<text class="stat-item">专业领域: {{ expertise }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="settings-icon" @click="goToSettings">⚙️</view>
|
||||
</view>
|
||||
<view class="analytics-profile">
|
||||
<!-- 分析师信息头部 -->
|
||||
<view class="profile-header">
|
||||
<image :src="analystInfo.avatar_url || '/static/default-avatar.png'" class="analyst-avatar" @click="editProfile" />
|
||||
<view class="analyst-info">
|
||||
<text class="analyst-name">{{ analystInfo.nickname || analystInfo.phone }}</text>
|
||||
<text class="analyst-role">{{ getAnalystRole() }}</text>
|
||||
<view class="analyst-stats">
|
||||
<text class="stat-item">工作经验: {{ workExperience }}年</text>
|
||||
<text class="stat-item">专业领域: {{ expertise }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="settings-icon" @click="goToSettings">⚙️</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据概览 -->
|
||||
<view class="data-overview">
|
||||
<view class="section-title">数据概览</view>
|
||||
<view class="overview-cards">
|
||||
<view class="overview-card" @click="goToReports('sales')">
|
||||
<text class="card-icon">💰</text>
|
||||
<text class="card-title">销售数据</text>
|
||||
<text class="card-value">¥{{ overviewData.totalSales }}</text>
|
||||
<text class="card-change positive">+{{ overviewData.salesGrowth }}%</text>
|
||||
</view>
|
||||
<view class="overview-card" @click="goToReports('users')">
|
||||
<text class="card-icon">👥</text>
|
||||
<text class="card-title">用户增长</text>
|
||||
<text class="card-value">{{ overviewData.totalUsers }}</text>
|
||||
<text class="card-change positive">+{{ overviewData.userGrowth }}%</text>
|
||||
</view>
|
||||
<view class="overview-card" @click="goToReports('orders')">
|
||||
<text class="card-icon">📋</text>
|
||||
<text class="card-title">订单量</text>
|
||||
<text class="card-value">{{ overviewData.totalOrders }}</text>
|
||||
<text class="card-change" :class="{ positive: overviewData.orderGrowth > 0 }">
|
||||
{{ overviewData.orderGrowth > 0 ? '+' : '' }}{{ overviewData.orderGrowth }}%
|
||||
</text>
|
||||
</view>
|
||||
<view class="overview-card" @click="goToReports('conversion')">
|
||||
<text class="card-icon">📈</text>
|
||||
<text class="card-title">转化率</text>
|
||||
<text class="card-value">{{ overviewData.conversionRate }}%</text>
|
||||
<text class="card-change positive">+{{ overviewData.conversionGrowth }}%</text>
|
||||
</view>
|
||||
<!-- 数据概览 -->
|
||||
<view class="data-overview">
|
||||
<view class="section-title">数据概览</view>
|
||||
<view class="overview-cards">
|
||||
<view class="overview-card" @click="goToReports('sales')">
|
||||
<text class="card-icon">💰</text>
|
||||
<text class="card-title">销售数据</text>
|
||||
<text class="card-value">¥{{ overviewData.totalSales }}</text>
|
||||
<text class="card-change positive">+{{ overviewData.salesGrowth }}%</text>
|
||||
</view>
|
||||
<view class="overview-card" @click="goToReports('users')">
|
||||
<text class="card-icon">👥</text>
|
||||
<text class="card-title">用户增长</text>
|
||||
<text class="card-value">{{ overviewData.totalUsers }}</text>
|
||||
<text class="card-change positive">+{{ overviewData.userGrowth }}%</text>
|
||||
</view>
|
||||
<view class="overview-card" @click="goToReports('orders')">
|
||||
<text class="card-icon">📋</text>
|
||||
<text class="card-title">订单量</text>
|
||||
<text class="card-value">{{ overviewData.totalOrders }}</text>
|
||||
<text class="card-change" :class="{ positive: overviewData.orderGrowth > 0 }">
|
||||
{{ overviewData.orderGrowth > 0 ? '+' : '' }}{{ overviewData.orderGrowth }}%
|
||||
</text>
|
||||
</view>
|
||||
<view class="overview-card" @click="goToReports('conversion')">
|
||||
<text class="card-icon">📈</text>
|
||||
<text class="card-title">转化率</text>
|
||||
<text class="card-value">{{ overviewData.conversionRate }}%</text>
|
||||
<text class="card-change positive">+{{ overviewData.conversionGrowth }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 报表管理 -->
|
||||
<view class="report-management">
|
||||
<view class="section-title">报表管理</view>
|
||||
<view class="report-tabs">
|
||||
<view class="report-tab" @click="goToReports('all')">
|
||||
<text class="tab-icon">📊</text>
|
||||
<text class="tab-text">全部报表</text>
|
||||
<text v-if="reportCounts.total > 0" class="tab-badge">{{ reportCounts.total }}</text>
|
||||
</view>
|
||||
<view class="report-tab" @click="goToReports('pending')">
|
||||
<text class="tab-icon">⏳</text>
|
||||
<text class="tab-text">待生成</text>
|
||||
<text v-if="reportCounts.pending > 0" class="tab-badge alert">{{ reportCounts.pending }}</text>
|
||||
</view>
|
||||
<view class="report-tab" @click="goToReports('scheduled')">
|
||||
<text class="tab-icon">📅</text>
|
||||
<text class="tab-text">定时报表</text>
|
||||
<text v-if="reportCounts.scheduled > 0" class="tab-badge">{{ reportCounts.scheduled }}</text>
|
||||
</view>
|
||||
<view class="report-tab" @click="goToReports('shared')">
|
||||
<text class="tab-icon">🔗</text>
|
||||
<text class="tab-text">共享报表</text>
|
||||
<text v-if="reportCounts.shared > 0" class="tab-badge">{{ reportCounts.shared }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日数据洞察 -->
|
||||
<view class="today-insights">
|
||||
<view class="section-title">今日洞察</view>
|
||||
<view class="insight-grid">
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">🔥</text>
|
||||
<text class="insight-title">热销商品</text>
|
||||
<text class="insight-value">{{ todayInsights.hotProduct }}</text>
|
||||
<text class="insight-desc">销量同比增长156%</text>
|
||||
</view>
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">⚡</text>
|
||||
<text class="insight-title">流量峰值</text>
|
||||
<text class="insight-value">{{ todayInsights.peakTraffic }}</text>
|
||||
<text class="insight-desc">14:30达到峰值</text>
|
||||
</view>
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">🎯</text>
|
||||
<text class="insight-title">转化异常</text>
|
||||
<text class="insight-value">{{ todayInsights.conversionAnomaly }}</text>
|
||||
<text class="insight-desc">需要关注</text>
|
||||
</view>
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">📱</text>
|
||||
<text class="insight-title">移动端占比</text>
|
||||
<text class="insight-value">{{ todayInsights.mobileRatio }}%</text>
|
||||
<text class="insight-desc">持续增长</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近生成的报表 -->
|
||||
<view class="recent-reports">
|
||||
<view class="section-header">
|
||||
<text class="section-title">最近报表</text>
|
||||
<text class="view-all" @click="goToReports('all')">查看全部 ></text>
|
||||
</view>
|
||||
<view v-if="recentReports.length > 0" class="report-list">
|
||||
<view v-for="report in recentReports" :key="report.id" class="report-item" @click="viewReportDetail(report.id)">
|
||||
<view class="report-icon">
|
||||
<text class="icon-text">📊</text>
|
||||
</view>
|
||||
<view class="report-info">
|
||||
<text class="report-title">{{ report.title }}</text>
|
||||
<text class="report-desc">{{ report.description }}</text>
|
||||
<text class="report-time">{{ formatTime(report.created_at) }}</text>
|
||||
</view>
|
||||
<view class="report-status">
|
||||
<text class="status-text" :class="'status-' + report.status">{{ getReportStatusText(report.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">
|
||||
<text class="no-data-text">暂无最近报表</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据趋势图表 -->
|
||||
<view class="trend-chart">
|
||||
<view class="section-header">
|
||||
<text class="section-title">数据趋势</text>
|
||||
<view class="chart-controls">
|
||||
<text class="control-btn" :class="{ active: trendPeriod === 'week' }" @click="changeTrendPeriod('week')">周</text>
|
||||
<text class="control-btn" :class="{ active: trendPeriod === 'month' }" @click="changeTrendPeriod('month')">月</text>
|
||||
<text class="control-btn" :class="{ active: trendPeriod === 'quarter' }" @click="changeTrendPeriod('quarter')">季</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-container">
|
||||
<view class="chart-legend">
|
||||
<view class="legend-item">
|
||||
<view class="legend-color sales"></view>
|
||||
<text class="legend-text">销售额</text>
|
||||
</view>
|
||||
<view class="legend-item">
|
||||
<view class="legend-color orders"></view>
|
||||
<text class="legend-text">订单量</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-area">
|
||||
<view class="chart-bars">
|
||||
<view v-for="(data, index) in trendData" :key="index" class="bar-group">
|
||||
<view class="bar sales" :style="{ height: (data.sales / maxSales * 100) + '%' }"></view>
|
||||
<view class="bar orders" :style="{ height: (data.orders / maxOrders * 100) + '%' }"></view>
|
||||
<text class="bar-label">{{ data.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 报表管理 -->
|
||||
<view class="report-management">
|
||||
<view class="section-title">报表管理</view>
|
||||
<view class="report-tabs">
|
||||
<view class="report-tab" @click="goToReports('all')">
|
||||
<text class="tab-icon">📊</text>
|
||||
<text class="tab-text">全部报表</text>
|
||||
<text v-if="reportCounts.total > 0" class="tab-badge">{{ reportCounts.total }}</text>
|
||||
</view>
|
||||
<view class="report-tab" @click="goToReports('pending')">
|
||||
<text class="tab-icon">⏳</text>
|
||||
<text class="tab-text">待生成</text>
|
||||
<text v-if="reportCounts.pending > 0" class="tab-badge alert">{{ reportCounts.pending }}</text>
|
||||
</view>
|
||||
<view class="report-tab" @click="goToReports('scheduled')">
|
||||
<text class="tab-icon">📅</text>
|
||||
<text class="tab-text">定时报表</text>
|
||||
<text v-if="reportCounts.scheduled > 0" class="tab-badge">{{ reportCounts.scheduled }}</text>
|
||||
</view>
|
||||
<view class="report-tab" @click="goToReports('shared')">
|
||||
<text class="tab-icon">🔗</text>
|
||||
<text class="tab-text">共享报表</text>
|
||||
<text v-if="reportCounts.shared > 0" class="tab-badge">{{ reportCounts.shared }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分析工具 -->
|
||||
<view class="analysis-tools">
|
||||
<view class="section-title">分析工具</view>
|
||||
<view class="tool-grid">
|
||||
<view class="tool-item" @click="goToTool('dashboard')">
|
||||
<text class="tool-icon">📊</text>
|
||||
<text class="tool-label">数据看板</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('funnel')">
|
||||
<text class="tool-icon">🔽</text>
|
||||
<text class="tool-label">转化漏斗</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('cohort')">
|
||||
<text class="tool-icon">👥</text>
|
||||
<text class="tool-label">用户留存</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('attribution')">
|
||||
<text class="tool-icon">🎯</text>
|
||||
<text class="tool-label">归因分析</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('segmentation')">
|
||||
<text class="tool-icon">🔍</text>
|
||||
<text class="tool-label">用户分群</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('prediction')">
|
||||
<text class="tool-icon">🔮</text>
|
||||
<text class="tool-label">预测分析</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日数据洞察 -->
|
||||
<view class="today-insights">
|
||||
<view class="section-title">今日洞察</view>
|
||||
<view class="insight-grid">
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">🔥</text>
|
||||
<text class="insight-title">热销商品</text>
|
||||
<text class="insight-value">{{ todayInsights.hotProduct }}</text>
|
||||
<text class="insight-desc">销量同比增长156%</text>
|
||||
</view>
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">⚡</text>
|
||||
<text class="insight-title">流量峰值</text>
|
||||
<text class="insight-value">{{ todayInsights.peakTraffic }}</text>
|
||||
<text class="insight-desc">14:30达到峰值</text>
|
||||
</view>
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">🎯</text>
|
||||
<text class="insight-title">转化异常</text>
|
||||
<text class="insight-value">{{ todayInsights.conversionAnomaly }}</text>
|
||||
<text class="insight-desc">需要关注</text>
|
||||
</view>
|
||||
<view class="insight-card">
|
||||
<text class="insight-icon">📱</text>
|
||||
<text class="insight-title">移动端占比</text>
|
||||
<text class="insight-value">{{ todayInsights.mobileRatio }}%</text>
|
||||
<text class="insight-desc">持续增长</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近生成的报表 -->
|
||||
<view class="recent-reports">
|
||||
<view class="section-header">
|
||||
<text class="section-title">最近报表</text>
|
||||
<text class="view-all" @click="goToReports('all')">查看全部 ></text>
|
||||
</view>
|
||||
<view v-if="recentReports.length > 0" class="report-list">
|
||||
<view v-for="report in recentReports" :key="report.id" class="report-item" @click="viewReportDetail(report.id)">
|
||||
<view class="report-icon">
|
||||
<text class="icon-text">📊</text>
|
||||
</view>
|
||||
<view class="report-info">
|
||||
<text class="report-title">{{ report.title }}</text>
|
||||
<text class="report-desc">{{ report.description }}</text>
|
||||
<text class="report-time">{{ formatTime(report.created_at) }}</text>
|
||||
</view>
|
||||
<view class="report-status">
|
||||
<text class="status-text" :class="'status-' + report.status">{{ getReportStatusText(report.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">
|
||||
<text class="no-data-text">暂无最近报表</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据趋势图表 -->
|
||||
<view class="trend-chart">
|
||||
<view class="section-header">
|
||||
<text class="section-title">数据趋势</text>
|
||||
<view class="chart-controls">
|
||||
<text class="control-btn" :class="{ active: trendPeriod === 'week' }" @click="changeTrendPeriod('week')">周</text>
|
||||
<text class="control-btn" :class="{ active: trendPeriod === 'month' }" @click="changeTrendPeriod('month')">月</text>
|
||||
<text class="control-btn" :class="{ active: trendPeriod === 'quarter' }" @click="changeTrendPeriod('quarter')">季</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-container">
|
||||
<view class="chart-legend">
|
||||
<view class="legend-item">
|
||||
<view class="legend-color sales"></view>
|
||||
<text class="legend-text">销售额</text>
|
||||
</view>
|
||||
<view class="legend-item">
|
||||
<view class="legend-color orders"></view>
|
||||
<text class="legend-text">订单量</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart-area">
|
||||
<view class="chart-bars">
|
||||
<view v-for="(data, index) in trendData" :key="index" class="bar-group">
|
||||
<view class="bar sales" :style="{ height: (data.sales / maxSales * 100) + '%' }"></view>
|
||||
<view class="bar orders" :style="{ height: (data.orders / maxOrders * 100) + '%' }"></view>
|
||||
<text class="bar-label">{{ data.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分析工具 -->
|
||||
<view class="analysis-tools">
|
||||
<view class="section-title">分析工具</view>
|
||||
<view class="tool-grid">
|
||||
<view class="tool-item" @click="goToTool('dashboard')">
|
||||
<text class="tool-icon">📊</text>
|
||||
<text class="tool-label">数据看板</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('funnel')">
|
||||
<text class="tool-icon">🔽</text>
|
||||
<text class="tool-label">转化漏斗</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('cohort')">
|
||||
<text class="tool-icon">👥</text>
|
||||
<text class="tool-label">用户留存</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('attribution')">
|
||||
<text class="tool-icon">🎯</text>
|
||||
<text class="tool-label">归因分析</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('segmentation')">
|
||||
<text class="tool-icon">🔍</text>
|
||||
<text class="tool-label">用户分群</text>
|
||||
</view>
|
||||
<view class="tool-item" @click="goToTool('prediction')">
|
||||
<text class="tool-icon">🔮</text>
|
||||
<text class="tool-label">预测分析</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="function-menu">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToDataSource">
|
||||
<text class="menu-icon">🗄️</text>
|
||||
<text class="menu-label">数据源管理</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToAlerts">
|
||||
<text class="menu-icon">🚨</text>
|
||||
<text class="menu-label">数据预警</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToExport">
|
||||
<text class="menu-icon">📤</text>
|
||||
<text class="menu-label">数据导出</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToHelp">
|
||||
<text class="menu-icon">❓</text>
|
||||
<text class="menu-label">帮助中心</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToFeedback">
|
||||
<text class="menu-icon">💬</text>
|
||||
<text class="menu-label">意见反馈</text>
|
||||
<text class="menu-arrow">></text>
|
||||
<!-- 功能菜单 -->
|
||||
<view class="function-menu">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToDataSource">
|
||||
<text class="menu-icon">🗄️</text>
|
||||
<text class="menu-label">数据源管理</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToAlerts">
|
||||
<text class="menu-icon">🚨</text>
|
||||
<text class="menu-label">数据预警</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToExport">
|
||||
<text class="menu-icon">📤</text>
|
||||
<text class="menu-label">数据导出</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToHelp">
|
||||
<text class="menu-icon">❓</text>
|
||||
<text class="menu-label">帮助中心</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToFeedback">
|
||||
<text class="menu-icon">💬</text>
|
||||
<text class="menu-label">意见反馈</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -396,7 +396,7 @@ async function loadAnalystInfo() {
|
||||
.eq('id', currentUserId.value)
|
||||
const rows: Array<any> = Array.isArray(res.data) ? (res.data as Array<any>) : []
|
||||
if (rows.length > 0) {
|
||||
analystInfo.value = {
|
||||
analystInfo.value = {
|
||||
...(analystInfo.value as any),
|
||||
id: `${rows[0].id}`,
|
||||
phone: `${rows[0].phone || ''}`,
|
||||
|
||||
Reference in New Issue
Block a user