维护

WXL

12 小时以前 d79ce11fcd47db138764557d214f4ea2169fb90a

 src/views/ecg/callingscreen/bigscreen.vue

@@ -1,194 +1,382 @@
<script setup lang="ts">

import dayjs from 'dayjs'
import {ScreenApi, statusMap, CallingVO} from "@/api/ecg/screen";

import {ScreenApi, ScreenQueueVO} from "@/api/ecg/screen";
import {CallApi, CallVO} from "@/api/ecg/call";
import {queueStatusConvert} from "@/utils/statusFormatter";
import {useCheckTypeStore} from "@/store/modules/checkType";
import {getCheckTypeSeqPrefix} from "../../../utils/checkTypeFormatter";
import { computed } from 'vue'
defineOptions({ name: 'bigscreen' })

const listReady = ref<CallingVO[]>([]) // 列表的数据
const listWaiting = ref<CallingVO[]>([]) // 列表的数据
const listPassed = ref<CallingVO[]>([]) //
const runningIndicator = ref<number>(0)
const checkTypeStore = useCheckTypeStore()
const displayColInfo = ref<Map<number, String[]>>(new Map())
const mapColumnVsPatients = ref<Map<number, ScreenQueueVO[]>>(new Map());
let curSpeakPat : CallVO | null = null;

let curSpeakPat : CallingVO | undefined = undefined;
let curSpeakSeqNum : number = 0
let curWorkDay : Date | undefined = undefined
const getDisplayColInfo = async () => {
  const data = await ScreenApi.getDisplayColInfo()
  displayColInfo.value = data
}

const getList = async () => {
  const data = await ScreenApi.getBigScreenData()
  listReady.value = data[1]
  listWaiting.value = data[2]
  listPassed.value = data[3]
  mapColumnVsPatients.value = data;
}

const startScrolling = () => {
  setInterval(() => {
    runningIndicator.value++;
    getList();
    if ( curSpeakPat === undefined ) {
    if ( curSpeakPat == null ) {
      initiateSpeak()
    }
  }, 5000); // 每X秒滚动一次
  }, 5000);
}

onMounted( () => {
  getDisplayColInfo()
  startScrolling()
})

const onSpeachEndEvent = async (event) => {
  console.log("Speech ended... " + event.currentTarget.text);
  await ScreenApi.markCalled(curSpeakPat!.patId)
  curSpeakPat!.called = 1
  await CallApi.updateCall(curSpeakPat!)
  initiateSpeak()
}

const getNextSpeak = () => {
  if (listReady.value.length === 0) {
    return undefined;
  }

  // 处理每天 反转的情况
  if ( curWorkDay === undefined) {
    curSpeakSeqNum = 0;
    curWorkDay = new Date()
  } else if (!isSameDate(dayjs(listReady.value[0].bookDate).toDate(), curWorkDay)) {
    curSpeakSeqNum = 0;
    curWorkDay = dayjs(listReady.value[0].bookDate).toDate()
  }

  return listReady.value.find( item => item.status === 30 && item.called === 0 && item.seqNum > curSpeakSeqNum)
}

