<template>
    <div class="mmtt111" @click="startAudio">
        <!-- <span @click="aa1" style="font-size:36px;color:#fff;position:relative;cursor: pointer;">1111</span> -->
        <div v-if="!isShow">
            <a-form :selfUpdate="true" :form="formScreen" class="formDiv" @submit="handleSubmit">
                <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="口令">
                    <a-input type="password" id='inputId' v-focus="true" ref="id" v-decorator="['passowrd',{ rules: [{ required: true, message: '请输入口令' }] }]" onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" :readonly="true" autocomplete="new-password" autoComplete="new-password" placeholder="请输入口令" />
                </a-form-item>
                <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                    <a-button type="primary" html-type="submit">
                        确定
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div v-else>
            <!-- <div> -->
            <div class="static" v-if="!imgCarouselShow">
                <div class="s_left">
					 <!-- @click="test" -->
                    <h4 class="f24 cf s_title fwb">交付中心实时数据
                        <!-- <span @click="aa1">1111</span> <span @click="aa2">2222</span> -->
                        <div class="f14 pr">
                            <!-- <span>昨日18:15-当日18:15</span> -->
                            <!-- <span class="right-h5">延误 {{delayNum.delay18}} 逾期 {{delayNum.delay36}}</span> -->
                        </div>
                    </h4>
                    <div class="tth" style="margin-top:12px !important;position:relative;">
                        <div style="display:table-row;font-weight:500">
                            <div class="ttd tc1 fwb" style="" @click="test">日排名</div>
                            <div class="ttd tc2 fwb" style="">姓名</div>
                            <!-- <div class="ttd tc7" style=""></div> -->
                            <!-- @click="ani" -->
                            <div class="ttd tc3 fwb" style="">简历数</div>
                            <!-- <div class="ttd">已处理</div> -->
                            <!-- <div class="ttd">约面数</div> -->
                            <div class="ttd tc4 fwb" style=""><span>约面丨到面</span>丨<span>通过</span></div>
                            <!-- @click="playAudio1" -->
                            <!-- <div class="ttd" @click="playAudio2">通过数</div> -->
                            <div class="ttd  tc5 fwb" style="">入职</div>
                            <!-- @click="aaa" -->
                            <div class="ttd tc6 fwb">转化丨漏斗</div>
                            <!-- @click="aaa" -->
                        </div>
                    </div>
                    <a-carousel effect="scrollx" ref="welcome" autoplay dotsClass="dotClass" :autoplaySpeed="autoSpeed" :speed="1000" :pauseOnHover="false" v-trigger>
                        <div v-for="(item1, index1) in array" v-bind:key="index1">
                            <div v-for="(item, index) in item1" v-bind:key="index">
                                <div class="tth" style="margin-top:48px;position:relative;margin-top: 0 !important;">
                                    <div style="display:table-row;font-weight:500">
                                        <div class="ttd tc1" style="">{{index1 * pageSize + index + 1}}</div>
                                        <div class="ttd tc2 " :class="showaliasName_curr == item.aliasName ?'numeAni' : ''" style="">{{item.aliasName}}</div>
                                        <!-- <div class="ttd tc7"></div> -->
                                        <div class="ttd tc3">{{item.resumeNum}}</div>
                                        <div class="ttd tc4" style="">{{item.signUps}} | <span :class="daomianStyle == item.aliasName ?'bulingbuling' : ''">{{item.arrived}}</span> | <span :class="tongguoStyle == item.aliasName ?'bulingbuling' : ''">{{item.passed}}</span></span></div>
                                        <div class="ttd tc5" style=""><span :class="ruzhiStyle == item.aliasName ?'bulingbuling' : ''">{{item.entry}}/*</span></span>
                                        <!-- /{{parseFloat(item.entryNumMonthNum).toFixed(1).replace(/(.0)$/,'')}} -->
                                    </div>
                                        <div class="ttd tc6">
											<span style="display: inline-block;width:70px;text-align: right;">{{Number(item.transferRatio * 100).toFixed(0)}}</span>丨<span style="display: inline-block;width:70px;text-align: left;">{{item.funnel}}</span></div>
											<!-- {{Number(item.funnel*100).toFixed(0)}} -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-carousel>
                    <!-- </div> -->
                    <!--  <div class="f14 cf tl" style="margin-left: 146px;margin-top: 10px;">
                            （昨天 18:30 - 今天 18:30  招聘数据）
                    </div> -->
                </div>
                <div class="clb"></div>
                <div class=" fullPage" v-if="ifani">
                    <div class="bgppp">
                    </div>
                    <div class="animate__animated animate__zoomInDown animate_h animate__infinite animate__zoomOutUp">
                        {{showaliasName}}
						<!-- 墨竹/王泽流 -->
                        <!-- 12 -->
                    </div>
                </div>
            </div>
           <!--  <div class="imgPlay" @click="hideImg" v-if="imgCarouselShow">
                <a-carousel autoplay effect="fade" :autoplaySpeed="5000" :speed="1000" :dots="false" :pauseOnHover="false">
                    <div class="tcImg" v-for="(image, index) in slideImages">
                        <div class="pr">
                            <h3 class="imgText" v-text="image.aliasName">1</h3>
                            <img :src="image.url" class="mw100" alt="" />
                        </div>
                    </div>
                </a-carousel>
            </div> -->
        </div>
		<audio id="myaudio" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav"></audio>
    </div>
</template>
<script>
import { axios, doAsyncHttpRequest } from '@/utils/request';
import { isNotEmptyCheck, timeagoOfDateStr } from '@/utils/commonUtil';
import {
 screen
} from "../../api/screen";
// import { serverAddress, numFormat3 } from '@/utils/global';
// import store from '@/store';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};
const formTailLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 8, offset: 6 },
};
var timeClear;
var timer //定时器
var flag = false;
var timeStamp = 0;
var timeStamp2 = 0;

var tempJson = { "classify": 0, "message": [] }
export default {
    directives: {
        focus: {
            inserted: function(el, { value }) {
                console.log(el, { value })
                if (value) {
                    el.focus();
                }
            }
        },
		trigger:{
				inserted(el,binging){
					el.click()
				}
			}
    },

    data() {
        return {
            recordTodayList: [],
            delayNum: { delay18: 0, delay36: 0 },
            formLayout: 'horizontal',
            formScreen: this.$form.createForm(this),
            isShow: true,
            formItemLayout,
            formTailLayout,
            passowrd: '',
            // audioUrl1: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/money.wav', //声音文件
            // audioUrl2: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/mario.wav', //声音文件
            // audioUrl3: 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav', //声音文件
            //websocket参数===================start
            // wsUri: 'ws://127.0.0.1:9004/webSocket/' + this.$route.query.id,
            // wsUri: 'ws://127.0.0.1:9004/webSocket/',
            isWebSocket: false, //判断是否链接成功！
            reconnect: 0,
            ifani: false,
            showaliasName: '',
            showaliasName_curr: '专员B',
            nameArray: [],
            daomianStyle: '',
            tongguoStyle: '',
            ruzhiStyle: '',
            array: [],
            isAuto: true,
            autoSpeed: 10000,
            pageSize: 10,
            // pageSize: 5,

            imgCarouselShow: false,
            // [{"allotNum":1,"disposeNum":0,"entryNumMonthNum":15,"entry":0,"funnelRate7":"2.03","interviewNum":0,"passed":0,"interviewPassPercent":"3.23","arrived":1,"showScreen":0,"id":236530,"aliasName":"百合/刘月霞"}

            //websocket参数===================end
            //所有店铺信息
            storeImages: [],
            //轮播的店铺图片
            slideImages: [],
            slideImgNum: 10,
        }
    },
    mounted() {
        var that = this;
		
		

        // document.getElementById('inputId').focus();
        // this.$refs.id.focus();
        // document.querySelector('html').setAttribute('style', 'background-image: url(http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/screen_bg.png);background-size: 100% 100%;min-height:100vh;');
        // // overflow:hidden;
        // document.querySelector('body').setAttribute('style', 'background: none');
	
		that.initWebSocket();
		that.initClock();
		
	// 	if (that.isShow) {
		    setInterval(() => that.websocketHeartCheck(), 30000); //每隔1分钟刷新一次
	// 	}
	
		// that.getData()
	   
	    // timer = setInterval(() => that.getData(), 60000*5); //每隔5分钟刷新一次


    },
	
	
    destroyed() {
        // this.websock.close() //离开路由之后断开websocket连接
    },
    beforeDestroy() { //在组件生命周期结束的时候销毁。
        var that = this;
		if(timer){
			clearInterval(timer);
		}
        document.querySelector('html').removeAttribute('style', '')
        document.querySelector('body').removeAttribute('style', '')
    },

    methods: {
		startAudio(){
			var that = this;
			let audioPlay = document.getElementById('myaudio')
			
			audioPlay.play()
			
			setTimeout(() => {
			  audioPlay.pause()
			  audioPlay.load()
			}, 1000)
			
			
			// setTimeout(() => {
			//  that.playAudio3();
			// }, 5000)
		},
		
		
		// async getData(){
		// 	var that = this;
		// 	try {
		// 	  const data = await screen();
		// 	  console.log(data);
		// 	  if (data.status === 200) {
		// 		  that.array = [];
		// 		  for (var i = 0; i < data.data.data.list.length; i += that.pageSize) {
		// 		      this.array.push(data.data.data.list.slice(i, i + that.pageSize));
		// 		  }
		// 	  } else {
		// 	    console.log(1);
		// 	  }
		// 	} catch (error) {
		// 	  console.log(error);
		// 	  this.$message.warning(error.message);
		// 	}
			
		// },
		
        showTargetResume(item) {
          /*if(item.targetResume - item.monthentry <= 0) {
            return "（★）";
          }
          return "（" + new Number(item.targetResume - item.monthentry).toFixed(1) + "）";*/
          return "（" + item.monthentry + "/" + item.targetResume + "）";
        },
        ani() { //点击专员
            var that = this;

            console.log(that.nameArray);
            return new Promise((resolve, reject) => {
                // alert(that.showaliasName);
                if (that.showaliasName != '' && flag) {
                    this.ifani = true;
                    that.playAudio3();
                    setTimeout(function() {
                        that.ifani = false;
                        flag = false;
                        resolve();
                    }, 15000)
                }
            })
        },
        func() {
            var that = this;
			console.log(this.nameArray);
			// debugger
			
			
            if (this.nameArray[0].type == '1') {
                that.showaliasName_curr = this.nameArray[0].aliasName
                that.daomianStyle = this.nameArray[0].aliasName;
				
				console.log(that.showaliasName_curr)
				console.log( that.daomianStyle)
				
                that.playAudio1();
                let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
                setTimeout(function() {
                    that.autoSpeed = 10000;
                    that.$refs.welcome.goTo(pageInt, true);
                }, 0);
                setTimeout(function() {
                    that.showaliasName_curr = '';
                    that.daomianStyle = '';
                    // console.log(JSON.stringify(that.nameArray));
                    that.nameArray.shift();
                    if (that.nameArray.length > 0) {
                        that.func();
                    } else {
                        that.autoSpeed = 10000;
						 that.$refs.welcome.goTo(pageInt, true);
                    }
                }, 10000)

            } else if (this.nameArray[0].type == '2') {
                that.showaliasName_curr = this.nameArray[0].aliasName
                that.tongguoStyle = this.nameArray[0].aliasName;
                that.playAudio2();
                let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
              
                setTimeout(function() {
                    that.autoSpeed = 10000;
                    that.$refs.welcome.goTo(pageInt, true)

                }, 0);


                setTimeout(function() {
                    that.showaliasName_curr = '';
                    that.tongguoStyle = '';
                    that.nameArray.shift();
                    if (that.nameArray.length > 0) {
                        that.func();
                        that.imgCarouselShow = false;
                    } else {
                        // debugger;
                        // that.showPictures(90000);
                        that.autoSpeed = 10000;
                    }
                }, 10000)
            } else if (this.nameArray[0].type == '3') {
                that.showaliasName = this.nameArray[0].aliasName;
                that.showaliasName_curr = this.nameArray[0].aliasName
                that.ruzhiStyle = this.nameArray[0].aliasName;

                // if (that.showaliasName != '') {
                // that.playAudio3();
                // that.ani();

                let pageInt = parseInt(this.nameArray[0].indexA / that.pageSize)
                console.log("入职===" + pageInt);
                // that.$refs.welcome.goTo(pageInt, true)
                setTimeout(function() {
                    that.autoSpeed = 30000;
                    that.$refs.welcome.goTo(pageInt, true)
                }, 0);
                flag = true;
                // }
                that.ani().then(() => {
                    setTimeout(function() {
                        flag = false;
                        that.nameArray.shift();
                        that.showaliasName_curr = '';
                        // that.showaliasName = '';
                        that.ruzhiStyle = '';
                        // console.log(JSON.stringify(that.nameArray));
                        if (that.nameArray.length > 0) {
                            setTimeout(function() {
                                that.func();
                            }, 15000)
                        } else {
                            // debugger;
                            console.log("33333=====================")

                            // that.showPictures(90000);
                            that.autoSpeed = 10000;
                        }
                    }, 10000)
                })
            }


            // }
        },
      websocketonmessage(e) { //数据接收
            // const redata = JSON.parse(e.data);
            var that = this;
             console.log("接收消息", e.data)
            // console.log(JSON.parse(e.data))
            // console.log(JSON.parse(e.data).list)
            // console.log(new Date());
			// that.array = [];
			
			// type 25 到面 30通过 40入职

            // 180000
			// debugger
			if(e.data != '"pong"' && (timeStamp == 0 || new Date().getTime() - timeStamp >= 40000 )){
				
				 timeStamp = new Date().getTime();
				
				var getWebsocketData = JSON.parse(e.data);
				// console.log(getWebsocketData);
				// console.log(getWebsocketData.list);
				// that.array = [...getWebsocketData.list]
				that.array = [];
				var arr = [...getWebsocketData.list]
				
				var arrLength = arr.length;
				// that.array = [];
				
				for (var i = 0; i < arrLength; i += that.pageSize) {
				    that.array.push(arr.slice(i, i + that.pageSize));
				}
			
				that.array.forEach((item,index)=>{
					if(getWebsocketData.type == "25" || getWebsocketData.type == 25){ //到面
						if(item.id == getWebsocketData.applyUserId){
							this.nameArray.push({ type: '1', aliasName: item.aliasName, daomianStyle: item.aliasName, indexA: index });
						}
					}else if(getWebsocketData.type == "30" || getWebsocketData.type == 30){ //通过
						if(item.id == getWebsocketData.applyUserId){
							this.nameArray.push({ type: '2', aliasName: item.aliasName, tongguoStyle: item.aliasName, indexA: index });
						}
					}else if(getWebsocketData.type == "40" || getWebsocketData.type == 40){ //入职
						if(item.id == getWebsocketData.applyUserId){
							this.nameArray.push({ type: '3', aliasName: item.aliasName, ruzhiStyle: item.aliasName, indexA: index });
						}
					}
					
				})
				
				console.log(this.nameArray);
				if (this.nameArray.length >= 1) {
					this.func();
				}
				
				
			}
			
            

        },
		
		
		
