From 6ad664b1978f78352a524b80c3bd10edf1bf0a94 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期一, 24 二月 2025 16:03:26 +0800
Subject: [PATCH] gx新的设计样式
---
src/img/cljd.png | 0
src/img/txq.png | 0
src/img/zlms.png | 0
src/views/deviceWindoes2.vue | 1534 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/img/tizhong.png | 0
src/views/deviceWindows.vue | 9
src/img/txzt.png | 0
src/img/tsl.png | 0
src/img/shezhi.png | 0
src/router/index.ts | 3
src/App.vue | 2
src/img/sjjd.png | 0
src/img/xinlv.png | 0
13 files changed, 1,536 insertions(+), 12 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 7fe1997..c67ad8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,5 @@
<script setup lang="ts">
import { ref } from "vue";
-import deviceView from "./components/deviceView.vue";
-
</script>
<template>
diff --git a/src/img/cljd.png b/src/img/cljd.png
new file mode 100644
index 0000000..21ddeeb
--- /dev/null
+++ b/src/img/cljd.png
Binary files differ
diff --git a/src/img/shezhi.png b/src/img/shezhi.png
new file mode 100644
index 0000000..a96e99b
--- /dev/null
+++ b/src/img/shezhi.png
Binary files differ
diff --git a/src/img/sjjd.png b/src/img/sjjd.png
new file mode 100644
index 0000000..8a35d17
--- /dev/null
+++ b/src/img/sjjd.png
Binary files differ
diff --git a/src/img/tizhong.png b/src/img/tizhong.png
new file mode 100644
index 0000000..df7ee16
--- /dev/null
+++ b/src/img/tizhong.png
Binary files differ
diff --git a/src/img/tsl.png b/src/img/tsl.png
new file mode 100644
index 0000000..5a266f4
--- /dev/null
+++ b/src/img/tsl.png
Binary files differ
diff --git a/src/img/txq.png b/src/img/txq.png
new file mode 100644
index 0000000..8cfabb3
--- /dev/null
+++ b/src/img/txq.png
Binary files differ
diff --git a/src/img/txzt.png b/src/img/txzt.png
new file mode 100644
index 0000000..10cc370
--- /dev/null
+++ b/src/img/txzt.png
Binary files differ
diff --git a/src/img/xinlv.png b/src/img/xinlv.png
new file mode 100644
index 0000000..1a96ea5
--- /dev/null
+++ b/src/img/xinlv.png
Binary files differ
diff --git a/src/img/zlms.png b/src/img/zlms.png
new file mode 100644
index 0000000..c1a08f6
--- /dev/null
+++ b/src/img/zlms.png
Binary files differ
diff --git a/src/router/index.ts b/src/router/index.ts
index e73a4fa..6a5cc9e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,7 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue'; // 假设这是你的主页组件
import deviceWindows from '../views/deviceWindows.vue'
+import deviceWindows2 from '../views/deviceWindoes2.vue'
// import Search from '../views/Search.vue'; // 搜索结果页，接收查询参数
// 定义路由规则，并为每个路由指定类型安全的 props
@@ -9,7 +10,7 @@
{
path: '/',
name: 'Home',
- component: Home,
+ component: deviceWindows2,
},
{
path: '/deviceWindows/:deviceid',
diff --git a/src/views/deviceWindoes2.vue b/src/views/deviceWindoes2.vue
new file mode 100644
index 0000000..1655f15
--- /dev/null
+++ b/src/views/deviceWindoes2.vue
@@ -0,0 +1,1534 @@
+<template>
+ <div class="divice">
+ <div class="youzhiliao" style="height: 100%;" v-if="deviceData.患者姓名">
+ <div class="toubu" style="height: 11%;">
+ <el-row
+ v-if="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: 5%; font-size: 350%; height: 100%"
+ >{{ deviceData.患者姓名 }}
+ </span>
+
+ <span
+ class="grid-container"
+ v-if="deviceData.年龄 !== null"
+ style="margin-left: 5%; font-size: 300%; height: 100%"
+ >{{ deviceData.年龄 }}岁</span
+ >
+ <span
+ class="grid-container"
+ style="margin-left: 5%; font-size: 300%; height: 100%"
+ >{{ deviceData.性别 }}</span
+ >
+ <div style="
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: grid;
+ padding: 5px;
+ font-size: 300%;
+ height: 100%
+ ">
+ <span class="grid-container"
+ style="height: 100%;color: #303133;padding-right: 20px;"
+ >
+ <el-image @click="centerDialogVisible=true" :src="shezhi"></el-image>
+ </span>
+ </div>
+ </el-row>
+ </div>
+ <div class="chongjian" style="height: 54%;">
+ <el-row :gutter="20" style="height: 100%; padding: 20px;">
+ <el-col :span="6" style="height: 100%;">
+ <div style="height: 100%">
+ <div
+ :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
+ style="
+ background-size: 100% 100%;
+ border-radius: 5px;
+ margin-bottom: 1%;
+ height: 100%;
+ width: 100%;
+ "
+ >
+ </div>
+ </div>
+ </el-col>
+ <template v-if="床旁血压计.zuihouTime>shishiTime">
+ <el-col :span="18" style="height: 100%;">
+ <el-row style="height: 50%; ">
+ <div style="width: 100%; height: 100%;border-radius: 8px;">
+ <div class="item" style="background-color: #ffffff;height: 97%;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 35px;" referrerpolicy="no-referrer" :src="tsl"
+ />
+ <span class="text-group_3">血压</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 92px;color: #70A3DD;" class="grid-container" >
+ {{床旁血压计.sbp}} / {{床旁血压计.dbp}}
+ </div>
+ </div>
+ </div>
+
+ </el-row>
+ <el-row style="height: 50%;">
+ <div style="width: 100%; height: 100%;border-radius: 8px;">
+ <div class="item" style="background-color: #ffffff;height: 97%;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="xinlv"
+ />
+ <span class="text-group_3">心率</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 92px;color: #70A3DD;" class="grid-container" >
+ {{床旁血压计.pulseRate}}
+ </div>
+ </div>
+ </div>
+
+ </el-row>
+ </el-col>
+ </template>
+ <template v-else>
+ <el-col :span="18" style="height: 100%;">
+ <el-row style="height: 50%; padding-bottom: 10px;">
+ <div style="width: 100%; height: 100%;border-radius: 8px;">
+ <el-row style="height: 100%;" :gutter="10">
+ <el-col class="itemboy" style="height:100%" :span="7">
+ <div class="item" style="background-color: #ffffff;height: 97%;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="zlms"
+ />
+ <span class="text-group_3">治疗模式</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #D58E56;" class="grid-container" >
+ {{ deviceData.透析方案 }}
+ </div>
+ </div>
+ </el-col>
+ <el-col class="itemboy" style="height:100%" :span="7">
+ <div class="item" style="background-color: #ffffff;height: 97%;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="txztimg"
+ />
+ <span class="text-group_3">治疗状态</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #70A3DD;" class="grid-container" >
+ {{txztText}}
+ </div>
+ </div>
+ </el-col>
+ <el-col class="itemboy" style="height:100%" :span="10">
+ <div class="item" style="background-color: #ffffff;height: 97%;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="txq"
+ />
+ <span class="text-group_3">人工肾</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #8079CB;" class="grid-container" >
+ {{deviceData.透析器}}
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+
+ </div>
+ </el-row>
+ <!-- 签到未签到状态 -->
+ <div class="container" v-if="Number(deviceData.透析状态) < 1" style="height: 50%; ">
+ <div class="item" style="background-color: #FFFFFF;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="xinlv"
+ />
+ <span class="text-group_3">透前血压、心率</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ <div>
+ <span v-if="deviceData.透前血压_伸缩压" :style="{ color: tqXygj ? 'red' : '#303133' }">{{ deviceData.透前血压_伸缩压 }}/</span >
+ <span :style="{ color: tqXygj ? 'red' : '#303133' }" style="font-weight: 800; font-size: 200%; white-space: nowrap">{{ deviceData.透前血压_舒张压 }}</span>
+ <span v-if="deviceData.透前脉搏" :style="{ color: tqMbgj ? 'red' : '#303133' }" style="font-weight: 800; font-size: 200%; white-space: nowrap"> {{ deviceData.透前脉搏 }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="item" style="background-color: #ffffff;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="tsl"
+ />
+ <span class="text-group_3">处方脱水量</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #8079CB;" class="grid-container" >
+ <span v-if="deviceData.处方脱水量"></span>
+ {{deviceData.处方脱水量}} L
+ </div>
+ </div>
+ </div>
+ <!-- 透析中状态 -->
+ <div class="container" v-else style="height: 50%; ">
+ <div class="item" style="background-color: #FFFFFF;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="sjjd"
+ />
+ <span class="text-group_3">时间进度</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ <div>
+ <span style="color: #303133">{{
+ jgTime4(deviceData.iot_透析时间)
+ }}</span
+ >/<span
+ >{{ deviceData.透析处方的时长_小时 }}:{{
+ deviceData.透析处方的时长_分钟
+ }}</span
+ >
+ </div>
+ <div>
+ <el-progress
+ :text-inside="true"
+ :stroke-width="30"
+ :show-text="false"
+ color="#70A3DD"
+ :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
+ status="success"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="item" style="background-color: #ffffff;">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="cljd"
+ />
+ <span class="text-group_3">超滤进度</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #8079CB;" class="grid-container" >
+ <div>
+ <span style="color: #303133">{{
+ Number(deviceData.iot_当前脱水量).toFixed(1)
+ }}</span
+ >/<span>{{
+ Number(deviceData.iot_脱水目标量).toFixed(1)
+ }}</span
+ ><span style="font-size: 80%"
+ >({{ deviceData.iot_脱水速率 }})</span
+ >
+ </div>
+ <div>
+ <el-progress
+ :text-inside="true"
+ :stroke-width="30"
+ :show-text="false"
+ color="#70CAAE"
+ :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </template>
+
+ </el-row>
+ </div>
+
+
+ <div class="mowei" style="height: 35%; ">
+ <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 style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="tizhong"
+ />
+ <span class="text-group_3">干体重</span>
+ </div>
+
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ {{ Number(deviceData.干体重).toFixed(1) }}
+ </div>
+ </div>
+ <div class="item">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="tizhong"
+ />
+ <span class="text-group_3" >透前称重</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ {{ Number(deviceData.透前称重).toFixed(1) }}
+ </div>
+ </div>
+ <div class="item">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="tizhong"
+ />
+ <span class="text-group_3">上次透后体重</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ {{ Number(deviceData.上次透后称重).toFixed(1) }}
+ </div>
+ </div>
+ <div class="item">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="tizhong"
+ />
+ <span class="text-group_3" >体重增长</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ +{{
+ Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
+ }}
+ </div>
+ </div>
+ <div class="item">
+ <div style="height: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="tizhong"
+ />
+ <span class="text-group_3">增长率</span>
+ </div>
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ {{ deviceData.体重增长率 }}%
+ </div>
+ </div>
+ </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: 30%;">
+ <div class="container-cord" style="height: 100%;">
+ <img style="width: 32px;" referrerpolicy="no-referrer" :src="xinlv"
+ />
+ <span class="text-group_3">跨膜压/舒张压</span>
+ </div>
+
+ </div>
+ <div style="height: 70%; text-align: center;font-weight: 600;font-size: 48px;color: #333333;" class="grid-container" >
+ <div>
+ <span @click="initTupiao" v-if="deviceData.iot_静脉压" style="color: #409eff">{{ deviceData.iot_静脉压 }}</span> /
+ <span v-if="deviceData.iot_跨膜压" :style="{ color: deviceData.iot_跨膜压 > 200 ? 'red' : '', }" >{{ deviceData.iot_跨膜压 }}</span>
+ </div>
+
+ </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%"
+ >
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ <!-- 消息提示一直显示最新的消息 -->
+ <div style="height: 30%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 25px;">
+ <div style="height: 100%;">
+ <div class="container-cord" style="height: 100%;padding-left: 20PX;">
+ <img style="width: 25px;"
+ referrerpolicy="no-referrer"
+ src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428"
+ />
+
+ <span class="text-group_3" v-if="isinitXy" >
+ 最近一次， 高压：{{床旁血压计.sbp}}，低压： {{床旁血压计.dbp}}， 心率： {{床旁血压计.pulseRate}}
+ </span>
+ <span class="text-group_3" v-else>暂无通知消息哦</span>
+ </div>
+
+ </div>
+ </div>
+ </el-row>
+ </div>
+ </div>
+ <div v-else style="height: 100%;">
+ <div class="toubu" style="height: 11%;">
+ <el-row
+ 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>
+
+ <div style="
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: grid;
+ padding: 5px;
+ font-size: 300%;
+ height: 100%
+ ">
+ <span class="grid-container"
+ style="height: 100%;color: #303133;padding-right: 20px;"
+ >
+ <el-image @click="centerDialogVisible=true" :src="shezhi"></el-image>
+ </span>
+ </div>
+ </el-row>
+ </div>
+
+ <div style="height: 89%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 100px;">
+ <div style="height: 100%;">
+ <div class="container-cord" style="height: 100%;padding-left: 20PX;">
+ <img style="width: 100px;"
+ referrerpolicy="no-referrer"
+ src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428"
+ />
+ <span class="text-group_3" style="font-size: 100px;">等待患者排班</span>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ <el-dialog
+ :show-close="false"
+ :close-on-press-escape="false"
+ :close-on-click-modal="false"
+ title="提示"
+ v-model="centerDialogVisible"
+ width="500px"
+ center>
+ <span>
+ <el-form label-position="left" label-width="auto" style="max-width: 600px">
+ <el-space fill>
+ <el-alert type="warning" show-icon :closable="false">
+ <p>"请输入设备编号后才能使用不然无法定位到数据来源:</p>
+ </el-alert>
+ <el-form-item label="设备编号">
+ <el-input v-model="deviceCode" />
+ </el-form-item>
+ </el-space>
+ </el-form>
+ </span>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="centerDialogVisible = false">取消</el-button>
+ <el-button type="primary" @click="saveSet">
+ 确认
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+
+
+
+ </template>
+ <script lang="ts" setup>
+ import TQS88 from "../img/TQS88.png";
+ import shezhi from '../img/shezhi.png'
+ import xinlv from '../img/xinlv.png'
+ import tsl from '../img/tsl.png'
+ import zlms from '../img/zlms.png'
+ import txztimg from '../img/txzt.png'
+ import txq from '../img/txq.png'
+ import sjjd from '../img/sjjd.png'
+ import cljd from '../img/cljd.png'
+ import tizhong from '../img/tizhong.png'
+ import {EventSourcePolyfill} from 'event-source-polyfill';
+ import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, watchEffect } from "vue";
+ import { Local } from '../utils/storage';
+ import * as echarts from "echarts";
+ import { jgTime4 } from "../utils/formatTime";
+ const { proxy } = getCurrentInstance() as any;
+ // 在需要使用的组件中引入
+ import { ChatDotSquare } from '@element-plus/icons-vue';
+ import { ElMessage } from "element-plus";
+ // 连接服务器
+ const source = ref<EventSourcePolyfill | null>(null);
+ //接收到的sse数据
+ const sseData = ref({});
+ // sse状态
+ const readyState = ref({ key: 0, value: "正在链接中" });
+ const deviceCode=ref('')
+ const shishiTime=ref(new Date())
+ //有没有推送过血压如果有 就一直会显示血压数据
+ const isinitXy=ref(false)
+ const 床旁血压计=ref({
+ date_time:'',
+ sbp:'178',
+ pulseRate:'11',
+ dbp:'111',
+ zuihouTime:new Date()
+ })
+ const deviceData = ref({
+ iot_传输时间: "2025-01-10 19:15:24",
+ iot_当前脱水量: 2.04,
+ iot_脱水目标量: 3.3,
+ iot_脱水速率: 0.82,
+ iot_跨膜压: 40,
+ iot_透析时间: 149,
+ iot_静脉压: 86,
+ 上次透后称重: 72.5,
+ 体重增加: 3.1,
+ 体重增长率: 4.5,
+ 分区编号: "109195231931115eZmM",
+ 处方脱水量: 3.3,
+ 实时脱水量: 1.65,
+ 干体重: 69.5,
+ 年龄: 59,
+ 性别: "男",
+ 患者头像:
+ "http://dhimg.leon056.com/hemodialysis/face/PAT9090070832211PyVq/face-IMG_20240413_112705.jpg-202404131127536157.jpg",
+ 患者姓名: "",
+ 患者编号: "PAT9090070832211PyVq",
+ 患者透析号: "0207",
+ 最后一条血压: 116,
+ 此次脱水量: 6.1,
+ 监测血压是否低于百分之30: false,
+ 监测血压是否高于百分之30: false,
+ 监测记录列表: [
+ {
+ 伸缩压: "152",
+ 脉搏: "66",
+ 舒张压: "76",
+ },
+ {
+ 伸缩压: "133",
+ 脉搏: "67",
+ 舒张压: "72",
+ },
+ {
+ 伸缩压: "116",
+ 脉搏: "79",
+ 舒张压: "63",
+ },
+ ],
+ 第一条血压: 152,
+ 脉搏列表: "66,67,79",
+ 血压低值列表: "76,72,63",
+ 血压高值列表: "152,133,116",
+ 设备分区类型: 0,
+ 设备号: "23",
+ 设备名称: "24",
+ 设备序列号: "B97AP002",
+ 设备状态列表: [
+ ],
+ 设备编号: "DEVICE9195233509924hOHL",
+ 超滤速度过快: null,
+ 跨膜压列表: "2753,33,37",
+ 跨膜压是否大于200: false,
+ 透前称重: 75.6,
+ 透前脉搏: 77,
+ 透前血压_伸缩压: 136,
+ 透前血压_舒张压: 57,
+ 透析单编号: "9347151058555cAjJ",
+ 透析器: "B-17AHF",
+ 透析处方的时长: 4,
+ 透析处方的时长_分钟: "00",
+ 透析处方的时长_小时: "4",
+ 透析开始时间: "2025-01-10 16:44:00",
+ 透析方案: "HD",
+ 透析状态: "1.0",
+ 透析结束时间: "2025-01-10 20:44:00",
+ 设备变化: "1736508117033DEV",
+ 属性历史列表: [
+ {
+ 属性列表: [
+ {
+ identifier: "D",
+ identifierText: "血液流速",
+ time2: 1736507724242,
+ time: 1736507724242,
+ finalText: "00240",
+ isShow: 1,
+ },
+ {
+ identifier: "F",
+ identifierText: "透析液温度",
+ time2: 1736507724242,
+ time: 1736507724242,
+ finalText: "036.4",
+ isShow: 1,
+ },
+ {
+ identifier: "G",
+ identifierText: "透析液电导度",
+ time2: 1736507724242,
+ time: 1736507724242,
+ finalText: "013.8",
+ isShow: 1,
+ },
+ ],
+ 查询时间: "2025-01-10 19:17:57",
+ },
+ {
+ 属性列表: [
+ {
+ identifier: "D",
+ identifierText: "血液流速",
+ time2: 1736507538186,
+ time: 1736507538186,
+ finalText: "00240",
+ isShow: 1,
+ },
+ {
+ identifier: "F",
+ identifierText: "透析液温度",
+ time2: 1736507538186,
+ time: 1736507538186,
+ finalText: "036.5",
+ isShow: 1,
+ },
+ {
+ identifier: "G",
+ identifierText: "透析液电导度",
+ time2: 1736507538186,
+ time: 1736507538186,
+ finalText: "013.7",
+ isShow: 1,
+ },
+ ],
+ 查询时间: "2025-01-10 19:12:59",
+ },
+ {
+ 属性列表: [
+ {
+ identifier: "D",
+ identifierText: "血液流速",
+ time2: 1736507290239,
+ time: 1736507290239,
+ finalText: "00240",
+ isShow: 1,
+ },
+ {
+ identifier: "F",
+ identifierText: "透析液温度",
+ time2: 1736507290239,
+ time: 1736507290239,
+ finalText: "036.5",
+ isShow: 1,
+ },
+ {
+ identifier: "G",
+ identifierText: "透析液电导度",
+ time2: 1736507290239,
+ time: 1736507290239,
+ finalText: "013.8",
+ isShow: 1,
+ },
+ ],
+ 查询时间: "2025-01-10 19:08:00",
+ },
+ ],
+ });
+ // 告警提示
+ const textbaojing = ref("");
+ const iscomfig = ref(false);
+ const centerDialogVisible = ref(false);
+ const background = ref("");
+ const txztText = ref("");
+ const textcolor = ref("");
+ const wd = ref("");
+ const ls = ref("");
+ const ddd = ref("");
+ const isShowXY=computed(()=>{
+ if(床旁血压计.value.zuihouTime>shishiTime.value){
+ return true
+ }else{
+ return false
+ }
+ })
+ watch(() =>isShowXY.value,
+ ()=>{
+ if(床旁血压计.value.zuihouTime>shishiTime.value){
+
+ }else{
+ setTimeout(()=>{
+ initTupiao()
+ },500)
+
+
+ }
+ }
+ )
+ const txzt: any = computed(() => {
+ return deviceData.value.透析状态;
+ });
+ // 是否是消毒类型和待机
+ const xiaoduzhuangti = computed(() => {
+ return false;
+ });
+ // 状态颜色
+ const zhuangtaiColor = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ let colorStr = "#13CE66";
+ if (list && list.length > 0) {
+ // 默认显示第一状态颜色
+ // colorStr=list[0].状态颜色
+ // 消毒状态优先级高
+ const x = list.findIndex((e) => {
+ return e.状态类型 === "透析机消毒" || e.状态类型 === "在线";
+ });
+ if (x !== 0) {
+ colorStr = list[0].状态颜色;
+ }
+ }
+ return colorStr;
+ });
+ // 没有报警就返回空字符传
+ const noBaoji = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ let zhuantaiStr = "";
+ let jinggaoStr = "";
+ if (list && list.length > 0) {
+ list.forEach((el: any) => {
+ if (el.是否为警告标记 === 1) {
+ if (jinggaoStr !== "") {
+ jinggaoStr += "/" + el.状态名称;
+ } else {
+ jinggaoStr += el.状态名称;
+ }
+ } else {
+ zhuantaiStr += el.状态名称;
+ }
+ });
+ }
+ return jinggaoStr;
+ });
+ // 状态返回
+ const zhuangtaiStr = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ let zhuantaiStr = "";
+ if (list && list.length > 0) {
+ list.forEach((el: any) => {
+ if (
+ el.是否为警告标记 === 1 ||
+ el.状态类型 === "透析机消毒" ||
+ el.状态类型 === "在线"
+ ) {
+ //去掉待机和消毒状态显示
+ } else {
+ if (zhuantaiStr !== "") {
+ zhuantaiStr += "/" + el.状态名称;
+ } else {
+ zhuantaiStr += el.状态名称;
+ }
+ }
+ });
+ }
+
+ return zhuantaiStr;
+ });
+ const isbaioji = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ if (
+ (deviceData.value.监测血压是否低于百分之30 ||
+ deviceData.value.跨膜压是否大于200 ||
+ deviceData.value.监测血压是否高于百分之30) &&
+ deviceData.value.透析状态 === "2.0"
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+ });
+ // 透前血压告警
+ const tqXygj = computed(() => {
+ if (deviceData.value.透前血压_伸缩压 > 160 || deviceData.value.透前血压_伸缩压 < 90) {
+ return true;
+ } else {
+ return false;
+ }
+ });
+ // 透前脉搏告警
+ const tqMbgj = computed(() => {
+ if (deviceData.value.透前脉搏 > 90) {
+ return true;
+ } else {
+ return false;
+ }
+ });
+ // 设置内联样式对象
+ const backgroundStyle = {
+ backgroundImage: `url(${TQS88})`,
+ backgroundSize: "cover", // 根据需要调整
+ backgroundPosition: "center", // 根据需要调整
+ };
+
+ watch(
+ () => txzt.value,
+ () => {
+ if (txzt.value === "0.0") {
+ txztText.value = "未签";
+ textcolor.value = "#FAFAFA";
+ background.value = "#606266";
+ } else if (txzt.value === "1.0") {
+ // 蓝色
+ textcolor.value = "#faecd8";
+ background.value = "#E6A23C";
+ txztText.value = "已签";
+ } else if (txzt.value === "2.0") {
+ // 绿色
+ // textcolor.value = '#D9F5E2';
+ // background.value='#67C23A'
+ textcolor.value = "#ECF5FF";
+ background.value = "#409EFF";
+ txztText.value = "透中";
+ } else if (txzt.value === "2.5") {
+ //
+ textcolor.value = "#fde2e2";
+ background.value = "#fab6b6";
+ txztText.value = "结束";
+ } else if (txzt.value === "3.0") {
+ // 已经结束
+ textcolor.value = "#FFECD0";
+ background.value = "#E6A23C";
+ txztText.value = "检查";
+ } else if (txzt.value === "4.0") {
+ // yij
+ textcolor.value = "#FFECD0";
+ background.value = "#E6A23C";
+ txztText.value = "归档";
+ }
+ },
+ {
+ immediate: true,
+ deep: true,
+ }
+ );
+ onMounted(() => {
+ let devcieCode=Local.get('devcieCode')
+ if(devcieCode){
+ deviceCode.value=devcieCode
+ sourceInit()
+ }else{
+ centerDialogVisible.value=true
+ }
+ });
+ const saveSet=()=>{
+ if(deviceCode.value){
+ centerDialogVisible.value=false
+ Local.set('devcieCode',deviceCode.value)
+ sourceInit()
+ window.location.reload();
+ }else{
+ ElMessage.warning('请先输入设备编号')
+ }
+ }
+ watch(
+ () => deviceData.value.设备变化,
+ () => {
+ console.log(deviceData.value.设备名称,'子组件变量')
+ setTimeout(() => {
+ if (!xiaoduzhuangti.value) {
+ initTupiao();
+ }
+ }, 500);
+ }
+ );
+ //创建链接对象
+ const creatSource = () => {
+ // http://testbs.ihemodialysis.com/sse/sseEvent
+ const stateArr = [
+ { key: 0, value: "正在链接中" },
+ { key: 1, value: "已经链接并且可以通讯" },
+ { key: 2, value: "连接已关闭或者没有链接成功" },
+ ];
+ try {
+ source.value= new EventSourcePolyfill(`https://backend.ihemodialysis.com/sse/sseEvent/${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.患者姓名=''
+ }
+
+ deviceData.value.设备变化=Date.now() + 'DEV'
+ console.log(1)
+ console.log(2)
+ deviceData.value.属性历史列表=dataBody?.IOT信息?.属性历史列表
+ console.log(3)
+
+ console.log(4)
+ console.log(deviceData.value.设备变化)
+ deviceData.value.设备状态列表=dataBody.IOT信息.状态列表
+
+ }
+
+ }
+ }
+ };
+ } catch (error) {
+ console.log(error);
+ }
+ };
+ const showxuye=()=>{
+ let date = new Date();
+ date.setMinutes(date.getMinutes() + 0.1);
+ 床旁血压计.value={
+ date_time:'2023-32-3232',
+ sbp:'117',
+ pulseRate:'77',
+ dbp:'99',
+ zuihouTime:date
+ }
+ isinitXy.value=true
+ setTimeout(()=>{
+ initTupiao()
+ },500)
+ }
+ //初始化
+ const sourceInit = () => {
+ console.log('初始化see')
+ if (!source.value|| source.value.readyState === 2) {
+ creatSource();
+ }
+ };
+ // 关闭 WebSocket
+ const closeSource = () => {
+ console.log('断开')
+ source.value?.close();
+ };
+ // 取消订阅
+ onBeforeMount(()=>{
+ closeSource()
+ })
+ const initTupiao = () => {
+ if (deviceData.value.患者姓名 !== "") {
+ const seriesData = [
+ {
+ name: "11",
+ type: "line",
+ symbol: "triangle",
+ symbolSize: 10,
+ symbolRotate: 180,
+ data: [],
+ lineStyle: {
+ width: 5, // 设置线条宽度为5
+ color: "red",
+ },
+ itemStyle: {
+ borderWidth: 5,
+ borderColor: "red",
+ color: "red",
+ },
+ markPoint: {
+ data: [],
+ },
+ markLine: {
+ symbol: "none",
+ lineStyle: { color: "#409EFF", width: 3 },
+ data: [
+ { name: "y90", yAxis: 90, label: { show: false }, symbol: "none" },
+ ],
+ },
+ },
+
+ {
+ name: "",
+ type: "line",
+ symbol: "triangle",
+ symbolSize: 10,
+ data: [],
+ lineStyle: {
+ color: "#409EFF",
+ width: 5, // 设置线条宽度为5
+ },
+ itemStyle: {
+ borderWidth: 5,
+ borderColor: "#409EFF",
+ color: "#409EFF",
+ },
+ markPoint: {
+ data: [],
+ },
+ markLine: {
+ symbol: "none",
+ lineStyle: { color: "#F56C6C", width: 3 },
+ data: [
+ {
+ name: "y140",
+ yAxis: 140,
+ label: { show: false },
+ symbol: "none",
+ },
+ ],
+ },
+ },
+ {
+ name: "",
+ type: "line",
+ symbolSize: 10,
+ data: [],
+ lineStyle: {
+ color: "#D940FF",
+ width: 5, // 设置线条宽度为5
+ },
+ itemStyle: {
+ borderWidth: 5,
+ borderColor: "#D940FF",
+ color: "#D940FF",
+ },
+ markPoint: {
+ data: [],
+ },
+ },
+ ];
+ const xAxisData = [];
+ if (Number(deviceData.value.透析状态) >= 2) {
+ // alert(111)
+ deviceData.value.监测记录列表.forEach((e, index) => {
+ seriesData[0].data.push(e.伸缩压);
+ seriesData[1].data.push(e.舒张压);
+ seriesData[2].data.push(e.脉搏);
+ xAxisData.push(index);
+ if (index == 0) {
+ let y = Number(e.伸缩压) + 20;
+ let y2 = Number(e.舒张压) + 20;
+ seriesData[0].markPoint.data.push({
+ name: "上机血压",
+ value: e.伸缩压,
+ xAxis: 0,
+ yAxis: e.伸缩压,
+ symbolSize: 0,
+ symbolOffset: [0, 20],
+ label: { fontSize: 20, color: "red" },
+ });
+ seriesData[1].markPoint.data.push({
+ name: "上机血压",
+ value: e.舒张压,
+ xAxis: 0,
+ yAxis: e.舒张压,
+ symbolSize: 0,
+ symbolOffset: [15, 15],
+ label: { fontSize: 20, color: "#409EFF" },
+ });
+ seriesData[2].markPoint.data.push({
+ name: "上机血压",
+ value: e.脉搏,
+ xAxis: 0,
+ yAxis: e.脉搏,
+ symbolSize: 0,
+ symbolOffset: [10, -10],
+ label: { fontSize: 20, color: "#D940FF" },
+ });
+ } else if (
+ deviceData.value.监测记录列表.length > 1 &&
+ index === deviceData.value.监测记录列表.length - 1
+ ) {
+ let y = Number(e.伸缩压) + 20;
+ let y2 = Number(e.舒张压) + 20;
+ seriesData[0].markPoint.data.push({
+ name: "上机血压",
+ value: e.伸缩压,
+ xAxis: index,
+ yAxis: e.伸缩压,
+ symbolSize: 0,
+ symbolOffset: [-15, -15],
+ label: { fontSize: 20, color: "red" },
+ });
+ seriesData[1].markPoint.data.push({
+ name: "上机血压",
+ value: e.舒张压,
+ xAxis: index,
+ yAxis: e.舒张压,
+ symbolSize: 0,
+ symbolOffset: [-15, 15],
+ label: { fontSize: 20, color: "#409EFF" },
+ });
+ seriesData[2].markPoint.data.push({
+ name: "上机血压",
+ value: e.脉搏,
+ xAxis: index,
+ yAxis: e.脉搏,
+ symbolSize: 0,
+ symbolOffset: [0, -10],
+ label: { fontSize: 20, color: "#D940FF" },
+ });
+ }
+ });
+ if (deviceData.value.监测记录列表.length === 1) {
+ xAxisData.push(1);
+ }
+ try {
+ const myChart = echarts.init(
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ );
+ const option = {
+ // backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
+ backgroundColor: "#ffffff",
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 8,
+ top: 0,
+ bottom: 0,
+ },
+ xAxis: {
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: xAxisData,
+ axisTick: {
+ show: true, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ name: "",
+ type: "value",
+ min: 20,
+ max: 220,
+ interval: 20, // 指定刻度间隔,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: seriesData,
+ };
+ myChart.setOption(option);
+ } catch (e) {
+ console.log("图标渲染异常异常");
+ }
+ } else {
+ try {
+ const myChart = echarts.init(
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ );
+
+ const option = {
+ backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 5,
+ top: 0,
+ bottom: 0,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: [1, 2, 3, 4],
+ },
+ yAxis: {
+ name: "",
+ type: "value",
+ min: 20,
+ max: 220,
+ interval: 20, // 指定刻度间隔,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [],
+ };
+ myChart.setOption(option);
+ } catch (e) {
+ console.log("异常", proxy.$refs["echartsDiv" + deviceData.value.设备编号]);
+ }
+ }
+ } else if (deviceData.value.患者姓名 === "") {
+ console.log('2222')
+ const tbdata1 = [];
+ const tbdata2 = [];
+ const tbdata3 = [];
+ if (deviceData.value.属性历史列表) {
+ deviceData.value.属性历史列表.forEach((e, index) => {
+ // 温度
+ const wdMode = e.属性列表.find((l) => {
+ return l.identifierText === "透析液温度";
+ });
+ if (wdMode) {
+ tbdata1.push(Number(wdMode?.finalText));
+ wd.value = Number(wdMode?.finalText);
+ }
+
+ // 血液流速
+ const xymode = e.属性列表.find((l) => {
+ return l.identifierText === "血液流速";
+ });
+ if (xymode) {
+ tbdata2.push(Number(xymode?.finalText));
+ ls.value = Number(xymode?.finalText);
+ }
+
+ // 电导度
+ const dddMode = e.属性列表.find((l) => {
+ return l.identifierText === "透析液电导度";
+ });
+ if (dddMode) {
+ tbdata3.push(Number(dddMode?.finalText));
+ ddd.value = Number(dddMode?.finalText);
+ }
+ });
+ }
+ try {
+ console.log('渲染设备')
+ const myChart1 = echarts.init(
+ proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
+ );
+ const myChart2 = echarts.init(
+ proxy.$refs["echartsDivls" + deviceData.value.设备编号]
+ );
+ const myChart3 = echarts.init(
+ proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
+ );
+ const option1 = {
+ // backgroundColor: textcolor.value,
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 8,
+ top: 100,
+ bottom: 0,
+ },
+ xAxis: {
+ show: true, // 隐藏X轴
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: [1, 2, 3],
+ axisTick: {
+ show: false, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ type: "value",
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: tbdata1,
+ type: "line",
+ lineStyle: {
+ width: 10, // 设置线条宽度为5
+ color: "red",
+ },
+ },
+ ],
+ };
+ const option2 = {
+ // backgroundColor: textcolor.value,
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 8,
+ top: 100,
+ bottom: 0,
+ },
+ xAxis: {
+ show: false, // 隐藏X轴
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: [1, 2, 3],
+ axisTick: {
+ show: false, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ type: "value",
+ min: -10,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: tbdata2,
+ type: "line",
+ lineStyle: {
+ width: 10, // 设置线条宽度为5
+ color: "#409EFF",
+ },
+ },
+ ],
+ };
+ const option3 = {
+ // backgroundColor: textcolor.value,
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 8,
+ top: 100,
+ bottom: 0,
+ },
+ xAxis: {
+ show: false, // 隐藏X轴
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: [1, 2, 3],
+ axisTick: {
+ show: false, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ type: "value",
+ min: -10,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: tbdata3,
+ type: "line",
+ lineStyle: {
+ width: 10, // 设置线条宽度为5
+ color: "#E6A23C",
+ },
+ },
+ ],
+ };
+ myChart1.setOption(option1);
+ myChart2.setOption(option2);
+ myChart3.setOption(option3);
+ } catch (e) {
+ console.log("图标渲染异常异常");
+ }
+
+ console.log(deviceData.value);
+ }
+ };
+ </script>
+<style lang="less" scoped>
+ .divice{
+ background: #DAE5EC;
+ font-size: 100%;
+ border-radius: 4px;
+ border: solid 1px;
+ width: 100%;
+ height: 100%;
+ border: 1px solid coral;
+ .toubu{
+ // padding-left: 20px;
+ width: 100%;
+ background: #70A3DD;
+ border-radius: 4px 0px 16px 16px;
+ }
+ .chongjian{
+ .container {
+ height: 100%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ width: 100%;
+ gap: 10px; /* 设置所有方向的间距为10px */
+ }
+ .item {
+ border: 1px solid #ccc;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ margin-bottom: 10px;
+
+ }
+ }
+ .mowei{
+ .container {
+ height: 100%;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ width: 100%;
+ gap: 10px; /* 设置所有方向的间距为10px */
+ }
+ .item {
+ border: 1px solid #ccc;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ margin-bottom: 10px;
+
+ }
+ }
+ }
+ /* 定义闪烁动画 */
+ @keyframes blink {
+ 0% {
+ border:4px solid red ;
+ }
+ 50% {
+ border:4px solid Transparent ;
+ }
+ 100% {
+ border:4px solid red ;
+ // 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%;
+ }
+ @keyframes blink2 {
+ 0% {
+ background: red ;
+ }
+ 50% {
+ background: Transparent ;
+ }
+ 100% {
+ background: red ;
+ // border-bottom:8px solid red ;
+ }
+ }
+ .blink2{
+ animation: blink2 2s infinite; /* 每秒闪烁一次，无限次数 */
+ width: 100%;
+ height: 100%;
+ }
+ .grid-container {
+ display: grid;
+ align-items: center; /* 垂直居中 */
+ height: 100vh; /* 根据需要调整高度 */
+ }
+
+ .centered-text {
+ font-weight: 600;
+ /* 其他样式 */
+ }
+ .container-cord {
+ display: flex;
+ align-items: center; /* 垂直居中对齐 */
+ // border: 1px solid #ccc;
+ // padding: 10px;
+ .image {
+ margin-right: 10px; /* 图片和文字之间的间距 */
+ }
+ .text-group_3 {
+ margin-left:10px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 26px;
+ color: #D58E56;
+ }
+ }
+ .itemboy{
+
+ }
+
+ </style>
\ No newline at end of file
diff --git a/src/views/deviceWindows.vue b/src/views/deviceWindows.vue
index 7950549..8d848e8 100644
--- a/src/views/deviceWindows.vue
+++ b/src/views/deviceWindows.vue
@@ -342,15 +342,6 @@
});
// 是否是消毒类型和待机
const xiaoduzhuangti=computed(()=>{
- // const list=device.value.设备状态列表
- // if(list&&list.length>0){
- // const x= list.findIndex(e=>{return e.状态类型==='透析机消毒'||e.状态类型==='待机'})
- // if(x>=0){
- // return true
- // }else{
- // return false
- // }
- // }
return false
});
// 状态颜色
--
Gitblit v1.8.0