152 lines
4.4 KiB
Vue
152 lines
4.4 KiB
Vue
<template>
|
|
<div v-if="isShowSystemTime" class="display-card" :style="{top: top+'px', right: newRight+'px'}">
|
|
<template v-if="pause">
|
|
<span class="display-pause">{{ $t('display.systemTime.timePause') }}</span>
|
|
</template>
|
|
<template v-else>
|
|
<system-time
|
|
class="display-time"
|
|
:time="time"
|
|
/>
|
|
<div v-if="isShowDate" style="width: 80px;height: 58px;float: right;box-shadow: 0 0 5px #eee;">
|
|
<div class="display-date-box">{{ dateString }}</div>
|
|
<div class="display-date-box">{{ dayString }}</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { prefixIntrger } from '@/utils/date';
|
|
import SystemTime from '@/views/components/systemTime/index';
|
|
|
|
// 顶部时间栏显示
|
|
export default {
|
|
name: 'MenuSystemTime',
|
|
components: {
|
|
SystemTime
|
|
},
|
|
props: {
|
|
offset: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
right: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
time: '00:0000',
|
|
dateString: '00/00/00',
|
|
dayString: ''
|
|
};
|
|
},
|
|
computed: {
|
|
isShowSystemTime() {
|
|
return this.$route.params.mode == 'demon' ||
|
|
this.$route.params.mode == 'dp' ||
|
|
this.$route.params.mode == 'plan' ||
|
|
this.$route.params.mode == 'script' ||
|
|
this.$route.params.mode == 'practice' ||
|
|
!this.$route.params.mode;
|
|
},
|
|
pause() {
|
|
return this.$store.state.scriptRecord.simulationPause;
|
|
},
|
|
isDisplay() {
|
|
return this.$route.path.includes('displayNew') || this.$route.path.includes('scriptDisplayNew');
|
|
},
|
|
isShowDate() {
|
|
return (this.$route.query.lineCode == 10 || this.$route.query.lineCode == 11) && this.isDisplay;
|
|
},
|
|
top() {
|
|
return (this.$route.query.lineCode == 10 || this.$route.query.lineCode == 11) && this.isDisplay ? (this.$route.query.prdType == '05' ? 5 : 35) : this.offset;
|
|
},
|
|
newRight() {
|
|
return (this.$route.query.lineCode == 10 || this.$route.query.lineCode == 11) && this.isDisplay ? this.$store.state.config.width - 340 - 80 : this.right;
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.training.initTime': function (initTime) {
|
|
const date = new Date(initTime);
|
|
this.initDate(date);
|
|
}
|
|
},
|
|
mounted() {
|
|
const initTime = this.$store.state.training.initTime;
|
|
if (initTime > 0) {
|
|
const date = new Date(initTime);
|
|
this.initDate(date);
|
|
}
|
|
},
|
|
methods: {
|
|
initDate(date) {
|
|
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
|
|
const years = date.getFullYear() + '';
|
|
let months = date.getMonth() + 1 + '';
|
|
let dates = date.getDate() + '';
|
|
if (months.length < 2) { months = '0' + months; }
|
|
if (dates.length < 2) { dates = '0' + dates; }
|
|
this.dateString = dates + '/' + months + '/' + years.slice(2);
|
|
const day = date.getDay();
|
|
switch (day) {
|
|
case 0:
|
|
this.dayString = '星 期 日';
|
|
break;
|
|
case 1:
|
|
this.dayString = '星 期 一';
|
|
break;
|
|
case 2:
|
|
this.dayString = '星 期 二';
|
|
break;
|
|
case 3:
|
|
this.dayString = '星 期 三';
|
|
break;
|
|
case 4:
|
|
this.dayString = '星 期 四';
|
|
break;
|
|
case 5:
|
|
this.dayString = '星 期 五';
|
|
break;
|
|
case 6:
|
|
this.dayString = '星 期 六';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
|
|
.display-card {
|
|
z-index: 9;
|
|
display: inline;
|
|
position: absolute;
|
|
}
|
|
|
|
.display-pause {
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
color: yellow;
|
|
}
|
|
|
|
.display-time{
|
|
padding: 3px 5px;
|
|
box-shadow: 0px 0px 5px #eee;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.display-card .el-row {
|
|
line-height: 32px !important;
|
|
}
|
|
.display-date-box{
|
|
height: 29px;
|
|
line-height: 29px;
|
|
background: #404040;
|
|
color: #1DEA1E;
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|