<template>
  <div class="bioSafety">
    <div class="bio-flex">
      <div class="bio-flex-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">门卫管控</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-video">
          <div class="kuang"></div>
        </div>
        <div class="bio-out">
          <div class="bio-out-center">
            <div class="out-img"></div>
            <div style="color: white; font-size: 16px">
              <p>违规次数</p>
              <p style="font-size: 22px; font-weight: 600">27</p>
            </div>
          </div>
          <div class="bio-out-center">
            <div class="out-img"></div>
            <div style="color: white; font-size: 16px">
              <p>违规次数</p>
              <p style="font-size: 22px; font-weight: 600">27</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bio-flex-center">
        <div class="bio-title">
          <div class="bio-title-left-1"></div>
          <div class="bio-title-center-1">车辆管理</div>
          <div class="bio-title-right-1"></div>
        </div>
        <div class="bio-content flex">
          <div class="bio-content-left">
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">15.2</strong>
                <span>分钟</span>
              </div>
              <div class="text">平均洗消时长</div>
            </div>
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">15.2</strong>
                <span>分钟</span>
              </div>
              <div class="text">平均熏蒸时长</div>
            </div>
          </div>
          <div class="bio-content-right">
            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="item in 10" :key="item">
                <div class="case"></div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="bio-content">
          <chart-bar></chart-bar>
        </div>
      </div>
      <div class="bio-flex-center">
        <div class="bio-title">
          <div class="bio-title-left-1"></div>
          <div class="bio-title-center-1">门禁管理</div>
          <div class="bio-title-right-1"></div>
        </div>
        <div class="bio-content flex">
          <div class="bio-content-left">
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">15.2</strong>
                <span>人次</span>
              </div>
              <div class="text">今日进入人数</div>
            </div>
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">15.2</strong>
                <span>次</span>
              </div>
              <div class="text">今日违规次数</div>
            </div>
          </div>
          <div class="bio-content-right">
            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="item in 10" :key="item">
                <div class="case"></div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="bio-content">
          <chart-bar :data="data1"></chart-bar>
        </div>
      </div>
    </div>
    <div class="bio-flex-1">
      <div class="bio-flex-1-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">人员管理</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical">
          <div class="bio-vertical-left">
            <div class="bio-vertical-title">
              <div class="title-left"></div>
              <div class="title-center">
                <span>进出人次</span>
                <strong>&nbsp;126</strong>
              </div>
              <div class="title-right"></div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img"></div>
              <div style="color: white; font-size: 14px">
                <p>正常进入</p>
                <span><strong style="font-size: 22px; font-weight: 600">99</strong>人次</span>
              </div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-1"></div>
              <div style="color: white; font-size: 14px">
                <p>违规次数</p>
                <span><strong style="font-size: 22px; font-weight: 600">27</strong>人次</span>
              </div>
            </div>
          </div>
          <div class="bio-vertical-right">
            <chart-bar :data="data2"></chart-bar>
          </div>
        </div>
      </div>
      <div class="bio-flex-1-center">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">物资熏蒸</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical">
          <chart-bar :data="data3"></chart-bar>
        </div>
      </div>
      <div class="bio-flex-1-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">死猪管控</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical">
          <div class="bio-vertical-left">
            <div class="bio-vertical-title">
              <div class="title-left"></div>
              <div class="title-center">
                <span>视频抓取数</span>
                <strong>&nbsp;126</strong>
              </div>
              <div class="title-right"></div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-2"></div>
              <div style="color: white; font-size: 14px">
                <p>七日抓取次数</p>
                <span><strong style="font-size: 22px; font-weight: 600">99</strong></span>
              </div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-3"></div>
              <div style="color: white; font-size: 14px">
                <p>最近抓取时间</p>
                <span><strong style="font-size: 22px; font-weight: 600">07-01</strong></span>
              </div>
            </div>
          </div>
          <div class="bio-vertical-right">
            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="item in 10" :key="item">
                <div class="case case1"></div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import ChartBar from "@/views/BioSafety/chart/ChartBar";
export default {
  name: "BioSafety",
  components: {
    swiper,
    swiperSlide,
    ChartBar
  },
  data() {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 3,
        slidesPerColumn: 1,
        slidesPerGroup: 3,
        // spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // }
      },
      data1: {
        id: 1,
        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
        data: [12, 13, 10, 13, 90, 23, 21],
        name: '',
        unit: '人次'
      },
      data2: {
        id: 2,
        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
        data: [21, 13, 10, 14, 20, 23, 21],
        name: '',
        unit: '人次'
      },
      data3: {
        id: 3,
        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
        data: [21, 13, 10, 14, 20, 23, 21],
        name: '',
        unit: '次'
      }
    }
  }
}
</script>

