|  |  | 
 |  |  |     .control-btn { | 
 |  |  |       padding: 8px 5px; | 
 |  |  |       background: rgba(91, 140, 255, 0.1); | 
 |  |  |        flex: 1; /* 平均分配宽度 */ | 
 |  |  |   min-width: 0; /* 防止内容溢出 */ | 
 |  |  |       flex: 1; | 
 |  |  |       /* 平均分配宽度 */ | 
 |  |  |       min-width: 0; | 
 |  |  |       /* 防止内容溢出 */ | 
 |  |  |       border: none; | 
 |  |  |       border-radius: 12px; | 
 |  |  |       color: #4a7dff; | 
 |  |  | 
 |  |  |  | 
 |  |  | <body> | 
 |  |  |   <div id="app"> | 
 |  |  |     <div class="search-bar"> | 
 |  |  |     <div class="search-bar" style="display: none;"> | 
 |  |  |       <input class="search-input" type="text" placeholder="请输入房间号查询" id="searchRoomInput"> | 
 |  |  |       <button class="search-btn" id="searchRoomBtn">查询</button> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  |     <div class="header"> | 
 |  |  |     <div class="header" style="display: none;"> | 
 |  |  |       <div class="clinic-title">心电图诊间叫号系统</div> | 
 |  |  |       <div class="clinic-info"> | 
 |  |  |         <div class="room-name" id="roomName">诊间加载中...</div> | 
 |  |  | 
 |  |  |  | 
 |  |  |     <div class="main-content"> | 
 |  |  |       <div class="panel"> | 
 |  |  |         <div class="panel-header">检查队列</div> | 
 |  |  |         <div class="panel-header">等待队列</div> | 
 |  |  |         <div class="patient-list" id="checkPatientList"> | 
 |  |  |           <div class="empty-state"> | 
 |  |  |             暂无等待检查的患者 | 
 |  |  | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  |     <div class="footer"> | 
 |  |  |     <div class="footer" style="display: none;"> | 
 |  |  |       <div class="announcement" id="announcementText"> | 
 |  |  |         系统运行中... | 
 |  |  |       </div> | 
 |  |  | 
 |  |  |       roomId: 1, | 
 |  |  |       timer: null, | 
 |  |  |       speechSynthesis: window.speechSynthesis || null, | 
 |  |  |       apiBaseUrl: 'http://10.0.2.193/admin-api' // 根据实际情况修改 | 
 |  |  |       apiBaseUrl: 'http://10.0.2.193/admin-api'  | 
 |  |  |       // apiBaseUrl: 'http://localhost:48080/admin-api'  | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     // 页面加载完成后初始化 | 
 |  |  |     $(document).ready(function () { | 
 |  |  |     // 页面加载完成后初始化 | 
 |  |  |     document.addEventListener('DOMContentLoaded', function () { | 
 |  |  |        // 从URL获取roomId参数 | 
 |  |  |   const urlParams = new URLSearchParams(window.location.search); | 
 |  |  |   const roomId = urlParams.get('roomId') || '1'; // 默认值1 | 
 |  |  |    | 
 |  |  |   // 设置到搜索框(可选) | 
 |  |  |   document.getElementById('searchRoomInput').value = roomId; | 
 |  |  |       // 初始化事件监听 | 
 |  |  |       $('#searchRoomBtn').click(searchRoom); | 
 |  |  |       $('#callBtn').click(initiateSpeak); | 
 |  |  |       $('#testSpeakBtn').click(function () { speak('欢迎使用诊间叫号系统'); }); | 
 |  |  |       $('#changeRoomBtn').click(changeRoom); | 
 |  |  |       document.getElementById('searchRoomBtn').addEventListener('click', searchRoom); | 
 |  |  |       document.getElementById('callBtn').addEventListener('click', initiateSpeak); | 
 |  |  |       document.getElementById('testSpeakBtn').addEventListener('click', function () { | 
 |  |  |         speak('欢迎使用诊间叫号系统'); | 
 |  |  |       }); | 
 |  |  |       document.getElementById('changeRoomBtn').addEventListener('click', changeRoom); | 
 |  |  |  | 
 |  |  |       // 初始化数据 | 
 |  |  |       getRoomByIp(); | 
 |  |  |       getRoomByIp(roomId); | 
 |  |  |       startScrolling(); | 
 |  |  |  | 
 |  |  |       // 初始化语音合成 | 
 |  |  | 
 |  |  |  | 
 |  |  |     // 搜索房间 | 
 |  |  |     function searchRoom() { | 
 |  |  |       var searchInput = $('#searchRoomInput').val().trim(); | 
 |  |  |       var searchInput = document.getElementById('searchRoomInput').value.trim(); | 
 |  |  |       if (!searchInput) { | 
 |  |  |         updateAnnouncement('请输入有效的房间号'); | 
 |  |  |         return; | 
 |  |  | 
 |  |  |  | 
 |  |  |       updateAnnouncement('正在查询 ' + searchInput + ' 房间信息...'); | 
 |  |  |  | 
 |  |  |       // 真实API调用 | 
 |  |  |       $.ajax({ | 
 |  |  |         url: appState.apiBaseUrl + '/clinic/room/get-room-by-ip', | 
 |  |  |         data: { roomId: searchInput }, | 
 |  |  |         type: 'GET', | 
 |  |  |         dataType: 'json', | 
 |  |  |         success: function (response) { | 
 |  |  |           appState.roomProfile = response.data || response; | 
 |  |  |           updateRoomInfo(); | 
 |  |  |           updateAnnouncement('已加载 ' + appState.roomProfile.roomName + ' 信息'); | 
 |  |  |           getList(); // 获取该房间的患者列表 | 
 |  |  |         }, | 
 |  |  |         error: function (xhr, status, error) { | 
 |  |  |           updateAnnouncement('查询房间失败: ' + (xhr.responseJSON?.message || error)); | 
 |  |  |           console.error('查询房间失败:', error); | 
 |  |  |       var xhr = new XMLHttpRequest(); | 
 |  |  |       xhr.open('GET', appState.apiBaseUrl + '/clinic/room/get-room-by-ip?roomId=' + encodeURIComponent(searchInput), true); | 
 |  |  |       xhr.onreadystatechange = function () { | 
 |  |  |         if (xhr.readyState === 4) { | 
 |  |  |           if (xhr.status === 200) { | 
 |  |  |             try { | 
 |  |  |               var response = JSON.parse(xhr.responseText); | 
 |  |  |               appState.roomProfile = response.data || response; | 
 |  |  |               updateRoomInfo(); | 
 |  |  |               updateAnnouncement('已加载 ' + appState.roomProfile.roomName + ' 信息'); | 
 |  |  |               getList(); // 获取该房间的患者列表 | 
 |  |  |             } catch (e) { | 
 |  |  |               updateAnnouncement('解析响应数据失败'); | 
 |  |  |               console.error('解析响应失败:', e); | 
 |  |  |             } | 
 |  |  |           } else { | 
 |  |  |             updateAnnouncement('查询房间失败: ' + xhr.status); | 
 |  |  |             console.error('查询房间失败:', xhr.status); | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |       }); | 
 |  |  |       }; | 
 |  |  |       xhr.send(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 获取房间信息 | 
 |  |  |     // 获取房间信息 - 使用真实API | 
 |  |  |     function getRoomByIp() { | 
 |  |  |       var searchInput = $('#searchRoomInput').val().trim(); | 
 |  |  |     function getRoomByIp(roomId) { | 
 |  |  |   // 如果未传递roomId,尝试从输入框获取 | 
 |  |  |   if (!roomId) { | 
 |  |  |     roomId = document.getElementById('searchRoomInput').value.trim() || '1'; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |       $.ajax({ | 
 |  |  |         url: appState.apiBaseUrl + '/ecg/screen/room-screen-data', | 
 |  |  |         data: { roomId: searchInput }, | 
 |  |  |         type: 'GET', | 
 |  |  |         dataType: 'json', | 
 |  |  |         success: function (response) { | 
 |  |  |   var xhr = new XMLHttpRequest(); | 
 |  |  |   xhr.open('GET', appState.apiBaseUrl + '/ecg/screen/room-screen-data?roomId=' + encodeURIComponent(roomId), true); | 
 |  |  |   xhr.onreadystatechange = function() { | 
 |  |  |     if (xhr.readyState === 4) { | 
 |  |  |       if (xhr.status === 200) { | 
 |  |  |         try { | 
 |  |  |           var response = JSON.parse(xhr.responseText); | 
 |  |  |           appState.roomProfile = response.data || response; | 
 |  |  |           updateRoomInfo(); | 
 |  |  |  | 
 |  |  |           // 检查是否有需要叫号的患者 | 
 |  |  |           // 更新当前roomId状态 | 
 |  |  |           appState.roomId = roomId; | 
 |  |  |  | 
 |  |  |           // 检查是否需要叫号 | 
 |  |  |           if (response.data && response.data.called === 0) { | 
 |  |  |             appState.curSpeakPat = response.data; | 
 |  |  |             speak('请' + response.data.patName + '到' + appState.roomProfile.roomName + '装机'); | 
 |  |  |           } | 
 |  |  |         }, | 
 |  |  |         error: function (xhr, status, error) { | 
 |  |  |           console.error('获取房间信息失败:', error); | 
 |  |  |           // 使用模拟数据作为后备 | 
 |  |  |           appState.roomProfile = { | 
 |  |  |             roomName: '心电图诊室 ' + (appState.roomId + 1), | 
 |  |  |             callingScreenType: [40, 10, 30][appState.roomId % 3] | 
 |  |  |           }; | 
 |  |  |           updateRoomInfo(); | 
 |  |  |         } catch (e) { | 
 |  |  |           console.error('解析响应失败:', e); | 
 |  |  |           fallbackRoomData(roomId); | 
 |  |  |         } | 
 |  |  |       }); | 
 |  |  |       } else { | 
 |  |  |         console.error('获取房间信息失败:', xhr.status); | 
 |  |  |         fallbackRoomData(roomId); | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }; | 
 |  |  |   xhr.send(); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | // 后备数据函数 | 
 |  |  | function fallbackRoomData(roomId) { | 
 |  |  |   appState.roomProfile = { | 
 |  |  |     roomName: '心电图诊室 ' + roomId, | 
 |  |  |     callingScreenType: [40, 10, 30][roomId % 3] | 
 |  |  |   }; | 
 |  |  |   updateRoomInfo(); | 
 |  |  | } | 
 |  |  |  | 
 |  |  |     // 更新房间信息显示 | 
 |  |  |     function updateRoomInfo() { | 
 |  |  | 
 |  |  |       $('#screenType').text('模式:' + screenTypeText); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 获取患者列表 | 
 |  |  |     function getList() { | 
 |  |  |       var searchInput = $('#searchRoomInput').val().trim(); | 
 |  |  |       var searchInput = document.getElementById('searchRoomInput').value.trim(); | 
 |  |  |  | 
 |  |  |       $.ajax({ | 
 |  |  |         url: appState.apiBaseUrl + '/ecg/screen/room-screen-data', | 
 |  |  |         data: { roomId: searchInput }, | 
 |  |  |         type: 'GET', | 
 |  |  |         dataType: 'json', | 
 |  |  |         success: function (response) { | 
 |  |  |           // 假设返回数据结构为 { data: [检查队列数据, 装机队列数据] } | 
 |  |  |           if (response.data) { | 
 |  |  |             console.log(response.data); | 
 |  |  |             console.log(response.data[1]); | 
 |  |  |              | 
 |  |  |             appState.checkRelatedPatientList = response.data[1] || []; | 
 |  |  |             console.log(); | 
 |  |  |              | 
 |  |  |       var xhr = new XMLHttpRequest(); | 
 |  |  |       xhr.open('GET', appState.apiBaseUrl + '/ecg/screen/room-screen-data?roomId=' + encodeURIComponent(searchInput), true); | 
 |  |  |       xhr.onreadystatechange = function () { | 
 |  |  |         if (xhr.readyState === 4) { | 
 |  |  |           if (xhr.status === 200) { | 
 |  |  |             try { | 
 |  |  |               var response = JSON.parse(xhr.responseText); | 
 |  |  |               if (response.data) { | 
 |  |  |                 appState.checkRelatedPatientList = response.data[1] || []; | 
 |  |  |               } | 
 |  |  |               updatePatientList(); | 
 |  |  |             } catch (e) { | 
 |  |  |               console.error('解析患者列表失败:', e); | 
 |  |  |             } | 
 |  |  |           } else { | 
 |  |  |             // 模拟数据作为后备 | 
 |  |  |             // appState.checkRelatedPatientList = generateMockPatients(); | 
 |  |  |             console.error('获取患者列表失败:', xhr.status); | 
 |  |  |           } | 
 |  |  |           updatePatientList(); | 
 |  |  |         }, | 
 |  |  |         error: function (xhr, status, error) { | 
 |  |  |           console.error('获取患者列表失败:', error); | 
 |  |  |           // 使用模拟数据作为后备 | 
 |  |  |           // appState.checkRelatedPatientList = generateMockPatients(); | 
 |  |  |           // updatePatientList(); | 
 |  |  |         } | 
 |  |  |       }); | 
 |  |  |       }; | 
 |  |  |       xhr.send(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 开始定时刷新 | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 叫号功能 | 
 |  |  |     // 叫号功能(使用真实API) | 
 |  |  |     function initiateSpeak() { | 
 |  |  |       // 找出等待中的患者 | 
 |  |  |       var waitingPatients = []; | 
 |  |  | 
 |  |  |           waitingPatients.push(appState.checkRelatedPatientList[i]); | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       if (waitingPatients.length === 0) { | 
 |  |  |         updateAnnouncement('当前没有等待装机的患者'); | 
 |  |  |         return; | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       var patient = waitingPatients[0]; | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       // 调用API标记为已叫号 | 
 |  |  |       $.ajax({ | 
 |  |  |         url: appState.apiBaseUrl + '/ecg/screen/mark-patient-called', | 
 |  |  |         method: 'POST', | 
 |  |  |         data: { patientId: patient.id }, | 
 |  |  |         success: function() { | 
 |  |  |           appState.curSpeakPat = { | 
 |  |  |             patName: patient.patName, | 
 |  |  |             roomName: appState.roomProfile.roomName | 
 |  |  |           }; | 
 |  |  |           speak('请' + patient.patName + '到' + appState.roomProfile.roomName + '装机'); | 
 |  |  |         }, | 
 |  |  |         error: function(xhr, status, error) { | 
 |  |  |           updateAnnouncement('叫号失败: ' + (xhr.responseJSON?.message || error)); | 
 |  |  |           console.error('叫号失败:', error); | 
 |  |  |       var xhr = new XMLHttpRequest(); | 
 |  |  |       xhr.open('POST', appState.apiBaseUrl + '/ecg/screen/mark-patient-called', true); | 
 |  |  |       xhr.setRequestHeader('Content-Type', 'application/json'); | 
 |  |  |       xhr.onreadystatechange = function () { | 
 |  |  |         if (xhr.readyState === 4) { | 
 |  |  |           if (xhr.status === 200) { | 
 |  |  |             appState.curSpeakPat = { | 
 |  |  |               patName: patient.patName, | 
 |  |  |               roomName: appState.roomProfile.roomName | 
 |  |  |             }; | 
 |  |  |             speak('请' + patient.patName + '到' + appState.roomProfile.roomName + '装机'); | 
 |  |  |           } else { | 
 |  |  |             updateAnnouncement('叫号失败: ' + xhr.status); | 
 |  |  |             console.error('叫号失败:', xhr.status); | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |       }); | 
 |  |  |       }; | 
 |  |  |       xhr.send(JSON.stringify({ patientId: patient.id })); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 语音播报 | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 切换房间 | 
 |  |  |     function changeRoom() { | 
 |  |  |       appState.roomId = (appState.roomId + 1) % 3; | 
 |  |  |       getRoomByIp(); | 
 |  |  |       updateAnnouncement('正在切换诊间...'); | 
 |  |  |     } | 
 |  |  |   function changeRoom() { | 
 |  |  |   // 轮换roomId(示例:1→2→3→1) | 
 |  |  |   const newRoomId = (parseInt(appState.roomId) % 3) + 1; | 
 |  |  |    | 
 |  |  |   // 更新URL但不刷新页面 | 
 |  |  |   window.history.pushState({}, '', `?roomId=${newRoomId}`); | 
 |  |  |    | 
 |  |  |   // 重新加载数据 | 
 |  |  |   getRoomByIp(newRoomId.toString()); | 
 |  |  |   updateAnnouncement('正在切换到诊间 ' + newRoomId); | 
 |  |  | } | 
 |  |  |   </script> | 
 |  |  | </body> | 
 |  |  |  |