hyyfScreen/src/views/Alarm/Alarm.vue

<template>
  <div class="alarm">
    <div class="alarm-top">
      <div class="alarm-top-left">
        <div class="alarm-divide" v-loading="dayLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <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" style="background: #0F152B">
            <chart-pie v-if="alarmPie.length > 0" :data="alarmPie"></chart-pie>
            <div v-else style="line-height: 200px; font-size: 22px; color: white">暂无数据</div>
          </div>
        </div>
        <div class="alarm-divide" v-loading="listLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <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 :barData="list"></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="">-->
          <canvas id="canvas" width="910" height="504"></canvas>
          <div class="bubble yufeishe" v-show="num === 1 && button1%2!==0" >
            <p>育肥舍</p>
            <p>育肥猪2457头</p>
            <p>在舍人数：7人</p>
            <p>温度：27.4℃</p>
          </div>
          <div class="bubble baoyushe" v-show="num === 1 && button1%2!==0">
            <p>保育舍</p>
            <p>保育猪2457头</p>
            <p>在舍人数：7人</p>
            <p>温度：27.4℃</p>
          </div>
          <div class="bubble gelishe" v-show="num === 1 && button1%2!==0">
            <p>隔离舍</p>
            <p>隔离猪2457头</p>
            <p>在舍人数：7人</p>
            <p>温度：27.4℃</p>
          </div>
          <div class="bubble shenghuo" v-show="num === 2 && button2%2!==0">
            <p>生活区</p>
            <p>在舍人数：7人</p>
            <p>温度：27.4℃</p>
          </div>
          <div class="bubble huanbao" v-show="num === 3 && button3%2!==0">
            <p>环保区</p>
            <p>氨氮：2.35mg/L</p>
            <p>流量：154T</p>
            <p>人员：1人</p>
          </div>
          <div class="bubble shui" v-show="num === 4 && button4%2!==0">
            <p>水泵房</p>
            <p>水压：1.2kpa</p>
            <p>用水量：154吨</p>
          </div>
        </div>
      </div>
      <div class="alarm-top-left">
        <div class="alarm-divide" v-loading="pieLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <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 v-if="pieData.length > 0" :text="'近7日事件总量'" :id="'1'" :data="pieData"></chart-pie>
            <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
          </div>
        </div>
        <div class="alarm-divide" v-loading="pieLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <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 v-if="barData.salvProValue.length > 0" :bar-data="barData"></alarm-bar>
            <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
          </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">
          <div class="alarm-box">
            <div class="box-item" v-for="(item, i) in devList" :key="i">
              <div class="box-bg">
                <div class="box-absolute">{{item.value}}</div>
              </div>
              <div class="box-title">{{item.name}}</div>
            </div>
          </div>
<!--          <chart-bar :data="timeData"></chart-bar>-->
        </div>
      </div>
      <div class="alarm-top-center" v-loading="alarmLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
        <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, i) in alarmList" :key="i">
              <el-row :gutter="20" style="width: 600px; height: 100%">
                <el-col :span="2"  style="height: 100%">
                  <div :class="['box-logo', i+1 === 1 ? 'logo1' : '', i+1 === 2 ? 'logo2' : '', i+1 === 3 ? 'logo3' : '' ]">{{i+1}}</div>
                </el-col>
                <el-col :span="14"  style="height: 100%">
                  <div style="text-align: left">{{item.msg}}</div>
                </el-col>
                <el-col :span="4"  style="height: 100%">
                  <div>{{item.levelName}}</div>
                </el-col>
                <el-col :span="4"  style="height: 100%">
                  <div>{{item.warningTime}}</div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="flex-right">
            <div class="parent">
              <div class="parent-grid" @click="alarmClick(1)">核心区</div>
              <div class="parent-grid" @click="alarmClick(2)">生活区</div>
              <div class="parent-grid" @click="alarmClick(3)">环保区</div>
              <div class="parent-grid" @click="alarmClick(4)">其他</div>
            </div>
          </div>
        </div>
      </div>
      <div class="alarm-top-left" v-loading="personLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)">
        <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 v-if="personList.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
            <swiper-slide v-for="(item, i) in personList" :key="i">
              <div class="case" @click="open(item)">
                <div class="case-left">
                  <img :src="item.recordImage" width="100%" alt="">
                </div>
                <div class="case-right" style="text-align: left">
                  <div style="text-align: left; color: white">{{item.swingTime}}</div>
                  <div style="color: white; line-height: 30px">陌生人</div>
                  <div style="color: white; line-height: 30px">
                    进入区域：
                    <span style="padding-left: 10px">{{item.deviceName}}</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div v-else style="line-height: 200px; color: white; font-size: 20px">今日暂无异常人脸数据</div>
        </div>
      </div>
    </div>
    <div class="bio-dialog" v-show="dialog" @click="dialog = false">
      <div class="dialog-content2">
        <div class="base-banner1">
          <div class="base-left1">
            <img :src="selectImg"  height="500px" alt="">
          </div>
          <div class="base-right">
            <p>抓拍时间：{{selectItems.swingTime}}</p>
            <p>抓拍区域：{{selectItems.deviceName}}</p>
            <p> 姓 名 ：{{selectItems.personName ? selectItems.personName : '未识别'}}</p>
          </div>
        </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'
