基于vue2封装的天气卡片组件

<template>
<div>
  <div class="x-card-box">
    <div class="x_left-card">
      <div class="x_tq_title">
        <span class="x_tq_type">{{sheng}}，{{shi}}</span>
        <span class="x_tq_date">{{date}}</span>
        <span class="x_tq_date">{{weekday}}</span>
      </div>
      <div class="x_tq_title">
        <span class="x_tq_num-blue">风向：{{wind}}</span>
        <span class="x_tq_num-blue">湿度：42%</span>
        <span class="x_tq_num-blue">气压：929hP</span>
      </div>
    </div>
    <div class="x_tq_right-card">{{mintem}}℃~{{maxtem}}℃</div>
  </div>
  <div class="x_tq-content">
    <div style="width: 100%; height: 100%;" ref="chart"></div>
  </div>
</div>
</template>

<script>
import dayjs from "dayjs";
import {get7DaysWeather} from "@/api/work/bdss-data-prepare/bigscreen";
import elementResizeDetectorMaker from "element-resize-detector";
import {debounce} from "@/util/util";

export default {
  name: "WeatherCard",

  data() {
    return {
      selectCity: 2,
      selectOptions: null,
      citys:[],
      xdata:[],
      ydata1:[],
      ydata2:[],
      date:'',
      sheng:'广西',
      shi:'',
      shengvalue:'',
      mintem:'',
      maxtem:'',
      weekday:'',
      weekdays:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      wind:'',
      conditions:[],
      pictures:[
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/weather_image01.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/暴雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/暴雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/暴雨转大雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/大暴雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/大暴雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/大雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/大雨转暴雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/大雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/大雨转暴雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/冻雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/多云.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/浮尘.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/雷阵雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/雷阵雨加冰雹.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/霾.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/强沙尘暴.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/晴.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/沙尘暴.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/特大暴雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/雾.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/小雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/小雪转中雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/小雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/小雨转中雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/扬沙.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/阴.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/雨夹雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/阵雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/阵雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/中雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/中雪转大雪.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/中雨.png'
          },
          height: 12,
          width: 20
        },
        {
          backgroundColor: {
            image: '/img/tidalcurrent/weather/中雨转大雨.png'
          },
          height: 12,
          width: 20
        },

      ]

    };
  },
  mounted() {
    this.date = dayjs().format("YYYY-MM-DD");
    this.selectCity = 2;
    this.weekday = this.weekdays[new Date().getDay()];
    {
      let temp = [];
      let a = ['广西', '广东', '贵州', '云南', '海南']
      let b = [
        ['桂林', '柳州', '梧州', '百色', '南宁', '北海', '防城港'],
        ['广州', '云浮', '清远', '中山', '湛江', '茂名'],
        ['贵阳', '遵义', '六盘水', '黔西南'],
        ['昆明', '曲靖', '普洱', '玉溪', '红河', '丽江'],
        ['海口', '文昌', '儋州', '昌江', '三亚'],
      ]
      let c = 1;
      for (let i = 0; i < a.length; i++) {

        let d = {
          value: c++,
          label: a[i],
          children: []
        }
        temp.push(d)
        for (let j = 0; j < b[i].length; j++) {
          d.children.push({
            value: c++,
            label: b[i][j],
          });
          this.citys.push({
            value: c-1,
            label: b[i][j],
          })
        }
      }
      console.log(temp)
      this.selectOptions = temp
    }
    this.getWeather();
    //this.initChart()
  },
  methods: {
    changeCity() {
      console.log("------8888", this.selectCity);
      console.log("------999", this.citys);
      console.log("------101010", this.selectOptions);

      this.shengvalue = this.selectCity[0];
      this.selectCity = this.selectCity[1];
      this.getWeather();
    },
    getWeather() {

      let city = '';

      let citys2 = this.citys;

      for (let i = 0; i < this.selectOptions.length; i++) {
        if(this.selectOptions[i].value === this.shengvalue) {
          this.sheng = this.selectOptions[i].label;
        }
      }

      for (let th = 0; th < citys2.length; th++) {
        if(this.selectCity === citys2[th].value) {
          this.shi = citys2[th].label;
          city = citys2[th].label;
        }
      }

      get7DaysWeather(city).then(res => {
        if(res.data.code === 0) {
          if(res.data.data.length > 0) {
            this.xdata = [];

            this.ydata1 = [];
            this.ydata2 = [];
            this.conditions = [];
            for (let i = 0; i < 7; i++) {
              if(i === 0) {
                this.maxtem = res.data.data[i].maxtemp;
                this.mintem = res.data.data[i].mintemp;
                let windstr = res.data.data[i].wind;
                this.wind = windstr.substring(0, windstr.indexOf('风') + 1);
              }
              this.xdata.push(res.data.data[i].dates);
              this.ydata1.push(res.data.data[i].maxtemp);
              this.ydata2.push(res.data.data[i].mintemp);
              this.conditions.push(res.data.data[i].conditions);
            }
            this.initChart();
          }

        }
      })
    },
    initChart() {
      let option = {
        grid: {
          show: true,
          backgroundColor: 'transparent',
          opacity: 0.3,
          borderWidth: '0',
          top: 80,
          bottom: 50
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false
        },
        xAxis: [
          // 日期
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: 75,
            zlevel: 100,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: [
                '{a|{value}}'
              ].join('\n'),
              rich: {
                a: {
                  // color: 'white',
                  fontSize: 12
                }
              }
            },
            nameTextStyle: {

            },
            data: this.xdata
          },
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: 10,
            zlevel: 100,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: function (value, index) {
                return '{' + index + '| }\n{b|' + value + '}'
              },
              rich: {
                0: {
                  backgroundColor: {
                    image: '/img/tidalcurrent/weather/' + this.conditions[0] +'.png'
                  },
                  height: 12,
                  width: 16
                },
                1: {
                  backgroundColor: {
                    image: '/img/tidalcurrent/weather/' + this.conditions[1] +'.png'
                  },
                  height: 12,
                  width: 16
                },
                2: {
                  backgroundColor: {
                    image: '/img/tidalcurrent/weather/' + this.conditions[2]+ '.png'
                  },
                  height: 12,
                  width: 16
                },
                3: {
                  backgroundColor: {
                    image: '/img/tidalcurrent/weather/' + this.conditions[3]+ '.png'
                  },
                  height: 12,
                  width: 16
                },
                4: {
                  backgroundColor: {
                    image: '/img/tidalcurrent/weather/' + this.conditions[4]+ '.png'
                  },
                  height: 12,
                  width: 16
                },
                5: {
                  backgroundColor: {
                    image: '/img/tidalcurrent/weather/' +this.conditions[5] + '.png'
                  },
                  height: 12,
                  width: 16
                },
                6: {
                  backgroundColor: {
                    image: '/img/tidalcurrent/weather/'  + this.conditions[6]+ '.png'
                  },
                  height: 12,
                  width: 16
                },
                b: {
                  // color: 'white',
                  fontSize: 10,
                  lineHeight: 20,
                  height: 16
                }
              }
            },
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: 14
            },
            // data: this.weatherdata.weather
            data: this.conditions
          },
        ],
        yAxis: {
          type: 'value',
          show: false,
          axisLabel: {
            formatter: '{value} °C',
            color: 'white'
          }
        },
        series: [
          {
            name: '最高气温',
            type: 'line',
            data: this.ydata1,
            symbol: 'emptyCircle',
            symbolSize: 10,
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#5E7CA0'
              }
            },
            label: {
              show: true,
              position: 'top',
              // color: 'white',
              formatter: '{c} °C'
            },
            lineStyle: {
              width: 1,
              // color: 'white'
            },
            areaStyle: {
              opacity: 1,
              color: 'transparent'
            }
          },
          {
            name: '最低气温',
            type: 'line',
            data: this.ydata2,
            symbol: 'emptyCircle',
            symbolSize: 10,
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#5E7CA0'
              }
            },
            label: {
              show: true,
              position: 'bottom',
              // color: 'white',
              formatter: '{c} °C'
            },
            lineStyle: {
              width: 1,
              // color: 'white'
            },
            areaStyle: {
              opacity: 1,
              color: 'transparent'
            }
          }
        ]
      }
      let chart = echarts.init(this.$refs.chart);
      chart.setOption(option)

      elementResizeDetectorMaker().listenTo(this.$refs.chart, (element) => {
        debounce.call(
          this,
          () => {
            chart.resize();
          },
          "timer1"
        );
      });

    }
  }
}
</script>

<style scoped lang="scss">
.x-card-box {
  height: 45px;
  display: flex;
  flex-direction: row;

  .x_left-card {
    flex: 1;
    padding-top: 5px;

    .x_tq_title {
      padding-left: 12px;

      .x_tq_type {
        font-size: 12px;
        line-height: 16px;
        font-weight: bold;
        margin-right: 8px;
      }

      .x_tq_date {
        font-size: 12px;
        line-height: 16px;
        font-weight: bold;
        margin-right: 8px;
      }

      .x_tq_num-blue {
        font-size: 12px;
        color: #5d95d9;
        padding: 0 5px;

        &:first-child {
          padding-left: 0;
        }

        &:not(:last-child) {
          border-right: 1px solid #5E7CA0;
        }
      }
    }

  }

  .x_tq_right-card {
    width: 120px;
    text-align: right;
    font-size: 18px;
    padding-right: 10px;
    font-weight: bolder;
    line-height: 45px;
  }
}
.x_tq-content {
  height: calc(100% - 113px);
  width: 100%;
}
</style>