生物安防

src/views/Home/chart/chartWeather.vue

@@ -20,7 +20,7 @@ export default {
     init() {
       let time = [];
       this.data[0].forEach(item => {
-        time.push(item.slice(5, 12))
+        time.push(item.slice(5, 13))
       })
       let options = {
         title: {

src/views/MainLayout.vue

@@ -44,31 +44,135 @@
     </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 class="dayWeather">
+          <p class="weatherTitle"><strong>{{getFarmName()}}</strong>&emsp;今日：{{weather.day_weather}}&emsp;{{weather.min_degree}}℃~{{weather.max_degree}}℃&emsp;{{weather.day_wind_direction}}{{weather.day_wind_power}}级</p>
+          <div class="dayFlex">
+            <div class="FlexIcon">
+              <i class="qing maxSize" v-if="weather.day_weather === '晴'"></i>
+              <i class="duoyun maxSize" v-else-if="weather.day_weather === '多云'"></i>
+              <i class="yin maxSize" v-else-if="weather.day_weather === '阴'"></i>
+              <i class="xiaoyu maxSize" v-else-if="weather.day_weather === '小雨'"></i>
+              <i class="zyu maxSize" v-else-if="weather.day_weather === '中雨'"></i>
+              <i class="dyu maxSize" v-else-if="weather.day_weather === '大雨'"></i>
+              <i class="byu maxSize" v-else-if="weather.day_weather === '暴雨'"></i>
+              <i class="xxue maxSize" v-else-if="weather.day_weather === '小雪'"></i>
+              <i class="zxue maxSize" v-else-if="weather.day_weather === '中雪'"></i>
+              <i class="dxue maxSize" v-else-if="weather.day_weather === '大雪'"></i>
+              <i class="bxue maxSize" v-else-if="weather.day_weather === '暴雪'"></i>
+              <i class="wu maxSize" v-else-if="weather.day_weather === '雾'"></i>
+              <span>{{weather.degree}}℃</span>
+            </div>
+            <div class="FlexInfo" v-if="Object.keys(weatherInfo).length > 0">
+              <p @click.stop="openShow(2)">{{weatherInfo[0].type_name}}{{weatherInfo[0].level_name}}预警</p>
+            </div>
           </div>
         </div>
+<!--        <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 class="weatherGrid">
+          <div>
+            <p>今日</p>
+            <p style="display: inline-block; width: 24px; height: 24px;">
+              <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>
+            </p>
+            <p>{{weather.day_weather}}</p>
+            <p>{{weather.min_degree}}℃~{{weather.max_degree}}℃</p>
+            <p>{{weather.day_wind_direction}}{{weather.day_wind_power}}级</p>
+          </div>
+          <div>
+            <p>{{weather.tomorrow.weather_time}}</p>
+            <p style="display: inline-block; width: 24px; height: 24px;">
+              <i class="qing" v-if="weather.tomorrow.day_weather === '晴'"></i>
+              <i class="duoyun" v-else-if="weather.tomorrow.day_weather === '多云'"></i>
+              <i class="yin" v-else-if="weather.tomorrow.day_weather === '阴'"></i>
+              <i class="xiaoyu" v-else-if="weather.tomorrow.day_weather === '小雨'"></i>
+              <i class="zyu" v-else-if="weather.tomorrow.day_weather === '中雨'"></i>
+              <i class="dyu" v-else-if="weather.tomorrow.day_weather === '大雨'"></i>
+              <i class="byu" v-else-if="weather.tomorrow.day_weather === '暴雨'"></i>
+              <i class="xxue" v-else-if="weather.tomorrow.day_weather === '小雪'"></i>
+              <i class="zxue" v-else-if="weather.tomorrow.day_weather === '中雪'"></i>
+              <i class="dxue" v-else-if="weather.tomorrow.day_weather === '大雪'"></i>
+              <i class="bxue" v-else-if="weather.tomorrow.day_weather === '暴雪'"></i>
+              <i class="wu" v-else-if="weather.tomorrow.day_weather === '雾'"></i>
+            </p>
+            <p>{{weather.tomorrow.day_weather}}</p>
+            <p>{{weather.tomorrow.min_degree}}℃~{{weather.tomorrow.max_degree}}℃</p>
+            <p>{{weather.tomorrow.day_wind_direction}}{{weather.tomorrow.day_wind_power}}级</p>
+          </div>
+          <div>
+            <p>{{weather.towTomorrow.weather_time}}</p>
+            <p style="display: inline-block; width: 24px; height: 24px;">
+              <i class="qing" v-if="weather.towTomorrow.day_weather === '晴'"></i>
+              <i class="duoyun" v-else-if="weather.towTomorrow.day_weather === '多云'"></i>
+              <i class="yin" v-else-if="weather.towTomorrow.day_weather === '阴'"></i>
+              <i class="xiaoyu" v-else-if="weather.towTomorrow.day_weather === '小雨'"></i>
+              <i class="zyu" v-else-if="weather.towTomorrow.day_weather === '中雨'"></i>
+              <i class="dyu" v-else-if="weather.towTomorrow.day_weather === '大雨'"></i>
+              <i class="byu" v-else-if="weather.towTomorrow.day_weather === '暴雨'"></i>
+              <i class="xxue" v-else-if="weather.towTomorrow.day_weather === '小雪'"></i>
+              <i class="zxue" v-else-if="weather.towTomorrow.day_weather === '中雪'"></i>
+              <i class="dxue" v-else-if="weather.towTomorrow.day_weather === '大雪'"></i>
+              <i class="bxue" v-else-if="weather.towTomorrow.day_weather === '暴雪'"></i>
+              <i class="wu" v-else-if="weather.towTomorrow.day_weather === '雾'"></i>
+            </p>
+            <p>{{weather.towTomorrow.day_weather}}</p>
+            <p>{{weather.towTomorrow.min_degree}}℃~{{weather.towTomorrow.max_degree}}℃</p>
+            <p>{{weather.towTomorrow.day_wind_direction}}{{weather.towTomorrow.day_wind_power}}级</p>
+          </div>
+          <div>
+            <p>{{weather.threeTomorrow.weather_time}}</p>
+            <p style="display: inline-block; width: 24px; height: 24px;">
+              <i class="qing" v-if="weather.threeTomorrow.day_weather === '晴'"></i>
+              <i class="duoyun" v-else-if="weather.threeTomorrow.day_weather === '多云'"></i>
+              <i class="yin" v-else-if="weather.threeTomorrow.day_weather === '阴'"></i>
+              <i class="xiaoyu" v-else-if="weather.threeTomorrow.day_weather === '小雨'"></i>
+              <i class="zyu" v-else-if="weather.threeTomorrow.day_weather === '中雨'"></i>
+              <i class="dyu" v-else-if="weather.threeTomorrow.day_weather === '大雨'"></i>
+              <i class="byu" v-else-if="weather.threeTomorrow.day_weather === '暴雨'"></i>
+              <i class="xxue" v-else-if="weather.threeTomorrow.day_weather === '小雪'"></i>
+              <i class="zxue" v-else-if="weather.threeTomorrow.day_weather === '中雪'"></i>
+              <i class="dxue" v-else-if="weather.threeTomorrow.day_weather === '大雪'"></i>
+              <i class="bxue" v-else-if="weather.threeTomorrow.day_weather === '暴雪'"></i>
+              <i class="wu" v-else-if="weather.threeTomorrow.day_weather === '雾'"></i>
+            </p>
+            <p>{{weather.threeTomorrow.day_weather}}</p>
+            <p>{{weather.threeTomorrow.min_degree}}℃~{{weather.threeTomorrow.max_degree}}℃</p>
+            <p>{{weather.threeTomorrow.day_wind_direction}}{{weather.threeTomorrow.day_wind_power}}级</p>
+          </div>
+        </div>
       </div>
     </transition>
     <div class="farm">
@@ -77,10 +181,14 @@
         <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">
+    <div class="alarmlist" v-show="alarmType && active!== 2" @mouseover="stopOut" @mouseout="startOut">
       <p style="color: white">{{alarmList[active]}}</p>
       <p style="color: white">{{str}}</p>
     </div>
+    <div class="alarmText" v-show="alarmType && active === 2"  @mouseover="stopOut" @mouseout="startOut">
+      <p style="color: white">{{alarmInfo}}</p>
+      <p style="color: white">{{str}}</p>
+    </div>
   </div>
 </template>
 
@@ -121,6 +229,8 @@ export default {
       str: '',
       alarmType: false,
       weatherList: [],
+      alarmInfo: '',
+      timer: null
     }
   },
   watch: {
@@ -237,9 +347,10 @@ export default {
       } else if(num === 1) {
         this.str = this.alarm.minTemStr
       } else {
-        this.str = '';
+        this.alarmInfo = this.weatherInfo[0].type_name + this.weatherInfo[0].level_name + '预警';
+        this.str = this.weatherInfo[0].detail;
       }
-      setTimeout(() => {
+      this.timer = setTimeout(() => {
         this.alarmType = false;
       }, 5000)
     },
@@ -251,6 +362,15 @@ export default {
         }
       })
       return str
+    },
+    stopOut() {
+      clearTimeout(this.timer);
+      this.timer = null;
+    },
+    startOut() {
+      this.timer = setTimeout(() => {
+        this.alarmType = false;
+      }, 5000)
     }
   },
   mounted() {
@@ -353,7 +473,7 @@ export default {
   #weather {
     background-color: rgba(0, 0, 0, .8);
     position: absolute;
-    width: 800px;
+    width: 700px;
     height: 800px;
     top: 0;
   }
@@ -581,7 +701,7 @@ export default {
     margin-top: 10px;
     cursor: pointer;
   }
-  .alarm {
+  .alarmlist {
     width: 200px;
     height: 100px;
     position: absolute;
@@ -590,6 +710,15 @@ export default {
     border: 1px solid red;
     animation: myfirst 1s;
   }
+  .alarmText {
+    width: 300px;
+    height: 200px;
+    position: absolute;
+    bottom: 400px;
+    right: 50px;
+    border: 1px solid red;
+    animation: myfirst 1s;
+  }
   @keyframes myfirst {
     0% {
       opacity: 0;
@@ -623,8 +752,77 @@ export default {
     text-align: left;
     padding-left: 80px;
   }
+  .dayWeather {
+    color: white;
+    text-align: left;
+  }
+  .weatherTitle {
+    font-size: 16px;
+    box-sizing: border-box;
+    padding-left: 50px;
+  }
+  .weatherTitle > strong {
+    font-size: 24px;
+  }
+  .dayFlex {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .FlexIcon {
+    width: 200px;
+    height: 90px;
+    box-sizing: border-box;
+    margin-left: 50px;
+    display: flex;
+    align-items: center;
+  }
+  .FlexIcon > span {
+    font-size: 36px;
+    padding-left: 20px;
+    display: inline-block;
+  }
+  .maxSize {
+    width: 90px;
+    height: 90px;
+  }
+  .FlexInfo {
+    margin-left: 30px;
+    font-size: 18px;
+    cursor: pointer;
+  }
   .chart {
     width: 100%;
-    height: calc(100% - 250px);
+    height: calc(100% - 350px);
+  }
+  .weatherGrid {
+    width: 100%;
+    box-sizing: border-box;
+    height: 150px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+    padding: 0 50px;
+  }
+  .weatherGrid > div {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ddd;
+    color: #fff;
+    box-sizing: border-box;
+    padding-top: 10px;
+  }
+  .weatherGrid > div:nth-child(2) {
+    border-left: none;
+    border-right: none;
+  }
+  .weatherGrid > div:nth-child(3) {
+    border-right: none;
+  }
+  .weatherGrid > div > p {
+    margin-top: 0;
+    margin-bottom: 10px;
   }
 </style>