hyyfScreen/src/views/Zoology/Zoology.vue

<!--
 * @Author: your name
 * @Date: 2021-10-21 17:51:22
 * @LastEditTime: 2021-11-22 10:25:05
 * @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">
          <swiper style="height: 600px;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
            <swiper-slide v-for="item in 10" :key="item">
              <swiper-content :list="swiperData"></swiper-content>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="left-middle">
        <chart-board 
          :title="'单元用水量'" 
          :ifDate="true" 
          @emitDates="getWaterDates">
          <chart-line :data="waterData" :id="1"></chart-line>
        </chart-board>
      </div>
      <div class="left-bottom">
        <chart-board 
          :title="'整栋用电量'" 
          :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"></div>
      </div>
      <div class="right-bottom">
        <div class="right-bottom-left">
          <chart-board 
            :title="'单元用水量'" 
            @emitDates="getWaterDates">
            <chart-line :data="waterData" :id="4"></chart-line>
          </chart-board>
        </div>
        <div class="right-bottom-right">
          <chart-board 
            :title="'单元用水量'" 
            @emitDates="getWaterDates">
            <chart-line :data="waterData" :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'

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: { // 左上 —— 循环滑动
        direction: 'vertical',
        slidesPerView: 3,
        slidesPerColumn: 1,
        slidesPerGroup: 3,
        // spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // }
      },
      swiperData: [
        {
          id: '121',
          title: '育肥1栋1单元',
          temp: 31.5,
          rh: 81
        },
        {
          id: '121a',
          title: '育肥1栋1单元',
          temp: 31.5,
          rh: 84
        },
        {
          id: '121s',
          title: '育肥1栋1单元',
          temp: 31.5,
          rh: 81
        },
        {
          id: '121d',
          title: '育肥1栋1单元',
          temp: 31.5,
          rh: 81
        }
      ],
      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]
      },
      elecDates: [] // 用电量时间
    }
  },
  methods: {
    leftTopSelect() { // 左上角的选择是否显示
      this.leftTopSelected = !this.leftTopSelected
    },
    getWaterDates(value) { // 左中 获取时间
      this.waterDates = value
    },
    getElecDates(value) { // 左下 获取时间
      this.elecDates = value
    }
  },
}
</script>

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

/** 左边 */
.left {
  /* background-color: #fff; */
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/* 左上 */
.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: 30%;
}

/** 右边 */
.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;
}
/* 右下 */
.right-bottom {
  display: flex;
  background: rgb(3,16,50);
}
.right-bottom-left {
  width: 50%;
  border-right: 2px solid #66FFFF;
}
.right-bottom-right {
  margin-left: 10px;
  width: 50%;
}
</style>