高德天气组件记录

参考其他文章的记录下

图标资源已上传，需要的可以私信

<!--
 * @Author: 天王
 * @Date: 2022-09-19 11:08:15
 * @LastEditors: 天王
 * @LastEditTime: 2022-09-21 11:28:56
 * @Description:
-->
<template>
  <div class="header_date">
    <div class="time-box">{{nowTime}}</div>
    <div class="date-box">{{nowDate}}&emsp;{{nowWeekDay}}</div>
    <div class="img-box">
      <img :src="imgUrl" alt="">
    </div>
    <div class="weather-box">{{ weather }} {{ temperature }}</div>
  </div>
</template>
<script>
import { dateFormat, getWeekDate } from '@/common/js/public'
export default {
  data() {
    return {
      /**
       * weather 天气 temperature 温度 nowWeekDay 星期
       * nowTime 当前年月日时间 imgUrl 天气图片
       */
      timer: null,
      weather: '',
      temperature: '',
      nowWeekDay: '',
      nowDate: '',
      nowTime: '',
      imgUrl: '',
      weatherList: [
        { id: 1, name: '晴', url: require('@/assets/img/weather/weather01.png') },
        { id: 2, name: '少云', url: require('@/assets/img/weather/weather02.png') },
        { id: 3, name: '晴间多云', url: require('@/assets/img/weather/weather03.png') },
        { id: 4, name: '多云', url: require('@/assets/img/weather/weather04.png') },
        { id: 5, name: '阴', url: require('@/assets/img/weather/weather05.png') },
        { id: 6, name: '有风', url: require('@/assets/img/weather/weather06.png') },
        { id: 7, name: '平静', url: require('@/assets/img/weather/weather07.png') },
        { id: 8, name: '微风', url: require('@/assets/img/weather/weather08.png') },
        { id: 9, name: '和风', url: require('@/assets/img/weather/weather09.png') },
        { id: 10, name: '清风', url: require('@/assets/img/weather/weather10.png') },
        { id: 11, name: '强风/劲风', url: require('@/assets/img/weather/weather11.png') },
        { id: 12, name: '疾风', url: require('@/assets/img/weather/weather12.png') },
        { id: 13, name: '大风', url: require('@/assets/img/weather/weather13.png') },
        { id: 14, name: '烈风', url: require('@/assets/img/weather/weather14.png') },
        { id: 15, name: '风暴', url: require('@/assets/img/weather/weather15.png') },
        { id: 16, name: '狂爆风', url: require('@/assets/img/weather/weather16.png') },
        { id: 17, name: '飓风', url: require('@/assets/img/weather/weather17.png') },
        { id: 18, name: '热带风暴', url: require('@/assets/img/weather/weather18.png') },
        { id: 19, name: '霾', url: require('@/assets/img/weather/weather19.png') },
        { id: 20, name: '中度霾', url: require('@/assets/img/weather/weather20.png') },
        { id: 21, name: '重度霾', url: require('@/assets/img/weather/weather21.png') },
        { id: 22, name: '严重霾', url: require('@/assets/img/weather/weather22.png') },
        { id: 23, name: '阵雨', url: require('@/assets/img/weather/weather23.png') },
        { id: 24, name: '雷阵雨', url: require('@/assets/img/weather/weather24.png') },
        { id: 25, name: '雷阵雨并伴有冰雹', url: require('@/assets/img/weather/weather25.png') },
        { id: 26, name: '小雨', url: require('@/assets/img/weather/weather26.png') },
        { id: 27, name: '中雨', url: require('@/assets/img/weather/weather27.png') },
        { id: 28, name: '大雨', url: require('@/assets/img/weather/weather28.png') },
        { id: 29, name: '暴雨', url: require('@/assets/img/weather/weather29.png') },
        { id: 30, name: '大暴雨', url: require('@/assets/img/weather/weather30.png') },
        { id: 31, name: '特大暴雨', url: require('@/assets/img/weather/weather31.png') },
        { id: 32, name: '强阵雨', url: require('@/assets/img/weather/weather32.png') },
        { id: 33, name: '强雷阵雨', url: require('@/assets/img/weather/weather33.png') },
        { id: 34, name: '极端降雨', url: require('@/assets/img/weather/weather34.png') },
        { id: 35, name: '毛毛雨/细雨', url: require('@/assets/img/weather/weather35.png') },
        { id: 36, name: '雨', url: require('@/assets/img/weather/weather36.png') },
        { id: 37, name: '小雨-中雨', url: require('@/assets/img/weather/weather37.png') },
        { id: 38, name: '中雨-大雨', url: require('@/assets/img/weather/weather38.png') },
        { id: 39, name: '大雨-暴雨', url: require('@/assets/img/weather/weather39.png') },
        { id: 40, name: '暴雨-大暴雨', url: require('@/assets/img/weather/weather40.png') },
        { id: 41, name: '大暴雨-特大暴雨', url: require('@/assets/img/weather/weather41.png') },
        { id: 42, name: '雨雪天气', url: require('@/assets/img/weather/weather42.png') },
        { id: 43, name: '雨夹雪', url: require('@/assets/img/weather/weather43.png') },
        { id: 44, name: '阵雨夹雪', url: require('@/assets/img/weather/weather44.png') },
        { id: 45, name: '冻雨', url: require('@/assets/img/weather/weather45.png') },
        { id: 46, name: '雪', url: require('@/assets/img/weather/weather46.png') },
        { id: 47, name: '阵雪', url: require('@/assets/img/weather/weather47.png') },
        { id: 48, name: '小雪', url: require('@/assets/img/weather/weather48.png') },
        { id: 49, name: '中雪', url: require('@/assets/img/weather/weather49.png') },
        { id: 50, name: '大雪', url: require('@/assets/img/weather/weather50.png') },
        { id: 51, name: '暴雪', url: require('@/assets/img/weather/weather51.png') },
        { id: 52, name: '小雪-中雪', url: require('@/assets/img/weather/weather52.png') },
        { id: 53, name: '中雪-大雪', url: require('@/assets/img/weather/weather53.png') },
        { id: 54, name: '大雪-暴雪', url: require('@/assets/img/weather/weather54.png') },
        { id: 55, name: '浮尘', url: require('@/assets/img/weather/weather55.png') },
        { id: 56, name: '扬沙', url: require('@/assets/img/weather/weather56.png') },
        { id: 57, name: '沙尘暴', url: require('@/assets/img/weather/weather57.png') },
        { id: 58, name: '强沙尘暴', url: require('@/assets/img/weather/weather58.png') },
        { id: 59, name: '龙卷风', url: require('@/assets/img/weather/weather59.png') },
        { id: 60, name: '雾', url: require('@/assets/img/weather/weather60.png') },
        { id: 61, name: '浓雾', url: require('@/assets/img/weather/weather61.png') },
        { id: 62, name: '强浓雾', url: require('@/assets/img/weather/weather62.png') },
        { id: 63, name: '轻雾', url: require('@/assets/img/weather/weather63.png') },
        { id: 64, name: '大雾', url: require('@/assets/img/weather/weather64.png') },
        { id: 65, name: '特强浓雾', url: require('@/assets/img/weather/weather65.png') },
        { id: 66, name: '热', url: require('@/assets/img/weather/weather66.png') },
        { id: 67, name: '冷', url: require('@/assets/img/weather/weather67.png') },
        { id: 68, name: '未知', url: require('@/assets/img/weather/weather68.png') }
      ],
      weatherData: null
    }
  },
  mounted() {
    this.timer = setInterval(this.refreshTime, 1000)
    this.getWeather();
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  watch: {
  },
  methods: {
    // 实时更新时间
    refreshTime() {
      let time = new Date()
      this.nowTime = dateFormat(time, 'HH:mm:ss')
      this.nowDate = dateFormat(time, 'yyyy/MM/dd')
      this.nowWeekDay = getWeekDate(time)
    },
    /**
     * 获取天气状态
     * 高德实时天气查询对照文档
     * https://lbs.amap.com/api/javascript-api/guide/services/weather/
     */
    getWeather() {
      AMap.plugin('AMap.Weather', () => { // 异步加载插件
        const that = this;
        // 创建天气查询实例
        let weather = new AMap.Weather();
        // 执行实时天气信息查询
        weather.getLive('广州市', function(err, data) {
          console.log(err, data);
          /**
           * weather 天气 temperature 温度 imgUrl 天气图片
           */
          that.weather = data.weather;
          that.temperature = data.temperature + '℃';
          that.weatherList.forEach(val => {
            if (val.name === that.weather) {
              that.imgUrl = val.url
            }
          });
        });
      });
    }
  }
}
</script>
<style lang="stylus" scoped>
.header_date {
  position: relative;
  width: 1500px;
  font-size: 62px;
  font-weight: 500;
  color: #70D9E3;
  .time-box {
    font-family: 'LCD-font';
    color: #00FFFA;
    font-size: 144px;
    line-height: 200px;
    width: auto;
    height: 149px;
    position: absolute;
    left: 420px;
  }
  .date-box {
    width: 510px;
    height: 87px;
    line-height: 87px;
    position: absolute;
    left: 997px;
    top: 41px;
  }
  .img-box {
    position: absolute;
    top: 41px;
    left: 1570px;
    img {
      width: 105px;
      height: 95px;
    }
  }
  .weather-box {
    position: absolute;
    top: 41px;
    left: 1700px;
    width: max-content;
  }
}
</style>