test(e) { //数据接收

           var that = this;
		   e.data = '{"applyUserId":122240,"list":[{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":8,"agencyTeamName":"交付一组","aliasName":"常笑","arrived":1,"entry":2,"entryGPA":1.34,"finshedGPA":0,"funnel":3.40,"id":122240,"inAgencyStatistics":0,"nickName":"微信用户","obJob":25,"passed":2,"resumeNum":50,"showAgencyScreen":0,"signUps":4,"tel":"19036980063","transferRatio":0.04},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":2,"agencyTeamId":5,"agencyTeamName":"交付二组","aliasName":"陶帅","arrived":2,"entry":2,"entryGPA":1.47,"finshedGPA":0,"funnel":2.80,"id":321961,"inAgencyStatistics":0,"obJob":2,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":4,"tel":"19036980509","transferRatio":0.04},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":8,"agencyTeamName":"交付一组","aliasName":"刘深圳","arrived":2,"entry":1,"entryGPA":0.67,"finshedGPA":0.30,"funnel":2.60,"id":321653,"inAgencyStatistics":0,"obJob":6,"passed":2,"resumeNum":50,"showAgencyScreen":0,"signUps":4,"tel":"13271233701","transferRatio":0.02},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":5,"agencyTeamName":"交付二组","aliasName":"刘欢欢","arrived":0,"entry":2,"entryGPA":2.00,"finshedGPA":0,"funnel":2.50,"id":321654,"inAgencyStatistics":0,"obJob":8,"passed":1,"resumeNum":50,"showAgencyScreen":0,"signUps":1,"tel":"19036980372","transferRatio":0.04},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":5,"agencyTeamName":"交付二组","aliasName":"渠森森","arrived":0,"entry":1,"entryGPA":0.33,"finshedGPA":0,"funnel":1.70,"id":321650,"inAgencyStatistics":0,"obJob":2,"passed":1,"resumeNum":50,"showAgencyScreen":0,"signUps":3,"tel":"19036980059","transferRatio":0.02},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":8,"agencyTeamName":"交付一组","aliasName":"张驰","arrived":2,"entry":1,"entryGPA":0.00,"finshedGPA":0,"funnel":1.70,"id":319087,"inAgencyStatistics":0,"nickName":"张驰","obJob":12,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":3,"tel":"19036980035","transferRatio":0.02},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":2,"agencyTeamId":8,"agencyTeamName":"交付一组","aliasName":"闫兴乐","arrived":0,"entry":1,"entryGPA":0.00,"finshedGPA":0.67,"funnel":1.30,"id":318688,"inAgencyStatistics":0,"nickName":"微信用户","obJob":20,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":3,"tel":"19036980028","transferRatio":0.02},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":4,"agencyTeamName":"交付三组","aliasName":"申振磊","arrived":1,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.70,"id":322120,"inAgencyStatistics":0,"obJob":1,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":5,"tel":"19036980052","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":5,"agencyTeamName":"交付二组","aliasName":"朱永辉","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.30,"id":321652,"inAgencyStatistics":0,"obJob":9,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":3,"tel":"19036980508","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":4,"agencyTeamName":"交付三组","aliasName":"王尚","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.20,"id":322356,"inAgencyStatistics":0,"obJob":1,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":2,"tel":"19036980507","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":5,"agencyTeamName":"交付二组","aliasName":"李沂航","arrived":1,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.20,"id":122379,"inAgencyStatistics":0,"nickName":"杰伦","obJob":3,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":0,"tel":"19036980030","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":4,"agencyTeamName":"交付三组","aliasName":"王名扬","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.10,"id":322355,"inAgencyStatistics":0,"obJob":0,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":1,"tel":"19036980031","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":3,"agencyTeamName":"待分组","aliasName":"徐倩林","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.10,"id":321999,"inAgencyStatistics":0,"obJob":2,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":1,"tel":"19036980513","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":8,"agencyTeamName":"交付一组","aliasName":"邓高琦","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0.00,"funnel":0.10,"id":321964,"inAgencyStatistics":0,"obJob":2,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":1,"tel":"19036980023","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":8,"agencyTeamName":"交付一组","aliasName":"张静","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.10,"id":321400,"inAgencyStatistics":0,"obJob":8,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":1,"tel":"19036980034","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":4,"agencyTeamName":"交付三组","aliasName":"李林锟","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.00,"id":322206,"inAgencyStatistics":0,"obJob":0,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":0,"tel":"19036980061","transferRatio":0.00},{"agencyPermissions":"job:list,apply:add,apply:list,apply:user,user:pwd,user:tel","agencyRole":3,"agencyTeamId":5,"agencyTeamName":"交付二组","aliasName":"王正坤","arrived":0,"entry":0,"entryGPA":0,"finshedGPA":0,"funnel":0.00,"id":318852,"inAgencyStatistics":0,"nickName":"郭星池","obJob":6,"passed":0,"resumeNum":50,"showAgencyScreen":0,"signUps":0,"tel":"19036980051","transferRatio":0.00}],"type":"25"}'
		   
		   
		   console.log(JSON.parse(e.data));
		   console.log(e.data != '"pong"');
		   console.log(timeStamp == 0 || new Date().getTime() - timeStamp2 >= 40000);
		   // debugger
		   
		    // && (timeStamp2 == 0 || new Date().getTime() - timeStamp2 >= 40000 )
			if(e.data != '"pong"'){
				 // 
				 timeStamp2 = new Date().getTime();
				
				var getWebsocketData = JSON.parse(e.data);
				 console.log(getWebsocketData);
				// console.log(getWebsocketData.list);
				// that.array = [...getWebsocketData.list]
				that.array = [];
				var arr = [...getWebsocketData.list]
				
				var arrLength = arr.length;
				// that.array = [];
				
				for (var i = 0; i < arrLength; i += that.pageSize) {
				    that.array.push(arr.slice(i, i + that.pageSize));
				}
				console.log(that.array);
				
				arr.forEach((item,index)=>{
					console.log(getWebsocketData.type);
					
					if(getWebsocketData.type == "25" || getWebsocketData.type == 25){ //到面
						if(item.id - getWebsocketData.applyUserId == 0){
							this.nameArray.push({ type: '1', aliasName: item.aliasName, daomianStyle: item.aliasName, indexA: index });
						}
					}else if(getWebsocketData.type == "30" || getWebsocketData.type == 30){ //通过
						if(item.id - getWebsocketData.applyUserId == 0){
							this.nameArray.push({ type: '2', aliasName: item.aliasName, tongguoStyle: item.aliasName, indexA: index });
						}
					}else if(getWebsocketData.type == "40" || getWebsocketData.type == 40){ //入职
						if(item.id - getWebsocketData.applyUserId == 0){
							this.nameArray.push({ type: '3', aliasName: item.aliasName, ruzhiStyle: item.aliasName, indexA: index });
						}
					}
					
				})
				console.log(this.nameArray);
				
				
				// var timer = window.setInterval(function () {
				//     if (this.nameArray.length > 0){
				//        this.func()
				//     }else{
				//         window.clearInterval(timer);
				// 		}
				// }, 1000);
				
				if (this.nameArray.length >= 1) {
					 this.func()
				}
				
			}
			
            

        },

        playAudio1() { //点击约面 到面
			var that = this;
            let audio1 = new Audio()
            audio1.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/money.wav"
            audio1.play();
        },
        playAudio2() {
				var that = this;
            let audio2 = new Audio()
            audio2.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/mario.wav"
            audio2.play();

        },
        playAudio3() {
			var that = this;
            let audio3 = new Audio()
			 this.ifani = true;
			
            audio3.src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/huanhu.wav"
            audio3.play();
			
			setTimeout(function() {
			    that.ifani = false;
			}, 15000)
			

        },
        playClockAudio(type) {
            let clockAudio = new Audio()
            var _src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/5416.wav";
            if (type == 2) {
                _src = "http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/4031076792.mp3";
            }
            clockAudio.src = _src;
            clockAudio.play();

        },

        initClock() { //初始化闹钟，每天12：00，13：30执行
            var that = this;
            console.log('初始化闹钟')
            setInterval(() => {
                var d = new Date();
                var hour = d.getHours();
                var minues = d.getMinutes();
                var seconds = d.getSeconds();
                if (hour - 11 == 0 && minues - 59 == 0) { //12：00
                    setTimeout(function() {
                        that.playClockAudio(1);
                    }, 1000 * (60 - seconds));

                }
                if (hour - 13 == 0 && minues - 29 == 0) { //13：30
                    setTimeout(function() {
                        that.playClockAudio(2);
                    }, 1000 * (60 - seconds));
                }

                //that.playClockAudio();


                //console.log(hour + ":" + minues);
            }, 60000); //每隔1分钟刷新一次
        },
        initWebSocket() { //初始化weosocket
		//ws://daotian.matripe.com.cn/daotian/statistic/socket?agencyId=3087
            // var wsUri = serverAddress + '/websocket/statisticsServer/' + this.reconnect;
            // var wsUri = serverAddress + '/daotian/statistic/socket?agencyId=3087';
            var wsUri = 'wss://daotian.matripe.com.cn/socket/daotian/statistic?agency=3087'
            // wsUri = wsUri.replace("https", "ws").replace("http", "ws");
            this.websock = new WebSocket(wsUri);
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
        },
        websocketonopen() { //连接建立之后执行send方法发送数据
            this.isWebSocket = true;
            this.reconnect = 0;
            console.log("链接成功！", this.isWebSocket)
            // this.websocketsend(JSON.stringify(actions));
        },
        websocketonerror() { //连接建立失败重连
            console.log("连接建立失败");

            var that = this;
            that.reconnect = 1;

            setTimeout(function() {
                that.initWebSocket();
            }, 2000);

            // this.$message.info("重新建立链接中");
            // this.initWebSocket();
        },

        websocketsend(data) { //数据发送
            let actions = {
                "msg": data
            };
            console.log("您正在发送消息", actions);
            if (this.isWebSocket) {
                this.websock.send(JSON.stringify(actions));
            } else {
                console.log("请先建立链接");
                // this.$message.error("请先建立链接")
            }

        },
        websocketclose(e) { //关闭
            console.log('断开连接', e);
            this.isWebSocket = false;
            this.websock.close();
            this.initWebSocket();
        },
        websocketHeartCheck() {
            console.log("readyState===", this.websock.readyState);

            if (this.websock.readyState == 2 || this.websock.readyState == 3) {
                this.reconnect = 1;
                this.initWebSocket();
            } else {
                console.log('连接中...');
            }
            this.websocketsend("ping");
        },
        handleSubmit(e) {
            var that = this;
            e.preventDefault();
            this.formScreen.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                    that.passowrd = values.passowrd;
                    that.checkPagePassowrd();

                }
            });
        },
        checkPagePassowrd() {
            var that = this;
            axios({
                url: '/admin/v3/user/allotOrder/checkPagePassowrd',
                method: 'post',
                data: {
                    passowrd: that.passowrd
                },
            }).then(response => {
                console.log(response);
                if (response.status == 200) {


                    // 测试的时候需要注释

                    that.initWebSocket();
                    that.initClock();

                    if (that.isShow) {
                        setInterval(() => that.websocketHeartCheck(), 60000); //每隔1分钟刷新一次
                    }
                    // 测试的时候需要注释
                    that.isShow = false;
                } else {
                    that.isShow = true;
                    that.$message.error(response.msg);
                }
            })
        },
        timeagoOfDateStr(_time) {

            return timeagoOfDateStr(_time);

        },

    },
}
</script>
<style scoped>
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/animate.min.css';
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/bigScreen1.css';
div{
	color: #fff;
}

