| | |
| | | <template> |
| | | <div class="divice"> |
| | | <!-- {{数据初始化}} --> |
| | | <div class="youzhiliao" style="height: 100%" v-if="deviceData.患者姓名"> |
| | | <el-carousel v-show="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always"> |
| | | <el-carousel-item :style="{ height: pageHeight + 'px'}"> |
| | | <div class="youzhiliao" style="height: 100%" > |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | v-if="deviceData.患者姓名 !== ''" |
| | |
| | | <span |
| | | class="grid-container" |
| | | @click="initTupiao" |
| | | style="margin-left: 5%; font-size: 350%; height: 100%" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.患者姓名 }} |
| | | </span> |
| | | |
| | | <span |
| | | class="grid-container" |
| | | v-if="deviceData.年龄 !== null" |
| | | style="margin-left: 5%; font-size: 300%; height: 100%" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.年龄 }}岁</span |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 5%; font-size: 300%; height: 100%" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.性别 }}</span |
| | | > |
| | | |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ patientSourceAndCode }}</span |
| | | > |
| | | <span |
| | | v-if="deviceData.签到号" |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.签到号 }}</span |
| | | > |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | color: #ca7070; |
| | | overflow-y: auto; |
| | | " |
| | | > |
| | | <el-row style="font-size: 30px"> |
| | | <el-row style="font-size: 20px"> |
| | | <el-col |
| | | v-for="(row, index) in deviceData.异常检验指标" |
| | | :span="8" |
| | |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | font-size: 25px; |
| | | color: #8079cb; |
| | | " |
| | | class="grid-container" |
| | |
| | | <div |
| | | class="mowei" |
| | | style="height: 39%" |
| | | v-if="Number(deviceData.透析状态) > 0" |
| | | v-show="Number(deviceData.透析状态) > 0" |
| | | > |
| | | <el-row style="height: 100%; padding: 0px 20px 10px 20px"> |
| | | <!-- 未签到 --> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) < 1" |
| | | v-show="Number(deviceData.透析状态) < 1" |
| | | style="height: 70%; width: 100%" |
| | | > |
| | | <div class="container"> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 已签到 --> |
| | | <div v-else style="height: 80%; width: 100%; padding-right: 0px"> |
| | | <div v-show="Number(deviceData.透析状态) >= 1" style="height: 80%; width: 100%; padding-right: 0px"> |
| | | <div style="height: 100%"> |
| | | <el-row |
| | | style="height: 30%; padding: 0px 0px 10px 0px" |
| | |
| | | font-size: 50px; |
| | | color: #333333; |
| | | color: #ca7070; |
| | | overflow-y: auto; |
| | | " |
| | | > |
| | | <el-row style="font-size: 30px"> |
| | | <el-row style="font-size: 20px"> |
| | | <el-col |
| | | v-for="(row, index) in deviceData.异常检验指标" |
| | | :span="12" |
| | | style="font-weight: 700" |
| | | style="font-weight: 700;" |
| | | :key="index" |
| | | > |
| | | {{ getItemName(row?.项目名称) }} |
| | |
| | | padding-bottom: 10px; /* 设置所有方向的间距为10px */ |
| | | " |
| | | > |
| | | <div style="height: 100%"> |
| | | <div v-show="Number(deviceData.透析状态) > 1" class="zcc_test" style="height: 100%"> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) > 1" |
| | | :ref="'echartsDiv' + deviceData.设备编号" |
| | | :class="'echartsDiv-' + deviceData.设备编号" |
| | | style="height: 97%" |
| | | ></div> |
| | | </div> |
| | |
| | | referrerpolicy="no-referrer" |
| | | src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428" |
| | | /> |
| | | |
| | | |
| | | <span |
| | | class="text-group_3" |
| | | v-if="isinitXy && Number(deviceData.透析状态) >= 1" |
| | |
| | | <div |
| | | class="mowei" |
| | | style="height: 39%" |
| | | v-if="Number(deviceData.透析状态) === 0" |
| | | v-show="Number(deviceData.透析状态) === 0" |
| | | > |
| | | <el-row gutter="20" style="height: 100%; padding: 10px 20px 20px 20px"> |
| | | <el-col :span="12" style="height: 100%"> |
| | |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | <div v-else style="height: 100%"> |
| | | </el-carousel-item> |
| | | <el-carousel-item :style="{ height: pageHeight + 'px'}"> |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | v-show="deviceData.患者姓名 !== ''" |
| | | style=" |
| | | font-weight: 900; |
| | | color: #ffffff; |
| | | width: 100%; |
| | | height: 100%; |
| | | line-height: 100%; |
| | | padding: 20px; |
| | | position: relative; |
| | | " |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="font-size: 300%; height: 100%" |
| | | v-if="deviceData.设备名称 !== null" |
| | | >{{ deviceData.设备名称 }} |
| | | </span> |
| | | <span |
| | | class="grid-container" |
| | | @click="initTupiao" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.患者姓名 }} |
| | | </span> |
| | | |
| | | <span |
| | | class="grid-container" |
| | | v-if="deviceData.年龄 !== null" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.年龄 }}岁</span |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.性别 }}</span |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ patientSourceAndCode }}</span |
| | | > |
| | | <span |
| | | v-if="deviceData.签到号" |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.签到号 }}</span |
| | | > |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-end; |
| | | padding: 5px; |
| | | height: 100%; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container" |
| | | style="display: flex; align-items: center; padding-right: 20px" |
| | | > |
| | | <span |
| | | style=" |
| | | display: inline-block; |
| | | margin-right: 15px; |
| | | font-size: 30px; |
| | | color: #f56c6c; |
| | | " |
| | | >{{ 倒计时显示 }}</span |
| | | > |
| | | <span style="display: inline-block; margin-right: 15px"> |
| | | <img @click="dingshiShow" :src="dingshi" alt="Image 1" /> |
| | | </span> |
| | | <span style="display: inline-block"> |
| | | <img |
| | | @click="centerDialogVisible = true" |
| | | :src="shezhi" |
| | | alt="Image 2" |
| | | /> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | <DoctorAdvice :height="'89%'" :list="deviceData.透析单医嘱列表" /> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | |
| | | <div v-show="!deviceData.患者姓名" style="height: 100%"> |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | style=" |
| | |
| | | v-if="deviceData.设备名称 !== null" |
| | | >{{ deviceData.设备名称 }} |
| | | </span> |
| | | |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | |
| | | " |
| | | >{{ 倒计时显示 }}</span |
| | | > |
| | | |
| | | |
| | | <span style="display: inline-block; margin-right: 15px"> |
| | | <img @click="dingshiShow" :src="dingshi" alt="Image 1" /> |
| | | </span> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- <div class="container-weiqiandao" > |
| | | |
| | | |
| | | <div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;height: 100%;"> |
| | | <div class="container-cord" style="height: 30px;"> |
| | | <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl" |
| | |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button @click="centerDialogVisible = false">取消</el-button> |
| | | <!-- <el-button @click="test">测试播报</el-button> --> |
| | | <!-- <el-button @click="toggleAlarm">测试报警</el-button> --> |
| | | <el-button type="primary" @click="saveSet"> 确认 </el-button> |
| | | <el-button type="success" @click="shuaxin"> 刷新 </el-button> |
| | | </div> |
| | |
| | | <span class="text-gray-500">分钟 </span> |
| | | </el-col> |
| | | </el-form-item> |
| | | |
| | | |
| | | <el-form-item label="提醒内容:"> |
| | | <el-input |
| | | v-if="!formInline.selectOpen" |
| | |
| | | <el-option label="测血压" value="测血压" /> |
| | | <el-option label="开超滤" value="开超滤" /> |
| | | <el-option label="给药" value="给药" /> |
| | | <el-option label="调电导度" value="调电导度" /> |
| | | <el-option label="调血流量" value="调血流量" /> |
| | | <el-option label="冲管" value="冲管" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="定型文:"> |
| | |
| | | import cljd from "../img/cljd.png"; |
| | | import tizhong from "../img/tizhong.png"; |
| | | import { EventSourcePolyfill } from "event-source-polyfill"; |
| | | import alertbaojin from "../assets/alert.wav"; |
| | | import cxybaojing from "../assets/cxy.mp3"; |
| | | import gybaojing from "../assets/gy.mp3"; |
| | | import kclbaojing from "../assets/kcl.mp3"; |
| | | import tdddbaojing from "../assets/tzddd.mp3"; |
| | | import tzxllbaojing from "../assets/tzxll.mp3"; |
| | | import cgbaojing from "../assets/cg.mp3"; |
| | | |
| | | import { |
| | | computed, |
| | | getCurrentInstance, |
| | |
| | | watch, |
| | | onUnmounted, |
| | | onBeforeUnmount, |
| | | nextTick, |
| | | } from "vue"; |
| | | import { Local } from "../utils/storage"; |
| | | import * as echarts from "echarts"; |
| | | import { jgTime4 } from "../utils/formatTime"; |
| | | import { setTimeoutAlert } from "../utils/httpApi"; |
| | | // 语音播报 |
| | | import Speech from "speak-tts"; |
| | | const speech = ref(null); |
| | | import DoctorAdvice from '../components/doctorAdvice/index.vue'; |
| | | // 创建 Audio 对象,指向 public 目录下的音频文件 |
| | | const alarmSound = new Audio(alertbaojin); //一般报警声音 |
| | | const alarmSoundCXY = new Audio(cxybaojing); //测血压报警 |
| | | alarmSoundCXY.loop = true; // 循环播放 |
| | | const alarmSoundGY = new Audio(gybaojing); //给药报警 |
| | | alarmSoundGY.loop = true; // 循环播放 |
| | | const alarmSoundKCL = new Audio(kclbaojing); //开超滤报警 |
| | | alarmSoundKCL.loop = true; // 循环播放 |
| | | const alarmSoundTZDDD = new Audio(tdddbaojing); //调整电导度 |
| | | alarmSoundTZDDD.loop = true; // 循环播放 |
| | | const alarmSoundTZxll = new Audio(tzxllbaojing); //调整电导度 |
| | | alarmSoundTZxll.loop = true; // 循环播放 |
| | | const alarmSoundCG = new Audio(cgbaojing); //冲管 |
| | | alarmSoundCG.loop = true; // 循环播放 |
| | | |
| | | // 控制播放状态的变量 |
| | | const isPlaying = ref(false); |
| | | // 切换播放/暂停的方法 |
| | | const toggleAlarm = () => { |
| | | console.log('-------------') |
| | | console.log('看看是打开还是暂停') |
| | | if (isPlaying.value) { |
| | | if (倒计时告警文本.value === "测血压") { |
| | | |
| | | alarmSoundCXY.pause(); |
| | | } else if (倒计时告警文本.value === "冲管") { |
| | | alarmSoundCG.pause(); |
| | | } else if (倒计时告警文本.value === "开超滤") { |
| | | alarmSoundKCL.pause(); |
| | | } else if (倒计时告警文本.value === "给药") { |
| | | alarmSoundGY.pause(); |
| | | } else if (倒计时告警文本.value === "调电导度") { |
| | | alarmSoundTZDDD.pause(); |
| | | } else if (倒计时告警文本.value === "调血流量") { |
| | | alarmSoundTZxll.pause(); |
| | | } else { |
| | | alarmSound.pause(); |
| | | } |
| | | } else { |
| | | if (倒计时告警文本.value === "测血压") { |
| | | alarmSoundCXY.currentTime = 0; // 从头开始 |
| | | alarmSoundCXY.play().catch((err) => { |
| | | console.error("播放失败:", err); |
| | | }); |
| | | } else if (倒计时告警文本.value === "冲管") { |
| | | alarmSoundCG.currentTime = 0; // 从头开始 |
| | | alarmSoundCG.play().catch((err) => { |
| | | console.error("播放失败:", err); |
| | | }); |
| | | } else if (倒计时告警文本.value === "开超滤") { |
| | | alarmSoundKCL.currentTime = 0; // 从头开始 |
| | | alarmSoundKCL.play().catch((err) => { |
| | | console.error("播放失败:", err); |
| | | }); |
| | | } else if (倒计时告警文本.value === "给药") { |
| | | alarmSoundGY.currentTime = 0; // 从头开始 |
| | | alarmSoundGY.play().catch((err) => { |
| | | console.error("播放失败:", err); |
| | | }); |
| | | } else if (倒计时告警文本.value === "调电导度") { |
| | | alarmSoundTZDDD.currentTime = 0; // 从头开始 |
| | | alarmSoundTZDDD.play().catch((err) => { |
| | | console.error("播放失败:", err); |
| | | }); |
| | | } else if (倒计时告警文本.value === "调血流量") { |
| | | alarmSoundTZxll.currentTime = 0; // 从头开始 |
| | | alarmSoundTZxll.play().catch((err) => { |
| | | console.error("播放失败:", err); |
| | | }); |
| | | } else { |
| | | alarmSound.currentTime = 0; // 从头开始播放 |
| | | alarmSound.play().catch((err) => { |
| | | console.error("播放失败:", err); |
| | | }); |
| | | } |
| | | } |
| | | isPlaying.value = !isPlaying.value; |
| | | }; |
| | | const { proxy } = getCurrentInstance() as any; |
| | | // 在需要使用的组件中引入 |
| | | import { ChatDotSquare } from "@element-plus/icons-vue"; |
| | |
| | | // sse状态 |
| | | const readyState = ref({ key: 0, value: "正在链接中" }); |
| | | |
| | | // 血压的echart实例 |
| | | let bloodPressureEchart: echarts.ECharts | null = null |
| | | let observer; |
| | | |
| | | const deviceCode = ref(""); |
| | | const shishiTime = ref(new Date()); |
| | | //有没有推送过血压如果有 就一直会显示血压数据 |
| | |
| | | selectType: "", |
| | | selectOpen: false, |
| | | }); |
| | | |
| | | |
| | | const 当前客户耗材集合 = ref({}); |
| | | const deviceData = ref({ |
| | | 患者来源: null, |
| | | 患者门诊住院号: '', |
| | | 签到号: '', |
| | | 透析单医嘱列表: [], |
| | | iot_传输时间: "2025-01-10 19:15:24", |
| | | iot_当前脱水量: 2.04, |
| | | iot_脱水目标量: 3.3, |
| | |
| | | const wd = ref(""); |
| | | const ls = ref(""); |
| | | const ddd = ref(""); |
| | | const pageHeight = ref(0); |
| | | const isShowXY = computed(() => { |
| | | if (床旁血压计.value.zuihouTime > shishiTime.value) { |
| | | return true; |
| | |
| | | return false; |
| | | } |
| | | }); |
| | | |
| | | const patientSourceAndCode = computed(() => { |
| | | let res = ''; |
| | | if (deviceData.value.患者来源 === null) { |
| | | return '' |
| | | } else { |
| | | res = deviceData.value.患者来源 === 1 ? '住院号:' : '门诊号:'; |
| | | res += deviceData.value.患者门诊住院号; |
| | | } |
| | | return res; |
| | | }) |
| | | |
| | | watch( |
| | | () => isShowXY.value, |
| | | () => { |
| | | if (床旁血压计.value.zuihouTime > shishiTime.value) { |
| | | } else { |
| | | setTimeout(() => { |
| | | console.log("初始化血压图表222222"); |
| | | initTupiao(); |
| | | }, 500); |
| | | } |
| | |
| | | }; |
| | | // 保存定时任务 |
| | | const setDingshi = () => { |
| | | |
| | | console.log("--------------------"); |
| | | console.log(formInline.value); |
| | | console.log(deviceCode.value); |
| | |
| | | } else { |
| | | alertText = formInline.value.alertText; |
| | | } |
| | | if (alertText==='') { |
| | | if (alertText === "") { |
| | | ElMessage.warning("设置报警消息不能为空"); |
| | | return true; |
| | | } |
| | |
| | | if (res.data === "OK") { |
| | | 倒计时.value = minutes * 60; |
| | | centerDialogVisible2.value = false; |
| | | 倒计时告警文本.value = alertText; |
| | | } else { |
| | | ElMessage.warning(res.message); |
| | | } |
| | | }); |
| | | // centerDialogVisible2.value=false |
| | | }; |
| | | |
| | | |
| | | // 状态颜色 |
| | | const zhuangtaiColor = computed(() => { |
| | | const list = deviceData.value.设备状态列表; |
| | |
| | | } |
| | | }); |
| | | } |
| | | |
| | | |
| | | return zhuantaiStr; |
| | | }); |
| | | const isbaioji = computed(() => { |
| | |
| | | backgroundSize: "cover", // 根据需要调整 |
| | | backgroundPosition: "center", // 根据需要调整 |
| | | }; |
| | | |
| | | |
| | | watch( |
| | | () => txzt.value, |
| | | () => { |
| | |
| | | let hours = Math.floor(totalSeconds / 3600); |
| | | let minutes = Math.floor((totalSeconds % 3600) / 60); |
| | | let seconds = totalSeconds % 60; |
| | | |
| | | |
| | | // 补零函数 |
| | | const pad = (num) => String(num).padStart(2, "0"); |
| | | |
| | | |
| | | return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; |
| | | }; |
| | | |
| | | const 倒计时 = ref(0); |
| | | |
| | | const 倒计时 = ref(-100); |
| | | const 倒计时显示 = ref("00:00:00"); |
| | | const 倒计时告警文本 = ref(""); |
| | | // 定时器回调函数 |
| | | const updateTime = () => { |
| | | 倒计时.value--; |
| | | if (倒计时.value > 0) { |
| | | 倒计时显示.value = formatSecondsToTime(倒计时.value); |
| | | 倒计时.value--; |
| | | } else if (倒计时.value > -5) { |
| | | 倒计时显示.value = ""; |
| | | // 只有没触发的时候才触发他 |
| | | if (centerDialogVisible3.value === false) { |
| | | centerDialogVisible3.value = true; |
| | | 关闭弹框警告(); |
| | | // toggleAlarm(); |
| | | } |
| | | } else { |
| | | 倒计时显示.value = ""; |
| | | } |
| | | }; |
| | | let intervalId = null; |
| | | watch(()=>centerDialogVisible3.value,()=>{ |
| | | if(centerDialogVisible3.value===false){ |
| | | alarmSound.pause(); |
| | | alarmSoundCXY.pause(); |
| | | alarmSoundKCL.pause(); |
| | | alarmSoundGY.pause(); |
| | | alarmSoundTZDDD.pause(); |
| | | alarmSoundTZxll.pause(); |
| | | alarmSoundCG.pause(); |
| | | }else{ |
| | | if (倒计时告警文本.value === "测血压") { |
| | | alarmSoundCXY.play(); |
| | | } |
| | | else if (倒计时告警文本.value === "冲管") { |
| | | alarmSoundCG.play(); |
| | | } |
| | | else if (倒计时告警文本.value === "开超滤") { |
| | | alarmSoundKCL.play(); |
| | | } |
| | | else if (倒计时告警文本.value === "给药") { |
| | | alarmSoundGY.play(); |
| | | } |
| | | else if (倒计时告警文本.value === "调电导度") { |
| | | alarmSoundTZDDD.play(); |
| | | } |
| | | else if (倒计时告警文本.value === "调血流量") { |
| | | alarmSoundTZxll.play(); |
| | | } |
| | | else { |
| | | alarmSound.play(); |
| | | } |
| | | } |
| | | }) |
| | | onMounted(() => { |
| | | let devcieCode = Local.get("devcieCode"); |
| | | if (devcieCode) { |
| | |
| | | centerDialogVisible.value = true; |
| | | } |
| | | intervalId = setInterval(updateTime, 1000); |
| | | speech.value = new Speech(); |
| | | speech.value?.setLanguage("zh-CN"); |
| | | speech.value?.init().then(() => { |
| | | console.log("语音初 始化成功"); |
| | | // test() |
| | | }); |
| | | const height = window.innerHeight; |
| | | pageHeight.value = height; |
| | | |
| | | }); |
| | | // 在组件卸载前清除定时器,防止内存泄漏 |
| | | onBeforeUnmount(() => { |
| | |
| | | clearInterval(intervalId); |
| | | } |
| | | }); |
| | | |
| | | |
| | | const saveSet = () => { |
| | | if (deviceCode.value) { |
| | | centerDialogVisible.value = false; |
| | |
| | | ElMessage.warning("请先输入设备编号"); |
| | | } |
| | | }; |
| | | |
| | | |
| | | /** |
| | | * 刷新页面 |
| | | */ |
| | |
| | | const onFileChange = async (event: Event) => { |
| | | const inputElement = event.target as HTMLInputElement; |
| | | if (!inputElement.files || inputElement.files.length === 0) return; |
| | | |
| | | |
| | | const file = inputElement.files[0]; |
| | | const reader = new FileReader(); |
| | | |
| | | |
| | | reader.onload = async (e) => { |
| | | if (e.target && typeof e.target.result === "string") { |
| | | try { |
| | |
| | | } |
| | | } |
| | | }; |
| | | |
| | | |
| | | reader.readAsDataURL(file); |
| | | }; |
| | | const shaoma = () => {}; |
| | |
| | | console.log(deviceData.value.设备名称, "子组件变量"); |
| | | setTimeout(() => { |
| | | if (!xiaoduzhuangti.value) { |
| | | console.log("初始化血压图表111111"); |
| | | initTupiao(); |
| | | } |
| | | }, 500); |
| | |
| | | // http://testbs.ihemodialysis.com/sse/sseEvent |
| | | // const test='http://testbs.ihemodialysis.com/sse/sseEvent/' |
| | | 数据初始化.value = true; |
| | | const test = "https://backend.ihemodialysis.com/sse/sseEvent/"; |
| | | const test = import.meta.env.VITE_SSE_BASE_URL; |
| | | const stateArr = [ |
| | | { key: 0, value: "正在链接中" }, |
| | | { key: 1, value: "已经链接并且可以通讯" }, |
| | |
| | | if (dataBody.倒计时?.提醒文本) { |
| | | 倒计时.value = dataBody.倒计时?.设定提醒倒计时; |
| | | console.log("设置了倒计时值", 倒计时.value); |
| | | if (倒计时.value <= 0 && 倒计时.value >= -60) { |
| | | if ( |
| | | 倒计时.value <= 0 && |
| | | 倒计时.value >= -60 && |
| | | centerDialogVisible3.value === false |
| | | ) { |
| | | centerDialogVisible3.value = true; |
| | | 倒计时告警文本.value = dataBody.倒计时?.提醒文本; |
| | | 关闭弹框警告(); |
| | | 播报警告文本(倒计时告警文本.value); |
| | | // toggleAlarm(); |
| | | } else if (倒计时.value <= -60) { |
| | | centerDialogVisible3.value = false; |
| | | } |
| | |
| | | zuihouTime: date, |
| | | }; |
| | | setTimeout(() => { |
| | | console.log("初始化血压图表444444"); |
| | | initTupiao(); |
| | | }, 500); |
| | | } else if (dataBody.推送类型 === "中央监控大屏信息") { |
| | |
| | | console.log(Date.now() + "DEV"); |
| | | if (dataBody?.透析状态) { |
| | | deviceData.value = dataBody?.透析状态; |
| | | if ('透析单医嘱列表' in dataBody.透析状态 && dataBody.透析状态?.透析单医嘱列表) { |
| | | deviceData.value.透析单医嘱列表 = dataBody.透析状态.透析单医嘱列表; |
| | | } else { |
| | | deviceData.value.透析单医嘱列表 = [] |
| | | } |
| | | if ('患者来源' in dataBody.透析状态) { |
| | | deviceData.value.患者来源 = dataBody.透析状态.患者来源; |
| | | } else { |
| | | deviceData.value.患者来源 = null |
| | | } |
| | | if ('患者门诊住院号' in dataBody.透析状态) { |
| | | deviceData.value.患者门诊住院号 = dataBody.透析状态.患者门诊住院号; |
| | | } else { |
| | | deviceData.value.患者门诊住院号 = '' |
| | | } |
| | | } else { |
| | | deviceData.value.设备名称 = dataBody.IOT信息.床号; |
| | | deviceData.value.患者姓名 = ""; |
| | |
| | | 当前客户耗材集合.value = dataBody?.使用耗材字典; |
| | | } |
| | | } |
| | | |
| | | |
| | | deviceData.value.设备变化 = Date.now() + "DEV"; |
| | | |
| | | |
| | | deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表; |
| | | console.log(deviceData.value.设备变化); |
| | | deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表; |
| | |
| | | }; |
| | | isinitXy.value = true; |
| | | setTimeout(() => { |
| | | console.log("初始化血压图表333333"); |
| | | |
| | | initTupiao(); |
| | | }, 500); |
| | | }; |
| | |
| | | setTimeout(function () { |
| | | console.log("30秒已过,关闭报警设置弹框。"); |
| | | centerDialogVisible3.value = false; |
| | | 倒计时.value = -100; |
| | | }, 30000); // 30000 毫秒 = 30 秒 |
| | | }; |
| | | const 播报警告文本 = (tex) => { |
| | | if (centerDialogVisible3.value) { |
| | | speech.value |
| | | .speak({ |
| | | text: tex, |
| | | listeners: { |
| | | //开始播放 |
| | | onstart: () => { |
| | | console.log("开始播报"); |
| | | }, |
| | | //判断播放是否完毕 |
| | | onend: () => { |
| | | console.log("播报完成"); |
| | | }, |
| | | //恢复播放 |
| | | onresume: () => { |
| | | console.log("Resume utterance"); |
| | | }, |
| | | }, |
| | | }) |
| | | .then(() => { |
| | | 播报警告文本(tex); |
| | | }); |
| | | } |
| | | }; |
| | | //初始化 |
| | | const sourceInit = () => { |
| | |
| | | onBeforeMount(() => { |
| | | closeSource(); |
| | | }); |
| | | |
| | | |
| | | const renderEcharts = (options: any) => { |
| | | const boxes = document.querySelectorAll(`.echartsDiv-${deviceData.value.设备编号}`); |
| | | boxes.forEach(box => { |
| | | if ((box as HTMLElement).dataset.initialized === 'true') return; |
| | | const chart = echarts.init(box as HTMLElement); |
| | | chart.setOption(options); |
| | | (box as HTMLElement).dataset.initialized = 'true'; |
| | | }); |
| | | } |
| | | |
| | | |
| | | |
| | | const initTupiao = () => { |
| | | if (deviceData.value.患者姓名 !== "") { |
| | | const seriesData = [ |
| | |
| | | ], |
| | | }, |
| | | }, |
| | | |
| | | |
| | | { |
| | | name: "", |
| | | type: "line", |
| | |
| | | label: { fontSize: 20, color: "#409EFF" }, |
| | | }); |
| | | seriesData[2].markPoint.data.push({ |
| | | name: "上机血压", |
| | | name: "上机压", |
| | | value: e.脉搏, |
| | | xAxis: index, |
| | | yAxis: e.脉搏, |
| | |
| | | xAxisData.push(1); |
| | | } |
| | | try { |
| | | const myChart = echarts.init( |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | ); |
| | | // console.log('proxy.$refs["echartsDiv" + deviceData.value.设备编号]: ', proxy.$refs["echartsDiv" + deviceData.value.设备编号]) |
| | | // if (!bloodPressureEchart) { |
| | | // bloodPressureEchart = echarts.init( |
| | | // proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | // ); |
| | | // } |
| | | // console.log('bloodPressureEchart: ', bloodPressureEchart) |
| | | |
| | | const option = { |
| | | // backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value, |
| | | backgroundColor: "#ffffff", |
| | |
| | | }, |
| | | series: seriesData, |
| | | }; |
| | | myChart.setOption(option); |
| | | // console.log("渲染设备", deviceData.value.设备编号, option); |
| | | // console.log('deviceData.透析状态1: ', Number(deviceData.value.透析状态)); |
| | | // nextTick(() => { |
| | | // bloodPressureEchart.setOption(option); |
| | | // bloodPressureEchart.resize(); |
| | | // setTimeout(() => { |
| | | // // 方法1:检查容器内是否有canvas元素 |
| | | // const canvas = bloodPressureEchart.getDom().querySelector('canvas'); |
| | | // console.log('canvas: ', canvas); |
| | | // if (!canvas) { |
| | | // console.error('图表渲染失败:未生成canvas元素'); |
| | | // return; |
| | | // } |
| | | // // 方法2:检查canvas的宽高 |
| | | // if (canvas.width === 0 || canvas.height === 0) { |
| | | // console.error('图表渲染失败:canvas宽高为0'); |
| | | // return; |
| | | // } |
| | | // // 方法3:检查图表实例的宽高 |
| | | // if (bloodPressureEchart.getWidth() === 0 || bloodPressureEchart.getHeight() === 0) { |
| | | // console.error('图表渲染失败:图表实例宽高为0'); |
| | | // return; |
| | | // }}, 1000); |
| | | // }); |
| | | renderEcharts(option); |
| | | } catch (e) { |
| | | console.log("图标渲染异常异常"); |
| | | console.log("图标渲染异常异常:", e); |
| | | } |
| | | } else { |
| | | try { |
| | | const myChart = echarts.init( |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | ); |
| | | // if (!bloodPressureEchart) { |
| | | // // @ts-ignore |
| | | // bloodPressureEchart = echarts.init( |
| | | // proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | // ); |
| | | // } |
| | | |
| | | |
| | | const option = { |
| | | backgroundColor: |
| | | 床旁血压计.value.zuihouTime > shishiTime.value |
| | |
| | | }, |
| | | series: [], |
| | | }; |
| | | myChart.setOption(option); |
| | | // console.log('deviceData.透析状态2: ', Number(deviceData.value.透析状态)); |
| | | // // bloodPressureEchart.setOption(option); |
| | | // nextTick(() => { |
| | | // // bloodPressureEchart.setOption(option); |
| | | // bloodPressureEchart.setOption(option); |
| | | // }); |
| | | renderEcharts(option); |
| | | } catch (e) { |
| | | console.log( |
| | | "异常", |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号], |
| | | e |
| | | ); |
| | | } |
| | | } |
| | |
| | | tbdata1.push(Number(wdMode?.finalText)); |
| | | wd.value = Number(wdMode?.finalText); |
| | | } |
| | | |
| | | |
| | | // 血液流速 |
| | | const xymode = e.属性列表.find((l) => { |
| | | return l.identifierText === "血液流速"; |
| | |
| | | tbdata2.push(Number(xymode?.finalText)); |
| | | ls.value = Number(xymode?.finalText); |
| | | } |
| | | |
| | | |
| | | // 电导度 |
| | | const dddMode = e.属性列表.find((l) => { |
| | | return l.identifierText === "透析液电导度"; |
| | |
| | | } catch (e) { |
| | | console.log("图标渲染异常异常"); |
| | | } |
| | | |
| | | |
| | | console.log(deviceData.value); |
| | | } |
| | | }; |
| | | |
| | | |
| | | const getItemName = (name: string) => { |
| | | if (name) { |
| | | if (name === "血红蛋白测定") { |
| | |
| | | return "Fer "; |
| | | } else if (name === "白蛋白") { |
| | | return "Alb "; |
| | | } else if (name === "血清铁蛋白") { |
| | | return "SF "; |
| | | } else if (name === "钙") { |
| | | return "Ga "; |
| | | } |
| | | // else if (name === "血清铁蛋白") { |
| | | // return "SF "; |
| | | // } |
| | | else if (name === "钙") { |
| | | return "Ca "; |
| | | } else if (name === "钾") { |
| | | return "K "; |
| | | } else if (name === "无机磷") { |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | border: 1px solid coral; |
| | | user-select: none; |
| | | .toubu { |
| | | // padding-left: 20px; |
| | | width: 100%; |
| | |
| | | // border-bottom:8px solid red ; |
| | | } |
| | | } |
| | | |
| | | |
| | | /* 应用闪烁动画 */ |
| | | .blink { |
| | | // float: left; /* 让div浮动到左边 */ |
| | | width: 100%; |
| | | height: 100%; |
| | | animation: blink 2s infinite; /* 每秒闪烁一次,无限次数 */ |
| | | |
| | | |
| | | // border-left:5px solid red ; |
| | | // border-right:5px solid red ; |
| | | |
| | | |
| | | // background: red; |
| | | cursor: pointer; |
| | | // margin-bottom: 100%; |
| | |
| | | align-items: center; /* 垂直居中 */ |
| | | height: 100vh; /* 根据需要调整高度 */ |
| | | } |
| | | |
| | | |
| | | .centered-text { |
| | | font-weight: 600; |
| | | /* 其他样式 */ |
| | |
| | | height: 100%; |
| | | gap: 10px; /* 调整这个值来设置间隔 */ |
| | | } |
| | | |
| | | |
| | | .item-weiqiandao { |
| | | flex: 1; /* 确保每个子 div 占据相同的高度 */ |
| | | background-color: lightblue; /* 可以根据需要调整背景颜色 */ |
| | |
| | | width: 100%; /* 设置一个具体的宽度或确保有继承宽度 */ |
| | | font-weight: 600; |
| | | } |
| | | |
| | | |
| | | .right-div { |
| | | width: 50px; /* 固定宽度 */ |
| | | font-size: 16px; |
| | |
| | | height: 100%; |
| | | overflow-y: auto; /* 当内容超出容器高度时,垂直方向上显示滚动条 */ |
| | | } |
| | | |
| | | |
| | | /* 可选:给ul设置一些样式 */ |
| | | .scrollable-container ul { |
| | | list-style: none; |
| | | padding: 0; |
| | | margin: 0; |
| | | } |
| | | |
| | | |
| | | .scrollable-container li { |
| | | // padding: 4px; |
| | | font-weight: 600; |
| | | // border-bottom: 1px solid #ddd; |
| | | } |
| | | |
| | | |
| | | .cont_parent { |
| | | height: 100%; |
| | | display: grid; |
| | | grid-template-rows: repeat(3, 1fr); /* 将容器划分为3行,每行占1份 */ |
| | | gap: 5px; /* 子元素之间的间隙(可选) */ |
| | | } |
| | | |
| | | |
| | | .cont_child { |
| | | border: 1px solid #ccc; |
| | | padding: 10px; |
| | |
| | | .custom-dialog { |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | |
| | | .my-header { |
| | | background-color: #ff6b6b; /* 标题背景颜色 */ |
| | | color: white; /* 标题文字颜色 */ |
| | |
| | | padding: 0; |
| | | padding-bottom: 10px; |
| | | } |
| | | </style> |
| | | </style> |