<template>
  <!-- 监控 -->
  <div v-if="monitoringState" class="door">
    <!-- 各楼栋楼层切换 -->
    <clickCp :bimModel="bimModel" sbType="监控" ref="clickcp" :conditions="conditions">
    </clickCp>
    <!-- 返回主视角 -->
    <backHome ref="backHome" :bimModel="bimModel" type="监控" :condition="condition" dom=".mapDom"></backHome>
    <div style="position: absolute; left: 84px; top: 210px" v-if="bimModel == 1">
      <!-- <div class="build-message" style="
          color: white;
          text-align: center;
          border: 1px solid rgb(0, 187, 255);
          width: 110px;
          margin: 0 auto;
          border-radius: 5px;
          padding: 5px 0;
        ">
        {{ buildMessage }}
      </div> -->
      <div class="mapDom" style="width: 250px; height: 180px; margin-top: 20px"></div>
    </div>
    <div v-if="!monitoring">
      <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>
        <div class="stateName flex-center-center">
          <span class="zc">正常</span>
          <span class="lx">设备告警</span>
        </div>
        <div class="tab_box">
          <div class="tab_one" :style="{ color: isAlarm ? 'red' : '#fff' }">
            <el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span
              style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</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
        " class="noBjxx">
          暂无设备告警信息
        </div>
        <div v-else class="warp">
          <div class="item flex-center" v-for="(item, index) in listData.warnEquipList" :key="index"
            @mouseenter="showAlarmAlert(item, index)" style="position: relative"
            @mouseleave="closeAlarmAlert(item, index)">
            <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alarm-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="../../../public/img/monitoring/electricity/lx.png" v-if="item.warnStatus == 2" />
                <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
                <span class="message" :style="{ color:  item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }"
                  v-text="item.name"></span>
              </div>
              <span class=""></span>
              <span class="data" :style="{ color:  item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ item.warnContent
              }}</span>
              <span class=""></span>
              <span class="time" :style="{ color:  item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : '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="monit_box">设备列表</span>
        </div>
        <div class="tabBox">
          <el-table @row-click="tableClick" :data="tableData" style="width: 100%; max-height: 210px" @row-contextmenu="tableContext"
            :class="bimModel == 2 ? 'tataitab' : ''">
            <el-table-column label="设备名称" min-width="150">
              <template slot-scope="scope">
                <div class="flex-center mon_box" style="
                    overflow: hidden;
                    text-overflow: ellipsis;
                    cursor: pointer;
                  " @click="bjClick(scope.row)">
                  <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'
                          : '#ff0000',
                  }" style="
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    " :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="120">
              <template slot-scope="scope">
                <div class="flex-center mon_box" style="
                    overflow: hidden;
                    text-overflow: ellipsis;
                    cursor: pointer;
                  " @click="bjClick(scope.row)">
                  <span :style="{
                    color:
                      scope.row.status == 90000
                        ? 'white'
                        : scope.row.status == 90001
                          ? '#a5bbe5'
                          : '#ff0000',
                  }" style="
                      padding-left: 10px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    " :title="scope.row.location">{{ scope.row.location }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="|" width="5"> </el-table-column>
            <el-table-column label="操作" width="50">
              <template slot-scope="scope">
                <div class="flex-center-center">
                  <img @click="goMonitoring(scope.row)" v-if="scope.row.status != 90001"
                    src="../../../public/img/monitoring/caozuo2.png" />
                  <img v-else src="../../../public/img/monitoring/caozuo1.png" />
                </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>

    <div v-if="monitoring" class="monitoring2">
      <div class="title flex-center">
        <img src="../../../public/img/monitoring/sblb.png" />
        <span>实时监控</span>
      </div>
      <div class="btn_box">
        <div class="btn" @click="playBack">回放</div>
        <div class="btn" @click="closeView">关闭</div>
      </div>
      <!-- 海康监控 -->
      <hk-monitoring :codeId="codeId" ref="hkmonitoring1" id="hkmonitoring1"></hk-monitoring>
    </div>
  </div>
</template>

