猪舍环境

src/components/XForm.vue

@@ -18,6 +18,7 @@
                     style="width: 180px;"
                     :placeholder="item.placeholder"
                     v-model="formData[`${item.field}`]"
+                    @change="onChange(item.field, formData[`${item.field}`])"
                     clearable>
                   <el-option
                       v-for="option in item.options"
@@ -33,6 +34,7 @@
                     :start-placeholder="item.placeholder[0]"
                     :end-placeholder="item.placeholder[1]"
                     type="daterange"
+                    value-format="yyyy-MM-dd"
                     clearable
                     class="date-picker-reset">
                 </el-date-picker>
@@ -46,41 +48,6 @@
             </el-form-item>
           </el-col>
         </template>
-<!--        <el-col :span="4">-->
-<!--          <el-form-item label="栋舍">-->
-<!--            <el-select style="width: 180px;"></el-select>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
-<!--        <el-col :span="4">-->
-<!--          <el-form-item label="单元">-->
-<!--            <el-select style="width: 180px;"></el-select>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
-<!--        <el-col :span="1">-->
-<!--          <p style="line-height: 30px;">今日</p>-->
-<!--        </el-col>-->
-<!--        <el-col :span="1">-->
-<!--          <p style="line-height: 30px;">本周</p>-->
-<!--        </el-col>-->
-<!--        <el-col :span="1">-->
-<!--          <p style="line-height: 30px;">本月</p>-->
-<!--        </el-col>-->
-<!--        <el-col :span="6">-->
-<!--          <el-form-item>-->
-<!--            <el-date-picker-->
-<!--                v-model="dateRange"-->
-<!--                type="daterange"-->
-<!--                range-separator="至"-->
-<!--                start-placeholder="开始日期"-->
-<!--                end-placeholder="结束日期">-->
-<!--            </el-date-picker>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
-<!--        <el-col :span="2">-->
-<!--          <el-form-item>-->
-<!--            <el-button>导出数据</el-button>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
       </el-row>
     </el-form>
   </div>
@@ -111,14 +78,16 @@ export default {
   methods: {
     // 拿到方法
     onSelectText(value) {
-      console.log('-------------------------')
-      console.log(value)
+      if(this.formData.value1) {
+        delete this.formData.value1
+      }
       this.$emit('setDay', value)
     },
+    onChange(val, data) {
+      this.$emit('setChange', {type: val, data: data});
+    },
     manage(value) {
-      console.log(value)
-      console.log('*************************')
-      this.$emit('onClickType', value)
+      this.$emit('onClickType', {type: value, data: this.formData})
     }
   }
 }
@@ -132,4 +101,4 @@ export default {
   box-sizing: border-box;
   padding: 20px;
 }
-</style>
+</style>

src/utils/api.js

@@ -454,3 +454,48 @@ export function getYingFu(data) {
     params: data
   })
 }
+
+/** 每栋温湿度 **/
+export function getEnv(data) {
+  return axios({
+    url: 'produce/room/getAllRoomEnvironment',
+    method: 'get',
+    params: data
+  })
+}
+
+/* 栋舍 */
+export function getSchool(data) {
+  return axios({
+    url: '/produce/floor/list',
+    method: 'get',
+    params: data
+  })
+}
+
+/* 楼层 */
+export function getByFloor(data) {
+  return axios({
+    url: '/produce/box/listByFloor',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 单元 **/
+export function getUid(data) {
+  return axios({
+    url: '/produce/room/listBy',
+    method: 'get',
+    params: data
+  })
+}
+
+/* 查询 */
+export function getByRoom(data) {
+  return axios({
+    url: '/produce/room/listByRoom',
+    method: 'post',
+    data: data
+  })
+}

src/utils/index.js

@@ -8,4 +8,13 @@ export function arrToIds(arr){
         new_ids =  new_ids.substr(1);
     }
     return new_ids;
-}
+}
+
+// 时间格式化
+export function timeDate(timestamp) {
+  var date = new Date(timestamp)
+  var Y = date.getFullYear() + '-'
+  var M = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) + '-' : (date.getMonth() + 1) + '-'
+  var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
+  return Y + M + D
+}

