<template>
  <!-- 门禁 -->
  <div v-if="doorState" class="door">
    <!-- 各楼栋楼层切换 -->
    <clickCp :bimModel="bimModel" sbType="电子门禁" ref="clickcp" :conditions="condition"></clickCp>
    <!-- 返回主视角 -->
    <backHome :bimModel="bimModel" type="电子门禁" :condition="condition" dom=".mapDom"></backHome>
    <div class="mapDom" style="
        position: absolute;
        left: 105px;
        top: 370px;
        width: 250px;
        height: 180px;
      " v-if="bimModel == 1"></div>
    <div class="searchDoors" style="padding: 15px; background-repeat: no-repeat"
      :style="{ top: bimModel == 1 ? '250px' : '260px' }">
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border1"
        style="width: 15px; height: 15px" />
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border2"
        style="width: 15px; height: 15px" />
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border3"
        style="width: 15px; height: 15px" />
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border4"
        style="width: 15px; height: 15px" />
      <div>
        <span style="font-size: 13px; color: rgb(1, 238, 255)">设备名称：</span>
        <el-select v-model="doorName" placeholder="请选择" style="
            background-color: rgb(19, 63, 160);
            width: 150px;
            max-height: 200px;
          " size="mini" v-loadmore="loadMore" popper-class="pull" :popper-append-to-body="false">
          <el-option v-for="(item, key) in sbLists1" :key="key" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </div>
      <div style="margin-top: 15px; display: flex; justify-content: space-around">
        <el-button style="
            background-color: rgb(1, 238, 255);
            color: rgb(23, 72, 167);
            border: 0;
            width: 80px;
          " size="small" @click="searchDoor">查询</el-button>
        <el-button style="
            background-color: white;
            color: rgb(23, 72, 167);
            border: 0;
            width: 80px;
          " size="small" @click="searchDetail">详细查询</el-button>
      </div>
    </div>
    <div class="box2" :class="bimModel == 2 ? 'tataigen' : ''">
      <div class="title flex-center">
        <img class="icon" src="../../../public/img/monitoring/electricity/sbIcon.png" />
        <span>设备概况</span>
      </div>
      <div class="state flex-center-center">
        <div class="zc flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.normalEquipNumber }}</span>
        </div>
        <div class="lx flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.warnEquipEquipNumber }}</span>
        </div>
        <div class="bj flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.warnEventEquipNumber }}</span>
        </div>
      </div>
      <div class="stateName flex-center-center">
        <span class="zc span_box">正常</span>
        <span class="lx span_box">故障报警</span>
        <span class="bj span_box">安全报警</span>
      </div>
      <div class="tab_box">
        <div class="tab_one" @click="clickAlarm(1)" :style="{ color: activeTab == 1 ? '#07E6ED' : '#fff' }">
          <!-- <span>系统报警 <span class="circle"></span> <span>(4)</span></span> -->
          <el-badge :is-dot="isAlarm" class="item">故障报警</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</span>
        </div>
        <div class="tab_one tab_two" @click="clickAlarm(2)" :style="{ color: activeTab == 2 ? '#07E6ED' : '#fff' }">
          <el-badge :is-dot="isSafe" class="item">安全报警</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEventWarnMumber }})</span>
        </div>
        <!-- <div class="tab_one tab_two" @click="clickAlarm(2)" :style="{color: isSafe ? 'red' :'#fff'}"><el-badge :is-dot='isSafe' class="item">安全报警</el-badge><span style="margin-left:5px;vertical-align: bottom;">({{safeTotal}})</span></div> -->
      </div>
      <div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''">
        <p>设备名称</p>
        <span>|</span>
        <p>报警信息</p>
        <span>|</span>
        <p>报警时间</p>
      </div>
      <div v-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEquipList &&
        listData.warnEquipList.length == 0 &&
        activeTab == 1
      " class="noBjxx">
        暂无故障报警信息
      </div>
      <div v-else-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEventList &&
        listData.warnEventList.length == 0 &&
        activeTab == 2
      " class="noBjxx">
        暂无安全报警信息
      </div>
      <div v-else class="warp">
        <div class="item flex-center" @mouseenter="showAlarkAlert(item, index, 0)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 0)" v-for="(item, index) in listData.warnEquipList" :key="index"
          v-if="activeTab == 1">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)" v-if="item.modelId != ''">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span>
            <p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span>
            <p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
              <i class="el-icon-refresh-right" style="margin-right:10px;"></i>
              <span>告警恢复</span>
            </p>
          </div>
          <div class="box flex-center" :class="bimModel == 2 ? 'tataicon' : ''">
            <div class="left flex-center-center">
              <img class="icon" :src="
                require(item.warnStatus == 2
                  ? '../../../public/img/monitoring/electricity/lx.png'
                  : '../../../public/img/monitoring/electricity/bj.png')
              " />
              <span class="message" v-text="item.name" :title="item.name" :style="{
                color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
              }"></span>
            </div>
            <span class=""></span>
            <span class="data" :title="item.warnContent" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }">{{ item.warnContent }}</span>
            <span class=""></span>
            <span class="time" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
        <div class="item flex-center" v-for="(item, index) in listData.warnEventList" :key="index"
          @mouseenter="showAlarkAlert(item, index, 1)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 1)">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)" v-if="item.modelId != ''">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.confirmStatus == 1 && item.modelId != ''">|</span>
            <p v-if="item.confirmStatus == 1" @click="doCancelWarn(item)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span>
            <p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
              <i class="el-icon-refresh-right" style="margin-right:10px;"></i>
              <span>告警恢复</span>
            </p>
          </div>
          <div class="box flex-center">
            <div class="left flex-center-center">
              <img class="icon" :src="
                require(item.warnStatuss == 2
                  ? '../../../public/img/monitoring/electricity/lx.png'
                  : '../../../public/img/monitoring/electricity/bj.png')
              " />
              <span class="message" v-text="item.name" :title="item.name" :style="{
                color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
              }"></span>
            </div>
            <span class=""></span>
            <span class="data" :title="item.warnContent" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }">{{ item.warnContent }}</span>
            <span class=""></span>
            <span class="time" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
      </div>
      <div style="
          position: absolute;
          bottom: 10px;
          right: 10px;
          width: 345px;
          text-align: right;
          color: rgb(7, 230, 237);
          font-size: 14px;
          cursor: pointer;
        ">
        <span @click="goMoreWarnList">查看报警详情</span>
      </div>
    </div>
    <!-- 设备列表 -->
    <div class="tab" :class="bimModel == 2 ? 'tataigen' : ''">
      <div class="title flex-center">
        <img src="../../../public/img/monitoring/electricity/listIcon3.png" />
        <span id="door_box">设备列表</span>
      </div>
      <div class="tabBox">
        <el-table @row-click="tableClick" :data="tableData" style="
            width: 100%;
            cursor: pointer;
            background-color: transparent;
            max-height: 220px;
          " :class="bimModel == 2 ? 'tataitab' : ''" @row-contextmenu="tableContext">
          <el-table-column label="设备名称" min-width="110px" align="left">
            <template slot-scope="scope">
              <div class="flex-center dev_name" style="overflow: hidden; white-space: nowrap">
                <img v-if="scope.row.status == 90000" style="margin: 0 6px"
                  src="../../../public/img/monitoring/electricity/listIcon.png" />
                <img v-else-if="scope.row.status == 90001" style="margin: 0 6px"
                  src="../../../public/img/monitoring/electricity/listIcon2.png" />
                <img v-else style="margin: 0 6px" src="../../../public/img/monitoring/electricity/listIcon4.png" />
                <span :style="{
                  color:
                    scope.row.status == 90000
                      ? 'white'
                      : scope.row.status == 90001
                        ? '#a5bbe5'
                        : 'red',
                }" style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  " :title="scope.row.name">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="|" width="5"> </el-table-column>
          <el-table-column label="进/出" width="80">
            <template slot-scope="scope">
              <div class="flex-center">
                <span style="padding-left: 10px" :style="{
                  color:
                    scope.row.status == 90000
                      ? 'white'
                      : scope.row.status == 90001
                        ? '#a5bbe5'
                        : 'red',
                }">{{ scope.row.dataInNum }}/{{ scope.row.dataOutNum }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="|" width="5"> </el-table-column>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <div class="flex-center">
                <span style="padding-left: 10px" :style="{
                  color:
                    scope.row.status == 90000
                      ? 'white'
                      : scope.row.status == 90001
                        ? '#a5bbe5'
                        : 'red',
                }">{{
    scope.row.status == 90000
      ? "正常"
      : scope.row.status == 90001
        ? "离线"
        : "报警"
}}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination :pager-count="4" background @current-change="handleCurrentChange" :current-page.sync="current"
          :page-size="size" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 查询列表 -->
    <div class="search-list" style="left: 480px; top: 150px; padding: 15px; width: 800px" v-if="isSearch">
      <div class="search-list-top" style="
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: flex-end;
        ">
        <div>
          <p style="font-size: 13px; color: rgb(1, 238, 255); margin-bottom: 7px">
            设备名称
          </p>
          <el-select v-model="doorName1" placeholder="请选择" style="width: 120px" size="mini">
            <el-option v-for="(item, key) in sbLists" :key="key" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </div>
        <div>
          <p style="font-size: 13px; color: rgb(1, 238, 255); margin-bottom: 7px">
            通过人员
          </p>
          <el-input placeholder="请输入人员名称" v-model="userName" size="mini" />
        </div>
        <div>
          <p style="font-size: 13px; color: rgb(1, 238, 255); margin-bottom: 7px">
            通过时间
          </p>
          <el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="" end-placeholder="" size="mini"
            style="width: 300px" format="MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
        <!-- <div>
					<p style="font-size: 13px;color: rgb(1,238,255);margin-bottom: 7px;">通过时间</p>
					<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="" end-placeholder=""
						size="mini" style="width: 300px;" format="MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div> -->
        <el-button style="
            background-color: rgb(1, 238, 255);
            color: rgb(23, 72, 167);
            border: 0;
            width: 80px;
            height: 35px;
          " size="mini" @click="searchDevice">查询</el-button>
      </div>

      <div class="search-list-table" style="overflow: hidden; margin-top: 20px">
        <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border1"
          style="width: 15px; height: 15px" />
        <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border2"
          style="width: 15px; height: 15px" />
        <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border3"
          style="width: 15px; height: 15px" />
        <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border4"
          style="width: 15px; height: 15px" />
        <img src="../../../public/img/monitoring/electricity/close-cha.png"
          style="position: absolute; right: 3px; top: 3px" @click="closeSearch" />
        <!-- <p style="margin: 15px 0 10px 15px">详细信息</p> -->
        <el-table :data="searchLists" stripe style="background-color: transparent; width: 100%; color: white"
          :show-header="false" :row-style="rowStyle">
          <el-table-column prop="name" label="设备名称"> </el-table-column>
          <el-table-column prop="cardName" label="通过人员"> </el-table-column>
          <el-table-column prop="inOutFlag" label="进出标志">
            <template slot-scope="scope">{{scope.row.inOutFlag == 1 ? "出" : "进"}}</template>
          </el-table-column>
          <el-table-column prop="accessTime" label="通过时间">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination background @current-change="handleCurrentChange1" :current-page.sync="current1" :page-size="10"
            layout="total, prev, pager, next" :total="total1">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as bfHelper from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import clickCp from "./clickCp";
