天气

src/utils/api.js

@@ -35,3 +35,38 @@ export function getFarmId(data) {
     params: data,
   })
 }
+
+// 首页生态检测
+export function getScreen(data) {
+  return axios({
+    url: 'produce/room/listLargeScreen',
+    method: 'get',
+    params: data,
+  })
+}
+
+export function getEnv(data) {
+  return axios({
+    url: 'produce/room/getAllRoomEnvironment',
+    method: 'get',
+    params: data
+  })
+}
+
+/* 环境查询 */
+export function getByRoom(data) {
+  return axios({
+    url: '/produce/room/listByRoom',
+    method: 'post',
+    data: data
+  })
+}
+
+/** 栋舍饮用水 **/
+export function getListWater(data) {
+  return axios({
+    url: '/produce/dayWater/listWater',
+    method: 'post',
+    data: data
+  })
+}

src/utils/index.js

@@ -18,3 +18,46 @@ export function timeDate(timestamp) {
   var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
   return Y + M + D
 }
+
+/**
+ * 函数防抖 (只执行最后一次点击)
+ */
+export const Debounce = (fn, t) => {
+  let delay = t || 500;
+  let timer;
+  console.log(fn)
+  console.log(typeof fn)
+  return function () {
+    let args = arguments;
+    if(timer){
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, args);
+    }, delay);
+  }
+};
+/*
+ * 函数节流
+ */
+export const Throttle = (fn, t) => {
+  let last;
+  let timer;
+  let interval = t || 500;
+  return function () {
+    let args = arguments;
+    let now = + new Date();
+    if (last && now - last < interval) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        last = now;
+        fn.apply(this, args);
+      }, interval);
+    } else {
+      last = now;
+      fn.apply(this, args);
+    }
+  }
+};
+

src/views/Home/Home.vue

@@ -100,11 +100,11 @@
           <div class="case-content">
             <div class="case-one">
               <span style=" padding-left: 20px;padding-right: 50px">最高</span>
-              <span><strong class="sign">34.2</strong>℃</span>
+              <span><strong class="sign">{{env.maxTem}}</strong>℃</span>
             </div>
             <div class="case-one">
               <span style=" padding-left: 20px; padding-right: 50px">最低</span>
-              <span><strong class="sign">24.1</strong>℃</span>
+              <span><strong class="sign">{{env.minTem}}</strong>℃</span>
             </div>
           </div>
         </div>
@@ -113,11 +113,11 @@
           <div class="case-content">
             <div class="case-one">
               <span style="padding-left: 40px; padding-right: 50px">最高</span>
-              <span><strong class="sign">95</strong>RH</span>
+              <span><strong class="sign">{{env.maxHum}}</strong>RH</span>
             </div>
             <div class="case-one">
               <span style="padding-left: 40px; padding-right: 50px">最低</span>
-              <span><strong class="sign">55</strong>RH</span>
+              <span><strong class="sign">{{env.minHum}}</strong>RH</span>
             </div>
           </div>
         </div>
@@ -138,12 +138,12 @@
           <div class="case-title">猪舍用水量</div>
           <div class="case-content">
             <div class="case-one">
-              <span style="padding-right: 50px">今日累计</span>
-              <span><strong class="sign">7</strong>吨</span>
+              <span style="padding-right: 5px">今日累计</span>
+              <span><strong class="sign">{{env.dayWater}}</strong>吨</span>
             </div>
             <div class="case-one">
-              <span style=" padding-right: 50px">本月累计</span>
-              <span><strong class="sign">154</strong>吨</span>
+              <span style=" padding-right: 5px">本月累计</span>
+              <span><strong class="sign">{{env.monthWater}}</strong>吨</span>
             </div>
           </div>
         </div>
@@ -261,6 +261,8 @@
 </template>
 
 <script>
