Vue_New/src/xt_pages/sign/Contextowner.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>
                <div class="lineUpMain">
                    <div class="lineUpMainLeft">
                        <div class="lineUpMainLeftTitle">
                            <p style="width:10%">序号</p>
                            <p style="width:10%">姓名</p>
                            <p style="width:14%">透析号</p>
                            <p style="width:55%">透析时间</p>
                            
                        </div>
                    </div> 
                    <div class="lineUpList">
                        <div class="lineUpListOne" v-for="(item,index) in lineUpList" :key="index">
                            <p style="width:12%" > {{ index+1 }} </p>
                            <p style="width:14%">{{ getPatientName(item.patient_id)}}</p>
                            <p style="width:14%">{{ getDialysisNo(item.patient_id) }}</p>
                            <p style="width:55%">{{getContent(item.child) }}</p>
                        </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:55%">透析时间</p>
                        </div>
                        <div class="lineUpList">
                            <div class="lineUpListOne" v-for="(item,index) in lineUpList" :key="index">
                                <p style="width:12%" > {{ index+1 }} </p>
                                <p style="width:14%">{{ getPatientName(item.patient_id)}}</p>
                                <p style="width:14%">{{ getDialysisNo(item.patient_id) }}</p>
                                <p style="width:55%">{{getContent(item.child) }}</p>
                            </div>
                        </div>
                    </div> 
                    
                </div>
                
            </div>
             
        </div>
    </div>
