feat(home): implement workbench dashboard
This commit is contained in:
yelan
@@ -1,42 +1,263 @@
|
||||
import { request } from '@/utils/request'
|
||||
|
||||
import type { WorkbenchOverviewResponse } from './types'
|
||||
import type {
|
||||
HomeRankingPeriod,
|
||||
WorkbenchCampus,
|
||||
WorkbenchDocumentRanking,
|
||||
WorkbenchOverviewQuery,
|
||||
WorkbenchOverviewResponse,
|
||||
WorkbenchTodoTask,
|
||||
WorkbenchTrendPoint,
|
||||
} from './types'
|
||||
|
||||
const useMockData = import.meta.env.VITE_USE_MOCK !== 'false'
|
||||
|
||||
const mockOverview: WorkbenchOverviewResponse = {
|
||||
interface MockCampusOverview {
|
||||
summary: WorkbenchOverviewResponse['summary']
|
||||
trend: WorkbenchTrendPoint[]
|
||||
todos: WorkbenchTodoTask[]
|
||||
ranking: Array<Omit<WorkbenchDocumentRanking, 'signedCount'> & { baseCount: number }>
|
||||
}
|
||||
|
||||
const mockCampusOverviews: Record<WorkbenchCampus, MockCampusOverview> = {
|
||||
本部院区: {
|
||||
summary: {
|
||||
pendingTasks: 18,
|
||||
todaySigned: 36,
|
||||
abnormalTasks: 2,
|
||||
documentCount: 128,
|
||||
pendingPatientSigning: 18,
|
||||
todayOverdue: 2,
|
||||
availableTemplates: 128,
|
||||
coveredDepartments: 9,
|
||||
},
|
||||
recentTasks: [
|
||||
trend: [
|
||||
{ label: '8/21', value: 24 },
|
||||
{ label: '8/22', value: 31 },
|
||||
{ label: '8/23', value: 28 },
|
||||
{ label: '8/24', value: 35 },
|
||||
{ label: '8/25', value: 32 },
|
||||
{ label: '8/26', value: 39 },
|
||||
{ label: '8/27', value: 36 },
|
||||
],
|
||||
todos: [
|
||||
{
|
||||
id: 'task-001',
|
||||
patientName: '李某某',
|
||||
visitNo: 'ZY20260827001',
|
||||
documentName: '住院患者知情同意书',
|
||||
id: 'T0818003',
|
||||
patientId: 'P202610005',
|
||||
patientName: '陈志强',
|
||||
documentName: '住院须知及告知书',
|
||||
department: '消化内科',
|
||||
status: 'pending',
|
||||
updatedAt: '2026-08-27 09:30',
|
||||
method: 'pad',
|
||||
updatedAt: '2026-08-27 11:20',
|
||||
},
|
||||
{
|
||||
id: 'task-002',
|
||||
patientName: '王某某',
|
||||
visitNo: 'JZ20260827018',
|
||||
documentName: '急诊留观知情同意书',
|
||||
department: '儿科急诊',
|
||||
status: 'signed',
|
||||
updatedAt: '2026-08-27 09:12',
|
||||
id: 'T0818002',
|
||||
patientId: 'P202610002',
|
||||
patientName: '李淑芬',
|
||||
documentName: 'MRI 磁共振检查知情同意书',
|
||||
department: '放射科',
|
||||
status: 'pending',
|
||||
method: 'sms',
|
||||
updatedAt: '2026-08-27 10:05',
|
||||
},
|
||||
{
|
||||
id: 'T0815001',
|
||||
patientId: 'P202610001',
|
||||
patientName: '王建国',
|
||||
documentName: '心包穿刺知情同意书',
|
||||
department: '心内科',
|
||||
status: 'overdue',
|
||||
method: 'sms',
|
||||
updatedAt: '2026-08-27 09:40',
|
||||
},
|
||||
],
|
||||
ranking: [
|
||||
{ id: 'doc-001', documentName: '住院患者知情同意书', department: '全院通用', baseCount: 58 },
|
||||
{ id: 'doc-002', documentName: '入院须知及告知书', department: '全院通用', baseCount: 51 },
|
||||
{
|
||||
id: 'doc-003',
|
||||
documentName: 'MRI 磁共振检查知情同意书',
|
||||
department: '放射科',
|
||||
baseCount: 43,
|
||||
},
|
||||
{ id: 'doc-004', documentName: '手术知情同意书', department: '普外科', baseCount: 39 },
|
||||
{ id: 'doc-005', documentName: '麻醉知情同意书', department: '麻醉科', baseCount: 35 },
|
||||
{ id: 'doc-006', documentName: '患者授权委托书', department: '医务处', baseCount: 31 },
|
||||
{ id: 'doc-007', documentName: '输血治疗知情同意书', department: '血液科', baseCount: 27 },
|
||||
{ id: 'doc-008', documentName: '内镜检查知情同意书', department: '消化内科', baseCount: 24 },
|
||||
{ id: 'doc-009', documentName: '介入治疗知情同意书', department: '心内科', baseCount: 21 },
|
||||
{ id: 'doc-010', documentName: '特殊检查风险告知书', department: '影像科', baseCount: 18 },
|
||||
],
|
||||
},
|
||||
东院区: {
|
||||
summary: {
|
||||
todaySigned: 22,
|
||||
pendingPatientSigning: 11,
|
||||
todayOverdue: 1,
|
||||
availableTemplates: 76,
|
||||
coveredDepartments: 6,
|
||||
},
|
||||
trend: [
|
||||
{ label: '8/21', value: 15 },
|
||||
{ label: '8/22', value: 18 },
|
||||
{ label: '8/23', value: 17 },
|
||||
{ label: '8/24', value: 23 },
|
||||
{ label: '8/25', value: 20 },
|
||||
{ label: '8/26', value: 25 },
|
||||
{ label: '8/27', value: 22 },
|
||||
],
|
||||
todos: [
|
||||
{
|
||||
id: 'T0818001',
|
||||
patientId: 'P202610004',
|
||||
patientName: '赵美英',
|
||||
documentName: '体检报告发放及知情同意书',
|
||||
department: '健康管理中心',
|
||||
status: 'pending',
|
||||
method: 'pad',
|
||||
updatedAt: '2026-08-27 09:12',
|
||||
},
|
||||
{
|
||||
id: 'T0818011',
|
||||
patientId: 'P202610011',
|
||||
patientName: '周雅琴',
|
||||
documentName: '检查前注意事项告知书',
|
||||
department: '体检中心',
|
||||
status: 'overdue',
|
||||
method: 'sms',
|
||||
updatedAt: '2026-08-27 08:30',
|
||||
},
|
||||
],
|
||||
ranking: [
|
||||
{
|
||||
id: 'doc-011',
|
||||
documentName: '体检报告发放及知情同意书',
|
||||
department: '健康管理中心',
|
||||
baseCount: 46,
|
||||
},
|
||||
{ id: 'doc-012', documentName: '检前告知书', department: '健康管理中心', baseCount: 39 },
|
||||
{
|
||||
id: 'doc-013',
|
||||
documentName: '超声检查知情同意书',
|
||||
department: '超声医学科',
|
||||
baseCount: 32,
|
||||
},
|
||||
{
|
||||
id: 'doc-014',
|
||||
documentName: '胃肠镜检查知情同意书',
|
||||
department: '消化内科',
|
||||
baseCount: 28,
|
||||
},
|
||||
{ id: 'doc-015', documentName: '采血及检验告知书', department: '检验科', baseCount: 25 },
|
||||
{ id: 'doc-016', documentName: '影像检查告知书', department: '影像科', baseCount: 21 },
|
||||
{ id: 'doc-017', documentName: '健康体检知情同意书', department: '体检中心', baseCount: 19 },
|
||||
{ id: 'doc-018', documentName: '隐私保护告知书', department: '健康管理中心', baseCount: 16 },
|
||||
{ id: 'doc-019', documentName: '麻醉检查知情同意书', department: '麻醉科', baseCount: 14 },
|
||||
{ id: 'doc-020', documentName: '报告领取授权书', department: '健康管理中心', baseCount: 12 },
|
||||
],
|
||||
},
|
||||
西院区: {
|
||||
summary: {
|
||||
todaySigned: 17,
|
||||
pendingPatientSigning: 9,
|
||||
todayOverdue: 2,
|
||||
availableTemplates: 54,
|
||||
coveredDepartments: 5,
|
||||
},
|
||||
trend: [
|
||||
{ label: '8/21', value: 11 },
|
||||
{ label: '8/22', value: 14 },
|
||||
{ label: '8/23', value: 13 },
|
||||
{ label: '8/24', value: 16 },
|
||||
{ label: '8/25', value: 15 },
|
||||
{ label: '8/26', value: 19 },
|
||||
{ label: '8/27', value: 17 },
|
||||
],
|
||||
todos: [
|
||||
{
|
||||
id: 'T0818021',
|
||||
patientId: 'P202610021',
|
||||
patientName: '孙浩然',
|
||||
documentName: '心脏介入手术知情同意书',
|
||||
department: '心内科',
|
||||
status: 'pending',
|
||||
method: 'pad',
|
||||
updatedAt: '2026-08-27 10:15',
|
||||
},
|
||||
{
|
||||
id: 'T0818022',
|
||||
patientId: 'P202610022',
|
||||
patientName: '刘晓琴',
|
||||
documentName: '骨科手术知情同意书',
|
||||
department: '骨科',
|
||||
status: 'pending',
|
||||
method: 'sms',
|
||||
updatedAt: '2026-08-27 09:52',
|
||||
},
|
||||
{
|
||||
id: 'T0818023',
|
||||
patientId: 'P202610023',
|
||||
patientName: '何文博',
|
||||
documentName: '术前麻醉访视告知书',
|
||||
department: '麻醉科',
|
||||
status: 'overdue',
|
||||
method: 'pad',
|
||||
updatedAt: '2026-08-27 08:05',
|
||||
},
|
||||
],
|
||||
ranking: [
|
||||
{
|
||||
id: 'doc-021',
|
||||
documentName: '心脏介入手术知情同意书',
|
||||
department: '心内科',
|
||||
baseCount: 37,
|
||||
},
|
||||
{ id: 'doc-022', documentName: '骨科手术知情同意书', department: '骨科', baseCount: 33 },
|
||||
{ id: 'doc-023', documentName: '术前麻醉访视告知书', department: '麻醉科', baseCount: 28 },
|
||||
{ id: 'doc-024', documentName: '住院患者知情同意书', department: '全院通用', baseCount: 25 },
|
||||
{ id: 'doc-025', documentName: '输血治疗知情同意书', department: '血液科', baseCount: 22 },
|
||||
{ id: 'doc-026', documentName: '介入治疗知情同意书', department: '心内科', baseCount: 20 },
|
||||
{ id: 'doc-027', documentName: '术后康复告知书', department: '骨科', baseCount: 18 },
|
||||
{ id: 'doc-028', documentName: '特殊检查风险告知书', department: '影像科', baseCount: 16 },
|
||||
{ id: 'doc-029', documentName: '患者授权委托书', department: '医务处', baseCount: 14 },
|
||||
{ id: 'doc-030', documentName: '手术部位标识确认书', department: '手术部', baseCount: 12 },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export function getWorkbenchOverview(): Promise<WorkbenchOverviewResponse> {
|
||||
function getPeriodFactor(period: HomeRankingPeriod) {
|
||||
return period === 7 ? 1 : period === 14 ? 2 : 3.5
|
||||
}
|
||||
|
||||
function createRanking(
|
||||
rows: MockCampusOverview['ranking'],
|
||||
period: HomeRankingPeriod,
|
||||
): WorkbenchDocumentRanking[] {
|
||||
const factor = getPeriodFactor(period)
|
||||
|
||||
return rows
|
||||
.map((row, index) => ({
|
||||
id: row.id,
|
||||
documentName: row.documentName,
|
||||
department: row.department,
|
||||
signedCount: Math.round(row.baseCount * factor + (index % 3)),
|
||||
}))
|
||||
.sort((left, right) => right.signedCount - left.signedCount)
|
||||
}
|
||||
|
||||
export function getWorkbenchOverview(
|
||||
query: WorkbenchOverviewQuery,
|
||||
): Promise<WorkbenchOverviewResponse> {
|
||||
if (useMockData) {
|
||||
return Promise.resolve(mockOverview)
|
||||
const overview = mockCampusOverviews[query.campus] ?? mockCampusOverviews['本部院区']
|
||||
|
||||
return Promise.resolve({
|
||||
summary: { ...overview.summary },
|
||||
trend: overview.trend.map((point) => ({ ...point })),
|
||||
todos: overview.todos.map((task) => ({ ...task })),
|
||||
documentRanking: createRanking(overview.ranking, query.rankingPeriod),
|
||||
})
|
||||
}
|
||||
|
||||
return request.get<WorkbenchOverviewResponse>('/workbench/overview')
|
||||
return request.get<WorkbenchOverviewResponse>('/workbench/overview', {
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,12 +1,22 @@
|
||||
import type { PageQuery, PageResult } from '@/types/common'
|
||||
|
||||
export type WorkbenchCampus = '本部院区' | '东院区' | '西院区'
|
||||
|
||||
export type HomeRankingPeriod = 7 | 14 | 30
|
||||
|
||||
export interface WorkbenchOverviewQuery {
|
||||
campus: WorkbenchCampus
|
||||
rankingPeriod: HomeRankingPeriod
|
||||
}
|
||||
|
||||
export type SigningTaskStatus = 'pending' | 'signing' | 'signed' | 'rejected' | 'expired'
|
||||
|
||||
export interface WorkbenchSummary {
|
||||
pendingTasks: number
|
||||
todaySigned: number
|
||||
abnormalTasks: number
|
||||
documentCount: number
|
||||
pendingPatientSigning: number
|
||||
todayOverdue: number
|
||||
availableTemplates: number
|
||||
coveredDepartments: number
|
||||
}
|
||||
|
||||
export interface WorkbenchTask {
|
||||
@@ -19,9 +29,38 @@ export interface WorkbenchTask {
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export type WorkbenchTodoStatus = 'pending' | 'overdue'
|
||||
|
||||
export type SigningMethod = 'pad' | 'sms'
|
||||
|
||||
export interface WorkbenchTodoTask {
|
||||
id: string
|
||||
patientId: string
|
||||
patientName: string
|
||||
documentName: string
|
||||
department: string
|
||||
status: WorkbenchTodoStatus
|
||||
method: SigningMethod
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface WorkbenchTrendPoint {
|
||||
label: string
|
||||
value: number
|
||||
}
|
||||
|
||||
export interface WorkbenchDocumentRanking {
|
||||
id: string
|
||||
documentName: string
|
||||
department: string
|
||||
signedCount: number
|
||||
}
|
||||
|
||||
export interface WorkbenchOverviewResponse {
|
||||
summary: WorkbenchSummary
|
||||
recentTasks: WorkbenchTask[]
|
||||
trend: WorkbenchTrendPoint[]
|
||||
todos: WorkbenchTodoTask[]
|
||||
documentRanking: WorkbenchDocumentRanking[]
|
||||
}
|
||||
|
||||
export interface SigningTaskQuery extends PageQuery {
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import type { HomeDocumentRanking, HomeRankingPeriod } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
rows: HomeDocumentRanking[]
|
||||
period: HomeRankingPeriod
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:period': [period: HomeRankingPeriod]
|
||||
manage: []
|
||||
}>()
|
||||
|
||||
const periodOptions: Array<{ label: string; value: HomeRankingPeriod }> = [
|
||||
{ label: '近7天', value: 7 },
|
||||
{ label: '近14天', value: 14 },
|
||||
{ label: '近30天', value: 30 },
|
||||
]
|
||||
|
||||
const rankColors = ['#0e6e8c', '#18a0c0', '#0f9d6c', '#d9821f', '#7a4dbb', '#d0534f']
|
||||
|
||||
const maxCount = computed(() => Math.max(...props.rows.map((row) => row.signedCount), 1))
|
||||
|
||||
function getBarWidth(row: HomeDocumentRanking) {
|
||||
return `${Math.max((row.signedCount / maxCount.value) * 100, 1.5)}%`
|
||||
}
|
||||
|
||||
function getRankColor(index: number) {
|
||||
return rankColors[index % rankColors.length]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="home-panel ranking-panel">
|
||||
<div class="panel-heading">
|
||||
<h2>Top10 文档签署排名</h2>
|
||||
<span class="heading-spacer" />
|
||||
<div class="period-switch" role="group" aria-label="排名时间范围">
|
||||
<button
|
||||
v-for="option in periodOptions"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
class="period-button"
|
||||
:class="{ 'period-button--active': period === option.value }"
|
||||
@click="emit('update:period', option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="panel-more" @click="emit('manage')">管理 ›</button>
|
||||
</div>
|
||||
|
||||
<div v-if="rows.length" class="ranking-chart" role="list" aria-label="文档签署排名">
|
||||
<div
|
||||
v-for="(row, index) in rows"
|
||||
:key="row.id"
|
||||
class="ranking-row"
|
||||
role="listitem"
|
||||
:title="`${row.documentName}：${row.signedCount} 次（${row.department}）`"
|
||||
>
|
||||
<span class="ranking-number" :style="{ color: getRankColor(index) }">{{ index + 1 }}</span>
|
||||
<span class="ranking-name">{{ row.documentName }}</span>
|
||||
<span class="ranking-bar-track">
|
||||
<span
|
||||
class="ranking-bar"
|
||||
:style="{ width: getBarWidth(row), background: getRankColor(index) }"
|
||||
/>
|
||||
</span>
|
||||
<strong class="ranking-count" :style="{ color: getRankColor(index) }">
|
||||
{{ row.signedCount }}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="ranking-axis" aria-hidden="true">
|
||||
<span>0</span>
|
||||
<span>{{ Math.ceil(maxCount / 4) }}</span>
|
||||
<span>{{ Math.ceil(maxCount / 2) }}</span>
|
||||
<span>{{ Math.ceil((maxCount * 3) / 4) }}</span>
|
||||
<span>{{ maxCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="ranking-empty">暂无排名数据</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-panel {
|
||||
min-width: 0;
|
||||
padding: 16px 18px;
|
||||
background: var(--card);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--sh);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.panel-heading h2 {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.heading-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.panel-more {
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
color: var(--brand);
|
||||
font-size: 12px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.panel-more:hover {
|
||||
color: var(--brand-d);
|
||||
}
|
||||
|
||||
.period-switch {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--brand-l);
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.period-button {
|
||||
padding: 5px 12px;
|
||||
color: var(--mut);
|
||||
font-size: 11.5px;
|
||||
background: #fff;
|
||||
border-right: 1px solid var(--brand-l);
|
||||
}
|
||||
|
||||
.period-button:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.period-button:hover:not(.period-button--active) {
|
||||
color: var(--brand);
|
||||
background: var(--brand-l);
|
||||
}
|
||||
|
||||
.period-button--active {
|
||||
color: #fff;
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
.ranking-chart {
|
||||
display: flex;
|
||||
min-width: 680px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ranking-row {
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(170px, 220px) minmax(160px, 1fr) 42px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-height: 21px;
|
||||
}
|
||||
|
||||
.ranking-number {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ranking-name {
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ranking-bar-track {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
background-color: #f7fafb;
|
||||
background-image: linear-gradient(to right, transparent calc(25% - 1px), #eef4f6 25%);
|
||||
background-size: 25% 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ranking-bar {
|
||||
display: block;
|
||||
height: 100%;
|
||||
min-width: 2px;
|
||||
border-radius: 4px;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.ranking-count {
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ranking-axis {
|
||||
display: flex;
|
||||
grid-column: 3;
|
||||
justify-content: space-between;
|
||||
margin-left: 32px;
|
||||
padding-top: 1px;
|
||||
color: var(--mut);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ranking-empty {
|
||||
display: grid;
|
||||
min-height: 210px;
|
||||
color: var(--mut);
|
||||
font-size: 13px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.panel-heading {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.heading-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.period-switch {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.panel-more {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<script setup lang="ts">
|
||||
import type { HomeMetricCard as HomeMetricCardData } from '../types'
|
||||
|
||||
defineProps<{
|
||||
metric: HomeMetricCardData
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [key: HomeMetricCardData['key']]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="metric-card"
|
||||
:aria-label="`${metric.label}：${metric.value}`"
|
||||
@click="emit('click', metric.key)"
|
||||
>
|
||||
<span class="metric-icon" :class="`metric-icon--${metric.tone}`" aria-hidden="true">
|
||||
<svg
|
||||
v-if="metric.key === 'todaySigned'"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="m20 6-11 11-5-5"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
v-else-if="metric.key === 'pending'"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
|
||||
<path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
<svg
|
||||
v-else-if="metric.key === 'overdue'"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="metric-copy">
|
||||
<strong class="metric-value">{{ metric.value }}</strong>
|
||||
<span class="metric-label">{{ metric.label }}</span>
|
||||
<span class="metric-detail" :class="`metric-detail--${metric.detailTone}`">
|
||||
{{ metric.detail }}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.metric-card {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 16px 18px;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
background: var(--card);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--sh);
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
border-color: var(--brand);
|
||||
box-shadow: var(--sh-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.metric-card:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.metric-icon--success {
|
||||
color: var(--ok);
|
||||
background: var(--ok-l);
|
||||
}
|
||||
|
||||
.metric-icon--brand {
|
||||
color: var(--brand);
|
||||
background: var(--brand-l);
|
||||
}
|
||||
|
||||
.metric-icon--warning {
|
||||
color: var(--warn);
|
||||
background: var(--warn-l);
|
||||
}
|
||||
|
||||
.metric-icon--danger {
|
||||
color: var(--err);
|
||||
background: var(--err-l);
|
||||
}
|
||||
|
||||
.metric-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 26px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-detail {
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-detail--up {
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.metric-detail--muted {
|
||||
color: var(--mut);
|
||||
}
|
||||
|
||||
.metric-detail--down {
|
||||
color: var(--err);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import type { HomeTrendPoint } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
points: HomeTrendPoint[]
|
||||
}>()
|
||||
|
||||
const chartWidth = 620
|
||||
const chartHeight = 210
|
||||
const chartPadding = {
|
||||
top: 16,
|
||||
right: 18,
|
||||
bottom: 34,
|
||||
left: 42,
|
||||
}
|
||||
|
||||
const plotWidth = chartWidth - chartPadding.left - chartPadding.right
|
||||
const plotHeight = chartHeight - chartPadding.top - chartPadding.bottom
|
||||
|
||||
const chartMax = computed(() => {
|
||||
const highest = Math.max(...props.points.map((point) => point.value), 4)
|
||||
return Math.ceil((highest * 1.2) / 4) * 4
|
||||
})
|
||||
|
||||
const chartPoints = computed(() => {
|
||||
const count = props.points.length
|
||||
|
||||
return props.points.map((point, index) => ({
|
||||
...point,
|
||||
x: count > 1 ? chartPadding.left + (plotWidth * index) / (count - 1) : chartWidth / 2,
|
||||
y: chartPadding.top + plotHeight - (point.value / chartMax.value) * plotHeight,
|
||||
}))
|
||||
})
|
||||
|
||||
const linePath = computed(() =>
|
||||
chartPoints.value
|
||||
.map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x.toFixed(1)} ${point.y.toFixed(1)}`)
|
||||
.join(' '),
|
||||
)
|
||||
|
||||
const areaPath = computed(() => {
|
||||
const points = chartPoints.value
|
||||
const firstPoint = points[0]
|
||||
const lastPoint = points[points.length - 1]
|
||||
|
||||
if (!firstPoint || !lastPoint) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return `${linePath.value} L${lastPoint.x.toFixed(1)} ${chartPadding.top + plotHeight} L${firstPoint.x.toFixed(1)} ${chartPadding.top + plotHeight} Z`
|
||||
})
|
||||
|
||||
const gridLines = computed(() =>
|
||||
[0, 0.5, 1].map((ratio) => ({
|
||||
y: chartPadding.top + plotHeight * ratio,
|
||||
label: Math.round(chartMax.value * (1 - ratio)),
|
||||
})),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="home-panel trend-panel">
|
||||
<div class="panel-heading">
|
||||
<h2>近一周签署客户趋势</h2>
|
||||
<span>单位：人次</span>
|
||||
</div>
|
||||
|
||||
<div v-if="points.length" class="trend-chart-wrap">
|
||||
<svg class="trend-chart" viewBox="0 0 620 210" role="img" aria-label="近一周签署客户趋势图">
|
||||
<defs>
|
||||
<linearGradient id="home-trend-area" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#0e6e8c" stop-opacity="0.22" />
|
||||
<stop offset="1" stop-color="#0e6e8c" stop-opacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g class="trend-grid">
|
||||
<line
|
||||
v-for="line in gridLines"
|
||||
:key="line.y"
|
||||
:x1="chartPadding.left"
|
||||
:y1="line.y"
|
||||
:x2="chartWidth - chartPadding.right"
|
||||
:y2="line.y"
|
||||
/>
|
||||
<text
|
||||
v-for="line in gridLines"
|
||||
:key="`label-${line.y}`"
|
||||
:x="chartPadding.left - 10"
|
||||
:y="line.y + 4"
|
||||
text-anchor="end"
|
||||
>
|
||||
{{ line.label }}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<path class="trend-area" :d="areaPath" />
|
||||
<path class="trend-line" :d="linePath" />
|
||||
|
||||
<g v-for="point in chartPoints" :key="point.label" class="trend-point">
|
||||
<circle :cx="point.x" :cy="point.y" r="4" />
|
||||
<title>{{ point.label }}：{{ point.value }} 人次</title>
|
||||
<text :x="point.x" :y="chartHeight - 9" text-anchor="middle">{{ point.label }}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-else class="trend-empty">暂无趋势数据</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-panel {
|
||||
min-width: 0;
|
||||
padding: 16px 18px;
|
||||
background: var(--card);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--sh);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.panel-heading h2 {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.panel-heading span {
|
||||
margin-left: auto;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.trend-chart-wrap {
|
||||
width: 100%;
|
||||
min-height: 190px;
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.trend-grid line {
|
||||
stroke: #eef4f6;
|
||||
stroke-dasharray: 3 4;
|
||||
}
|
||||
|
||||
.trend-grid text,
|
||||
.trend-point text {
|
||||
fill: var(--mut);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.trend-area {
|
||||
fill: url('#home-trend-area');
|
||||
}
|
||||
|
||||
.trend-line {
|
||||
fill: none;
|
||||
stroke: var(--brand);
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.trend-point circle {
|
||||
fill: #fff;
|
||||
stroke: var(--brand);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.trend-point text {
|
||||
dominant-baseline: auto;
|
||||
}
|
||||
|
||||
.trend-empty {
|
||||
display: grid;
|
||||
min-height: 210px;
|
||||
color: var(--mut);
|
||||
font-size: 13px;
|
||||
place-items: center;
|
||||
}
|
||||
</style>
|
||||
215
clinical-web/src/views/workbench/home/components/TodoPanel.vue
Normal file
215
clinical-web/src/views/workbench/home/components/TodoPanel.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<script setup lang="ts">
|
||||
import type { HomeTodoItem } from '../types'
|
||||
|
||||
defineProps<{
|
||||
items: HomeTodoItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [item: HomeTodoItem]
|
||||
viewAll: []
|
||||
}>()
|
||||
|
||||
function getStatusLabel(item: HomeTodoItem) {
|
||||
if (item.status === 'overdue') {
|
||||
return '已超时'
|
||||
}
|
||||
|
||||
return item.method === 'pad' ? '待签署·手写板' : '待签署·短信'
|
||||
}
|
||||
|
||||
function getStatusClass(item: HomeTodoItem) {
|
||||
if (item.status === 'overdue') {
|
||||
return 'todo-status--overdue'
|
||||
}
|
||||
|
||||
return item.method === 'pad' ? 'todo-status--pad' : 'todo-status--sms'
|
||||
}
|
||||
|
||||
function getHint(item: HomeTodoItem) {
|
||||
return item.status === 'overdue' ? '⚠ 已超时，需重新发起' : '⏳ 等待患者签署'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="home-panel todo-panel">
|
||||
<div class="panel-heading">
|
||||
<h2>我的待办</h2>
|
||||
<button type="button" class="panel-more" @click="emit('viewAll')">全部 ›</button>
|
||||
</div>
|
||||
|
||||
<div v-if="items.length" class="todo-list">
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="todo-item"
|
||||
@click="emit('select', item)"
|
||||
>
|
||||
<span class="todo-row">
|
||||
<strong>{{ item.patientName }}</strong>
|
||||
<span class="patient-id">{{ item.patientId }}</span>
|
||||
<span class="todo-spacer" />
|
||||
<span class="todo-status" :class="getStatusClass(item)">
|
||||
{{ getStatusLabel(item) }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="todo-row todo-row--detail">
|
||||
<span class="todo-document">📄 {{ item.documentName }}</span>
|
||||
<span class="todo-hint">{{ getHint(item) }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="todo-empty">
|
||||
<span aria-hidden="true">🎉</span>
|
||||
<p>暂无待办</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-panel {
|
||||
min-width: 0;
|
||||
padding: 16px 18px;
|
||||
background: var(--card);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--sh);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.panel-heading h2 {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.panel-more {
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
color: var(--brand);
|
||||
font-size: 12px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.panel-more:hover {
|
||||
color: var(--brand-d);
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 9px 11px;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
background 0.15s ease;
|
||||
}
|
||||
|
||||
.todo-item:hover {
|
||||
background: #f8fcfd;
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.todo-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.todo-row strong {
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.patient-id {
|
||||
overflow: hidden;
|
||||
color: var(--mut);
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.todo-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.todo-status {
|
||||
flex-shrink: 0;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.todo-status--pad {
|
||||
color: var(--brand);
|
||||
background: var(--brand-l);
|
||||
}
|
||||
|
||||
.todo-status--sms {
|
||||
color: #7a4dbb;
|
||||
background: #f3ecfb;
|
||||
}
|
||||
|
||||
.todo-status--overdue {
|
||||
color: var(--err);
|
||||
background: var(--err-l);
|
||||
}
|
||||
|
||||
.todo-row--detail {
|
||||
margin-top: 5px;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.todo-document {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.todo-hint {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.todo-empty {
|
||||
display: grid;
|
||||
min-height: 202px;
|
||||
color: var(--mut);
|
||||
font-size: 13px;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.todo-empty span {
|
||||
margin-bottom: 7px;
|
||||
font-size: 34px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.todo-empty p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,321 @@
|
||||
<script setup lang="ts">
|
||||
import PagePlaceholder from '@/components/PagePlaceholder.vue'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { getWorkbenchOverview } from '@/api/workbench/home'
|
||||
import type { WorkbenchCampus, WorkbenchOverviewResponse } from '@/api/workbench/types'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
import DocumentRankingPanel from './components/DocumentRankingPanel.vue'
|
||||
import HomeMetricCard from './components/HomeMetricCard.vue'
|
||||
import SigningTrendPanel from './components/SigningTrendPanel.vue'
|
||||
import TodoPanel from './components/TodoPanel.vue'
|
||||
import type {
|
||||
HomeDocumentRanking,
|
||||
HomeMetricCard as HomeMetricCardData,
|
||||
HomeMetricKey,
|
||||
HomeRankingPeriod,
|
||||
HomeTodoItem,
|
||||
HomeTrendPoint,
|
||||
} from './types'
|
||||
|
||||
const router = useRouter()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const loading = ref(true)
|
||||
const loadFailed = ref(false)
|
||||
const overview = ref<WorkbenchOverviewResponse | null>(null)
|
||||
const rankingPeriod = ref<HomeRankingPeriod>(14)
|
||||
|
||||
const selectedCampus = computed<WorkbenchCampus>(() => appStore.selectedCampus)
|
||||
|
||||
const metrics = computed<HomeMetricCardData[]>(() => {
|
||||
const summary = overview.value?.summary
|
||||
|
||||
return [
|
||||
{
|
||||
key: 'todaySigned',
|
||||
label: '今日已签署（单）',
|
||||
value: summary?.todaySigned ?? 0,
|
||||
tone: 'success',
|
||||
detail: '▲ 较昨日 +2 · 点击查看',
|
||||
detailTone: 'up',
|
||||
},
|
||||
{
|
||||
key: 'pending',
|
||||
label: '待患者签署',
|
||||
value: summary?.pendingPatientSigning ?? 0,
|
||||
tone: 'brand',
|
||||
detail: '含手写板 / 短信 · 点击查看',
|
||||
detailTone: 'muted',
|
||||
},
|
||||
{
|
||||
key: 'overdue',
|
||||
label: '今日已超时',
|
||||
value: summary?.todayOverdue ?? 0,
|
||||
tone: 'danger',
|
||||
detail: '需重新发起 · 点击查看',
|
||||
detailTone: 'down',
|
||||
},
|
||||
{
|
||||
key: 'templates',
|
||||
label: '可用文档模板（份）',
|
||||
value: summary?.availableTemplates ?? 0,
|
||||
tone: 'brand',
|
||||
detail: `覆盖 ${summary?.coveredDepartments ?? 0} 个科室 · 点击查看`,
|
||||
detailTone: 'muted',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const trendPoints = computed<HomeTrendPoint[]>(() => overview.value?.trend ?? [])
|
||||
const todoItems = computed<HomeTodoItem[]>(() => overview.value?.todos ?? [])
|
||||
const rankingRows = computed<HomeDocumentRanking[]>(() => overview.value?.documentRanking ?? [])
|
||||
|
||||
async function loadOverview() {
|
||||
loading.value = true
|
||||
loadFailed.value = false
|
||||
|
||||
try {
|
||||
overview.value = await getWorkbenchOverview({
|
||||
campus: selectedCampus.value,
|
||||
rankingPeriod: rankingPeriod.value,
|
||||
})
|
||||
} catch {
|
||||
loadFailed.value = true
|
||||
ElMessage.error('首页数据加载失败，请稍后重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToSigning(query: Record<string, string> = {}) {
|
||||
void router.push({
|
||||
name: 'workbench-signing',
|
||||
query,
|
||||
})
|
||||
}
|
||||
|
||||
function handleMetricClick(key: HomeMetricKey) {
|
||||
if (key === 'templates') {
|
||||
void router.push({ name: 'management-documents' })
|
||||
return
|
||||
}
|
||||
|
||||
const statusMap: Record<Exclude<HomeMetricKey, 'templates'>, string> = {
|
||||
todaySigned: 'signed',
|
||||
pending: 'pending',
|
||||
overdue: 'expired',
|
||||
}
|
||||
|
||||
goToSigning({ status: statusMap[key], range: 'today' })
|
||||
}
|
||||
|
||||
function handleTodoSelect(item: HomeTodoItem) {
|
||||
goToSigning({ taskId: item.id })
|
||||
}
|
||||
|
||||
function handlePeriodChange(period: HomeRankingPeriod) {
|
||||
rankingPeriod.value = period
|
||||
}
|
||||
|
||||
function retryLoad() {
|
||||
void loadOverview()
|
||||
}
|
||||
|
||||
watch([selectedCampus, rankingPeriod], () => {
|
||||
void loadOverview()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
void loadOverview()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PagePlaceholder
|
||||
group="工作台"
|
||||
title="首页"
|
||||
icon="⌂"
|
||||
description="首页页面占位，待根据 Web 端需求实现。"
|
||||
<section class="home-page">
|
||||
<div v-if="loading" class="home-loading" aria-label="正在加载首页">
|
||||
<div class="metric-loading-grid">
|
||||
<span v-for="index in 4" :key="index" />
|
||||
</div>
|
||||
<div class="panel-loading-grid">
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
<span class="ranking-loading" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="loadFailed" class="home-error">
|
||||
<div class="error-icon" aria-hidden="true">!</div>
|
||||
<p>首页数据暂时无法加载</p>
|
||||
<button type="button" class="retry-button" @click="retryLoad">重新加载</button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="metric-grid">
|
||||
<HomeMetricCard
|
||||
v-for="metric in metrics"
|
||||
:key="metric.key"
|
||||
:metric="metric"
|
||||
@click="handleMetricClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="overview-grid">
|
||||
<SigningTrendPanel :points="trendPoints" />
|
||||
<TodoPanel :items="todoItems" @select="handleTodoSelect" @view-all="goToSigning()" />
|
||||
</div>
|
||||
|
||||
<DocumentRankingPanel
|
||||
:rows="rankingRows"
|
||||
:period="rankingPeriod"
|
||||
@update:period="handlePeriodChange"
|
||||
@manage="router.push({ name: 'management-documents' })"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.overview-grid > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ranking-panel {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.home-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metric-loading-grid,
|
||||
.panel-loading-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metric-loading-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.panel-loading-grid {
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
|
||||
}
|
||||
|
||||
.metric-loading-grid span,
|
||||
.panel-loading-grid span,
|
||||
.ranking-loading {
|
||||
display: block;
|
||||
min-height: 82px;
|
||||
background: linear-gradient(90deg, #edf3f5 25%, #f7fafb 37%, #edf3f5 63%);
|
||||
background-size: 400% 100%;
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--sh);
|
||||
animation: skeleton-shimmer 1.4s ease infinite;
|
||||
}
|
||||
|
||||
.panel-loading-grid span {
|
||||
min-height: 274px;
|
||||
}
|
||||
|
||||
.ranking-loading {
|
||||
min-height: 286px;
|
||||
}
|
||||
|
||||
.home-error {
|
||||
display: flex;
|
||||
min-height: 380px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--mut);
|
||||
text-align: center;
|
||||
background: var(--card);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--sh);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
display: grid;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--err);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
place-items: center;
|
||||
background: var(--err-l);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.home-error p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
margin-top: 14px;
|
||||
padding: 7px 16px;
|
||||
color: var(--brand);
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--brand);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background: var(--brand-l);
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.overview-grid,
|
||||
.panel-loading-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.metric-grid,
|
||||
.metric-loading-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,43 @@
|
||||
export type HomeMetricTone = 'brand' | 'success' | 'warning' | 'danger'
|
||||
|
||||
export type HomeMetricKey = 'todaySigned' | 'pending' | 'overdue' | 'templates'
|
||||
|
||||
export type HomeMetricDetailTone = 'up' | 'muted' | 'down'
|
||||
|
||||
export interface HomeMetricCard {
|
||||
key: string
|
||||
key: HomeMetricKey
|
||||
label: string
|
||||
value: number
|
||||
unit: string
|
||||
tone: HomeMetricTone
|
||||
description?: string
|
||||
detail: string
|
||||
detailTone: HomeMetricDetailTone
|
||||
}
|
||||
|
||||
export interface HomeTaskItem {
|
||||
export interface HomeTrendPoint {
|
||||
label: string
|
||||
value: number
|
||||
}
|
||||
|
||||
export type HomeTodoStatus = 'pending' | 'overdue'
|
||||
|
||||
export type HomeSigningMethod = 'pad' | 'sms'
|
||||
|
||||
export interface HomeTodoItem {
|
||||
id: string
|
||||
title: string
|
||||
patientId: string
|
||||
patientName: string
|
||||
documentName: string
|
||||
status: string
|
||||
department: string
|
||||
method: HomeSigningMethod
|
||||
status: HomeTodoStatus
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface HomeDocumentRanking {
|
||||
id: string
|
||||
documentName: string
|
||||
department: string
|
||||
signedCount: number
|
||||
}
|
||||
|
||||
export type HomeRankingPeriod = 7 | 14 | 30
|
||||
|
||||
Reference in New Issue
Block a user