387 lines
8.9 KiB
Vue
387 lines
8.9 KiB
Vue
<template>
|
||
<div class="queue-page">
|
||
<nav-bar/>
|
||
|
||
<van-list
|
||
v-model="loading"
|
||
:finished="finished"
|
||
@load="onLoad"
|
||
class="queue-container"
|
||
>
|
||
<!-- 空状态 -->
|
||
<div class="custom-empty" v-if="!loading && list.length === 0">
|
||
<div class="empty-text">暂无挂号排队信息</div>
|
||
</div>
|
||
|
||
<!-- 排队记录卡片 -->
|
||
<div
|
||
v-for="(item, index) in list"
|
||
:key="item.ID"
|
||
class="queue-card"
|
||
>
|
||
<!-- 状态与序号区域 -->
|
||
<div class="status-bar">
|
||
<!-- 就诊状态 -->
|
||
<div class="status-badge" :class="getStatusClass(item.DiagnosticStatus)">
|
||
<van-icon :name="getStatusIcon(item.DiagnosticStatus)" class="status-icon" />
|
||
<span class="status-text">{{ getStatusText(item.DiagnosticStatus) }}</span>
|
||
</div>
|
||
|
||
<!-- 挂号序号 -->
|
||
<div class="serial-number">
|
||
<span class="serial-label">挂号序号：</span>
|
||
<span class="serial-value">{{ item.ADiagnosticNO }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心信息区域 -->
|
||
<div class="core-info">
|
||
<div class="dept-doctor">
|
||
<div class="info-item">
|
||
<van-icon name="wap-home-o" class="info-icon" />
|
||
<span class="info-label">挂号科室：</span>
|
||
<span class="info-value">{{ item.RoomName || item.DepartmentName }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<van-icon name="user-o" class="info-icon" />
|
||
<span class="info-label">挂号医生：</span>
|
||
<span class="info-value">{{ item.DoctorName }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<van-icon name="service-o" class="info-icon" />
|
||
<span class="info-label">呼叫诊室：</span>
|
||
<span class="info-value">{{ item.CallRoomName || '暂无呼叫' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间信息区域 -->
|
||
<div class="time-info">
|
||
<div class="time-item">
|
||
<van-icon name="clock-o" class="time-icon" />
|
||
<span class="time-label">签到时间：</span>
|
||
<span class="time-value">{{ item.DiagnosticOrderTime }}</span>
|
||
</div>
|
||
|
||
<div class="time-item" v-if="item.CallTime">
|
||
<van-icon name="volume-o" class="time-icon" />
|
||
<span class="time-label">呼叫时间：</span>
|
||
<span class="time-value">{{ item.CallTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 正在呼叫提示（仅状态为2时显示） -->
|
||
<div v-if="item.DiagnosticStatus === '2'" class="calling-notice">
|
||
<van-icon name="warning" class="notice-icon" />
|
||
<span class="notice-text">正在呼叫您的序号，请尽快前往{{ item.CallRoomName }}就诊</span>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getQueuing } from "@/request/api.js";
|
||
import { Empty, Icon } from "vant";
|
||
|
||
|
||
export default {
|
||
components: {
|
||
[Empty.name]: Empty,
|
||
[Icon.name]: Icon
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
finished: false,
|
||
list: [],
|
||
patientId: '',
|
||
patientName: '',
|
||
intervalId: null // 添加定时器ID
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
this.patientId = this.$route.query.patientId;
|
||
this.patientName = this.$route.query.patientName;
|
||
this.onLoad();
|
||
|
||
// 设置每20秒执行一次onLoad方法
|
||
this.intervalId = setInterval(() => {
|
||
this.onLoad();
|
||
}, 20000);
|
||
},
|
||
beforeDestroy() {
|
||
// 组件销毁前清除定时器
|
||
if (this.intervalId) {
|
||
clearInterval(this.intervalId);
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
onLoad() {
|
||
this.loading = true;
|
||
const params = {
|
||
PatName: this.patientName,
|
||
PatID: this.patientId
|
||
};
|
||
|
||
getQueuing(params).then(res => {
|
||
this.loading = false;
|
||
console.log(res.ResultCode);
|
||
if (res.ResultCode === "0") {
|
||
this.list = res.DiagnosticInfos || [];
|
||
// 按签到时间倒序排列（最新的在前面）
|
||
this.list.sort((a, b) => {
|
||
return new Date(`2025-10-29 ${b.DiagnosticOrderTime}`) - new Date(`2025-10-29 ${a.DiagnosticOrderTime}`);
|
||
});
|
||
this.finished = true;
|
||
} else {
|
||
// 移除 Toast 显示，只在控制台记录错误
|
||
console.log('获取排队信息失败:', res.ResultMsg);
|
||
this.finished = true;
|
||
}
|
||
}).catch(err => {
|
||
console.error('获取排队信息失败:', err);
|
||
// Toast('获取信息失败，请重试');
|
||
this.loading = false;
|
||
this.finished = true;
|
||
});
|
||
},
|
||
|
||
// 就诊状态文本映射
|
||
getStatusText(status) {
|
||
const statusMap = {
|
||
'1': '候诊中',
|
||
'2': '正在呼叫',
|
||
'3': '候诊中',
|
||
'4': '已就诊',
|
||
'5': '已过号',
|
||
'6': '已挂起'
|
||
};
|
||
return statusMap[status] || '未知状态';
|
||
},
|
||
|
||
// 就诊状态图标映射
|
||
getStatusIcon(status) {
|
||
const iconMap = {
|
||
'1': 'friends-o', // 候诊-等待图标
|
||
'2': 'volume-o', // 呼叫-音量图标
|
||
'3': 'underway-o', // 候诊-等待图标
|
||
'4': 'passed',// 已就诊-对勾图标
|
||
'5': 'close',// 过号-叉号图标
|
||
'6': 'pause-circle-o' // 挂起-暂停图标
|
||
};
|
||
return iconMap[status] || 'clock-o';
|
||
},
|
||
|
||
// 就诊状态样式类（颜色区分）
|
||
getStatusClass(status) {
|
||
const classMap = {
|
||
'1': 'status-waiting', // 候诊-蓝色
|
||
'2': 'status-calling', // 呼叫-橙色
|
||
'3': 'status-waiting', // 候诊-蓝色
|
||
'4': 'status-completed', // 已就诊-绿色
|
||
'5': 'status-missed', // 过号-红色
|
||
'6': 'status-suspended' // 挂起-灰色
|
||
};
|
||
return classMap[status] || 'status-unknown';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.custom-empty {
|
||
padding: 2rem 0;
|
||
text-align: center;
|
||
|
||
.empty-text {
|
||
font-size: 0.32rem;
|
||
color: #86909c;
|
||
}
|
||
}
|
||
.queue-page {
|
||
background-color: #f7f8fa;
|
||
min-height: 100vh;
|
||
padding-top: 1rem; // 适配导航栏高度
|
||
}
|
||
|
||
.queue-container {
|
||
padding: 0.2rem 0.3rem;
|
||
}
|
||
|
||
.empty-view {
|
||
padding: 3rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
// 排队记录卡片
|
||
.queue-card {
|
||
background-color: #fff;
|
||
border-radius: 0.15rem;
|
||
padding: 0.35rem;
|
||
margin-bottom: 0.25rem;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 状态与序号区域
|
||
.status-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0.3rem;
|
||
padding-bottom: 0.25rem;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
// 状态徽章
|
||
.status-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
padding: 0.1rem 0.25rem;
|
||
border-radius: 0.2rem;
|
||
font-size: 0.5rem;
|
||
font-weight: 500;
|
||
|
||
.status-icon {
|
||
font-size: 0.6rem;
|
||
}
|
||
}
|
||
|
||
// 状态颜色样式
|
||
.status-waiting {
|
||
background-color: #e8f3ff;
|
||
color: #4285f4;
|
||
}
|
||
.status-calling {
|
||
background-color: #fff8e6;
|
||
color: #ff7d00;
|
||
animation: pulse 1.5s infinite; // 呼吸动画强调
|
||
}
|
||
.status-completed {
|
||
background-color: #e6f7ee;
|
||
color: #00b42a;
|
||
}
|
||
.status-missed {
|
||
background-color: #fee;
|
||
color: #f53f3f;
|
||
}
|
||
.status-suspended {
|
||
background-color: #f2f3f5;
|
||
color: #86909c;
|
||
}
|
||
|
||
// 挂号序号
|
||
.serial-number {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.1rem;
|
||
|
||
.serial-label {
|
||
font-size: 0.32rem;
|
||
color: #86909c;
|
||
}
|
||
.serial-value {
|
||
font-size: 0.5rem;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
// 核心信息区域
|
||
.core-info {
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
|
||
.dept-doctor {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
|
||
.info-icon {
|
||
font-size: 0.4rem;
|
||
color: #4285f4;
|
||
width: 0.4rem; // 固定宽度，保证对齐
|
||
}
|
||
.info-label {
|
||
font-size: 0.4rem;
|
||
color: #86909c;
|
||
width: 2.2rem; // 固定宽度，保证内容对齐
|
||
}
|
||
.info-value {
|
||
font-size: 0.4rem;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
// 时间信息区域
|
||
.time-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.2rem;
|
||
padding-top: 0.2rem;
|
||
border-top: 1px dashed #f0f0f0;
|
||
}
|
||
|
||
.time-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
|
||
.time-icon {
|
||
font-size: 0.4rem;
|
||
color: #86909c;
|
||
width: 0.4rem;
|
||
}
|
||
.time-label {
|
||
font-size: 0.4rem;
|
||
color: #86909c;
|
||
width: 2.2rem;
|
||
}
|
||
.time-value {
|
||
font-size: 0.4rem;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
// 正在呼叫提示
|
||
.calling-notice {
|
||
margin-top: 0.25rem;
|
||
padding: 0.2rem;
|
||
background-color: #fff8e6;
|
||
border-left: 3px solid #ff7d00;
|
||
border-radius: 0.05rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
|
||
.notice-icon {
|
||
font-size: 0.36rem;
|
||
color: #ff7d00;
|
||
}
|
||
.notice-text {
|
||
font-size: 0.32rem;
|
||
color: #ff7d00;
|
||
flex: 1;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
// 动画效果
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.8; }
|
||
}
|
||
</style> |