Vue_New/src/xt_pages/sign/lineUp.vue

<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
            <el-button
                size="small"
                icon="el-icon-menu"
                @click="fullscreenboard"
                type="primary"
                >全屏投影</el-button
            >
        </div>
        <div id="fullscreenbroad" v-show="dialogTableVisible">
            <el-row class="fullRow">
                <el-button
                @click="openSetting"
                icon="el-icon-setting"
                circle
                id="fullscreenbroad-setting"
                ></el-button>
                <el-button
                type="primary"
                icon="el-icon-rank"
                v-if="showSetting"
                id="fullscreenbroad-setting"
                @click="togglefullscreen"
                >切换模式</el-button
                >
                <el-button
                type="primary"
                icon="el-icon-menu"
                v-if="showSetting"
                id="fullscreenbroad-setting"
                @click="outfullscreenboard"
                >退出全屏投影</el-button
                >
            </el-row>
            <div class="page_lineUp">
                <div class="lineUpTitle">
                    <div>{{ this.$store.getters.xt_user.org.org_name }}<span>&nbsp;&nbsp;温馨提示：请注意排队叫号，依次叫号就诊上机，谢谢配合</span></div>
                    <div>{{ newdate }}&nbsp;&nbsp;{{ time }}</div>
                </div>
                <div class="lineUpMain">
                    <div class="lineUpMainLeft">
                        <div class="lineUpMainLeftTitle">
                            <p style="width:12%">排号</p>
                            <p style="width:14%">姓名</p>
                            <p style="width:14%">病例号</p>
                            <p style="width:14%">床位号</p>
                            <p style="width:14%">治疗状态</p>
                            <p style="width:14%">上机时间</p>
                            <p style="width:16%">预计下机时间</p>
                        </div>
                        <div class="lineUpList">
                            <div class="lineUpListOne" v-for="(item,index) in lineUpList" :key="index">
                                <p style="width:12%">{{ item.queue_no }}</p>
                                <p style="width:14%">{{ item.patient_name }}</p>
                                <p style="width:14%">{{ item.dialysis_no }}</p>
                                <p style="width:14%">{{ item.partition_name + item.bed_name }}</p>
                                <p style="width:14%">
                                    <span v-if="item.status == 1">待接诊</span>
                                    <span v-if="item.status == 2">接诊中</span>
                                    <span v-if="item.status == 3">待上机</span>
                                    <span v-if="item.status == 4">透析中</span>
                                    <span v-if="item.status == 5">已下机</span>
                                </p>
                                <p style="width:14%">{{ item.start_time ? item.start_time : '--' }}</p>
                                <p style="width:16%">{{ item.end_time ? item.end_time : '--' }}</p>
                            </div>
                        </div>
                    </div> 
                    <div class="callingBox">
                        <div class="callingBoxLeft">
                            <div class="callingTitle"><span style="margin: 0 auto;">接<br />诊<br />叫<br />号</span></div>
                            <div style="flex: 1;">
                                <div class="callingTop" style="margin-bottom:10px;">
                                    <div class="callingTopTip"><span style="margin: 0 auto;">正在<br />接诊</span></div>
                                    <div class="callingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in receivingPatient.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in receivingPatient.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                                <div class="callingTop" style="border-radius: 0 0 15px 0;">
                                    <div class="callingTopTip"><span style="margin: 0 auto;">等待<br />接诊</span></div>
                                    <div class="callingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in waitDoctorList.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in waitDoctorList.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="callingBoxLeft">
                            <div class="callingTitle newCallingTitle"><span style="margin: 0 auto;">上<br />机<br />叫<br />号</span></div>
                            <div style="flex: 1;">
                                <div class="callingTop" style="margin-bottom:10px;">
                                    <div class="callingTopTip newCallingTopTip"><span style="margin: 0 auto;">正在<br />叫号</span></div>
                                    <div class="callingContent newCallingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in upPatientList.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in upPatientList.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                                <div class="callingTop" style="border-radius: 0 0 15px 0;">
                                    <div class="callingTopTip newCallingTopTip"><span style="margin: 0 auto;">等待<br />叫号</span></div>
                                    <div class="callingContent newCallingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in receivingPatient.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in receivingPatient.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="app-container">
            <div class="page_lineUp">
                <div class="lineUpTitle">
                    <div>{{ this.$store.getters.xt_user.org.org_name }}<span>&nbsp;&nbsp;温馨提示：请注意排队叫号，依次叫号就诊上机，谢谢配合</span></div>
                    <div>{{ newdate }}&nbsp;&nbsp;{{ time }}</div>
                </div>
                <div class="lineUpMain">
                    <div class="lineUpMainLeft">
                        <div class="lineUpMainLeftTitle">
                            <p style="width:12%">排号</p>
                            <p style="width:14%">姓名</p>
                            <p style="width:14%">病例号</p>
                            <p style="width:14%">床位号</p>
                            <p style="width:14%">治疗状态</p>
                            <p style="width:14%">上机时间</p>
                            <p style="width:16%">预计下机时间</p>
                        </div>
                        <div class="lineUpList">
                            <div class="lineUpListOne" v-for="(item,index) in lineUpList" :key="index">
                                <p style="width:12%">{{ item.queue_no }}</p>
                                <p style="width:14%">{{ item.patient_name }}</p>
                                <p style="width:14%">{{ item.dialysis_no }}</p>
                                <p style="width:14%">{{ item.partition_name + item.bed_name }}</p>
                                <p style="width:14%">
                                    <span v-if="item.status == 1">待接诊</span>
                                    <span v-if="item.status == 2">接诊中</span>
                                    <span v-if="item.status == 3">待上机</span>
                                    <span v-if="item.status == 4">透析中</span>
                                    <span v-if="item.status == 5">已下机</span>
                                </p>
                                <p style="width:14%">{{ item.start_time ? item.start_time : '--' }}</p>
                                <p style="width:16%">{{ item.end_time ? item.end_time : '--' }}</p>
                            </div>
                        </div>
                    </div> 
                    <div class="callingBox">
                        <div class="callingBoxLeft">
                            <div class="callingTitle"><span style="margin: 0 auto;">接<br />诊<br />叫<br />号</span></div>
                            <div style="flex: 1;">
                                <div class="callingTop" style="margin-bottom:10px;">
                                    <div class="callingTopTip"><span style="margin: 0 auto;">正在<br />接诊</span></div>
                                    <div class="callingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in receivingPatient.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in receivingPatient.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                                <div class="callingTop" style="border-radius: 0 0 15px 0;">
                                    <div class="callingTopTip"><span style="margin: 0 auto;">等待<br />接诊</span></div>
                                    <div class="callingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in waitDoctorList.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in waitDoctorList.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="callingBoxLeft">
                            <div class="callingTitle newCallingTitle"><span style="margin: 0 auto;">上<br />机<br />叫<br />号</span></div>
                            <div style="flex: 1;">
                                <div class="callingTop" style="margin-bottom:10px;">
                                    <div class="callingTopTip newCallingTopTip"><span style="margin: 0 auto;">正在<br />叫号</span></div>
                                    <div class="callingContent newCallingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in upPatientList.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in upPatientList.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                                <div class="callingTop" style="border-radius: 0 0 15px 0;">
                                    <div class="callingTopTip newCallingTopTip"><span style="margin: 0 auto;">等待<br />叫号</span></div>
                                    <div class="callingContent newCallingContent">
                                        <p style="margin:50px 0 14px;"><span v-for="(item,index) in receivingPatient.slice(0,3)" :key="index">{{ item.patient_name }}、</span></p>
                                        <p><span v-for="(item,index) in receivingPatient.slice(3,6)" :key="index">{{ item.patient_name }}、</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
