rt-sim-training-client/src/views/newMap/displayCity/menuSystemTime.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';
import { timeFormat } from '@/utils/date';

// 顶部时间栏显示
export default {
    name: 'MenuSystemTime',
    components: {
        SystemTime
    },
    props: {
        offset: {
            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('displayCity') || this.$route.path.includes('scriptdisplayCity');
        },
        isShowDate() { // 西安一 三号线
            return (this.$route.query.lineCode == 10 || this.$route.query.lineCode == 11) && this.isDisplay;
        },
        top() {
            return this.isShowDate ? (this.$route.query.prdType == '05' ? 5 : this.offset - 10) : this.offset;
        },
        newRight() {
            return this.isShowDate ? this.$store.state.config.width - 420 : this.$store.state.config.width / 2 - 55;
        }
    },
    watch: {
        '$store.state.training.initTime': function (initTime) {
            const date = new Date(initTime);
            this.initDate(date);
        },
        '$store.state.socket.simulationTimeSync': function (time) { // 仿真时间更新
            this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
            const date = new Date(+new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
            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;
		border: 1px solid rgba(255,255,255,.2);
		box-shadow: 0 2px 12px 0 rgba(255,255,255,.3);
        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>