|
|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
- <div class="MainLayout">
|
|
|
+ <div class="MainLayout" @click="showWeather = false">
|
|
|
<div class="main-title">{{title}}</div>
|
|
|
<div class="main-left">
|
|
|
<!-- 天气 -->
|
|
|
- <div v-show="isHome" class="main-home" @click="showWeather = true">
|
|
|
+ <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>
|
|
|
@@ -16,7 +16,8 @@
|
|
|
<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="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>
|
|
|
@@ -29,71 +30,72 @@
|
|
|
<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>-->
|
|
|
+ <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">青莲食品</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">
|
|
|
- <div style="text-align: left">
|
|
|
- <i class="el-icon-back" style="font-size: 24px; color: #fff; cursor: pointer" @click="showWeather = false"></i>
|
|
|
+ <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>
|
|
|
- <iframe style="width: 800px; height: 800px; z-index: 9999" src="static/weather/index.html" frameborder="0"></iframe>
|
|
|
</div>
|
|
|
</transition>
|
|
|
-<!-- <div class="bio-dialog" v-show="isShow" @click="isShow = false">-->
|
|
|
-<!-- <div class="dialog-content">-->
|
|
|
-<!-- <h2>牧场列表</h2>-->
|
|
|
-<!-- <div class="div-text" v-for="item in farmList" :key="item.id" @click="jumps(item.url)">{{item.name}}</div>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
<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} from "@/utils/api";
|
|
|
+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
|
|
|
+ 'el-select': Select,
|
|
|
+ chartWeather
|
|
|
+
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -108,6 +110,17 @@ export default {
|
|
|
xList: [],
|
|
|
isShow: false,
|
|
|
getFarmList: [],
|
|
|
+ alarm: {
|
|
|
+ maxTem: false,
|
|
|
+ minTem: false,
|
|
|
+ maxTemStr: '',
|
|
|
+ minTemStr: '',
|
|
|
+ },
|
|
|
+ alarmList: ['高温报警', '低温报警', '恶劣天气报警'],
|
|
|
+ active: 0,
|
|
|
+ str: '',
|
|
|
+ alarmType: false,
|
|
|
+ weatherList: [],
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -184,10 +197,20 @@ export default {
|
|
|
},
|
|
|
// 刷新拿到数据
|
|
|
refresh() {
|
|
|
- getWeather({}).then(res => {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -206,6 +229,29 @@ export default {
|
|
|
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()
|
|
|
@@ -266,8 +312,8 @@ export default {
|
|
|
width: 180px;
|
|
|
height: 40px;
|
|
|
position: absolute;
|
|
|
- top: 15px;
|
|
|
- right: 150px;
|
|
|
+ top: 0;
|
|
|
+ right: 125px;
|
|
|
}
|
|
|
.main-home {
|
|
|
width: 100%;
|
|
|
@@ -286,7 +332,7 @@ export default {
|
|
|
height: 50px;
|
|
|
/*background-color: red;*/
|
|
|
position: absolute;
|
|
|
- line-height: 50px;
|
|
|
+ /*line-height: 50px;*/
|
|
|
color: #66FFFF;
|
|
|
font-size: 24px;
|
|
|
font-weight: 600;
|
|
|
@@ -305,7 +351,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
#weather {
|
|
|
- background-color: rgba(0, 0, 0, .5);
|
|
|
+ background-color: rgba(0, 0, 0, .8);
|
|
|
position: absolute;
|
|
|
width: 800px;
|
|
|
height: 800px;
|
|
|
@@ -442,6 +488,13 @@ export default {
|
|
|
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;
|
|
|
@@ -501,4 +554,77 @@ export default {
|
|
|
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>
|