</template>

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

            voice:true,
            a:1,
            newTimes:null,
            limit:6,
            page:1,
            total:0,
            patientList:[],
            deviceNumberList:[],
            schedule:[],
        }
    },
    computed: {
        websocket() {
            return this.$store.state.user.websocket;
        },
    },
    created(){
        this.getlist()
        if(sessionStorage.getItem('lineUpKey') != null){
            if(sessionStorage.getItem('lineUpKey') == 1){
                this.dialogTableVisible = true
            }
            sessionStorage.removeItem('lineUpKey')
            sessionStorage.removeItem('signInKey')
        }
        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() {
        if (this.websocket) {
            if (this.websocket.readyState == 1) {
                console.log('执行1')
                this.websocketMess();
            } else {
                setTimeout(() => {
                    console.log('执行2')
                    this.websocketMess();
                }, 1000);
            }
        } else {
            setTimeout(() => {
                if (this.websocket.readyState == 1) {
                    console.log('执行3')
                    this.websocketMess();
                } else {
                    setTimeout(() => {
                        console.log('执行4')
                        this.websocketMess();
                    }, 1000);
                }
            }, 1000);
        }
       
    },
    mounted(){
        
        this.timer = setInterval(() => {
            if(this.page < Math.ceil(this.count / 6)){
                console.log('执行',Math.ceil(this.count / 6),this.page)
                this.page++
                 this.getlist()
                setTimeout(() => {
                    this.websocketMess();
                }, 1000);
            }
            else{
                console.log('执行22223333')
                // this.page = 4
                const counts = this.deviceNumberList.length;
                console.log('sdfasdfdas',Math.ceil(counts / 6));
                
                if(this.page <= Math.ceil(counts / 6)){
                  console.log('执行444444444',this.page)
                  this.page ++
                }else{
                  console.log('执行55555555',this.page)
                  this.page = 1
                }
                // this.page++
                this.getlist()
                setTimeout(() => {
                    // this.websocketMess();
                    this.lineUpList
                }, 1000);
                
                
            }
            console.log('切换时间',this.queueConfig)
        }, 1000 * parseInt(this.queueConfig.qhsj));
        this.timerID = setInterval(() => {
            this.updateTime()
        }, 1000);
        this.newTimes = setInterval(() => {
            // this.reload()
            console.log('1222222333333333');
            sessionStorage.setItem('lineUpKey',1);
            window.location.reload()
        }, 1000 * 60 * 30);
    },
    beforeDestroy(){
        clearInterval(this.timer);// 清除定时器
        this.timer = null
        clearInterval(this.timerID);
        this.timerID = null;// 清除定时器
        let unObj = {
            cmd:'queue/unjoin',
            data:{type:2}
        }
        this.websocketSend(unObj)
    },
    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.onmessage = e => {
                let res = JSON.parse(e.data);
                // let res = re.data;
                console.log('res',res)
                
                    if(res.channel == 'queue/join'){
                        if(res.data.type == 2){
                            this.queueConfig = res.data.queueConfig
                            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 == 5 || item.end_time){
                        //         item.end_time = moment(item.end_time * 1000).format('HH:mm:ss')
                        //     }
                        // })
                    }else if(res.channel == 'patientCallInfo'){
                        console.log(999999999999,res.data)
                        let second = res.data.second
                        let newType = res.data.type
                    
                        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(() => {
                                let num = null
                                if(res.data.patientInfo.status == 2){
                                    num = parseInt(this.queueConfig.jzdcbbcs)
                                }else if(res.data.patientInfo.status == 3){
                                    num = parseInt(this.queueConfig.sjdcbbcs)
                                }
                                if(this.voiceNum < num){
                                    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,type:newType},
                                    };
                                    this.websocketSend(obj)
                                    clearInterval(this.voiceTime);
                                    this.voiceTime = null
                                }
                            },1000 * second)
                        }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 = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            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() {
            sessionStorage.setItem('lineUpKey',1);
            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;
            }
        },
        getDates(time){
            return moment(time * 1000).format('HH:mm:ss')
        },
        getlist(){
            var params = {
              limit:this.limit,
              page:this.page,
              start_time:"2023-07-03",
              end_time:"2023-07-09"
            }
          getContextScheduleList(params).then(response=>{
             if(response.data.state ==1){
               var schedule = response.data.data.schedule
               
               this.lineUpList = schedule
               var list = response.data.data.list
               console.log("list232322323",list)
               for(let i=0;i<schedule.length;i++){
                  if(schedule[i].mode_id ==1){
                    schedule[i].mode_name = "HD"
                  }
                  if(schedule[i].mode_id ==2){
                    schedule[i].mode_name = "HDF"
                  }
                  if(schedule[i].mode_id ==3){
                    schedule[i].mode_name = "HD+HP"
                  }

                  if(schedule[i].mode_id ==4){
                    schedule[i].mode_name = "HP"
                  }

                  if(schedule[i].mode_id ==5){
                    schedule[i].mode_name = "HF"
                  }

                  
                  if(schedule[i].mode_id ==6){
                    schedule[i].mode_name = "SCUF"
                  }

                  if(schedule[i].mode_id ==7){
                    schedule[i].mode_name = "IUF"
                  }

                  if(schedule[i].mode_id ==8){
                    schedule[i].mode_name = "HFHD"
                  }

                  if(schedule[i].mode_id ==9){
                    schedule[i].mode_name = "HFHD+HP"
                  }
                  
                  if(schedule[i].mode_id ==10){
                    schedule[i].mode_name = "PHF"
                  }

                  if(schedule[i].mode_id ==11){
                    schedule[i].mode_name = "HFR"
                  }

                  if(schedule[i].mode_id ==12){
                    schedule[i].mode_name = "HDF+HP"
                  }

                  if(schedule[i].mode_id ==13){
                    schedule[i].mode_name = "CRRT"
                  }

                  if(schedule[i].mode_id ==14){
                    schedule[i].mode_name = "腹水回输"
                  }

                  if(schedule[i].mode_id ==15){
                    schedule[i].mode_name = "IUF+HD"
                  }

                  if(schedule[i].mode_id ==19){
                    schedule[i].mode_name = "IUF+HD"
                  }

                  if(schedule[i].mode_id ==20){
                    schedule[i].mode_name = "UF"
                  }
                  if(schedule[i].mode_id ==21){
                    schedule[i].mode_name = "HD+"
                  }

                  if(schedule[i].mode_id ==22){
                    schedule[i].mode_name = "血浆胆红素吸附+HDF"
                  }

                  if(schedule[i].mode_id ==23){
                    schedule[i].mode_name = "血浆胆红素吸附"
                  }

                  if(schedule[i].mode_id ==24){
                    schedule[i].mode_name = "I-HDF"
                  }

                  if(schedule[i].mode_id ==25){
                    schedule[i].mode_name = "HD高通"
                  }

                  if(schedule[i].mode_id ==26){
                    schedule[i].mode_name = "CVVH"
                  }

                  if(schedule[i].mode_id ==27){
                    schedule[i].mode_name = "CVVHD"
                  }

                  if(schedule[i].mode_id ==28){
                    schedule[i].mode_name = "CVVHDF"
                  }
                  
                  if(schedule[i].mode_id ==29){
                    schedule[i].mode_name = "PE"
                  }

                  if(schedule[i].mode_id ==30){
                    schedule[i].mode_name = "血浆胆红素吸附+HP"
                  }

                  if(schedule[i].mode_id ==31){
                    schedule[i].mode_name = "HPD"
                  }

                  if(schedule[i].mode_id ==32){
                    schedule[i].mode_name = "HDP"
                  }





                  if(schedule[i].schedule_week ==1){
                    schedule[i].schedule_week_name = "周一"
                  }
                  if(schedule[i].schedule_week ==2){
                    schedule[i].schedule_week_name = "周二"
                  }
                  if(schedule[i].schedule_week ==3){
                    schedule[i].schedule_week_name = "周三"
                  }
                  if(schedule[i].schedule_week ==4){
                    schedule[i].schedule_week_name = "周四"
                  }
                  if(schedule[i].schedule_week ==5){
                    schedule[i].schedule_week_name = "周五"
                  }
                  if(schedule[i].schedule_week ==6){
                    schedule[i].schedule_week_name = "周六"
                  }
                  if(schedule[i].schedule_week ==7){
                    schedule[i].schedule_week_name = "周日"
                  }

                  if(schedule[i].schedule_type ==1){
                    schedule[i].schedule_type_name = "上午"
                  }
                  if(schedule[i].schedule_type ==2){
                    schedule[i].schedule_type_name = "下午"
                  }
                  if(schedule[i].schedule_type ==3){
                    schedule[i].schedule_type_name = "晚上"
                  }
                
                  schedule[i].child = []
                 for(let j=0;j<list.length;j++){
                    
                    if(schedule[i].patient_id == list[j].patient_id){
                       schedule[i].child.push(list[j])
                    }
                 }
               } 
               console.log("schedule",schedule)
               this.schedule = schedule
             
               var total = response.data.data.total
               console.log("total+23323223",total)
               var patients =  response.data.data.patients
               console.log("patinets",patients)
               this.patientList = patients

               this.deviceNumberList =  response.data.data.devicenumber
              //  this.count = response.data.data.devicenumber 

             }
          })  
        },
        getPatientName(patient_id){
          var name = ""
          for(let i=0;i<this.patientList.length;i++){
            if(patient_id == this.patientList[i].id){
               name = this.patientList[i].name
            }
          }
          return name
        },
        getDialysisNo(patient_id){
          var dialysis_no = ""
          for(let i=0;i<this.patientList.length;i++){
            if(patient_id == this.patientList[i].id){
                dialysis_no = this.patientList[i].dialysis_no
            }
          }
          return dialysis_no
        },
        getContent(schedule){
          var str = ""
          if(schedule!=null && schedule.length >0){
            for(let i=0;i<schedule.length;i++){
                schedule[i].bed_number = this.getNumberName(schedule[i].bed_id)
                if(schedule[i].mode_id ==1){
                    schedule[i].mode_name = "HD"
                  }
                  if(schedule[i].mode_id ==2){
                    schedule[i].mode_name = "HDF"
                  }
                  if(schedule[i].mode_id ==3){
                    schedule[i].mode_name = "HD+HP"
                  }

                  if(schedule[i].mode_id ==4){
                    schedule[i].mode_name = "HP"
                  }

                  if(schedule[i].mode_id ==5){
                    schedule[i].mode_name = "HF"
                  }

                  
                  if(schedule[i].mode_id ==6){
                    schedule[i].mode_name = "SCUF"
                  }

                  if(schedule[i].mode_id ==7){
                    schedule[i].mode_name = "IUF"
                  }

                  if(schedule[i].mode_id ==8){
                    schedule[i].mode_name = "HFHD"
                  }

                  if(schedule[i].mode_id ==9){
                    schedule[i].mode_name = "HFHD+HP"
                  }
                  
                  if(schedule[i].mode_id ==10){
                    schedule[i].mode_name = "PHF"
                  }

                  if(schedule[i].mode_id ==11){
                    schedule[i].mode_name = "HFR"
                  }

                  if(schedule[i].mode_id ==12){
                    schedule[i].mode_name = "HDF+HP"
                  }

                  if(schedule[i].mode_id ==13){
                    schedule[i].mode_name = "CRRT"
                  }

                  if(schedule[i].mode_id ==14){
                    schedule[i].mode_name = "腹水回输"
                  }

                  if(schedule[i].mode_id ==15){
                    schedule[i].mode_name = "IUF+HD"
                  }

                  if(schedule[i].mode_id ==19){
                    schedule[i].mode_name = "IUF+HD"
                  }

                  if(schedule[i].mode_id ==20){
                    schedule[i].mode_name = "UF"
                  }
                  if(schedule[i].mode_id ==21){
                    schedule[i].mode_name = "HD+"
                  }

                  if(schedule[i].mode_id ==22){
                    schedule[i].mode_name = "血浆胆红素吸附+HDF"
                  }

                  if(schedule[i].mode_id ==23){
                    schedule[i].mode_name = "血浆胆红素吸附"
                  }

                  if(schedule[i].mode_id ==24){
                    schedule[i].mode_name = "I-HDF"
                  }

                  if(schedule[i].mode_id ==25){
                    schedule[i].mode_name = "HD高通"
                  }

                  if(schedule[i].mode_id ==26){
                    schedule[i].mode_name = "CVVH"
                  }

                  if(schedule[i].mode_id ==27){
                    schedule[i].mode_name = "CVVHD"
                  }

                  if(schedule[i].mode_id ==28){
                    schedule[i].mode_name = "CVVHDF"
                  }
                  
                  if(schedule[i].mode_id ==29){
                    schedule[i].mode_name = "PE"
                  }

                  if(schedule[i].mode_id ==30){
                    schedule[i].mode_name = "血浆胆红素吸附+HP"
                  }

                  if(schedule[i].mode_id ==31){
                    schedule[i].mode_name = "HPD"
                  }

                  if(schedule[i].mode_id ==32){
                    schedule[i].mode_name = "HDP"
                  }


                  if(schedule[i].schedule_week ==1){
                    schedule[i].schedule_week_name = "周一"
                  }
                  if(schedule[i].schedule_week ==2){
                    schedule[i].schedule_week_name = "周二"
                  }
                  if(schedule[i].schedule_week ==3){
                    schedule[i].schedule_week_name = "周三"
                  }
                  if(schedule[i].schedule_week ==4){
                    schedule[i].schedule_week_name = "周四"
                  }
                  if(schedule[i].schedule_week ==5){
                    schedule[i].schedule_week_name = "周五"
                  }
                  if(schedule[i].schedule_week ==6){
                    schedule[i].schedule_week_name = "周六"
                  }
                  if(schedule[i].schedule_week ==7){
                    schedule[i].schedule_week_name = "周日"
                  }

                  if(schedule[i].schedule_type ==1){
                    schedule[i].schedule_type_name = "上午"
                  }
                  if(schedule[i].schedule_type ==2){
                    schedule[i].schedule_type_name = "下午"
                  }
                  if(schedule[i].schedule_type ==3){
                    schedule[i].schedule_type_name = "晚上"
                  }
                
              str += " "+this.getTime(schedule[i].schedule_date)+" "+schedule[i].schedule_week_name + " " +schedule[i].schedule_type_name +" " + schedule[i].mode_name+"," 
            }
          }
          return str
        },
        getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{m}-{d}')
         }
      },
      getNumberName(id){
         var number = ""
         for(let i=0;i<this.deviceNumberList.length;i++){
           if(id == this.deviceNumberList[i].bed_id){
             number = this.deviceNumberList[i].bed_number
           }
         }
         return number
      }
    }
}
</script>

