hyyfClient/src/views/dashboard/dashboard.vue

<template>
  <div class="box">
    <div class="header">
      <el-row :gutter="20">
        <el-col v-for="(item, i) in iconList" :key="i" :span="6">
          <el-card class="box-card">
            <div class="card-flex">
              <div class="flex-left">
                <i :class="[item.icon]" :style="{ fontSize: '72px', color: color }"></i>
              </div>
              <div class="flex-right">
                <p :style="{marginBottom: '8px', color: color}">{{item.name}}</p>
                <p>{{item.num}}{{item.unit}}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">待处理事务</div>
      <div class="fens">
        <el-row :gutter="40">
          <el-col v-for="item in elements" :key="item.id" :span="8">
            <div class="fens-text">
              <span>{{item.name}}</span>
              <el-tag  effect="dark" type="danger" style="float: right">{{item.data}}</el-tag>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>猪舍温湿度</span>
        <el-button type="text" style="float: right; margin-right: 25px" @click="jump(1)">详情</el-button>
      </div>
      <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
      <div style="width: 100%; height: 400px">
        <chart-wsd v-if="TempAndHumList.humidities.length > 0" :data="TempAndHumList"></chart-wsd>
        <el-empty v-else description="暂无数据" style="width: 100%;"></el-empty>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>水量消耗</span>
        <el-button type="text" style="float: right; margin-right: 25px" @click="jump(2)">详情</el-button>
      </div>
      <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
      <div class="pen-flex" v-if="waterList.length > 0">
        <div class="pen-left">
          <div class="water">
            <p>上月用水量</p>
            <p>{{monthWater}}t</p>
            <p>
              <i v-if="Number(monthWeekPercent) > 0" class="el-icon-caret-top" style="color: red"></i>
              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span :style="{color: Number(monthWeekPercent) > 0 ?  'red' : '#1ABC9C'}">{{monthWeekPercent}}%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
            </p>
          </div>
          <div class="water">
            <p>上周用水量</p>
            <p>{{weekWater}}t</p>
            <p>
              <i v-if="Number(weekWeekPercent) > 0" class="el-icon-caret-top" style="color: red"></i>
              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span :style="{color: Number(weekWeekPercent) > 0 ?  'red' : '#1ABC9C'}">{{weekWeekPercent}}%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">环比上周</span>
            </p>
          </div>
        </div>
        <div style="width: 85%; height: 400px">
          <chart-water :dataValue="waterList" :room="waterRoom"></chart-water>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无数据" style="width: 100%;"></el-empty>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>电量消耗</span>
        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
      </div>
      <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
      <div class="pen-flex">
        <div class="pen-left">
          <div class="water">
            <p>本月用电量</p>
            <p>10000KW·h</p>
            <p>
              <i class="el-icon-caret-top" style="color: red"></i>
              <span style="color: red">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
            </p>
          </div>
          <div class="water">
            <p>本周用电量</p>
            <p>10000KW·h</p>
            <p>
              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span style="color: #1ABC9C">10%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
            </p>
          </div>
        </div>
        <div style="width: 85%; height: 400px">
          <chart-dl></chart-dl>
        </div>
      </div>
    </div>
    <br/>
    <div class="pending">
      <div class="title" :style="{color: color}">
        <span>卖猪统计</span>
        <el-button type="text" style="float: right; margin-right: 25px" @click="jump(4)">详情</el-button>
      </div>
      <div class="pen-flex">
        <div class="pen-left">
          <div class="water">
            <p>上月销售总量</p>
            <p>{{weekSales}}元</p>
            <p>
              <i v-if="Number(weekSalesChange) > 0" class="el-icon-caret-top" style="color: red"></i>
              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span :style="{color: Number(weekSalesChange) > 0 ?  'red' : '#1ABC9C'}">{{weekSalesChange}}%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
            </p>
          </div>
          <div class="water">
            <p>上月销售量</p>
            <p>{{ weekSalesVolume }}头</p>
            <p>
              <i v-if="Number(weekSalesVolumeChange) > 0" class="el-icon-caret-top" style="color: red"></i>
              <i v-else class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
              <span :style="{color: Number(weekSalesVolumeChange) > 0 ?  'red' : '#1ABC9C'}">{{weekSalesVolumeChange}}%</span>
              &nbsp;
              <span style="font-size: 16px; color: #CFDBED">环比上月</span>
            </p>
          </div>
        </div>
        <div style="width: 85%; height: 400px">
          <chart-pig :data="salesChartData"></chart-pig>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XForm from "../../components/XForm";