/deep/ .ttd{
	text-align: center;
	font-size: 36px;
}

/deep/ .ttd{
	text-align: center;
	font-size: 28px;
}

.mmtt111{
  background-image: url('http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/screen_bg.png');background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height:100vh;
}
.imgPlay .ant-carousel .slick-slide img {
    display: inline-block;
}


.imgPlay .slick-list {
    display: flex;
    align-items: center;
}


.imgPlay .ant-carousel {
    background-color: rgba(0, 0, 0, 1);
}

/deep/.slick-dots{
  bottom: -30px !important;
}
.imgPlay .tcImg {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
}


.imgPlay .mw100 {
    max-width: 100%;
    max-height: 100vh;
}


.imgPlay .imgText {
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    font-size: 36px;
    margin-left: 24px;
    color: #FFF;
}

.imgPlay .slick-track {
    display: flex;
    align-items: center;
}




.ant-carousel>>>.slick-slide {
    /*text-align: center;*/
    /*height: 560px;
    line-height: 160px;
    background: #364d79;*/
    color: #fff;
    overflow: hidden;
}

.ant-carousel>>>.slick-slide h3 {
    color: #fff
}

.tth {
    width: 100%;
	padding-right: 0;
}

.tc1, .tc7 {
    width: 12%;
    min-width: 70px;
}

.tc2 {
    width: 18%;
    padding-left: 0px;
    text-align: center;
}

.tc3 {
    width: 10%;
}

.tc4 {
    width: 30%;
}

.tc5 {
    width: 14%;
}

@media screen and (max-width: 1500px) {
	h4.f24 {
	    font-size: 48px;
	}
	.ttd{
		text-align: center;
		font-size: 25px;
	}
    .s_left {
        width: 96%;
    }

    .tc1 {
        min-width: 50px;
    }
	.tc2{
		width:16%
	}
	.tc5 {
	    width: 10%;
	}

}
</style>
<style>
::-webkit-scrollbar {
    display: none;
}
.ant-carousel .slick-dots-bottom {
    bottom: -48px;
}
h4.f24 {
    font-size: 56px;
}
.dotClass button:before {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: -6px;
}
.dotClass button:before {
    content: '';
    width: 16px;
    height: 24px;
    position: absolute;
    left: 0;
    top: -12px;
}
.dotClass button.slick-active:before {
	content: '';
	width: 24px;
}
</style>