gx新的设计样式

chenyc

2025-02-24 6ad664b1978f78352a524b80c3bd10edf1bf0a94

gx新的设计样式

 src/App.vue

@@ -1,7 +1,5 @@
<script setup lang="ts">
import { ref } from "vue";
import deviceView from "./components/deviceView.vue";

</script>

<template>

 src/img/cljd.png

 src/img/shezhi.png

 src/img/sjjd.png

 src/img/tizhong.png

 src/img/tsl.png

 src/img/txq.png

 src/img/txzt.png

 src/img/xinlv.png

 src/img/zlms.png

 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',

 src/views/deviceWindoes2.vue

New file
@@ -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>

 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
  });
  // 状态颜色