comclib
c02029a5f3
- Spring Boot 后端服务 (hss-home-service) - delivery-miniapp 配送小程序 - website 官网 (Nuxt) - docs 架构设计文档 - Docker 容器化部署配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
66 lines
2.2 KiB
Vue
66 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useApi } from '~/composables/useApi'
|
|
|
|
const { get } = useApi()
|
|
|
|
const stats = ref([
|
|
{ label: '今日工单', value: 0, suffix: '单' },
|
|
{ label: '进行中', value: 0, suffix: '单' },
|
|
{ label: '服务完成率', value: 0, suffix: '%' },
|
|
{ label: '异常工单', value: 0, suffix: '单' },
|
|
])
|
|
|
|
function animate(el: { value: number }, target: number, duration = 1200) {
|
|
const start = performance.now()
|
|
function tick(now: number) {
|
|
const p = Math.min((now - start) / duration, 1)
|
|
const rounded = Math.round(target * p * 10) / 10
|
|
if (target - rounded < 1) { el.value = target; return }
|
|
el.value = rounded
|
|
if (p < 1) requestAnimationFrame(tick)
|
|
}
|
|
requestAnimationFrame(tick)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const [d, q] = await Promise.all([
|
|
get<any>('/admin/dashboard').catch(() => ({})),
|
|
get<any>('/analytics/quality').catch(() => ({})),
|
|
])
|
|
const targets = [
|
|
(d?.todayOrders as number) || 0,
|
|
(d?.inProgress as number) || 0,
|
|
(q?.serviceCompletionRate as number) || 0,
|
|
(d?.exceptions as number) || 0,
|
|
]
|
|
const obs = new IntersectionObserver((entries) => {
|
|
entries.forEach(e => {
|
|
if (e.isIntersecting) {
|
|
stats.value.forEach((s, i) => { s.value = 0; animate(s, targets[i]) })
|
|
obs.disconnect()
|
|
}
|
|
})
|
|
}, { threshold: 0.3 })
|
|
const el = document.querySelector('#dashboard-section')
|
|
if (el) obs.observe(el)
|
|
} catch (_) {}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div id="dashboard-section" class="space-y-6">
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div v-for="s in stats" :key="s.label" class="bg-white rounded-2xl p-6 text-center shadow-sm border border-gray-50">
|
|
<div class="text-3xl font-bold font-mono text-primary mb-2">
|
|
{{ s.value }}{{ s.suffix }}
|
|
</div>
|
|
<div class="text-sm text-text-secondary">{{ s.label }}</div>
|
|
</div>
|
|
</div>
|
|
<img src="https://loremflickr.com/960/300/technology" alt="数据看板示意图（示意素材，待替换）"
|
|
class="w-full rounded-xl shadow-sm" width="960" height="300" loading="lazy" />
|
|
</div>
|
|
</template>
|