<style scoped>
  p{
    margin: 0;
  }
  .swiper-slide {
    height: 100px;
  }
  .bioSafety {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
  }
  .bio-flex {
    width: 100%;
    height: 560px;
    display: flex;
    justify-content: space-between;
  }
  .bio-flex-left {
    width: 770px;
    height: 100%;
    border: 1px solid rgb(121, 121, 121);
  }
  .bio-flex-center {
    width: 465px;
    height: 100%;
    border: 1px solid rgb(121, 121, 121);
  }
  .bio-title {
    width: 100%;
    height: 26px;
    display: flex;
  }
  .bio-video {
    width: 100%;
    height: 440px;
    box-sizing: border-box;
    padding: 20px;
  }
  .kuang {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/kuang.png") no-repeat;
    background-size: 100% 100%;
  }
  .bio-out {
    width: 100%;
    height: calc(100% - 440px - 40px);
    display: flex;
    justify-content: space-around;
  }
  .bio-out-center {
    width: 280px;
    height: 100%;
    background: url("../../assets/BioSafety/base.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .out-img {
    width: 54px;
    height: 54px;
    background: url("../../assets/BioSafety/u2500.svg") no-repeat;
    background-size: 100% 100%;
  }
  .bio-title-left {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1717.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-left:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bio-title-center {
    width: 120px;
    height: 26px;
    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
    color: white;
    font-size: 16px;
  }
  .bio-title-right {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1718.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-right:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .bio-title-left-1 {
    width: 172.5px;
    height: 26px;
    background: url("../../assets/BioSafety/u1745.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-left-1:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bio-title-center-1 {
    width: 120px;
    height: 26px;
    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
    color: white;
    font-size: 16px;
  }
  .bio-title-right-1 {
    width: 172.5px;
    height: 26px;
    background: url("../../assets/BioSafety/u1746.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-right-1:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .bio-content {
    width: 100%;
    height: calc((100% - 26px) / 2);
  }
  .flex {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 10px;
  }
  .bio-content-left {
    width: 132px;
    height: 100%;
  }
  .bio-content-right {
    width: calc(100% - 142px);
    height: 100%;
    overflow: hidden;
  }
  .box {
    width: 100%;
    height: 113.5px;
    position: relative;
  }
  .circle {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background: url("../../assets/BioSafety/ciru.png") no-repeat;
    background-size: 100% 100%;
    transform: rotate(40deg);
    position: relative;
  }
  .price {
    width: 100%;
    text-align: center;
    color: #00D1E5;
    position: absolute;
    top: 35px;
  }
  .price-size {
    font-size: 18px;
  }
  .text {
    width: 100%;
    text-align: center;
    color: white;
  }
  .case {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/some.png") no-repeat;
    background-size: 100% 100%;
  }
  .bio-flex-1 {
    width: 100%;
    height: calc(100% - 580px);
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .bio-flex-1-left {
    width: 600px;
    height: 100%;
  }
  .bio-flex-1-center {
    width: 500px;
    height: 100%;
  }
  .bio-vertical {
    width: 100%;
    height: calc(100% - 26px);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
  .bio-vertical-left {
    width: 165px;
    height: 100%;
  }
  .bio-vertical-right {
    margin-left: 10px;
    flex: 1;
  }
  .bio-vertical-title {
    width: 100%;
    height: 25px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title-left {
    width: 16px;
    height: 100%;
    background: url("../../assets/BioSafety/u2475.svg") no-repeat;
    background-size: 100% 100%;
  }
  .title-center {
    flex: 1;
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .title-center strong {
    font-size: 25px;
  }
  .title-right {
    width: 16px;
    height: 100%;
    background: url("../../assets/BioSafety/u2476.svg") no-repeat;
    background-size: 100% 100%;
  }
  .bio-vertical-content {
    width: 100%;
    height: 65px;
    background: url("../../assets/BioSafety/base.jpg") no-repeat;
    background-size: 100% 100%;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .content-img {
    width: 40px;
    height: 40px;
    background: url("../../assets/BioSafety/u3222.png") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-1 {
    background: url("../../assets/BioSafety/u2500.svg") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-2 {
    background: url("../../assets/BioSafety/u2168.svg") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-3 {
    background: url("../../assets/BioSafety/u2179.svg") no-repeat;
    background-size: 100% 100%;
  }
  .case1 {
    height: 60px;
  }
</style>