34

chenyc

2025-02-13 240a8752b568ab63ce4eb0afa15c3265fb5101e3

 src/views/Home.vue

@@ -10,7 +10,6 @@
    >
      <el-row
        v-if="deviceData.患者姓名 !== ''"
        @click="showgaojing"
        :style="{ backgroundColor: background }"
        :class="{ blink2: isbaioji }"
        style="
@@ -54,13 +53,15 @@
            display: grid;
            padding: 5px;
            font-size: 300%;
            height: 100%
          "
        >
          <span
            v-if="
              deviceData.iot_跨膜压 >= 200 && Number(deviceData.透析状态) === 2
            "
            style="color: #303133"
             class="grid-container"
          style="margin-left: 5%; height: 100%;color: #303133"
          >
            TMP↑
          </span>
@@ -92,262 +93,306 @@
          </span>
        </div>
      </el-row>
      <el-row
        v-if="deviceData.患者姓名 !== ''"
        :style="{ backgroundColor: textcolor }"
        style="padding-right: 2px; height: 60%"
      >
        <el-col :span="12" style="height: 100%">
          <div style="height: 100%">
            <el-row style="padding: 5% 0px 0px 20px; height: 100%">
              <el-col :span="10" style="height: 100%">
                <div
                  :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
                  style="
                    background-size: 100% 100%;
                    border-radius: 5px;
                    margin-bottom: 1%;
                    height: 100%;
                    width: 100%;
                  "
                ></div>
              </el-col>
              <el-col
                :span="14"
                style="
                  padding-left: 5px;
                  height: 100%;
                  font-weight: 700;
                  font-size: 300%;
                "
              >
                <el-row style="height: 20%">
                  <el-col
                    class="grid-container"
                    style="height: 100%"
                    :span="12"
                    :style="{
                      color: deviceData.透析方案 === 'HDF' ? '#E6A23C' : '',
                    }"
                  >
                    {{ deviceData.透析方案 }}
                  </el-col>
                  <el-col
                    :span="12"
                    class="grid-container"
      <template v-if="床旁血压计.zuihouTime>shishiTime">
        <el-row style="height: 80%; background-color: #ffffff">
          <el-col :span="8" style="font-weight: bold; color: black; ">
            <div style="height: 30%; text-align: right;" class="grid-container">
              <p><b style="font-size: 150%;color: red;">&#x2191;</b><b style="font-size:400%">178</b></p>
            </div>
            <div style="height: 30%; text-align: right; " class="grid-container">
              <p><b style="font-size: 150%;color: red;">&#x2193;</b><b style="font-size:400%">88</b></p>
            </div>
            <div style="height: 33%; text-align: right;" class="grid-container">
              <div>
                <!-- <el-image style="width: 50px; height: 50px;" :src="maibo"></el-image> 2 -->
                <p><b style="font-size: 150%;color: red;" >&hearts;</b><b style="font-size:400%">78</b></p>
              </div>
            </div>
          </el-col>
          <el-col :span="4"></el-col>
          <el-col :span="12">
             <!-- 展示血压记录图 -->
             <div 
                v-if="Number(deviceData.透析状态) > 1"
                  :ref="'echartsDiv' + deviceData.设备编号"
                  style="height: 80%;width: 100%;"
                >
              </div>
              <div style="height: 20%;text-align: center;" class="grid-container">
                {{床旁血压计.date_time}}
              </div>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <el-row
          v-if="deviceData.患者姓名 !== ''"
          :style="{ backgroundColor: textcolor }"
          style="padding-right: 2px; height: 60%"
        >
          <el-col :span="12" style="height: 100%">
            <div style="height: 100%">
              <el-row style="padding: 5% 0px 0px 20px; height: 100%">
                <el-col :span="10" style="height: 100%">
                  <div
                    :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
                    style="
                      text-align: right;
                      font-weight: 800;
                      color: #70a3dd;
                      white-space: nowrap;
                      background-size: 100% 100%;
                      border-radius: 5px;
                      margin-bottom: 1%;
                      height: 100%;
                      width: 100%;
                    "
                  >
                    {{ txztText }}
                  </el-col>
                </el-row>
                <div style="height: 20%">
                  <template v-if="Number(deviceData.透析状态) >= 2">
                    <div class="grid-container" style="height: 100%">
                      <div>
                        <span
                          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>
                </el-col>
                <el-col
                  :span="14"
                  style="
                    padding-left: 5px;
                    height: 100%;
                    font-weight: 700;
                    font-size: 300%;
                  "
                >
                  <el-row style="height: 20%">
                    <el-col
                      class="grid-container"
                      style="height: 100%"
                      :span="12"
                      :style="{
                        color: deviceData.透析方案 === 'HDF' ? '#E6A23C' : '',
                      }"
                    >
                      {{ deviceData.透析方案 }}
                    </el-col>
                    <el-col
                      :span="12"
                      class="grid-container"
                      style="
                        text-align: right;
                        font-weight: 800;
                        color: #70a3dd;
                        white-space: nowrap;
                        height: 100%;
                      "
                    >
                      {{ txztText }}
                    </el-col>
                  </el-row>
                  <div style="height: 20%">
                    <template v-if="Number(deviceData.透析状态) >= 2">
                      <div class="grid-container" style="height: 100%">
                        <div>
                          <span
                            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>
                  </template>
                </div>
                <div style="height: 20%">
                  <span v-if="Number(deviceData.透析状态) >= 2">
                    <span style="color: #303133">{{
                      Number(deviceData.iot_当前脱水量).toFixed(1)
                    }}</span
                    >/<span style="font-size: 90%">{{
                      Number(deviceData.iot_脱水目标量).toFixed(1)
                    }}</span
                    ><span style="font-size: 80%"
                      >({{ deviceData.iot_脱水速率 }})</span
                    >
                  </span>
                  <span v-if="Number(deviceData.透析状态) == 1">
                    <span style="color: #303133">{{
                      Number(deviceData.iot_当前脱水量).toFixed(1)
                    }}</span
                    >/<span style="font-size: 90%">{{
                      Number(deviceData.处方脱水量).toFixed(1)
                    }}</span>
                  </span>
                </div>
                <div style="height: 10%">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="70"
                  />
                </div>
                <div style="height: 20%">
                  <span v-if="Number(deviceData.透析状态) >= 1">
                    <span style="color: #303133">{{
                      jgTime4(deviceData.iot_透析时间)
                    }}</span
                    >/<span style="color: #606266"
                      >{{ deviceData.透析处方的时长_小时 }}:{{
                        deviceData.透析处方的时长_分钟
                    </template>
                  </div>
                  <div style="height: 20%">
                    <span v-if="Number(deviceData.透析状态) >= 2">
                      <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
                      >
                    </span>
                    <span v-if="Number(deviceData.透析状态) == 1">
                      <span style="color: #303133">{{
                        Number(deviceData.iot_当前脱水量).toFixed(1)
                      }}</span
                      >/<span>{{
                        Number(deviceData.处方脱水量).toFixed(1)
                      }}</span>
                    </span>
                  </div>
                  <div style="height: 10%">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="26"
                      :show-text="false"
                      :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
                    />
                  </div>
                  <div style="height: 20%">
                    <span v-if="Number(deviceData.透析状态) >= 1">
                      <span style="color: #303133">{{
                        jgTime4(deviceData.iot_透析时间)
                      }}</span
                      >/<span
                        >{{ deviceData.透析处方的时长_小时 }}:{{
                          deviceData.透析处方的时长_分钟
                        }}</span
                      >
                    </span>
                  </div>
                  <div style="height: 10%">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="26"
                      :show-text="false"
                      :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
                      status="success"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>

          <el-col :span="12">
            <!-- 展示血压记录图 -->
            <div 
              v-if="Number(deviceData.透析状态) > 1"
                :ref="'echartsDiv' + deviceData.设备编号"
                style="height: 97%"
              >
            </div>
            <div
              v-if="Number(deviceData.透析状态) === 1"
              style="text-align: right; height: 100%"
            >
              <div
                style="
                  height: 25%;
                  font-weight: 600;
                  color: #909399;
                "
              >
                <div   class="grid-container" style="height: 100%;">
                  <div
                    style="
                      font-weight: 800;
                    "
                    >
                  </span>
                    透前称重
                    <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.透前称重).toFixed(1) }}</b>
                    </div
                  >
                </div>
                <div style="height: 10%">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="80"
                    status="success"
                  />
              </div>
              <div
                class="container"
                style="
                  height: 25%;
                  font-weight: 600;
                  color: #909399;
                "
              >
                <div   class="grid-container" style="height: 100%;">
                  <div
                    style="
                      font-weight: 800;
                      color: #909399;
                    "
                    >
                    干体重
                    <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.干体重).toFixed(1) }}</b>
                    上次透后称重
                    <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.上次透后称重).toFixed(1) }}</b>
                    </div
                  >
                </div>
              </el-col>
            </el-row>
              </div>
              <div
                :style="{ color: deviceData.体重增长率 >= 5 ? 'red' : '#303133' }"
                style="height: 25%; font-weight: 600;color: #909399;"
              >
                <div  class="grid-container" style="height: 100%;">
                  <div>
                    体重增长
                      <b style="font-size: 200%; color: #303133;"
                        v-if="Number(deviceData.透前称重 - deviceData.干体重) > 0"
                        >+{{
                        Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
                      }}</b
                      >
                      增长率<b style="font-size: 200%;color: #303133;">({{ deviceData.体重增长率 }}%)</b>
                    </div>
                  </div>
              </div>
              <div
                class="container"
                style="
                  font-weight: 600;
                  height: 25%;
                  color: #909399;
                  margin-left: -20px;
                "
              >
                <div  class="grid-container" style="height: 100%;">
                    <div>
                      透前血压
                      <span
                        v-if="deviceData.透前血压_伸缩压"
                        :style="{ color: tqXygj ? 'red' : '#303133' }"
                        style="font-weight: 800; font-size: 200%; white-space: nowrap"
                        >{{ 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>
          </el-col>
        </el-row>
        <el-row style="height: 20%;background-color: #ffffff; ">
        
          <div v-if="isinitXy" style="color: cornflowerblue;height: 20%; width: 100%;" class="grid-container">
              <div style="text-align: center;width: 100%; color: #909399;">
                <!-- {{isShowXY}} -->
              <!-- {{床旁血压计.zuihouTime}} / {{shishiTime}}
                {{}} -->
                  {{床旁血压计.date_time}}
              </div>
              
          </div>
        </el-col>
        <el-col :span="12">
          <div
            v-if="Number(deviceData.透析状态) > 1"
            :ref="'echartsDiv' + deviceData.设备编号"
            style="height: 97%"
          ></div>
          <div
            v-if="Number(deviceData.透析状态) === 1"
            style="text-align: right; height: 100%"
          >
            <div
              class="container"
              style="
                height: 25%;
                font-weight: 600;
                color: #909399;
                font-size: 80%;
              "
            >
              CW:<span
                style="
                  font-weight: 800;
                  font-size: 130%;
                  color: #303133;
                  white-space: nowrap;
                "
                >{{ Number(deviceData.透前称重).toFixed(1) }}</span
              >
            </div>
            <div
              class="container"
              style="
                height: 25%;
                font-weight: 600;
                color: #909399;
                font-size: 80%;
              "
            >
              D<span
                style="
                  font-weight: 800;
                  font-size: 130%;
                  color: #303133;
                  white-space: nowrap;
                "
                >{{ Number(deviceData.干体重).toFixed(1) }}</span
              >L<span
                style="
                  font-weight: 800;
                  font-size: 130%;
                  color: #303133;
                  white-space: nowrap;
                "
                >{{ Number(deviceData.上次透后称重) }}</span
              >
            </div>
            <div
              :style="{ color: deviceData.体重增长率 >= 5 ? 'red' : '#303133' }"
              style="height: 25%; font-weight: 600; font-size: 80%"
            >
              <span
                style="font-weight: 800; font-size: 130%; white-space: nowrap"
              >
                <template
                  v-if="Number(deviceData.透前称重 - deviceData.干体重) > 0"
                  >+</template
                >{{
                  Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
                }}
              </span>
              <span>({{ deviceData.体重增长率 }}%)</span>
            </div>
            <div
              class="container"
              style="
                font-weight: 600;
                height: 25%;
                color: #909399;
                font-size: 80%;
                margin-left: -20px;
              "
            >
              <span
                v-if="deviceData.透前血压_伸缩压"
                :style="{ color: tqXygj ? 'red' : '#303133' }"
                style="font-weight: 800; font-size: 130%; white-space: nowrap"
                >{{ deviceData.透前血压_伸缩压 }}/</span
              >
              <span
                :style="{ color: tqXygj ? 'red' : '#303133' }"
                style="font-weight: 800; font-size: 130%; white-space: nowrap"
                >{{ deviceData.透前血压_舒张压 }}</span
              >
              <span
                v-if="deviceData.透前脉搏"
                :style="{ color: tqMbgj ? 'red' : '#303133' }"
                style="font-weight: 800; font-size: 130%; white-space: nowrap"
                >,{{ deviceData.透前脉搏 }}</span
              >
            </div>
          <div v-if="isinitXy" style="font-size: 300%; color: cornflowerblue;height: 80%; width: 100%;" class="grid-container">
              
              <div style="text-align: center;width: 100%;" class="flash-text">
                高压：{{床旁血压计.sbp}}，低压： {{床旁血压计.dbp}}， 心率： {{床旁血压计.pulseRate}}
              </div>

          </div>
        </el-col>
      </el-row>
      <el-row style="height: 20%;background-color: #ffffff; line-height: 50px;">
        <!-- <div style="font-size: 200%;height: 100%;text-align: center; color: #909399;" class="grid-container">
            
            <el-icon><ChatDotSquare /></el-icon>暂无通知
          <div v-else style="font-size: 200%;height: 100%;text-align: center;padding: 5px; font-weight: 1000;" class="grid-container">
            透析器：{{deviceData.透析器}}
          </div>
          <!-- <div style="font-size: 300%; color: red;height: 100%;" class="grid-container">
              
              患者掉压验证请注意!

        </div> -->
        <div style="color: cornflowerblue;height: 20%; width: 100%;" class="grid-container">
            <div style="text-align: center;width: 100%; color: #909399;">
                2025-01-11 12:23:45
            </div>
            
        </div>
        <div style="font-size: 300%; color: cornflowerblue;height: 80%; width: 100%;" class="grid-container">
            
            <div style="text-align: center;width: 100%;">
               高压：118，低压：88， 心率：89
            </div>
          </div> -->
          <!-- <el-alert style="font-size: 300%" title="处方已经确认。医嘱已执行" type="success"  show-icon />
          <el-alert title="患者治疗过程中掉压验证，请注意！" type="warning"  show-icon /> -->

        </div>
         <!-- <div style="font-size: 300%; color: red;height: 100%;" class="grid-container">
            
            患者掉压验证请注意!

        </div> -->
        <!-- <el-alert style="font-size: 300%" title="处方已经确认。医嘱已执行" type="success"  show-icon />
        <el-alert title="患者治疗过程中掉压验证，请注意！" type="warning"  show-icon /> -->

    </el-row>
        </el-row>
      </template>
    </div>
    <div
      v-else
@@ -375,7 +420,7 @@
            overflow: hidden;
          "
        >
          <div class="grid-container" style="height: 100%">
          <div class="grid-container" style="height: 100%" @click="initTupiao">
            {{ deviceData.设备名称 }} {{ zhuangtaiStr }}
          </div>
        </el-row>
@@ -413,13 +458,14 @@
                &nbsp;
              </el-col>
              <el-col
                v-if="noBaoji !== ''"
                v-if="noBaoji === ''"
                :span="14"
                style="
                  padding-left: 5px;
                  height: 100%;
                  font-weight: 500;
                  font-size: 100%;
                  font-size: 200%
                "
              >
                <div
@@ -439,7 +485,7 @@
            </el-row>
          </div>
        </el-col>
        <el-col :span="9" v-if="noBaoji !== ''">
        <el-col :span="9" v-if="noBaoji == ''">
          <!-- 历史状态画图 -->
          <div
            :ref="'echartsDivwd' + deviceData.设备编号"
@@ -456,18 +502,70 @@
        </el-col>
      </el-row>
    </div>
    <!-- 设置按钮 -->
    <button id="settingsButton" class="fixed-bottom-right" @click="centerDialogVisible=true">⚙️</button>
    <!-- <button id="settingsButton" class="fixed-bottom-right" @click="showxuye">⚙️</button> -->
    <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 maibo from '../img/maibo.png'
import maibo from '../img/maibo2.png'
import xueya from '../img/xueya.png'
import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
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:'',
  pulseRate:'',
  dbp:'',
  zuihouTime:new Date()
})
const deviceData = ref({
  iot_传输时间: "2025-01-10 19:15:24",
  iot_当前脱水量: 2.04,
@@ -487,7 +585,7 @@
  性别: "男",
  患者头像:
    "http://dhimg.leon056.com/hemodialysis/face/PAT9090070832211PyVq/face-IMG_20240413_112705.jpg-202404131127536157.jpg",
  患者姓名: "李金山",
  患者姓名: "",
  患者编号: "PAT9090070832211PyVq",
  患者透析号: "0207",
  最后一条血压: 116,
@@ -517,15 +615,9 @@
  血压高值列表: "152,133,116",
  设备分区类型: 0,
  设备号: "23",
  设备名称: "23",
  设备名称: "初始化。。。",
  设备序列号: "B97AP002",
  设备状态列表: [
    {
      是否为警告标记: 0,
      状态名称: "待机",
      状态类型: "待机",
      状态颜色: "#13CE66",
    },
  ],
  设备编号: "DEVICE9195233509924hOHL",
  超滤速度过快: null,
@@ -542,7 +634,7 @@
  透析处方的时长_小时: "4",
  透析开始时间: "2025-01-10 16:44:00",
  透析方案: "HD",
  透析状态: "2.0",
  透析状态: "1.0",
  透析结束时间: "2025-01-10 20:44:00",
  设备变化: "1736508117033DEV",
  属性历史列表: [
@@ -645,6 +737,26 @@
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.透析状态;
});
@@ -717,9 +829,9 @@
  const list = deviceData.value.设备状态列表;
  if (
    (deviceData.value.监测血压是否低于百分之30 ||
    deviceData.value.跨膜压是否大于200 ||
    deviceData.value.监测血压是否高于百分之30) &&
    deviceData.value.透析状态 === "2.0"
      deviceData.value.跨膜压是否大于200 ||
      deviceData.value.监测血压是否高于百分之30) &&
      deviceData.value.透析状态 === "2.0"
  ) {
    return true;
  } else {
@@ -748,6 +860,7 @@
  backgroundSize: "cover", // 根据需要调整
  backgroundPosition: "center", // 根据需要调整
};

