smartpark-front/src/components/monitoring/firefighting.vue

<template>
  <!-- 消防 -->
  <div v-if="firefightingState" class="firefighting">
    <!-- 各楼栋楼层切换 -->
    <clickCp :bimModel="bimModel" sbType="消防" :checkList="checkList" ref="clickcp" @storeTower="handelEmit">
      <!-- 返回主视角 -->
    </clickCp>
    <backHome :bimModel="bimModel" type="消防" :condition="checkList" dom=".mapDom"></backHome>
    <div class="mapDom" style="position: absolute;left: 105px;top: 320px;width: 250px; height: 180px;"
      v-if="bimModel == 1"></div>
    <!-- 类型切换 -->
    <div class="selectBox" :style="{ top: bimModel == 1 ? '217px' : '260px' }">
      <el-checkbox-group v-model="checkList" @change="chooseFire">
        <el-checkbox :label="1">喷淋</el-checkbox>
        <el-checkbox :label="2">烟感报警</el-checkbox>
        <el-checkbox :label="0">排烟</el-checkbox>
        <el-checkbox :label="3">消防栓水管</el-checkbox>
      </el-checkbox-group>
    </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: 56px">{{ 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: 56px">{{ 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>
      <div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''">
        <p>设备名称</p>
        <p>报警信息</p>
        <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 v-if="activeTab == 1" class="item flex-center" v-for="(item, index) in listData.warnEquipList" :key="index"
          @mouseenter="showAlarkAlert(item, index, 0)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 0)">
          <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="../../../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" v-text="item.name" :title="item.name" :style="{
                color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white',
              }"></span>
            </div>
            <span class="data" title="item.warnContent" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white',
            }">{{ item.warnContent }}</span>
            <span class="time" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
        <div v-if="activeTab == 2" class="item flex-center" v-for="(item, index) in listData.warnEventList" :key="'warnEvent' + 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 == '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">
            <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" v-text="item.name" :title="item.name" :style="{
                color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white',
              }"></span>
            </div>
            <span class="data" title="item.warnMsg" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white',
            }">{{ item.warnContent }}</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="fire_box">设备列表</span>
      </div>
      <div class="tabBox">
        <el-table @row-click="tableClick" :data="tableData" style="width: 100%" @row-contextmenu="tableContext"
          :class="bimModel == 2 ? 'tataitab' : ''">
          <el-table-column label="设备名称" width="130">
            <template slot-scope="scope">
              <div class="flex-center mon_box" style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  cursor: pointer;
                ">
                <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
                      ? ''
                      : 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="设备位置">
            <template slot-scope="scope">
              <div class="flex-center mon_box" style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  cursor: pointer;
                ">
                <span :style="{
                  color:
                    scope.row.status == 90000
                      ? ''
                      : 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="设备状态">
            <template slot-scope="scope">
              <div :style="{
                color:
                  scope.row.status == 90000
                    ? ''
                    : scope.row.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }" class="flex-center-center" style="cursor: pointer">
                {{
                    scope.row.status == 90000
                      ? "正常"
                      : scope.row.status == 90001
                        ? "离线"
                        : "报警"
                }}
              </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>
</template>

