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

<template>
	<div class="remote-item-part">
		<div class="title">
			<span>{{ remoteTask.taskName || '远程控制' }}</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">{{ remoteTask.patient }}</span>
					</div>
					<div class="row-item">
						<span class="label">住院号</span>
						<span class="input-value">{{ remoteTask.patientId }}</span>
					</div>
					<div class="row-item">
						<span class="label">手术时间</span>
						<span class="input-value">{{
								remoteTask.date
							}}</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_except }">
					<span class="label">BIS</span>
					<span class="value">{{ patientInfo.BIS }}</span>
				</div>
				<div class="row-item" :class="{ 'alarm': patientInfo.SBP_except }">
					<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_except }">
					<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_except }">
					<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, onUnmounted, ref} from 'vue'
import {useRemoteWsStore} from "@/stores/remote-ws-store";

const props = withDefaults(defineProps<{ index: number }>(), {
	index: () => 0
})
const emit = defineEmits(['addLogAfter'])
const remoteWsStore = useRemoteWsStore();
const remoteTask = ref(remoteWsStore.remoteTasks[props.index]);
const patientInfo = ref({} as any)

onMounted(() => {
	// 连接成功执行查询
	if (remoteTask.value.isRemote) {
		initData()
	}
})
onUnmounted(() => {
	remoteWsStore.unsubscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index);
})

function initData() {
	subscribeVital();
}

function subscribeVital() {
	remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index, (res: any) => {
		const data = JSON.parse(res.data);
		if (data.vitalSignsList && data.vitalSignsList.length > 0) {
			Object.assign(patientInfo.value, data.vitalSignsList[0]);
			patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
				patientInfo.value.DBP_except || patientInfo.value.HR_except);
      setLog(patientInfo.value, props.index)
      emit('addLogAfter', props.index)
		}
	})

}

function setLog(data: any, index: number) {
  remoteWsStore.exceptionType.forEach((item: any) => {
    if (data[item]) {
      const msg: any = remoteWsStore.exceptionMsg[item];
      remoteWsStore.setRemoteLog({
        state: msg,
        taskName: remoteTask.value.taskName,
        time: new Date(),
        type: "exception"
      }, 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: $main-color;
        border-color: $main-color;
      }

      .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: $main-color;
            }

            .value {
              color: $main-color;
              border-color: $main-color;
            }
          }
        }
      }

    }
  }
}</style>