import { mapState } from 'vuex';
import ChartWsd from "./chart/ChartWsd";
import ChartDl from'./chart/ChartDl';
import ChartWater from "./chart/ChartWater";
import ChartPig from "./chart/ChartPig";
import {getByFloor, getByRoom, getListClientHome, getListWater, getSchool, getUid} from "../../utils/api";
import {timeDate} from "../../utils";
import { getTheSales } from "../../utils/chenApi";
import axios from 'axios';
export default {
  name: "dashboard",
  components: {
    ChartWsd,
    ChartDl,
    ChartWater,
    ChartPig,
    XForm
  },
  data() {
    return {
      dialogVisible: false,
      iconList: [
        {
          icon: 'el-icon-s-order',
          name: '今日报警总数',
          unit: '条'
        },
        {
          icon:  'el-icon-shopping-bag-1',
          name: '昨日卖猪总数',
          unit: '头'
        },
        {
          icon:  'el-icon-coin',
          name: '昨日卖猪金额',
          unit: '元'
        },
        {
          icon:   'el-icon-finished',
          name: '近7天卖猪总数',
          unit: '头'
        },
      ],
      elements: [
        {
          id: 1,
          name: '事件提醒',
          data: 10
        },
        {
          id: 2,
          name: '事件提醒',
          data: 10
        },
        {
          id: 3,
          name: '事件提醒',
          data: 10
        },
        {
          id: 4,
          name: '事件提醒',
          data: 10
        },
        {
          id: 5,
          name: '事件提醒',
          data: 10
        },
        {
          id: 6,
          name: '事件提醒',
          data: 10
        },
      ],
      dateRange: [],
      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: 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,
      TempAndHumList: {
        humidities: [],
      },
      waterList: [],
      waterRoom: '',
      weekWater: 0,
      weekWeekPercent: 0,
      monthWater: 0,
      monthWeekPercent: 0,
      weekSales: 0,
      weekSalesChange: 0,
      weekSalesVolume: 0,
      weekSalesVolumeChange: 0,
      salesChartData: {},
    }
  },
  computed: {
    ...mapState(['color'])
  },
  methods: {
    setDay(data) {
      this.day = 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
        })
      }
    },
    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
              }
            }
            getListWater(params).then(res => {
              if(res.code === 10000) {
                this.waterList = res.data.data;
                this.waterRoom = res.data.room;
              }
            })
          })
        } else {
          this.$message.error('请选择栋舍楼层单元查询');
        }
      }
    },
    getTempAndHum() {
      let that = this;
      axios.all([
        getListClientHome({}),
        getByRoom({type: 2}),
        getListWater({type: 2}),
        getTheSales({type: 2})
      ]).then(axios.spread(function(res1, res2, res3, res4) {
        if(res1.code === 10000) {
          const { money, quantity, warning, weekQuantity  } = res1.data || {};
          that.iconList[0].num = warning;
          that.iconList[1].num = quantity;
          that.iconList[2].num = money;
          that.iconList[3].num = weekQuantity
          // that.incon
        }
        if(res2.code === 10000) {
          that.TempAndHumList = res2.data;
          console.log(that.TempAndHumList)
        }
        if(res3.code === 10000) {
          that.waterList = res3.data.data;
          that.waterRoom = res3.data.room;
          that.weekWater = res3.data.weekWater;
          that.weekWeekPercent = res3.data.weekWeekPercent;
          that.monthWater = res3.data.monthWater;
          that.monthWeekPercent = res3.data.monthWeekPercent;
        }
        if (res4.code === 10000) {
          that.weekSales = res4.data.money;
          that.weekSalesChange = res4.data.moneyPercent;
          that.weekSalesVolume = res4.data.quantity;
          that.weekSalesVolumeChange = res4.data.quantityPercent;
          that.salesChartData = {
            moneyList: res4.data.moneyList,
            quantityList: res4.data.quantityList,
            timeList: res4.data.timeList,
          };
        }
      }))
      // getListClientHome({}).then(res => {
      // })
      // getByRoom({type: 2}).then(res => {
      //   if(res.code === 10000) {
      //     this.TempAndHumList = res.data;
      //   }
      // })
      // getListWater({type: 2}).then(res => {
      //   if(res.code === 10000) {
      //     this.waterList = res.data.data;
      //     this.waterRoom = res.data.room;
      //     this.weekWater = res.data.weekWater;
      //     this.weekWeekPercent = res.data.weekWeekPercent;
      //     this.monthWater = res.data.monthWater;
      //     this.monthWeekPercent = res.data.monthWeekPercent;
      //   }
      // })
      // getTheSales({type: 2}).then(res => {
      //   if (res.code === 10000) {
      //     this.weekSales = res.data.money;
      //     this.weekSalesChange = res.data.moneyPercent;
      //     this.weekSalesVolume = res.data.quantity;
      //     this.weekSalesVolumeChange = res.data.quantityPercent;
      //     this.salesChartData = {
      //       moneyList: res.data.moneyList,
      //       quantityList: res.data.quantityList,
      //       timeList: res.data.timeList,
      //     };
      //   }
      // })
    },
    jump(num) {
      if(num === 1) {
        this.$router.push('/pigHouseEnv');
      } else if(num === 2) {
        this.$router.push('/drinkWater');
      } else if(num === 4) {
        this.$router.push('/analysis');
      }
    }
  },
  mounted() {
    this.getSchool()
    this.getTempAndHum()
  }
}
</script>

<style scoped>
  p {
    margin: 0;
    padding: 0;
  }
  .box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
  .header {
    width: 100%;
    /*height: 150px;*/
  }
  .box-card {
    box-sizing: border-box;
    height: 100%;
  }
  .card-flex {
    display: flex;
    height: 120px;
  }
  .flex-left {
    width: 40%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flex-right {
    width: 60%;
    height: 100%;
    box-sizing: border-box;
    padding: 30px 0;
    font-size: 18px;
  }
  .pending {
    width: 100%;
    /*height: 300px;*/
    border: 1px solid #ddd;
  }
  .title {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ddd;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 20px;
    background-color: #F3F3F3;
    font-weight: 700;
  }
  .fens {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
  .fens-text {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #CBBCCB;
  }
  .text-size {
    cursor: pointer;
  }
  .pen-flex {
    width: 100%;
    height: 400px;
    display: flex;
  }
  .pen-left {
    width: 15%;
    height: 100%;
    border-right: 1px solid #ddd;
    text-align: center;
  }
  .water {
    padding: 50px 0;
    font-size: 20px;
  }
</style>