Vue_New/src/xt_pages/sign/signIn.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_signIn">
                <div class="signInTitle">
                    <div>{{ this.$store.getters.xt_user.org.org_name }}</div>
                    <div>{{ newdate }}&nbsp;&nbsp;{{ time }}</div>
                </div>
                <div class="signInMain">
                    <div style="display: flex;justify-content: space-between;padding:10px;">
                        <div class="signInMainLeft">
                            <div class="signInMainLeftTitle">
                                <p>排号</p>
                                <p>姓名</p>
                                <p>病历号</p>
                                <p>签到时间</p>
                            </div>
                            <div class="signInList">
                                <div class="signInListOne" v-for="(item,index) in signInList" :key="index">
                                    <p>{{ item.queue_no }}</p>
                                    <p>{{ item.patient_name }}</p>
                                    <p>{{ item.dialysis_no }}</p>
                                    <p>{{ item.create_time }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="signInMainRight">
                            <div class="signInMainRightTitle"><span style="margin:0 auto;" v-if='Object.keys(queueInfo).length>0'>{{ queueInfo.patient_name }}</span></div>
                            <div class="signInMainRightContent">
                                <p style="margin: 0 auto;display:flex;align-items: center;" v-if='Object.keys(queueInfo).length>0'><span>排号&nbsp;</span><span style="font-size:180px;">{{ queueInfo.queue_no }}</span></p>
                            </div>
                            <div class="signInMianRightBottom"><span style="margin:0 auto;" v-if='Object.keys(queueInfo).length>0'>签到成功</span></div>
                        </div>
                    </div>
                    <div class="signInTip">
                        温馨提示：请注意排队叫号，依次叫号就诊上机，谢谢配合
                    </div>
                </div>
            </div>
        </div>
        <div class="app-container">
            <div class="page_signIn">
                <div class="signInTitle">
                    <div>{{ this.$store.getters.xt_user.org.org_name }}</div>
                    <div>{{ newdate }}&nbsp;&nbsp;{{ time }}</div>
                </div>
                <div class="signInMain">
                    <div style="display: flex;justify-content: space-between;padding:10px;">
                        <div class="signInMainLeft">
                            <div class="signInMainLeftTitle">
                                <p>排号</p>
                                <p>姓名</p>
                                <p>病历号</p>
                                <p>签到时间</p>
                            </div>
                            <div class="signInList">
                                <div class="signInListOne" v-for="(item,index) in signInList" :key="index">
                                    <p>{{ item.queue_no }}</p>
                                    <p>{{ item.patient_name }}</p>
                                    <p>{{ item.dialysis_no }}</p>
                                    <p>{{ item.create_time }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="signInMainRight">
                            <div class="signInMainRightTitle"><span style="margin:0 auto;" v-if='Object.keys(queueInfo).length>0'>{{ queueInfo.patient_name }}</span></div>
                            <div class="signInMainRightContent">
                                <p style="margin: 0 auto;display:flex;align-items: center;" v-if='Object.keys(queueInfo).length>0'><span>排号&nbsp;</span><span style="font-size:180px;">{{ queueInfo.queue_no }}</span></p>
                            </div>
                            <div class="signInMianRightBottom"><span style="margin:0 auto;" v-if='Object.keys(queueInfo).length>0'>签到成功</span></div>
                        </div>
                    </div>
                    <div class="signInTip">
                        温馨提示：请注意排队叫号，依次叫号就诊上机，谢谢配合
                    </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,
            signInList:[],
            queueInfo:{},
            count:0,
            page:1,
            timer:null,
            timerID:null,
            time:'',
            newdate:''
        }
    },
    computed: {
        websocket() {
            return this.$store.state.user.websocket;
        },
    },
    created(){
        this.initData = {
            cmd: "queue/join",
            data: {type:1,page:1,size:10},
        };
        this.websocketSend(this.initData)
    },
    beforeMount() {
        this.websocketMess();
    },
    mounted(){
        this.timer = setInterval(() => {
            if(this.page < Math.ceil(this.count / 10)){
                console.log('执行')
                this.page++
                let obj = {
                    cmd: "queue/queuelist",
                    data: {page:this.page,size:10}
                };
                this.websocketSend(obj)
            }else{
                console.log('执行2222')
                this.page = 1
                let newobj = {
                    cmd: "queue/queuelist",
                    data: {page:this.page,size:10}
                };
                this.websocketSend(newobj)
            }
        }, 5000);
        
        this.timerID = setInterval(() => {
            this.updateTime()
        }, 1000);
        // this.updateTime();
    },
    beforeDestroy(){
        clearInterval(this.timer);　　// 清除定时器
        clearInterval(this.timerID);　　// 清除定时器
        this.timer = null;
        let obj = {
            cmd: "queue/unjoin",
            data: {type:1},
        };
        this.websocketSend(obj)
    },
    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.signInList = res.data.patientQueueList.data
                    this.count = res.data.patientQueueList.count
                    this.signInList.map(item => {
                        item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                    })
                }else if(res.channel == "patientQueueInfo"){

                    this.queueInfo = res.data.queueInfo
                    let obj = {
                        cmd: "queue/queuelist",
                        data: {page:1,size:10}
                    };
                    this.websocketSend(obj)
                    
                }else if(res.channel == 'queue/queuelist'){
                    console.log(11111111111,res.data)
                    this.signInList = res.data.patientQueueList.data
                    this.count = res.data.patientQueueList.count
                    this.signInList.map(item => {
                        item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                    })
                }
                // console.log("action", re.action);
                // console.log("data", JSON.stringify(res));
            }
        },
        updateTime() {
            var cd = new Date();
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            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_signIn{
    .signInTitle{
        height: 50px;
        background: #1A82BF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        color:#fff;
        font-size: 20px;
        font-weight: 600;
    }
    .signInMain{
        background: linear-gradient(0deg, #76ECEC, #479CD2);
        height: 1040px;
        
        
    }
    .signInMainLeft{
        width:65%;
        height: 980px;
        border-radius: 15px;
    }
    .signInMainLeftTitle{
        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{
            width:25%;
            text-align: center;
        }
    }
    .signInList{
        font-size: 36px;
        font-weight: 600;
        >div:nth-child(odd){
            background: #F9FDFF;
        }
        >div:nth-child(even){
            background: #CCEBFF;
        }
        >div:last-child{
            border-radius: 0 0 15px 15px;
        }
        .signInListOne{
            height:90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color:#1C6895;
            >p{
                width:25%;
                text-align: center;
            }
        }
    }
    .signInMainRight{
        width: 34%;
        height: 980px;
    }
    .signInMainRightTitle{
        height: 260px;
        border-radius: 15px 15px 0 0;
        background: #1A82BF;
        font-size: 120px;
        font-weight: 600;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .signInMainRightContent{
        background: #F9FDFF;
        height: 450px;
        text-align: center;
        font-weight: 600;
        color:#1C6895;
        box-sizing: border-box;
        font-size:90px;
        display:flex;
        align-items:center;
    }
    .signInMianRightBottom{
        height: 270px;
        background: #1A82BF;
        border-radius: 0 0 15px 15px;
        font-size: 90px;
        font-weight: 600;
        color:#fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .signInTip{
        color:#fff;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        align-items: center;
        height: 50px;
        background: linear-gradient(0deg, #42A9E7, #3686B9, #42A9E7);
        margin-top: 1px;
        padding-left:20px;
    }
}
#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>