hyyfClient/src/views/Env/DrinkWater.vue

<template>
  <div class="drinkWater">
    <div class="reply" :style="{color: color}">全场饮水情况</div>
    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
    <div class="echarts" v-if="allWaterCount && allWaterList.length > 0">
      <div class="echarts-l">
        <chart-water-pie :waterCount="allWaterCount"></chart-water-pie>
      </div>
      <div class="echarts-r">
        <chart-water :dataValue="allWaterList"></chart-water>
      </div>
    </div>
    <div  class="echarts" v-else>
      <el-empty description="暂无数据" style="width: 100%;"></el-empty>
    </div>
    <br/>
    <div class="reply" :style="{color: color}">饮用水详情</div>
    <div class="carousel">
      <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.water == null ? '设备暂无数据' : item.water + '吨'}}</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>
    <br/>
    <div class="reply" :style="{color: color}">筛选查询</div>
    <x-form :formItems="selectItems" :day="day1"  @setDay="setDay1" @setChange="setChange" @onClickType="onClickType1"></x-form>
    <div class="echarts" v-if=" waterList.length > 0">
      <div class="echarts-l">
        <chart-water-pie :id="'1'" :waterCount="waterCount"></chart-water-pie>
      </div>
      <div class="echarts-r">
        <chart-water :id="'1'" :dataValue="waterList" :room="waterRoom"></chart-water>
      </div>
    </div>
    <div class="echarts" v-else>
      <el-empty description="暂无数据" style="width: 100%;"></el-empty>
    </div>
  </div>
</template>

<script>
import XForm from "@/components/XForm";
import ChartWaterPie from "@/views/Env/chart/ChartWaterPie";
import ChartWater from "@/views/dashboard/chart/ChartWater";
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import { mapState } from 'vuex';
import {getAllDayWater, getByFloor, getListAllWater, getListWater, getSchool, getUid} from "../../utils/api";
import {timeDate} from "../../utils";

export default {
  name: "DrinkWater",
  components: {
    XForm,
    ChartWaterPie,
    ChartWater,
    swiper,
    swiperSlide
  },
  computed: {
    ...mapState(['color'])
  },
  data() {
    return {
      formItems: [
        {
          id: 1,
          type: 'text',
          text: '今日',
          value: 1,
          col: 1
        },
        {
          id: 2,
          type: 'text',
          text: '本周',
          value: 2,
          col: 1
        },
        {
          id: 3,
          type: 'text',
          text: '本月',
          value: 3,
          col: 1
        },
        {
          id: 4,
          type: 'datepicker',
          placeholder: [],
          field: 'value1',
          col: 6
        },
        {
          id: 6,
          type: 'button',
          text: '查询',
          col: 2,
          click: 'search'
        },
        {
          id: 5,
          type: 'button',
          text: '导出数据',
          col: 2,
          click: 'derive'
        }
      ],
      day: 1,
      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'
        }
      },
      selectItems: [
        {
          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'
        }
      ],
      day1: 2,
      dataValue: [12, 13, 10, 13, 9, 23, 21, 21, 24, 23, 14, 21, 21],
      list: [],
      allWaterList: [],
      allWaterCount: null,
      waterList: [],
      waterCount: null,
      waterRoom: '',
    }
  },
  methods: {
    init() {
      getAllDayWater().then(res => {
        if(res.code === 10000) {
          this.list = res.data
        }
      })
    },
    initAllWater() {
      getListAllWater({}).then(res => {
        if(res.code === 10000) {
          let that = this;
          that.allWaterList = res.data.data;
          that.allWaterCount = res.data.countWater;
        }
      })
    },
    initWater() {
      getListWater({}).then(res => {
        if(res.code === 10000) {
          this.waterList = res.data.data;
          this.waterCount = res.data.countWater;
          this.waterRoom = res.data.room;
        }
      })
    },
    getSchool() {
      getSchool().then(res => {
        if(res.code === 10000) {
          res.data.forEach(item => {
            item.value = item.id;
            item.label = item.floorName;
          })
          this.selectItems[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.selectItems[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.selectItems[2].options = res.data
        })
      }
    },
    setDay(data) {
      this.day = data;
    },
    onClickType(data) {
      let params = {};
      if(data.data.value1) {
        params = {
          startDate: data.data.value1[0],
          endDate: data.data.value1[1],
          type: 4
        }
      } else {
        params = {
          endDate: timeDate(new Date().getTime()),
          type: this.day
        }
      }
      getListAllWater(params).then(res => {
        if(res.code === 10000) {
          let that = this;
          that.allWaterList = res.data.data;
          that.allWaterCount = res.data.countWater;
        }
      })
    },
    setDay1(data) {
      this.day1 = data;
    },
    onClickType1(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.day1
            }
          }
          getListWater(params).then(res => {
            if(res.code === 10000) {
              this.waterList = res.data.data;
              this.waterCount = res.data.countWater;
              this.waterRoom = res.data.room;
            }
          })
        } else {
          console.log(222)
          this.$message.error('请选择栋舍楼层单元查询');
        }
      }
    }
  },
  mounted() {
    this.initAllWater()
    this.initWater()
    this.init()
    this.getSchool()
  }
}
</script>

<style scoped>
  .drinkWater {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
  }
  .reply {
    width: 100%;
    border: 1px solid #ddd;
    border-bottom: 0;
    height: 50px;
    background-color: #F3F3F3;
    line-height: 50px;
    font-size: 18px;
    box-sizing: border-box;
    padding-left: 20px;
  }
  .echarts {
    width: 100%;
    height: 401px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-top: 0;
    display: flex;
  }
  .echarts-l {
    width: 30%;
    height: 100%;
  }
  .echarts-r {
    width: 70%;
    height: 100%;
  }
  .carousel {
    width: 100%;
    height: 150px;
    border-top: 1px solid #ddd;
  }
  .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/u3077.svg') no-repeat;
    display: inline-block;
    background-size: 100% 100%;
  }
</style>