维护

WXL

12 小时以前 d79ce11fcd47db138764557d214f4ea2169fb90a

 src/views/ecg/callingscreen/bigscreen.vue

@@ -1,18 +1,16 @@
<script setup lang="ts">

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 displayColInfo = ref({})

const list = ref({});
// const listReady = ref<ScreenQueueVO[]>([]) // 列表的数据
// const listWaiting = ref<ScreenQueueVO[]>([]) // 列表的数据
// const listPassed = ref<ScreenQueueVO[]>([]) //

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;

const getDisplayColInfo = async () => {
@@ -22,20 +20,17 @@

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

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

onMounted( () => {
@@ -52,123 +47,336 @@

const initiateSpeak = async () => {
  curSpeakPat = await CallApi.getNextCall()
  console.info( curSpeakPat )
  if (curSpeakPat !== null) {
  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 nameDesensitize = (patName) => {
  if (patName.length == 2) {
    //截取name 字符串截取第一个字符，
    return patName.substring(0, 1) + '*';
  } else if (patName.length == 3) {
    //截取第一个和第三个字符
    return patName.substring(0, 1) + '*' + patName.substring(2, 3);
  } else if (patName.length > 3) {
    //截取第一个和大于第4个字符
    return (
        patName.substring(0, 1) + '*' + '*' + patName.substring(3, patName.length)
    );
    return patName.substring(0, 1) + '*' + '*' + patName.substring(3, patName.length);
  }
}

// const listReady = ref<ScreenQueueVO[]>([]) // 列表的数据
// const listWaiting = ref<ScreenQueueVO[]>([]) // 列表的数据
// const listPassed = ref<ScreenQueueVO[]>([]) //

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

</script>

<template>
  <div style="height: 100%; display:flex; flex-direction: column">
    <div style="display:flex; justify-content: center; align-items: center; background: var(--el-color-primary-light-7);">
  <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 style="display:flex; justify-content:space-around; align-items: flex-start; border: solid 2px var(--el-color-primary-light-7) ">
      <div v-for="[disColId, disNameList] of Object.entries(displayColInfo)" :key="disColId" style="width: 300px; height: 100%; border-left: solid 2px var(--el-color-primary-light-7) ">
        <!--{{disColId}}-->
        <div v-for="(dispName, dispName_index) in disNameList" :key="dispName_index">
          {{dispName}}
        </div>
      </div>
    </div>
    <div style="display:flex; justify-content:space-around; align-items: flex-start; flex-grow: 1; ">
      <div v-for="[disColId2, mapSlot] of Object.entries(list)" :key="disColId2" style="width: 300px; height: 100%; border-left: solid 2px var(--el-color-primary-light-7) ">
        <div v-for="[slotId, slotQueue] of Object.entries(mapSlot)" :key="slotId">
          <div v-for="(item, index) in slotQueue" :key="index" :class="getItemCssClass(item)">
            {{item.seqNum}} &nbsp; {{ nameDesensitize(item.patName) }} {{queueStatusConvert(item.status)}} {{item.roomName}}
    
    <!-- 列标题区域 -->
    <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>
    <div style="display:flex; justify-content: center; align-items: center; background: var(--el-color-primary-light-7);">
      <el-button @click="speak('欢迎使用')" >欢迎使用</el-button>
    </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 {
  background-color: var(--el-color-primary-light-7);
  color: #333;
  text-align: center;
  line-height: 40px;

/* 保持原有的基础样式不变 */
.bigscreen-container {
  height: 100vh;
  display: flex;
  align-items: center;
  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;
  }
}

.el-footer {
  //background-color: var(--el-color-primary-light-7);
  color: #333;
.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: var(--el-color-primary-light-7);
  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: var(--el-color-primary-light-7);
  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;
  }
}

.patient-number {
  width: 80px;
  color: #5b8cff;
  font-weight: bold;
}

.patient-name {
  width: 100px;
}

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

.patient-room {
  color: #666;
}

.warning-row {
  background-color: var(--el-color-warning-light-9);
  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>