解决 / 大屏显示日期时间星期天气空气质量

<template>
  <div>
  <div class="nowTime">{{nowTime}}</div>
  <div class="nowWeather">{{nowWeather}}</div>
    <div class="NowAir">{{nowAir}}</div>
  </div>
</template>

<script>
export default {
  name: "getTime",
  data() {
    return {
      nowTime: '',
      nowWeather:'',
      nowAir:'',
    }
  },
  methods: {
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
      let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
      let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
      let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
      let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
      let week = new Date(timeStamp).getDay();
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      let getWeek = "周" + weeks[week];
      this.nowTime = year + "-" + month + "-" + date + "  " + getWeek + "  " + hh + ":" + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    },
    getWeather() { // 第三方天气api接口
      this.$axios.get('https://v0.yiketianqi.com/free/day?appid=93352327&appsecret=Z5BhcJk7&unescape=1&cityid=CN101190508', {
        // params: {
        //   unescape: "1",
        //   appid: 'xxx',
        //   appsecret: 'xxx ',
        //   // version: 'v91'
        // }
      }).then(res => {
        console.log(res.data);
        if (res.data) {
          this.nowWeather = res.data.wea;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getNowAir(){
      this.$axios.get('https://v0.yiketianqi.com/free/day?appid=93352327&appsecret=Z5BhcJk7&unescape=1&cityid=CN101190508', {
      }).then(res => {
        console.log(res.data);
        if (res.data) {
          this.nowAir = "空气质量："+res.data.air;
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.nowTimes()
    this.getWeather()
    this.getNowAir()
  },
  beforeDestroy() {
    this.clear();
  }
}


</script>

<style scoped>
.nowTime{
  float:left;
  color:#d7f7ff;
  font-family: Noto Sans SC;
  font-size: 20rem;
  height: 30rem;
  width:260rem;
  line-height: 30rem;
  text-align: left;
}

.nowWeather{
  float:left;
  color:#d7f7ff;
  font-family: Noto Sans SC;
  font-size: 20rem;
  height: 30rem;
  width:40rem;
  line-height: 30rem;
  text-align: left;
}

.NowAir{
  float:left;
  margin-left:1450rem;
  color:#d7f7ff;
  font-family: Noto Sans SC;
  font-size: 20rem;
  height: 30rem;
  width:130rem;
  line-height: 30rem;
  text-align: left;
}
</style>

因为天气接口有次数限制，大屏项目仅练习，没有设置定时请求