<style lang="scss" scoped>
.main-contain{
    height: 100%;
}
.page_lineUp{
    height: 100%;
    .lineUpTitle{
        height: 4vh;
        background: #1A82BF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        color:#fff;
        font-size: 2vh;
        font-weight: 600;
    }
    .lineUpMain{
        background: linear-gradient(0deg, #76ECEC, #479CD2);
        height: 95%;
        padding:10px;
    }
    .lineUpMainLeft{
        height: 8%;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        
    }
    .lineUpMainLeftTitle{
        // display: flex;
        // justify-content: space-between;
        align-items: center;
        color:#fff;
        font-size: 4vh;
        font-weight: 600;
        height:7vh;
        line-height: 7vh;
        background: #1A82BF;
        border-radius: 15px 15px 0 0;
        >p{
            display: inline-block;
            text-align: center;
        }
    }
    .lineUpList{
        font-size: 3vh;
        font-weight: 600;
        flex: 1;
        >div:nth-child(odd){
            background: #F9FDFF;
        }
        >div:nth-child(even){
            background: #CCEBFF;
        }
        >div:last-child{
            border-radius: 0 0 15px 15px;
        }
        .lineUpListOne{
            height:16%;
            padding: 0.5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color:#1C6895;
            >p{
                width:25%;
                text-align: center;
                display: inline-block;
                padding: 5px 0px;
            }
        }
    }
    .callingBox{
        height: 39%;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .callingBoxLeft{
            width: 49.5%;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }
        .callingBoxLeft1{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }
        .callingTitle{
            width: 10vh;
            height: 100%;
            border-radius: 15px 0 0 15px;
            font-size: 5vh;
            font-weight:600;
            text-align: center;
            color: #fff;
            background: #1A82BF;
            display: flex;
            align-items: center;
            margin-right: 5px;
        }
        .newCallingTitle{
            background: #1aa680;
        }
        .callingTop{
            height: 49.5%;
            border-radius: 0 15px 0 0;
            background: #F9FDFF;
            display: flex;
            justify-content: space-between;
            .callingTopTip{
                width: 10vh;
                height: 100%;
                color: #fff;
                font-size: 3vh;
                font-weight: 600;
                background: #1A82BF;
                display: flex;
                align-items: center;
            }
            .newCallingTopTip{
                background: #1aa680;
            }
            .callingContent{
                flex: 1;
                display: flex;
                flex-direction: column;
                font-size: 4vh;
                color:#1C6895;
                font-weight: 600;
                padding-left: 20px;
                justify-content: space-around;
                >p{
                    width:100%;
                    text-align: left;
                    line-height: 50px;
                }
                div>:first-child{
                    margin-bottom: 10px;
                }
            }
            .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;
  height: 100%;
}
#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>