<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" id="fireId" @mouseenter="mouseOver" @mouseleave="mouseLeave">
          <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"
          id="policeId"
          @mouseenter="mouseOver1"
          @mouseleave="mouseLeave1"
        >
          <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 {
      intervalTime: null, //定时器
      intervalTime1: null, //定时器
      securityList: [
        {
          tit: "摄像头监管",
          security: [
            {
              name: "",
              count: "",
            },
            {
              name: "摄像头总数",
              count: "0",
            },
            {
              name: "摄像头在线数量",
              count: "0",
            },
            {
              name: "摄像头离线数量",
              count: "0",
            },
            {
              name: "摄像头报警数",
              count: "0",
            },
            {
              name: "摄像头昨日报警数",
              count: "0",
            },
          ],
        },
        {
          tit: "门禁监管",
          security: [
            {
              name: "",
              count: "",
            },
            {
              name: "门禁总数",
              count: "0",
            },
            {
              name: "门禁在线数量",
              count: "0",
            },
            {
              name: "门禁离线数量",
              count: "0",
            },
            {
              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() {
    window["getsecurity"] = (name) => {
      console.log("name", name);
    };
    // setTimeout(() => {
    window["getWarning"] = (name) => {
      // alert("goPage:"+b);
      // console.log("name",name)
      if (name.indexOf("法院一层") != -1) {
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1 ||
          name.indexOf("自助立案") != -1 ||
          name.indexOf("门厅") != -1 ||
          name.indexOf("展厅") != -1
        ) {
          // console.log("消防联动,主楼一层,公共区");
        } else {
          //  console.log("消防联动,主楼一层,办公区");
        }
      } else if (name.indexOf("法院四层") != -1) {
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1 ||
          name.indexOf("自助立案") != -1
        ) {
          // console.log("消防联动,主楼四层,公共区");
        } else {
          // console.log("消防联动,主楼四层,办公区");
        }
      } else if (name.indexOf("法院二层") != -1) {
        //console.log("消防联动 主楼二层");
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1 ||
          name.indexOf("自助立案") != -1
        ) {
          //console.log("消防联动,主楼二层,公共区");
        } else {
          // console.log("消防联动,主楼二层,办公区");
        }
      } else if (name.indexOf("法院三层") != -1) {
        // console.log("消防联动 主楼三层");
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1 ||
          name.indexOf("自助立案") != -1
        ) {
          //console.log("消防联动,主楼三层,公共区");
        } else {
          // console.log("消防联动,主楼三层,办公区");
        }
      } else if (name.indexOf("辅楼1层") != -1) {
        // console.log("消防联动 辅楼一层");
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1 ||
          name.indexOf("自助立案") != -1
        ) {
          //console.log("消防联动,辅楼一层,公共区");
        } else {
          // console.log("消防联动,辅楼一层,办公区");
        }
      } else if (name.indexOf("辅楼2层") != -1) {
        // console.log("消防联动 辅楼二层");
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1
        ) {
          // console.log("消防联动,辅楼二层,公共区");
        } else {
          // console.log("消防联动,辅楼二层,办公区");
        }
      } else if (name.indexOf("辅楼3层") != -1) {
        //console.log("消防联动 辅楼三层");
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1 ||
          name.indexOf("电梯") != -1
        ) {
          //console.log("消防联动,辅楼三层,公共区");
        } else {
          // console.log("消防联动,辅楼三层,办公区");
        }
      } else if (name.indexOf("辅楼4层") != -1) {
        //console.log("消防联动 辅楼四层");
        if (
          name.indexOf("走道") != -1 ||
          name.indexOf("大厅") != -1 ||
          name.indexOf("楼梯") != -1 ||
          name.indexOf("电梯") != -1
        ) {
          // console.log("消防联动,辅楼四层,公共区");
        } else {
          // console.log("消防联动,辅楼四层,办公区");
        }
      }
    };
    this.getAnfang();
    //获取消防告警
    this.getPoliceList();
    this.getFireWarnList();
    // 获取安防告警

    //获取安防统计今天昨天报警数量
    this.getAlarmCount();
    window.alarmFirstLevel = this.alarmFirstLevel;
    window.alarmSecondLevel = this.alarmSecondLevel;
    window.alarmThirdLevel = this.alarmThirdLevel;
    let name = "fire";
    let name1 = "police";
    this.autoScrollsecurity(67, 50, 0, document.getElementById("fireId"), name);
    this.autoScrollsecurity(67, 50, 0, document.getElementById("policeId"), name1);
    // }, 1000);
  },

  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;
        })
        .catch((err) => {});
    },
    //获取设备离线在线数据

    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;
            })
            .catch((err) => {});
        })
        .catch((err) => {});

      //获取视频状态
      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;
          });
        })
        .catch((err) => {});
    },
    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,
            };
          });
        })
        .catch((err) => {});
    },
    //获取安防报警、
    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,
            };
          });
        })
        .catch((err) => {});
    },
    //获取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();
          this.getsecurity(warnListMqtt[i].position);
        }
        if (warnListMqtt[i].DeviceType == "消防") {
          //console.log("warnListMqtt[i]",warnListMqtt[i])
          this.fireWarnList.splice(0, 0, warnListMqtt[i]);
          this.getWarning(warnListMqtt[i].position);
        }
      }
    },
    getWarning: function (name) {
      getWarning(name);
    },
    getsecurity: function (name) {
      getsecurity(name);
    },
    //自动滚动
    autoScrollsecurity(stepLength, speed, delay, element, name) {
      let that = this;

      if (name == "fire") {
        let step = 1;
        element.scrollTop = 0;
        function start() {
          that.intervalTime = setInterval(scrolling, speed);
          element.scrollTop += step;
        }

        function scrolling() {
          if (
            element.scrollTop % stepLength !== 0 &&
            element.scrollTop === element.scrollHeight - element.offsetHeight
          ) {
            // element.scrollTop += step
            step = 1;
            element.scrollTop = 0;
          } else {
            // if (
            //   element.scrollTop === 0 ||
            //   element.scrollTop === element.scrollHeight - element.offsetHeight
            // ) {
            //   // 触顶或触底\
            //   // step *= -1; // 转换方向
            // }
            clearInterval(that.intervalTime);
            setTimeout(start, delay);
          }
        }
        if (element.offsetHeight !== element.scrollHeight) {
          // 元素内容没有溢出时，不触发
          setTimeout(start, delay);
        }
      } else if (name == "police") {
        let step = 1;
        element.scrollTop = 0;
        function start() {
          that.intervalTime1 = setInterval(scrolling, speed);
          element.scrollTop += step;
        }

        function scrolling() {
          if (
            element.scrollTop % stepLength !== 0 &&
            element.scrollTop === element.scrollHeight - element.offsetHeight
          ) {
            // element.scrollTop += step
            step = 1;
            element.scrollTop = 0;
          } else {
            // if (
            //   element.scrollTop === 0 ||
            //   element.scrollTop === element.scrollHeight - element.offsetHeight
            // ) {
            //   // 触顶或触底\
            //   // step *= -1; // 转换方向
            // }
            clearInterval(that.intervalTime1);
            setTimeout(start, delay);
          }
        }
        if (element.offsetHeight !== element.scrollHeight) {
          // 元素内容没有溢出时，不触发
          setTimeout(start, delay);
        }
      }
    },
    //鼠标移入事件
    mouseOver() {
      let that = this;
      clearInterval(that.intervalTime);
      that.intervalTime = null;
    },
    mouseLeave() {
      if (this.intervalTime == null) {
        let name = "fire";
        this.autoScrollsecurity(67, 50, 0, document.getElementById("fireId"), name);
      }
    },
    //鼠标移入事件
    mouseOver1() {
      let that = this;
      clearInterval(that.intervalTime1);
      that.intervalTime1 = null;
    },
    mouseLeave1() {
      if (this.intervalTime1 == null) {
        let name = "police";
        this.autoScrollsecurity(67, 50, 0, document.getElementById("policeId"), name);
      }
    },
  },
  beforeDestroy() {
    let that = this;
    // 离开当前路由前的操作
    clearInterval(that.intervalTime);
    clearInterval(that.intervalTime1);
    that.intervalTime = null;
    that.intervalTime1 = null;
  },
  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>
