92 lines
4.8 KiB
Vue
92 lines
4.8 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="welcome">
|
|
<div class="user-info">
|
|
<div class="avatar">{{ userInfo?.userName?.charAt(0) || '护' }}</div>
|
|
<div><div class="name">{{ userInfo?.nickName || userInfo?.userName || '护士' }}</div><div class="dept">{{ userInfo?.orgName || '' }}</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="stats-grid">
|
|
<div class="stat-card" v-for="s in stats" :key="s.label">
|
|
<div class="stat-value">{{ s.value }}</div>
|
|
<div class="stat-label">{{ s.label }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-actions">
|
|
<div class="action-title">快捷操作</div>
|
|
<div class="action-grid">
|
|
<div class="action-item" v-for="a in actions" :key="a.label" @click="$router.push(a.path)">
|
|
<div class="action-icon" :style="{ background: a.color }">{{ a.icon }}</div>
|
|
<div class="action-label">{{ a.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="recent-tasks">
|
|
<div class="section-header"><span>待办任务</span><span class="more" @click="$router.push('/mobile/tasks')">查看全部</span></div>
|
|
<div v-for="task in recentTasks" :key="task.id" class="task-item">
|
|
<div class="task-dot"></div>
|
|
<div class="task-info"><div class="task-name">{{ task.adviceName || task.taskContent || '医嘱任务' }}</div><div class="task-time">{{ task.createTime || '' }}</div></div>
|
|
</div>
|
|
<div v-if="recentTasks.length === 0" class="empty">暂无待办任务</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { nursingApi } from '../api'
|
|
|
|
const userInfo = ref({})
|
|
const stats = ref([{ label: '待执行医嘱', value: 0 }, { label: '今日体征', value: 0 }, { label: '待评估', value: 0 }, { label: '高风险', value: 0 }])
|
|
const recentTasks = ref([])
|
|
const actions = [
|
|
{ icon: '📋', label: '任务列表', path: '/mobile/tasks', color: '#1890ff' },
|
|
{ icon: '👥', label: '患者列表', path: '/mobile/patients', color: '#52c41a' },
|
|
{ icon: '💊', label: '药品发放', path: '/mobile/drug-distribution', color: '#fa8c16' },
|
|
{ icon: '📝', label: '护理记录', path: '/mobile/nursing-record', color: '#722ed1' },
|
|
{ icon: '💉', label: '输液巡视', path: '/mobile/infusion-patrol', color: '#13c2c2' },
|
|
{ icon: '🔄', label: '交接班', path: '/mobile/handoff-record', color: '#f5222d' }
|
|
]
|
|
|
|
onMounted(async () => {
|
|
try { const info = localStorage.getItem('userInfo'); if (info) userInfo.value = JSON.parse(info) } catch {}
|
|
try {
|
|
const nurseId = userInfo.value.practitionerId || userInfo.value.userId
|
|
if (nurseId) {
|
|
const res = await nursingApi.getTasks({ nurseId: nurseId })
|
|
if (res.code === 200) {
|
|
recentTasks.value = (res.data?.records || res.data?.rows || res.data || []).slice(0, 5)
|
|
stats.value[0].value = res.data?.total || recentTasks.value.length
|
|
}
|
|
}
|
|
} catch {}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home { padding: 12px; padding-bottom: 70px; }
|
|
.welcome { background: linear-gradient(135deg, #1890ff, #096dd9); border-radius: 12px; padding: 20px; color: #fff; margin-bottom: 12px; }
|
|
.user-info { display: flex; align-items: center; gap: 12px; }
|
|
.avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
|
|
.name { font-size: 18px; font-weight: 600; }
|
|
.dept { font-size: 13px; opacity: 0.8; }
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
|
|
.stat-card { background: #fff; border-radius: 8px; padding: 12px 8px; text-align: center; }
|
|
.stat-value { font-size: 22px; font-weight: 600; color: #1890ff; }
|
|
.stat-label { font-size: 11px; color: #999; margin-top: 4px; }
|
|
.quick-actions { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
|
|
.action-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
|
|
.action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
.action-item { text-align: center; cursor: pointer; }
|
|
.action-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 6px; }
|
|
.action-label { font-size: 12px; color: #666; }
|
|
.recent-tasks { background: #fff; border-radius: 12px; padding: 16px; }
|
|
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
|
|
.more { color: #1890ff; font-size: 13px; }
|
|
.task-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
|
|
.task-dot { width: 8px; height: 8px; border-radius: 50%; background: #fa8c16; }
|
|
.task-name { font-size: 14px; }
|
|
.task-time { font-size: 12px; color: #999; }
|
|
.empty { text-align: center; padding: 20px; color: #999; }
|
|
</style>
|