hyyfScreen/src/views/MainLayout.vue

<template>
  <div class="MainLayout" @click="showWeather = false">
    <div class="main-title">{{title}}</div>
    <div class="main-left">
      <!--  天气    -->
      <div v-show="isHome" class="main-home" @click.stop="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>
            <i class="wu" 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">
      <i class="maxTem" v-if="alarm.maxTem" @click="openShow(0)"></i>
      <i class="minTem" v-if="alarm.minTem" @click="openShow(1)"></i>
      <i class="shan" v-if="Object.keys(weatherInfo).length > 0" @click="openShow(2)"></i>
    </div>
    <div class="time" v-show="isHome">{{currentTime}}</div>
    <div class="main-bottom">
      <p style="margin: 0">青莲食品</p>
      <p style="font-size: 12px; margin: 0; color: #fff; opacity: 0.4">本软件由杭州慧牧提供技术支持</p>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <transition :name=" isHome ? 'moveL' : 'moveR' ">
      <div id="weather" :class="[isHome ? 'weather1' : 'weather2']" v-if="showWeather">
        <h2 style="color:white;">{{getFarmName()}}</h2>
        <div class="weatherList">
          <div class="grid">
            <div class="grid-title">今天</div>
            <div class="grid-content">当前天气：{{weather.day_weather}}</div>
            <div class="grid-content">当前气温：{{weather.degree}}℃</div>
            <div class="grid-content">最低温度：{{weather.min_degree}}℃</div>
            <div class="grid-content">最高温度：{{weather.max_degree}}℃</div>
          </div>
          <div class="grid">
            <div class="grid-title">明天</div>
            <div class="grid-content">当天天气：{{weather.tomorrow.day_weather}}</div>
            <div class="grid-content">最低温度：{{weather.tomorrow.min_degree}}℃</div>
            <div class="grid-content">最高温度：{{weather.tomorrow.max_degree}}℃</div>
          </div>
          <div class="grid">
            <div class="grid-title">后天</div>
            <div class="grid-content">当天天气：{{weather.towTomorrow.day_weather}}</div>
            <div class="grid-content">最低温度：{{weather.towTomorrow.min_degree}}℃</div>
            <div class="grid-content">最高温度：{{weather.towTomorrow.max_degree}}℃</div>
          </div>
        </div>
        <div class="chart">
          <chart-weather :data="weatherList"></chart-weather>
        </div>
      </div>
    </transition>
    <div class="farm">
      <label>当前牧场：</label>
      <el-select @change="onChange" v-model="farmId" size="mini" style="width: 150px;">
        <el-option v-for="item in getFarmList" :key="item.id" :label="item.farmName" :value="item.id"></el-option>
      </el-select>
    </div>
    <div class="alarm" v-show="alarmType">
      <p style="color: white">{{alarmList[active]}}</p>
      <p style="color: white">{{str}}</p>
    </div>
  </div>
</template>

<script>
import {getFarmId, getWeather, findUpdate, InfoWeater} from "@/utils/api";
import { mapActions, mapState } from 'vuex';
import { Select } from "element-ui";
import chartWeather from "@/views/Home/chart/chartWeather";

export default {
  name: "MainLayout",
  components: {
    'el-select': Select,
    chartWeather

  },
  data() {
    return {
      title: '',
      isHome: true,
      currentTime: '',
      timer4: null,
      showWeather: false,
      weather: {},
      // 天气报警
      weatherInfo: {},
      xList: [],
      isShow: false,
      getFarmList: [],
      alarm: {
        maxTem: false,
        minTem: false,
        maxTemStr: '',
        minTemStr: '',
      },
      alarmList: ['高温报警', '低温报警', '恶劣天气报警'],
      active: 0,
      str: '',
      alarmType: false,
      weatherList: [],
    }
  },
  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);
        }
      }
    },
    farmList: {
      handler(newVal) {
        if(newVal.length > 0) {
          this.getFarmList = []
          newVal.forEach(item => {
            if(item.rowStatus) {
              this.getFarmList.push(item)
            }
          })
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapState(['farmList', 'farmId'])
  },
  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(async res => {
        if(res.code === 10000) {
          this.weather = res.data;
          this.weatherInfo = JSON.parse(res.data.alarm)
          this.weatherList = [res.data.timeList, res.data.tempList]
          let params = {
            maxTem: res.data.max_degree,
            minTem: res.data.min_degree
          }
          await InfoWeater(params).then(res => {
            if(res.code === 10000) {
              this.alarm = res.data;
            }
          })
        }
      })
    },
    // 选择牧场
    onChange(val) {
      let params = {
        id: localStorage.getItem('UserId'),
        lastFarmId: val
      }
      localStorage.setItem('lastFarmId', val)
      findUpdate(params).then(res => {
        console.log(res)
      })
      this.setFarmIdAsync(val);
      setTimeout(() => {
        location.reload();
      }, 100)
    },
    openShow(num) {
      this.active = num;
      this.alarmType = true;
      if(num === 0) {
        this.str = this.alarm.maxTemStr;
      } else if(num === 1) {
        this.str = this.alarm.minTemStr
      } else {
        this.str = '';
      }
      setTimeout(() => {
        this.alarmType = false;
      }, 5000)
    },
    getFarmName() {
      let str = '';
      this.farmList.forEach(item => {
        if(item.id === this.farmId) {
          str = item.farmName
        }
      })
      return str
    }
  },
  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;
    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: 25px;
    line-height: 25px;
    position: absolute;
    top: 25px;
    left: 50.5%;
    text-align: center;
    transform: translate(-50%, 0);
    color: #66FFFF;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
  }
  .main-left {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 150px;
  }
  .main-right {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 125px;
  }
  .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: 20px;
    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, .8);
    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%;
  }
  .wu {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url("../assets/weather/wu.png") no-repeat;
    background-size: 100% 100%;
  }
  .time {
    position: absolute;
    bottom: 35px;
    right: 80px;
    line-height: 50px;
    font-size: 16px;
    color: #289882
  }
  .bio-dialog {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, .9);
    z-index: 999;
  }
  .dialog-content {
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
    text-align: center;
  }
  .div-text {
    width: 400px;
    height: 60px;
    background: url("../assets/101.png") no-repeat;
    background-size: 100% 100%;
    line-height: 60px;
    margin: 20px auto;
    font-size: 20px;
    color: white;
    text-align: center;
    border-bottom: 1px solid #53bafd;
    cursor: pointer;
  }
  .div-text:hover {
    background-color: white;
    color: #53bafd;
    cursor: pointer;
  }
  .farm {
    /*width: 200px;*/
    height: 40px;
    /*background-color: red;*/
    position: absolute;
    bottom: 40px;
    left: 60px;
    line-height: 40px;
    text-align: left;
    color: #fff;
    font-size: 16px;
  }
  .maxTem {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/Home/gaowen.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .minTem {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/Home/diwen.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .shan {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/Home/shandian.png');
    background-size: contain;
    margin-top: 10px;
    cursor: pointer;
  }
  .alarm {
    width: 200px;
    height: 100px;
    position: absolute;
    bottom: 500px;
    right: 100px;
    border: 1px solid red;
    animation: myfirst 1s;
  }
  @keyframes myfirst {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .weatherList {
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
  .grid {
    width: 100%;
    height: 100%;
    color: white;
  }
  .grid-title {
    line-height: 50px;
    font-size: 24px;
  }
  .grid-content {
    box-sizing: border-box;
    line-height: 30px;
    font-size: 16px;
    text-align: left;
    padding-left: 80px;
  }
  .chart {
    width: 100%;
    height: calc(100% - 250px);
  }
</style>