hyyfScreen/src/views/MainLayout.vue

<template>
  <div class="MainLayout">
    <div class="main-title">{{title}}</div>
    <div class="main-left">
      <!--  天气    -->
      <div v-show="isHome" class="main-home" @click="showWeather = true">
        <div class="weatherBox" v-if="Object.keys(weather).length !== 0">
          <div class="box-left">
            <i class="qing" v-if="weather.day_weather === '晴'"></i>
            <i class="duoyun" v-else-if="weather.day_weather === '多云'"></i>
            <i class="yin" v-else-if="weather.day_weather === '阴'"></i>
            <i class="xiaoyu" v-else-if="weather.day_weather === '小雨'"></i>
            <i class="zyu" v-else-if="weather.day_weather === '中雨'"></i>
            <i class="dyu" v-else-if="weather.day_weather === '大雨'"></i>
            <i class="byu" v-else-if="weather.day_weather === '暴雨'"></i>
            <i class="xxue" v-else-if="weather.day_weather === '小雪'"></i>
            <i class="zxue" v-else-if="weather.day_weather === '中雪'"></i>
            <i class="dxue" v-else-if="weather.day_weather === '大雪'"></i>
            <i class="bxue" v-else-if="weather.day_weather === '暴学'"></i>
          </div>
          <div class="box-right">
            <p class="fontSize">{{weather.day_weather}}</p>
            <p class="fontSize">{{weather.min_degree}}-{{weather.max_degree}}℃</p>
          </div>
        </div>
        <div v-else @click="refresh">抓取天气数据失败，请重试</div>
      </div>
      <!--  返回首页    -->
      <div v-show="!isHome" class="main-back" @click="back">首页</div>
    </div>
    <div class="main-right">
      <!-- 时间     -->
      <div v-show="isHome" class="main-time">
        <div v-if="Object.keys(weatherInfo).length !== 0">111</div>
      </div>
      <!--  天气    -->
      <div v-show="!isHome" class="main-home" @click="showWeather = true">
        <div class="weatherBox" v-if="Object.keys(weather).length !== 0">
          <div class="box-left">
            <i class="qing" v-if="weather.day_weather === '晴'"></i>
            <i class="duoyun" v-else-if="weather.day_weather === '多云'"></i>
            <i class="yin" v-else-if="weather.day_weather === '阴'"></i>
            <i class="xiaoyu" v-else-if="weather.day_weather === '小雨'"></i>
            <i class="zyu" v-else-if="weather.day_weather === '中雨'"></i>
            <i class="dyu" v-else-if="weather.day_weather === '大雨'"></i>
            <i class="byu" v-else-if="weather.day_weather === '暴雨'"></i>
            <i class="xxue" v-else-if="weather.day_weather === '小雪'"></i>
            <i class="zxue" v-else-if="weather.day_weather === '中雪'"></i>
            <i class="dxue" v-else-if="weather.day_weather === '大雪'"></i>
            <i class="bxue" v-else-if="weather.day_weather === '暴学'"></i>
          </div>
          <div class="box-right">
            <p class="fontSize">{{weather.day_weather}}</p>
            <p class="fontSize">{{weather.min_degree}}-{{weather.max_degree}}℃</p>
          </div>
        </div>
        <div v-else @click="refresh">抓取天气数据失败，请重试</div>
      </div>
    </div>
    <div class="time">{{currentTime}}</div>
    <div class="main-bottom">青莲食品</div>
    <div class="content">
      <router-view></router-view>
    </div>
    <transition :name=" isHome ? 'moveL' : 'moveR' ">
      <div id="weather" :class="[isHome ? 'weather1' : 'weather2']" v-if="showWeather">
        <div style="text-align: left">
          <i class="el-icon-back" style="font-size: 24px; color: #fff; cursor: pointer" @click="showWeather = false"></i>
        </div>
        <iframe style="width: 800px; height: 800px; z-index: 9999" src="static/weather/index.html" frameborder="0"></iframe>
      </div>
    </transition>
  </div>
</template>

<script>
import {getFarmId, getWeather} from "@/utils/api";
import { mapActions } from 'vuex'

