up

chenyc

2022-07-18 daaa5d5a99d6a6765e7de5729b61e021021c418f

 src/views/home/index.vue

@@ -3,190 +3,217 @@
import { sockteStore } from '@/stores/sockteInfo'
import { patientInfoStore } from '@/stores/patient'
import os from "os"
import { reactive,computed, toRefs,onMounted ,ref,watch} from "vue"
import{sendPationCode,sendPationSet} from '../../samples/sockteStomp'
import {formatDate} from '@/utils/formatTime'
import { reactive, computed, toRefs, onMounted, ref, watch } from "vue"
import { sendPationCode, sendPationSet } from '../../samples/sockteStomp'
import { formatDate } from '@/utils/formatTime'
import logo from '@/assets/LOGO.png'
import state1 from '@/assets/state1.png'
import state2 from '@/assets/state2.png'
import state3 from '@/assets/state3.png'
import { number } from 'yargs'

 export default {
        setup() {
            let  timer:any=0
            const user = userInfoStore()
            const sockte= sockteStore()
            const inputRef=ref()
            const AudioRef0=ref()
            const AudioRef=ref()
            const AudioRef2=ref()
            const AudioRef3=ref()
            const isLink= computed(()=>{
                return !sockte.isLink
            }) 
            const netLink= computed(()=>{
                return !sockte.netLink
            })
            const weightInfo= computed(()=>{
                return sockte.weightSockte
            })
            const xyjInfo= computed(()=>{
                return sockte.xyjSockte
            })
            const patientInfo=computed(()=>{
                return patientInfoStore().patientInfo
            })
            const viewNumber=computed(()=>{
                return patientInfoStore().viewNumber
            })
export default {
    setup() {
        let timer: any = 0
        const user = userInfoStore()
        const sockte = sockteStore()
        const inputRef = ref()
        const AudioRef0 = ref()
        const AudioRef = ref()
        const AudioRef2 = ref()
        const AudioRef3 = ref()
        const isLink = computed(() => {
            return !sockte.isLink
        })
        const netLink = computed(() => {
            return !sockte.netLink
        })
        const weightInfo = computed(() => {
            return sockte.weightSockte
        })
        const xyjInfo = computed(() => {
            return sockte.xyjSockte
        })
        const patientInfo = computed(() => {
            return patientInfoStore().patientInfo
        })
        const viewNumber = computed(() => {
            return patientInfoStore().viewNumber
        })

            const settime=()=>{
                // 计数倒计时
                state.clockNum=patientInfoStore().viewNumber
                // 清除定时器
                clearInterval(state.timerNum)
                console.log('------------------')
                timer= setInterval(() => {
                    if (state.clockNum > 0) {
                        state.clockNum--
                    }
                    else {
                        clearInterval(timer)
                        patientInfoStore().setpatientInfo({
                            id:0,
                            code:'',
                            name:'',
                            patientAvatarIcon:'',
                            deviceCode:'',
                            hemoCode:'',
                            pureWeight:''
                        })
                        state.clockNum = patientInfoStore().viewNumber
                    }
                }, 1000)
                // 记录定时器
                state.timerNum=timer
                console.log(timer)
            }
            const state=reactive({
                dialogVisible:false,
                isActive:false,
                inputCode:"",
                Newdate:"",
                clockNum:60,
                timerNum:0,//定时器数
                aimTSL:0,// 目标脱水量,
                gao_ya:"",//高压
                di_ya:"",//低压
                mai_bu:""//脉搏
            })
            watch(
                ()=>patientInfo.value.id,
                ()=>{
                    console.log('患者变化了',patientInfo)
                    if(patientInfo.value.id!==0)
                    {
                        AudioRef.value.play();
                        sockteStore().setweightSockte({
                            type:"体重秤",
                            state:2,
                            deviceName:"",
                            result:"0",
                            resultTime:""
                        })
                        sockteStore().setxyjSockte({
                            type:"血压计",
                            state:2,
                            deviceName:"",
                            result:"",
                            resultTime:""
                        })
                        settime()
                       
                    }
        const settime = () => {
            // 计数倒计时
            state.clockNum = patientInfoStore().viewNumber
            // 清除定时器
            clearInterval(state.timerNum)
            console.log('------------------')
            timer = setInterval(() => {
                if (state.clockNum > 0) {
                    state.clockNum--
                }
            )
            watch(
                ()=>weightInfo.value.resultTime,
                ()=>{
                else {
                    clearInterval(timer)
                    patientInfoStore().setpatientInfo({
                        id: 0,
                        code: '',
                        name: '',
                        patientAvatarIcon: '',
                        deviceCode: '',
                        hemoCode: '',
                        pureWeight: ''
                    })
                    state.clockNum = patientInfoStore().viewNumber
                    sockteStore().setweightSockte({
                        type:'体重秤',
                        deviceName: '',
                        result: '',
                        resultTime: '',
                        state: 2
                    })
                    sockteStore().setxyjSockte({
                        type:'血压计',
                        deviceName: '',
                        result: '',
                        resultTime: '',
                        state: 2
                    })
                    state.aimTSL=''
                    state.gao_ya=''
                    state.di_ya=''
                    state.mai_bu=''
                }
            }, 1000)
            // 记录定时器
            state.timerNum = timer
            console.log(timer)
        }
        const state = reactive({
            state1:state1,
            state2:state2,
            state3:state3,
            logo:logo,
            dialogVisible: false,
            isActive: false,
            inputCode: "",
            Newdate: "",
            clockNum: 60,
            timerNum: 0,//定时器数
            aimTSL: '',// 目标脱水量,
            gao_ya: "",//高压
            di_ya: "",//低压
            mai_bu: ""//脉搏
        })
        watch(
            () => patientInfo.value.id,
            () => {
                console.log('患者变化了', patientInfo)
                if (patientInfo.value.id !== 0) {
                    AudioRef.value.play();
                    sockteStore().setweightSockte({
                        type: "体重秤",
                        state: 2,
                        deviceName: "",
                        result: "0",
                        resultTime: ""
                    })
                    sockteStore().setxyjSockte({
                        type: "血压计",
                        state: 2,
                        deviceName: "",
                        result: "",
                        resultTime: ""
                    })
                    settime()
                    console.log("体重变化了")
                    // AudioRef2.value.play()
                    if(patientInfo.value.id===0){

                }
            }
        )
        watch(
            () => weightInfo.value.resultTime,
            () => {
                settime()
                console.log("体重变化了")
                // AudioRef2.value.play()
                if (patientInfo.value.id === 0) {
                    AudioRef0.value.play()
                }
                else {
                    AudioRef2.value.play()
                    // 发送结果到sockte服务
                    const mode = {
                        patientCode: patientInfo.value.code,
                        weight: weightInfo.value.result,
                        bloodPressure: ''

                    }
                    console.log('发送患者结果', mode)
                    sendPationSet(mode)
                    // 计算目标脱水量
                    if (Number(weightInfo.value.result) > 0 && Number(patientInfo.value.pureWeight) !== 0) {
                        state.aimTSL = (Number(weightInfo.value.result) - Number(patientInfo.value.pureWeight)).toFixed(2)
                    }
                }
            }
        )
        watch(
            () => xyjInfo.value.resultTime,
            () => {
                if (xyjInfo.value.result !== '') {
                    const list = xyjInfo.value.result.split(',')
                    if (list.length === 3) {
                        state.gao_ya = list[0]
                        state.di_ya = list[1]
                        state.mai_bu = list[2]
                    }
                    if (patientInfo.value.id === 0) {
                        AudioRef0.value.play()
                    }
                    else{
                        AudioRef2.value.play()
                        // 发送结果到sockte服务
                        const mode={
                            patientCode:patientInfo.value.code,
                            weight:weightInfo.value.result,
                            bloodPressure:''
                        settime()
                    } else {
                        AudioRef3.value.play()
                        settime()
                        const mode = {
                            patientCode: patientInfo.value.code,
                            weight: weightInfo.value.result,
                            bloodPressure: xyjInfo.value.result

                        }
                        console.log('发送患者结果',mode)
                        console.log('发送患者结果', mode)
                        sendPationSet(mode)
                        // 计算目标脱水量
                        if(Number(weightInfo.value.result)>0&&Number(patientInfo.value.pureWeight)!==0){
                            state.aimTSL=Number(weightInfo.value.result)-Number(patientInfo.value.pureWeight)
                        }
                    }
                } else {
                    state.gao_ya = ""
                    state.di_ya = ""
                    state.mai_bu = ""
                }
            )
            watch(
                ()=>xyjInfo.value.resultTime,
                ()=>{
                    if(xyjInfo.value.result!==''){
                        const list=xyjInfo.value.result.split(',')
                        if(list.length===3){ 
                            state.gao_ya=list[0]
                            state.di_ya=list[1]
                            state.mai_bu=list[2]
                        }
                        if(patientInfo.value.id===0){
                            AudioRef0.value.play()
                            settime()
                        }else{
                            AudioRef3.value.play()
                            settime()
                            const mode={
                                patientCode:patientInfo.value.code,
                                weight:weightInfo.value.result,
                                bloodPressure:xyjInfo.value.result

                            }
                            console.log('发送患者结果',mode)
                            sendPationSet(mode)
                        }    
                    }else{
                        state.gao_ya=""
                        state.di_ya=""
                        state.mai_bu=""
                    }
                }
            )
            watch(()=>viewNumber,
                ()=>{
                    state.clockNum=viewNumber.value
                }
            )
            const inputChabge=()=>{
                sendPationCode(state.inputCode)
                setTimeout(function(){
                    state.inputCode=''
                },1000)
            }
            onMounted(() => {
                console.log('页面初始化',os.hostname())
                state.clockNum=patientInfoStore().viewNumber
                setTimeout(function(){
                    console.log('7秒后操作')
                    inputRef.value.focus();
                },7000)
                setInterval(function(){
                    state.Newdate=formatDate(new Date(),"YYYY-mm-dd HH:MM:SS")
                },1000)
            })
            return{ ...toRefs(state),isLink,netLink,weightInfo,patientInfo,xyjInfo,inputRef,AudioRef0,AudioRef,AudioRef2,AudioRef3,inputChabge
        )
        watch(() => viewNumber,
            () => {
                state.clockNum = viewNumber.value
            }
        )
        const inputChabge = () => {
            sendPationCode(state.inputCode)
            setTimeout(function () {
                state.inputCode = ''
            }, 1000)
        }
        onMounted(() => {
            console.log('页面初始化', os.hostname())
            state.clockNum = patientInfoStore().viewNumber
            setTimeout(function () {
                console.log('7秒后操作')
                inputRef.value.focus();
            }, 7000)
            setInterval(function () {
                state.Newdate = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")
            }, 1000)
        })
        return {
            ...toRefs(state), isLink, netLink, weightInfo, patientInfo, xyjInfo, inputRef, AudioRef0, AudioRef, AudioRef2, AudioRef3, inputChabge
        }
    }
}
</script>
<template>
    <div class="home">
@@ -198,146 +225,268 @@
        <audio src="https://dhcdn.leon056.com/hemo/autoselfsign/step3.mp3" ref="AudioRef2" id="eventAudio"></audio>
        <!-- 血压结果回传成功 -->
        <audio src="https://dhcdn.leon056.com/hemo/autoselfsign/step4.mp3" ref="AudioRef3" id="eventAudio"></audio>
        <el-dialog
            title="提示"
            v-model="netLink"
            width="30%">
        <el-dialog title="提示" v-model="netLink" width="30%">
            <span>无法链接到网络！</span>
        </el-dialog>
        <el-dialog
            title="提示"
            v-model="isLink"
            width="30%">
        <el-dialog title="提示" v-model="isLink" width="30%">
            <span>sockte连接失败正在重连。。。。。。</span>
        </el-dialog>
        <el-row>
            <el-col :span="12">
                <div class="tale">
                    <img class="imgss" alt="Vue logo" src="@/assets/logo.png" />
        <div>
            <el-row>
                <el-col :span="6">
                    <div class="imglogo">
                        <el-image :src="logo"  />
                    </div>
                     
                </el-col>
                <el-col :span="2">
                    <el-input id="inputCode"  @change="inputChabge" v-model="inputCode" ref="inputRef" placeholder="" />
                </el-col>
                <el-col :span="8" class="titleText">
                    患者签到
                </el-col>
                <el-col class="clockNum" :span="8">{{clockNum}}</el-col>
            </el-row>
        </div>
        <el-row :gutter="30">
            <el-col :span="12" class="item">
                <div>
                    <el-row>
                        <el-col :span="10">
                            <div class="patimg">
                                <el-image style="width:200px;height:280px;" :src="patientInfo.patientAvatarIcon" />
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div class="chenlabe">
                                    <div class="chenlabel">
                                    <div class="chenlabe2">
                                        <el-row>
                                            <el-col class="lableClass" :span="12">
                                                姓名：
                                            </el-col>
                                            <el-col class="inputClasss" :span="12">
                                                {{patientInfo.name}}
                                            </el-col>
                                        </el-row>
                                        
                                    </div>
                                </div>
                                <div class="chenlabel" >
                                    <div class="chenlabe2">
                                        <el-row>
                                            <el-col class="lableClass" :span="12">
                                                透析号：
                                            </el-col>
                                            <el-col class="inputClasss" :span="12">
                                                {{patientInfo.hemoCode}}
                                            </el-col>
                                        </el-row>
                                    </div>   
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                
            </el-col>
            <el-col :span="12" class="item">
                <div class="xyjCON">
                    <el-row class="xyclass">
                        <el-col :span="12" >血压(mmHg):</el-col>
                        <el-col :span="12" >
                            <div class="xyimg">
                                <el-image v-if="xyjInfo.state === 2" style="width: 60px; height: 60px" :src="state1"  />
                                <el-image v-if="xyjInfo.state === 1" style="width: 60px; height: 60px" :src="state2"  />
                                <el-image v-if="xyjInfo.state === 0" style="width: 60px; height: 60px" :src="state3"  />
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <div class="xyjnumber">
                            {{ gao_ya }}/{{ di_ya }}
                        </div>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="6">
                <!-- <div> sockte连接状态{{isLink}}</div>
                <div> 网络连接状态{{netLink}}</div> -->
                <el-input id="inputCode" @change="inputChabge" v-model="inputCode" ref="inputRef" placeholder="" />

            <el-col :span="12" class="item">
                <div>
                    <div class="deviceInfo">
                        <el-row class="deviceInfoItem">
                            <el-col class="text" :span="12" >机号:</el-col>
                            <el-col class="value" :span="12" > {{patientInfo.deviceCode}}</el-col>
                        </el-row>
                        <el-row class="deviceInfoItem">
                            <el-col class="text" :span="12" >干体重（kg）:</el-col>
                            <el-col class="value" :span="12" > {{ patientInfo.pureWeight }}</el-col>
                        </el-row>
                        <el-row class="deviceInfoItem">
                            <el-col class="text" :span="12" >目标脱水量(L):</el-col>
                            <el-col class="value" :span="12" > {{aimTSL}}</el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="datess">
                    {{clockNum}}
            <el-col :span="12" class="item">
                <div class="xyjCON">
                    <el-row class="xyclass">
                        <el-col :span="12" >透前体重(kg):</el-col>
                        <el-col :span="12" >
                            <div class="xyimg">
                                <el-image v-if="weightInfo.state === 2" style="width: 60px; height: 60px" :src="state1"  />
                                <el-image v-if="weightInfo.state === 1" style="width: 60px; height: 60px" :src="state2"  />
                                <el-image v-if="weightInfo.state === 0" style="width: 60px; height: 60px" :src="state3"  />
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <div class="xyjnumber">
                            {{ weightInfo.result }}
                        </div>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <div class="grid-container">
            <div class="grid-item">
                <el-avatar
                    shape="square"
                    :size="100"
                    fit="cover"
                    :src="patientInfo.patientAvatarIcon"
                />
                <div class="zsf">{{patientInfo.name}}</div>
            </div>
            <div class="grid-item">
                <div class="lableText">当前时间:</div>
                <div class="conText">{{Newdate}}</div>
            </div>
            <div class="grid-item">
                <div class="lableText">透析号:</div>
                <div class="conText">{{patientInfo.hemoCode}}</div>
            </div>
            <div class="grid-item">
                <div class="lableText">机号:</div>
                <div class="conText">{{patientInfo.deviceCode}}</div>
            </div>
            <div class="grid-item">
                <div class="lableText">序号:</div>
                <div class="conText">0</div>
            </div>
            <div class="grid-item">
                <div class="lableText">干体重(kg):</div>
                <div class="conText">{{patientInfo.pureWeight}}</div>
            </div>
            <div class="grid-item" >
                <div>
                    <div class="lableText" v-if="weightInfo.state===2">透前称重(kg):</div>
                    <div class="lableText" v-if="weightInfo.state===1" style="color:red">体重秤通讯服务正常运行但未联通设备</div>
                    <div class="lableText" v-if="weightInfo.state===0" style="color:red">体重秤通讯服务不正常 </div>
                    <div class="conText">{{weightInfo.result}}</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="lableText">目标脱水量:</div>
                <div class="conText">{{aimTSL}}</div>
            </div>
            <div class="grid-item">
                <div class="lableText" v-if="xyjInfo.state===2">血压:</div>
                <div class="lableText" v-if="xyjInfo.state===1" style="color:red">血压通讯服务正常运行但未联通设备</div>
                <div class="lableText" v-if="xyjInfo.state===0" style="color:red">血压通讯服务不正常 </div>
                <div class="conText">{{gao_ya}}/{{di_ya}}</div>
            </div>
        </div>
    </div>
</template>
<style>
body {
    background: #f3f7fb;
<style lang="scss">
.home{
background:  #F3F6FE;
}
.coldev {
    height: 200px;
    background: #ffff;
.item{
    padding: 20px;
}
.grid-container {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 20px;
    background: #f3f7fb;
    padding: 10px;
}
.grid-container > div {
    background: #ffffff;
    height: 150px;
    text-align: center;
.item>div{
    background: #FFFFFF;
    box-shadow: 1px 2px 4px 0px rgba(201,223,246,0.5000);
    border-radius: 10px;
    padding: 10px;
    height: 330px;
}
.lableText {
    text-align: left;
    /* height: 50px; */
    /* line-height: 50px; */
    padding-top: 30px;
    font-size: 13pt;
.chenlabe{
    padding-top: 15%;
}
.conText {
    height: 50px;
    line-height: 50px;
    padding-top: 30px;
    color: #769aff;
    font-size: 20pt;
.chenlabel{
    height: 50%;
    // background: #d9ecff;
}
.imgss {
    height: 30px;
.chenlabe2{
    padding-top: 10%;
    padding-left: 30px;
    .lableClass{
        height: 42px;
        font-size: 30px;
        font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
        font-weight: 400;
        color: #777777;
        line-height: 42px;
        letter-spacing: 1px;
    }
    .inputClasss{
        height: 42px;
        font-size: 30px;
        font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
        font-weight: 500;
        color: #769AFF;
        line-height: 42px;
        letter-spacing: 1px;
    }
}
.tale {
    height: 30px;
    line-height: 50px;
    /* text-align: center; */
.patimg{
    width: 227px;height: 315px;border-radius: 4px;
    padding-left: 13px;
    padding-top: 17px;
}
.zsf {
    font-size: 18pt;
    margin-top: 15pt;
    color: #769aff;
.xyclass{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 30px;
    font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
    font-weight: 400;
    color: #333333;
}
.active{
    background: #c1c2c6;
    color: black;
}
.datess{
.xyimg{
    text-align: right;
    padding-right: 20px;
    height: 30px;
    line-height: 30px;
    color: red;
    font-weight: 1000;
}
.xyjnumber{
    width:100%;
    height: 100%;
    font-size: 120px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #769AFF;
    line-height: 100%;
    margin-top: 7%;
    text-align: center;
}
.xyjCON{
    height: 100%;
}
.deviceInfo{
    padding-top: 60px;

}
.deviceInfoItem{
    // background: #333333;
    height: 70px;
    width: 100%;
    line-height: 70px;
    // background: #769AFF;
    .text{
        padding-left: 50px;
        height: 42px;
        font-size: 30px;
        font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
        font-weight: 400;
        color: #777777;
        line-height: 42px;
        letter-spacing: 1px;
        text-align: right;
    }
    .value{
        text-align: center;
        height: 47px;
        font-size: 40px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #769AFF;
        line-height: 47px;
        letter-spacing: 2px;
    }
}
.titlerow{
    height: 72px;
    background: #FFFFFF;
    line-height: 72px;
    box-shadow: 1px 3px 5px 0px #E9E9E9;
}
.imglogo{
    padding-top: 10px;
   width: 102px;
   height: 40px;
//    background: #769AFF;
}
.titleText{
    text-align: center;
    height: 38px;
    font-size: 27px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 38px;
    letter-spacing: 1px;
}
.clockNum{
    width: 100%;
    height: 38px;
    font-size: 27px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FF7472;
    line-height: 38px;
    letter-spacing: 1px;
    text-align:right;
    padding-right: 10px;
}

</style>