import {
  getDoorSb, //门禁设备 1业务区/2塔台
  getDoorJcjl, //设备列表
  // getDoorGK, //报警信息
  getdoorData,
  getDoorWarn,
  getDoorSbList,
  getDoorWarnList, //报警列表
  getCancelWarn, //确认告警
  recoveryWarn,//恢复告警
} from "@/api/garden/monitoring";
import backHome from "./backHome";
export default {
  props: {
    doorState: {
      type: Boolean,
    },
    bimModel: {
      type: Number,
    },
  },
  components: {
    clickCp,
    backHome,
  },

  data() {
    return {
      rowStyle: {
        backgroundColor: "transparent",
        height: "35px",
      },
      listData: {
        warnEquipList: [],
        warnEventList: [],
      }, //报警信息
      classOption: {
        step: 0.2,
      }, //报警信息滚动速度
      current: 1, //当前页
      current1: 1, //当前页
      current2: 1, //当前页
      size: 5, //每页数量
      total: 0, //总条目数
      total1: 0, //总条目数
      tableData: [], //设备列表
      // 业务区 1-6号楼+园区+运动场+室外地坪+地下室的文件id   地下室最后一个
      tower: bfHelper.ywqTowerFileId,
      // 业务区 1-6号楼楼层标签点位（按123层）
      position: bfHelper.ywqFloorPt,
      // 业务区 每号楼的视角
      cameraPosition: bfHelper.ywqCameraPosition,
      // 摄像头的筛选条件
      condition: bfHelper.equipmentCondition2[6],

      // 塔台 主塔+辅楼+室外整体
      fileId: bfHelper.ttTowerFileId,
      doorName: null, //页面上select选择器查询的设备名称
      doorName1: null, //查询弹窗select选择器查询的设备名称
      timeValue: null, //查询列表中选择时间
      isSearch: false, //详情查询弹窗是否出现
      userName: null,
      sbLists: [],
      build: null,
      floor: null,
      searshLists: [],
      doorId: "",
      isAlarm: false,
      isSafe: false,
      pages: 0,
      doorWarnList: [], //门禁报警列表
      activeTab: 1,
    };
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        this.current = 1; //当前页
        this.total = 0; //总条目数
        this.getData();
      },
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        if (newval) {
          // 模型恢复全部状态
          bfHelper.resetStatus(2);
          if (this.bimModel == 1) {
            window.sessionStorage.setItem(
              "camera",
              JSON.stringify(bfHelper.getCameraStatus())
            );
            let build = sessionStorage.getItem("build");
            let floor = sessionStorage.getItem("floor");
            if (build) {
              if (build == 10) {
                setTimeout(() => {
                  this.setTowerDoor("07");
                  this.$refs.clickcp.active = 26;
                  this.$refs.clickcp.tower = 9;
                }, 300);
                bfHelper.lookPipeline2(
                  this.condition,
                  bfHelper.equipmentCopColors[8],
                  build - 1,
                  null,
                  "电子门禁"
                );
              } else if (build == 26) {
                bfHelper.lookPipeline(null, null, this.condition, "电子门禁");
                bfHelper.setOpacityFun();
                setTimeout(() => {
                  this.setTowerDoor();
                }, 300);
              } else {
                if (floor.indexOf("undefined") == -1) {
                  setTimeout(() => {
                    this.setTowerDoor("0" + build, "0" + floor);
                    this.$refs.clickcp.active = commonValue.activeValue(
                      Number(build),
                      Number(floor)
                    );
                    this.$refs.clickcp.tower = commonValue.towerValue(build);
                  }, 300);
                  bfHelper.lookPipeline2(
                    this.condition,
                    bfHelper.equipmentCopColors[8],
                    build - 1,
                    floor,
                    "电子门禁"
                  );
                } else {
                  setTimeout(() => {
                    this.setTowerDoor("0" + build);
                    this.$refs.clickcp.active = commonValue.activeValue(
                      Number(build),
                      null
                    );
                    this.$refs.clickcp.tower = commonValue.towerValue(build);
                  }, 300);
                  bfHelper.lookPipeline2(
                    this.condition,
                    bfHelper.equipmentCopColors[8],
                    build - 1,
                    null,
                    "电子门禁"
                  );
                }
              }
            } else {
              // 查看管线
              bfHelper.lookPipeline(null, null, this.condition, "电子门禁");
              bfHelper.setOpacityFun();
              this.getNavigationMap();
              // this.initial()
            }
          } else {
            // 查看管线
            window.sessionStorage.setItem(
              "ttcamera",
              JSON.stringify(bfHelper.getCameraStatus())
            );
            let ttbuild = sessionStorage.getItem("ttbuild");
            if (ttbuild) {
              if (ttbuild == 20) {
                //园区
                bfHelper.TtLookEquipmentCop("电子门禁");
                setTimeout(() => {
                  this.setTowerDoor();
                }, 300);
              } else if (ttbuild == 0) {
                //塔楼
                setTimeout(() => {
                  this.setTowerDoor("08");
                  this.$refs.clickcp.ttActive = 0;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  0,
                  "电子门禁",
                  this.condition
                );
              } else if (ttbuild == 1) {
                //辅楼1楼
                setTimeout(() => {
                  this.setTowerDoor("09", "01");
                  this.$refs.clickcp.ttActive = 1;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  1,
                  "电子门禁",
                  this.condition
                );
              } else if (ttbuild == 2) {
                //辅楼1楼
                setTimeout(() => {
                  this.setTowerDoor("09", "02");
                  this.$refs.clickcp.ttActive = 2;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  2,
                  "电子门禁",
                  this.condition
                );
              } else if (ttbuild == 3) {
                //辅楼1楼
                setTimeout(() => {
                  this.setTowerDoor("09");
                  this.$refs.clickcp.ttActive = 3;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  3,
                  "电子门禁",
                  this.condition
                );
              }
            } else {
              // 查看管线
              bfHelper.TtLookEquipmentCop("电子门禁");
              bfHelper.setOpacityFun1();
            }
          }
        }
      },
    },
    doorId: {
      handler(newVal, oldVal) {
        for (var i = 0; i < this.doorList.length; i++) {
          if (newVal == this.doorList[i].id.substring(4)) {
            // this.doorList[i].src = ''
            this.doorList[i].style.display = "none";
            getdoorData(this.bimModel, newVal.substring(15)).then((res) => {
              const item = res.data.data;
              let id = bfHelper.disposeId(1, item.build, item.modelId);
              bfHelper.customTag(
                bfHelper.getBoxMessage(id, true).max,
                null,
                this.doorContent(item)
              );
              this.doorCustom(item);
              this.addRecordData(
                this.bimModel,
                null,
                null,
                this.current1,
                this.size,
                null,
                item.name,
                null
              );
            });

            // this.doorList[i].src = `${require('../../../public/img/monitoring/electricity/door22.png')}`
          }
          if (oldVal && oldVal == this.doorList[i].id.substring(4)) {
            this.doorList[i].style.display = "inline-block";
            bfHelper.hideCustom();
            if (this.doorList[i].alt == 90000) {
              this.doorList[
                i
              ].src = `${require("../../../public/img/monitoring/electricity/door11.png")}`;
            } else if (this.doorList[i].alt == 90001) {
              this.doorList[
                i
              ].src = `${require("../../../public/img/monitoring/electricity/door-offline.png")}`;
            } else {
              this.doorList[
                i
              ].src = `${require("../../../public/img/monitoring/electricity/door-alarm.png")}`;
            }
          }
        }
      },
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    let dom = document.getElementById('door_box');
    dom.addEventListener('contextmenu', (event)=> {
      event.preventDefault(); // 阻止默认菜单
      const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '1000' } });
      window.open(routerUrl.href, "_blank");
    });
    this.getNavigationMap();
  },
  methods: {
    //确认告警 - 重新查询告警列表
    doCancelWarn(item) {
      getCancelWarn(item.id).then((res) => {
        // this.getDoorWarnList2();
        item.confirmStatus = 1;
      });
    },
    //恢复告警
    doRecoveryWarn(item) {
      recoveryWarn(item.id).then((res) => {
        // this.getFiredWarnList();
        item.warnStatus = 2;
      })
    },
    //跳转历史告警列表
    goMoreWarnList() {
      const routerUrl = this.$router.resolve({
        path: "/equipment/warnHistory",
        query: { classCode: "1000", area: this.bimModel },
      });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getDoorWarnList2() {
      getDoorWarnList({
        area: this.bimModel,
        build: this.build ? this.build : "",
        floor: this.floor ? this.floor : "",
      }).then((res) => {
        this.listData = res.data.data;
        for (let i = 0; i < this.listData.warnEquipList.length; i++) {
          this.listData.warnEquipList[i].showAlert = false;
        }
        for (let i = 0; i < this.listData.warnEventList.length; i++) {
          this.listData.warnEventList[i].showAlert = false;
        }
      });
    },
    showAlarkAlert(item, index, key) {
      //鼠标悬停在设备概况列表里出现查看详情和确认告警
      item.showAlert = true;
      if (key == 0) {
        this.listData.warnEquipList.splice(index, 1, item);
      } else {
        this.listData.warnEventList.splice(index, 1, item);
      }
    },
    closeAlarkAlert(item, index, key) {
      item.showAlert = false;
      if (key == 0) {
        this.listData.warnEquipList.splice(index, 1, item);
      } else {
        this.listData.warnEventList.splice(index, 1, item);
      }
    },
    getData() {
      this.getDoorWarnList2(); //this.getBjxx(); //报警信息
      this.getSbwz(); //设备列表
      this.getDoorWarnList();
    },

    clickAlarm(item) {
      this.activeTab = item;
    },
    getNavigationMap() {
      commonValue.getNavigationMap("door");
    },
    // 接收子组件当前点击楼号
    setTowerDoor(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.build = i;
      // if (j) {
      this.floor = j;
      // }
      this.getData();
      if (i == undefined && j == undefined) {
      } else {
        this.setDoorLabel();
      }

      if (this.bimModel == 1) {
        commonValue.getUpdateMap("door", i, j);
      }
    },
    setDoorLabel() {
      //电子门禁标签
      getDoorSbList(
        this.bimModel,
        this.build ? this.build : "",
        this.floor ? this.floor : "",
        ""
      ).then((res) => {
        bfHelper.clearDrawableContainer();
        const data = res.data.data;
        let idArr = [];
        let statusArr = [];
        for (let d = 0; d < data.length; d++) {
          if (data[d].modelId == "") {
          } else {
            let id = bfHelper.disposeId(
              data[d].area,
              data[d].build,
              data[d].modelId
            );
            let status = data[d].status;
            idArr.push(id);
            statusArr.push(status);
          }
        }
        let condition = JSON.parse(JSON.stringify(this.condition));
        if (this.build == "07") {
          for (let c = 0; c < condition.length; c++) {
            let obj = {
              levelName: "B1",
              fileId: this.tower[this.tower.length - 1],
            };
            Object.assign(condition[c], obj);
          }
        } else {
          if (this.build && this.floor) {
            for (let c = 0; c < condition.length; c++) {
              let obj = {
                levelName: `${Number(this.floor)}F`,
                fileId: this.tower[Number(this.build) - 1],
              };
              Object.assign(condition[c], obj);
            }
          } else {
            for (let c = 0; c < condition.length; c++) {
              let obj = {
                fileId: this.tower[Number(this.build) - 1],
              };
              Object.assign(condition[c], obj);
            }
          }
        }
        // console.log(condition)
        this.addBq(statusArr, idArr, condition);
      });
    },
    getDoorWarnList() {
      if (this.build == undefined) {
        this.build = null;
      }
      if (this.floor == undefined) {
        this.floor = null;
      }
      getDoorWarn(
        this.bimModel,
        this.build ? this.build : "",
        this.floor ? this.floor : ""
      ).then((res) => {
        let offList = []; //离线的构件数组
        let bjList = []; //报警的构件数组
        const data = res.data.data;
        for (let i = 0; i < data.length; i++) {
          let id = bfHelper.disposeId(
            data[i].area,
            data[i].build,
            data[i].modelId
          );
          if (data[i].status == 90001) {
            offList.push(id);
          } else {
            bjList.push(id);
          }
        }
        bfHelper.setFlicker(bjList, "#ff0000", 100);
        bfHelper.setColor("#9d9d9d", offList);
      });
    },
    // 获取报警信息
    // getBjxx() {
    // 	if (this.build == undefined) {
    // 		this.build = null;
    // 	}
    // 	if (this.floor == undefined) {
    // 		this.floor = null;
    // 	}
    // 	getDoorGK(this.bimModel, this.build ? this.build : '', this.floor ? this.floor : '').then(res => {
    // 		this.listData = res.data.data;
    // 		for (let i = 0; i < this.listData.systemWarnEquipList.length; i++) {
    // 			this.listData.systemWarnEquipList[i].showAlert = false
    // 		}
    // 		for (let i = 0; i < this.listData.safeWarnEquipList.length; i++) {
    // 			this.listData.safeWarnEquipList[i].showAlert = false
    // 		}
    // 	})
    // },
    // 获取门禁设备列表
    getSbwz() {
      if (this.build == undefined) {
        this.build = null;
      }
      if (this.floor == undefined) {
        this.floor = null;
      }
      getDoorSb(
        this.current,
        this.size,
        this.bimModel,
        this.build ? this.build : "",
        this.floor ? this.floor : "",
        ""
      ).then((res) => {
        this.sbLists = res.data.data.records;
        this.tableData = res.data.data.records;
        this.sbLists1 = res.data.data.records;
        this.total = res.data.data.total; //总条目数
        let condition = JSON.parse(JSON.stringify(this.condition));
        bfHelper.clearDrawableContainer();
      });
    },

    searchDoor() {
      if (this.doorName) {
        this.isSearch = true;
        bfHelper.clearTags();
        getDoorJcjl(
          this.bimModel,
          null,
          null,
          this.current1,
          this.size,
          null,
          this.doorName,
          null
        ).then((res) => {
          this.searchLists = res.data.data.records;
          this.total1 = res.data.data.total; //总条目数
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择设备名称",
          duration: 1500,
        });
      }
    },
    searchDetail() {
      this.isSearch = true;
    },
    searchDevice() {
      let startTime = null;
      let endTime = null;
      if (this.timeValue) {
        startTime = this.timeValue[0];
        endTime = this.timeValue[1];
      }
      getDoorJcjl(
        this.bimModel,
        startTime ? startTime : "",
        endTime ? endTime : "",
        this.current1,
        this.size,
        this.userName,
        this.doorName,
        null
      ).then((res) => {
        this.searchLists = res.data.data.records;
        this.total1 = res.data.data.total; //总条目数
      });
    },
    closeSearch() {
      this.isSearch = false;
      (this.doorName1 = null), //查询弹窗select选择器查询的设备名称
        (this.timeValue = null), //查询列表中选择时间
        (this.userName = null);
    },
    // 点击报警信息定位到指定设备
    bjClick(item) {
      //
      bfHelper.clearDrawableContainer();
      let id = bfHelper.disposeId(item.area, item.build, item.modelId);
      let box = bfHelper.getBoxMessage(id, true);
      if (box == "undefined") {
        return;
      }
      console.log("定位", box);
      bfHelper.customTag(box.max, null, this.doorContent(item));
      this.doorCustom(item);
      this.addRecordData(
        this.bimModel,
        null,
        null,
        this.current1,
        this.size,
        null,
        item.name,
        null
      );
      if (item.build == "00") {
        this.$refs.clickcp.active = 25;
        this.$refs.clickcp.tower = null;
        bfHelper.mapUpdate(
          require("../../../public/img/monitoring/mapviewer/electricity7b.png"),
          bfHelper.mapViewerCamera[0][0].mapAnchors,
          bfHelper.mapViewerCamera[0][0].modelAnchors
        );
        bfHelper.lookPipeline(null, null, this.condition, "电子门禁");
        let boundingBox = bfHelper.getBoxMessage(id);
        bfHelper.zoomToBoundingBox(boundingBox, 20);
      } else {
        this.$refs.clickcp.active = commonValue.activeValue(
          Number(item.build),
          Number(item.floored)
        );
        this.$refs.clickcp.tower = commonValue.towerValue(Number(item.build));
        bfHelper.mapUpdate(
          require("../../../public/img/monitoring/mapviewer/door" +
            Number(item.build) +
            "b" +
            Number(item.floored) +
            "f.png"),
          bfHelper.mapViewerCamera[Number(item.build) - 1][
            Number(item.floored) - 1
          ].mapAnchors,
          bfHelper.mapViewerCamera[Number(item.build) - 1][
            Number(item.floored) - 1
          ].modelAnchors
        );
        let camera = bfHelper.cameraPosition[Number(item.build) - 1];
        window.sessionStorage.setItem("camera", JSON.stringify(camera));
        bfHelper.lookPipeline2(
          this.condition,
          bfHelper.equipmentCopColors[8],
          Number(item.build) - 1,
          Number(item.floored),
          "电子门禁"
        );
      }

      // bfHelper.customTag(bfHelper.getBoxMessage(id, true).max, null, this.doorContent(item))
      // if(item.build == '07'){
      // 	this.$refs.clickcp.active = 26;
      // 	this.$refs.clickcp.tower = 9;
      // 	bfHelper.mapUpdate(require('../../../public/img/monitoring/mapviewer/electricity7b.png'), bfHelper.mapViewerCamera[0][0].mapAnchors,
      // 		 bfHelper.mapViewerCamera[0][0].modelAnchors);
      // 	bfHelper.lookPipeline2(null, null, 9, null, '消防', bfHelper.equipmentCondition2[1],this.checkList)
      // }else{
      // 	this.$refs.clickcp.active = commonValue.activeValue(Number(item.build),Number(item.floored));
      // 	this.$refs.clickcp.tower = commonValue.towerValue(item.build);
      // 	bfHelper.mapUpdate(require('../../../public/img/monitoring/mapviewer/water' + Number(item.build) +
      // 			'b' + Number(item.floored) + 'f.png'), bfHelper.mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1]
      // 		.mapAnchors, bfHelper.mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1].modelAnchors);
      // 	bfHelper.lookPipeline2(null, null, (item.build) - 1, Number(item.floored) , '消防', bfHelper.equipmentCondition2[1],this.checkList)
      // }

      let camera = bfHelper.cameraPosition[Number(item.build) - 1];
      window.sessionStorage.setItem("camera", JSON.stringify(camera));

      bfHelper.setOpacityFun(false);
    },
    doorContent(item) {
      let bgImg1 = require("../../../public/img/monitoring/electricity/liftbg2.png");
      let bgImg2 = require("../../../public/img/monitoring/electricity/ktoffline.png");
      let bgImg3 = require("../../../public/img/monitoring/electricity/liftbg1.png");
      let content = `<div class="leadTips" style="transform: translateY(-72px);">
						<div style="display: flex;width:max-content">
							<img  src="${require(item.status == 90000
        ? "../../../public/img/monitoring/electricity/customTag1.png"
        : item.status == 90001
          ? "../../../public/img/monitoring/electricity/customTag2.png"
          : "../../../public/img/monitoring/electricity/customTag3.png")}" style="width:87px;height:53px;"/>
							<div style="margin-top: -42px;">
								<div style="width: 185px;height: 46px;background: url('${require(item.status ==
            90000
            ? "../../../public/img/monitoring/electricity/customTag1-1.png"
            : item.status == 90001
              ? "../../../public/img/monitoring/electricity/customTag2-1.png"
              : "../../../public/img/monitoring/electricity/customTag3-1.png")}');">
									<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;">${item.name
        }</span>
								</div>	
								<div id="door-block0" style="background-color:rgb(53,72,108);width:160px;position:absolute;
								left:90px;top:15px;padding:10px">
									<div style="display:flex;justify-content: space-between;">
										<span style="font-size:12px;color:silver">设备状态：</span>
										<span style="font-size:13px;color:${item.status == 90000
          ? "white"
          : item.status == 90001
            ? "#a5bbe5"
            : "red"
        }">${item.status == 90000
          ? "正常"
          : item.status == 90001
            ? "离线"
            : item.warnMsg
              ? item.warnMsg
              : item.warnContent
                ? item.warnContent
                : ""
        }</span>
									</div>
									<div style="display:flex;justify-content: space-between;margin-top:5px">
										<span style="font-size:12px;color:silver">所在位置：</span>
										<span style="font-size:13px;color:white">${item.location}</span>
									</div>
									<div style="width:100%;height:1px;background:silver;margin:10px 0"></div>
									<div id="pass-user" style="max-height:125px;padding-right:5px;overflow-y:auto">
										
									</div>
								</div>								
							</div>
						</div>	
					</div>`;
      return content;
    },
    doorCustom(item) {
      setTimeout(() => {
        document.getElementById("pass-user").addEventListener("scroll", (e) => {
          if (this.current1 < this.pages) {
            if (
              e.target.scrollTop + e.target.clientHeight ==
              e.target.scrollHeight
            ) {
              this.current1++;
              this.addRecordData(
                this.bimModel,
                null,
                null,
                this.current1,
                this.size,
                null,
                item.name,
                null
              );
            }
          }
        });
      }, 500);
    },
    addRecordData(
      area,
      startTime,
      endTime,
      current,
      size,
      cardName,
      equipName,
      modelId
    ) {
      getDoorJcjl(
        area,
        startTime,
        endTime,
        current,
        size,
        cardName,
        equipName,
        modelId
      ).then((res) => {
        this.pages = res.data.data.pages;
        for (let j = 0; j < res.data.data.records.length; j++) {
          let div = document.createElement("div");
          div.style.display = "flex";
          div.style.justifyContent = "space-between";
          div.style.marginTop = "10px";
          let span = document.createElement("span");
          span.style.color = "white";
          span.style.fontSize = "13px";
          span.innerText = res.data.data.records[j].cardName;
          let span1 = document.createElement("span");
          span1.style.color = "white";
          span1.style.fontSize = "13px";
          span1.innerText = res.data.data.records[j].accessTime;
          div.appendChild(span);
          div.appendChild(span1);

          document.getElementById("pass-user").appendChild(div);
        }
      });
    },
    // 表格某行被点击
    tableClick(row, column, event) {
      // console.log(row)
      this.bjClick(row);
    },
    tableContext(row,column, event){
        event.preventDefault(); // 阻止默认菜单
        const routerUrl = this.$router.resolve({ path: '/equipment/index', query: {code: row.code } });
        window.open(routerUrl.href, "_blank");
      //  this.dialogVisible = true
      // console.log(row)
    },
    // 点击查询
    inquireHandle() {
      this.getSblb();
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getSbwz();
    },
    // 页码改变时触发
    handleCurrentChange1(val) {
      this.current1 = val;
      getDoorJcjl(
        this.bimModel,
        null,
        null,
        this.current1,
        this.size,
        null,
        this.doorName,
        null
      ).then((res) => {
        this.searchLists = res.data.data.records;
        this.total1 = res.data.data.total; //总条目数
      });
    },
    // 定义表格的头部样式
    tableHeaderColor({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "line-height:1rem;height:1.5rem;padding: 0;border:none;background-color: #2083ec;color:#fff;font-size:0.875rem;text-align: center;";
      }
    },
    // 设置单元格的样式
    cellstyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 3) {
        return "text-align: center;padding:0;border-right:1px solid #2083ec;border-left:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;";
      } else {
        return "text-align: center;padding:0;border-left:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;";
      }
    },
    loadMore() {
      //滚动分页
      this.current2 += 1;
      // this.current += 1;
      getDoorSb(
        this.current2,
        this.size,
        this.bimModel,
        this.build ? this.build : "",
        this.floor ? this.floor : "",
        ""
      ).then((res) => {
        if (this.current2 <= res.data.data.pages) {
          const results = res.data.data.records;
          this.tableData = results;
          results.forEach((item) => {
            this.sbLists1.push(item);
          });
        }
      });
      getDoorSb(
        1,
        this.size,
        this.bimModel,
        this.build ? this.build : "",
        this.floor ? this.floor : "",
        ""
      ).then((res) => {
        // console.log(results)
        const results = res.data.data.records;
        this.tableData = results;
      });
    },

    // 添加标签
    addBq(status, arr, condition, num, location, index) {
      // console.log(arr.length)
      // if (arr.length == 0) {
      // 	bfHelper.setCameraStatus(JSON.parse(window.sessionStorage.getItem('camera')))
      // } else {
      bfHelper.showComponentsByObjectData(condition);
      // // 根据筛选条件加入选中集合
      bfHelper.setSelectedById(arr);
      if (this.bimModel == 2) {
      } else {
        // if (bfHelper.getselectGather().length < 2) {
        //   bfHelper.setCameraStatus(
        //     JSON.parse(window.sessionStorage.getItem("camera"))
        //   );
        // } else {
        //   bfHelper.setCameraView(location ? location : "Top");
        //   // 缩放到加入选中集合的构件
        //   bfHelper.zoomToSelectedComponents();
        // }
      }
      //清除所有标签
      bfHelper.clearDrawableContainer();
      // console.log(arr)
      // 选中的集合构件id（也就是所有摄像的Id）
      let selectComponentId = bfHelper.getselectGather();
      for (let b = 0; b < selectComponentId.length; b++) {
        let content = `<div class="leadTips"  style="transform: translateY(-40px);">
								<div  style="display: flex;width:max-content">
									<img id='door${selectComponentId[b]}' class = 'doorImg' alt='${status[b]}'
									class = 'montorImg' src="${require(status[b] == 90000
          ? "../../../public/img/monitoring/electricity/door11.png"
          : status[b] == 90001
            ? "../../../public/img/monitoring/electricity/door-offline.png"
            : "../../../public/img/monitoring/electricity/door-alarm.png")}" style="width:40px;height:40px;"/>
								</div>	
							</div>`;
        if (
          JSON.stringify(
            bfHelper.getBoxMessage(selectComponentId[b], true).max.x
          ) != "null"
        ) {
          bfHelper.customTag(
            bfHelper.getBoxMessage(selectComponentId[b], true).max,
            null,
            content,
            selectComponentId[b]
          );
          bfHelper.customItemFun().onClick((item) => {
            this.doorId = item.layerId;
            this.doorList = document.getElementsByClassName("doorImg");
          });
        }
      }

      // }
    },
  },
};
</script>

