|  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | import {RoomBedVO} from "@/api/ecg/doctor"; | 
|---|
|  |  |  | import {RoomApi} from "@/api/ecg/room"; | 
|---|
|  |  |  | import {ScreenQueueVO, ScreenApi} from "@/api/ecg/screen"; | 
|---|
|  |  |  | import {DICT_TYPE} from "@/utils/dict"; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ name: 'roomscreen' }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const list = ref<ScreenQueueVO[]>([]) // 列表的数据 | 
|---|
|  |  |  | const listPassed = ref<ScreenQueueVO[]>([]) // 过号列表的数据 | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const roomBed = ref<RoomBedVO>({ | 
|---|
|  |  |  | roomId : null, | 
|---|
|  |  |  | roomName: null, | 
|---|
|  |  |  | bedNo: null | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const getList = async () => { | 
|---|
|  |  |  | const data = await ScreenApi.getRoomScreenData() | 
|---|
|  |  |  | list.value = data[1] | 
|---|
|  |  |  | listPassed.value = data[2] | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const getRoomByIp = async () => { | 
|---|
|  |  |  | const data = await RoomApi.getRoomByIP() | 
|---|
|  |  |  | roomBed.value = data | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const startScrolling = () => { | 
|---|
|  |  |  | setInterval(() => { | 
|---|
|  |  |  | // console.info("...") | 
|---|
|  |  |  | getList() | 
|---|
|  |  |  | }, 3000); // 每两秒滚动一次 | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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) | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | onMounted( () => { | 
|---|
|  |  |  | getRoomByIp() | 
|---|
|  |  |  | startScrolling() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <el-container> | 
|---|
|  |  |  | <el-aside width="200px">Aside</el-aside> | 
|---|
|  |  |  | <el-container> | 
|---|
|  |  |  | <el-header>Header</el-header> | 
|---|
|  |  |  | <el-main>Main</el-main> | 
|---|
|  |  |  | <el-footer>Footer</el-footer> | 
|---|
|  |  |  | </el-container> | 
|---|
|  |  |  | <el-container style="height: 100%;"> | 
|---|
|  |  |  | <el-header style="font-size: 25px">{{ roomBed.roomName }}</el-header> | 
|---|
|  |  |  | <el-main> | 
|---|
|  |  |  | <el-table | 
|---|
|  |  |  | :data="list" | 
|---|
|  |  |  | stripe | 
|---|
|  |  |  | :show-header="false" | 
|---|
|  |  |  | style="width: 100%; height: 100%; border: solid var(--el-color-primary-light-7); font-size: 18px;"> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="patName" | 
|---|
|  |  |  | label="患者姓名" | 
|---|
|  |  |  | width="80"> | 
|---|
|  |  |  | <template #default="scope"> | 
|---|
|  |  |  | {{scope.row.seqNum}}   {{ nameDesensitize(scope.row.patName) }} | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column label="状态" align="center" :prop="status" width="80"> | 
|---|
|  |  |  | <template #default="scope"> | 
|---|
|  |  |  | <dict-tag :type="DICT_TYPE.ECG_QUEUE_STATUS" :value="scope.row.status" /> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | </el-main> | 
|---|
|  |  |  | <el-footer height="100px" style="padding: 0 0"> | 
|---|
|  |  |  | <el-header height="30px" style="background-color: #98b8e5; line-height: 30px;">过号区</el-header> | 
|---|
|  |  |  | <span v-for="(passedItem, index) in listPassed" :key="index"> | 
|---|
|  |  |  | {{nameDesensitize(passedItem.patName) + "    "}} | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </el-footer> | 
|---|
|  |  |  | </el-container> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style scoped lang="scss"> | 
|---|
|  |  |  | .el-header, .el-footer { | 
|---|
|  |  |  | background-color: var(--el-color-primary-light-7); | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | line-height: 60px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .el-aside { | 
|---|
|  |  |  | background-color: var(--el-color-primary-light-7); | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | line-height: 200px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .el-main { | 
|---|
|  |  |  | background-color: var(--el-color-primary-light-7); | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | padding: 0 0; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | line-height: 160px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|