src/views/Env/PigHouseEnv.vue

@@ -2,15 +2,15 @@
   <div class="pigHouse">
     <div style="height: 200px">
       <swiper class="swiper" :options="swiperOption">
-        <swiper-slide v-for="item in 10" :key="item" style="padding-top: 10px">
+        <swiper-slide v-for="(item, i) in list" :key="i" style="padding-top: 10px">
           <div class="box">
-            <p>育肥1栋1单元</p>
+            <p>{{item.room}}</p>
             <div class="flex">
               <div>
                 <i class="icon1"></i>
               </div>
               <div>
-                <span>36.6℃</span>
+                <span>{{item.temperature ? item.temperature + '℃' : '暂无数据'}}</span>
               </div>
             </div>
             <div style="margin-top: 20px" class="flex">
@@ -18,7 +18,7 @@
                 <i class="icon2"></i>
               </div>
               <div>
-                <span>78RH</span>
+                <span>{{item.humidity ? item.humidity + 'RH' : '暂无数据'}}</span>
               </div>
             </div>
           </div>
@@ -30,10 +30,15 @@
       </swiper>
     </div>
     <br/>
-    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
+    <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
     <br/>
     <div style="height: 600px">
-      <chart-wsd></chart-wsd>
+      <chart-pig-temp v-if="tempList.list.length > 0" :tempList="tempList"></chart-pig-temp>
+      <el-empty v-else description="暂无数据"></el-empty>
+    </div>
+    <div style="height: 600px">
+      <chart-pig-hum v-if="humList.list.length > 0" :humList="humList"></chart-pig-hum>
+      <el-empty v-else description="暂无数据"></el-empty>
     </div>
   </div>
 </template>
@@ -41,17 +46,20 @@
 <script>
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import XForm from "@/components/XForm";
-import ChartWsd from "@/views/dashboard/chart/ChartWsd";
+import ChartPigTemp from "./chart/ChartPigTemp";
+import ChartPigHum from "./chart/ChartPigHum";
 import 'swiper/css/swiper.css'
