| | |
| | | <template> |
| | | <div class="divice"> |
| | | <!-- {{数据初始化}} --> |
| | | <div class="youzhiliao" style="height: 100%;" v-if="deviceData.患者姓名"> |
| | | <div class="toubu" style="height: 11%;"> |
| | | <el-row |
| | |
| | | // 在需要使用的组件中引入 |
| | | import { ChatDotSquare } from '@element-plus/icons-vue'; |
| | | const ispaiban=ref(false) |
| | | import { ElMessage } from "element-plus"; |
| | | import { ElLoading, ElMessage } from "element-plus"; |
| | | // 连接服务器 |
| | | const source = ref<EventSourcePolyfill | null>(null); |
| | | //接收到的sse数据 |
| | |
| | | 血压高值列表: "152,133,116", |
| | | 设备分区类型: 0, |
| | | 设备号: "23", |
| | | 设备名称: "24", |
| | | 设备名称: "页面初始化中,请耐心等待!", |
| | | 设备序列号: "B97AP002", |
| | | 设备状态列表: [ |
| | | ], |
| | |
| | | }, 500); |
| | | } |
| | | ); |
| | | const 数据初始化=ref(false) |
| | | //创建链接对象 |
| | | const creatSource = () => { |
| | | // http://testbs.ihemodialysis.com/sse/sseEvent |
| | | // const test='http://testbs.ihemodialysis.com/sse/sseEvent/' |
| | | const test='https://backend.ihemodialysis.com/sse/sseEvent/' |
| | | const stateArr = [ |
| | | { key: 0, value: "正在链接中" }, |
| | | { key: 1, value: "已经链接并且可以通讯" }, |
| | | { key: 2, value: "连接已关闭或者没有链接成功" }, |
| | | ]; |
| | | try { |
| | | source.value= new EventSourcePolyfill(`${test}${deviceCode.value}`,{ |
| | | heartbeatTimeout:60000 |
| | | }); |
| | | source.value.onopen = (e) => { |
| | | console.log('链接成功') |
| | | readyState.value = stateArr[source.value?.readyState ?? 0]; |
| | | console.log(e) |
| | | }; |
| | | source.value.onerror = (e) => { |
| | | console.log(e,'异常情况-----') |
| | | readyState.value = stateArr[source.value?.readyState ?? 0]; |
| | | }; |
| | | source.value.onmessage = (e) => { |
| | | console.log('收到消息',e.data) |
| | | shishiTime.value=new Date(); |
| | | if(e.data){ |
| | | const msg=e.data |
| | | let dif=msg.indexOf('event:message') |
| | | let beng=msg.indexOf('{') |
| | | let end=msg.length-1 |
| | | if(beng!==-1&&end!==-1&&dif!==-1){ |
| | | const datax=msg.slice(beng,end+1) |
| | | const dataBody=JSON.parse(datax) |
| | | console.log(dataBody) |
| | | console.log(dataBody) |
| | | if(dataBody.推送类型==='床旁血压计'){ |
| | | isinitXy.value=true |
| | | let date = new Date(); |
| | | date.setMinutes(date.getMinutes() + 5); |
| | | 床旁血压计.value={ |
| | | date_time:dataBody?.床旁血压结果?.measureTime, |
| | | sbp:dataBody?.床旁血压结果?.sbp, |
| | | pulseRate:dataBody?.床旁血压结果?.pulseRate, |
| | | dbp:dataBody?.床旁血压结果?.dbp, |
| | | zuihouTime:date |
| | | } |
| | | setTimeout(()=>{ |
| | | initTupiao() |
| | | },500) |
| | | }else if(dataBody.推送类型==='中央监控大屏信息'){ |
| | | console.log(Date.now() + 'DEV') |
| | | if(dataBody?.透析状态){ |
| | | deviceData.value=dataBody?.透析状态 |
| | | }else{ |
| | | deviceData.value.设备名称=dataBody.IOT信息.床号 |
| | | deviceData.value.患者姓名='' |
| | | if(dataBody?.使用耗材字典){ |
| | | 当前客户耗材集合.value=dataBody?.使用耗材字典 |
| | | } |
| | | } |
| | | |
| | | deviceData.value.设备变化=Date.now() + 'DEV' |
| | | |
| | | deviceData.value.属性历史列表=dataBody?.IOT信息?.属性历史列表 |
| | | console.log(deviceData.value.设备变化) |
| | | deviceData.value.设备状态列表=dataBody.IOT信息.状态列表 |
| | | |
| | | } |
| | | |
| | | 数据初始化.value=true |
| | | const loading = ElLoading.service({ |
| | | lock: true, |
| | | text: '数据初始化中。。。', |
| | | background: 'rgba(0, 0, 0, 0.7)', |
| | | svg:`<path class="path" d=" |
| | | M 30 15 |
| | | L 28 17 |
| | | M 25.61 25.61 |
| | | A 15 15, 0, 0, 1, 15 30 |
| | | A 15 15, 0, 1, 1, 27.99 7.5 |
| | | L 15 15 |
| | | " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/> |
| | | ` |
| | | }) |
| | | const test='https://backend.ihemodialysis.com/sse/sseEvent/' |
| | | const stateArr = [ |
| | | { key: 0, value: "正在链接中" }, |
| | | { key: 1, value: "已经链接并且可以通讯" }, |
| | | { key: 2, value: "连接已关闭或者没有链接成功" }, |
| | | ]; |
| | | try { |
| | | source.value= new EventSourcePolyfill(`${test}${deviceCode.value}`,{ |
| | | heartbeatTimeout:60000 |
| | | }); |
| | | source.value.onopen = (e) => { |
| | | console.log('链接成功') |
| | | ElMessage.success('链接服务成功') |
| | | readyState.value = stateArr[source.value?.readyState ?? 0]; |
| | | console.log(e) |
| | | }; |
| | | source.value.onerror = (e) => { |
| | | console.log(e,'异常情况-----') |
| | | ElMessage.warning('链接服务失败,请耐心等待重连。。') |
| | | readyState.value = stateArr[source.value?.readyState ?? 0]; |
| | | }; |
| | | source.value.onmessage = (e) => { |
| | | console.log('收到消息',e.data) |
| | | shishiTime.value=new Date(); |
| | | if(e.data){ |
| | | const msg=e.data |
| | | let dif=msg.indexOf('event:message') |
| | | let beng=msg.indexOf('{') |
| | | let end=msg.length-1 |
| | | if(beng!==-1&&end!==-1&&dif!==-1){ |
| | | const datax=msg.slice(beng,end+1) |
| | | const dataBody=JSON.parse(datax) |
| | | console.log(dataBody) |
| | | console.log(dataBody) |
| | | if(dataBody.推送类型==='床旁血压计'){ |
| | | isinitXy.value=true |
| | | let date = new Date(); |
| | | date.setMinutes(date.getMinutes() + 5); |
| | | 床旁血压计.value={ |
| | | date_time:dataBody?.床旁血压结果?.measureTime, |
| | | sbp:dataBody?.床旁血压结果?.sbp, |
| | | pulseRate:dataBody?.床旁血压结果?.pulseRate, |
| | | dbp:dataBody?.床旁血压结果?.dbp, |
| | | zuihouTime:date |
| | | } |
| | | setTimeout(()=>{ |
| | | initTupiao() |
| | | },500) |
| | | }else if(dataBody.推送类型==='中央监控大屏信息'){ |
| | | 数据初始化.value=false |
| | | loading.close() |
| | | console.log(Date.now() + 'DEV') |
| | | if(dataBody?.透析状态){ |
| | | deviceData.value=dataBody?.透析状态 |
| | | }else{ |
| | | deviceData.value.设备名称=dataBody.IOT信息.床号 |
| | | deviceData.value.患者姓名='' |
| | | if(dataBody?.使用耗材字典){ |
| | | 当前客户耗材集合.value=dataBody?.使用耗材字典 |
| | | } |
| | | } |
| | | |
| | | deviceData.value.设备变化=Date.now() + 'DEV' |
| | | |
| | | deviceData.value.属性历史列表=dataBody?.IOT信息?.属性历史列表 |
| | | console.log(deviceData.value.设备变化) |
| | | deviceData.value.设备状态列表=dataBody.IOT信息.状态列表 |
| | | |
| | | } |
| | | |
| | | } |
| | | }; |
| | | } catch (error) { |
| | | console.log(error); |
| | | } |
| | | }; |
| | | } catch (error) { |
| | | console.log(error); |
| | | } |
| | | }; |
| | | const showxuye=()=>{ |
| | | let date = new Date(); |
| | | date.setMinutes(date.getMinutes() + 0.1); |
| | |
| | | } |
| | | </script> |
| | | <style lang="less" scoped> |
| | | |
| | | .divice{ |
| | | background: #DAE5EC; |
| | | font-size: 100%; |