参考:
<template>
<div id="app" class="mainContainer">
<div class="topSide">
<div class="topRight">
<span class="timeStr">{{formatTimeStr}}</span>
<span class="secondStr">{{formatSecStr}}</span>
<span class="dateStr">{{formatDateStr}}</span>
<span class="weekStr">周{{dayStr}}</span>
<span v-if="websocketError" style="color: red">!</span>
</div>
</div>
<div class="bottomSide">
<router-view></router-view>
</div>
</div>
</template>
export default {
name: 'App',
data() {
return {
runTimeShow: new Date().getTime(),
runSeconds: 0,
websock: null,
todayRefresh: true,
websocketError: false
}
},
computed: {
formatTimeStr() {
let dateObj = new Date(this.runTimeShow)
let hours = dateObj.getHours();
//凌晨四点做一次全局刷新
if (hours == 4 && this.todayRefresh) {
this.initData();
this.todayRefresh = false;
}
//零点设置刷新字段为true
if (hours == 0) {
this.todayRefresh = true;
}
if (hours < 10) {
hours = '0' + hours
}
let minu = dateObj.getMinutes();
if (minu < 10) {
minu = '0' + minu
}
let seco = dateObj.getSeconds();
if (seco < 10) {
seco = '0' + seco
}
return hours + ':' + minu + ':' + seco;
},
formatSecStr() {
if (this.runSeconds < 10) {
return this.runSeconds
}
},
formatDateStr() {
let dateObj = new Date(this.runTimeShow)
let year = dateObj.getFullYear();
let month = dateObj.getMonth() + 1;
let dateStr = dateObj.getDate();
if (month < 10) {
month = '0' + month
}
if (dateStr < 10) {
dateStr = '0' + dateStr
}
return year + '-' + month + '-' + dateStr;
},
dayStr() {
let dateObj = new Date(this.runTimeShow);
let dayNum = dateObj.getDay();
switch (dayNum) {
case 0:
return '日';
break;
case 1:
return '一';
break;
case 2:
return '二';
break;
case 3:
return '三';
break;
case 4:
return '四';
break;
case 5:
return '五';
break;
case 6:
return '六';
break;
}
}
},
created() {
this.initTimeRun();
this.initData();
this.initWebSocket();
},
destroyed() {
this.websock.close() //离开路由之后断开websocket连接
},
methods: {
initWebSocket() { //初始化weosocket
const wsuri = "xxxxxxxxx"; // url地址
this.websock = new WebSocket(wsuri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen() { //连接建立之后执行send方法发送数据
let actions = { "sessionId": "SCREEN", "event": "LOGIN", "body": "xxx11" };
this.websock.send(JSON.stringify(actions));
this.checkWebSocket();
},
websocketonerror() { //连接建立失败重连
console.log('连接失败,请稍后再试');
this.websocketError = true;
},
websocketonmessage(e) { //数据接收
const redata = JSON.parse(e.data);
console.log('链接成功!',redata.event);
switch (redata.event) {
case 'task':
this.$store.dispatch('getTaskData');
this.$store.dispatch('getWorkData');
break;
case 'bug':
this.$store.dispatch('getBugData');
break;
case 'team':
this.$store.dispatch('getStaffData');
case 'OFF_LINE':
console.log('重新链接!', e);
this.initWebSocket();
break;
}
},
websocketclose(e) { //关闭
console.log('断开连接!', e);
this.websocketError = true;
},
initTimeRun() {
setInterval(() => {
this.runSeconds++;
if (this.runSeconds == 10) {
this.runTimeShow = new Date().getTime();
this.runSeconds = 0;
}
}, 100)
},
checkWebSocket() {
setInterval(() => {
let actions = { "sessionId": "SCREEN", "event": "HEART_BEAT", "body": "xxx11" };
this.websock.send(JSON.stringify(actions));
}, 10000)
},
initData() {
this.$store.dispatch('getBugData');
this.$store.dispatch('getTaskData');
this.$store.dispatch('getWorkData');
this.$store.dispatch('getStaffData');
}
}
}
</script>
computed里面的方法主要是为了实现实时时间
websocket一系列方法实现:页面其他部分:实时数据的获取