SaaS-DataScreen/src/views/index/components/title/index.vue

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 09:19:42
 * @LastEditors: WangQiBiao
 * @LastEditTime: 2019-09-26 17:49:53
 * @Description: 头部
 -->
<template>
  <div class="title">
    <div class="lf">让物业管理更简单</div>
    <div class="cent">绘享云</div>
    <div class="lr">
      <span class="time">{{time}}</span>
      <span class="date">{{date}}</span>
      <span class="day">{{day}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      time: '00:00:00',
      date: '0000/00/00',
      day: '星期',
      timerFn: null
    }
  },
  mounted () {
    this.setTimeTrainingRotation()
  },
  beforeDestroy () {
    clearTimeout(this.timerFn)
  },
  methods: {
    fillZero (value) {
      if (value < 10) {
        return '0' + value
      }
      return value
    },
    /**
     * 日期
     */
    getDateValue () {
      const _now = new Date()
      const year = _now.getFullYear()
      const month = this.fillZero(_now.getMonth() + 1)
      const date = _now.getDate()
      this.date = year + '/' + month + '/' + date
    },
    /**
     * 时间
     */
    getTimeValue () {
      clearTimeout(this.timerFn)
      const _now = new Date()
      const hours = this.fillZero(_now.getHours())
      const minutes = this.fillZero(_now.getMinutes())
      const seconds = this.fillZero(_now.getSeconds())
      this.time = hours + ':' + minutes + ':' + seconds
    },
    /**
     * 星期
     */
    getDayValue () {
      const _now = new Date()
      const DAY_NUM = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.day = DAY_NUM[_now.getDay()]
    },
    /**
     * 轮训时间
     */
    setTimeTrainingRotation () {
      this.getDateValue()
      this.getTimeValue()
      this.getDayValue()
      this.timerFn = setTimeout(() => {
        this.setTimeTrainingRotation()
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>