86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="isShowSystemTime" class="display-card" :style="{top: offset+'px', right: right+'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"
|
|
/>
|
|
|
|
</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'
|
|
};
|
|
},
|
|
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;
|
|
},
|
|
pause() {
|
|
return this.$store.state.scriptRecord.simulationPause;
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.training.initTime': function (initTime) {
|
|
const date = new Date(initTime);
|
|
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
|
|
}
|
|
}
|
|
};
|
|
</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;
|
|
}
|
|
|
|
</style>
|