const initiateSpeak = () => {
  const queuePat = getNextSpeak()
  if (queuePat !== undefined) {
    curSpeakPat = queuePat
    curSpeakSeqNum = curSpeakPat.seqNum
    speak("请、" + queuePat.patName + "到" + queuePat.roomName + "就诊");
  } else {
    curSpeakPat = undefined
const initiateSpeak = async () => {
  curSpeakPat = await CallApi.getNextCall()
  if (curSpeakPat != null && curSpeakPat.called === 0) {
    speak("请、" + curSpeakPat.patName + "到" + curSpeakPat.roomName + "就诊");
  }
}

const splitPatientColumns = computed(() => {
  const result = new Map<number, ScreenQueueVO[][]>();
  
  for (const [colId, patients] of mapColumnVsPatients.value.entries()) {
    if (colId === 0 && patients.length > 10) {
      // 第一列且数据超过10条，分成两列
      const firstCol = patients.slice(0, 10);
      const secondCol = patients.slice(10);
      result.set(colId, [firstCol, secondCol]);
    } else {
      // 其他列保持原样
      result.set(colId, [patients]);
    }
  }
  
  return result;
});
const speak = (msg) => {
  console.info("speak " + msg);
  var speech = new SpeechSynthesisUtterance()
  speech.text = msg + "。。。" + msg + "。。。" + msg  + "。。。"
  speech.pitch = 1 // 获取并设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)
  speech.rate = 0.9 // 获取并设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)
  speech.volume = 100 // 获取并设置说话的音量
  speech.lang = 'zh-CN' // 设置播放语言

  speech.pitch = 1
  speech.rate = 0.9
  speech.volume = 100
  speech.lang = 'zh-CN'
  speech.onend = onSpeachEndEvent
  speechSynthesis.speak(speech)
}

const isSameDate = ( date1: Date, date2 : Date) => {
  if (date1.getFullYear() === date2.getFullYear()
      && date1.getMonth() === date2.getMonth()
      && date1.getDate() === date2.getDate())
    return true
  else
    return false
const nameDesensitize = (patName) => {
  if (patName.length == 2) {
    return patName.substring(0, 1) + '*';
  } else if (patName.length == 3) {
    return patName.substring(0, 1) + '*' + patName.substring(2, 3);
  } else if (patName.length > 3) {
    return patName.substring(0, 1) + '*' + '*' + patName.substring(3, patName.length);
  }
}

const getItemCssClass = (item: ScreenQueueVO) => {
  if (item.status === 5 || item.status === 7) {
    return "warning-row";
  }
  return "";
}
</script>

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="500px">
        <el-table
            :data="listReady"
            stripe
            :show-header="false"
            style="width: 100%">
          <el-table-column
              prop="patName"
              label="患者姓名"
              width="80"/>
          <el-table-column label="状态" align="center" prop="status" width="80">
            <template #default="scope">
              {{ statusMap.get(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column
              prop="roomName"
              label="诊室"
              width="80"/>
        </el-table>
      </el-aside>
      <el-container>
        <el-main>
          <el-table
            :data="listWaiting"
            stripe
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="patName"
              label="患者姓名"
              width="80"/>
            <el-table-column label="状态" align="center" prop="status" width="80">
              <template #default="scope">
                {{ statusMap.get(scope.row.status) }}
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer height="100px">
          <el-table
            :data="listPassed"
            stripe
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="patName"
              label="患者姓名"
              width="80"/>
            <el-table-column label="状态" align="center" prop="status" width="80">
              <template #default="scope">
                {{ statusMap.get(scope.row.status) }}
              </template>
            </el-table-column>
          </el-table>
        </el-footer>
      </el-container>
    </el-container>
    <el-button @click="speak('请 特朗普 到二号诊室 就诊')" >叫号</el-button>
  </el-container>
  <div class="bigscreen-container">
    <!-- 顶部医院标题 -->
    <div class="hospital-header">
      <img height="40px" src="@/assets/imgs/jinhua.png"/>
      <span>金华人民医院</span>
      <div class="running-indicator" :style="{ backgroundColor: runningIndicator%2 === 0 ? '#67c23a' : '#e6a23c' }"></div>
    </div>
    
    <!-- 列标题区域 -->
    <div class="column-header">
      <template v-for="([disColId, disNameList], index) of Object.entries(displayColInfo)" :key="disColId">
        <div 
          class="column-title"
          :class="{ 'double-column': index === 0 }"
        >
          <div v-for="(dispName, dispName_index) in disNameList" :key="dispName_index">
            {{dispName}}
          </div>
        </div>
      </template>
    </div>
    
    <!-- 患者列表区域 -->
    <div class="patient-list-container">
  <template v-for="([disColId2, columnPatientList], index) of Object.entries(mapColumnVsPatients)" :key="disColId2">
    <!-- 第一列且数据超过10条时，分成两列 -->
    <template v-if="index === 0 && columnPatientList.length > 13">
      <!-- 第一列(前10条) -->
      <div class="patient-column">
        <div 
          v-for="(item, itemIndex) in columnPatientList.slice(0, 13)" 
          :key="itemIndex" 
          :class="getItemCssClass(item)"
          class="patient-item"
        >
          <span class="patient-number">{{getCheckTypeSeqPrefix(item.bookCheckType)}}{{item.bookSeqNum}}</span>
          <span class="patient-name">{{ nameDesensitize(item.patName) }}</span>
          <span class="patient-status">{{queueStatusConvert(item.status)}}</span>
          <span class="patient-room">{{item.roomName}} {{item.bedNo}}</span>
        </div>
      </div>
      
      <!-- 第二列(剩余数据) -->
      <div class="patient-column continuation-column">
        <div 
          v-for="(item, itemIndex) in columnPatientList.slice(13)" 
          :key="itemIndex + 10" 
          :class="getItemCssClass(item)"
          class="patient-item"
        >
          <span class="patient-number">{{getCheckTypeSeqPrefix(item.bookCheckType)}}{{item.bookSeqNum}}</span>
          <span class="patient-name">{{ nameDesensitize(item.patName) }}</span>
          <span class="patient-status">{{queueStatusConvert(item.status)}}</span>
          <span class="patient-room">{{item.roomName}} {{item.bedNo}}</span>
        </div>
      </div>
    </template>
    
    <!-- 其他情况正常显示 -->
    <template v-else>
      <div 
        class="patient-column"
        :class="{ 'double-column': index === 0 }"
      >
        <div 
          v-for="(item, itemIndex) in columnPatientList" 
          :key="itemIndex" 
          :class="getItemCssClass(item)"
          class="patient-item"
        >
          <span class="patient-number">{{getCheckTypeSeqPrefix(item.bookCheckType)}}{{item.bookSeqNum}}</span>
          <span class="patient-name">{{ nameDesensitize(item.patName) }}</span>
          <span class="patient-status">{{queueStatusConvert(item.status)}}</span>
          <span class="patient-room">{{item.roomName}} {{item.bedNo}}</span>
        </div>
      </div>
    </template>
  </template>
</div>
  </div>
</template>

<style scoped lang="scss">
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
/* 保持原有的基础样式不变 */
.bigscreen-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #e6f0f8, #d9e4f0);
  color: #4a5568;
  padding: 8px;
}

.hospital-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: bold;
  color: #4a7dff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  img {
    margin-right: 8px;
  }
}

.running-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 12px;
  transition: background-color 0.3s;
}

/* 修改列标题区域 */
.column-header {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 12px 0;
  margin-bottom: 8px;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.column-title {
  flex: 1;
  min-width: 300px;
  text-align: center;
  line-height: 60px;
  padding: 0 12px;
  border-left: 1px solid rgba(91, 140, 255, 0.2);
  
  &:first-child {
    border-left: none;
  }
  
  &.double-column {
    flex: 2; /* 占据两倍宽度 */
    min-width: 600px;
  }
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
/* 修改患者列表区域 */
.patient-list-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 12px 0;
  margin-bottom: 8px;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
.patient-column {
  flex: 1;
  min-width: 300px;
  padding: 0 12px;
  border-left: 1px solid rgba(91, 140, 255, 0.2);
  
  &:first-child {
    border-left: none;
  }
  
  &.double-column {
    flex: 2; /* 占据两倍宽度 */
    min-width: 600px;
    display: flex;
    flex-wrap: wrap;
    
    .patient-item {
      width: 48%; /* 两列布局，留一点间距 */
      margin-right: 2%;
      
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  

}

body > .el-container {
  margin-bottom: 40px;
/* 保持原有的患者项样式 */
.patient-item {
  padding: 10px 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  transition: all 0.3s;
  
  &:hover {
    background: rgba(91, 140, 255, 0.1);
  }
  
  span {
    display: inline-block;
    margin-right: 10px;
  }
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
.patient-number {
  width: 80px;
  color: #5b8cff;
  font-weight: bold;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
.patient-name {
  width: 100px;
}

.patient-status {
  width: 100px;
  color: #67c23a;
}

.patient-room {
  color: #666;
}

.warning-row {
  background-color: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}


.footer-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.welcome-btn {
  background: rgba(91, 140, 255, 0.1);
  color: #4a7dff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  
  &:hover {
    background: rgba(91, 140, 255, 0.2);
  }
  
  &:active {
    transform: scale(0.98);
  }
}

/* 滚动条样式 */
.patient-list-container::-webkit-scrollbar {
  width: 6px;
}

.patient-list-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.patient-list-container::-webkit-scrollbar-thumb {
  background: rgba(91, 140, 255, 0.4);
  border-radius: 4px;
}

.patient-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 140, 255, 0.6);
}
</style>