hyyfScreen/src/views/Alarm/Alarm.vue

<template>
  <div class="alarm">
    <div class="alarm-top">
      <div class="alarm-top-left">
        <div class="alarm-divide line">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">今日报警</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <chart-pie></chart-pie>
          </div>
        </div>
        <div class="alarm-divide">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">报警分布</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <alarm-bar></alarm-bar>
          </div>
        </div>
      </div>
      <div class="alarm-top-center">
        <div class="alarm-title">
          <div class="alarm-title-left"></div>
          <div class="alarm-title-center">场区概况</div>
          <div class="alarm-title-right"></div>
        </div>
        <div class="alarm-content">
          <img src="../../assets/Alarm/111.png" width="100%" alt="">
        </div>
      </div>
      <div class="alarm-top-left">
        <div class="alarm-divide">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">事件提醒</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <cost-pie :pieData="pieData"></cost-pie>
          </div>
        </div>
        <div class="alarm-divide">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">事件分布</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <alarm-bar :bar-data="barData"></alarm-bar>
          </div>
        </div>
      </div>
    </div>
    <div class="alarm-bottom">
      <div class="alarm-top-left">
        <div class="alarm-title">
          <div class="alarm-title-left"></div>
          <div class="alarm-title-center">相应时间</div>
          <div class="alarm-title-right"></div>
        </div>
        <div class="alarm-content">
          <chart-bar :data="timeData"></chart-bar>
        </div>
      </div>
      <div class="alarm-top-center">
        <div class="alarm-title">
          <div class="alarm-title-left"></div>
          <div class="alarm-title-center">报警列表</div>
          <div class="alarm-title-right"></div>
        </div>
        <div class="alarm-content alarm-flex">
          <div class="flex-left">
            <div class="box" v-for="item in 9" :key="item">
              <el-row :gutter="20" style="width: 500px; height: 100%">
                <el-col :span="2"  style="height: 100%">
                  <div :class="['box-logo', item === 1 ? 'logo1' : '', item === 2 ? 'logo2' : '', item === 3 ? 'logo3' : '' ]">{{item}}</div>
                </el-col>
                <el-col :span="10"  style="height: 100%">
                  <div>育肥1栋3单元温度过高！</div>
                </el-col>
                <el-col :span="4"  style="height: 100%">
                  <div>17:45:21</div>
                </el-col>
                <el-col :span="4"  style="height: 100%">
                  <div>二级</div>
                </el-col>
                <el-col :span="4"  style="height: 100%">
                  <div>处理</div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="flex-right">
            <div class="parent">
              <div class="parent-grid">核心区</div>
              <div class="parent-grid">生活区</div>
              <div class="parent-grid">环保区</div>
              <div class="parent-grid">其他</div>
            </div>
          </div>
        </div>
      </div>
      <div class="alarm-top-left">
        <div class="alarm-title">
          <div class="alarm-title-left"></div>
          <div class="alarm-title-center">异常人脸</div>
          <div class="alarm-title-right"></div>
        </div>
        <div class="alarm-content">
          <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>
  </div>
</template>

<script>
import ChartPie from "@/views/Alarm/chart/ChartPie";
import AlarmBar from "@/views/Alarm/chart/AlarmBar";
import CostPie from "@/views/Alarm/chart/CostPie";
import ChartBar from "@/views/BioSafety/chart/ChartBar";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: "Alarm",
  components: {
    ChartPie,
    AlarmBar,
    CostPie,
    ChartBar,
    swiper,
    swiperSlide
  },
  data() {
    return {
      barData: {
        id: 1,
        salvProName: ['死猪运输', '车辆洗消', '人员违规', '猪只出售'],
        salvProValue: [489, 301, 315, 341]
      },
      pieData: [
        {
          name: '死猪运输',
          value: 42
        },
        {
          name: '车辆洗消',
          value: 26
        },
        {
          name: '人员违规',
          value: 20
        },
        {
          name: '猪只出售',
          value: 12
        },
      ],
      timeData: {
        id: 1,
        time: ['断电', '故障', '环境报警', '污水处理'],
        data: [15, 20, 18, 4],
        name: '默认',
        unit: '分钟'
      },
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 2,
        slidesPerColumn: 1,
        slidesPerGroup: 2,
        // spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // }
      },
    }
  }
}
</script>

<style scoped>
  .alarm {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
  }
  .alarm-top {
    width: 100%;
    height: 550px;
    display: flex;
    justify-content: space-between;
  }
  .alarm-top-left {
    width: 405px;
    height: 100%;
  }
  .alarm-top-center {
    flex: 1;
    margin: 0 20px;
  }
  .alarm-divide {
    width: 100%;
    height: 50%;
  }
  .alarm-title {
    width: 100%;
    height: 26px;
    display: flex;
  }
  .alarm-title-left {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1717.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .alarm-title-left:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .alarm-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;
  }
  .alarm-title-right {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1718.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .alarm-title-right:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .alarm-content {
    width: 100%;
    height: calc(100% - 26px);
  }
  .line {
    transition: all 1s ease-out;
    z-index: 999;
  }
  .line:hover {
    transform-origin: 0 0;
    transform: scale(1.5);
  }
  .alarm-bottom {
    width: 100%;
    height: calc(100% - 570px);
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .alarm-flex {
    display: flex;
    justify-content: space-between;
  }
  .flex-left {
    width: 500px;
    height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    overflow-y: auto;
    color: #fff;
  }
  .flex-left::-webkit-scrollbar {
    width: 0;
  }
  .flex-right {
    flex: 1;
    margin-left: 20px;
    box-sizing: border-box;
    padding: 20px 0;
  }
  .box {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
  }
  .box-logo {
    width: 20px;
    height: 20px;
    background-color: #666666;
    color: #fff;
  }
  .logo1 {
    background-color: #5F0CED;
  }
  .logo2 {
    background-color: #FE2277;
  }
  .logo3 {
    background-color: #F9A403;
  }
  .parent {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-content: center;
  }
  .parent-grid {
    width: 100%;
    height: 100%;
    border: 1px solid #66FFFF;
    color: #66FFFF;
    background-color: #072A5B;
    display: grid;
    align-content: center;
  }
  .case {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/some.png") no-repeat;
    background-size: 100% 100%;
  }
</style>