hyyfScreen/src/views/Zoology/Zoology.vue

<!--
 * @Author: your name
 * @Date: 2021-10-21 17:51:22
 * @LastEditTime: 2021-12-17 08:48:08
 * @LastEditors: Please set LastEditors
 * @Description: 生态监测页面
 * @FilePath: \hyyfScreen\src\views\Zoology\Zoology.vue
-->
<template>
  <div class="zoology">
    <div class="left">
      <div class="left-top">
        <!-- 左上标题 -->
        <div class="left-top-title">
          <div class="left-top-title-left"></div>
          <div class="left-top-title-center">
            <span>育肥一栋</span>
            <div class="left-top-title-icon" @click="leftTopSelect"></div>
            <!-- 可选择的栋 -->
            <div class="left-top-select" v-show="leftTopSelected">
              <select-block :title="'一栋'">
                <template v-slot:left>
                  <select-column :list="simulatedData"></select-column>
                </template>
                <template v-slot:right>
                  <select-column :floor="false" :type="1"></select-column>
                </template>
              </select-block>
            </div>
          </div>
          <div class="left-top-title-right"></div>
        </div>
        <!-- 左上循环滑动 -->
        <div
          class="left-top-content"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <swiper
            style="height: 600px;  margin-top: auto; margin-bottom: auto;"
            ref="mySwiper"
            class="swiper"
            :options="swiperOption"
          >
            <swiper-slide v-for="item in swiperData" :key="item.roomId">
              <swiper-content
                @getRoomId="getRoomId"
                :list="item"
                @onLeave="onLeave"
                @onEnter="onEnter"
              ></swiper-content>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div
        class="left-middle"
        v-loading="weatherLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <chart-board
          :title="roomName + '用水量'"
          :ifDate="true"
          @emitDates="getWaterDates"
        >
          <chart-line :data="waterData" :id="1"></chart-line>
        </chart-board>
      </div>
      <div class="left-bottom">
        <chart-board
          :title="roomName + '整栋用电量'"
          :ifDate="true"
          @emitDates="getElecDates"
        >
          <chart-line-and :data="waterData" :id="2"></chart-line-and>
        </chart-board>
      </div>
    </div>

    <div class="right">
      <div class="right-top">
        <div class="kuang">
          <iframe
            :src="
              'static/jinm/index.html?' +
                '1' +
                ',' +
                cameraOne +
                ',' +
                cameraTwo +
                ',' +
                '100%' +
                ',' +
                '0'
            "
            style="width: 100%; height: 100%;"
            frameborder="0"
            allowfullscreen="true"
          ></iframe>
        </div>
      </div>
      <div class="right-bottom">
        <div
          class="right-bottom-left"
          v-loading="chartLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <chart-board :title="roomName + '温度'" @emitDates="getWaterDates">
            <chart-line :data="tempData" :id="4"></chart-line>
          </chart-board>
        </div>
        <div
          class="right-bottom-right"
          v-loading="chartLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <chart-board :title="roomName + '湿度'" @emitDates="getWaterDates">
            <chart-line :data="rhData" :id="5"></chart-line>
          </chart-board>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SelectBlock from "./leftTop/SelectBlock.vue";
import SelectColumn from "./leftTop/SelectColumn.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import SwiperContent from "./leftTop/SwiperContent.vue";
import ChartBoard from "./charts/ChartBoard.vue";
import ChartLine from "./charts/ChartLine.vue";
import ChartLineAnd from "./charts/ChartLineAnd.vue";
import { getEnv, getByRoom, getListWater, getRoomVideo } from "@/utils/api";
import { timeDate, Debounce } from "@/utils";

