yxh
2026-10-03 d553a4be94d4f6ee162cc353a28b220403909cfc
src/views/ecg/doctor/components/QueuePanel.vue
@@ -45,25 +45,110 @@
  message.info(data)
}
/**
 * 需求:右侧患者列表要把「就诊中 / 已过号 / 候诊中」用不同颜色区分,方便医生识别。
 *
 * 颜色方案(左侧色条 + 浅色底 + 左侧竖线):
 *   · 就诊中(30)      —— 蓝色(主色)  :正在看的患者,最醒目
 *   · 已过号(3/5)     —— 红色          :需要关注(可能已错过叫号)
 *   · 候诊中(20/15)   —— 绿色          :正常等待
 *   · 其他            —— 灰色          :排队中/亲和/已领用/安装中等
 *
 * 之所以不只靠 dict-tag 的文字:医生扫一眼列表时要能**快速定位**当前就诊者与过号者,
 * 颜色比文字更快。
 */
const rowClass = (item: any): string => {
  const st = Number(item?.status)
  if (st === 30) return 'row-onstage'            // 就诊中
  if (st === 3 || st === 5) return 'row-passed'  // 已过号(含"已过号-排队")
  if (st === 20 || st === 15) return 'row-ready' // 候诊中 / 已召回
  return 'row-other'
}
</script>
<template>
<div v-for="(item, index) in queue" :key="index">
  <span style="display:inline-block; width:30px;"> {{item.seqNum}} </span>
  <span style="display:inline-block; width:40px;"> {{getCheckTypeSeqPrefix(item.bookCheckType)}}{{item.bookSeqNum}} </span>
  <span style="display:inline-block; width:70px;"> &nbsp; {{item.patName}}{{item.passed === 0 ? "":"*"}} </span>
  <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="item.patGender" />
<!--  {{item.roomName}} {{item.bedNo}}-->
  {{getCheckTypeName(item.bookCheckType)}}
  <dict-tag :type="DICT_TYPE.ECG_QUEUE_STATUS" :value="item.status" />
  <el-button v-if="item.status === 5 || item.status === 7" @click="recall(item)"> 召回 </el-button>
<div class="queue-list">
  <div
    v-for="(item, index) in queue"
    :key="index"
    class="queue-row"
    :class="rowClass(item)"
  >
    <span class="col-seq"> {{item.seqNum}} </span>
    <span class="col-bookseq"> {{getCheckTypeSeqPrefix(item.bookCheckType)}}{{item.bookSeqNum}} </span>
    <span class="col-name"> &nbsp; {{item.patName}}{{item.passed === 0 ? "":"*"}} </span>
    <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="item.patGender" />
    {{getCheckTypeName(item.bookCheckType)}}
    <dict-tag :type="DICT_TYPE.ECG_QUEUE_STATUS" :value="item.status" />
    <el-button v-if="item.status === 5 || item.status === 7" size="small" @click="recall(item)"> 召回 </el-button>
  </div>
</div>
</template>
<style scoped lang="scss">
div {
/* 注意:原先写的是全局 `div { padding-left: 5px; padding-bottom: 5px; }`,
   scoped 只加属性选择器、仍会命中本组件内**所有** div(含 dict-tag/el-button 内部),
   这里改为只作用于本列表的行元素。 */
.queue-list {
  padding-left: 5px;
  padding-bottom: 5px;
}
.queue-row {
  padding: 3px 6px;
  margin-bottom: 3px;
  border-left: 4px solid transparent;
  border-radius: 3px;
  line-height: 22px;
}
/* 就诊中:蓝色(主色)—— 当前正在处理的患者 */
.row-onstage {
  background-color: var(--el-color-primary-light-8);
  border-left-color: var(--el-color-primary);
  .col-name {
    font-weight: 700;
    color: var(--el-color-primary);
  }
}
/* 已过号:红色 —— 需提醒医生注意 */
.row-passed {
  background-color: var(--el-color-danger-light-8);
  border-left-color: var(--el-color-danger);
  .col-name {
    font-weight: 600;
    color: var(--el-color-danger);
  }
}
/* 候诊中 / 已召回:绿色 —— 正常等待 */
.row-ready {
  background-color: var(--el-color-success-light-8);
  border-left-color: var(--el-color-success);
}
/* 其他状态:灰色,弱化显示 */
.row-other {
  background-color: var(--el-fill-color-light);
  border-left-color: var(--el-border-color);
  color: var(--el-text-color-secondary);
}
.col-seq,
.col-bookseq,
.col-name {
  display: inline-block;
}
.col-seq {
  width: 30px;
}
.col-bookseq {
  width: 40px;
}
.col-name {
  width: 70px;
}
</style>