export default {
  name: "MainLayout",
  data() {
    return {
      title: '',
      isHome: true,
      currentTime: '',
      timer4: null,
      showWeather: false,
      weather: {},
      // 天气报警
      weatherInfo: {},
    }
  },
  watch: {
    $route(newVal) {
      if(newVal) {
        this.title = newVal.meta.title;
        if (newVal.name === 'Home') {
          this.isHome = true;
          this.initTime();
        } else {
          this.isHome = false;
          clearInterval(this.timer4);
        }
      }
    }
  },
  methods: {
    ...mapActions(['GetFarm', 'setFarmIdAsync']),
    initTime() {
      var _this = this;
      this.timer4 = setInterval(function() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var hour = date.getHours();
        var minutes = date.getMinutes() ;
        var seconds = date.getSeconds();
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if(hour >=1&& hour <= 9) {
          hour = "0" + hour;
        }
        if(minutes >=1&& minutes <= 9) {
          minutes = "0" + minutes;
        }
        if(seconds >=1&& seconds <= 9) {
          seconds = "0" + seconds;
        }
        _this.currentTime = year + '-' + month + '-' + strDate+"  "+hour+":" +minutes+":" +seconds;
      }, 1000)
    },
    back() {
      this.$router.push('/')
    },
    init() {
      getFarmId().then(res => {
        if(res.code === 10000) {
          this.setFarmIdAsync(res.data);
          localStorage.setItem('lastFarmId', res.data);
          this.refresh()
        }
      })
    },
    // 刷新拿到数据
    refresh() {
      getWeather({}).then(res => {
        if(res.code === 10000) {
          this.weather = res.data;
          this.weatherInfo = JSON.parse(res.data.alarm)
          console.log(this.weatherInfo)
        }
      })
    }
  },
  mounted() {
    this.init()
    this.GetFarm()
    this.title = this.$route.meta.title;
    if (this.$route.name === 'Home') {
      this.isHome = true;
      this.initTime();
    } else {
      this.isHome = false;
      if(this.timer4) {
        clearInterval(this.timer4)
      }
    }
  }
}
</script>

<style scoped>
  .MainLayout {
    width: 100vw;
    height: 100vh;
    background: url("../assets/u1.jpg") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20px 20px;
    position: relative;
  }
  .content {
    width: 100%;
    height: 100%;
    background: url('../assets/home.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 70px 60px;
  }
  .main-title {
    width: 230px;
    height: 52px;
    line-height: 52px;
    position: absolute;
    top: 25px;
    left: 50.5%;
    text-align: center;
    transform: translate(-50%, 0);
    color: #66FFFF;
    font-size: 18px;
    font-weight: 600;
  }
  .main-left {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 15px;
    left: 150px;
  }
  .main-right {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 150px;
  }
  .main-home {
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: white;
  }
  .main-time {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 16px;
  }
  .main-bottom {
    width: 200px;
    height: 50px;
    /*background-color: red;*/
    position: absolute;
    line-height: 50px;
    color: #66FFFF;
    font-size: 24px;
    font-weight: 600;
    left: 51%;
    bottom: 35px;
    transform: translate(-50% , 0);
  }
  .main-back {
    width: 140px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    background: url("../assets/Home/u761.svg") no-repeat;
    background-size: 100% 100%;
    color: white;
    cursor: pointer;
  }
  #weather {
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    width: 800px;
    height: 800px;
    top: 0;
  }
  .weather1 {
    left: 0;
  }
  .weather2 {
    right: 0;
  }
  .moveL-enter-active,
  .moveL-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0%);
  }
  .moveL-enter,
  .moveL-leave {
    transform: translateX(-100%);
  }
  .moveL-leave-to {
    transform: translateX(-100%);
  }
  .moveR-enter-active,  .moveR-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
  }
  .moveR-enter,  .moveR-leave {
    transform: translateX(100%);
  }
  .moveR-leave-to{
    transform: translateX(100%);
  }
  .weatherBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0  20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .box-left {
    width: 35px;
    height: 35px;
  }
  .box-right {
    width: 60px;
    height: 100%;
    margin-left: 20px;
  }
  .qing {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/qingtian.png") no-repeat;
    background-size: 100% 100%;
  }
  .fontSize {
    height: 20px;
    margin: 0;
    line-height: 20px;
    text-align: left;
    color: #28BCCA;
  }
  .duoyun {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/qingzhuanduoyun.png") no-repeat;
    background-size: 100% 100%;
  }
  .yin {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/yintian.png") no-repeat;
    background-size: 100% 100%;
  }
  .xiaoyu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/xiaoyu.png") no-repeat;
    background-size: 100% 100%;
  }
  .zyu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/zhongyu.png") no-repeat;
    background-size: 100% 100%;
  }
  .dyu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/dayu.png") no-repeat;
    background-size: 100% 100%;
  }
  .byu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/baoyu.png") no-repeat;
    background-size: 100% 100%;
  }
  .xxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/xiaoxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .zxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/zhongxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .dxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/daxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .bxue{
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/baoxue.png") no-repeat;
    background-size: 100% 100%;
  }
  .time {
    position: absolute;
    bottom: 35px;
    right: 80px;
    line-height: 50px;
    font-size: 16px;
    color: #289882
  }
</style>