Vue_New/src/xt_pages/sign/components/beforeDialysisCalling.vue

<template>
    <div class="page_beforeDialysisCalling">
        <div class="cell clearfix">
            <label class="title"><span class="name">叫号状态</span> : </label>
            <div class="time ">
                <ul class="">
                    <li v-for="option in patient_state" :key="option.value" @click="handleStateChange(option.value)" :class="patientStateVal == option.value ? 'active' : ''" >{{option.label}}
                    </li>
                </ul>
            </div>
        </div>
        <div style="display:flex;justify-content: space-between;">
            <div class="callingArea">
                <waiting-called v-if="patientStateVal == 0" :waitingCalled='waitingCalledAm' ></waiting-called>
                <waiting-called v-if="patientStateVal == 1" :waitingCalled='waitingCalledPm' ></waiting-called>
                <called v-if="patientStateVal == 2" :called="called"></called>
            </div>
            <div class="nowCalling" v-if="patientStateVal == 0 || patientStateVal == 1">
                <p class="nowCallingTitle">当前叫号</p>
                <p class="nowCallingName">{{ fisrtQueueInfo ? fisrtQueueInfo.patient_name : '' }}</p>
                <p class="nowCallingTime">签到时间：{{ fisrtQueueInfo ? fisrtQueueInfo.create_time : '' }}</p>
                <el-button type="primary" @click="call(fisrtQueueInfo && fisrtQueueInfo.patient_id ? fisrtQueueInfo.patient_id : '')" style="margin-left:0;margin: 30px 0 20px 0;">&ensp;叫号&ensp;</el-button>
                <!-- <el-button style="margin: 0px 0 20px 0;" @click="pass(fisrtQueueInfo.patient_id)">&ensp;过号&ensp;</el-button> -->
                <el-button style="margin:0 auto;" @click="next(fisrtQueueInfo && fisrtQueueInfo.patient_id ? fisrtQueueInfo.patient_id : '',fisrtQueueInfo && fisrtQueueInfo.schedule_type ? fisrtQueueInfo.schedule_type : '')">下一位</el-button>
                <!-- <el-button style="margin:0 auto;" @click="nextFive(fisrtQueueInfo && fisrtQueueInfo.patient_id ? fisrtQueueInfo.patient_id : '',fisrtQueueInfo && fisrtQueueInfo.schedule_type ? fisrtQueueInfo.schedule_type : '')">下五位</el-button> -->
            </div>
        </div>
    </div>
</template>


