<template>
  <div class="securityMain">
    <div class="left">
      <div class="leftOne">
        <div class="title">安防统计数据</div>
        <!-- <div class="security"> -->
        <!-- <img src="../assets/images/anFangAc.png" class="securityImg"/>
          <div class="securitySupervision">安防监管</div>
          <div class="securityCount">
            <div
              class="securityList"
              v-for="(item, index) in securityList"
              :key="index"
            >
              <span>{{ item.name }}</span>
              <span>{{ item.count }}</span>
            </div>

          </div>
           <img src="../assets/images/anFangAc.png" class="securityImg"/>
          <div class="securitySupervision">安防监管</div>
          <div class="securityCount">
            <div
              class="securityList"
              v-for="(item, index) in securityList"
              :key="index"
            >
              <span>{{ item.name }}</span>
              <span>{{ item.count }}</span>
            </div>
          </div> -->
        <el-carousel
          class="security"
          :autoplay="true"
          trigger="click"
          :interval="7000"
        >
          <el-carousel-item
            v-for="(item, index) in securityList"
            :key="index"
            class="equipmentEnergy"
          >
            <img src="../assets/images/anFangAc.png" class="securityImg" />
            <!-- <div class="securitySupervision">安防监管</div> -->
            <div class="securitySupervision">{{ item.tit }}</div>
            <div class="securityCount">
              <div
                class="securityList"
                v-for="(i, k) in item.security"
                :key="k"
              >
                <span>{{ i.name }}</span>
                <span>{{ i.count }}</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <!-- </div> -->
      </div>
      <div class="leftTwo">
        <div class="title" style="height: 8%">预警视频监控联动</div>
        <div class="warnVideo">
          <!-- <div class="warnCamera">
            <img src="../assets/images/camera.png" style="width:100%;height:100%"/>
          </div> -->
          <div class="warnCameraList">
            <div
              style="width: 45%; height: 30%"
              v-for="(item, index) in warnCameraList"
              :key="index"
              @click="videoChange(index)"
            >
              <img :src="item.icon" style="width: 100%; height: 100%" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="rightOne">
        <div class="title" style="height: 10%">火灾报警管理</div>
        <div class="fire">
          <div
            class="warnList"
            v-for="(item, index) in fireWarnList"
            :key="index"
          >
            <img :src="item.icon" />
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: 65%;
              "
            >
              <span
                style="display: flex; width: 100%; justify-content: flex-start"
                >报警时间:<span style="margin-left: 5%">{{
                  item.time
                }}</span></span
              >
              <span
                style="
                  margin-top: 3%;
                  display: flex;
                  width: 100%;
                  justify-content: flex-start;
                "
                >设备定位:<span
                  style="color: rgb(0, 255, 255); margin-left: 5%"
                  >{{ item.position }}</span
                ></span
              >
              <span
                style="
                  margin-top: 3%;
                  display: flex;
                  width: 100%;
                  justify-content: flex-start;
                "
                >报警状态:<span
                  style="color: rgb(0, 255, 255); margin-left: 5%"
                  >{{ item.status }}</span
                ></span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="rightTwo">
        <div class="title" style="height: 10%">安防报警管理</div>
        <div class="police">
          <div
            class="warnList"
            v-for="(item, index) in policeList"
            :key="index"
          >
            <span>{{ item.id }}</span>
            <img :src="item.icon" />
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: 65%;
              "
            >
              <span
                style="display: flex; width: 100%; justify-content: flex-start"
                >报警时间:<span style="margin-left: 5%">{{
                  item.time
                }}</span></span
              >
              <span
                style="
                  margin-top: 3%;
                  display: flex;
                  width: 100%;
                  justify-content: flex-start;
                "
                ><span style="white-space: nowrap">设备内容:</span
                ><span
                  style="
                    color: rgb(0, 255, 255);
                    margin-left: 5%;
                    display: flex;
                    justify-content: flex-end;
                    text-align: left;
                  "
                  >{{ item.position }}</span
                ></span
              >
              <span
                style="
                  margin-top: 3%;
                  display: flex;
                  width: 100%;
                  justify-content: flex-start;
                "
                >报警状态:<span
                  style="color: rgb(0, 255, 255); margin-left: 5%"
                  >{{ item.status }}</span
                ></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetLevelAlarm, getSecurityAlarmCount } from "../api/index";
