| | |
| | | </el-row> |
| | | </div> |
| | | <div class="chongjian" style="height: 50%;"> |
| | | <el-row :gutter="20" style="height: 100%; padding: 20px;"> |
| | | <el-col :span="6" style="height: 100%;"> |
| | | <div style="height: 100%"> |
| | | <el-row :gutter="20" style="height: 100%; padding:20px 20px 10px 20px"> |
| | | <el-col :span="6" style="height: 100%;padding-bottom: 10px;"> |
| | | <div style="height: 100%;"> |
| | | <div |
| | | :style="{ backgroundImage: `url(${deviceData.患者头像})` }" |
| | | style=" |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | margin-bottom: 1%; |
| | | /* margin-bottom: 1%; */ |
| | | height: 100%; |
| | | width: 100%; |
| | | " |
| | |
| | | <!-- 治疗中 --> |
| | | <div class="mowei" style="height: 39%;" v-if="Number(deviceData.透析状态) >0"> |
| | | <el-row style="height: 100%; padding:0px 20px 10px 20px"> |
| | | <!-- 未签到 --> |
| | | <div v-if="Number(deviceData.透析状态) < 1" style="height: 70%;width: 100%;"> |
| | | <div class="container"> |
| | | <div class="item"> |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | <div v-else style="height: 70%;width: 100%; padding-right: 0px;padding-bottom: 10px;"> |
| | | <el-row style="height:100%" :gutter="20"> |
| | | <el-col :span="6" style="height: 100%; "> |
| | | <div class="item" style="height: 100%;padding-bottom: 10px; gap: 10px; /* 设置所有方向的间距为10px */"> |
| | | <div style="height: 25%;"> |
| | | <div class="container-cord" style="height: 100%;"> |
| | | <img style="width: 25px;" referrerpolicy="no-referrer" :src="xinlv" |
| | | <!-- 已签到 --> |
| | | <div v-else style="height: 80%;width: 100%; padding-right: 0px;"> |
| | | <div style="height: 100%; "> |
| | | <el-row style="height: 30%; padding: 0px 0px 10px 0px;" :gutter="20"> |
| | | <el-col :span="12"> |
| | | <div class="container-cord" style="height: 100%;padding-left: 20PX;background-color: #FFFFFF;border-radius: 8px;"> |
| | | <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl" |
| | | /> |
| | | <span class="text-group_3">平均脱水量:</span> |
| | | <span style="color: #333333;font-weight: 600;font-size: 25px;">{{deviceData.最近平均脱水量}}L</span> |
| | | <span style="color: #777777;font-size: 25px;"> </span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="container-cord" style="height: 100%;padding-left: 20PX;background-color: #FFFFFF;border-radius: 8px;"> |
| | | <img style="width: 25px;margin-right: 10px;" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">异常指标</span> |
| | | </div> |
| | | |
| | | <span class="text-group_3">最大脱水量: </span> |
| | | <span style="color: #333333;font-weight: 600;font-size: 25px;">{{deviceData.最近最大脱水量}}L</span> |
| | | <span style="color: #777777;font-size: 25px;">({{deviceData.最近最大脱水量日期}})</span> |
| | | </div> |
| | | <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;color: #CA7070;" > |
| | | <el-row style="font-size: 30px;"> |
| | | <el-col v-for="(row,index) in deviceData.异常检验指标" :span="12" style="font-weight: 700;" :key="index"> |
| | | {{getItemName(row?.项目名称)}} <b v-if="row?.结果标记==='g'" style="font-weight:bold">⬆</b> <b v-else style="font-weight:bold">⬇</b> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="18" style="height: 100%;width: 100%;"> |
| | | <div class="item" style="height: 100%;padding-bottom: 10px; /* 设置所有方向的间距为10px */"> |
| | | <div style="height: 100%;"> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) > 1" |
| | | :ref="'echartsDiv' + deviceData.设备编号" |
| | | style="height: 97%" |
| | | > |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="height:70%;padding: 0px 0px 10px 0px;" :gutter="20"> |
| | | <el-col :span="6" style="height: 100%; "> |
| | | <div class="item" style="height: 100%;padding-bottom: 10px; gap: 10px; /* 设置所有方向的间距为10px */"> |
| | | <div style="height: 25%;"> |
| | | <div class="container-cord" style="height: 100%;"> |
| | | <img style="width: 25px;" referrerpolicy="no-referrer" :src="xinlv" |
| | | /> |
| | | <span class="text-group_3">异常指标</span> |
| | | </div> |
| | | |
| | | </div> |
| | | <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;color: #CA7070;" > |
| | | <el-row style="font-size: 30px;"> |
| | | <el-col v-for="(row,index) in deviceData.异常检验指标" :span="12" style="font-weight: 700;" :key="index"> |
| | | {{getItemName(row?.项目名称)}} <b v-if="row?.结果标记==='g'" style="font-weight:bold">⬆</b> <b v-else style="font-weight:bold">⬇</b> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-col> |
| | | <el-col :span="18" style="height: 100%;width: 100%;"> |
| | | <div class="item" style="height: 100%;padding-bottom: 10px; /* 设置所有方向的间距为10px */"> |
| | | <div style="height: 100%;"> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) > 1" |
| | | :ref="'echartsDiv' + deviceData.设备编号" |
| | | style="height: 97%" |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | <!-- 消息提示一直显示最新的消息 --> |
| | | <div style="height: 30%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 30px;"> |
| | | <div style="height: 20%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 30px;"> |
| | | <div style="height: 100%;"> |
| | | <div class="container-cord" style="height: 100%;padding-left: 20PX;"> |
| | | <img style="width: 25px;" |
| | |
| | | <el-space fill> |
| | | <el-alert type="warning" show-icon :closable="false"> |
| | | <p>"请输入设备编号后才能使用不然无法定位到数据来源:</p> |
| | | <p>也可以选择二维码图片识别</p> |
| | | <p>也可以选择二维码图片文件识别</p> |
| | | </el-alert> |
| | | <el-form-item label="设备编号"> |
| | | <el-input v-model="deviceCode" /> |
| | |
| | | </el-form> |
| | | <div> |
| | | <input type="file" pattern="选取二维码" accept="image/*" @change="onFileChange" /> |
| | | <input type="text" v-model="codeResult" placeholder="扫描结果将会显示在这里"> |
| | | </div> |
| | | </span> |
| | | <template #footer> |
| | |
| | | |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import { BrowserMultiFormatReader, NotFoundException, ChecksumException, FormatException } from '@zxing/library'; |
| | | import TQS88 from "../img/TQS88.png"; |
| | | import shezhi from '../img/shezhi.png' |
| | | import xinlv from '../img/xinlv.png' |
| | |
| | | import cljd from '../img/cljd.png' |
| | | import tizhong from '../img/tizhong.png' |
| | | import {EventSourcePolyfill} from 'event-source-polyfill'; |
| | | import jsQR from 'jsqr'; |
| | | import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, watchEffect } from "vue"; |
| | | import { Local } from '../utils/storage'; |
| | | import * as echarts from "echarts"; |
| | |
| | | // 告警提示 |
| | | // 识别窗口 |
| | | const video = ref<HTMLVideoElement | null>(null); |
| | | // 识别文本 |
| | | const codeResult = ref<string>(''); |
| | | // 识别数据流 |
| | | let stream: MediaStream | null = null; |
| | | const centerDialogVisible = ref(false); |
| | |
| | | ElMessage.warning('请先输入设备编号') |
| | | } |
| | | } |
| | | const onFileChange=(event: Event) =>{ |
| | | 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 = function(e) { |
| | | reader.onload = async (e) => { |
| | | if (e.target && typeof e.target.result === 'string') { |
| | | const img = document.createElement('img'); |
| | | img.src = e.target.result; |
| | | img.onload = function() { |
| | | const canvas = document.createElement('canvas'); |
| | | canvas.width = img.width; |
| | | canvas.height = img.height; |
| | | const ctx = canvas.getContext('2d'); |
| | | if (ctx) { |
| | | ctx.drawImage(img, 0, 0); |
| | | const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); |
| | | const code = jsQR(imageData.data, imageData.width, imageData.height); |
| | | if (code) { |
| | | codeResult.value = code.data; |
| | | } |
| | | try { |
| | | const codeReader = new BrowserMultiFormatReader(); |
| | | const result = await codeReader.decodeFromImage(undefined, e.target.result); |
| | | deviceCode.value = result.text; |
| | | ElMessage.success('识别成功') |
| | | } catch (err) { |
| | | if (err instanceof NotFoundException) { |
| | | ElMessage.error("未找到二维码"); |
| | | } else if (err instanceof ChecksumException) { |
| | | ElMessage.error("校验错误"); |
| | | } else if (err instanceof FormatException) { |
| | | ElMessage.error("格式错误"); |
| | | } else { |
| | | ElMessage.error("识别错误请重新识别"); |
| | | console.error(err); |
| | | } |
| | | }; |
| | | } |
| | | } |
| | | }; |
| | | |
| | |
| | | //创建链接对象 |
| | | 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 test='http://testbs.ihemodialysis.com/sse/sseEvent/' |
| | | const test='https://backend.ihemodialysis.com/sse/sseEvent/' |
| | | const stateArr = [ |
| | | { key: 0, value: "正在链接中" }, |
| | | { key: 1, value: "已经链接并且可以通讯" }, |