+import { getEnv, getSchool, getByFloor, getUid, getByRoom } from "../../utils/api";
+import {timeDate} from "../../utils";
+
 export default {
   name: "PigHouseEnv",
   components: {
     swiper,
     swiperSlide,
     XForm,
-    ChartWsd
-    // Swiper,
-    // SwiperSlide
+    ChartPigTemp,
+    ChartPigHum
   },
   data() {
     return {
@@ -71,19 +79,29 @@ export default {
           prevEl: '.swiper-button-prev'
         }
       },
+      list: [],
       formItems: [
         {
           id: 1,
           type: 'select',
           label: '栋舍：',
           placeholder: '请选择栋舍',
-          field: 'areaId',
+          field: 'floorId',
           options: [],
           col: 4
         },
         {
           id: 2,
           type: 'select',
+          label: '楼层：',
+          placeholder: '请选择楼层',
+          field: 'uid',
+          options: [],
+          col: 4
+        },
+        {
+          id: 10,
+          type: 'select',
           label: '单元：',
           placeholder: '请选择单元',
           field: 'unitId',
@@ -119,6 +137,13 @@ export default {
           col: 6
         },
         {
+          id: 8,
+          type: 'button',
+          text: '查询',
+          col: 1,
+          click: 'search'
+        },
+        {
           id: 7,
           type: 'button',
           text: '导出数据',
@@ -127,16 +152,123 @@ export default {
         }
       ],
       // 默认选择本周
-      day: 2
+      day: 2,
+      tempList: {
+        name: '',
+        list: [],
+      },
+      humList: {
+        name: '',
+        list: [],
+      }
     }
   },
   methods: {
+    init() {
+      getEnv().then(res => {
+        if(res.code === 10000) {
+          this.list = res.data;
+        }
+      })
+    },
+    getSchool() {
+      getSchool().then(res => {
+        if(res.code === 10000) {
+          res.data.forEach(item => {
+            item.value = item.id;
+            item.label = item.floorName;
+          })
+          this.formItems[0].options = res.data;
+        }
+      })
+    },
+    setChange(item) {
+      if(item.type === 'floorId') {
+        let params = {
+          floorId: item.data
+        }
+        getByFloor(params).then(res => {
+          res.data.forEach(item => {
+            item.value = item.uid;
+            item.label = item.alias
+          })
+          this.formItems[1].options = res.data;
+        })
+      } else if(item.type === 'uid') {
+        let params = {
+          uid: item.data
+        }
+        getUid(params).then(res => {
+          res.data.forEach(item => {
+            item.value = item.id;
+            item.label = item.roomName
+          })
+          this.formItems[2].options = res.data
+        })
+      }
+    },
     setDay(data) {
       this.day = data;
     },
     onClickType(data) {
       console.log(data)
+      if(data.type === 'search') {
+        let data1 = data.data;
+        if(data1.unitId) {
+          let params;
+          if(data1.value1) {
+            params = {
+              roomId: data1.unitId,
+              startDate: data1.value1[0],
+              endDate: data1.value1[1],
+              type: 4,
+            }
+          } else {
+            let end = timeDate(new Date().getTime())
+            params = {
+              roomId: data1.unitId,
+              endDate: end,
+              type: this.day
+            }
+          }
+          getByRoom(params).then(res => {
+            if(res.code === 10000) {
+              this.tempList = {
+                name: res.data.roomName,
+                list: res.data.semperatures
+              }
+              this.humList = {
+                name: res.data.roomName,
+                list: res.data.humidities
+              }
+            }
+          })
+        } else {
+          console.log(222)
+          this.$message.error('请选择栋舍楼层单元查询');
+        }
+      }
+    },
+    // 默认显示
+    getTempAndHum() {
+      getByRoom({}).then(res => {
+        if(res.code === 10000) {
+          this.tempList = {
+            name: res.data.roomName,
+            list: res.data.semperatures
+          }
+          this.humList = {
+            name: res.data.roomName,
+            list: res.data.humidities
+          }
+        }
+      })
     }
+  },
+  mounted() {
+    this.init()
+    this.getSchool()
+    this.getTempAndHum()
   }
 }
 </script>

src/views/Env/chart/ChartPigHum.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="chartPigHum" style="width:100%; height: 100%;"></div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: "ChartPigHum",
+  computed: {
+    ...mapState(['color'])
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    humList: {
+      type: Object,
+      default: function () {
+        return {
+          name: '',
+          list: [],
+        }
+      }
+    }
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    },
+    humList: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    init() {
+      let start = this.humList.list.length - 12;
+      let end = this.humList.list.length - 1;
+      let time = [];
+      let data = [];
+      let name = this.humList.name;
+      this.humList.list.forEach(item => {
+        time.push(item.createTime)
+        data.push(item.value)
+      })
+      let options = {
+        title: {
+          text: `${name}湿度曲线`,
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        color: [this.color],
+        dataZoom: [{
+          type: 'inside',
+          startValue: start,
+          endValue: end,
+          show: false
+        }],
+        xAxis: [
+          {
+            type: 'category',
+            data: time,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '湿度统计情况',
+            axisLabel: {
+              formatter: '{value}RH'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: `${name}`,
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: data
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartPigHum'));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Env/chart/ChartPigTemp.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="chart-pig" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: "ChartPigTemp",
+  computed: {
+    ...mapState(['color'])
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    tempList: {
+      type: Object,
+      default: function () {
+        return {
+          name: '',
+          list: [],
+        }
+      }
+    }
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    },
+    tempList: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    init() {
+      let start = this.tempList.list.length - 12;
+      let end = this.tempList.list.length - 1;
+      let time = [];
+      let data = [];
+      let name = this.tempList.name;
+      this.tempList.list.forEach(item => {
+        time.push(item.createTime)
+        data.push(item.value)
+      })
+      let options = {
+        title: {
+          text: `${name}温度曲线`,
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        color: [this.color],
+        dataZoom: [{
+          type: 'inside',
+          startValue: start,
+          endValue: end,
+          show: false
+        }],
+        xAxis: [
+          {
+            type: 'category',
+            data: time,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '温度统计情况',
+            axisLabel: {
+              formatter: '{value}℃'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: `${name}`,
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: data
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chart-pig'));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>