import {getAlarmList, getWeekInfo, getPersonList, getAlarmRate, getCountByDay, getDevice} from "@/utils/api";
import img from '@/assets/Alarm/111.png';
import {timeDate} from "@/utils";
import { mapState } from "vuex";

export default {
  name: "Alarm",
  components: {
    ChartPie,
    AlarmBar,
    // CostPie,
    swiper,
    swiperSlide
  },
  data() {
    return {
      barData: {
        id: 1,
        salvProName: [],
        salvProValue: []
      },
      pieData: [],
      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
        // }
      },
      ctx: null,
      num: 0,
      button1: 0,
      button2: 0,
      button3: 0,
      button4: 0,
      alarmList: [],
      list: {
        id: 2,
        salvProName: ['一级', '二级', '三级'],
        salvProValue: [0, 0, 0]
      },
      personList: [],
      selectImg: '',
      selectItems: {},
      dialog: false,
      alarmPie: [],
      dayLoading: true,
      listLoading: true,
      pieLoading: true,
      alarmLoading: true,
      personLoading: true,
      devList: [
        {
          name: '设备总数',
          value: '0'
        },
        {
          name: '异常设备',
          value: '0'
        },
        {
          name: '设备异常率',
          value: '0'
        },
      ]
    }
  },
  computed: {
    ...mapState(['ip'])
  },
  methods: {
    alarmClick(num) {
      this.num = num;
      if(num === 1) {
        this.button1++;
        this.button2 = 0;
        this.button3 = 0;
        this.button4 = 0;
        if(this.button1 %2 === 0 ) {
          this.ctx.clearRect(0, 0, 910, 504);
          this.initCanvas()
        } else {
          this.ctx.lineWidth = 4;
          this.ctx.strokeStyle = '#F59A23';
          this.ctx.fillStyle = 'rgba(224, 218, 188, .6)';
          this.ctx.beginPath();
          this.ctx.moveTo(165, 85);
          this.ctx.lineTo(750, 85);
          this.ctx.lineTo(810, 265);
          this.ctx.lineTo(590, 265);
          this.ctx.lineTo(580, 195);
          this.ctx.lineTo(330, 195);
          this.ctx.lineTo(320, 270);
          this.ctx.lineTo(100, 270);
          this.ctx.closePath();

          this.ctx.moveTo(135,280);
          this.ctx.lineTo(310, 285);
          this.ctx.lineTo(300, 345);
          this.ctx.lineTo(120, 345);
          this.ctx.closePath();
          this.ctx.stroke();
          this.ctx.fill();
        }
      } else if(num === 2) {
        this.button2++;
        this.button1 = 0;
        this.button3 = 0;
        this.button4 = 0;
        if(this.button2 %2 === 0 ) {
          this.ctx.clearRect(0, 0, 910, 504);
          this.initCanvas()
        } else {
          this.ctx.lineWidth = 4;
          this.ctx.strokeStyle = '#1ADD4B';
          this.ctx.fillStyle = 'rgba(175, 179, 95, .6)';
          this.ctx.beginPath();
          this.ctx.moveTo(160, 360);
          this.ctx.lineTo(300, 360);
          this.ctx.lineTo(300, 375);
          this.ctx.lineTo(350, 375);
          this.ctx.lineTo(350, 360);
          this.ctx.lineTo(430, 360);
          this.ctx.lineTo(430, 345);
          this.ctx.lineTo(475, 345);
          this.ctx.lineTo(475, 360);
          this.ctx.lineTo(550, 360);
          this.ctx.lineTo(550, 410);
          this.ctx.lineTo(160, 410);
          // this.ctx.lineTo(590, 265);
          // this.ctx.lineTo(580, 195);
          // this.ctx.lineTo(330, 195);
          // this.ctx.lineTo(320, 270);
          // this.ctx.lineTo(100, 270);
          this.ctx.closePath();

          this.ctx.stroke();
          this.ctx.fill();
        }
      } else if(num === 3) {
        this.button3++;
        this.button2 = 0;
        this.button1 = 0;
        this.button4 = 0;
        if(this.button3 %2 === 0 ) {
          this.ctx.clearRect(0, 0, 910, 504);
          this.initCanvas()
        } else {
          this.ctx.lineWidth = 4;
          this.ctx.strokeStyle = '#F54F23';
          this.ctx.fillStyle = 'rgba(183, 109, 105, .6)';
          this.ctx.beginPath();
          this.ctx.moveTo(620, 360);
          this.ctx.lineTo(870, 360);
          this.ctx.lineTo(900, 450);
          this.ctx.lineTo(630, 450);
          this.ctx.closePath();

          this.ctx.stroke();
          this.ctx.fill();
        }
      } else if(num === 4) {
        this.button4++;
        this.button2 = 0;
        this.button1 = 0;
        this.button3 = 0;
        if(this.button4 %2 === 0 ) {
          this.ctx.clearRect(0, 0, 910, 504);
          this.initCanvas()
        } else {
          this.ctx.lineWidth = 4;
          this.ctx.strokeStyle = '#19AEE8';
          this.ctx.fillStyle = 'rgba(169, 213, 236, .6)';
          this.ctx.beginPath();
          this.ctx.moveTo(390,200);
          this.ctx.lineTo(440, 200);
          this.ctx.lineTo(440, 240);
          this.ctx.lineTo(390, 240);
          // this.ctx.lineTo(900, 450);
          // this.ctx.lineTo(630, 450);
          this.ctx.closePath();

          this.ctx.stroke();
          this.ctx.fill();
        }
      }
    },
    initCanvas() {
      var myCanvas = document.getElementById('canvas');
      this.ctx = myCanvas.getContext('2d');
      var imgs = new Image()
      var that = this;
      imgs.onload = function () {
        that.ctx.drawImage(imgs, 0, 0, 910, 540)
      }
      imgs.src = img;
    },
    init() {
      getAlarmList({quantity: 9}).then(res => {
        if(res.code === 10000) {
          this.alarmList = res.data;
          this.alarmLoading = false;
        } else {
          this.alarmLoading = false;
          this.alarmList = [{msg: '暂无报警数据'}]
        }
      })
      getWeekInfo({}).then(res => {
        if(res.code === 10000) {
          this.list.salvProValue = [res.data.one, res.data.two, res.data.three];
          this.listLoading = false;
        }
      })
      let params = {
        pageNum: 1,
        pageSize: 20,
        startSwingTime: timeDate(new Date().getTime()) + ' 00:00:00',
        endSwingTime: timeDate(new Date().getTime()) + ' 23:59:59',
        containDomain: 1,
        openResult: 0
      }
      getPersonList(params).then(async res => {
        if(res.code == 0) {
          let result = JSON.parse(res.result);
          this.personList = result.data.pageData;
          // const { token } = await getFaceToken();
          this.personList.forEach((item) => {
            item.channelName = item.channelName.split("人脸门禁")[0];
            item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`;
            // item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`;
          });
        }
        this.personLoading = false;
      })
      getAlarmRate({}).then(res => {
        if(res.code === 10000) {
          this.alarmPie = res.data;
          this.dayLoading = false;
        } else {
          this.dayLoading = false;
        }
      })
      getCountByDay({}).then(res => {
        if(res.code === 0) {
          if(res.data !== null) {
            this.barData.salvProName = [];
            this.barData.salvProValue = [];
            res.data.forEach(item => {
              this.barData.salvProName.push(item.name);
              this.barData.salvProValue.push(item.value);
            })
            this.pieData = res.data;
            console.log(this.pieData);
          }
          this.pieLoading = false;
        } else {
          this.pieLoading = false;
        }
      })
      getDevice({bit: 2}).then(res => {
        if(res.code === 10000) {
          this.devList[0].value = res.data.total;
          this.devList[1].value = res.data.num;
          this.devList[2].value = res.data.rate;
        } else {
          this.devList[0].value = "0";
          this.devList[1].value = "0";
          this.devList[2].value = "0";
        }
      })
    },
    // 打开img
    open(item) {
      this.dialog = true;
      this.selectImg = item.recordImage;
      this.selectItems = item;
    }
  },
  mounted() {
    this.initCanvas()
    this.init();
  }
}
</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);
    position: relative;
  }
  .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: 600px;
    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;
    cursor: pointer;
  }
  .case {
    margin: 0 auto;
    width: 370px;
    height: 75px;
    background: url("../../assets/BioSafety/370x75(1).svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
  }
  .case-left {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 100%;
    display: flex;
    align-items: center;
  }
  .case-right {
    margin-left: 10px;
    flex: 1
  }
  #canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
  .bubble {
    width: 150px;
    height: 100px;
    position: absolute;
    background-color: rgba(35, 57, 87, .8);
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
  }
  .bubble::after{
    content: '';
    width: 0;
    height: 0;
    border: 20px solid;
    position: absolute;
    bottom: -40px;
    left: 58px;
    border-color: rgba(35, 57, 87, .8) transparent transparent;
  }
  .bubble p {
    margin: 0;
    line-height: 20px;
    color: #66FFFF;
  }
  .yufeishe {
    top: 40px;
    left: 160px;
  }
  .baoyushe {
    top: 40px;
    right: 160px;
  }
  .gelishe {
    top: 180px;
    left: 160px;
  }
  .shenghuo {
    bottom: 180px;
    left: 375px;
  }
  .huanbao {
    bottom: 150px;
    right: 80px;
  }
  .shui {
    top: 100px;
    left: 340px;
  }
  .bio-dialog {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, .9);
    z-index: 999;
  }
  .dialog-content1 {
    width: 15%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background-color: #fff;*/
  }
  .alarm-box {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .box-item {
    flex: 1;
    box-sizing: border-box;
    padding-top: 60px;
  }
  .box-bg {
    margin: 0 auto;
    width: 85%;
    height: 75%;
    background: url("../../assets/Alarm/banner.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .box-title {
    text-align: center;
    color: #fff;
    /*height: 25%;*/
    line-height: 400%;
  }
  .box-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -195%);
    font-size: 18px;
    color: #fff;
  }
  .dialog-content2 {
    width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /*background-color: black;*/
  }
  .base-banner1 {
    width: 800px;
    height: 600px;
    background: url("../../assets/BioSafety/03.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    box-sizing: border-box;
    padding: 40px 20px 20px 50px;
    align-items: center;
  }
  .base-left {
    width: 750px;
  }
  .base-left1 {
    box-sizing: border-box;
    text-align: left;
    padding-left: 100px;
    height: 500px;
  }
  .base-right {
    flex: 1;
  }
  .base-right p {
    line-height: 80px;
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    text-align: left;
    padding-left: 50px;
  }
</style>