import { getHikvision } from "../api/haikang";
export default {
  name: "security",
  data() {
    return {
      securityList: [
        {
          tit: "摄像头监管",
          security: [
            {
              name: "",
              count: "",
            },
            {
              name: "摄像头总数",
              count: "609",
            },
            {
              name: "摄像头在线数量",
              count: "602",
            },
            {
              name: "摄像头离线数量",
              count: "7",
            },
            {
              name: "摄像头报警数",
              count: "0",
            },
            {
              name: "摄像头昨日报警数",
              count: "0",
            },
          ],
        },
        {
          tit: "门禁监管",
          security: [
            {
              name: "",
              count: "",
            },
            {
              name: "门禁总数",
              count: "609",
            },
            {
              name: "门禁在线数量",
              count: "602",
            },
            {
              name: "门禁离线数量",
              count: "7",
            },
            {
              name: "门禁今日报警数",
              count: "0",
            },
            {
              name: "门禁昨日报警数",
              count: "0",
            },
          ],
        },
        
        
      ],
      warnCameraList: [
        {
          icon: require("../assets/images/anFang/videoAc.png"),
        },
        {
          icon: require("../assets/images/anFang/video.png"),
        },
        {
          icon: require("../assets/images/anFang/video.png"),
        },
        {
          icon: require("../assets/images/anFang/video.png"),
        },
        {
          icon: require("../assets/images/anFang/video.png"),
        },
        {
          icon: require("../assets/images/anFang/video.png"),
        },
      ],
      fireWarnList: [
        {
          icon: require("../assets/images/jieNengImg/warnBlue.png"),
          time: "2023年03月12日 15:45:10",
          position: "烟感",
          status: "已解除",
        },
        {
          icon: require("../assets/images/jieNengImg/warnBlue.png"),
          time: "2023年03月12日 15:45:10",
          position: "烟感",
          status: "已解除",
        },
        {
          icon: require("../assets/images/jieNengImg/warnWhite.png"),
          time: "2023年03月12日 15:45:10",
          position: "烟感",
          status: "已解除",
        },
        {
          icon: require("../assets/images/jieNengImg/warnBlue.png"),
          time: "2023年03月12日 15:45:10",
          position: "烟感",
          status: "已解除",
        },
      ], //故障数组
      policeList: [
        {
          id: "1",
          icon: require("../assets/images/anFang/exclamatory.png"),
          time: "2023年03月12日 15:45:10",
          position: "306门禁故障",
          status: "已解除",
        },
        {
          id: "2",
          icon: require("../assets/images/anFang/exclamatory.png"),
          time: "2023年03月12日 15:45:10",
          position: "201门禁故障",
          status: "已解除",
        },
        {
          id: "3",
          icon: require("../assets/images/anFang/exclamatory.png"),
          time: "2023年03月12日 15:45:10",
          position: "206门禁故障",
          status: "已解除",
        },
        {
          id: "4",
          icon: require("../assets/images/anFang/exclamatory.png"),
          time: "2023年03月12日 15:45:10",
          position: "106门禁故障",
          status: "已解除",
        },
      ],
      alarmFirstLevel: [],
      alarmSecondLevel: [],
      alarmThirdLevel: [],
    };
  },
  mounted() {
    this.getAnfang();
    //获取消防告警
    this.getPoliceList();
    this.getFireWarnList();
    // 获取安防告警

    //获取安防统计今天昨天报警数量
    this.getAlarmCount();
    window.alarmFirstLevel = this.alarmFirstLevel;
    window.alarmSecondLevel = this.alarmSecondLevel;
    window.alarmThirdLevel = this.alarmThirdLevel;
  },

  watch: {
    alarmFirstLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmFirstLevel", val);
      if (val.length != 0) {
        this.upmqttData(val);
      }
    },
    alarmSecondLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmSecondLevel", val);
      this.upmqttData(val);
    },
    alarmThirdLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmThirdLevel", val);
      this.upmqttData(val);
    },
  },
      watch: {
     alarmFirstLevel(val) {
       
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmFirstLevel",val)
      if(val.length!=0){
        this.upmqttData(val) 
      }
      
    },
     alarmSecondLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmSecondLevel",val)
      this.upmqttData(val) 
    },
     alarmThirdLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmThirdLevel",val)
      this.upmqttData(val) 
    },
     },
  methods: {
    //获取昨天今天的报警数量
    getAlarmCount() {
      getSecurityAlarmCount().then((res) => {
        this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
        this.securityList[0].security[5].count =
          res.data.data.VideoYesterdayCount;
        this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
        this.securityList[1].security[5].count =
          res.data.data.DoorYesterdayCount;
      });
    },
    //获取设备离线在线数据

    getAnfang() {
      //获取门禁状态
      var indexcode = [
        "13222435-8646-4006-982a-76febb4dd8a2",
        "fd91efcf-9d11-4b3e-ad69-6e6c1069f4ec",
        "e3043e94-c8d9-49b2-9627-7a10f15cf079",
        "f5790df0-60e9-4a1f-be2f-e75d6331467d",
        "05859fa6-6440-401e-950f-37ba61094c4d",
        "21ff542a-ca97-4974-88e7-d52408b8a412",
        "608d4d1d-a69a-4d07-82da-553914616b1d",
        "5b5b43cd-a722-4eb4-b3f2-3b60fd1357ad",
        "f524c8df-42f9-4f89-8594-cad8e3cdb37f",
        "71ced52a-f04e-4d74-834c-8e329485106b",
        "8763ebb7-4bc6-4022-80df-a38804f58d39",
        "f349ab39-aa64-4e4f-ae85-585f30321325",
        "8ca45d1f-5919-47df-be93-8c6c4efb81a4",
        "1223f3b3-3fa3-4df2-b03a-058fcb62b4c9",
        "1fc85a1e-1084-4cc2-91a4-ec2b5e74c5a2",
        "b7bb3c6c-ceeb-4fc9-a37e-c7d075fd4ede",
        "beac672d-7555-49fc-bc97-d873fcc8eb48",
        "5a9e819d-af8d-45ea-9a77-bd36a2168e20",
        "17e8a2a0-079b-4e70-bde6-24911980e1b2",
        "d16fe1ce-4251-4cfb-8316-9380196942e1",
        "266a956e-cb4f-47f4-8ab8-ecbbb6f4a3f7",
        "a2038008-e1db-4666-8902-c69af1d7cc50",
        "9273528b-9fa9-4877-8eb0-1595e3accf83",
        "be26abf3-c2dd-41d3-ace1-b8a2006d663c",
        "46ba67a9-e4d0-48ab-b837-255bb963860a",
        "fe6e6dab-4ec7-47c1-a286-8ff661f8b8f6",
      ];
      let dataList = {
        path: "/artemis/api/resource/v2/door/search",
        data: {
          regionIndexCodes: indexcode,
          pageNo: 1,
          pageSize: 1000,
        },
      };
      let indexCodeList = [];
      getHikvision(dataList).then((res) => {
        res.data.result.data.list.forEach((item, index) => {
          indexCodeList.push(item.indexCode);
        });
        let doorStatusList = {
          path: "/artemis/api/acs/v1/door/states",
          data: {
            doorIndexCodes: indexCodeList,
            pageNo:1,
            pageSize:1000
          },
        };
        let doorTotal = 0;
        let doorOnLine = 0;
        let offLine = 0;
        let doorTotalList = [];
        let doorOnLineList = [];
        let offLineList = [];
        getHikvision(doorStatusList).then((res) => {
          console.log(res.data.result.data.authDoorList, "门禁状态数量");
          for (let i = 0; i < res.data.result.data.authDoorList.length; i++) {
            //获取总数的数组
            doorTotalList.push(res.data.result.data.authDoorList);
            if (res.data.result.data.authDoorList[i].doorState == 3) {
              //获取离线的数组
              offLineList.push(res.data.result.data.authDoorList[i].doorState);
            }
          }
          //门禁总数数量
          this.securityList[1].security[1].count = doorTotalList.length;
          //门禁离线数数量
          this.securityList[1].security[3].count = offLineList.length;
          //门禁在线数数量
          this.securityList[1].security[2].count = this.securityList[1].security[1].count - this.securityList[1].security[3].count;
        });
      });

      //获取视频状态
      let cameraList = {
        path: "/artemis/api/resource/v2/camera/search",
        data: {
          regionIndexCodes: indexcode,
          pageNo: 1,
          pageSize: 1000,
        },
      };
      let cameraCodeList = []
      getHikvision(cameraList).then((res) => {
        res.data.result.data.list.forEach((item, index) => {
          cameraCodeList.push(item.indexCode);
        });
        let cameraStatusList = {
          path: "/artemis/api/nms/v1/online/camera/get",
          data: {
            indexCodes: cameraCodeList,
            pageNo:1,
            pageSize:1000
          },
        };
        let cameraTotalList = [];
        let cameraOnLineList = [];
        let cameraoffLineList = [];
        getHikvision(cameraStatusList).then((res) => {
          console.log(res.data.result.data.list, "摄像头状态数量");
          for (let i = 0; i < res.data.result.data.list.length; i++) {
            //获取总数的数组
            cameraTotalList.push(res.data.result.data.list);
            if (res.data.result.data.list[i].online == 0) {
              //获取离线的数组
              cameraoffLineList.push(res.data.result.data.list[i].online);
            }
          }
          //门禁总数数量
          this.securityList[0].security[1].count = cameraTotalList.length;
          //门禁离线数数量
          this.securityList[0].security[3].count = cameraoffLineList.length;
          //门禁在线数数量
          this.securityList[0].security[2].count = this.securityList[0].security[1].count - this.securityList[0].security[3].count;
        });
      });
    },
    videoChange(index) {
      this.warnCameraList.forEach((item, i) => {
        item.icon = require("../assets/images/anFang/video.png");
      });
      this.warnCameraList[
        index
      ].icon = require("../assets/images/anFang/videoAc.png");
    },

    //获取火灾报警、
    getFireWarnList() {
      let params = {
        AlarmLevel: "",
        DeviceTypes: "消防",
      };
      GetLevelAlarm(params).then((res) => {
        let icon = null;
        this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
          if (res.data.data[index].Status == 0) {
            res.data.data[index].Status = "未处理";
            icon = require("../assets/images/jieNengImg/warnWhite.png");
          } else {
            res.data.data[index].Status = "已处理";
            icon = require("../assets/images/jieNengImg/warnBlue.png");
          }
          return {
            icon: icon,
            time: this.$moment(res.data.data[index].AlarmTime).format(
              "YYYY-MM-DD HH:mm:ss"
            ),
            DeviceType: res.data.data[index].DeviceType,
            // position: res.data.data[index].DeviceType,
            position: res.data.data[index].AlarmName,
            // status: res.data.data[index].AlarmLevel,
            status: res.data.data[index].Status,
            AlarmLevel: res.data.data[index].AlarmLevel,
          };
        });
      });
    },
    //获取安防报警、
    getPoliceList() {
      let params = {
        AlarmLevel: "",
        DeviceTypes: "门禁,视频监控",
      };
      GetLevelAlarm(params).then((res) => {
        let icon = null;
        this.policeList = Object.keys(res.data.data).map((item, index) => {
          if (res.data.data[index].Status == 0) {
            res.data.data[index].Status = "未处理";
            icon = require("../assets/images/jieNengImg/warnWhite.png");
          } else {
            res.data.data[index].Status = "已处理";
            icon = require("../assets/images/jieNengImg/warnBlue.png");
          }
          return {
            icon: icon,
            time: this.$moment(res.data.data[index].AlarmTime).format(
              "YYYY-MM-DD HH:mm:ss"
            ),
            DeviceType: res.data.data[index].DeviceType,
            position: res.data.data[index].AlarmName,
            // status: res.data.data[index].AlarmLevel,
            status: res.data.data[index].Status,
            AlarmLevel: res.data.data[index].AlarmLevel,
          };
        });
      });
    },
    //获取mqtt数据
    upmqttData(val) {
      let icon = null;
      var warnListMqtt = [];
      warnListMqtt = Object.keys(val).map((item, index) => {
        if (val[index].Status == 0) {
          val[index].Status = "未处理";
          icon = require("../assets/images/jieNengImg/warnWhite.png");
        } else {
          val[index].Status = "已处理";
          icon = require("../assets/images/jieNengImg/warnBlue.png");
        }
        if (val[index].AlarmLevel == 1) {
          val[index].AlarmLevel = "一级";
        } else if (val[index].AlarmLevel == 2) {
          val[index].AlarmLevel = "二级";
        } else if (val[index].AlarmLevel == 3) {
          val[index].AlarmLevel = "三级";
        }
        return {
          icon: icon,
          time: this.$moment(val[index].AlarmTime).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          position: val[index].AlarmName,
          DeviceType: val[index].DeviceType,
          status: val[index].Status,
          AlarmLevel: val[index].AlarmLevel,
        };
      });
      console.log("warnListMqtt", warnListMqtt);
      for (let i = 0; i < warnListMqtt.length; i++) {
        if (warnListMqtt[i].AlarmLevel == "三级") {
          this.policeList.splice(0, 0, warnListMqtt[i]);
          this.getAlarmCount();
        }
        if (warnListMqtt[i].DeviceType == "消防") {
          this.fireWarnList.splice(0, 0, warnListMqtt[i]);
        }
      }
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
@fontsize: 0.9rem;
.securityMain {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3% 0 0.3%;
  box-sizing: border-box;
  .left {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: leftAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .leftOne {
      width: 100%;
      height: 35%;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      align-content: space-between;
      .security {
        height: calc(100% - 25%);
        width: 100%;
        padding-right: 5%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        position: relative;
        /deep/ .el-carousel__container {
          height: 100%;
          width: 100%;
        }
        /deep/ .el-carousel__indicators--horizontal {
          display: none;
        }
        .securityImg {
          position: absolute;
          left: 10%;
        }
        .securitySupervision {
          width: 50%;
          height: 12%;
          background: url("../assets/images/anFang/securityBack.png") no-repeat;
          background-size: 100% 100%;
          color: #fff;
          font-size: @fontsize;
          margin-left: 50%;
        }
        .securityCount {
          width: 100%;
          height: calc(100% - 12%);
          position: relative;
          display: flex;
          justify-content: flex-end;
          flex-wrap: wrap;
          align-items: center;
          .securityList {
            width: 30%;
            height: 20%;
            color: #fff;
            margin-left: 2%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 0.7rem;
          }
        }
      }
    }
    .leftTwo {
      width: 100%;
      height: 65%;
      .warnVideo {
        height: calc(100% - 8%);
        width: 100%;
        padding: 0 3%;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        // .warnCamera{
        //   width: 100%;
        //   height: 40%;
        //   border: 3px solid rgb(1, 176, 202);
        // }
        .warnCameraList {
          height: 90%;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
  @keyframes leftAnimation {
    0% {
      position: relative;
      left: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      left: 0%;
      transform: scale(1);
    }
  }
  .right {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: rightAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .rightOne {
      width: 100%;
      height: 50%;
      .fire {
        height: calc(100% - 10%);
        width: 100%;
        overflow: auto;
        .warnList {
          height: 32%;
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-around;
          //   padding-right: 20%;
          padding-right: 5%;
          box-sizing: border-box;
          color: #fff;
          font-size: 0.7rem;
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
    }
    .rightTwo {
      width: 100%;
      height: 50%;
      .police {
        height: calc(100% - 10%);
        width: 100%;
        overflow: auto;
        .warnList {
          height: 32%;
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-around;
          padding-right: 20%;
          box-sizing: border-box;
          color: #fff;
          font-size: 0.7rem;
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
    }
  }
  @keyframes rightAnimation {
    0% {
      position: relative;
      right: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      right: 0%;
      transform: scale(1);
    }
  }
}
.title {
  width: 100%;
  height: 13%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
}
.caseTitle {
  width: 23%;
  height: 10%;
  background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding-left: 5%;
  box-sizing: border-box;
  margin-top: 2%;
}
</style>