rax-medical/src/views/remote-manage/part/remote-item-part.vue

<template>
  <div class="remote-item-part">
    <div class="title">
      <span>{{ remoteTask.title || '远程控制' }}</span>
    </div>
    <div class="content mini" :class="{ 'is-total': remoteTask.isRemote }">
      <div class="left-box">
        <div class="info-box">
          <div class="row-item">
            <span class="label">病人名称</span>
            <span class="input-value">{{ patientInfo.name }}</span>
          </div>
          <div class="row-item">
            <span class="label">住院号</span>
            <span class="input-value">{{ patientInfo.code }}</span>
          </div>
          <div class="row-item">
            <span class="label">手术时间</span>
            <span class="input-value">{{ patientInfo.time && dateFormater('yyyy-MM-dd HH:mm:ss', patientInfo.time)
            }}</span>
          </div>
          <div class="row-item">
            <span class="label">手术状态</span>
            <span class="tag-value" :class="{ 'normal': !patientInfo.state }">正常</span>
            <span class="tag-value" :class="{ 'alarm': patientInfo.state }">异常</span>
          </div>
        </div>
        <div class="row-item" :class="{ 'alarm': patientInfo.BIS < 40 || patientInfo.BIS > 60 }">
          <span class="label">BIS</span>
          <span class="value">{{ patientInfo.BIS }}</span>
        </div>
        <div class="row-item" :class="{ 'alarm': patientInfo.SBP < 90 || patientInfo.SBP > 120 }">
          <span class="label">SBP</span>
          <span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
        </div>
        <div class="row-item">
          <span class="label">SPO2</span>
          <span class="value">{{ patientInfo.SPO2 }}</span>
        </div>
        <div class="row-item yellow" :class="{ 'alarm': patientInfo.DBP < 60 || patientInfo.DBP > 90 }">
          <span class="label">DBP</span>
          <span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
        </div>
        <div class="row-item yellow" :class="{ 'alarm': patientInfo.HR < 50 || patientInfo.HR > 80 }">
          <span class="label">HR</span>
          <span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
        </div>
        <div class="row-item yellow">
          <span class="label">TEMP</span>
          <span class="value">{{ patientInfo.TEMP }}</span>
        </div>
      </div>
      <div class="center-box">
        <img src="@/assets/imgs/main_body_intact.png">
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
import type { RemoteItem, PatientInfoItem, RemoteLogItem } from '@/utils/public-interface'
import { useRemoteStore } from '@/stores/remote-info-store'
import { dateFormater } from '@/utils/date-util'
import { setRemoteLog } from '@/static-data/core'

interface Props {
  index: number
}
const props = withDefaults(defineProps<Props>(), {
  index: () => 0
})

const emit = defineEmits(['addLogAfter'])

const remoteStore = useRemoteStore()
const remoteTask = remoteStore.remoteTasks[props.index]
let timer = 0
const patientInfo = ref({} as PatientInfoItem)

onMounted(() => {
  clearInterval(timer)
  // 连接成功执行查询
  if (remoteTask.isRemote) {
    timer = setInterval(() => {
      initData()
    }, 2000)
  }
})
onBeforeUnmount(() => {
  // 页面卸载后清楚定时器
  clearInterval(timer)
})

function initData() {
  remoteTask.dataAlarm = false
  const obj = {
    name: remoteTask.patientName,
    code: '',
    time: new Date(),
    state: false,
    BIS: Number((Math.random() * 100).toFixed(2)),
    SBP: Number((Math.random() * 100).toFixed(2)),
    SPO2: Number((Math.random() * 100).toFixed(2)),
    DBP: Number((Math.random() * 100).toFixed(2)),
    HR: Number((Math.random() * 100).toFixed(2)),
    TEMP: Number((Math.random() * 100).toFixed(2))
  }
  setRemoteLog(obj, (title: string, size: string) => {
    obj.state = true
    remoteTask.dataAlarm = true
    remoteStore.setRemoteLog({
      time: new Date(),
      title,
      state: '异常'
    }, props.index)
  })
  Object.assign(patientInfo.value, obj)
  emit('addLogAfter', props.index)
}

</script>

<style lang='scss' scoped>
$size: 20px;

.remote-item-part {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid $border-color;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transition: all .6s;
    z-index: 1;
  }
  &:hover {
    &::after {
      background-color: rgba(black, .1);
      transition: all .6s;
    }
  }

  .title {
    position: relative;
    width: 100%;
    height: $size;
    font-size: $size*0.7;
    text-align: center;
    line-height: $size;
    font-weight: 600;
    color: white;
    background: $main-color;
  }

  .content {
    width: 100%;
    height: calc(100% - #{$size});
    padding: $size*0.5;
    display: flex;
    justify-content: space-between;

    .common-box {
      width: 30%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }

    .left-box {
      @extend .common-box;

      .label {
        background: $main-color;
      }
    }

    .center-box {
      @extend .common-box;

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .right-box {
      @extend .common-box;

      .label {
        background: #f8b300;
      }
    }

    .row-item {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .label {
        flex-shrink: 0;
        width: 100%;
        height: $size;
        color: white;
        font-size: $size*0.6;
        line-height: $size;
        text-align: center;
        border-radius: 5px;
      }
    }

    .info-box,
    .row-item .value {
      display: none;
    }

    &.is-total {

      .info-box,
      .row-item .value {
        display: block;
      }

      .label {
        width: calc(50% - $size*0.5);
      }

      .value {
        width: 50%;
        height: $size;
        border-width: 1px;
        border-style: solid;
        text-align: center;
        border-radius: 5px;
        color: $main-color;
        border-color: $main-color;
        font-size: $size*0.7;
        line-height: $size;
        font-weight: 600;

        .unit {
          font-size: $size*0.6;
          font-family: 400;
        }
      }

      .right-box .value {
        color: #f8b300;
        border-color: #f8b300;
      }

      .row-item.alarm {
        .label {
          background: red !important;
        }

        .value {
          color: red !important;
          border-color: red !important;
        }
      }

      .info-box {
        width: 100%;

        .row-item {
          padding: $size*0.5 0;
          height: $size;
          justify-content: flex-start;
          align-items: center;

          .label {
            width: $size*3;
            height: $size;
            background: transparent;
            color: $main-color;
            font-size: $size*0.6;
            line-height: $size;
            font-weight: 600;
            text-align: left;
          }

          .input-value {
            width: 100%;
            height: $size;
            line-height: $size;
            font-size: $size*0.6;
            color: $main-color;
            border-bottom: 1px solid $border2-color;
          }

          .tag-value {
            margin-left: $size*0.5;
            padding: 0 $size*0.5;
            height: $size;
            line-height: $size;
            font-size: $size*0.7;
            color: white;
            font-weight: 600;
            background: $border2-color;
            border-radius: 8px;

            &.normal {
              background: $main-color;
            }

            &.alarm {
              background: red;
            }
          }
        }
      }
    }

    &.mini {
      padding: $size;

      .left-box {
        width: 50%;
      }

      .center-box {
        width: 50%;
      }

      &.is-total {
        .left-box {
          .info-box {
            display: block;
            flex-shrink: 0;
          }

          .row-item.yellow {
            .label {
              background: #f8b300;
            }

            .value {
              color: #f8b300;
              border-color: #f8b300;
            }
          }
        }
      }

    }
  }
}</style>