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)
let reconnectTime = 0

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

function initData() {
    subscribeVital()
    wsClose()
}

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 wsClose() {
    remoteWsStore.vitalOnclose(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index, () => {
        if (reconnectTime < 3) {
            remoteWsStore.createConnect(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index)
            setTimeout(() => {
                subscribeVital()
                wsClose()
            }, 3000)
            reconnectTime++
        }
    })

}

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.3;
                        margin-top: $size*0.1;
                        padding: 0 $size*0.5;
                        height: $size*0.9;
                        line-height: $size;
                        font-size: $size*0.5;
                        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>