生物安防

src/router/ChildrenRoutes.js

@@ -4,7 +4,7 @@ const childrenRouters = [
     name: 'Home',
     component: () => import('../views/Home/Home.vue'),
     meta: {
-      title: '海盐数智牧场驾驶舱'
+      title: '青莲数智牧场驾驶舱'
     }
   },
   {
@@ -12,7 +12,7 @@ const childrenRouters = [
     name: 'Home',
     component: () => import('../views/Home/Home.vue'),
     meta: {
-      title: '海盐数智牧场驾驶舱'
+      title: '青莲数智牧场驾驶舱'
     }
   },
   {
@@ -65,4 +65,4 @@ const childrenRouters = [
   },
 ];
 
-export default childrenRouters
+export default childrenRouters

src/views/Home/Home.vue

@@ -143,7 +143,7 @@
             </div>
             <div class="case-one">
               <span style=" padding-right: 5px">本月累计</span>
-              <span><strong class="sign">{{env.monthWater ? env.monthWater : '0'}}</strong>吨</span>
+              <span><strong class="sign" style="font-size: 22px">{{env.monthWater ? env.monthWater : '0'}}</strong>吨</span>
             </div>
           </div>
         </div>

src/views/Home/chart/chartWeather.vue

@@ -32,6 +32,19 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
+          formatter: function (params) {
+            var res = `<div>
+               <div>${params[0].name}</div>
+               <div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
+                  <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
+              params[0].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
+            ]};"></span>
+                  ${params[0].seriesName}:
+                  ${params[0].data}℃
+                </div>
+            <div>`;
+            return res
+          }
         },
         color: ['#49e3e3'],
         // dataZoom: [{
@@ -41,22 +54,33 @@ export default {
         //   show: false
         //
         // }],
+        // grid: {
+        //   y2: 140
+        // },
         xAxis: [
           {
             type: 'category',
             data: time,
-            axisPointer: {
-              type: 'shadow'
-            },
+            boundaryGap: false,
+            // axisPointer: {
+            //   type: 'shadow'
+            // },
             axisLine: {
-              show: false,
+              show: true,
               lineStyle: {
                 color: '#fff',
-              }
+              },
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: -45
             },
             axisTick:{
-              show:false
+              show:true
             },
+            splitLine:{
+              show:false
+            }
           }
         ],
         yAxis: [
@@ -67,19 +91,22 @@ export default {
               formatter: '{value} ℃'
             },
             axisLine: {
-              show: false,
+              show: true,
               lineStyle: {
                 color: '#fff',
               }
             },
             axisTick:{
-              show:false
+              show:true
             },
+            splitLine:{
+              show:false
+            }
           }
         ],
         series: [
           {
-            name: '水量',
+            name: '温度',
             type: 'line',
             // stack: 'Total',
             smooth: true,
@@ -99,7 +126,32 @@ export default {
                 }
               }
             },
-            data: this.data[1]
+            data: this.data[1],
+            markPoint: {
+              label: {
+                show: true,
+                formatter: function (params) {
+                  var res = params.value + '℃';
+                  return res;
+                }
+              },
+              data: [
+                {
+                  type: 'max',
+                  name: 'Max',
+                  color: "#d71345",
+                  itemStyle: {
+                    color: "#d71345",
+                  },
+                },
+                { type: 'min', name: 'Min', color: '#2b4490', itemStyle: {
+                  color: '#2b4490'
+                  } }
+              ]
+            },
+            // markLine: {
+            //   data: [{ type: 'average', name: 'Avg' }]
+            // }
           }
         ]
       }

src/views/MainLayout.vue

@@ -32,7 +32,15 @@
     <div class="main-right" v-show="isHome">
       <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>
