FE-daPengDaPing-led/src/views/components/headComponent.vue

<!--title-->
<template>
  <div class="headComponent">
    <div class="center-title-box">
      <img class="logo-img" src="@/assets/ZDimages/logo.png">
      <p class="title-p">公共科教条件设施数据一张图</p>
    </div>
    <p class="time-p">{{timeData}}</p>
    <div class="weather-box">
      <img class="weather-img" src="@/assets/ZDimages/icon_bjsj_tk@1x.png">
      <p class="weather-p-1">{{weatherData.cityName}}</p>
      <svg-icon class="weather-svg" :icon-class="weatherData.iconUrl" v-if="weatherData.iconUrl"/>
      <p class="weather-p-2">{{weatherData.textDay}}</p>
      <p class="weather-p-3">{{weatherData.tempMin}}~{{weatherData.tempMax}}℃</p>
    </div>
  </div>
</template>
<script>
  import {
    laboratoryWsBigViewGetTimeData,
    laboratoryWsBigViewGetWeatherData
  } from "@/api/index";
  export default {
    name: 'headComponent',
    data () {
      return {
        title:'1区环境感知监测中心',
        timeData:'',
        timer:null,
        weatherData:'',
        weatherTimer:null,
      }
    },
    created(){

    },
    mounted(){
      this.timeFunction();
      this.weatherFunction();
    },
    methods:{
      //时间定时器
      timeFunction(){
        let self = this;
        this.laboratoryWsBigViewGetTimeData();
        this.timer = window.setInterval(() => {
          self.laboratoryWsBigViewGetTimeData();
        }, 30000);
      },
      laboratoryWsBigViewGetTimeData(){
        laboratoryWsBigViewGetTimeData().then(res => {
          this.$set(this,'timeData',res.data)
        })
      },
      //天气定时器
      weatherFunction(){
        let self = this;
        this.laboratoryWsBigViewGetWeatherData();
        this.weatherTimer = window.setInterval(() => {
          self.laboratoryWsBigViewGetWeatherData();
        }, 360000);
      },
      laboratoryWsBigViewGetWeatherData(){
        laboratoryWsBigViewGetWeatherData().then(res => {
          let data = JSON.parse(res.data);
          this.$set(this,'weatherData',data);
        })
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.timer);
      window.clearInterval(this.weatherTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.timer);
      window.clearInterval(this.weatherTimer);
    }
  }
</script>
<style scoped lang="scss">
  .headComponent{
    height:173px;
    display: flex;
    position: relative;
    background-image: url("../../assets/ZDimages/img_db@1x.png");
    background-size: 100% 100%;
    .center-title-box{
      display: flex;
      .logo-img{
        margin:35px 16px 0 1245px;
        width:64px;
        height:64px;
      }
      .title-p{
        flex:1;
        line-height:48px;
        height:48px;
        margin-top:40px;
        font-family: Alimama ShuHeiTi;
        font-size: 40px;
        font-weight: bold;
        background: -webkit-linear-gradient(#FFFFFF, #0095FF);
        -webkit-background-clip: text;
        color: transparent;
      }
    }
    .time-p{
      position: absolute;
      top:99px;
      left:44px;
      height:30px;
      line-height:30px;
      color:#fff;
      font-size:20px;
    }
    .weather-box{
      display: flex;
      position: absolute;
      top:99px;
      right:33px;
      height:30px;
      line-height:30px;
      color:#fff;
      font-size:20px;
      .weather-img{
        width:24px;
        height:24px;
        margin:3px 13px 0 0 ;
      }
      .weather-p-1{

      }
      .weather-svg{
        width:24px;
        height:24px;
        color:#fff;
        margin:3px 10px 0 40px;
      }
      .weather-p-2{
        margin-right:20px;
      }
      .weather-p-3{

      }
    }
  }
</style>