hyyfClient/src/views/Env/PigHouseEnv.vue

<template>
  <div class="pigHouse">
    <el-skeleton style="width: 100%; height: 200px;" :loading="loading" animated>
      <div style="height: 200px">
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide v-for="(item, i) in list" :key="i" style="padding-top: 10px">
            <div class="box">
              <p>{{item.room}}</p>
              <div class="flex">
                <div>
                  <i class="icon1"></i>
                </div>
                <div>
                  <span>{{item.temperature ? item.temperature + '℃' : '设备暂无数据'}}</span>
                </div>
              </div>
              <div style="margin-top: 20px" class="flex">
                <div>
                  <i class="icon2"></i>
                </div>
                <div>
                  <span>{{item.humidity ? item.humidity + 'RH' : '设备暂无数据'}}</span>
                </div>
              </div>
            </div>

          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </el-skeleton>
    <br/>
    <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
    <br/>
    <div style="height: 600px">
      <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>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import XForm from "@/components/XForm";
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,
    ChartPigTemp,
    ChartPigHum
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 8,
        spaceBetween: 30,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'progressbar'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      list: [],
      formItems: [
        {
          id: 1,
          type: 'select',
          label: '栋舍：',
          placeholder: '请选择栋舍',
          field: 'floorId',
          options: [],
          col: 4
        },
        {
          id: 2,
          type: 'select',
          label: '楼层：',
          placeholder: '请选择楼层',
          field: 'uid',
          options: [],
          col: 4
        },
        {
          id: 10,
          type: 'select',
          label: '单元：',
          placeholder: '请选择单元',
          field: 'unitId',
          options: [],
          col: 4
        },
        {
          id: 3,
          type: 'text',
          text: '今日',
          value: 1,
          col: 1
        },
        {
          id: 4,
          type: 'text',
          text: '本周',
          value: 2,
          col: 1
        },
        {
          id: 5,
          type: 'text',
          text: '本月',
          value: 3,
          col: 1
        },
        {
          id: 6,
          type: 'datepicker',
          placeholder: [],
          field: 'value1',
          col: 6
        },
        {
          id: 8,
          type: 'button',
          text: '查询',
          col: 1,
          click: 'search'
        },
        // {
        //   id: 7,
        //   type: 'button',
        //   text: '导出数据',
        //   col: 2,
        //   click: 'derive'
        // }
      ],
      // 默认选择本周
      day: 2,
      tempList: {
        name: '',
        list: [],
      },
      humList: {
        name: '',
        list: [],
      },
      loading: true
    }
  },
  methods: {
    init() {
      getEnv({}).then(res => {
        if(res.code === 10000) {
          setTimeout(() => {
            this.list = res.data;
            this.loading = false;
          }, 1000)
        }
      })
    },
    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) {
      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 {
          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>

<style scoped>
  .pigHouse {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
  }
  .swiper {
    width: 100%;
    height: 100%;
  }
  .box {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 30px 0;
    text-align: center;
    cursor: pointer;
  }
  .flex {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon1 {
    width: 32px;
    height: 32px;
    background: url('../../assets/images/u3028.svg') no-repeat;
    display: inline-block;
  }
  .icon2 {
    width: 32px;
    height: 32px;
    background: url('../../assets/images/u3029.svg') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
  }
</style>