<!-- 电子围界 -->
<template>
  <div>
    <!-- 返回主视角 -->
    <backHome :bimModel="bimModel" type="电子围界" dom=".mapDom"></backHome>
    <div style="position: absolute; left: 84px; top: 20px" 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 class="box2" :class="bimModel == 2 ? 'tataigen' : ''">
      <div class="title flex-center">
        <img class="icon" src="../../../public/img/monitoring/electricity/sbIcon.png" />
        <span>设备概况</span>
      </div>
      <div class="state flex-center-center">
        <div class="zc flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.normalEquipNumber }}</span>
        </div>
        <div class="lx flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.warnEquipEquipNumber }}</span>
        </div>
        <div class="bj flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.warnEventEquipNumber }}</span>
        </div>
        <!-- <div class="bj flex-center" style="font-family:fantasy;">1</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>
        <span>|</span>
        <p>报警信息</p>
        <span>|</span>
        <p>报警时间</p>
      </div>
      <div v-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEquipList &&
        listData.warnEquipList.length == 0 &&
        activeTab == 1
      " class="noBjxx">
        暂无设备告警信息
      </div>
      <div v-else-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEventList &&
        listData.warnEventList.length == 0 &&
        activeTab == 2
      " class="noBjxx">
        暂无告警事件信息
      </div>
      <vue-seamless-scroll v-else :class-option="classOption"
        :data="activeTab == 1 ? listData.warnEquipList : listData.warnEventList" class="warp">
        <div @click="bjClick(item)" class="item flex-center" @mouseenter="showAlarkAlert(item, index, 0)"
          style="position: relative" @mouseleave="closeAlarkAlert(item, index, 0)"
          v-for="(item, index) in listData.warnEquipList" :key="index" v-if="activeTab == 1">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.homepageShow == 1">|</span>
            <p v-if="item.homepageShow == 1" @click="doCancelWarn(item.id)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>关闭告警</span>
            </p>
          </div>
          <div class="box flex-center">
            <div class="left flex-center-center">
              <img class="icon" :src="
                require(item.status == 90001
                  ? '../../../public/img/monitoring/electricity/lx.png'
                  : '../../../public/img/monitoring/electricity/bj.png')
              " />
              <span class="message" v-text="item.name" :title="item.name" :style="{
                color:
                  item.status == 90000
                    ? ''
                    : item.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }"></span>
            </div>
            <span class=""></span>
            <span class="data" :title="item.warnContent" :style="{
              color:
                item.status == 90000
                  ? ''
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnContent }}</span>
            <span class=""></span>
            <span class="time" :style="{
              color:
                item.status == 90000
                  ? ''
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
        <div @click="bjClick(item)" class="item flex-center" v-for="(item, index) in listData.warnEventList"
          :key="index" @mouseenter="showAlarkAlert(item, index, 1)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 1)">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.homepageShow == 1">|</span>
            <p v-if="item.homepageShow == 1" @click="doCancelWarn(item.id)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>关闭告警</span>
            </p>
          </div>
          <div class="box flex-center" :class="bimModel == 2 ? 'tataicon' : ''">
            <div class="left flex-center-center">
              <img class="icon" :src="
                require(item.status == 90001
                  ? '../../../public/img/monitoring/electricity/lx.png'
                  : '../../../public/img/monitoring/electricity/bj.png')
              " />
              <span class="message" v-text="item.name" :title="item.name" :style="{
                color:
                  item.status == 90000
                    ? ''
                    : item.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }"></span>
            </div>
            <span class=""></span>
            <span class="data" :title="item.warnContent" :style="{
              color:
                item.status == 90000
                  ? ''
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnContent }}</span>
            <span class=""></span>
            <span class="time" :style="{
              color:
                item.status == 90000
                  ? ''
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
      </vue-seamless-scroll>
      <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="switch" :class="bimModel == 2 ? 'tataigen' : ''">
      <div class="title flex-center">
        <img src="../../../public/img/monitoring/sblb.png" />
        <span>设备列表</span>
      </div>
      <img src="../../../public/img/monitoring/ktline.png" style="margin-left: 1.25rem" />
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border1" />
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border2" />
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border3" />
      <img src="../../../public/img/monitoring/ktborder.png" class="kt-border kt-border4" />
      <div class="tabBox">
        <el-table :data="tableData.slice((current - 1) * size, current * size)" style="width: 100%"
          @row-click="tableClick" :class="bimModel == 2 ? 'tataitab' : ''">
          <el-table-column label="设备名称" style="cursor: pointer">
            <template slot-scope="scope">
              <div class="flex-center-center mon_box" style="cursor: pointer; overflow: hidden; white-space: nowrap">
                <img v-if="scope.row.status == 90000" style="margin: 0 6px"
                  src="../../../public/img/monitoring/electricity/listIcon.png" />
                <img v-else-if="scope.row.status == 90001" style="margin: 0 6px"
                  src="../../../public/img/monitoring/electricity/listIcon2.png" />
                <img v-else style="margin: 0 6px" src="../../../public/img/monitoring/electricity/listIcon4.png" />
                <span :style="{
                  color:
                    scope.row.status == 90000
                      ? 'white'
                      : scope.row.status == 90001
                        ? '#a5bbe5'
                        : '#ff0000',
                }" :title="scope.row.name" style="
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  ">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="|" width="10"> </el-table-column>
          <el-table-column label="位置" min-width="100px" style="cursor: pointer; overflow: hidden; white-space: nowrap">
            <template slot-scope="scope">
              <span :style="{
                color:
                  scope.row.status == 90000
                    ? 'white'
                    : scope.row.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }" :title="scope.row.location" style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                ">{{ scope.row.location }}</span>
            </template>
          </el-table-column>
          <el-table-column label="|" width="10"> </el-table-column>
          <el-table-column label="报警信息" style="cursor: pointer">
            <template slot-scope="scope">
              <span style="cursor: pointer" :style="{
                color:
                  scope.row.status == 90000
                    ? 'white'
                    : scope.row.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }">
                {{
                    scope.row.status == 90000
                      ? ""
                      : scope.row.status == 90001
                        ? "离线"
                        : scope.row.warnMsg
                }}
              </span>
            </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="tableData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as bfHelper from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import backHome from "./backHome";