export default {
  name: "Zoology",
  components: {
    SelectBlock,
    SelectColumn,
    swiper,
    swiperSlide,
    SwiperContent,
    ChartBoard,
    ChartLine,
    ChartLineAnd,
  },
  data() {
    return {
      leftTopSelected: false, // 左上是否点击了要选择
      simulatedData: [
        // 左上 —— 模拟的数据
        { id: 1, name: "1" },
        { id: 2, name: "11" },
        { id: 3, name: "111" },
        { id: 4, name: "1111" },
        { id: 5, name: "1111" },
        { id: 6, name: "11111" },
        { id: 7, name: "111111" },
        { id: 8, name: "1111111" },
      ],
      swiperOption: {
        // 左上 —— 循环滑动
        slidesPerView: 4,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: true,
          disableOnInteraction: true,
        },
        loop: true,
      },
      swiperData: [],
      waterDates: [], // 用水量模拟
      waterData: {
        // 左中 —— 模拟数据
        xAxisName: "水量",
        xAxisData: ["07-01", "07-02", "07-03", "07-04", "07-05"],
        yAxisName: "吨",
        yAxisData: [37.1, 37.4, 36.8, 37.9, 34.2],
      },
      tempData: {
        xAxisName: "温度",
        xAxisData: [],
        yAxisName: "℃",
        yAxisData: [],
      },
      rhData: {
        xAxisName: "湿度",
        xAxisData: [],
        yAxisName: "RH",
        yAxisData: [],
      },
      roomName: "",
      elecDates: [], // 用电量时间
      isVideo: false,
      cameraOne:
        "ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.62",
      cameraTwo:
        "rtsp://admin:hmkj6688@172.16.3.62/cam/realmonitor?channel=1&subtype=0",
      loading: true,
      weatherLoading: true,
      chartLoading: true,
    };
  },
  computed: {
    swipers() {
      return this.$refs.mySwiper.swiper;
    },
  },
  methods: {
    init() {
      getEnv({}).then((res) => {
        if (res.code === 10000) {
          this.swiperData = res.data;
          this.loading = false;
        }
      });
    },
    leftTopSelect() {
      // 左上角的选择是否显示
      this.leftTopSelected = !this.leftTopSelected;
    },
    getWaterDates(value) {
      // 左中 获取时间
      this.waterDates = value;
    },
    getElecDates(value) {
      // 左下 获取时间
      this.elecDates = value;
    },
    getRoomId: Debounce(function(id) {
      let params = {
        roomId: id,
        endDate: timeDate(new Date().getTime()),
        type: 1,
      };
      getByRoom(params).then((res) => {
        if (res.code === 10000) {
          this.setTempAndRh(res.data);
        }
      });
      let params1 = {
        roomId: id,
        endDate: timeDate(new Date().getTime()),
        type: 2,
      };
      getListWater(params1).then((res) => {
        if (res.code === 10000) {
          this.setWeather(res.data);
        }
      });
      getRoomVideo({ roomId: id }).then((res) => {
        if (res.code === 10000) {
          this.isVideo = true;
          this.cameraOne = res.data.wsUrl;
          this.cameraTwo = res.data.rtspUrl;
        }
      });
    }),

    setTempAndRh(data) {
      this.tempData.xAxisData = [];
      this.tempData.yAxisData = [];
      this.rhData.xAxisData = [];
      this.rhData.yAxisData = [];
      this.roomName = data.roomName;
      data.semperatures.forEach((item) => {
        this.tempData.xAxisData.push(item.createTime);
        this.tempData.yAxisData.push(item.value);
      });
      data.humidities.forEach((item) => {
        this.rhData.xAxisData.push(item.createTime);
        this.rhData.yAxisData.push(item.value);
      });
      this.chartLoading = false;
    },
    setWeather(data) {
      this.waterData.xAxisData = [];
      this.waterData.yAxisData = [];
      data.data.forEach((item) => {
        this.waterData.xAxisData.push(item.createTime);
        this.waterData.yAxisData.push(item.value);
      });
      this.weatherLoading = false;
    },
    initData() {
      getByRoom({}).then((res) => {
        if (res.code === 10000) {
          this.setTempAndRh(res.data);
        }
      });
      let params1 = {
        endDate: timeDate(new Date().getTime()),
        type: 2,
      };
      getListWater(params1).then((res) => {
        if (res.code === 10000) {
          this.setWeather(res.data);
        }
      });
    },
    onEnter() {
      this.swipers.autoplay.stop();
    },
    onLeave() {
      this.swipers.autoplay.start();
    },
  },
  mounted() {
    this.init();
    this.initData();
  },
};
</script>

<style scoped>
.zoology {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}

/** 左边 */
.left {
  /* background-color: #fff; */
  width: 40%;
  height: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 左上 */
.left-top {
  width: 100%;
  height: 30%;
  background: linear-gradient(
    156deg,
    rgba(15, 21, 43, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
/* 左上 - title */
.left-top-title {
  width: 100%;
  height: 26px;
  display: flex;
}
.left-top-title-left {
  width: 325px;
  height: 26px;
  background: url("../../assets/BioSafety/u1717.svg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.left-top-title-left::before {
  content: "";
  height: 85%;
  border: 2px solid #66ffff;
  position: absolute;
  top: 0;
  left: 0;
}
.left-top-title-center {
  padding: 0 15px;
  width: 130px;
  height: 26px;
  background: url("../../assets/BioSafety/u1719.svg") no-repeat;
  background-size: 100% 100%;
  line-height: 26px;
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.left-top-title-icon {
  width: 20px;
  height: 20px;
  background: url("../../assets/Zoology/u5069.svg") no-repeat;
  position: relative;
  top: 5px;
  cursor: pointer;
}
.left-top-title-right {
  width: 325px;
  height: 26px;
  background: url("../../assets/BioSafety/u1718.svg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.left-top-title-right::after {
  content: "";
  height: 85%;
  border: 2px solid #66ffff;
  position: absolute;
  top: 0;
  right: 0;
}
/* 左上 - 点击下拉按钮后的选择框 */
.left-top-select {
  position: absolute;
  top: 35px;
  left: -340px;
  border: 2px solid #66ffff;
  border-radius: 5px;
  padding: 15px 10px;
  display: flex;
  z-index: 100;
  background-color: rgba(15, 21, 43, 0.6);
}
/* 左上 - 滑动 */
.left-top-content {
  /* height: 90%; */
  height: calc(100% - 26px);
  overflow: hidden;
}
/* 左中 */
.left-middle {
  width: 100%;
  height: 30%;
}
/* 左下 */
.left-bottom {
  background-color: rgb(228, 32, 32);
  width: 100%;
  height: 26.3%;
}

/** 右边 */
.right {
  width: 55%;
  height: 100%;
}
/* 右上 */
.right-top {
  height: 70%;
  width: 100%;
  /* box-sizing: border-box; */
  /* background-color: red; */
  padding-left: 25px;
}
.kuang {
  width: 100%;
  height: 100%;
  background: url("../../assets/BioSafety/kuang.png") no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding: 30px 30px 45px 30px;
}
/* 右下 */
.right-bottom {
  display: flex;
  background: rgb(3, 16, 50);
  height: 25%;
}
.right-bottom-left {
  width: 50%;
  border-right: 2px solid #66ffff;
}
.right-bottom-right {
  margin-left: 10px;
  width: 50%;
}
</style>