const moment = require('moment')
import BreadCrumb from "../components/bread-crumb";
import screenfull from "screenfull";
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
            crumbs: [
                { path: false, name: "签到排队" },
                { path: false, name: "排队窗口" }
            ],
            dialogTableVisible:false,
            showSetting: false,
            lineUpList:[],
            count:0,
            page:1,
            timer:null,
            receivingPatient:[],
            waitDoctorList:[],
            upPatientList:[],
            patient_id:'',
            timerID:null,
            time:'',
            newdate:'',
            voiceNum:1,
            voiceTime:null,

            voice:true,
            a:1
        }
    },
    computed: {
        websocket() {
            return this.$store.state.user.websocket;
        },
    },
    created(){
        this.initData = {
            cmd: "queue/join",
            data: {type:2,page:1,size:6},
        };
        this.websocketSend(this.initData)
        let newobj = {
            cmd: "queue/callreturn",
            data: {patient_id:0},
        };
        this.websocketSend(newobj)
    },
    beforeMount() {
        this.websocketMess();
    },
    mounted(){
        this.timer = setInterval(() => {
            if(this.page < Math.ceil(this.count / 6)){
                console.log('执行',Math.ceil(this.count / 6),this.page)
                this.page++
                let obj = {
                    cmd: "queue/queuelist",
                    data: {page:this.page,size:6}
                };
                this.websocketSend(obj)
            }else{
                console.log('执行22223333')
                this.page = 1
                let obj = {
                    cmd: "queue/queuelist",
                    data: {page:this.page,size:6}
                };
                this.websocketSend(obj)
            }
        }, 5000);
        this.timerID = setInterval(() => {
            this.updateTime()
        }, 1000);
    },
    beforeDestroy(){
        clearInterval(this.timer);　　// 清除定时器
        this.timer = null
        clearInterval(this.timerID);
        this.timerID = null;　　// 清除定时器
        // this.timer = null;
        // let obj = {
        //     cmd: "queue/join",
        //     data: {type:1},
        // };
        // this.websocketSend(obj)
        console.log('hhhhhhhhhhhhhhhhhhhhhh',this.timerID)
    },
    methods:{
        websocketSend(data) {
            try {
                this.websocket.send(JSON.stringify(data))
                
            } catch (error) {
                this.showError = true;
                this.showIndex = 4;
                this.errorInfo = "网络异常，请稍后退出重试！";
            }
        },
        websocketMess() {
            this.websocket.onmessage = e => {
                let res = JSON.parse(e.data);
                // let res = re.data;
                console.log('res',res)
                if(res.channel == 'queue/join'){
                    this.lineUpList = res.data.patientQueueList.data
                    this.receivingPatient = res.data.receivingPatient
                    this.waitDoctorList = res.data.waitDoctorList
                    this.upPatientList = res.data.upPatientList
                    this.count = res.data.patientQueueList.count
                    this.lineUpList.map(item => {
                        item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                        // item.start_time = moment(item.start_time * 1000).format('HH:mm')
                    })
                }else if(res.channel == 'queue/queuelist'){
                    this.lineUpList = res.data.patientQueueList.data
                    this.count = res.data.patientQueueList.count
                    this.lineUpList.map(item => {
                        item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                        // item.start_time = moment(item.start_time * 1000).format('HH:mm')
                        if(item.start_time != null){
                            item.start_time = moment(item.start_time * 1000).format('HH:mm:ss')
                        }
                        if(item.status == 4){
                            item.end_time = moment(item.end_time * 1000).format('HH:mm:ss')
                        }
                    })
                }else if(res.channel == 'patientCallInfo'){
                    console.log(999999999999,res.data)
                    
                    
                    console.log('执行几次',this.voiceNum)
                    if(this.voice == true){
                        this.patient_id = res.data.patientInfo.patient_id
                        this.voice = false
                        // let time1 = null
                        this.voicePrompt(res.data.callVolUrl)
                        this.voiceTime = setInterval(() => {
                            if(this.voiceNum < 3){
                                this.voiceNum++
                                this.voicePrompt(res.data.callVolUrl)
                            }else{
                                this.voiceNum = 1;
                                this.voice = true 
                                let obj = {
                                    cmd: "queue/callreturn",
                                    data: {patient_id:this.patient_id},
                                };
                                this.websocketSend(obj)
                                clearInterval(this.voiceTime);
                                this.voiceTime = null
                            }
                        },6000)
                    }else {
                        this.$message({
                            message: '警告哦，这是一条警告消息',
                            type: 'warning'
                        });
                    }
                }else if(res.channel == 'updateCallList'){
                    this.receivingPatient = res.data.queue_list
                    
                }else if(res.channel == 'updateWaitCallList'){
                    this.waitDoctorList = res.data.queue_list
                }else if(res.channel == 'updateUpCallList'){
                    this.upPatientList = res.data.queue_list
                }
                // else if(res.channel == "patientQueueInfo"){
                //     this.queueInfo = res.data.queueInfo
                //     let obj = {
                //         cmd: "queue/queuelist",
                //         data: {page:1,size:10}
                //     };
                //     this.websocketSend(obj)
                    
                // }
            }
        },
        updateTime() {
            var cd = new Date();
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            console.log(1111111)
            this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2) + ' （' + week[cd.getDay()] + "）";
            this.newdate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2);
        },

        zeroPadding(num, digit) {
            var zero = '';
            for (var i = 0; i < digit; i++) {
                zero += '0';
            }
            return (zero + num).slice(-digit);
        },
        fullscreenboard: function() {
            this.dialogTableVisible = true;
            // let routeData = this.$router.resolve({ path: '/fullscreenboard' })
            // window.open(routeData.href, '_blank')
        },
        outfullscreenboard: function() {
            this.dialogTableVisible = false;
            this.showSetting = false;
        },
        togglefullscreen: function() {
            if (!screenfull.enabled) {
                this.$message({
                message: "你的浏览器不支持",
                type: "warning"
                });
                return false;
            }
            screenfull.toggle();
            this.showSetting = false;
        },
        openSetting() {
            if (this.showSetting == false) {
                this.showSetting = true;
            } else {
                this.showSetting = false;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.page_lineUp{
    .lineUpTitle{
        height: 50px;
        background: #1A82BF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        color:#fff;
        font-size: 20px;
        font-weight: 600;
    }
    .lineUpMain{
        background: linear-gradient(0deg, #76ECEC, #479CD2);
        height: 1080px;
        padding:10px;
    }
    .lineUpMainLeft{
        height: 620px;
        border-radius: 15px;
        
    }
    .lineUpMainLeftTitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color:#fff;
        font-size: 38px;
        font-weight: 600;
        height:80px;
        background: #1A82BF;
        border-radius: 15px 15px 0 0;
        >p{
            text-align: center;
        }
    }
    .lineUpList{
        font-size: 35px;
        font-weight: 600;
        >div:nth-child(odd){
            background: #F9FDFF;
        }
        >div:nth-child(even){
            background: #CCEBFF;
        }
        >div:last-child{
            border-radius: 0 0 15px 15px;
        }
        .lineUpListOne{
            height:90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color:#1C6895;
            >p{
                width:25%;
                text-align: center;
            }
        }
    }
    .callingBox{
        height: 430px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .callingBoxLeft{
            width: 49.5%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            .callingTitle{
                width: 130px;
                height: 100%;
                border-radius: 15px 0 0 15px;
                font-size: 66px;
                font-weight:600;
                text-align: center;
                color: #fff;
                background: #1A82BF;
                display: flex;
                align-items: center;
                margin-right: 5px;
            }
            .newCallingTitle{
                background: #1aa680;
            }
        } 
        .callingTop{
            height: 210px;
            border-radius: 0 15px 0 0;
            background: #F9FDFF;
            display: flex;
            justify-content: space-between;
            .callingTopTip{
                width: 130px;
                height: 100%;
                color: #fff;
                font-size: 40px;
                font-weight: 600;
                background: #1A82BF;
                display: flex;
                align-items: center;
            }
            .newCallingTopTip{
                background: #1aa680;
            }
            .callingContent{
                flex: 1;
                display: flex;
                flex-direction: column;
                font-size: 50px;
                color:#1C6895;
                font-weight: 600;
                padding-left: 20px;
                >p{
                    width:100%;
                    text-align: left;
                    line-height: 50px;
                }
            }
            .newCallingContent{
                color:#1aa680;
            }
        }
    }
}
#fullscreenbroad {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background: #fff;
  padding: 20px;
  z-index:5000;
}
#fullscreenbroad #fullscreenbroad-setting {
  float: right;
}

#fullscreenbroad .el-button + .el-button {
  margin-left: 0px;
}
#fullscreenbroad .el-button:nth-child(1) {
  margin-left: 10px;
}
#fullscreenbroad .el-button:nth-child(2) {
  margin-left: 10px;
}
.fullRow{
    margin-bottom: 10px;
}
</style>