更新识别提示

chenyc

2025-04-21 2b83d4d511401b7011e51170d8d7d25c2ca45c51

 src/views/Home.vue

@@ -93,268 +93,307 @@
          </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.患者头像})` }"
      <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: 250%;color: red; ">&#x2191;</b><b style="font-size:500%">{{床旁血压计.sbp}}</b></p>
            </div>
            <div style="height: 30%; text-align: right; " class="grid-container">
              <p><b style="font-size: 250%;color: red;">&#x2193;</b><b style="font-size:500%"> {{床旁血压计.dbp}}</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: 250%;color: red;" >&hearts;</b><b style="font-size:500%">{{床旁血压计.pulseRate}}</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="
                      background-size: 100% 100%;
                      border-radius: 5px;
                      margin-bottom: 1%;
                      height: 100%;
                      width: 100%;
                    "
                  ></div>
                </el-col>
                <el-col
                  :span="14"
                  style="
                    background-size: 100% 100%;
                    border-radius: 5px;
                    margin-bottom: 1%;
                    padding-left: 5px;
                    height: 100%;
                    width: 100%;
                    font-weight: 700;
                    font-size: 300%;
                  "
                ></div>
              </el-col>
              <el-col
                :span="14"
                >
                  <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>
                    </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="
                  padding-left: 5px;
                  height: 100%;
                  font-weight: 700;
                  font-size: 300%;
                  height: 25%;
                  font-weight: 600;
                  color: #909399;
                "
              >
                <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"
                <div   class="grid-container" style="height: 100%;">
                  <div
                    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>
                  </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=" 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 style="color: #606266"
                      >{{ deviceData.透析处方的时长_小时 }}:{{
                        deviceData.透析处方的时长_分钟
                      }}</span
                    >
                  </span>
                </div>
                <div style="height: 10%">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :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;
                  "
                    透前称重
                    <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.透前称重).toFixed(1) }}</b>
                    </div
                  >
                  透前称重
                  <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.透前称重).toFixed(1) }}</b>
                  </div
                >
                </div>
              </div>
            </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>
            </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
              <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;">({{ deviceData.体重增长率 }}%)</b>
                  </div>
                    干体重
                    <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>
            </div>
            <div
              class="container"
              style="
                font-weight: 600;
                height: 25%;
                color: #909399;
                margin-left: -20px;
              "
            >
              <div  class="grid-container" style="height: 100%;">
              </div>
              <div
                :style="{ color: deviceData.体重增长率 >= 5 ? 'red' : '#303133' }"
                style="height: 25%; font-weight: 600;color: #909399;"
              >
                <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
                    >
                    体重增长
                      <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="font-size: 250%; 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 v-if="床旁血压计.zuihouTime>shishiTime" 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>
        <div v-if="床旁血压计.zuihouTime>shishiTime" 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 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>
          <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 v-else style="font-size: 200%;height: 100%;text-align: center; color: #909399;padding: 5px;" class="grid-container">
          透析器：{{deviceData.透析器}}
        </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 /> -->

        </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
@@ -466,6 +505,7 @@
    </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"
@@ -499,10 +539,10 @@
</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 {EventSourcePolyfill} from 'event-source-polyfill';
import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch } from "vue";
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";
@@ -518,6 +558,8 @@
const readyState = ref({ key: 0, value: "正在链接中" });
const deviceCode=ref('')
const shishiTime=ref(new Date())
//有没有推送过血压如果有 就一直会显示血压数据
const isinitXy=ref(false)
const 床旁血压计=ref({
  date_time:'',
  sbp:'',
@@ -697,12 +739,25 @@
const ls = ref("");
const ddd = ref("");
const isShowXY=computed(()=>{
  if(床旁血压计.value.zuihouTime>new Date()){
  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.透析状态;
});
@@ -806,6 +861,7 @@
  backgroundSize: "cover", // 根据需要调整
  backgroundPosition: "center", // 根据需要调整
};

watch(
  () => txzt.value,
  () => {
@@ -912,8 +968,9 @@
                  console.log(dataBody) 
                  console.log(dataBody) 
                  if(dataBody.推送类型==='床旁血压计'){
                    isinitXy.value=true
                    let date = new Date();
                    date.setMinutes(date.getMinutes() + 1);
                    date.setMinutes(date.getMinutes() + 5);
                    床旁血压计.value={
                      date_time:dataBody?.床旁血压结果?.measureTime,
                      sbp:dataBody?.床旁血压结果?.sbp,
@@ -921,6 +978,9 @@
                      dbp:dataBody?.床旁血压结果?.dbp,
                      zuihouTime:date
                    }
                    setTimeout(()=>{
                      initTupiao()
                    },500)
                  }else if(dataBody.推送类型==='中央监控大屏信息'){
                    console.log(Date.now() + 'DEV')
                    if(dataBody?.透析状态){
@@ -949,6 +1009,21 @@
            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')
@@ -1122,7 +1197,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",
          },
@@ -1166,7 +1242,7 @@
        );

        const option = {
          backgroundColor: textcolor.value,
          backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
          tooltip: {
            trigger: "axis",
          },
@@ -1462,15 +1538,15 @@
.fixed-bottom-right:hover {
  background-color: #0056b3;
}
/* 定义闪现动画的关键帧 */
@keyframes flash {
  0%, 100% {
    opacity: 1; /* 开始和结束时完全可见 */
  }
  50% {
    opacity: 0; /* 中间时刻完全透明 */
  }
}
// /* 定义闪现动画的关键帧 */
// @keyframes flash {
//   0%, 100% {
//     opacity: 1; /* 开始和结束时完全可见 */
//   }
//   50% {
//     opacity: 0; /* 中间时刻完全透明 */
//   }
// }

/* 应用动画到 div */
.flash-text {