+      <template v-if="Object.keys(weatherInfo).length > 0">
+        <i class="shan" v-if="weatherInfo[0].type_name.indexOf('电') != -1" @click="openShow(2)"></i>
+        <i class="wu" v-if="weatherInfo[0].type_name.indexOf('雾') != -1" @click="openShow(2)"></i>
+        <i class="hanchao" v-if="weatherInfo[0].type_name.indexOf('寒潮') != -1" @click="openShow(2)"></i>
+        <i class="taifeng" v-if="weatherInfo[0].type_name.indexOf('台风') != -1" @click="openShow(2)"></i>
+        <i class="dafeng" style="width: 24px; height: 24px" v-if="weatherInfo[0].type_name.indexOf('大风') != -1" @click="openShow(2)"></i>
+        <i class="byu" style="width: 24px; height: 24px" v-if="weatherInfo[0].type_name.indexOf('暴雨') != -1" @click="openShow(2)"></i>
+        <i class="bxue" style="width: 24px; height: 24px" v-if="weatherInfo[0].type_name.indexOf('暴雪') != -1" @click="openShow(2)"></i>
+      </template>
     </div>
     <div class="time" v-show="isHome">{{currentTime}}</div>
     <div class="main-bottom">
@@ -45,7 +53,7 @@
     <transition :name=" isHome ? 'moveL' : 'moveR' ">
       <div id="weather" :class="[isHome ? 'weather1' : 'weather2']" v-if="showWeather">
         <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>
+          <p class="weatherTitle"><strong>{{getFarmName()}}</strong>&emsp;{{weather.location.replace(/,/g, '-')}}&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>
@@ -62,39 +70,22 @@
               <i class="wu maxSize" v-else-if="weather.day_weather === '雾'"></i>
               <span>{{weather.degree}}℃</span>
             </div>
+            <div class="FlexInfo">
+              <p>空气质量：<span>{{weather.airQuility}}</span></p>
+              <p>空气湿度：<span>{{weather.humidity}}</span></p>
+            </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>0
         <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;">
+            <p style="display: inline-block; width: 28px; height: 28px;">
               <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>
@@ -114,7 +105,7 @@
           </div>
           <div>
             <p>{{weather.tomorrow.weather_time}}</p>
-            <p style="display: inline-block; width: 24px; height: 24px;">
+            <p style="display: inline-block; width: 28px; height: 28px;">
               <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>
@@ -134,7 +125,7 @@
           </div>
           <div>
             <p>{{weather.towTomorrow.weather_time}}</p>
-            <p style="display: inline-block; width: 24px; height: 24px;">
+            <p style="display: inline-block; width: 28px; height: 28px;">
               <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>
@@ -154,7 +145,7 @@
           </div>
           <div>
             <p>{{weather.threeTomorrow.weather_time}}</p>
-            <p style="display: inline-block; width: 24px; height: 24px;">
+            <p style="display: inline-block; width: 28px; height: 28px;">
               <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>
@@ -474,7 +465,7 @@ export default {
     background-color: rgba(0, 0, 0, .8);
     position: absolute;
     width: 700px;
-    height: 800px;
+    height: 700px;
     top: 0;
   }
   .weather1 {
@@ -701,6 +692,33 @@ export default {
     margin-top: 10px;
     cursor: pointer;
   }
+  .hanchao {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background: url('../assets/weather/hanchao.png');
+    background-size: contain;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+  .taifeng {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background: url('../assets/weather/taifeng.png');
+    background-size: contain;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+  .dafeng {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background: url('../assets/weather/dafeng.png');
+    background-size: contain;
+    margin-top: 10px;
+    cursor: pointer;
+  }
   .alarmlist {
     width: 200px;
     height: 100px;
@@ -793,12 +811,12 @@ export default {
   }
   .chart {
     width: 100%;
-    height: calc(100% - 350px);
+    height: calc(100% - 400px);
   }
   .weatherGrid {
     width: 100%;
     box-sizing: border-box;
-    height: 150px;
+    height: 200px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr;
@@ -813,6 +831,7 @@ export default {
     color: #fff;
     box-sizing: border-box;
     padding-top: 10px;
+    font-size: 18px;
   }
   .weatherGrid > div:nth-child(2) {
     border-left: none;