<template>
|
<div class="screen-header">
|
<div class="left">
|
<div class="left-str"><span class="day-str">{{dayStr}}</span><span>{{weekStr}}</span></div>
|
<div class="compName">青汽智能立体库监控平台</div>
|
<div class="right-str">{{timeStr}}</div>
|
</div>
|
<!-- <div class="right">
|
<img src="@/assets/img/logo_white.png" alt="Logo" class="logo-img" />
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
export default {
|
name:'screenHeader',
|
data(){
|
return {
|
serverTime:'',
|
timerCount:0,
|
dayStr:'',
|
weekStr:'',
|
timeStr:'',
|
interval:null,
|
serverInterval:null
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
beforeDestroy(){
|
this.clearInerval()
|
},
|
beforeUnmount(){
|
console.log("beforeUnmount------------------清除年月日的定时器")
|
this.clearInerval()
|
},
|
methods:{
|
init(){
|
this.serverTime = new Date().getTime()
|
this.getTime();
|
this.createInterVal()
|
|
// this.getServerTime(()=>{
|
// this.getTime();
|
// this.createInterVal()
|
// })
|
},
|
getServerTime(callback){
|
this.loading = false;
|
callback && callback(true)
|
|
// this.loading = true;
|
// this.$api.get('GetNowTime',{},{block:'screen',needToken:false}).then((d)=>{
|
// this.serverTime = d;
|
// this.timerCount = 0;
|
// this.loading = false;
|
// callback && callback(true)
|
// }).catch(()=>{
|
// this.serverTime = new Date().getTime();
|
// this.timerCount = 0;
|
// this.loading = false;
|
// callback && callback(false)
|
// })
|
},
|
getTime(){
|
let now = dayjs(this.serverTime+this.timerCount*1000);
|
this.dayStr = now.format('YYYY-MM-DD');
|
let week = now.day(), weekStr="";
|
switch (week) {
|
case 1:
|
this.weekStr = '星期一';
|
break;
|
case 2:
|
this.weekStr = '星期二';
|
break;
|
case 3:
|
this.weekStr = '星期三';
|
break;
|
case 4:
|
this.weekStr = '星期四';
|
break;
|
case 5:
|
this.weekStr = '星期五';
|
break;
|
case 6:
|
this.weekStr = '星期六';
|
break;
|
default:
|
this.weekStr = '星期日';
|
break;
|
}
|
this.timeStr = now.format('HH:mm:ss');
|
this.timerCount++;
|
},
|
createInterVal(){
|
this.createServerInterVal();
|
this.createTimerInterVal();
|
},
|
createTimerInterVal(){
|
this.interval = window.setInterval(this.getTime.bind(this),1000)
|
},
|
createServerInterVal(){
|
this.serverInterval = window.setInterval(this.getServerTime.bind(this),10*60*1000)
|
},
|
clearInerval(){
|
this.clearTimerInerval();
|
this.clearServerInerval();
|
},
|
clearTimerInerval(){
|
window.clearInterval(this.interval)
|
},
|
clearServerInerval(){
|
window.clearInterval(this.serverInterval)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.screen-header{
|
height: 100%;
|
display: flex;
|
.compName{
|
color: white;
|
font-size: 16px;
|
display: block;
|
text-align: center;
|
justify-content: center;
|
padding-left: 5.5%;
|
letter-spacing: 4px;
|
padding-top: 6px;
|
font-family: initial;
|
font-weight: 700;
|
}
|
&>.left{
|
height: 100%;
|
overflow: hidden;
|
flex: 1;
|
background-repeat: no-repeat;
|
background-image: url(@/assets/img/screen/header3.png);
|
background-size: 100% 100%;
|
position: relative;
|
}
|
&>.right{
|
width: 88px;
|
flex-shrink: 0;
|
box-sizing: border-box;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.logo-img{
|
height: 24px;
|
width: auto;
|
top: 5px;
|
}
|
}
|
.left-str,.right-str{
|
position: absolute;
|
top: 9px;
|
color: #fff;
|
font-size: 12px;
|
}
|
.left-str{
|
left: 10px;
|
}
|
.right-str{
|
right: 12px;
|
}
|
.day-str{
|
margin-right: 10px;
|
}
|
}
|
</style>
|