<script>
import * as bfHelper from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import hkMonitoring from "@/components/monitoring/hkMonitoring";
import {
  // 业务区
  getMonitoringSblb, //设备列表
  //   getMonitoringGK,
  // 塔台
  getmonData, //根据modelid获取摄像头信息
  getMonitoringList, //设备列表无分页
  getCameraWarnList, //报警列表
  getCancelWarn, //关闭报警
  recoveryWarn,//恢复告警
} from "@/api/garden/monitoring";
import clickCp from "./clickCp";
import backHome from "./backHome";
import { monitorPosition, monitorCamera } from "@/option/monitoring/monitors";
export default {
  props: {
    monitoringState: {
      type: Boolean,
    },
    bimModel: {
      type: Number,
    },
  },
  components: {
    hkMonitoring,
    backHome,
    clickCp,
  },
  data() {
    return {
      codeId: null, //监控点位编号
      monitoring: false, //是否显示监控
      list: ["1#", "2#", "3#", "4#", "5#", "6#", "室外"], //选项列表
      checkList: [], //勾选结果
      listData: {}, //报警信息
      classOption: {
        step: 0.2,
      }, //报警信息滚动速度
      options: [], //设备位置
      ywqSbwz: [], //业务区设备位置
      ttSbwz: [], //塔台设备位置
      build: null, //当前选择的设备位置
      floor: null, //当前选择的设备位置
      current: 1, //当前页
      size: 5, //每页数量
      total: 0, //总条目数
      tableData: [], //设备列表
      // 标签配置区
      reload: 100, //是否再次执行添加标签 防止相机一直触发一直销毁添加标签导致卡顿
      floorBqShow: false, //查看设备回滚视角时是否允许添加每一楼层的标签

      // 业务区 1-6号楼+园区+运动场+室外地坪+地下室的文件id   地下室最后一个
      tower: bfHelper.ywqTowerFileId,
      // 业务区 1-6号楼楼层标签点位（按123层）
      position: bfHelper.ywqFloorPt,
      // 业务区 1-6号楼每层的摄像头数量（按123层）
      floorNum: [
        [4, 4, 3],
        [22, 3, 7],
        [7, 2],
        [5, 6, 7],
        [22, 4, 8],
        [9, 4, 5],
      ],
      // 业务区 每号楼的视角
      cameraPosition: bfHelper.ywqCameraPosition,
      // 摄像头的筛选条件
      condition: bfHelper.equipmentCondition2[5],

      // 塔台 主塔+辅楼+室外整体
      fileId: bfHelper.ttTowerFileId,
      // 单击自定义二维标签的item
      currentItem: "",
      classList: {},
      monitor: false,
      // 是否拥有权限
      isMon: "",
      isAlarm: false,
      isSafe: false,
      alarmTotal: 0,
      safeTotal: 0,
      buildMessage: "",
      monitorPosition: monitorPosition, //每个摄像机的包围盒坐标
      monitorCamera: monitorCamera, //每层的视角
      startCamera: {
        aspect: 1.889763779527559,
        coordinateSystem: "world",
        far: 224492.99849073135,
        fov: 45,
        name: "persp",
        near: 139057.56912454384,
        position: {
          x: -48909.56879122951,
          y: -554729.997803423,
          z: 35608.88916657928,
        },
        target: {
          x: -29906.02103304434,
          y: 343504.8821214207,
          z: 21637.329723417766,
        },
        up: {
          x: 0.00032889260193379297,
          y: 0.015545622434416368,
          z: 0.9998791054186414,
        },
        version: 1,
        zoom: 1,
      },
      isShowAll: true, //显示所有的摄像头
    };
  },
  created() {
    // this.getBjxx(); //报警信息
    // this.getSbgk(); //设备概况
    this.getCameraWarnList(); //告警列表
    this.getSblb(); //设备列表

    this.setInterval = setInterval(() => {
      // this.getSbgk(); //设备位置
      this.getCameraWarnList(); //告警列表
      this.getSblb(); //设备列表
    }, 3600000);
  },
  beforeDestroy() {
    console.log('销毁interval')
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        this.checkList = [];
        this.build = "";
        this.current = 1; //当前页
        this.total = 0; //总条目数

        if (this.setInterval) {
          clearInterval(this.setInterval);
        }

        this.setInterval = setInterval(() => {
          // this.getSbgk(); //设备位置
          this.getSblb(); //设备列表
          this.getCameraWarnList(); //告警列表
        }, 3600000);

        // this.getSbgk(); //设备位置
        this.getSblb(); //设备列表
        this.getCameraWarnList(); //告警列表

        this.reload = null; //是否再次执行添加标签 防止相机一直触发一直销毁添加标签导致卡顿
        this.floorBqShow = false; //查看设备回滚视角时是否允许添加每一楼层的标签

        this.codeId = null;
        this.monitoring = false;

        if (newVal == 1) {
          this.list = ["1#", "2#", "3#", "4#", "5#", "6#", "室外"];
          this.options = this.ywqSbwz;
        } else {
          this.list = ["辅楼", "塔楼"];
          this.options = this.ttSbwz;
        }
      },
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        if (newval) {
          // 模型恢复全部状态
          bfHelper.resetStatus(2);
          this.onClick();
          if (this.bimModel == 1) {
            window.sessionStorage.setItem(
              "camera",
              JSON.stringify(bfHelper.getCameraStatus())
            );
            let build = sessionStorage.getItem("build");
            let floor = sessionStorage.getItem("floor");
            this.getCameraPosi();
            if (build) {
              if (build == 10) {
                setTimeout(() => {
                  this.setTowerMonitor("07");
                  this.$refs.clickcp.active = 26;
                  this.$refs.clickcp.tower = 9;
                }, 300);
                bfHelper.lookPipeline2(
                  this.condition,
                  bfHelper.equipmentCopColors[0],
                  build - 1,
                  null,
                  "监控"
                );
              } else if (build == 26) {
                bfHelper.lookPipeline(null, null, this.condition, "监控");
                bfHelper.setOpacityFun();
                setTimeout(() => {
                  this.setTowerMonitor();
                }, 300);
                this.initial();
              } else {
                if (floor.indexOf("undefined") == -1) {
                  setTimeout(() => {
                    this.setTowerMonitor("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[0],
                    build - 1,
                    floor,
                    "监控"
                  );
                } else {
                  setTimeout(() => {
                    this.setTowerMonitor("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[0],
                    build - 1,
                    null,
                    "监控"
                  );
                }
              }
            } else {
              // 查看管线
              bfHelper.lookPipeline(null, null, this.condition, "监控");
              bfHelper.setOpacityFun();
              setTimeout(() => {
                this.getNavigationMap();
                this.buildMessage = "园区";
                this.$refs.clickcp.active = 25;
                this.$refs.clickcp.tower = null;
              }, 300);
              this.initial();
            }
          } else {
            // 查看管线
            window.sessionStorage.setItem(
              "ttcamera",
              JSON.stringify(bfHelper.getCameraStatus())
            );
            let ttbuild = sessionStorage.getItem("ttbuild");
            if (ttbuild) {
              if (ttbuild == 20) {
                //园区
                bfHelper.TtLookEquipmentCop("监控");
                // bfHelper.setCameraStatus(this.startCamera)
                setTimeout(() => {
                  this.setTowerMonitor();
                }, 300);
              } else if (ttbuild == 0) {
                //塔楼
                setTimeout(() => {
                  this.setTowerMonitor("08");
                  this.$refs.clickcp.ttActive = 0;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  0,
                  "监控",
                  bfHelper.equipmentCondition2[5]
                );
              } else if (ttbuild == 1) {
                //辅楼1楼
                setTimeout(() => {
                  this.setTowerMonitor("09", "01");
                  this.$refs.clickcp.ttActive = 1;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  1,
                  "监控",
                  bfHelper.equipmentCondition2[5]
                );
              } else if (ttbuild == 2) {
                //辅楼1楼
                setTimeout(() => {
                  this.setTowerMonitor("09", "02");
                  this.$refs.clickcp.ttActive = 2;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  2,
                  "监控",
                  bfHelper.equipmentCondition2[5]
                );
              } else if (ttbuild == 3) {
                //辅楼1楼
                setTimeout(() => {
                  this.setTowerMonitor("09");
                  this.$refs.clickcp.ttActive = 3;
                }, 300);
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  3,
                  "监控",
                  bfHelper.equipmentCondition2[5]
                );
              }
            } else {
              // 查看管线
              bfHelper.TtLookEquipmentCop("监控", null, this.condition);
              // bfHelper.setCameraStatus(this.startCamera)
              bfHelper.setOpacityFun1();
              this.initial();
            }
          }
        }
      },
    },

    currentItem: {
      //点击图标
      handler(newVal, oldVal) {
        for (var i = 0; i < this.classList.length; i++) {
          if (newVal == this.classList[i].id.substring(7)) {
            //点击当前图标变色
            this.classList[
              i
            ].src = `${require("../../../public/img/monitoring/electricity/camera22.png")}`;
          }
          if (oldVal && oldVal == this.classList[i].id.substring(7)) {
            //其它的图标显示相应的颜色
            if (this.classList[i].alt == 90000) {
              this.classList[
                i
              ].src = `${require("../../../public/img/monitoring/electricity/camera11.png")}`;
            } else if (this.classList[i].alt == 90001) {
              this.classList[
                i
              ].src = `${require("../../../public/img/monitoring/electricity/camera-off.png")}`;
            } else {
              this.classList[
                i
              ].src = `${require("../../../public/img/monitoring/electricity/camera-bj.png")}`;
            }
          }
        }
      },
    },
  },
  mounted() {
    let dom = document.getElementById('monit_box');
    dom.addEventListener('contextmenu', (event)=> {
      event.preventDefault(); // 阻止默认菜单
      const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0400' } });
      window.open(routerUrl.href, "_blank");
    });
    if (this.bimModel == 1) {
      this.getNavigationMap();
    }
  },
  methods: {
    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)
    },
    //确认告警 - 重新查询告警列表
    doCancelWarn(item) {
      getCancelWarn(item.id).then((res) => {
        this.getCameraWarnList();
        item.confirmStatus = 1;
      });
    },
    //恢复告警
    doRecoveryWarn(item) {
      recoveryWarn(item.id).then((res) => {
        item.warnStatus = 2;
      })
    },
    //跳转历史告警列表
    goMoreWarnList() {
      // this.$router.push({ path: '/equipment/warnHistory' });
      const routerUrl = this.$router.resolve({
        path: "/equipment/warnHistory",
        query: { classCode: "0400", area: this.bimModel },
      });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getCameraWarnList() {
      getCameraWarnList({
        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;
        }
      });
    },
    showAlarmAlert(item, index) {
      item.showAlert = true;
      this.listData.warnEquip.splice(index, 1, item);
    },
    closeAlarmAlert(item, index) {
      item.showAlert = false;
      this.listData.warnEquip.splice(index, 1, item);
    },
    getNavigationMap() {
      commonValue.getNavigationMap("monitor");
    },
    getCameraPosi() {
      let cameraPosi = bfHelper.getCameraStatus().position;
      let tower = null;
      let layer = null;
      for (let i = 0; i < bfHelper.buildBoxbounding.length; i++) {
        if (
          cameraPosi.x > bfHelper.buildBoxbounding[i].build.min.x &&
          cameraPosi.x <= bfHelper.buildBoxbounding[i].build.max.x &&
          cameraPosi.y > bfHelper.buildBoxbounding[i].build.min.y &&
          cameraPosi.y <= bfHelper.buildBoxbounding[i].build.max.y &&
          cameraPosi.z > bfHelper.buildBoxbounding[i].build.min.z &&
          cameraPosi.z <= bfHelper.buildBoxbounding[i].build.max.z
        ) {
          tower = i;
          for (let j = 0; j < bfHelper.buildBoxbounding[i].floor.length; j++) {
            if (
              cameraPosi.x > bfHelper.buildBoxbounding[i].floor[j].min.x &&
              cameraPosi.x <= bfHelper.buildBoxbounding[i].floor[j].max.x &&
              cameraPosi.y > bfHelper.buildBoxbounding[i].floor[j].min.y &&
              cameraPosi.y <= bfHelper.buildBoxbounding[i].floor[j].max.y &&
              cameraPosi.z > bfHelper.buildBoxbounding[i].floor[j].min.z &&
              cameraPosi.z <= bfHelper.buildBoxbounding[i].floor[j].max.z
            ) {
              // console.log(j)
              layer = j;
              // this.getMonitorIds('0' + (i + 1),  '0' + (j + 1))
            }
          }
        }
      }
      // console.log(tower,layer)
      if (tower != null && layer != null) {
        // console.log('888888')
        this.getMonitorIds("0" + (tower + 1), "0" + (layer + 1), "22");
        this.isShowAll = false;
      } else {
        this.isShowAll = true;
      }
    },
    setTowerMonitor(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.build = i;
      this.floor = j;
      // this.getSbgk();
      this.getCameraWarnList(); //告警列表
      this.getSblb();
      if (this.bimModel == 1) {
        if (this.build != undefined) {
          if (j == undefined) {
            if (i == "07") {
              this.buildMessage = "地下室";
              // 筛选条件
              bfHelper.clearDrawableContainer(); //清除外部标签
              this.getMonitorIds("07", "");
              commonValue.getUpdateMap("monitor", i, j);
              return;
            }
            this.buildMessage = Number(i) + "号楼";
          } else {
            this.buildMessage = Number(i) + "号楼" + Number(j) + "层";
            // 筛选条件
            bfHelper.clearDrawableContainer(); //清除外部标签
            this.getMonitorIds(i, j);
          }
        } else {
          this.buildMessage = "园区";
        }

        commonValue.getUpdateMap("monitor", i, j);
      } else {
        if (this.build != undefined) {
          bfHelper.clearDrawableContainer(); //清除外部标签
          this.getMonitorIds(i, j ? j : "");
        } else {
          this.buildMessage = "园区";
        }
      }
    },

    // 获取设备概况
    // getSbgk() {
    // 	getMonitoringGK(this.bimModel, this.build ? this.build : '', this.floor ? this.floor : '').then(res => {

    // 		this.listData = res.data.data;

    // 		for (let i = 0; i < this.listData.systemWarmNum.length; i++) {
    // 			this.listData.systemWarmNum[i].showAlert = false
    // 		}
    // 	})

    // },
    // 获取设备列表
    getSblb() {
      getMonitoringSblb(
        this.current,
        this.size,
        this.bimModel,
        this.build ? this.build : "",
        this.floor ? this.floor : ""
      ).then((res) => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total; //总条目数
      });
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getSblb();
    },
    monitorImgContent(num) {
      let content = `<div class="leadTips" style="transform: translateY(-40px);">
						<div style="display: flex;width:max-content">
							<div style="display: flex;align-items: center;justify-content: center;color:#fff;font-size:18px;width:71px;height:40px;background-color: rgba(7, 67, 151, 0.8);box-shadow: #009cff 0px 0px 15px inset;border: 1px solid #00BAFE;border-radius: 12px;">
								<img src="${require("../../../public/img/monitoring/monitoring.png")}" style="margin-right: 5px;width:30px;height:30px;"/>
								<span>${num}</span>
							</div>
						</div>	
					</div>`;
      return content;
    },
    bjClick(item) {
      let id = "";
      if (this.bimModel == 2) {
        if (item.modelId == "") {
        } else {
          // bfHelper.resetStatus(2);
          bfHelper.clearDrawableContainer();
          id = bfHelper.disposeId(item.area, item.build, item.modelId);
          if (item.build == "00") {
            //室外
            id = bfHelper.disposeId(item.area, "10", item.modelId);
            bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(id), 20);
          } else if (item.build == "08") {
            //塔楼
            bfHelper.ttLookPipeline2(
              null,
              null,
              0,
              "监控",
              bfHelper.equipmentCondition2[5]
            );
          } else if (item.build == "09") {
            //辅楼

            // window.sessionStorage.setItem('ttcamera',JSON.stringify(camera));
            bfHelper.ttLookPipeline2(
              null,
              null,
              Number(item.floored),
              "监控",
              bfHelper.equipmentCondition2[5],
              null,
              "single"
            );
            bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
            bfHelper.setCameraView("Top");
            bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(id), 120);
          }
        }
      } else {
        bfHelper.mapDestroy();
        if (item.modelId == "") {
        } else {
          // bfHelper.mapDestroy();
          bfHelper.clearDrawableContainer();
          id = bfHelper.disposeId(item.area, item.build, item.modelId);

          if (item.build == "00") {
            bfHelper.navigationMap(
              ".mapDom",
              require("../../../public/img/monitoring/mapviewer/total.png"),
              8,
              1
            );
            this.buildMessage = "园区";
            bfHelper.lookPipeline(null, null, this.condition, "监控");
          } else if (item.build == "07") {
            bfHelper.navigationMap(
              ".mapDom",
              require("../../../public/img/monitoring/mapviewer/electricity7b.png"),
              7,
              1
            );
            this.buildMessage = "地下室";
            let camera = bfHelper.cameraPosition[9];
            window.sessionStorage.setItem("camera", JSON.stringify(camera));
            bfHelper.lookPipeline2(
              this.condition,
              bfHelper.equipmentCopColors[0],
              9,
              null,
              "监控",
              null,
              null,
              true
            );
          } else {
            bfHelper.navigationMap(
              ".mapDom",
              require("../../../public/img/monitoring/mapviewer/monitor" +
                Number(item.build) +
                "b" +
                Number(item.floored) +
                "f.png"),
              Number(item.build),
              Number(item.floored)
            );
            this.buildMessage =
              Number(item.build) + "号楼" + Number(item.floored) + "层";
            let camera = bfHelper.cameraPosition[Number(item.build) - 1];
            window.sessionStorage.setItem("camera", JSON.stringify(camera));
            bfHelper.lookPipeline2(
              this.condition,
              bfHelper.equipmentCopColors[0],
              item.build - 1,
              Number(item.floored),
              "监控",
              null,
              null,
              true
            );
          }

          bfHelper.setOpacityFun(false);
        }
      }
      let content = `<div class="leadTips"  style="transform: translateY(-40px);">
						<div  style="display: flex;width:max-content">
							<img id='monitor${id}' alt='${item.status}'
							class = 'montorImg' src="${require(item.status == 90000
        ? "../../../public/img/monitoring/electricity/camera11.png"
        : item.status == 90001
          ? "../../../public/img/monitoring/electricity/camera-off.png"
          : "../../../public/img/monitoring/electricity/camera-bj.png")}" style="width:40px;height:40px;"/>
						</div>	
					</div>`;
      // console.log(id)
      // console.log(bfHelper.getBoxMessage(id, true))
      if (item.name == '1#2F阶级会议室') {
        bfHelper.customTag(
          { x: '99783.95158224391', y: '-21212.222455260806', z: '6847.543165934141' },
          null,
          content
        );
      }
      else {
        bfHelper.customTag(
          bfHelper.getBoxMessage(id, true).max,
          null,
          content,
          id
        );
      }
      bfHelper.customItemFun().onClick((item) => {
        this.classList = document.getElementsByClassName("montorImg");
        bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
        // 设置视角为俯视
        let id = item.layerId;
        let index = id.lastIndexOf(".");
        id = id.substring(index + 1, id.length);
        getmonData(this.bimModel, id).then((res) => {
          // console.log(res)
          if (res.data.data.status != 90001) {
            this.codeId = res.data.data.thirdId;
            this.currentItem = item.layerId;
            this.monitoring = true;
            this.monitor = false;
            this.isMon = res.data.data.agentViewHis;
          } else {
            this.$message.warning("设备离线，不可查看");
          }
        });
      });
    },
    setBuildColor() {
      bfHelper.setConditionsColor(
        [
          {
            categoryId: -2000011, //墙
          },
        ],
        "#09aef2"
      );

      // 设置1-6楼板颜色
      bfHelper.setConditionsColor(
        [
          {
            categoryId: -2000032, //楼板
            fileId: this.tower[0],
          },
          {
            categoryId: -2000032, //楼板
            fileId: this.tower[1],
          },
          {
            categoryId: -2000032, //楼板
            fileId: this.tower[2],
          },
          {
            categoryId: -2000032, //楼板
            fileId: this.tower[3],
          },
          {
            categoryId: -2000032, //楼板
            fileId: this.tower[4],
          },
          {
            categoryId: -2000032, //楼板
            fileId: this.tower[5],
          },
          {
            categoryId: -2000032, //楼板
            fileId: this.tower[9],
          },
        ],
        "#066fab"
      );
    },
    restoreBuildColor() {
      let conditionArr = [];
      for (let i = 0; i < 6; i++) {
        let obj = {
          categoryId: -2000011, //墙
          fileId: this.tower[i],
        };
        let obj1 = {
          categoryId: -2000032, //墙
          fileId: this.tower[i],
        };
        let obj2 = {
          categoryId: -2001330, //墙
          fileId: this.tower[i],
        };
        conditionArr.push(obj, obj1, obj2);
      }
      bfHelper.restoreComponentsColorByObjectData(conditionArr);
    },
    setOpacity() {
      // 设置运动场+室外道路透明度
      bfHelper.overrideComponentsOpacityByObjectData(
        [
          {
            fileId: this.tower[7],
          },
          {
            fileId: this.tower[6],
            familyType: "沥青道路",
          },
          {
            fileId: this.tower[6],
            familyType: "石板路",
          },
        ],
        0.1
      );

      bfHelper.overrideComponentsOpacityByObjectData(
        [
          {
            categoryId: "-2000032",
            family: "楼板",
            familyType: "楼板",
            fileId: this.tower[6],
          },
        ],
        1
      );
    },
    setFloorOpacity() {
      let conditionArr = [
        {
          family: "基本墙",
        },
        {
          family: "幕墙",
        },
        {
          family: "楼板",
          familyType: "楼板",
          fileId: this.tower[6],
        },
      ];
      for (let i = 0; i < 6; i++) {
        let obj1 = {
          categoryId: -2000032, //楼板
          fileId: this.tower[i],
        };
        conditionArr.push(obj1);
      }
      return conditionArr;
    },
    // 初始标签
    initial() {
      if (this.bimModel == 1) {
        let origin = bfHelper.ywqOrigin;
        let height = null; //相机与原点的两点距离
        // 业务区
        // console.log(this.reload)
        bfHelper.CameraPositionChanged((data) => {
          // console.log(data)
          height = Math.sqrt(
            Math.pow(origin[0] - data.position.x, 2) +
            Math.pow(origin[1] - data.position.y, 2) +
            Math.pow(origin[2] - data.position.z, 2)
          );
          // console.log(height)
          if (700000 <= height && this.reload != 1) {
            // 显示一级标签 总的
            this.monitoring = false;
            bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
            bfHelper.cancelSelected(); // 清除选中状态
            bfHelper.clearDrawableContainer(); //清除外部标签
            let position = bfHelper.ywqStairPt;
            bfHelper.customTag(position, null, this.monitorImgContent(181));
            this.setBuildColor();
            this.setOpacity();
            bfHelper.overrideComponentsOpacityByObjectData(
              [
                {
                  family: "基本墙",
                },
                {
                  family: "幕墙",
                },
                {
                  categoryId: -2000032, //楼板
                },
              ],
              0.1
            );
            this.reload = 1;
            return;
          } else if (400000 <= height && height < 700000 && this.reload != 2) {
            // 显示二级标签 室外和室内
            this.monitoring = false;
            bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
            bfHelper.cancelSelected(); // 清除选中状态
            bfHelper.clearDrawableContainer(); //清除外部标签
            let position = bfHelper.ywqSecondLevelPt;
            let num = [122, 37];
            for (let i = 0; i < num.length; i++) {
              bfHelper.customTag(
                position[i],
                null,
                this.monitorImgContent(num[i])
              );
            }
            this.setBuildColor();
            this.setOpacity();
            bfHelper.overrideComponentsOpacityByObjectData(
              [
                {
                  family: "基本墙",
                },
                {
                  family: "幕墙",
                },
                {
                  categoryId: -2000032, //楼板
                },
              ],
              0.1
            );
            this.reload = 2;
            return;
          } else if (height >= 300000 && height < 400000 && this.reload != 3) {
            bfHelper.showComponentsByObjectData([
              {
                family: "楼板",
              },
              {
                family: "基本墙",
              },
            ]);
            // // 隐藏多余墙体
            bfHelper.hideComponentsByObjectData([
              {
                fileId: this.tower[6],
                familyType: "楼板",
              },
            ]);
            bfHelper.mapDestroy();
            bfHelper.navigationMap(
              ".mapDom",
              require("../../../public/img/monitoring/mapviewer/total.png"),
              8,
              1
            );
            this.buildMessage = "园区";
            // 显示三级标签 每号楼
            this.monitoring = false;
            bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
            bfHelper.cancelSelected(); // 清除选中状态
            bfHelper.clearDrawableContainer(); //清除外部标签
            this.getMonitorIds("00", "");
            this.build = "";
            this.floor = "";
            // this.getSbgk();
            this.getCameraWarnList(); //告警列表
            this.getSblb();
            this.setBuildColor();
            this.setOpacity();
            bfHelper.overrideComponentsOpacityByObjectData(
              this.setFloorOpacity(),
              0.2
            );
            let position = bfHelper.ywqThreeLevelPt;
            let num = [11, 32, 9, 18, 34, 18, 21];
            for (let i = 0; i < num.length; i++) {
              bfHelper.customTag(
                position[i],
                null,
                this.monitorImgContent(num[i])
              );
              bfHelper.customItemFun().onClick((item) => {
                for (let a = 0; a < position.length; a++) {
                  if (
                    item.worldPosition.x == position[a].x &&
                    item.worldPosition.y == position[a].y &&
                    item.worldPosition.z == position[a].z
                  ) {
                    // 处理点击1-6号楼
                    this.towerIndex = a;
                    if (a != 6) {
                      this.threeBtn(a);
                    } else {
                      // 点击地下室
                      this.basementBtn(a);
                    }
                    return;
                  }
                }
              });
            }
            this.reload = 3;
            return;
          }
          // else if (height >= 200000 && height < 300000 && this.reload != 3) {
          // 	this.restoreBuildColor();
          // 	this.setOpacity();
          // 	bfHelper.overrideComponentsOpacityByObjectData(this.setFloorOpacity(), 0.4)
          // 	this.reload = 3;
          // 	return
          // }
          else if (
            height >= 200000 &&
            height < 300000 &&
            this.reload != 3 &&
            this.floorBqShow
          ) {
            this.monitoring = false;
            bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
            bfHelper.cancelSelected(); // 清除选中状态
            bfHelper.clearDrawableContainer(); //清除外部标签
            this.threeBtn(this.towerIndex);
            this.reload = 3;
            this.floorBqShow = false;
            this.restoreBuildColor();
            this.setOpacity();
            bfHelper.overrideComponentsOpacityByObjectData(
              this.setFloorOpacity(),
              0.5
            );
            this.reload = 4;
            return;
          } else if (height < 300000 && height > 80000 && this.reload != 4) {
            // 显示三级标签 每号楼
            this.restoreBuildColor();
            this.setOpacity();
            bfHelper.overrideComponentsOpacityByObjectData(
              this.setFloorOpacity(),
              0.7
            );
            this.reload = 4;
            return;
          } else if (
            height < 300000 &&
            height > 80000 &&
            this.reload == 100 &&
            this.isShowAll
          ) {
            // 显示三级标签 每号楼
            this.isMapViewer = 0;
            this.monitoring = false;
            bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
            bfHelper.cancelSelected(); // 清除选中状态
            bfHelper.clearDrawableContainer(); //清除外部标签
            this.getMonitorIds("00", "");
            this.build = "";
            this.floor = "";
            // this.getSbgk();
            this.getCameraWarnList(); //告警列表
            this.getSblb();
            this.restoreBuildColor();
            this.setOpacity();
            bfHelper.overrideComponentsOpacityByObjectData(
              this.setFloorOpacity(),
              0.7
            );
            // bfHelper.showAllComponents(); // 显示全部构件
            let position = bfHelper.ywqThreeLevelPt;
            let num = [11, 32, 9, 18, 34, 18, 21];
            for (let i = 0; i < num.length; i++) {
              bfHelper.customTag(
                position[i],
                null,
                this.monitorImgContent(num[i])
              );
              bfHelper.customItemFun().onClick((item) => {
                for (let a = 0; a < position.length; a++) {
                  if (
                    item.worldPosition.x == position[a].x &&
                    item.worldPosition.y == position[a].y &&
                    item.worldPosition.z == position[a].z
                  ) {
                    // 处理点击1-6号楼
                    this.towerIndex = a;
                    if (a != 6) {
                      this.threeBtn(a);
                    } else {
                      // 点击地下室
                      this.basementBtn(a);
                    }
                    return;
                  }
                }
              });
            }
            this.reload = 4;
            return;
          }
          // else if (height <= 80000 && this.reload == 100 && this.isShowAll) { //别的页面放大到模型附近切换监控页面显示全部的监控图标标签
          // 	bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
          // 	bfHelper.cancelSelected(); // 清除选中状态
          // 	bfHelper.clearDrawableContainer(); //清除外部标签
          // 	this.getMonitorIds('', '')
          // 	this.isShowAll = false
          // 	return
          // }
        });
      } else {
        // 塔台
        let origin = bfHelper.ttOrigin; //原点
        let height = null; //相机与原点的两点距离
        // 业务区
        // console.log(this.reload)
        bfHelper.CameraPositionChanged((data) => {
          height = Math.sqrt(
            Math.pow(origin[0] - data.position.x, 2) +
            Math.pow(origin[1] - data.position.y, 2) +
            Math.pow(origin[2] - data.position.z, 2)
          );
          // console.log(height)

          if (300000 <= height && this.reload != 1) {
            // 显示一级标签
            this.monitoring = false;
            bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
            bfHelper.cancelSelected(); // 清除选中状态
            bfHelper.clearDrawableContainer(); //清除外部标签
            // bfHelper.showAllComponents(); // 显示全部构件
            let position = bfHelper.ttStairPt;
            bfHelper.customTag(position, null, this.monitorImgContent(69));
            this.reload = 1;
            return;
          } else if (height < 300000 && height >= 200000 && this.reload != 2) {
            // 显示二级标签
            this.monitoring = false;
            bfHelper.setCameraAnimation(true); // 设置模型动画开启关闭
            bfHelper.cancelSelected(); // 清除选中状态
            bfHelper.clearDrawableContainer(); //清除外部标签
            // 塔台+室外整体+辅楼(1层+2层)
            // 根据筛选条件显示构件
            bfHelper.showComponentsByObjectData([
              {
                fileId: this.fileId[1],
                family: "楼板",
              },
              {
                fileId: this.fileId[1],
                family: "基本墙",
              },
              {
                fileId: this.fileId[0],
                family: "楼板",
              },
              {
                fileId: this.fileId[0],
                family: "基本墙",
              },
              {
                categoryId: "-2003400", //外墙 甜甜筒
                fileId: this.fileId[0],
              },
            ]);
            let position = bfHelper.ttSecondLevelPt;
            let num = [35, 21, 9, 4];
            for (let i = 0; i < num.length; i++) {
              bfHelper.customTag(
                position[i],
                null,
                this.monitorImgContent(num[i])
              );
              bfHelper.customItemFun().onClick((item) => {
                // 不显示三级标签
                this.reload = null; //滑动滚轮开启重新加载标签
                bfHelper.clearDrawableContainer(); //清除所有标签
                bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭

                if (
                  item.worldPosition.x == position[0].x &&
                  item.worldPosition.y == position[0].y &&
                  item.worldPosition.z == position[0].z
                ) {
                  // 点击塔台
                  // 添加标签
                  this.getMonitorIds("08", "");
                  this.floorBqShow = true;
                  return;
                } else if (
                  item.worldPosition.x == position[1].x &&
                  item.worldPosition.y == position[1].y &&
                  item.worldPosition.z == position[1].z
                ) {
                  // 点击室外整体
                  // 添加标签
                  this.getMonitorIds("00", "");
                  this.floorBqShow = true;
                  return;
                } else if (
                  item.worldPosition.x == position[2].x &&
                  item.worldPosition.y == position[2].y &&
                  item.worldPosition.z == position[2].z
                ) {
                  // 点击辅楼第一层
                  // 根据筛选条件隐藏构件/隐藏当前楼全部构件
                  bfHelper.hideComponentsByObjectData([
                    {
                      fileId: this.fileId[0],
                    },
                    {
                      fileId: this.fileId[1],
                    },
                  ]);
                  // 根据筛选条件显示构件
                  bfHelper.showComponentsByObjectData([
                    {
                      fileId: this.fileId[1],
                      levelName: "L1",
                      family: "楼板",
                    },
                    {
                      fileId: this.fileId[1],
                      levelName: "L1",
                      family: "基本墙",
                    },
                  ]);
                  this.getMonitorIds("09", "01");
                  this.floorBqShow = true;
                  return;
                } else {
                  // 点击辅楼第二层

                  // 根据筛选条件隐藏构件/隐藏当前楼全部构件
                  bfHelper.hideComponentsByObjectData([
                    {
                      fileId: this.fileId[0],
                    },
                    {
                      fileId: this.fileId[1],
                    },
                  ]);
                  // 根据筛选条件显示构件
                  bfHelper.showComponentsByObjectData([
                    {
                      fileId: this.fileId[1],
                      levelName: "L1",
                      family: "楼板",
                    },
                    {
                      fileId: this.fileId[1],
                      levelName: "L1",
                      family: "基本墙",
                    },
                    {
                      fileId: this.fileId[1],
                      levelName: "L2",
                      family: "楼板",
                    },
                    {
                      fileId: this.fileId[1],
                      levelName: "L2",
                      family: "基本墙",
                    },
                  ]);

                  this.getMonitorIds("09", "02");

                  this.floorBqShow = true;
                }
              });
            }
            this.reload = 2;
          }
        });
      }
    },
    // 点击1-6楼三级标签
    threeBtn(index) {
      // console.log(index)
      this.build = "0" + (index + 1);
      this.floor = "";
      // this.getSbgk();
      this.getCameraWarnList(); //告警列表
      this.getSblb();
      bfHelper.setCameraAnimation(false);
      // 根据筛选条件隐藏构件
      bfHelper.showComponentsByObjectData([
        {
          fileId: this.tower[index],
          // 'levelName': `${b+1}F`,
          family: "楼板",
        },
        {
          fileId: this.tower[index],
          // 'levelName': `${b+1}F`,
          family: "基本墙",
        },
      ]);
      bfHelper.mapDestroy();
      bfHelper.navigationMap(
        ".mapDom",
        require("../../../public/img/monitoring/mapviewer/electricity" +
          (index + 1) +
          "b.png"),
        1,
        1
      );

      this.buildMessage = index + 1 + "号楼";
      bfHelper.setCameraStatus(this.cameraPosition[index]).then(() => {
        // console.log('kkkkk')
        this.reload = null;
        bfHelper.clearDrawableContainer(); //清除所有标签
        // return

        for (let n = 0; n < this.floorNum.length; n++) {
          let position = this.position[n]; //1-6号楼每层标签点位
          for (let i = 0; i < this.floorNum[n].length; i++) {
            if (this.floorNum[n][i] != 0) {
              bfHelper.customTag(
                position[i],
                null,
                this.monitorImgContent(this.floorNum[n][i])
              );
            }

            bfHelper.customItemFun().onClick((item) => {
              // console.log(bfHelper.getBoxMessage('10000753466346.2674262', true).max)
              for (let a = 0; a < position.length; a++) {
                this.floorBqShow = true; //允许添加楼层标签
                if (
                  item.worldPosition.x == position[a].x &&
                  item.worldPosition.y == position[a].y &&
                  item.worldPosition.z == position[a].z
                ) {
                  // console.log(n,a)
                  bfHelper.mapDestroy();
                  bfHelper.navigationMap(
                    ".mapDom",
                    require("../../../public/img/monitoring/mapviewer/monitor" +
                      (n + 1) +
                      "b" +
                      (a + 1) +
                      "f.png"),
                    n + 1,
                    a + 1
                  );

                  this.buildMessage = n + 1 + "号楼" + (a + 1) + "层";
                  this.build = "0" + (n + 1);
                  this.floor = "0" + (a + 1);
                  // this.getSbgk();
                  this.getCameraWarnList(); //告警列表
                  this.getSblb();
                  // 根据筛选条件隐藏构件/隐藏当前楼全部构件
                  bfHelper.hideComponentsByObjectData([
                    {
                      fileId: this.tower[n],
                    },
                  ]);
                  // 根据筛选条件隐藏构件
                  for (let b = 0; b < position.length; b++) {
                    if (b <= a) {
                      // 根据筛选条件显示构件
                      bfHelper.showComponentsByObjectData([
                        {
                          fileId: this.tower[n],
                          levelName: `${b + 1}F`,
                          family: "楼板",
                        },
                        {
                          fileId: this.tower[n],
                          levelName: `${b + 1}F`,
                          family: "基本墙",
                        },
                      ]);
                      // 根据筛选条件隐藏构件
                      bfHelper.hideComponentsByObjectData([
                        {
                          fileId: this.tower[n],
                          levelName: "1F",
                          familyType: "建筑-50mm",
                        },
                        {
                          fileId: this.tower[n],
                          levelName: "1F",
                          familyType: "建筑-400mm",
                        },
                        {
                          fileId: this.tower[n],
                          levelName: "1F",
                          familyType: "常规 - 300mm",
                        },
                      ]);
                    }
                  }
                  this.getMonitorIds("0" + (n + 1), "0" + (a + 1));
                }
              }
            });
          }
        }
      });
    },
    // 点击地下室
    basementBtn(index) {
      this.reload = null;
      this.build = "07";
      this.floor = "";
      // this.getSbgk();
      this.getCameraWarnList(); //告警列表
      this.getSblb();
      bfHelper.setCameraAnimation(false);
      bfHelper.setCameraStatus(this.cameraPosition[index]).then(() => {
        // 隐藏1-6+地下室
        for (let i = 0; i < this.tower.length; i++) {
          bfHelper.hideComponentsByObjectData([
            {
              fileId: this.tower[i],
            },
          ]);
        }

        bfHelper.clearDrawableContainer(); //清除所有标签
        bfHelper.mapDestroy();
        bfHelper.navigationMap(
          ".mapDom",
          require("../../../public/img/monitoring/mapviewer/electricity7b.png"),
          7,
          1
        );

        this.buildMessage = "地下室";
        bfHelper.showComponentsByObjectData([
          {
            fileId: this.tower[this.tower.length - 1],
            family: "基本墙",
          },
          {
            fileId: this.tower[this.tower.length - 1],
            familyType: "人防底板400mm",
          },
        ]);
        this.getMonitorIds("07", "");
      });
    },
    // 添加标签
    addBq(
      positions,
      camera,
      status,
      arr,
      condition,
      num,
      location,
      name,
      code
    ) {
      // 根据筛选条件显示构件
      bfHelper.showComponentsByObjectData(condition);
      // // 根据筛选条件加入选中集合
      bfHelper.setSelectedById(arr);
      // // // // 设置视角为俯视
      if (this.bimModel == 2) {
        bfHelper.setCameraStatus(camera[0]);
      } else {
        if (
          (this.bimModel == 1 && name == "园区") ||
          (this.bimModel == 1 && name == "整体")
        ) {
        } else {
          if (camera && JSON.stringify(camera[0]) != "{}") {
            bfHelper.setCameraStatus(camera[0]);
          } else {
            if (code == "22") {
            } else {
              bfHelper.setCameraView(location ? location : "Top");
              // 缩放到加入选中集合的构件
              bfHelper.zoomToSelectedComponents();
            }
          }
        }
      }
      if (this.bimModel == 1 && name == "园区") {
      } else {
        //清除所有标签
        bfHelper.clearDrawableContainer();
      }

      // // 选中的集合构件id（也就是所有摄像的Id）
      let selectComponentId = bfHelper.getselectGather();
      if (this.bimModel == 1 && name != "整体") {
        for (let b = 0; b < selectComponentId.length; b++) {
          for (let r = 0; r < positions.length; r++) {
            if (selectComponentId[b] == positions[r].id) {
              let content = `<div class="leadTips"  style="transform: translateY(-40px);">
										<div  style="display: flex;width:max-content">
											<img id='monitor${selectComponentId[b]}' alt='${status[b]}'
											class = 'montorImg' src="${require(status[b] == 90000
                ? "../../../public/img/monitoring/electricity/camera11.png"
                : status[b] == 90001
                  ? "../../../public/img/monitoring/electricity/camera-off.png"
                  : "../../../public/img/monitoring/electricity/camera-bj.png")}" style="width:40px;height:40px;"/>
										</div>	
									</div>`;
              // console.log(positions[r].bounding.max)
              bfHelper.customTag(
                positions[r].bounding.max,
                null,
                content,
                selectComponentId[b]
              );
              bfHelper.customItemFun().onClick((item) => {
                this.classList = document.getElementsByClassName("montorImg");
                bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
                // 设置视角为俯视
                let id = item.layerId;
                let index = id.lastIndexOf(".");
                id = id.substring(index + 1, id.length);
                getmonData(this.bimModel, id).then((res) => {
                  // console.log(res)
                  if (res.data.data.status != 90001) {
                    this.codeId = res.data.data.thirdId;
                    this.currentItem = item.layerId;
                    this.monitoring = true;
                    this.monitor = false;
                    this.isMon = res.data.data.agentViewHis;
                  } else {
                    this.$message.warning("设备离线，不可查看");
                  }
                });
              });
            }
          }
        }
      } else {
        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='monitor${selectComponentId[b]}' alt='${status[b]}'
									class = 'montorImg' src="${require(status[b] == 90000
            ? "../../../public/img/monitoring/electricity/camera11.png"
            : status[b] == 90001
              ? "../../../public/img/monitoring/electricity/camera-off.png"
              : "../../../public/img/monitoring/electricity/camera-bj.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.classList = document.getElementsByClassName("montorImg");
              bfHelper.setCameraAnimation(false); // 设置模型动画开启关闭
              // 设置视角为俯视
              let id = item.layerId;
              let index = id.lastIndexOf(".");
              id = id.substring(index + 1, id.length);
              getmonData(this.bimModel, id).then((res) => {
                // console.log(res)
                if (res.data.data.status != 90001) {
                  this.codeId = res.data.data.thirdId;
                  this.currentItem = item.layerId;
                  this.monitoring = true;
                  this.monitor = false;
                  this.isMon = res.data.data.agentViewHis;
                } else {
                  this.$message.warning("设备离线，不可查看");
                }
              });
            });
          }
        }
      }
    },
    // 点击操作跳转监控页
    getMonitorIds(build, floor, code) {
      getMonitoringList(this.bimModel, build, 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 == "" || data[d].modelId == "模型无") {
          } else {
            if (this.bimModel == 2 && build == "00") {
              let id = bfHelper.disposeId(data[d].area, "10", data[d].modelId);
              idArr.push(id);
            } else {
              let id = bfHelper.disposeId(
                data[d].area,
                data[d].build,
                data[d].modelId
              );
              idArr.push(id);
            }
            let status = data[d].status;

            statusArr.push(status);
          }
        }
        let condition = JSON.parse(JSON.stringify(this.condition));
        for (let c = 0; c < condition.length; c++) {
          if (this.bimModel == 1) {
            if (build == "07") {
              let obj = {
                levelName: "B1",
                fileId: this.tower[this.tower.length - 1],
              };
              Object.assign(condition[c], obj);
            } else if (build == "00") {
              let obj = {
                fileId: this.tower[6],
              };
              Object.assign(condition[c], obj);
            } else {
              let obj = {
                levelName: `${Number(floor)}F`,
                fileId: this.tower[Number(build)],
              };
              Object.assign(condition[c], obj);
            }
          } else {
            if (build == "08") {
              let obj = {
                fileId: this.fileId[0],
              };
              Object.assign(condition[c], obj);
            } else if (build == "00") {
              let obj = {
                fileId: this.fileId[2],
              };
              Object.assign(condition[c], obj);
            } else if (build == "09" && floor == "01") {
              let obj = {
                levelName: "L1",
                fileId: this.fileId[1],
              };
              Object.assign(condition[c], obj);
            } else if (build == "09" && floor == "02") {
              let obj = {
                levelName: "L2",
                fileId: this.fileId[1],
              };
              Object.assign(condition[c], obj);
            }
          }
        }

        if (this.bimModel == 1) {
          if (build == "07") {
            this.addBq(
              this.monitorPosition[6][0],
              null,
              statusArr,
              idArr,
              condition
            );
          } else if (build == "00") {
            this.addBq(
              this.monitorPosition[7][0],
              null,
              statusArr,
              idArr,
              condition,
              null,
              null,
              "园区"
            );
          } else if (build == "") {
            this.addBq(null, null, statusArr, idArr, null, null, null, "整体");
          } else {
            // if(code == '22'){
            // 	this.addBq(null,null, statusArr,idArr, condition);
            // }else{
            this.addBq(
              this.monitorPosition[Number(build) - 1][Number(floor) - 1],
              null,
              statusArr,
              idArr,
              condition,
              null,
              null,
              null,
              code
            );
            // }
          }
        } else {
          if (build == "08") {
            const cameraTower = [
              {
                aspect: 1.889763779527559,
                coordinateSystem: "world",
                far: 195615.69644792317,
                fov: 45,
                name: "persp",
                near: 110180.26708172823,
                position: {
                  x: -39548.89957187824,
                  y: -525993.6238512459,
                  z: 38640.62510066625,
                },
                target: {
                  x: -20545.351813693076,
                  y: 372241.2560735995,
                  z: 24669.065657504725,
                },
                up: {
                  x: 0.00032889260186363527,
                  y: 0.015545622433294026,
                  z: 0.9998791054186591,
                },
                version: 1,
                zoom: 1,
              },
            ];
            this.addBq(
              null,
              cameraTower,
              statusArr,
              idArr,
              condition,
              1,
              "SouthTop",
              "塔台"
            );
          } else if (build == "00") {
            const cameraTower = [
              {
                aspect: 1.889763779527559,
                coordinateSystem: "world",
                far: 157731.7844962148,
                fov: 45,
                name: "persp",
                near: 23980.735698856108,
                position: {
                  x: -43387.090990135286,
                  y: -444311.8364162102,
                  z: 102427.03554761136,
                },
                target: {
                  x: -34968.59598398651,
                  y: 77332.86680249915,
                  z: -629145.3609791917,
                },
                up: {
                  x: 0.013137746075591192,
                  y: 0.8140689058752524,
                  z: 0.5806196828519705,
                },
                version: 1,
                zoom: 1,
              },
            ];
            this.addBq(
              null,
              cameraTower,
              statusArr,
              idArr,
              condition,
              null,
              null,
              "塔台"
            );
          } else {
            const cameraTower = [
              {
                aspect: 1.889763779527559,
                coordinateSystem: "world",
                far: 97604.44561389177,
                fov: 45,
                name: "persp",
                near: 10.369999998297162,
                position: {
                  x: -56007.33936157323,
                  y: -389985.3790084629,
                  z: 74901.75652403604,
                },
                target: {
                  x: -52864.50486469997,
                  y: -170453.7668408688,
                  z: -796406.5888191625,
                },
                up: {
                  x: 0.013880729883673048,
                  y: 0.9695892196104088,
                  z: 0.24434416414797946,
                },
                version: 1,
                zoom: 1,
              },
            ];
            this.addBq(
              null,
              cameraTower,
              statusArr,
              idArr,
              condition,
              null,
              null,
              "塔台"
            );
            // bfHelper.setCameraStatus(cameraTower)
          }
        }
      });
    },
    goMonitoring(row) {
      const { href } = this.$router.resolve({
        path: "/garden/monitoring",
        query: {
          id: row.thirdId,
          name: row.name,
          jurisdiction: row.agentViewHis,
        },
      });
      window.open(href, "_blank");
    },
    // 点击回放按钮
    playBack() {
      let currentId = this.currentItem;
      let currentIndex = currentId.lastIndexOf(".");
      currentId = currentId.substring(currentIndex + 1, currentId.length);
      if (this.isMon == 1) {
        getmonData(this.bimModel, currentId).then((res) => {
          const { href } = this.$router.resolve({
            path: "/garden/monitoring",
            query: {
              id: res.data.data.thirdId,
              name: res.data.data.name,
            },
          });
          window.open(href, "_blank");
        });
      } else {
        this.$message.error("没有回放权限！");
      }
    },

    // 点击关闭按钮
    closeView() {
      this.monitoring = false;
    },

    // 构件点击
    onClick() {
      bfHelper.onClick((data) => {
        let colorArr = [];
        let modelId = data.objectId;
        colorArr.push(modelId);
        let index = modelId.lastIndexOf(".");
        modelId = modelId.substring(index + 1, modelId.length);
        getmonData(this.bimModel, modelId).then((res) => {
          let tmp = JSON.stringify(res.data.data);
          if (tmp === "{}") {
          } else {
            if (res.data.data.status == 90001) {
              this.$message.warning("设备离线，不可查看");
            } else {
              bfHelper.restoreComponentsColorByObjectData(this.condition);
              bfHelper.setColor("#07e6ed", colorArr);
              this.codeId = res.data.data.thirdId;
              this.monitoring = true;
              this.isMon = res.data.data.agentViewHis;
              this.currentItem = data.objectId;
            }
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.door {

  // 设备概况
  .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 {
        box-sizing: border-box;
        background: url(../../../public/img/monitoring/electricity/normal.png) no-repeat;
        background-size: cover;
        width: 176px;
        height: 78px;
      }

      .lx {
        box-sizing: border-box;
        background: url(../../../public/img/monitoring/electricity/guzhangbg.png) no-repeat;
        background-size: cover;
        width: 176px;
        height: 78px;
      }
    }

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

      .lx {
        color: #ec9b28;
      }
    }

    .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;
      }
    }

    .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;
        .alarm-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;
    }
  }

  .monitoring2 {
    z-index: 99;
    position: absolute;
    right: 2.5rem;
    top: 5.875rem;
    width: 404px;
    height: 340px;
    background-image: url(../../../public/img/monitoring/doorBg3.png);
    background-size: 100% 100%;

    .title {
      margin: 1rem 0 1.5rem 1.25rem;
      color: #fff;
      font-size: 1rem;

      img {
        display: block;
        width: 1.437rem;
        height: 1.437rem;
        margin-right: 0.438rem;
      }
    }

    .btn_box {
      display: flex;
      float: right;
      margin-right: 35px;
      margin-top: 10px;

      .btn {
        width: 60px;
        height: 30px;
        border: 1px solid rgb(0, 187, 255);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #c3e1ea;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }

  .tab2 {
    position: absolute;
    right: 2.5rem;
    top: 30rem;
    width: 404px;
    height: 309px;
    background-image: url(../../../public/img/monitoring/doorBg3.png);
    background-size: 100% 100%;

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

      img {
        display: block;
        width: 1.375rem;
        margin-right: 0.438rem;
      }
    }

    .mapDom {
      width: 370px;
      height: 200px;
      margin: 45px auto 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;

      .mon_box {
        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;
    }
  }
}
</style>