<script>
const moment = require('moment')
import axios from 'axios'
import waitingCalled from './waitingCalled'
import called from './called'
export default {
    components:{
        waitingCalled,
        called
    },
    data(){
        return{
            patient_state:[
                {value: 0,label: '上午待叫号'},
                {value: 1,label: '下午待叫号'},
                {value: 2,label: '已叫号'},
            ],
            patientStateVal: 0,
            waitingCalled:[],
            called:[],
            fisrtQueueInfo:{},
            timer:null,

            waitingCalledAm:[],
            waitingCalledPm:[],
            newFisrtQueueInfo:{}

        }
    },
    computed: {
        websocket() {
            return this.$store.state.user.websocket;
        },
    },
    created(){
        this.initData = {
            cmd: "queue/join",
            data: {type:3,page:0,size:0},
        };
        this.websocketSend(this.initData)
    },
    beforeMount() {
        if (this.websocket) {
            if (this.websocket.readyState == 1) {
                this.websocketMess();
            } else {
                setTimeout(() => {
                    this.websocketMess();
                }, 1000);
            }
        } else {
            setTimeout(() => {
                if (this.websocket.readyState == 1) {
                    this.websocketMess();
                } else {
                    setTimeout(() => {
                        this.websocketMess();
                    }, 1000);
                }
            }, 1000);
        }
    },
    mounted(){
        // let obj = {
        //     cmd: "queue/join",
        //     data: {type:3,page:0,size:0},
        // };
        // this.websocketSend(obj)
    },
    beforeDestroy(){

        let unObj = {
            cmd: "queue/unjoin",
            data: {type:3},
        };
        this.websocketSend(unObj)

        let unObj1 = {
            cmd: "queue/unjoin",
            data: {type:4},
        };
        this.websocketSend(unObj1)
    },
    methods:{
        websocketSend(data) {
            try {
                this.websocket.send(JSON.stringify(data))

            } catch (error) {
                this.showError = true;
                this.showIndex = 4;
                this.errorInfo = "网络异常，请稍后退出重试！";
            }
        },
        websocketMess() {
            console.log('执行',this.websocket)
            this.websocket.onmessage = e => {
                let res = JSON.parse(e.data);
                // let res = re.data;
                console.log('res3333ssss333333',res)

                    if(res.channel == 'queue/join'){
                        if(res.data.type == 3){
                            let fisrtQueueInfo = []
                            this.newFisrtQueueInfo = res.data.fisrtQueueInfo
                            if(res.data.fisrtQueueInfo != null){
                                if(this.patientStateVal == 0){
                                    fisrtQueueInfo = res.data.fisrtQueueInfo.morning
                                    if(fisrtQueueInfo != null){
                                        if(fisrtQueueInfo.create_time){
                                            fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                                        }
                                    }
                                }else if(this.patientStateVal == 1){
                                    fisrtQueueInfo = res.data.fisrtQueueInfo.afternoon
                                    if(fisrtQueueInfo != null){
                                        if(fisrtQueueInfo.create_time){
                                            fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                                        }
                                    }
                                }
                            }
                            this.fisrtQueueInfo = fisrtQueueInfo
                            let arr = res.data.patientQueueList.data
                            // let waitingCalledArr = []
                            let waitingCalledAm = []
                            let waitingCalledPm = []
                            let calledArr = []
                            arr.map(item => {
                                if(item.status == 1){
                                    item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                    // waitingCalledArr.push(item)
                                    if(item.schedule_type == 1){
                                        waitingCalledAm.push(item)
                                    }else if(item.schedule_type == 2){
                                        waitingCalledPm.push(item)
                                    }
                                }else if(item.status == 2){
                                    item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                    calledArr.push(item)
                                }
                            })
                            // this.waitingCalled = waitingCalledArr
                            this.waitingCalledAm = waitingCalledAm
                            this.waitingCalledPm = waitingCalledPm
                            // this.called = calledArr
                        }
                        if(res.data.type == 4){
                            let arr = res.data.patientQueueList.data
                            let calledArr = []
                            arr.map(item => {
                                if(item.status == 2){
                                    item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                    calledArr.push(item)
                                }
                            })
                            this.called = calledArr
                        }
                    }else if(res.channel == 'allQueueList'){
                        let arr = res.data.queue_list.data
                        // let waitingCalledArr = []
                        let waitingCalledAm = []
                        let waitingCalledPm = []
                        let calledArr = []
                        arr.map(item => {
                            if(item.status == 1){
                                item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                // waitingCalledArr.push(item)
                                if(item.schedule_type == 1){
                                    waitingCalledAm.push(item)
                                }else if(item.schedule_type == 2){
                                    waitingCalledPm.push(item)
                                }
                            }else if(item.status == 2){
                                item.create_time = moment(item.create_time * 1000).format('HH:mm:ss')
                                calledArr.push(item)
                            }
                        })
                        // this.waitingCalled = waitingCalledArr
                        this.waitingCalledAm = waitingCalledAm
                        this.waitingCalledPm = waitingCalledPm
                        // this.called = calledArr
                    }else if(res.channel == 'patientCallInfo'){
                        res.data.patientInfo.create_time = moment(parseInt(res.data.patientInfo.create_time) * 1000).format('HH:mm')
                        this.fisrtQueueInfo = res.data.patientInfo
                        this.newFisrtQueueInfo = res.data.patientInfo
                    }else if(res.channel == 'fisrtQueueInfo'){
                        let fisrtQueueInfo = []
                        this.newFisrtQueueInfo = res.data.patientInfo
                        if(res.data.patientInfo != null){
                            if(this.patientStateVal == 0){
                                fisrtQueueInfo = res.data.patientInfo.morning
                                if(fisrtQueueInfo != null){
                                    if(fisrtQueueInfo.create_time){
                                        fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                                    }
                                }
                            }else if(this.patientStateVal == 1){
                                fisrtQueueInfo = res.data.patientInfo.afternoon
                                if(fisrtQueueInfo != null){
                                    if(fisrtQueueInfo.create_time){
                                        fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                                    }
                                }
                            }
                        }
                        this.fisrtQueueInfo = fisrtQueueInfo
                    }

            }
        },
        handleStateChange: function(index) {
            this.patientStateVal = index
            // if(index == 0){
            //     let arr = this.waitingCalledAm
            //     let newArr = []
            //     arr.map(item => {
            //         if(item.schedule_type == 1){
            //             newArr.push(item)
            //         }
            //     })
            //     this.waitingCalledAm = newArr
            // }else if(index == 1){
            //     let arr = this.waitingCalledPm
            //     let newArr = []
            //     arr.map(item => {
            //         if(item.schedule_type == 2){
            //             newArr.push(item)
            //         }
            //     })
            //     this.waitingCalledPm = newArr
            // }
            if(index == 2){
                let obj = {
                    cmd: "queue/join",
                    data: {type:4,page:0,size:0},
                };
                this.websocketSend(obj)
            }
            let fisrtQueueInfo = []
            if(this.newFisrtQueueInfo != null){
                if(this.patientStateVal == 0){
                    fisrtQueueInfo = this.newFisrtQueueInfo.morning
                    if(fisrtQueueInfo.create_time){
                        fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                    }
                }else if(this.patientStateVal == 1){
                    fisrtQueueInfo = this.newFisrtQueueInfo.afternoon
                    if(fisrtQueueInfo.create_time){
                        fisrtQueueInfo.create_time = moment(parseInt(fisrtQueueInfo.create_time) * 1000).format('HH:mm')
                    }
                }
            }
            this.fisrtQueueInfo = fisrtQueueInfo
        },
        call(patient_id){
            if(patient_id == undefined || patient_id == ""){
                this.$message.error('已经是最后一位了');
                return
            }
            console.log('patient_id',patient_id)
            let org_id =  parseInt(sessionStorage.getItem("org_id"));
            let admin_user_id = parseInt(sessionStorage.getItem("admin_user_id"));
            axios.get('/api/index/callpatient?org_id=' + org_id + '&patient_id=' + patient_id + '&admin_user_id=' + admin_user_id).then(res => {
                console.log(res)
                // let patientArr = res.data.queue_list.data
                // this.patientArr = patientArr
                // this.$emit('child-event',this.patientArr)
                if(res.data.code == 200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        next(patient_id){
            if(patient_id == undefined || patient_id == ""){
                this.$message.error('已经是最后一位了');
                return
            }
            let schedule_type = null
            if(this.patientStateVal == 0){
                schedule_type = 1
            }else if(this.patientStateVal == 1){
                schedule_type = 2
            }
            console.log('patient_id',patient_id)
            let org_id =  parseInt(sessionStorage.getItem("org_id"));
            let admin_user_id = parseInt(sessionStorage.getItem("admin_user_id"));
            axios.get('/api/index/nextcall?org_id=' + org_id + '&patient_id=' + patient_id + '&admin_user_id=' + admin_user_id + '&schedule_type=' + schedule_type).then(res => {
                console.log(res)
                // let patientArr = res.data.queue_list.data
                // this.patientArr = patientArr
                // this.$emit('child-event',this.patientArr)
                if(res.data.data.patientInfo == null){
                    this.$message.error('已经是最后一位了');
                    return
                }
                if(res.data.code == 200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        nextFive(patient_id){
            if(patient_id == undefined || patient_id == ""){
                this.$message.error('已经是最后一位了');
                return
            }
            let schedule_type = null
            if(this.patientStateVal == 0){
                schedule_type = 1
            }else if(this.patientStateVal == 1){
                schedule_type = 2
            }
            console.log('patient_id',patient_id)
            let org_id =  parseInt(sessionStorage.getItem("org_id"));
            let admin_user_id = parseInt(sessionStorage.getItem("admin_user_id"));
            axios.get('/api/index/nextcall?org_id=' + org_id + '&patient_id=' + patient_id + '&admin_user_id=' + admin_user_id + '&schedule_type=' + schedule_type + '&num=5').then(res => {
                console.log(res)
                // let patientArr = res.data.queue_list.data
                // this.patientArr = patientArr
                // this.$emit('child-event',this.patientArr)
                if(res.data.data.patientInfo == null){
                    this.$message.error('已经是最后一位了');
                    return
                }
                if(res.data.code == 200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        pass(patient_id){
            console.log('patient_id',patient_id)
            let org_id =  parseInt(sessionStorage.getItem("org_id"));
            let admin_user_id = parseInt(sessionStorage.getItem("admin_user_id"));
            axios.get('/api/index/passcall?org_id=' + org_id + '&patient_id=' + patient_id + '&admin_user_id=' + admin_user_id).then(res => {
                console.log(res)
                // let patientArr = res.data.queue_list.data
                // this.patientArr = patientArr
                // this.$emit('child-event',this.patientArr)
                if(res.data.code == 200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },

    }
}
</script>

<style lang="scss" scoped>
.callingArea{
    display: flex;
    flex-wrap: wrap;
    width: 88%;
    // @media only screen and (max-width: 1340px) {
    //     width:750px;
    // }

    // @media only screen and (min-width: 415px) and (max-width: 767px) {
    // }
}
.nowCalling{
    height: 313px;
    border: 1px solid #e5e5ee;
    // flex: 1;
    width: 14%;
    text-align: center;
    .nowCallingTitle{
        font-size: 20px;
        font-weight: 600;
        margin-top: 20px;
        text-align: center;
    }
    .nowCallingName{
        color: #338AFB;
        font-size: 18px;
        margin-top: 10px;
        font-weight: 600;
    }
    .nowCallingTime{
        font-size: 16px;
        margin-top: 30px;
    }
}
</style>