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

<template>
    <div class="remote-part">
        <div class="title">
            <span>{{ remoteItem?.title || '远程控制' }}</span>
            <el-button v-if="remoteItem" class="break-btn" @click="breakRemote">断开连接</el-button>
        </div>
        <!-- 小分辨率 -->
        <div v-if="mediaMini800" class="content mini" :class="{'is-total': remoteItem?.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 v-else class="content" :class="{'is-total': remoteItem?.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>
                <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>
            <div class="center-box">
                <img src="@/assets/imgs/main_body_intact.png">
            </div>
            <div class="right-box">
                <div class="info-box">
                    <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.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" :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">
                    <span class="label">TEMP</span> 
                    <span class="value">{{ patientInfo.TEMP }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

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

const emit = defineEmits(['addLogAfter', 'breakRemote'])

const remoteStore = useRemoteStore()
let timer = 0
const mediaMini800 = ref(false)
const remoteItem = ref<RemoteItem>({} as RemoteItem)
const patientInfo = ref({} as PatientInfoItem)

initData(remoteStore.currentRemote)

defineExpose({
    initData
})

onBeforeUnmount(() => {
  // 页面卸载后清楚定时器
  clearInterval(timer)
})

window.addEventListener('resize', () => {
    mediaMini800.value = Boolean(window.innerWidth < 801)
});

function initData(e?: RemoteItem) {
    const obj = e || {} as RemoteItem
    remoteItem.value = obj
    patientInfo.value.state = obj.dataAlarm
    patientInfo.value.name = obj.patientName || ''
    patientInfo.value.code = 'XXXXXX'
    clearInterval(timer)
    if(!patientInfo.value.name) return
    timer = setInterval(() => {
      getData()
    }, 2000)
}

function getData() {
  remoteItem.value.dataAlarm = false
  const obj = {
    state: false,
    BIS: Math.ceil(Math.random() * 100), 
    SBP: Math.ceil(Math.random() * 100), 
    SPO2: Math.ceil(Math.random() * 100), 
    DBP: Math.ceil(Math.random() * 100), 
    HR: Math.ceil(Math.random() * 100), 
    TEMP: Math.ceil(Math.random() * 100),
  } as PatientInfoItem
  patientInfo.value.time = new Date()
  setRemoteLog(obj, (title: string, size: string) => {
    obj.state = true
    remoteItem.value.dataAlarm = true
    remoteStore.setRemoteLog({
      time: new Date(),
      title,
      state: '异常'
    }, remoteItem.value.index)
  })
  remoteStore.setRemoteDataAlarm(remoteItem.value.dataAlarm, remoteItem.value.index)
  remoteStore.$patch({currentRemote: remoteStore.remoteTasks[remoteItem.value.index]})
  Object.assign(patientInfo.value, obj)
  emit('addLogAfter')
}

const breakRemote = () => {
    remoteItem.value.isRemote = false
    emit('breakRemote', remoteItem.value)
}

</script>

<style lang='scss' scoped>
.remote-part {
    width: 100%;
    height: 100%;
    border: 1px solid $border-color;

    .title {
        position: relative;
        width: 100%;
        height: 40px;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        font-weight: 600;
        color: white;
        background: $main-color;
        .break-btn {
            position: absolute;
            top: 4px;
            right: 20px;
        }
    }
    .content {
        width: 100%;
        height: calc(100% - 40px);
        padding: 20px 50px;
        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: 40px;
                color: white;
                font-size: 18px;
                line-height: 40px;
                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% - 10px);
            }
            .value {
                width: 50%;
                height: 40px;
                border-width: 1px;
                border-style: solid;
                text-align: center;
                border-radius: 5px;
                color: $main-color;
                border-color: $main-color;
                font-size: 22px;
                line-height: 40px;
                font-weight: 600;
                .unit {
                    font-size: 16px;
                    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: 10px 0;
                    height: 40px;
                    justify-content: flex-start;
                    align-items: center;
                    .label {
                        width: 70px;
                        height: 20px;
                        background: transparent;
                        color: $main-color;
                        font-size: 16px;
                        line-height: 20px;
                        font-weight: 600;
                        text-align: left;
                    }
                    .input-value {
                        width: 100%;
                        height: 21px;
                        line-height: 20px;
                        font-size: 16px;
                        color: $main-color;
                        border-bottom: 1px solid $border2-color;
                    }
                    .tag-value {
                        margin-left: 30px;
                        padding: 0 20px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 18px;
                        color: white;
                        font-weight: 600;
                        background: $border2-color;
                        border-radius: 8px;
                        &.normal {
                            background: $main-color;
                        }
                        &.alarm {
                            background: red;
                        }
                    }
                }
            }
        }
        &.mini {
            padding: 20px;
            .left-box {
                width: 240px;
            }
            .center-box {
                width: calc(100% - 250px);
            }
            &.is-total {
                .left-box {
                    .info-box {
                        display: block;
                        flex-shrink: 0;
                    }
                    .row-item.yellow {
                        .label {
                            background: #f8b300;
                        }
                        .value {
                            color: #f8b300;
                            border-color: #f8b300;
                        }
                    }
                }
            }
            
        }
    }
}
</style>