watch(
  () => txzt.value,
  () => {
@@ -789,11 +902,29 @@
    deep: true,
  }
);
onMounted(() => {});
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(device.value.设备名称,'子组件变量')
    console.log(deviceData.value.设备名称,'子组件变量')
    setTimeout(() => {
      if (!xiaoduzhuangti.value) {
        initTupiao();
@@ -801,35 +932,129 @@
    }, 500);
  }
);

const showgaojing = () => {
  if (deviceData.value.监测血压是否低于百分之30) {
    centerDialogVisible.value = true;
    iscomfig.value = true;
    textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 监测血压下降至上机血压30%了，请及时处理`;
//创建链接对象
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
  }
  if (deviceData.value.跨膜压是否大于200) {
    centerDialogVisible.value = true;
    iscomfig.value = true;
    textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 跨膜压过高请及时处理`;
  }
  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: "",
        name: "11",
        type: "line",
        symbol: "triangle",
        symbolSize: 10,
        symbolRotate: 180,
        data: [],
        lineStyle: {
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
          color: "red",
        },
        itemStyle: {
          borderWidth: 3,
          borderWidth: 5,
          borderColor: "red",
          color: "red",
        },
@@ -853,10 +1078,10 @@
        data: [],
        lineStyle: {
          color: "#409EFF",
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
        },
        itemStyle: {
          borderWidth: 3,
          borderWidth: 5,
          borderColor: "#409EFF",
          color: "#409EFF",
        },
@@ -883,7 +1108,7 @@
        data: [],
        lineStyle: {
          color: "#D940FF",
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
        },
        markPoint: {
          data: [],
@@ -971,7 +1196,8 @@
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        );
        const option = {
          backgroundColor: textcolor.value,
          backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
          // backgroundColor: textcolor.value,
          tooltip: {
            trigger: "axis",
          },
@@ -1015,7 +1241,7 @@
        );

        const option = {
          backgroundColor: textcolor.value,
          backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
          tooltip: {
            trigger: "axis",
          },
@@ -1050,6 +1276,7 @@
      }
    }
  } else if (deviceData.value.患者姓名 === "") {
    console.log('2222')
    const tbdata1 = [];
    const tbdata2 = [];
    const tbdata3 = [];
@@ -1084,6 +1311,7 @@
      });
    }
    try {
      console.log('渲染设备')
      const myChart1 = echarts.init(
        proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
      );
@@ -1094,7 +1322,7 @@
        proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
      );
      const option1 = {
        backgroundColor: textcolor.value,
        // backgroundColor: textcolor.value,
        tooltip: {
          trigger: "axis",
        },
@@ -1103,11 +1331,11 @@
        },
        grid: {
          left: 8,
          top: 30,
          top: 100,
          bottom: 0,
        },
        xAxis: {
          show: false, // 隐藏X轴
          show: true, // 隐藏X轴
          type: "category",
          // 标记做右往左排列
          boundaryGap: false,
@@ -1134,7 +1362,7 @@
        ],
      };
      const option2 = {
        backgroundColor: textcolor.value,
        // backgroundColor: textcolor.value,
        tooltip: {
          trigger: "axis",
        },
@@ -1143,7 +1371,7 @@
        },
        grid: {
          left: 8,
          top: 20,
          top: 100,
          bottom: 0,
        },
        xAxis: {
@@ -1175,7 +1403,7 @@
        ],
      };
      const option3 = {
        backgroundColor: textcolor.value,
        // backgroundColor: textcolor.value,
        tooltip: {
          trigger: "axis",
        },
@@ -1184,7 +1412,7 @@
        },
        grid: {
          left: 8,
          top: 10,
          top: 100,
          bottom: 0,
        },
        xAxis: {
@@ -1290,4 +1518,41 @@
  font-weight: 600;
  /* 其他样式 */
}
/* 固定定位设置按钮 */
.fixed-bottom-right {
  position: fixed;
  bottom: 20px; /* 距离底部的距离 */
  right: 20px;  /* 距离右侧的距离 */
  z-index: 1000; /* 确保按钮位于页面内容之上 */
  padding: 5px 10px;
  background-color: #fbfdff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* 鼠标悬停时改变颜色 */
.fixed-bottom-right:hover {
  background-color: #0056b3;
}
// /* 定义闪现动画的关键帧 */
// @keyframes flash {
//   0%, 100% {
//     opacity: 1; /* 开始和结束时完全可见 */
//   }
//   50% {
//     opacity: 0; /* 中间时刻完全透明 */
//   }
// }

/* 应用动画到 div */
.flash-text {
  animation-name: flash;
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: linear; /* 动画速度曲线 */
  animation-iteration-count: infinite; /* 动画重复次数 */
  animation-direction: alternate; /* 动画方向 */
}
</style>