hyyfClient/src/views/dashboard/dashboard.vue

<template>
  <div class="box">
    <el-skeleton style="width: 100%;" :rows="6" animated :loading="loading">
      <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>
    </el-skeleton>
    <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>
      <el-skeleton
        style="width: 100%;"
        :rows="10"
        animated
        :loading="tempLoading"
      >
        <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>
      </el-skeleton>
    </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="day1"
        @setDay="setDay1"
        @setChange="setChange1"
        @onClickType="onClickType1"
      ></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="day2" @setDay="setDay2" @setChange="setChange2" @onClickType="onClickType2"></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>{{ monthSales }}元</p>
          </div>
          <div class="water">
            <p>本月累计销售量</p>
            <p>{{ monthAmount }}头</p>
          </div>
          <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
            v-if="salesChartData.quantityList.length > 0"
            :data="salesChartData"
          ></chart-pig>
          <el-empty
            v-else
            description="暂无数据"
            style="width: 100%;"
          ></el-empty>
        </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,
    ChartWater,
    ChartPig,
    XForm,
  },
  data() {
    return {
      dialogVisible: false,
      iconList: [
        {
          icon: "el-icon-s-order",
          name: "今日报警总数",
          num: 0,
          unit: "条",
        },
        {
          icon: "el-icon-shopping-bag-1",
          name: "昨日卖猪总数",
          num: 0,
          unit: "头",
        },
        {
          icon: "el-icon-coin",
          name: "昨日卖猪金额",
          num: 0,
          unit: "元",
        },
        {
          icon: "el-icon-finished",
          name: "近7天卖猪总数",
          num: 0,
          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,
      day1: 2,
      TempAndHumList: {
        humidities: [],
      },
      waterList: [],
      waterRoom: "",
      weekWater: 0,
      weekWeekPercent: 0,
      monthWater: 0,
      monthWeekPercent: 0,
      monthSales: 0,
      monthAmount: 0,
      weekSales: 0,
      weekSalesChange: 0,
      weekSalesVolume: 0,
      weekSalesVolumeChange: 0,
      salesChartData: {
        quantityList: [],
        timeList: [],
        moneyList: [],
      },
      loading: false,
      tempLoading: false,
      waterLoading: false,
    };
  },
  computed: {
    ...mapState(["color"]),
  },
  methods: {
    setDay(data) {
      this.day = data.type;
      let data1 = data.data;
      if (data1.unitId) {
        let end = timeDate(new Date().getTime());
        let 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
            // }
            this.TempAndHumList = res.data;
          }
          // getListWater(params).then(res => {
          //   if(res.code === 10000) {
          //     this.waterList = res.data.data;
          //     this.waterRoom = res.data.room;
          //   }
          // })
        });
      } else {
        this.$message.error("请选择栋舍楼层单元查询");
      }
    },
    setDay1(data) {
      this.day1 = data.type;
      let data1 = data.data;
      if (data1.unitId) {
        let end = timeDate(new Date().getTime());
        let params = {
          roomId: data1.unitId,
          endDate: end,
          type: this.day1,
        };
        getListWater(params).then((res) => {
          if (res.code === 10000) {
            this.waterList = res.data.data;
            this.waterRoom = res.data.room;
          }
        });
      } else {
        this.$message.error("请选择栋舍楼层单元查询");
      }
    },
    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;
        });
      }
    },
    setChange1(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 {
            this.$message.error("请选择时间区间查询");
          }
          getByRoom(params).then((res) => {
            if (res.code === 10000) {
              this.TempAndHumList = res.data;
            }
          });
        } else {
          this.$message.error("请选择栋舍楼层单元查询");
        }
      }
    },
    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 {
            this.$message.error("请选择时间区间查询");
          }
          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) {
            that.loading = false;
            that.tempLoading = false;
            that.waterLoading = false;
            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;
            }
            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.monthSales = res4.data.nowMoney.toLocaleString();
              that.monthAmount = res4.data.nowQuantity.toLocaleString();
              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,
              };
            }
          })
        );
    },
    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;
  padding-top: 15px;
}
.water {
  padding: 10px 0;
  font-size: 18px;
}
</style>