<style scoped lang="scss">
.door {
  .checkbox {
    position: absolute;
    left: 4rem;
    top: 0;
    width: 7rem;
    background-color: rgba(21, 59, 161, 0.48);
    box-shadow: 0px 0px 1.25rem #69c6ff inset;
    background-image: url(../../../public/img/monitoring/monitorbg.png);
    background-size: 100% 100%;

    .el-checkbox-group {
      width: 100%;
      height: 100%;

      .el-checkbox {
        font-size: 1.125rem;
        color: #d9f9ff;
        display: block;
        margin: 1.5rem 0 1.5rem 29%;

        /deep/ .el-checkbox__inner {
          border: 1px solid #2bf2f8;
          background-color: transparent;
        }

        /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
          color: #d9f9ff;
        }

        /deep/ .el-checkbox__inner::after {
          border: 1px solid #2bf2f8;
          border-left: 0;
          border-top: 0;
        }
      }
    }
  }

  // 设备概况
  .box2 {
    z-index: 99;
    background: url(../../../public/img/monitoring/electricity/genbag.png) no-repeat;
    background-size: 100% 100%;
    width: 402px;
    height: 450px;
    position: absolute;
    top: 150px;
    right: 40px;

    &.tataigen {
      background: url(../../../public/img/monitoring/electricity/genbac.png);
      background-size: 100% 100%;
    }

    .title {
      margin: 17px 0 0 17px;
      font-size: 15px;
      font-weight: bold;
      color: #ffffff;

      img {
        margin-right: 5px;
        width: 20px;
        height: 19px;
      }
    }

    .state {
      margin-top: 30px;
      font-size: 28px;
      line-height: 17px;
      color: #ffffff;

      .zc {
        // padding-right: 36px;
        box-sizing: border-box;
        // justify-content: flex-end;
        background: url(../../../public/img/monitoring/electricity/normal.png) no-repeat;
        background-size: 100% 100%;
        width: 127px;
        height: 65px;
      }

      .lx {
        // padding-right: 36px;
        box-sizing: border-box;
        // justify-content: flex-end;
        background: url(../../../public/img/monitoring/electricity/guzhang.png) no-repeat;
        background-size: 100% 100%;
        width: 127px;
        height: 65px;
      }

      .bj {
        // padding-right: 36px;
        box-sizing: border-box;
        // justify-content: flex-end;
        background: url(../../../public/img/monitoring/electricity/beaconing.png) no-repeat;
        background-size: 100% 100%;
        width: 127px;
        height: 65px;
      }
    }

    .stateName {
      margin: 5px 0 20px;
      color: #2cd52c;
      font-size: 14px;
      display: flex;
      justify-content: space-around;

      .zc {
        display: inline-block;
        width: 125px;
        text-align: center;
      }

      .lx {
        display: inline-block;
        width: 125px;
        text-align: center;
        color: #ec9b28;
      }

      .bj {
        display: inline-block;
        width: 125px;
        text-align: center;
        color: red;
      }
    }

    .tab_box {
      width: 80%;
      display: flex;
      margin-top: 25px;
      margin-bottom: 30px;
      margin-left: 23px;
      color: #fff;

      .tab_one {
        cursor: pointer;
      }

      .tab_two {
        margin-left: 20px;
      }

      /deep/ .item .is-dot {
        background: red;
        border: none;
      }

      // .circle{
      // 	display: inline-block;
      // 	width: 8px;
      // 	height: 8px;
      // 	background: red;
      // 	border-radius: 50%;
      // 	position: relative;
      // 	top: -8px;
      // 	left: -3px;
      // }
    }

    .tit {
      margin: 0 auto 6px;
      width: 345px;
      height: 34px;
      line-height: 34px;
      background-color: #07a7ff;
      font-size: 14px;
      color: white;

      &.tataitit {
        background: rgb(34, 110, 196);

        span {
          color: #1851ab;
        }
      }

      p {
        width: 33.3%;
        text-align: center;
      }

      span {
        color: silver;
      }
    }

    .noBjxx {
      color: white;
      font-size: 1rem;
      margin: 2.5rem 0 0;
      text-align: center;
    }

    .warp {
      height: 120px;
      width: 345px;
      margin: auto;
      overflow-y: auto;

      .item {
        height: 40px;
        font-size: 14px;
        color: #9d9d9d;

        .alark-alert {
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(11, 34, 74, 0.8);
          // display: flex;
          justify-content: space-around;
          align-items: center;
          color: #07e6ed;

          p {
            display: flex;
            align-items: center;

            img {
              margin-right: 7px;
            }
          }
        }

        .box {
          width: 100%;
          height: 34px;
          background-color: rgba($color: #0d318b, $alpha: 0.6);

          &.tataicon {
            background-color: rgba($color: #1f355c, $alpha: 1);

            span {
              color: #1851ab;
            }
          }

          .left {
            width: 33.3%;
            text-align: center;

            img {
              width: 16px;
              height: auto;
              margin: 0 5px 0 10px;
            }

            .message {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .data {
            width: 33.3%;
            text-align: center;
          }

          .time {
            width: 33.3%;
            text-align: center;
          }
        }
      }

      .item:hover {
        cursor: pointer;
      }
    }

    .more {
      justify-content: flex-end;
      font-size: 14px;
      color: #07e6ed;
      margin: 10px 27px 0 0;
    }
  }

  // 设备列表
  .tab {
    z-index: 99;
    position: absolute;
    right: 39px;
    bottom: 41px;
    width: 402px;
    height: 342px;
    background: url(../../../public/img/monitoring/electricity/newbg.png) no-repeat;
    background-size: cover;

    &.tataigen {
      background: url(../../../public/img/monitoring/electricity/genbac.png) no-repeat;
      background-size: 100% 100%;
    }

    .title {
      margin: 1rem 0 2rem 1.25rem;
      color: #fff;
      font-size: 15px;
      font-weight: bold;

      img {
        display: block;
        width: 16px;
        margin-right: 10px;
      }
    }

    .tabBox {
      border: 1px solid #07a7ff;
      width: 21.563rem;
      margin: 1rem auto 0;

      .dev_name {
        width: 100%;
      }

      /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: transparent !important;
      }

      /deep/ .el-table__header-wrapper .has-gutter th {
        border-bottom: none;
        padding: 0;
        text-align: center;
      }

      /deep/ .el-table__header-wrapper .has-gutter th .cell {
        line-height: 31px;
        padding: 0;
        background-color: #07a7ff;
        color: white;
      }

      /deep/ .tataitab .el-table__header-wrapper .has-gutter th .cell {
        background: rgb(33, 110, 196);
      }

      /deep/ .tataitab .el-table__header-wrapper .has-gutter th:nth-of-type(even) .cell {
        color: rgb(31, 91, 180);
      }

      /deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) {
        color: white;
        background-color: rgba($color: #1e419d, $alpha: 1);
      }

      /deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) {
        background-color: rgba($color: #0d318b, $alpha: 1);
        color: white;
      }

      /deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) {
        color: white;
        background-color: rgba($color: #384c6f, $alpha: 1);
      }

      /deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) {
        background-color: rgba($color: #1f355c, $alpha: 1);
        color: white;
      }

      /deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td {
        border-bottom: none;
        padding: 0;
        text-align: center;
      }

      /deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td .cell {
        display: flex;
        line-height: 36px;
        align-content: center;
        justify-content: center;
      }

      /deep/ .el-table__body-wrapper.is-scrolling-none .el-table__empty-block {
        background-color: #3656ae;
        height: 252px !important;
      }

      /deep/ .el-table::before {
        background-color: transparent;
      }
    }

    // 分页
    .pagination {
      position: absolute;
      right: 15px;
      bottom: 8px;
    }

    .pagination .el-pagination.is-background {
      display: flex;
      justify-content: flex-end;
    }

    /deep/ .el-pagination.is-background .btn-next,
    /deep/ .el-pagination.is-background .btn-prev,
    /deep/ .el-pagination.is-background .el-pager li {
      min-width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
    }

    /deep/ .el-pagination__total {
      height: 20px;
      line-height: 20px;
      color: #07e6ed;
    }
  }
}

.searchDoors {
  position: absolute;
  // top: 250px;
  left: 105px;
  background-image: url(../../../public/img/monitoring/ktbg.png);
  background-size: 100% 100%;

  .kt-border {
    position: absolute;
  }

  .kt-border1 {
    position: absolute;
    top: 0;
    right: 0;
  }

  .kt-border2 {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateZ(270deg);
  }

  .kt-border3 {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotateZ(180deg);
  }

  .kt-border4 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotateZ(90deg);
  }
}

/deep/ .el-input__inner {
  background-color: transparent;
  color: white;
}

.search-list {
  background-image: url(../../../public/img/monitoring/ktbg.png);
  background-size: 100% 100%;
  position: absolute;
  left: 480px;
  top: 200px;

  .kt-border {
    position: absolute;
  }

  .kt-border1 {
    position: absolute;
    top: 0;
    right: 0;
  }

  .kt-border2 {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateZ(270deg);
  }

  .kt-border3 {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotateZ(180deg);
  }

  .kt-border4 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotateZ(90deg);
  }
}

