vue3.0 获取日期时间，星期

<!--

 * @Description:

 * @Author: wwf

 * @Date: 2022-03-31 14:04:35

 * @LastEditTime: 2022-03-31 16:08:59

 * @LastEditors: wwf

-->

<template>

  <div class="globalHeader">

    <div class="globalHeaderContent">

      <div class="globalHeaderContent_title">

        <img src="../../assets/header/logo.png" alt="" />

        <span>南水北调小洪河监测站数字孪生平台</span>

      </div>

      <div class="globalHeaderContent_tab">

        <ul>

          <li

            :class="{ active: showIndex == index }"

            v-for="(item, index) in list"

            :key="index"

            @click="clickItem(index)"

          >

            {{ item.name }}

          </li>

        </ul>

      </div>

      <div class="globalHeaderContent_date">

        <div class="date">

          <div class="time">{{ time }}</div>

          <div class="dateTime">

            <div>{{ week }}</div>

            <div>{{ date }}</div>

          </div>

        </div>

        <div class="pm">PM 52</div>

        <div class="shidu">湿度 26%RH</div>

        <div class="tem">

          <img src="../../assets/header/sun.png" alt="" />

          17 ℃

        </div>

      </div>

    </div>

  </div>

</template>

<script lang="ts">

import { defineComponent, reactive, toRefs } from 'vue'

interface dataType {

  date: string

  time: string

  week: string

  showIndex: Number

}

export default defineComponent({

  name: 'GlobalHeader',

  setup() {

    const list: any[] = [

      {

        name: '监测数据'

      },

      {

        name: '设施调控'

      },

      {

        name: '巡检养护'

      },

      {

        name: '防护预警'

      }

    ]

    const state: dataType = reactive({

      date: '',

      time: '',

      week: '',

      showIndex: 0

    })

    // 获取时间接口

    const getTime = async () => {

      var myDate = new Date()

      let month = (myDate.getMonth() + 1).toString().padStart(2, '0')

      let day = myDate.getDate().toString().padStart(2, '0')

      let hour = myDate.getHours().toString().padStart(2, '0')

      let minutes = myDate.getMinutes().toString().padStart(2, '0')

      let seconed = myDate.getSeconds().toString().padStart(2, '0')

      state.date = myDate.getFullYear() + '-' + month + '-' + day

      state.time = hour + ':' + minutes + ':' + seconed

    }

    // 获取当前星期几

    const getWeekDate = () => {

      var now = new Date()

      var day = now.getDay()

      var weeks = [

        '星期日',

        '星期一',

        '星期二',

        '星期三',

        '星期四',

        '星期五',

        '星期六'

      ]

      state.week = weeks[day]

    }

    getTime()

    getWeekDate()

    setInterval(() => {

      getWeekDate()

    }, 1000 * 60 * 60 * 24)

    setInterval(() => {

      getTime()

    }, 1000)

    const clickItem = (index: any) => {

      state.showIndex = index

    }

    return {

      ...toRefs(state),

      list,

      clickItem

    }

  }

})

</script>

<style scoped lang="scss">

.globalHeader {

  position: absolute;

  top: 0;

  left: 0;

  width: 1920px;

  height: 80px;

  background-color: #717f99;

  padding-top: 10px;

  .globalHeaderContent {

    width: 1920px;

    height: 70px;

    background: url('../../assets/header/header.png') no-repeat;

    background-size: cover;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    .globalHeaderContent_title {

      flex: 1;

      img {

        width: 71px;

        height: 71px;

        margin: 0 20px;

        vertical-align: bottom;

      }

      span {

        display: inline-block;

        font-size: 30px;

        font-family: Source Han Sans SC-Bold, Source Han Sans SC;

        font-weight: bold;

        color: #ffffff;

        line-height: 65px;

        text-shadow: 2px 2px 2px #000000;

        -webkit-background-clip: text;

        // -webkit-text-fill-color: transparent;

      }

    }

    .globalHeaderContent_tab {

      flex: 1;

      margin-left: 85px;

      ul {

        display: flex;

        flex-direction: row;

        justify-content: space-around;

        align-items: center;

        li {

          font-size: 20px;

          font-family: Source Han Sans SC-Medium, Source Han Sans SC;

          font-weight: 500;

          color: #ffffff;

          line-height: 30px;

          text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.67);

          -webkit-background-clip: text;

          cursor: pointer;

        }

        .active {

          font-size: 24px;

          font-family: Source Han Sans SC-Medium, Source Han Sans SC;

          font-weight: 500;

          color: #f1feff;

          line-height: 65px;

          text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.67);

          -webkit-background-clip: text;

          cursor: pointer;

          border-bottom: 3px solid #24d8b9;

        }

      }

    }

    .globalHeaderContent_date {

      flex: 1;

      display: flex;

      flex-direction: row;

      justify-content: space-around;

      align-items: center;

      .date {

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        margin-left: 40px;

        .time {

          font-size: 26px;

          font-family: PingFang SC-Regular, PingFang SC;

          font-weight: 400;

          color: #ffffff;

          line-height: 0px;

          letter-spacing: 2px;

          text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

          -webkit-background-clip: text;

          //   -webkit-text-fill-color: transparent;

          margin-right: 10px;

        }

        .dateTime {

          display: flex;

          flex-direction: column;

          justify-content: center;

          align-items: flex-end;

          div {

            font-size: 12px;

            font-family: PingFang SC-Regular, PingFang SC;

            font-weight: 400;

            color: #ffffff;

            line-height: 18px;

            // -webkit-background-clip: text;

          }

        }

      }

      .pm {

        width: 100px;

        height: 20px;

        font-size: 18px;

        font-family: Source Han Sans SC-Regular, Source Han Sans SC;

        font-weight: 400;

        color: #ffffff;

        line-height: 20px;

        text-align: center;

        border-left: 2px solid #b0b4bd;

        border-right: 2px solid #b0b4bd;

      }

      .shidu {

        width: 125px;

        height: 20px;

        font-size: 18px;

        font-family: Source Han Sans SC-Regular, Source Han Sans SC;

        font-weight: 400;

        color: #ffffff;

        line-height: 20px;

        border-right: 2px solid #b0b4bd;

      }

      .tem {

        img {

          width: 28px;

          height: 28px;

          vertical-align: middle;

        }

        font-size: 18px;

        font-family: Source Han Sans SC-Regular, Source Han Sans SC;

        font-weight: 400;

        color: #ffc21a;

      }

    }

  }

}

</style>