<script>
import * as bfHelper from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import clickCp from "./clickCp";
import {
  // 业务区
  getFightSblb,
  getFightGK,
  // 塔台
  getfireData,
  getFightWarn,
  getFiredWarnList, //告警列表
  getCancelWarn, //确认告警
  recoveryWarn,//恢复告警
} from "@/api/garden/monitoring";
import backHome from "./backHome";
export default {
  props: {
    firefightingState: {
      type: Boolean,
    },
    bimModel: {
      type: Number,
    },
  },
  data() {
    return {
      checkList: [0, 1, 2, 3], //复选框
      current: 1, //当前页
      size: 5, //每页数量
      total: 0, //总条目数
      tableData: [], //设备列表
      listData: {
        warnEquipList: [],
        warnEventList: [],
      }, //报警信息

      classOption: {
        step: 0.4,
      }, //报警信息滚动速度
      activeNum: null,
      towers: null,
      layer: null,
      isAlarm: false,
      isSafe: false,
      alarmTotal: 0,
      safeTotal: 0,
      alarmLists: [],
      activeTab: 1,
    };
  },
  components: {
    clickCp,
    backHome,
  },
  created() {
    this.getFight(); //报警信息
    this.getFightGk(); //报警信息
    this.getFightWarnList(); //bim标注告警列表
    this.getFiredWarnList(); //报警信息
    this.addWaterLabel();
    this.setInterval = setInterval(() => {
      this.getFight(); //报警信息
      this.getFightGk(); //报警信息
      this.getFightWarnList(); //bim标注告警列表
      this.getFiredWarnList(); //报警信息
      this.addWaterLabel();
    }, 3600000);
  },
  mounted() {
    let dom = document.getElementById('fire_box');
    dom.addEventListener('contextmenu', (event)=> {
      event.preventDefault(); // 阻止默认菜单
      const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0600' } });
      window.open(routerUrl.href, "_blank");
    });
    this.getNavigationMap();
  },
  beforeDestroy() {
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
    window.removeEventListener("click", this.fireListener);
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        if (this.setInterval) {
          clearInterval(this.setInterval);
        }

        this.setInterval = setInterval(() => {
          this.getFight(); //报警信息
          this.getFightGk(); //报警信息
          this.getFightWarnList(); //bim标注告警列表
          this.getFiredWarnList(); //报警信息
          this.addWaterLabel();
        }, 3600000);

        this.getFight(); //报警信息
        this.getFightGk(); //报警信息
        this.getFightWarnList(); //bim标注告警列表
        this.getFiredWarnList(); //报警信息
        this.addWaterLabel();
      },
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        if (newval) {
          // 模型恢复全部状态
          bfHelper.resetStatus(2);
          bfHelper.extObjMngClear(); //清除外部构件
          this.onClick();
          // this.initial();
          if (newval == 1) {
            // 查看管线

            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.setTowerFire("07");
                    this.$refs.clickcp.active = 26;
                    this.$refs.clickcp.tower = 9;
                  }, 300);
                  // console.log(this.checkList)
                  bfHelper.lookPipeline2(
                    null,
                    null,
                    build - 1,
                    null,
                    "消防",
                    bfHelper.equipmentCondition2[1],
                    this.checkList
                  );
                } else if (build == 26) {
                  bfHelper.lookEquipmentCop("消防", this.checkList);
                  setTimeout(() => {
                    this.setTowerFire();
                  }, 300);

                  bfHelper.setOpacityFun();
                } else {
                  if (floor.indexOf("undefined") == -1) {
                    setTimeout(() => {
                      this.setTowerFire("0" + build, "0" + floor);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        Number(floor)
                      );
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);
                    bfHelper.lookPipeline2(
                      null,
                      null,
                      build - 1,
                      floor,
                      "消防",
                      bfHelper.equipmentCondition2[1],
                      this.checkList
                    );
                  } else {
                    setTimeout(() => {
                      this.setTowerFire("0" + build);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        null
                      );
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);
                    bfHelper.lookPipeline2(
                      null,
                      null,
                      build - 1,
                      null,
                      "消防",
                      bfHelper.equipmentCondition2[1],
                      this.checkList
                    );
                  }
                }
              } else {
                bfHelper.lookEquipmentCop("消防", this.checkList);
                bfHelper.setOpacityFun();
                this.getNavigationMap();
              }
            } else {
              // 查看管线
              window.sessionStorage.setItem(
                "ttcamera",
                JSON.stringify(bfHelper.getCameraStatus())
              );
              let ttbuild = sessionStorage.getItem("ttbuild");
              if (ttbuild) {
                if (ttbuild == 20) {
                  //园区
                  bfHelper.TtLookEquipmentCop("消防", this.checkList);
                  setTimeout(() => {
                    this.setTowerFire();
                  }, 300);
                } else if (ttbuild == 0) {
                  //塔楼
                  setTimeout(() => {
                    this.setTowerFire("08");
                    this.$refs.clickcp.ttActive = 0;
                  }, 300);
                  bfHelper.ttLookPipeline2(
                    null,
                    null,
                    0,
                    "消防",
                    bfHelper.equipmentCondition2[1],
                    this.checkList
                  );
                } else if (ttbuild == 1) {
                  //辅楼1楼
                  setTimeout(() => {
                    this.setTowerFire("09", "01");
                    this.$refs.clickcp.ttActive = 1;
                  }, 300);
                  bfHelper.ttLookPipeline2(
                    null,
                    null,
                    1,
                    "消防",
                    bfHelper.equipmentCondition2[1],
                    this.checkList
                  );
                } else if (ttbuild == 2) {
                  //辅楼1楼
                  setTimeout(() => {
                    this.setTowerFire("09", "02");
                    this.$refs.clickcp.ttActive = 2;
                  }, 300);
                  bfHelper.ttLookPipeline2(
                    null,
                    null,
                    2,
                    "消防",
                    bfHelper.equipmentCondition2[1],
                    this.checkList
                  );
                } else if (ttbuild == 3) {
                  //辅楼1楼
                  setTimeout(() => {
                    this.setTowerFire("09");
                    this.$refs.clickcp.ttActive = 3;
                  }, 300);
                  bfHelper.ttLookPipeline2(
                    null,
                    null,
                    3,
                    "消防",
                    bfHelper.equipmentCondition2[1],
                    this.checkList
                  );
                }
              } else {
                // 查看管线
                bfHelper.TtLookEquipmentCop("消防", this.checkList);
                bfHelper.setOpacityFun1();
              }
            }
          } else {
          }
        }
      },
    },
  },
  methods: {
    //确认告警 - 重新查询告警列表
    doCancelWarn(item) {
      getCancelWarn(item.id).then((res) => {
        // this.getFiredWarnList();
        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: "0600", area: this.bimModel },
      });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getFiredWarnList() {
      getFiredWarnList({
        area: this.bimModel,
        build: this.tower ? this.tower : "",
        floor: this.layer ? this.layer : "",
      }).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);
      }
    },
    getFightWarnList() {
      getFightWarn(
        this.bimModel,
        this.towers ? this.towers : "",
        this.layer ? this.layer : ""
      ).then((res) => {
        this.alarmLists = res.data.data;
      });
    },
    clickAlarm(item) {
      this.activeTab = item;
    },
    getNavigationMap() {
      commonValue.getNavigationMap("water");
    },
    // 接收子组件当前点击楼号
    setTowerFire(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.towers = i;
      // if (j) {
      this.layer = j;
      // }
      this.getFightGk();
      this.getFight(); //设别列表
      this.getFiredWarnList(); //报警信息
      //   this.getFightWarnList(); //bim标注告警列表
      if (this.bimModel == 1) {
        commonValue.getUpdateMap("water", i, j);
      }
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getFight();
    },
    // 获取设备列表
    getFight() {
      getFightSblb(
        this.bimModel,
        this.current,
        this.size,
        this.towers ? this.towers : "",
        this.layer ? this.layer : ""
      ).then((res) => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.records;
      });
    },

    addWaterLabel() {
      setTimeout(() => {
        this.addFireLabelContent();
      }, 300);
      window.addEventListener("click", this.fireListener);
    },
    fireListener(e) {
      if (e.target.id.indexOf("firemeter") != -1) {
        let position = bfHelper.getBoxMessage(
          e.target.id.substring(9),
          true
        ).max;
        getfireData(this.bimModel, e.target.id.substring(24)).then((res) => {
          if (res.data.code == 200) {
            // console.log(res)
            let { name, status, location } = res.data.data;
            // 如果当前点击的是电箱  先清除所以标签
            bfHelper.clearDrawableContainer();
            this.addLabel(
              e.target.id.substring(9),
              name,
              status,
              location,
              null,
              "1"
            );
            // bfHelper.setCameraView('SouthWestIsometricBottom');
            bfHelper.zoomToBoundingBox(
              bfHelper.getBoxMessage(e.target.id.substring(9)),
              2
            );
          }
        });
      }
      if (e.target.id.indexOf("fireclosecha") != -1) {
        bfHelper.clearTags();
        this.addFireLabelContent();
      }
    },
    addFireLabelContent() {
      //初始化添加消防标签
      let img1 = require("../../../public/img/monitoring/electricity/firegz.png");
      let img2 = require("../../../public/img/monitoring/electricity/fire-alarm.png");

      for (let i = 0; i < this.alarmLists.length; i++) {
        if (this.alarmLists[i].modelId != "") {
          let id = bfHelper.disposeId(
            1,
            this.alarmLists[i].build,
            this.alarmLists[i].modelId
          );
          let box = bfHelper.getBoxMessage(id, true);
          if (box == undefined) {
            return;
          } else {
            let zb = box.max;
            if (this.alarmLists[i].warnCode == 90001) {
              // bfHelper.customTag(zb, null, this.labelContent1(img1,id));
            } else {
              bfHelper.customTag(zb, null, this.labelContent1(img2, id));
            }
          }
        }
      }
    },

    labelContent1(img, id) {
      //图标标签
      let content = `<div class="leadTips"  style="transform: translateY(-40px);">
						<div  style="display: flex;width:max-content">
							<img id='firemeter${id}' class = 'montorImg' src="${img}" style="width:35px;height:35px;"/>
						</div>	
					</div>`;
      return content;
    },
    getFightGk() {
      getFightGK(
        this.bimModel,
        this.towers ? this.towers : "",
        this.layer ? this.layer : ""
      ).then((res) => {
        let listData = res.data.data;
        let arr = listData.systemWarnEquipList.concat(
          listData.safeWarnEquipList
        );
        if (arr.length > 0) {
          let arr1 = [];
          let arr2 = [];
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].status == 90000) {
            } else if (arr[i].status == 90001) {
              arr2.push(bfHelper.disposeId(1, arr[i].build, arr[i].modelId));
            } else {
              arr1.push(bfHelper.disposeId(1, arr[i].build, arr[i].modelId));
            }
          }
          bfHelper.setFlicker(arr1, "#ff0000", 100);
          bfHelper.setColor("#9d9d9d", arr2);
          this.addWaterLabel();
        }
      });
    }, //报警信息
    // 获取报警信息
    // 点击报警信息定位到指定设备
    bjClick(item) {
      // bfHelper.clearDrawableContainer();
      // // console.log(item)
      // let id = bfHelper.disposeId(1, item.build, item.modelId);
      // bfHelper.customTag(bfHelper.getBoxMessage(id, true).max, null, this.getContent(item))
      // bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(id),3)
      // bfHelper.setCameraView('SouthBottom');

      if (this.bimModel == 2) {
        // bfHelper.clearDrawableContainer();
        // let id = '10000722317177.1065480';
        // // let id = bfHelper.disposeId(item.area, item.build, item.modelId);
        // let boundingBox = bfHelper.getBoxMessage(id);
        // bfHelper.zoomToBoundingBox(boundingBox, 3);
        // this.addLabel(id, item.name, item.status, item.location, item.dataNum);
      } else {
        if (item.modelId == "") {
        } else {
          // 如果当前点击的是电箱  先清除所以标签
          // window.sessionStorage.setItem('build',tower != null? tower + 1:'26');
          // window.sessionStorage.setItem('floor',layer);
          bfHelper.clearDrawableContainer();
          let id = bfHelper.disposeId(item.area, item.build, item.modelId);
          let box = bfHelper.getBoxMessage(id, true);
          if (box == undefined) {
            console.log("box undefined--------");
            return;
          }
          bfHelper.customTag(
            bfHelper.getBoxMessage(id, true).max,
            null,
            this.getContent(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);
        }
      }
    },
    // 添加标签
    addLabel(objectId, name, type, location, dataNum, type1) {
      // 构件id/设备名称/设备状态/设备位置/累计电量

      // 获取当前点击坐标
      let zb = bfHelper.getBoxMessage(objectId, true);
      //引线标签的顶点
      let position = {
        x: zb.max.x,
        y: zb.max.y,
        z: zb.max.z,
      };
      let item = {
        name: name,
        status: type,
        location: location,
        objectId: objectId,
        type1: type1,
      };
      bfHelper.customTag(position, null, this.getContent(item));
    },
    getContent(item) {
      let bgImg1 = require("../../../public/img/monitoring/electricity/liftbg2.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;position:relative">
							<img src="${require("../../../public/img/monitoring/closecha.png")}" style="position:absolute;top:-73px;right:0;width:27px;display:${item.type1 == "1" ? "inline-block" : "none"
        }" id="fireclosecha${item.objectId}"/>
							<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:150px;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
            ? "silver"
            : "red"
        }">${item.status == 90000 ? "正常" : item.status == 90001 ? "离线" : "报警"
        }</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="display:${item.status == 90000 ? "none" : "flex"
        } ;justify-content: space-between;margin-top:5px">
										<span style="font-size:12px;color:silver">报警信息：</span>
										<span style="font-size:13px;color:white">${item.warnContent
          ? item.warnContent
          : item.warnMsg
            ? item.warnMsg
            : ""
        }</span>
									</div>
									<div style="display:${item.status == 90000 ? "none" : "flex"
        } ;justify-content: space-between;margin-top:5px">
										<span style="font-size:12px;color:silver">报警时间：</span>
										<span style="font-size:13px;color:white">${item.warnDate
          ? item.warnDate.substring(5, 16)
          : item.warnTime
            ? item.warnTime.substring(5, 16)
            : ""
        }</span>
									</div>
								</div>
							</div>
						</div>	
					</div>`;
      return content;
    },
    // 构件点击
    onClick() {
      bfHelper.onClick((data) => {
        // console.log(data)
        // 点击构件的筛选条件

        getfireData(this.bimModel, data.elementId).then((res) => {
          if (res.data.code == 200 && Object.keys(res.data.data).length>0) {
            // console.log(res)
            let { name, status, location } = res.data.data;
            // 如果当前点击的是电箱  先清除所以标签
            bfHelper.clearDrawableContainer();
            this.addLabel(data.objectId, name, status, location);
          }
        });
        return;
      });
    },
    // 表格某行被点击
    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)
    },
    chooseFire() {
      if (this.bimModel == 1) {
        if (this.towers != null) {
          window.sessionStorage.setItem(
            "camera",
            JSON.stringify(bfHelper.getCameraStatus())
          );
          if (this.towers == "07") {
            bfHelper.lookPipeline2(
              null,
              null,
              9,
              null,
              "消防",
              bfHelper.equipmentCondition2[1],
              this.checkList
            );
          } else {
            bfHelper.lookPipeline2(
              null,
              null,
              Number(this.towers) - 1,
              Number(this.layer),
              "消防",
              bfHelper.equipmentCondition2[1],
              this.checkList
            );
          }
        } else {
          // console.log('cccccccc')
          if (this.checkList.length === 0) {
            bfHelper.lookEquipmentCop("消防");
          } else {
            this.checkList.sort((a, b) => {
              return a - b;
            });
            bfHelper.lookEquipmentCop("消防", this.checkList);
          }
        }
      } else {
        if (this.towers != null) {
          window.sessionStorage.setItem(
            "ttcamera",
            JSON.stringify(bfHelper.getCameraStatus())
          );
          if (this.towers == "08") {
            //塔楼
            bfHelper.ttLookPipeline2(
              null,
              null,
              0,
              "消防",
              bfHelper.equipmentCondition2[1],
              this.checkList
            );
          } else if (this.towers == "09") {
            //辅楼1楼
            if (this.layer) {
              if (this.layer == "01") {
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  1,
                  "消防",
                  bfHelper.equipmentCondition2[1],
                  this.checkList
                );
              } else {
                bfHelper.ttLookPipeline2(
                  null,
                  null,
                  2,
                  "消防",
                  bfHelper.equipmentCondition2[1],
                  this.checkList
                );
              }
            } else {
              bfHelper.ttLookPipeline2(
                null,
                null,
                3,
                "消防",
                bfHelper.equipmentCondition2[1],
                this.checkList
              );
            }
          }
        } else {
          if (this.checkList.length === 0) {
            bfHelper.TtLookEquipmentCop("消防");
          } else {
            this.checkList.sort((a, b) => {
              return a - b;
            });
            bfHelper.TtLookEquipmentCop("消防", this.checkList);
          }
        }
      }
    },
    handelEmit(e) {
      // console.log(e)
      this.activeNum = e.activeNum;
      this.towers = e.tower;
      this.layer = e.layer;
    },
  },
};
</script>

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

  // 类型切换
  .selectBox {
    z-index: 99;
    background: url(../../../public/img/monitoring/electricity/selectBj.png) no-repeat;
    background-size: cover;
    width: 242px;
    height: 63px;
    position: absolute;
    // top: 217px;
    left: 105px;

    /deep/ .el-checkbox-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 77%;
      margin: auto;

      .el-checkbox {
        margin: 5px 10px;
        color: white;
        font-weight: 500;
        font-size: 14px;
        cursor: pointer;
        user-select: none;

        .el-checkbox__inner {
          background-color: transparent;
        }
      }

      .el-checkbox__input.is-checked+.el-checkbox__label {
        color: white;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner {
        border-color: white;
        background-color: transparent;
      }

      .el-checkbox__inner::after {
        border: 1px solid #09dae7;
        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;

      .span_box {
        width: 126px;
        display: inline-block;
        text-align: center;
      }

      .lx {
        color: #a5bbe5;
      }

      .bj {
        color: #d34951;
      }
    }

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

    .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: red;

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

            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 {
      font-weight: bold;
      margin: 1rem 0 2rem 1.25rem;
      color: #fff;
      font-size: 15px;

      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>