/deep/ .el-range-input {
  background-color: transparent;
  color: white;
}

/deep/ .el-range-separator {
  color: white;
  font-size: 20px;
}

.search-list-table {
  background-color: rgba(51, 93, 169, 0.7);
  color: white;
  font-size: 13px;

  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: rgba(19, 63, 160, 0.7);
  }

  /deep/ .el-table--enable-row-transition .el-table__body td {
    border-bottom: 0;
    padding: 5px;
  }

  /deep/ .el-table::before {
    background-color: transparent;
  }

  // 分页
  .pagination {
    margin-top: 20px;
  }

  .pagination .el-pagination.is-background {
    display: flex;
    justify-content: flex-end;
  }

  /deep/ .el-pagination.is-background .btn-next,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .el-pager li {
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }

  /deep/ .el-pagination__total {
    height: 20px;
    line-height: 20px;
    color: #07e6ed;
  }

  /deep/ .el-table tbody tr:hover>td {
    background-color: transparent !important;
  }

  /deep/ .el-table__row--striped:hover>td {
    background-color: rgba(19, 63, 160, 0.7) !important;
  }
}

/deep/ .el-select-dropdown__wrap.el-scrollbar__wrap {
  width: 150px !important;
  height: 200px !important;
}
</style>
<style scoped lang="scss">
/deep/ .pull {
  .el-scrollbar {
    height: 200px;
  }
}
</style>
