huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据分析ui补充完善，接入数据库

Browse Source
This commit is contained in:
comlibmb
2026-01-31 21:47:42 +08:00
parent 8f181b2b6a
commit 6716398175
71 changed files with 6501 additions and 10593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

728
pages/mall/analytics/insight-detail.uvue
View File

@@ -1,6 +1,5 @@
<template>
<view class="page" @click="closeMoreMenu">
<!-- 固定顶部导航栏 -->
<AnalyticsTopBar
:title="'数据洞察详情'"
:lastUpdateTime="lastUpdateTime"
@@ -14,19 +13,16 @@
@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="container">
<view class="card card-full">
<view class="card-head">
<text class="card-title">{{ insight.title || '洞察详情' }}</text>
@@ -34,237 +30,236 @@
<text class="badge" :class="'badge-' + (insight.type || 'info')">{{ getInsightTypeText(insight.type) }}</text>
<text class="badge badge-impact" :class="'impact-' + (insight.impact || 'medium')">{{ getImpactText(insight.impact) }}</text>
<text class="meta-time" v-if="insight.created_at">{{ formatTime(insight.created_at) }}</text>
</view>
</view>
</view>
</view>
<view v-if="loading" class="state">
<text class="state-text">加载中...</text>
</view>
</view>
<view v-else-if="errorMsg" class="state">
<text class="state-text">{{ errorMsg }}</text>
</view>
</view>
<view v-else class="content">
<text class="content-text">{{ insight.content }}</text>
</view>
</view>
</view>
</view>
<!-- 关联报表（可选） -->
<view class="card" v-if="relatedReport.id">
<view class="card-head">
<view class="card-head">
<text class="card-title">关联报表</text>
<text class="card-desc">{{ relatedReport.type }} · {{ relatedReport.period }}</text>
</view>
</view>
<view class="report-row" @click="goToReportDetail">
<view class="report-icon">📄</view>
<view class="report-info">
<text class="report-title">{{ relatedReport.title }}</text>
<text class="report-time">{{ relatedReport.generated_at ? formatTime(relatedReport.generated_at) : '' }}</text>
</view>
</view>
<text class="report-arrow">></text>
</view>
</view>
</view>
</view>
<!-- 留白 -->
<view style="height: 24px;"></view>
<view style="height: 24px;"></view>
</view>
</view>
</view>
</view>
</template>
<script lang="uts">
<script setup lang="uts">
import { onLoad, onShow, reactive, ref } from 'vue'
import AnalyticsSidebarMenu from '@/components/analytics/AnalyticsSidebarMenu.uvue'
import AnalyticsTopBar from '@/components/analytics/AnalyticsTopBar.uvue'
import { fetchInsightDetail, fetchRelatedReport } from '@/services/analytics/insightDetailService.uts'
import { mapAnalyticsError } from '@/services/analytics/errorMapper.uts'
type InsightDetail = {
id: string
report_id: string
type: string
impact: string
title: string
content: string
created_at: string
}
import type { InsightDetail, RelatedReport } from '@/types/analytics/insight.uts'
type RelatedReport = {
id: string
title: string
type: string
period: string
generated_at: string
}
const lastUpdateTime = ref('')
const showMoreMenu = ref(false)
const showSidebarMenu = ref(false)
const currentPath = ref('/pages/mall/analytics/insight-detail')
const insightId = ref('')
const loading = ref(false)
const errorMsg = ref('')
export default {
components: {
AnalyticsSidebarMenu,
AnalyticsTopBar
},
data() {
return {
lastUpdateTime: '',
showMoreMenu: false,
showSidebarMenu: false,
currentPath: '/pages/mall/analytics/insight-detail',
insightId: '',
loading: false,
errorMsg: '',
insight: {
id: '',
report_id: '',
type: 'info',
impact: 'medium',
title: '',
content: '',
created_at: ''
} as InsightDetail,
relatedReport: {
id: '',
title: '',
type: '',
period: '',
generated_at: ''
} as RelatedReport
}
},
const insight = reactive<InsightDetail>({
id: '',
report_id: '',
type: 'info',
impact: 'medium',
title: '',
content: '',
created_at: ''
})
onLoad(options: any) {
this.currentPath = '/pages/mall/analytics/insight-detail'
this.updateTime()
const insightId = (options.insightId || options.id) as string
if (!insightId) {
uni.showToast({ title: '缺少洞察ID', icon: 'none' })
setTimeout(() => uni.navigateBack(), 1500)
const relatedReport = reactive<RelatedReport>({
id: '',
title: '',
type: '',
period: '',
generated_at: ''
})
onLoad((options: any) => {
currentPath.value = '/pages/mall/analytics/insight-detail'
updateTime()
const iid = (options.insightId || options.id) as string
if (!iid) {
uni.showToast({ title: '缺少洞察ID', icon: 'none' })
setTimeout(() => uni.navigateBack(), 1500)
return
}
insightId.value = iid
void loadInsightDetail()
})
onShow(() => {
currentPath.value = '/pages/mall/analytics/insight-detail'
})
async function loadInsightDetail() {
try {
loading.value = true
errorMsg.value = ''
updateTime()
const data = await fetchInsightDetail(insightId.value)
if (data == null) {
errorMsg.value = '洞察不存在或无权限访问'
return
}
this.insightId = insightId
this.loadInsightDetail()
},
onShow() {
this.currentPath = '/pages/mall/analytics/insight-detail'
},
insight.id = data.id
insight.report_id = data.report_id
insight.type = data.type
insight.impact = data.impact
insight.title = data.title
insight.content = data.content
insight.created_at = data.created_at
methods: {
async loadInsightDetail() {
relatedReport.id = ''
relatedReport.title = ''
relatedReport.type = ''
relatedReport.period = ''
relatedReport.generated_at = ''
if (insight.report_id) {
try {
this.loading = true
this.errorMsg = ''
this.updateTime()
const insight = await fetchInsightDetail(this.insightId)
if (insight == null) {
this.errorMsg = '洞察不存在或无权限访问'
return
}
this.insight = insight
// 关联报表（可选）
this.relatedReport = { id: '', title: '', type: '', period: '', generated_at: '' } as RelatedReport
if (this.insight.report_id) {
try {
const related = await fetchRelatedReport(this.insight.report_id)
if (related != null) {
this.relatedReport = related
}
} catch (e) {
console.error('loadInsightDetail related report error', e)
}
const related = await fetchRelatedReport(insight.report_id)
if (related != null) {
relatedReport.id = related.id
relatedReport.title = related.title
relatedReport.type = related.type
relatedReport.period = related.period
relatedReport.generated_at = related.generated_at
}
} catch (e) {
console.error('loadInsightDetail failed', e)
this.errorMsg = mapAnalyticsError(e, { fallbackMessage: '加载失败，请稍后重试' })
} finally {
this.loading = false
console.error('loadInsightDetail related report error', e)
}
},
refreshData() {
this.loadInsightDetail()
uni.showToast({ title: '已刷新', icon: 'success' })
},
exportReport() {
uni.showActionSheet({
itemList: ['导出Excel', '导出PDF', '导出图片'],
success: () => uni.showToast({ title: '导出成功', icon: 'success' })
})
},
updateTime() {
const now = new Date()
const hh = now.getHours().toString().padStart(2, '0')
const mm = now.getMinutes().toString().padStart(2, '0')
this.lastUpdateTime = `${hh}:${mm}`
},
formatTime(timeStr: string): string {
if (!timeStr) return ''
return `${timeStr}`.replace('T', ' ').split('.')[0]
},
getInsightTypeText(type: string): string {
const t = `${type || 'info'}`
const map: Record<string, string> = {
positive: '正向',
warning: '预警',
negative: '风险',
info: '信息'
}
return map[t] || '信息'
},
getImpactText(impact: string): string {
const impacts: Record<string, string> = {
high: '高影响',
medium: '中影响',
low: '低影响'
}
return impacts[impact || 'medium'] || '中影响'
},
goToReportDetail() {
if (!this.relatedReport.id) return
uni.navigateTo({
url: `/pages/mall/analytics/report-detail?reportId=${this.relatedReport.id}`
})
},
handleMenu() {
this.showSidebarMenu = true
},
handleSidebarUpdate(visible: boolean) {
this.showSidebarMenu = visible
},
toggleMoreMenu() {
this.showMoreMenu = !this.showMoreMenu
},
closeMoreMenu() {
this.showMoreMenu = false
},
handleSearch() {
uni.showToast({ title: '搜索', icon: 'none' })
},
handleNotification() {
uni.showToast({ title: '通知', icon: 'none' })
},
handleFullscreen() {
uni.showToast({ title: '全屏', icon: 'none' })
},
handleMobile() {
uni.showToast({ title: '移动端', icon: 'none' })
},
handleDropdown() {
uni.showToast({ title: '下拉菜单', icon: 'none' })
},
handleSettings() {
uni.showToast({ title: '设置', icon: 'none' })
}
} catch (e) {
console.error('loadInsightDetail failed', e)
errorMsg.value = mapAnalyticsError(e, { fallbackMessage: '加载失败，请稍后重试' })
} finally {
loading.value = false
}
}
function refreshData() {
void loadInsightDetail()
uni.showToast({ title: '已刷新', icon: 'success' })
}
function exportReport() {
uni.showActionSheet({
itemList: ['导出Excel', '导出PDF', '导出图片'],
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 formatTime(timeStr: string): string {
if (!timeStr) return ''
return `${timeStr}`.replace('T', ' ').split('.')[0]
}
function getInsightTypeText(type: string): string {
const t = `${type || 'info'}`
const map: Record<string, string> = {
positive: '正向',
warning: '预警',
negative: '风险',
info: '信息'
}
return map[t] || '信息'
}
function getImpactText(impact: string): string {
const impacts: Record<string, string> = {
high: '高影响',
medium: '中影响',
low: '低影响'
}
return impacts[impact || 'medium'] || '中影响'
}
function goToReportDetail() {
if (!relatedReport.id) return
uni.navigateTo({
url: `/pages/mall/analytics/report-detail?reportId=${relatedReport.id}`
})
}
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>
@@ -273,7 +268,6 @@ export default {
background: #f6f7fb;
}
/* 页面布局：宽屏时侧边栏+内容，窄屏时全屏内容 */
.page-layout {
display: flex;
flex-direction: row !important;
@@ -285,7 +279,7 @@ export default {
min-width: 0;
display: flex;
flex-direction: column;
padding-top: 64px; /* 为固定顶部导航栏留出空间 */
padding-top: 64px;
}
.container {
@@ -295,344 +289,4 @@ export default {
padding: 16px 16px 28px;
box-sizing: border-box;
}
/* 顶部栏 */
.topbar {
display: flex;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border-radius: 14px;
border: 1px solid rgba(0,0,0,0.06);
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.topbar-left {
display: flex;
flex-direction: row !important;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.menu-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.menu-icon:active {
background: #e5e7eb;
transform: scale(0.95);
}
.menu-icon .icon {
font-size: 18px;
color: #111;
line-height: 1;
}
.title-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.title {
font-size: 18px;
font-weight: 700;
color: #111;
max-width: 420px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subtitle {
font-size: 12px;
color: rgba(0,0,0,0.55);
max-width: 420px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-right {
display: flex;
flex-direction: row !important;
gap: 8px;
align-items: center;
flex-wrap: nowrap;
flex-shrink: 0;
position: relative;
white-space: nowrap;
}
.icon-btn-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.icon-btn-icon:active {
background: #e5e7eb;
transform: scale(0.95);
}
.icon-btn-icon .icon {
font-size: 16px;
line-height: 1;
}
.more-btn {
display: none;
width: 32px;
height: 32px;
border-radius: 8px;
background: #f3f4f6;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: all 0.2s;
flex-shrink: 0;
}
.more-btn.active {
background: #e5e7eb;
}
.more-btn .icon {
font-size: 18px;
line-height: 1;
color: #111;
}
/* 时间维度 tabs */
.tabs {
margin-top: 12px;
display: flex;
flex-direction: row !important;
gap: 8px;
padding: 8px;
background: #fff;
border-radius: 14px;
border: 1px solid rgba(0,0,0,0.06);
overflow-x: auto;
flex-wrap: wrap;
justify-content: center;
}
.tab {
padding: 8px 12px;
border-radius: 999px;
background: #f3f4f6;
color: #111;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
.tab.active {
background: #111;
color: #fff;
}
/* 卡片 */
.card {
margin-top: 12px;
background: #fff;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
padding: 14px;
box-sizing: border-box;
}
.card-full {
width: 100%;
}
.card-head {
display: flex;
flex-direction: row !important;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px;
}
.card-title {
font-size: 14px;
font-weight: 600;
color: #111;
}
.card-desc {
font-size: 12px;
color: rgba(0,0,0,0.55);
}
.chart-box {
width: 100%;
height: 360px;
}
/* 建议列表 */
.suggestion-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.suggestion-item {
display: flex;
flex-direction: row !important;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: #f9fafb;
border-radius: 8px;
}
.suggestion-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.suggestion-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.suggestion-title {
font-size: 14px;
font-weight: 600;
color: #111;
}
.suggestion-desc {
font-size: 12px;
color: rgba(0,0,0,0.65);
line-height: 1.5;
}
/* 异常列表 */
.anomaly-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.anomaly-item {
display: flex;
flex-direction: row !important;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: #fef2f2;
border-radius: 8px;
border-left: 3px solid #ef4444;
}
.anomaly-level {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.anomaly-level.critical {
background: #fee2e2;
color: #dc2626;
}
.anomaly-level.warning {
background: #fef3c7;
color: #d97706;
}
.anomaly-level.info {
background: #dbeafe;
color: #2563eb;
}
.anomaly-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.anomaly-title {
font-size: 14px;
font-weight: 600;
color: #111;
}
.anomaly-desc {
font-size: 12px;
color: rgba(0,0,0,0.65);
line-height: 1.5;
}
.anomaly-time {
font-size: 11px;
color: rgba(0,0,0,0.45);
}
/* 响应式 */
/* 响应式：窄屏时全屏显示 */
@media screen and (max-width: 959px) {
.page-layout {
flex-direction: column !important;
}
.main-content {
width: 100%;
}
}
@media screen and (max-width: 960px) {
.title,
.subtitle {
max-width: 200px;
}
.topbar-right .btn-hidden {
display: none !important;
}
.more-btn {
display: flex !important;
}
}
</style>