import {
  getWallLists,
  getWallRecords,
  getWallGK,
  getFenceWarnList, //报警列表
  getCancelWarn, //关闭告警
} from "@/api/garden/monitoring";
export default {
  props: {
    bimModel: {
      type: Number,
    },
  },
  components: {
    backHome,
  },
  data() {
    return {
      // 业务区围墙ID
      ywq: [
        // 一区
        {
          code: "11100000001",
          walls: [
            "10000752850689.980404",
            "10000752850689.946632",
            "10000752850689.946527",
            "10000752850689.938096",
            "10000752850689.938110",
            "10000752850689.938118",
            "10000752850689.938134",
            "10000752850689.938144",
            "10000752850689.938164",
            "10000752850689.938181",
            "10000752850689.938184",
            "10000752850689.938187",
            "10000752850689.938190",
            "10000752850689.938193",
            "10000752850689.938196",
            "10000752850689.938199",
            "10000752850689.938202",
            "10000752850689.938205",
            "10000752850689.938208",
            "10000752850689.938211",
            "10000752850689.938214",
            "10000752850689.938217",
            "10000752850689.938220",
            "10000752850689.938223",
            "10000752850689.938226",
          ],
        },
        // 二区
        {
          code: "11100000002",
          walls: [
            "10000752850689.938229",
            "10000752850689.938232",
            "10000752850689.938258",
            "10000752850689.938274",
            "10000752850689.938277",
            "10000752850689.938280",
            "10000752850689.938283",
            "10000752850689.938286",
            "10000752850689.938289",
            "10000752850689.938292",
            "10000752850689.938295",
            "10000752850689.938298",
            "10000752850689.938301",
            "10000752850689.938304",
            "10000752850689.938307",
            "10000752850689.938310",
            "10000752850689.938313",
            "10000752850689.938316",
            "10000752850689.946060",
          ],
        },
        // 三区
        {
          code: "11100000003",
          walls: [
            "10000752850689.938375",
            "10000752850689.946166",
            "10000752850689.946286",
            "10000752850689.946308",
            "10000752850689.946332",
            "10000752850689.946369",
            "10000752850689.946410",
            "10000752850689.946445",
          ],
        },
        // 四区
        {
          code: "11100000004",
          walls: [
            "10000752850689.938595",
            "10000752850689.938769",
            "10000752850689.938923",
            "10000752850689.939006",
            "10000752850689.939089",
            "10000752850689.939172",
            "10000752850689.939255",
            "10000752850689.939338",
            "10000752850689.939421",
            "10000752850689.939504",
            "10000752850689.939587",
            "10000752850689.939670",
            "10000752850689.939753",
            "10000752850689.939836",
            "10000752850689.939919",
            "10000752850689.940002",
            "10000752850689.940085",
            "10000752850689.940168",
          ],
        },
        //五区
        {
          code: "11100000005",
          walls: [
            "10000752850689.940251",
            "10000752850689.940334",
            "10000752850689.940417",
            "10000752850689.940500",
            "10000752850689.940583",
            "10000752850689.940666",
            "10000752850689.940749",
            "10000752850689.940832",
            "10000752850689.940915",
            "10000752850689.940998",
            "10000752850689.941081",
            "10000752850689.941164",
            "10000752850689.941247",
            "10000752850689.941330",
            "10000752850689.941413",
            "10000752850689.941501",
            "10000752850689.941658",
            "10000752850689.941741",
            "10000752850689.941824",
            "10000752850689.941907",
            "10000752850689.941990",
            "10000752850689.942073",
            "10000752850689.942156",
            "10000752850689.942239",
            "10000752850689.942322",
            "10000752850689.942405",
          ],
        },
        //六区
        {
          code: "11100000006",
          walls: [
            "10000752850689.942488",
            "10000752850689.942571",
            "10000752850689.942654",
            "10000752850689.942737",
            "10000752850689.942820",
            "10000752850689.942903",
            "10000752850689.942986",
            "10000752850689.943069",
            "10000752850689.943152",
            "10000752850689.943235",
            "10000752850689.943318",
            "10000752850689.943401",
            "10000752850689.943484",
            "10000752850689.943567",
            "10000752850689.943650",
            "10000752850689.943733",
            "10000752850689.943816",
            "10000752850689.943899",
            "10000752850689.943982",
            "10000752850689.944065",
            "10000752850689.944148",
            "10000752850689.944231",
            "10000752850689.944314",
            "10000752850689.944397",
            "10000752850689.944480",
            "10000752850689.944563",
            "10000752850689.944646",
            "10000752850689.944729",
            "10000752850689.944812",
          ],
        },
        //七区
        {
          code: "11100000007",
          walls: [
            "10000752850689.945577",
            "10000752850689.945692",
            "10000752850689.945711",
            "10000752850689.945714",
            "10000752850689.945717",
            "10000752850689.945720",
            "10000752850689.945723",
            "10000752850689.945726",
            "10000752850689.945729",
            "10000752850689.945732",
            "10000752850689.945735",
            "10000752850689.945738",
            "10000752850689.945741",
            "10000752850689.945744",
            "10000752850689.945747",
            "10000752850689.945750",
            "10000752850689.945753",
            "10000752850689.945756",
            "10000752850689.945759",
            "10000752850689.945762",
            "10000752850689.945765",
            "10000752850689.945768",
            "10000752850689.945771",
            "10000752850689.945774",
            "10000752850689.945777",
            "10000752850689.945780",
            "10000752850689.945783",
          ],
        },
        //八区
        {
          code: "11100000008",
          walls: [
            "10000752850689.945786",
            "10000752850689.945789",
            "10000752850689.945792",
            "10000752850689.945795",
            "10000752850689.945798",
            "10000752850689.945801",
            "10000752850689.945804",
            "10000752850689.945807",
            "10000752850689.945810",
            "10000752850689.945813",
            "10000752850689.945816",
            "10000752850689.945819",
            "10000752850689.945822",
            "10000752850689.945825",
            "10000752850689.945828",
            "10000752850689.945831",
            "10000752850689.945834",
            "10000752850689.945837",
            "10000752850689.945840",
            "10000752850689.945843",
            "10000752850689.945846",
            "10000752850689.945849",
            "10000752850689.945852",
          ],
        },
        //九区
        {
          code: "11100000009",
          walls: [
            "10000752850689.945857",
            "10000752850689.945874",
            "10000752850689.945877",
            "10000752850689.945880",
            "10000752850689.945883",
            "10000752850689.945886",
            "10000752850689.945889",
            "10000752850689.945892",
            "10000752850689.945895",
            "10000752850689.945898",
            "10000752850689.945901",
            "10000752850689.945904",
            "10000752850689.945907",
            "10000752850689.945910",
            "10000752850689.945913",
            "10000752850689.945916",
            "10000752850689.945919",
            "10000752850689.945922",
            "10000752850689.945925",
            "10000752850689.945934",
            "10000752850689.945946",
            "10000752850689.945954",
          ],
        },
        //十区
        {
          code: "11100000010",
          walls: [
            "10000752850689.945964",
            "10000752850689.989554",
            "10000752850689.989568",
            "10000752850689.989571",
            "10000752850689.989574",
            "10000752850689.989577",
            "10000752850689.989580",
            "10000752850689.989583",
            "10000752850689.989586",
            "10000752850689.989589",
            "10000752850689.989592",
            "10000752850689.989595",
            "10000752850689.989598",
            "10000752850689.989601",
            "10000752850689.989604",
            "10000752850689.989607",
            "10000752850689.989610",
            "10000752850689.989613",
            "10000752850689.989616",
            "10000752850689.989619",
            "10000752850689.989622",
            "10000752850689.989625",
            "10000752850689.989628",
            "10000752850689.989631",
            "10000752850689.989634",
            "10000752850689.990535",
            "10000752850689.989646",
            "10000752850689.989649",
          ],
        },
        //十一区
        {
          code: "11100000011",
          walls: [
            "10000752850689.989652",
            "10000752850689.989655",
            "10000752850689.989658",
            "10000752850689.989661",
            "10000752850689.989664",
            "10000752850689.989667",
            "10000752850689.989670",
            "10000752850689.989673",
            "10000752850689.989676",
            "10000752850689.989679",
            "10000752850689.989682",
            "10000752850689.989685",
            "10000752850689.989688",
            "10000752850689.989691",
            "10000752850689.989694",
            "10000752850689.989697",
            "10000752850689.989700",
            "10000752850689.989703",
            "10000752850689.989706",
          ],
        },
        //十二区
        {
          code: "11100000012",
          walls: [
            "10000752850689.989709",
            "10000752850689.993692",
            "10000752850689.993707",
            "10000752850689.993710",
            "10000752850689.993713",
            "10000752850689.993716",
            "10000752850689.993719",
            "10000752850689.993722",
            "10000752850689.993725",
            "10000752850689.993728",
            "10000752850689.993738",
            "10000752850689.993747",
            "10000752850689.993756",
          ],
        },
        //十三区
        {
          code: "11100000013",
          walls: [
            "10000752850689.993765",
            "10000752850689.993788",
            "10000752850689.993830",
            "10000752850689.993856",
            "10000752850689.993880",
            "10000752850689.993906",
            "10000752850689.993931",
          ],
        },
        //十四区
        {
          code: "11100000014",
          walls: [
            "10000752850689.993956",
            "10000752850689.994000",
            "10000752850689.994050",
            "10000752850689.994075",
            "10000752850689.994100",
            "10000752850689.994125",
            "10000752850689.994150",
            "10000752850689.994175",
            "10000752850689.994200",
            "10000752850689.994225",
            "10000752850689.994250",
            "10000752850689.994275",
            "10000752850689.994300",
            "10000752850689.994325",
            "10000752850689.1030655",
          ],
        },
      ],

      // 塔台围墙ID
      tt: [
        // 一区
        {
          code: "21100000001",
          walls: [
            "10000750071023.883261",
            "10000750071023.883488",
            "10000750071023.883540",
            "10000750071023.883573",
            "10000750071023.883576",
            "10000750071023.883579",
            "10000750071023.883582",
            "10000750071023.888585",
            "10000750071023.1016116",
          ],
        },
        // 二区
        {
          code: "21100000002",
          walls: [
            "10000750071023.1013558",
            // "10000750071023.894937",
          ],
        },
        // 三区
        {
          code: "21100000003",
          walls: [
            "10000750071023.1010290",
            // "10000750071023.895163",
          ],
        },

        // 四区

        {
          code: "21100000004",
          walls: ["10000750071023.981489"],
        },
      ],

      colors: ["#a1a1a1", "#25be43", "#ff0000"], //电子围栏区域状态颜色
      tableData: [],
      current: 1,
      size: 5,
      total: 0,
      isMapViewer: 0,
      isAlarm: false,
      isSafe: false,
      safeTotal: 0,
      alarmTotal: 0,
      listData: {},
      buildMessage: "",
      tower: null,
      layer: null,
      activeTab: 1,
      classOption: {
        step: 0.2,
      }, //报警信息滚动速度
    };
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        this.current = 1; //当前页
        this.total = 0; //总条目数
        if (this.setInterval) {
          clearInterval(this.setInterval);
        }
        this.tower = null;
        this.getWall();
        // this.getWallGK();
        this.getFenceWarnList(); //告警列表
      },
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        if (newval) {
          bfHelper.resetStatus(2);
          // 模型恢复全部状态
          if (this.bimModel == 1) {
            // window.sessionStorage.setItem('camera',JSON.stringify(bfHelper.getCameraStatus()));
            let build = sessionStorage.getItem("build");

            if (build) {
              setTimeout(() => {
                this.setTowerWall();
              }, 300);
              bfHelper.lookEquipmentCop("电子围界");
            } else {
              bfHelper.lookEquipmentCop("电子围界");
              bfHelper.setOpacityFun();
              this.onClick();
              setTimeout(() => {
                this.buildMessage = "园区";
                this.getNavigationMap();
              }, 300);
            }
            bfHelper.setCameraStatus({
              aspect: 1.889763779527559,
              coordinateSystem: "world",
              far: 960464.7787185954,
              fov: 45,
              name: "persp",
              near: 105041.57557288553,
              position: {
                x: 114923.08877241895,
                y: -391542.9803033385,
                z: 219845.7809478254,
              },
              target: {
                x: -8729.420142852026,
                y: 863922.0428858905,
                z: -496665.6824418152,
              },
              up: {
                x: -0.048407478040169157,
                y: 0.4914893345691443,
                z: 0.8695372045373162,
              },
              version: 1,
              zoom: 1,
            });
          } else {
            // 查看管线
            bfHelper.TtLookEquipmentCop("电子围界");

            // window.sessionStorage.setItem(
            //   "ttcamera",
            //   JSON.stringify(bfHelper.getCameraStatus())
            // );
            // }
          }
        }
      },
    },
  },
  beforeDestroy() {
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
  },
  mounted() {
    this.getWall();
    // this.getWallGK();
    this.getFenceWarnList(); //告警列表
    if (this.bimModel == 1) {
      this.getNavigationMap();
    }
  },
  methods: {
    //关闭告警 - 重新查询告警列表
    doCancelWarn(id) {
      getCancelWarn(id).then((res) => {
        this.getFenceWarnList();
      });
    },
    //跳转历史告警列表
    goMoreWarnList() {
      const routerUrl = this.$router.resolve({
        path: "/equipment/warnHistory",
        query: { classCode: "1100", area: this.bimModel },
      });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getFenceWarnList() {
      getFenceWarnList({
        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);
      }
    },
    getNavigationMap() {
      commonValue.getNavigationMap("water");
    },
    clickAlarm(item) {
      this.activeTab = item;
    },
    setTowerWall(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.tower = i;
      if (j) {
        this.layer = j;
      }
      this.getWall();
      // this.getWallGK();
      this.getFenceWarnList(); //告警列表
      if (this.bimModel == 1) {
        this.buildMessage = "园区";
        commonValue.getUpdateMap("water", i, j);
        // bfHelper.mapUpdate(
        //   require("../../../public/img/monitoring/mapviewer/total.png"),
        //   bfHelper.mapViewerCamera[0][0].mapAnchors,
        //   bfHelper.mapViewerCamera[0][0].modelAnchors
        // );
        // 	}
      }
    },
    // 构件点击
    onClick() {
      bfHelper.onClick((data) => {
        if (this.bimModel == 1) {
          for (let i = 0; i < this.ywq.length; i++) {
            for (let j = 0; j < this.ywq[i].walls.length; j++) {
              if (data.objectId == this.ywq[i].walls[j]) {
                getWallRecords(this.ywq[i].code, this.current, this.size).then(
                  (res) => {
                    this.tableClick(res.data.data);
                    bfHelper.cancelSelected();
                  }
                );
              }
            }
          }
        } else {
          for (let i = 0; i < this.tt.length; i++) {
            for (let j = 0; j < this.tt[i].walls.length; j++) {
              if (data.objectId == this.tt[i].walls[j]) {
                getWallRecords(this.tt[i].code, this.current, this.size).then(
                  (res) => {
                    this.tableClick(res.data.data);
                    bfHelper.cancelSelected();
                  }
                );
              }
            }
          }
        }

        // 点击构件的筛选条件
      });
    },
    getWall() {
      getWallLists(this.bimModel).then((res) => {
        this.tableData = res.data.data;
        if (this.bimModel == 1) {
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].status == 90000) {
              bfHelper.setColor(this.colors[1], this.ywq[i].walls);
            } else if (this.tableData[i].status == 90001) {
              bfHelper.setColor(this.colors[0], this.ywq[i].walls);
            } else {
              bfHelper.setFlicker(this.ywq[i].walls, this.colors[2], 500);
            }
          }
        } else {
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].status == 90000) {
              bfHelper.setColor(this.colors[1], this.tt[i].walls);
            } else if (this.tableData[i].status == 90001) {
              // bfHelper.setColor('#0000ff', this.tt[i].walls);
              bfHelper.setColor(this.colors[0], this.tt[i].walls);
            } else {
              bfHelper.setFlicker(this.tt[i].walls, this.colors[2], 500);
            }
          }
        }

        this.total = res.data.data.total;
      });
    },
    getWallGK() {
      getWallGK(this.bimModel).then((res) => {
        this.listData = res.data.data;
        for (let i = 0; i < this.listData.systemWarnEquipList.length; i++) {
          this.listData.systemWarnEquipList[i].showAlert = false;
        }
        for (let i = 0; i < this.listData.safeWarnEquipList.length; i++) {
          this.listData.safeWarnEquipList[i].showAlert = false;
        }
      });
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getWall();
    },
    // 表格某行被点击
    tableClick(row, column, event) {
      this.bjClick(row);
    },
    bjClick(row) {
      bfHelper.clearTags();
      if (this.bimModel == 1) {
        for (let i = 0; i < this.ywq.length; i++) {
          bfHelper.restoreColor(this.ywq[i].walls);
          if (this.tableData[i].status == 90000) {
            bfHelper.setColor(this.colors[1], this.ywq[i].walls);
          } else if (this.tableData[i].status == 90001) {
            bfHelper.setColor(this.colors[0], this.ywq[i].walls);
          } else {
            bfHelper.setFlicker(this.ywq[i].walls, this.colors[2], 500);
          }
          if (row.code == this.ywq[i].code) {
            let zb = bfHelper.getBoxMessage(this.ywq[i].walls[0], true);
            if (zb == "undefined") {
              return;
            }
            // 设置构色
            bfHelper.setColor("#07e6ed", this.ywq[i].walls);
            let position = zb.max;
            bfHelper.customTag(
              position,
              null,
              this.getWallContent(
                row.status,
                row.status == 9000 ? "正常" : "离线",
                row.name,
                row.location,
                row.warnContent ? row.warnContent : row.warnMsg,
                row.warnDate ? row.warnDate : row.warnTime
              )
            );
            // bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(this.ywq[i].walls[0]));
          }
        }
      } else {
        for (let i = 0; i < this.tt.length; i++) {
          bfHelper.restoreColor(this.tt[i].walls);
          if (this.tableData[i].status == 90000) {
            bfHelper.setColor(this.colors[1], this.tt[i].walls);
          } else if (this.tableData[i].status == 90001) {
            bfHelper.setColor(this.colors[0], this.tt[i].walls);
          } else {
            bfHelper.setFlicker(this.tt[i].walls, this.colors[2], 500);
          }
          if (row.code == this.tt[i].code) {
            let zb = bfHelper.getBoxMessage(this.tt[i].walls[0], true);
            if (zb == "undefined") {
              return;
            }
            // 设置构色
            bfHelper.setColor("#07e6ed", this.tt[i].walls);
            let position = zb.max;

            bfHelper.customTag(
              position,
              null,
              this.getWallContent(
                row.status,
                row.status == 9000 ? "正常" : "离线",
                row.name,
                row.location,
                row.warnContent ? row.warnContent : row.warnMsg,
                row.warnDate ? row.warnDate : row.warnTime
              )
            );
            // bfHelper.zoomToBoundingBox(bfHelper.getBoxMessage(this.ywq[i].walls[0]));
          }
        }
      }
    },
    // 获取报警信息
    getBjxx() {
      // 模型恢复全部状态
      bfHelper.resetStatus(2);
      bfHelper.lookEquipmentCop("电子围界");
    },
    getWallContent(status, statusName, name, location, warnMsg, warnTime) {
      let content = `<div class="leadTips" style="transform: translateY(-72px);">
						<div style="display: flex;width:max-content">
							<img  src="${require(status == 90000
        ? "../../../public/img/monitoring/electricity/customTag1.png"
        : 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(status == 90000
            ? "../../../public/img/monitoring/electricity/customTag1-1.png"
            : 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;">${name}</span>
								</div>	
								<div style="margin-top: 5px;box-sizing: border-box;color: #ffffff;width: 185px;padding: 0 15px;background-color: ${status == 90000
          ? "rgba(30, 57, 102, 0.8)"
          : "rgba(96, 96, 96, 0.8)"
        };">	
									<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
										<span style="opacity: 0.5;font-size: 12px;">设备状态:</span>
										<span style="font-size: 13px;">${statusName}</span>
									</div>	
									<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
										<span style="opacity: 0.5;font-size: 12px;">所在位置:</span>
										<span style="font-size: 13px;">${location}</span>
									</div>	
									<div style="padding: 5px 0;display:${status == 90000 ? "none" : "flex"
        } ;align-items: center;justify-content: space-between;">
										<span style="opacity: 0.5;font-size: 12px;">报警信息:</span>
										<span style="font-size: 13px;">${warnMsg}</span>
									</div>	
									<div style="padding: 5px 0;display:${status == 90000 ? "none" : "flex"
        } ;align-items: center;justify-content: space-between;">
										<span style="opacity: 0.5;font-size: 12px;">报警时间:</span>
										<span style="font-size: 13px;">${warnTime ? warnTime.substring(5, 16) : ""
        }</span>
									</div>
								</div>	
							</div>
						</div>	
					</div>`;
      return content;
    },
  },
};
</script>

<style scoped lang="scss">
.switch {
  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;
  right: 40px;

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

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

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

  .kt-border {
    position: absolute;
  }

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

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

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

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

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

// 设备概况
.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);
      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);
      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);
      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: 127px;
      display: inline-block;
      text-align: center;
    }

    .lx {
      // padding-left: 146px;
      // color: red;
      color: #ec9b28;
    }

    .bj {
      color: red;
    }
  }

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

    .tab_one {
      cursor: pointer;
    }

    .tab_two {
      margin-left: 20px;
    }

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

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

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

    &.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: 160px;
    width: 345px;
    margin: auto;
    overflow: hidden;

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

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

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