+import {getScreen} from "@/utils/api";
+
 export default {
   name: "Home",
   data() {
@@ -312,9 +314,17 @@ export default {
       //获取当前时间
       timer4: null,
       currentTime: new Date(),
+      env: {},
     }
   },
   methods: {
+    init() {
+      getScreen({}).then(res => {
+        if(res.code === 10000) {
+          this.env = res.data;
+        }
+      })
+    },
     prev() {
       if(this.num > 0) {
         this.num--;
@@ -377,6 +387,7 @@ export default {
     },
   },
   mounted() {
+    this.init()
     this.width = this.list.length * (220 + 180) - 90;
     this.initLine()
     this.initData();
@@ -684,4 +695,4 @@ export default {
     background: linear-gradient(to bottom, rgba(102, 255, 255, .1), rgba(102, 255, 255, .3));
     /*background-color: rgba(102, 255, 255, .2);*/
   }
-</style>
+</style>

src/views/MainLayout.vue

@@ -32,7 +32,7 @@
       <!-- 时间     -->
       <div v-show="isHome" class="main-time">{{currentTime}}</div>
       <!--  天气    -->
-      <div v-show="!isHome" class="main-home">
+      <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>
@@ -59,8 +59,8 @@
     <div class="content">
       <router-view></router-view>
     </div>
-    <transition name = "moveL">
-      <div id="weather" v-if="showWeather">
+    <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>
@@ -258,8 +258,13 @@ export default {
     width: 800px;
     height: 800px;
     top: 0;
+  }
+  .weather1 {
     left: 0;
   }
+  .weather2 {
+    right: 0;
+  }
   .moveL-enter-active,
   .moveL-leave-active {
     transition: all 0.3s linear;
@@ -272,6 +277,16 @@ export default {
   .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%;

src/views/Zoology/Zoology.vue

@@ -32,25 +32,25 @@
         </div>
         <!-- 左上循环滑动 -->
         <div class="left-top-content">
-          <swiper style="height: 600px;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
-            <swiper-slide v-for="item in 10" :key="item">
-              <swiper-content :list="swiperData"></swiper-content>
+          <swiper style="height: 600px;  margin-top: auto; margin-bottom: auto;" ref="mySwiper" class="swiper" :options="swiperOption">
+            <swiper-slide v-for="item in swiperData" :key="item.roomId">
+              <swiper-content @getRoomId="getRoomId" :list="item" @onLeave="onLeave" @onEnter="onEnter"></swiper-content>
             </swiper-slide>
           </swiper>
         </div>
       </div>
       <div class="left-middle">
-        <chart-board 
-          :title="'单元用水量'" 
-          :ifDate="true" 
+        <chart-board
+          :title=" roomName + '用水量'"
+          :ifDate="true"
           @emitDates="getWaterDates">
           <chart-line :data="waterData" :id="1"></chart-line>
         </chart-board>
       </div>
       <div class="left-bottom">
-        <chart-board 
-          :title="'整栋用电量'" 
-          :ifDate="true" 
+        <chart-board
+          :title=" roomName + '整栋用电量'"
+          :ifDate="true"
           @emitDates="getElecDates">
           <chart-line-and :data="waterData" :id="2"></chart-line-and>
         </chart-board>
@@ -63,17 +63,17 @@
       </div>
       <div class="right-bottom">
         <div class="right-bottom-left">
-          <chart-board 
-            :title="'单元用水量'" 
+          <chart-board
+            :title=" roomName + '温度'"
             @emitDates="getWaterDates">
-            <chart-line :data="waterData" :id="4"></chart-line>
+            <chart-line :data="tempData" :id="4"></chart-line>
           </chart-board>
         </div>
         <div class="right-bottom-right">
-          <chart-board 
-            :title="'单元用水量'" 
+          <chart-board
+            :title=" roomName +'湿度'"
             @emitDates="getWaterDates">
-            <chart-line :data="waterData" :id="5"></chart-line>
+            <chart-line :data="rhData" :id="5"></chart-line>
           </chart-board>
         </div>
       </div>
@@ -90,6 +90,8 @@ import SwiperContent from './leftTop/SwiperContent.vue'
 import ChartBoard from './charts/ChartBoard.vue'
 import ChartLine from './charts/ChartLine.vue'
 import ChartLineAnd from './charts/ChartLineAnd.vue'
+import {getEnv, getByRoom, getListWater} from "@/utils/api";
+import { timeDate, Debounce } from "@/utils";
 
 export default {
   name: "Zoology",
@@ -117,46 +119,15 @@ export default {
         { id: 8, name: '1111111' },
       ],
       swiperOption: { // 左上 —— 循环滑动
-        direction: 'vertical',
-        slidesPerView: 3,
-        slidesPerColumn: 1,
-        slidesPerGroup: 3,
-        // spaceBetween: 30,
+        slidesPerView: 4,
         autoplay: {
           delay: 3000,
-          disableOnInteraction: false
+          stopOnLastSlide: true,
+          disableOnInteraction: true
         },
-        // pagination: {
-        //   el: '.swiper-pagination',
-        //   clickable: true
-        // }
+        loop: true,
       },
-      swiperData: [
-        {
-          id: '121',
-          title: '育肥1栋1单元',
-          temp: 31.5,
-          rh: 81
-        },
-        {
-          id: '121a',
-          title: '育肥1栋1单元',
-          temp: 31.5,
-          rh: 84
-        },
-        {
-          id: '121s',
-          title: '育肥1栋1单元',
-          temp: 31.5,
-          rh: 81
-        },
-        {
-          id: '121d',
-          title: '育肥1栋1单元',
-          temp: 31.5,
-          rh: 81
-        }
-      ],
+      swiperData: [],
       waterDates: [], // 用水量模拟
       waterData: { // 左中 —— 模拟数据
         xAxisName: '',
@@ -164,10 +135,35 @@ export default {
         yAxisName: '吨',
         yAxisData: [37.1, 37.4, 36.8, 37.9, 34.2]
       },
+      tempData: {
+        xAxisName: '',
+        xAxisData: [],
+        yAxisName: '℃',
+        yAxisData: [],
+      },
+      rhData: {
+        xAxisName: '',
+        xAxisData: [],
+        yAxisName: 'RH',
+        yAxisData: [],
+      },
+      roomName: '',
       elecDates: [] // 用电量时间
     }
   },
+  computed: {
+    swipers() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
   methods: {
+    init() {
+      getEnv({}).then(res => {
+        if(res.code === 10000) {
+          this.swiperData = res.data;
+        }
+      })
+    },
     leftTopSelect() { // 左上角的选择是否显示
       this.leftTopSelected = !this.leftTopSelected
     },
@@ -176,8 +172,80 @@ export default {
     },
     getElecDates(value) { // 左下 获取时间
       this.elecDates = value
-    }
+    },
+    getRoomId: Debounce(function(id) {
+      let params = {
+        roomId: id,
+        endDate: timeDate(new Date().getTime()),
+        type: 1
+      }
+      getByRoom(params).then(res => {
+        if(res.code === 10000) {
+          this.setTempAndRh(res.data);
+        }
+      })
+      let params1 = {
+        roomId: id,
+        endDate: timeDate(new Date().getTime()),
+        type: 2
+      }
+      getListWater(params1).then(res => {
+        if(res.code === 10000) {
+          this.setWeather(res.data);
+        }
+      })
+    }),
+
+    setTempAndRh(data) {
+      this.tempData.xAxisData = [];
+      this.tempData.yAxisData = [];
+      this.rhData.xAxisData = [];
+      this.rhData.yAxisData = [];
+      this.roomName = data.roomName;
+      data.semperatures.forEach(item => {
+        this.tempData.xAxisData.push(item.createTime);
+        this.tempData.yAxisData.push(item.value);
+      })
+      data.humidities.forEach(item => {
+        this.rhData.xAxisData.push(item.createTime);
+        this.rhData.yAxisData.push(item.value);
+      })
+    },
+    setWeather(data) {
+      this.waterData.xAxisData = [];
+      this.waterData.yAxisData = [];
+      data.data.forEach(item => {
+        this.waterData.xAxisData.push(item.createTime);
+        this.waterData.yAxisData.push(item.value)
+      })
+    },
+    initData() {
+      getByRoom({}).then(res => {
+        if(res.code === 10000) {
+          this.setTempAndRh(res.data);
+        }
+      })
+      let params1 = {
+        endDate: timeDate(new Date().getTime()),
+        type: 2
+      }
+      getListWater(params1).then(res => {
+        if(res.code === 10000) {
+          this.setWeather(res.data);
+        }
+      })
+    },
+    onEnter() {
+      this.swipers.autoplay.stop();
+    },
+    onLeave() {
+      this.swipers.autoplay.start();
+    },
   },
+  mounted() {
+    this.init()
+    this.initData();
+  }
 }
 </script>
 
@@ -324,4 +392,4 @@ export default {
   margin-left: 10px;
   width: 50%;
 }
-</style>
+</style>

src/views/Zoology/charts/ChartBoard.vue

@@ -10,18 +10,18 @@
   <div class="chart-board">
     <div class="title-bar">
       <div class="title">{{ title }}</div>
-      <div v-if="ifDate" class="date">
-        <el-date-picker
-          v-model="dates"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          value-format="yyyy-MM-dd"
-          size="mini"
-          @change="getDates">
-        </el-date-picker>
-      </div>
+<!--      <div v-if="ifDate" class="date">-->
+<!--        <el-date-picker-->
+<!--          v-model="dates"-->
+<!--          type="daterange"-->
+<!--          range-separator="至"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          value-format="yyyy-MM-dd"-->
+<!--          size="mini"-->
+<!--          @change="getDates">-->
+<!--        </el-date-picker>-->
+<!--      </div>-->
     </div>
     <div class="chart">
       <slot></slot>

src/views/Zoology/charts/ChartLine.vue

@@ -8,7 +8,7 @@
 -->
 <template>
   <div :id="'chartLine' + id" class="chart-line">
-    
+
   </div>
 </template>
 <script>
@@ -124,9 +124,14 @@ export default {
     this.init();
   },
   watch: {
-    data(newValue) {
-      console.log(newValue)
-      this.init()
+    data: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init();
+        }
+      },
+      deep: true,
     }
   }
 }

src/views/Zoology/leftTop/SwiperContent.vue

@@ -7,16 +7,16 @@
  * @FilePath: \hyyfScreen\src\views\Zoology\leftTop\SwiperContent.vue
 -->
 <template>
-  <div class="swiper-content">
-    <div v-for="item in list" :key="item.id" class="content">
-      <div class="title">{{ item.title }}</div>
+  <div class="swiper-content" @mouseover="onEnter" @mouseout="onLeave">
+    <div  class="content" @click.stop="jump(list.roomId)">
+      <div class="title">{{ list.room }}</div>
       <div class="item">
         <div class="temp-icon"></div>
-        <div class="data">{{ item.temp }}℃</div>
+        <div class="data">{{ list.temperature ? list.temperature + '℃' : '设备暂无数据' }}</div>
       </div>
       <div class="item">
         <div class="rh-icon"></div>
-        <div class="data">{{ item.rh }}RH</div>
+        <div class="data">{{ list.humidity ? list.humidity + 'RH' : '设备暂无数据' }}</div>
       </div>
     </div>
   </div>
@@ -25,8 +25,21 @@
 export default {
   props: {
     list: {
-      type: Array,
-      default: () => []
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  methods: {
+    jump(id) {
+      this.$emit('getRoomId', id);
+    },
+    onEnter() {
+      this.$emit('onEnter')
+    },
+    onLeave() {
+      this.$emit('onLeave')
     }
   }
 }
@@ -40,6 +53,7 @@ export default {
   color: #66FFFF;
   font-weight: 200;
   padding: 20px;
+  height: 200px;
 }
 .title {
   font-size: 14px;