<template>
  <!-- 电 -->
  <div v-if="electricityState" class="electricity">
    <!-- 各楼栋楼层切换 -->
    <clickCp :bimModel="bimModel" sbType="电" ref="clickcp"></clickCp>
    <backHome :bimModel="bimModel" type="电" dom=".mapDom"></backHome>
    <div class="mapDom" style="
        position: absolute;
        left: 105px;
        top: 210px;
        width: 250px;
        height: 180px;
        margin: 45px 0;
      " v-if="bimModel == 1"></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>
      <div class="stateName flex-center-center">
        <span class="zc">正常</span>
        <span class="lx">设备告警</span>
      </div>
      <div class="tab_box">
        <div class="tab_one" :style="{ color: isAlarm ? 'red' : '#fff' }">
          <el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</span>
        </div>
      </div>
      <div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''">
        <p>设备名称</p>
        <span>|</span>
        <p>报警信息</p>
        <span>|</span>
        <p>报警时间</p>
      </div>
      <div v-if="
        JSON.stringify(listData) != '{}' && listData.warnEquipList && listData.warnEquipList.length == 0
      " class="noBjxx">
        暂无报警信息
      </div>
      <div v-else class="warp">
        <div class="item flex-center" v-for="(item, index) in listData.warnEquipList" :key="index"
          @mouseenter="showAlarmAlert(item, index)" style="position: relative"
          @mouseleave="closeAlarmAlert(item, index)">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alarm-alert">
            <p @click="bjClick(item)" v-if="item.modelId != ''">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span>
            <p @click="doCancelWarn(item)" v-if="item.confirmStatus == '0'">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span>
            <p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
              <i class="el-icon-refresh-right" style="margin-right:10px;"></i>
              <span>告警恢复</span>
            </p>
          </div>
          <div class="box flex-center" :class="bimModel == 2 ? 'tataicon' : ''">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.warnStatus == 2" />
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
              <span class="message" :style="{ color: item.warnStatus == 2 ? 'white' : 'red' }"
                v-text="item.name"></span>
            </div>
            <span class=""></span>
            <!-- <span class="data" :style="{ color: item.status == 90001 ? '#9D9D9D' : 'red' }">{{ item.status == 90001 ?
                "离线" : "报警"
            }}</span> -->
            <span class="data" :style="{ color: item.warnStatus == 2 ? 'white' : 'red' }">{{ item.warnContent
            }}</span>
            <span class=""></span>
            <span class="time" :style="{ color: item.warnStatus == 2 ? 'white' : 'red' }">{{
                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="instantElectro" v-show="bimModel == 1">
      <!-- 顶部 -->
      <div class="upTit flex-center-between">
        <div class="tit-left flex-center">
          <img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
          <span class="tit1">本月用电</span>
          <span class="use">{{ curElectro.sumBuilding }}</span>
          <span class="unit">kw·h</span>
          <span class="tit2">较上月</span>
          <img v-if="curElectro.sumBuilding > curElectro.sumCompare" class="compare"
            src="../../../public/img/monitoring/electricity/up.png" />
          <img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
          <span :style="{
            color:
              curElectro.sumBuilding > curElectro.sumCompare
                ? '#ff8b2e'
                : '#2cd52c',
          }" class="use-unit">{{
    Math.abs(curElectro.sumBuilding - curElectro.sumCompare).toFixed(
      2
    )
}}kw·h</span>
        </div>
        <div class="tit-right flex-center">
          <div class="box flex-center">
            <div class="color state2"></div>
            <span>本月用电量(kw·h)</span>
          </div>
          <div class="box flex-center">
            <div class="color state3"></div>
            <span>上月用电量(kw·h)</span>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="down flex">
        <!-- 饼图 -->
        <div class="pie" id="electroPie"></div>
        <!-- 楼栋用电情况 -->
        <div class="towerUse flex-center-between">
          <div v-for="(item, index) in electro" class="towerUseBox flex-center">
            <img class="towerIcon" src="../../../public/img/monitoring/electricity/tower.png" />
            <div class="center">
              <div>{{ index + 1 }}#</div>
              <div class="echarts">
                <echartsTwo :ref="'echartsTwo' + index" :chartId="'echartsTwo' + index"></echartsTwo>
              </div>
            </div>
            <div class="right">
              <div>较上月</div>
              <div class="flex-center">
                <img v-if="item.instant > item.ultimo" class="compare"
                  src="../../../public/img/monitoring/electricity/up.png" />
                <img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
                <!-- <img src="../../../public/img/monitoring/electricity/up.png">
								<div class="up">325.91%</div> -->
                <div v-if="item.instant > item.ultimo" class="up">
                  {{ item.compare }}%
                </div>
                <div v-else class="down">{{ item.compare }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 塔台本月用电 -->
    <div class="instantElectro currentEle" v-show="bimModel == 2">
      <!-- 顶部 -->
      <div class="upTit flex-center-between top">
        <div class="tit-left flex-center">
          <img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
          <span class="tit1">本月用电</span>
          <span class="use">{{ curElectro.sumBuilding }}</span>
          <span class="unit">kw·h</span>
          <span class="tit2">较上月</span>
          <img v-if="curElectro.sumBuilding > curElectro.sumCompare" class="compare"
            src="../../../public/img/monitoring/electricity/up.png" />
          <img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
          <span :style="{
            color:
              curElectro.sumBuilding > curElectro.sumCompare
                ? '#ff8b2e'
                : '#2cd52c',
          }" class="use-unit">{{ curElectro.sumBuilding }}kw·h</span>
        </div>
      </div>
      <!-- 底部 -->
      <div class="down flex">
        <!-- 饼图 -->
        <div class="pie" id="tataiElePie"></div>
        <div class="towerUse tataitower">
          <div class="floorele" v-for="(item, index) in floorArray" :key="index">
            <div class="floor_name">{{ item.name }}</div>
            <div class="now_ele">{{ item.nowEle }}</div>
            <div class="com_ele">
              <img v-if="item.nowEle >= item.lastEle" class="compare"
                src="../../../public/img/monitoring/electricity/up.png" />
              <img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
              <span style="margin-left: 5px" :style="{
                color:
                  curElectro.sumBuilding > curElectro.sumCompare
                    ? '#ff8b2e'
                    : '#2cd52c',
              }" class="use-unit">{{ (item.comEle + '').substring('.').length > 2 ? item.comEle.toFixed(2) : item.comEle }}kw·h</span>
            </div>
            <div class="last_ele">
              <span>上月：</span><span>{{ item.lastEle }}kw·h</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 历史用电 -->
    <div class="rightBox" v-show="bimModel == 1">
      <div class="top1 flex-center-between">
        <div class="left flex-center">
          <img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
          <span class="tit1">历史用电统计</span>
          <span class="tit2">单位(kw·h)</span>
        </div>
        <div class="cut flex-center">
          <div @click="selectBim(2)" :class="[type == 2 ? 'active' : '']" class="cut_select left">
            日
          </div>
          <div @click="selectBim(1)" :class="[type == 1 ? 'active' : '']" class="cut_select right">
            月
          </div>
        </div>
      </div>
      <div class="top2 flex-center">
        <div class="time flex-center-center">
          <span>选择日期：</span>
          <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="value1" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <div class="btn" @click="queryBtn">查询</div>
        </div>
      </div>
      <div class="bottom flex-center">
        <div class="right">
          <echarts ref="echarts"></echarts>
        </div>
      </div>
    </div>
    <!-- 塔台历史用电 -->
    <div class="rightBox tataihis" v-show="bimModel == 2">
      <div class="top1 flex-center-between tatai">
        <div class="left flex-center">
          <img class="icon" src="../../../public/img/monitoring/electricity/curIcon.png" />
          <span class="tit1">历史用电统计</span>
          <span class="tit2">单位(kw·h)</span>
        </div>
        <div class="cut flex-center">
          <div @click="selectBim(2)" :class="[type == 2 ? 'active' : '']" class="cut_select left">
            日
          </div>
          <div @click="selectBim(1)" :class="[type == 1 ? 'active' : '']" class="cut_select right">
            月
          </div>
        </div>
      </div>
      <div class="top2 flex-center" :class="bimModel == 2 ? 'selectdata' : ''">
        <div class="time flex-center-center">
          <span>选择日期：</span>
          <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="value1" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <div class="btn" @click="queryBtn">查询</div>
        </div>
      </div>

      <div class="bottom flex-center">
        <div class="right">
          <div class="right_tit">
            <span>总用电量：</span><span style="font-family: fantasy; font-size: 16px; margin-right: 3px">{{ tataiTotal
            }}</span>
            <span>kw·h</span>
          </div>
          <div id="tataiecharts" class="right_echarts"></div>
        </div>
      </div>
    </div>
    <!-- 设备列表 -->
    <div class="tab" :class="bimModel == 2 ? 'tataigen' : ''">
      <div class="title flex-center">
        <div style="display:flex">
          <img src="../../../public/img/monitoring/electricity/listIcon3.png" />
          <span >设备列表</span>
        </div>
        
        <!-- <div class="more_btn" style="margin-right:34px;cursor: pointer;" @click="clickMore">更多</div> -->
      </div>
      <div class="tabBox" id="eletric_box">
        <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 dev_name">
                <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="cursor: pointer">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="|" width="10"> </el-table-column>
          <el-table-column label="电箱位置">
            <template slot-scope="scope">
              <div class="flex-center dev_name">
                <span :style="{
                  color:
                    scope.row.status == 90000
                      ? ''
                      : scope.row.status == 90001
                        ? '#a5bbe5'
                        : '#ff0000',
                }" style="padding-left: 10px; cursor: pointer">{{ scope.row.location }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="|" width="10"> </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 dev_name" style="cursor: pointer">
                {{ scope.row.shortName }}
              </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="5" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="设备详情"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
      :before-close="handleClose">
      <span>设备类型：电力</span>
      <div>
        <div class="title" style="font-size: 18px;padding-bottom: 10px;border-bottom: 1px dashed;margin-top: 10px;">通讯地址</div>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">IP地址：192.168.20.101</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">端口号：502</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">数据偏移量：12</span>
      </div>
      <div>
        <div class="title" style="font-size: 18px;padding-bottom: 10px;border-bottom: 1px dashed;margin-top: 10px;">设备编码</div>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">模型：业务区</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">楼栋：1号楼</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">楼层：01</span>
      </div>
      <div>
        <div class="title" style="font-size: 18px;padding-bottom: 10px;border-bottom: 1px dashed;margin-top: 10px;">基础配置</div>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">编码：10100000001</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">名称：1号楼B1</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">简称：净水器</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">使用时间：净水器</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">具体位置：WH2</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">固定资产编号：</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">维保人：</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">维保电话：</span>
        <span style="display: inline-block;width: 33%;margin: 10px 0;">维保时间：</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import * as bfHelper from '../../util/bfHelper';
import {
  resetStatus,
  extObjMngClear,
  getCameraStatus,
  lookPipeline2,
  equipmentCondition,
  equipmentCopColors,
  equipmentCondition2,
  lookEquipmentCop,
  setOpacityFun,
  TtLookEquipmentCop,
  ttLookPipeline2,
  setOpacityFun1,
  disposeId,
  setColor,
  getBoxMessage,
  customTag,
  onClick,
  getObjectDataById,
  clearDrawableContainer,
  zoomToBoundingBox,
  cameraPosition,
  mapUpdate,
  mapViewerCamera,
  setCameraStatus,
} from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import echarts from "./echarts1";
import echartsTwo from "./echarts2";
import clickCp from "./clickCp";
import backHome from "./backHome";
import {
  // 业务区
  getYwqElectricityLeft, //本月用电
  getYwqElectricityRight, //历史用电统计
  getsbList, //设备列表
  getEquipmentMessage, //点击设备获取设备信息
  getEquipmentState, //获取所有设备的状态
  // 塔台
  getTtElectricityLeft, //本月用电
  getTtElectricityRight, //历史用电统计
  getElectricWarnList, //报警列表
  getCancelWarn,//关闭报警
  recoveryWarn,//恢复告警
} from "@/api/garden/monitoring";
import bfHelperState from "../../store/modules/bfHelperState";
export default {
  props: {
    electricityState: {
      type: Boolean,
    },
    bimModel: {
      type: Number,
    },
  },
  components: {
    echarts,
    echartsTwo,
    clickCp,
    backHome,
  },
  data() {
    return {
      dialogVisible:false,
      current: 1, //当前页
      size: 5, //每页数量
      total: 14, //总条目数
      tableData: [], //设备列表
      tower: null, //当前点击楼号
      layer: null, //当前点击层号
      curElectro: {}, //本月用电
      electro: [], //每号楼用电
      historyElectro: {}, //历史用电统计
      type: 2, //日/月
      value1: [], //选择日期
      listData: { warnEquipList: [] }, //报警信息
      classOption: {
        step: 0.2,
      }, //报警信息轮播速度配置
      isAlarm: false, //是否有故障报警
      alarmTotal: 0, //故障报警总数
      floorArray: [],
      // 南楼用电
      sourthBuilding: [],
      // 北楼用电
      northBuilding: [],
      // 塔楼用电
      towerBuilding: [],
      // 总用电
      sumBuilding: [],
      // 塔台历史用电x轴
      tataiXdata: [],
      // 塔台总用电量
      tataiTotal: "",
      isMapViewer: 0,
      alarmAlert: true, //鼠标悬停在报警列表里查看详情和确认告警是否出现
    };
  },
  created() {
    this.getData();
    
  },
  beforeDestroy() {
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
  },
  mounted() {
    this.getNavigationMap();
    // let dom = document.getElementById('eletric_box');
    // dom.addEventListener('contextmenu', (event)=> {
    //   console.log(event)
    //   event.preventDefault(); // 阻止默认菜单
    //   // const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0100' } });
    //   // window.open(routerUrl.href, "_blank");
    // });
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        this.current = 1; //当前页
        this.total = 0; //总条目数
        if (this.setInterval) {
          clearInterval(this.setInterval);
        }
        this.tower = null;
        this.getData();
      },
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        console.log('bfState',newval)
        if (newval) {
          // 模型恢复全部状态
          resetStatus(2);
          extObjMngClear(); //清除外部构件
          if (newval == 1) {
            // 滚轮设置透明度
            if (this.bimModel == 1) {
              // 查看管线
              window.sessionStorage.setItem(
                "camera",
                JSON.stringify(getCameraStatus())
              );
              //build,floor 浏览器存储是否是单层加载
              let build = sessionStorage.getItem("build");
              let floor = sessionStorage.getItem("floor");
              let type = sessionStorage.getItem('type') ? sessionStorage.getItem('type') : 'build'
               console.log('build =====>',build)
              //如果点击了楼
              if (build) {
                if (build == 10) {
                  //如果点击的是地下室
                  setTimeout(() => {
                    this.setTower("07");
                    this.$refs.clickcp.active = 26;
                    this.$refs.clickcp.area = 1;
                    this.$refs.clickcp.type = 'build';
                    this.$refs.clickcp.tower = 9;
                  }, 300);
                  lookPipeline2(
                    equipmentCondition[0],
                    equipmentCopColors[0],
                    build - 1,
                    null,
                    "电",
                    equipmentCondition2[0]
                  );
                } else if (build == 26) {
                  //如果点击的是园区
                  lookEquipmentCop("电");
                  this.$refs.clickcp.active = 26;
                  this.$refs.clickcp.type = 'build';
                  this.$refs.clickcp.area = 1;
                  this.$refs.clickcp.tower = null;
                  setTimeout(() => {
                    this.setTower();
                  }, 300);

                  setOpacityFun();
                } else {
                  if (floor.indexOf("null") == -1) {
                    //如果点击了层
                    setTimeout(() => {
                      this.setTower("0" + build, "0" + floor);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        Number(floor)
                      );
                      this.$refs.clickcp.area = 1;
                      this.$refs.clickcp.type = 'floor';
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);

                    lookPipeline2(
                      equipmentCondition[0],
                      equipmentCopColors[0],
                      build - 1,
                      floor,
                      "电",
                      equipmentCondition2[0]
                    );
                  } else {
                    //如果点击的是整栋楼
                    setTimeout(() => {
                      this.setTower("0" + build);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        null
                      );
                      this.$refs.clickcp.area = 1;
                      this.$refs.clickcp.type = 'build';
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);
                    lookPipeline2(
                      equipmentCondition[0],
                      equipmentCopColors[0],
                      build - 1,
                      null,
                      "电",
                      equipmentCondition2[0]
                    );
                  }
                }
              } else {
                lookEquipmentCop("电");
                this.$refs.clickcp.area = 1;
                this.$refs.clickcp.type = 'build';
                this.$refs.clickcp.active = 25;
                this.$refs.clickcp.getTypeList(25,'build',1)
                setOpacityFun(false,0.3);
                this.getNavigationMap();
              }
            } else {
              // 查看管线
              window.sessionStorage.setItem(
                "ttcamera",
                JSON.stringify(getCameraStatus())
              );
              let ttbuild = sessionStorage.getItem("ttbuild");
              let tttype = sessionStorage.getItem('tttype') ? sessionStorage.getItem('tttype') : 'build'
              if (ttbuild) {
                if (ttbuild == 20) {
                  //园区
                  TtLookEquipmentCop("电");
                  setTimeout(() => {
                    this.setTower();
                    this.$refs.clickcp.area = 2;
                    this.$refs.clickcp.type = 'build';
                  }, 300);
                } else if (ttbuild == 0) {
                  //塔楼
                  setTimeout(() => {
                    this.setTower("08");
                    this.$refs.clickcp.ttActive = 0;
                    this.$refs.clickcp.area = 2;
                    this.$refs.clickcp.type = 'build';
                  }, 300);
                  ttLookPipeline2(
                    equipmentCondition[0],
                    equipmentCopColors[0],
                    0,
                    "电",
                    equipmentCondition2[0]
                  );
                } else if (ttbuild == 1) {
                  //辅楼1楼
                  setTimeout(() => {
                    this.setTower("09", "01");
                    this.$refs.clickcp.ttActive = 1;
                    this.$refs.clickcp.area = 2;
                    this.$refs.clickcp.type = 'floor';
                  }, 300);
                  ttLookPipeline2(
                    equipmentCondition[0],
                    equipmentCopColors[0],
                    1,
                    "电",
                    equipmentCondition2[0]
                  );
                } else if (ttbuild == 2) {
                  //辅楼1楼
                  setTimeout(() => {
                    this.setTower("09", "02");
                    this.$refs.clickcp.ttActive = 2;
                    this.$refs.clickcp.area = 2;
                    this.$refs.clickcp.type = 'floor';
                  }, 300);
                  ttLookPipeline2(
                    equipmentCondition[0],
                    equipmentCopColors[0],
                    2,
                    "电",
                    equipmentCondition2[0]
                  );
                } else if (ttbuild == 3) {
                  //辅楼整栋
                  setTimeout(() => {
                    this.setTower("09");
                    this.$refs.clickcp.ttActive = 3;
                    this.$refs.clickcp.area = 2;
                    this.$refs.clickcp.type = 'build';
                  }, 300);
                  ttLookPipeline2(
                    equipmentCondition[0],
                    equipmentCopColors[0],
                    3,
                    "电",
                    equipmentCondition2[0]
                  );
                }
              } else {
                TtLookEquipmentCop("电");
                this.$refs.clickcp.active = 20
                this.$refs.clickcp.area = 2;
                this.$refs.clickcp.type = 'build';
                this.$refs.clickcp.getTypeList(20,'build',2);
                setOpacityFun1();
              }
            }
          } else {
          }
        } else {
        }
      },
    },
  },
  methods: {
    // 点击更多按钮
    clickMore(){
      const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0100' } });
      window.open(routerUrl.href, "_blank");
    },
    //确认告警 - 重新查询告警列表
    doCancelWarn(item) {
      getCancelWarn(item.id).then((res) => {
        // this.getElectricWarnList();
        item.confirmStatus = 1;
      })
    },
    //恢复告警
    doRecoveryWarn(item) {
      recoveryWarn(item.id).then((res) => {
        // this.getFiredWarnList();
        item.warnStatus = 2;
      })
    },
    //跳转历史告警列表
    goMoreWarnList() {
      // this.$router.push({ path: '/equipment/warnHistory' });
      const routerUrl = this.$router.resolve({ path: '/equipment/warnHistory', query: { classCode: '0100', area: this.bimModel } });
      window.open(routerUrl.href, "_blank");
    },
    showAlarmAlert(item, index) {
      item.showAlert = true;
      this.listData.warnEquipList.splice(index, 1, item);
    },
    closeAlarmAlert(item, index) {
      item.showAlert = false;
      this.listData.warnEquipList.splice(index, 1, item);
    },
    // 获取所有设备的状态
    getEquipmentState() {
      getEquipmentState(
        this.bimModel,
        this.tower ? this.tower : "",
        this.layer ? this.layer : ""
      ).then((res) => {
        let onList = []; //在线的构件数组
        let offList = []; //离线的构件数组
        let { onlineEquipList, offlineEquipList } = res.data.data;
        for (let i = 0; i < onlineEquipList.length; i++) {
          let id = disposeId(
            onlineEquipList[i].area,
            onlineEquipList[i].build,
            onlineEquipList[i].modelId
          );
          onList.push(id);
        }
        for (let i = 0; i < offlineEquipList.length; i++) {
          let id = disposeId(
            offlineEquipList[i].area,
            offlineEquipList[i].build,
            offlineEquipList[i].modelId
          );
          offList.push(id);
        }
        setColor("#2cd52c", onList); //在线的绿色
        setColor("#9d9d9d", offList); //离线的灰色
      });
    },
    // 表格某行被点击
    tableClick(row, column, event) {
      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)
    },
    // 添加标签
    addLabel(objectId, name, type, location, dataNum,inventarNummer,maintainTime,maintainUser,maintainPhone,maintainDesc) {
      console.log(type)
      // 构件id/设备名称/设备状态/设备位置/累计电量
      // 获取当前点击坐标
      let zb = getBoxMessage(objectId, true);
      // //引线标签的顶点
      let position = zb.max;
      let content = `<div class="leadTips" style="transform: translateY(-72px);">
						<div style="display: flex;width:max-content">
							<img src="${require(type == 90000
        ? "../../../public/img/monitoring/electricity/customTag1.png"
        : "../../../public/img/monitoring/electricity/offline2_2.png")}" style="width:87px;height:53px;"/>
							<div style="margin-top: -42px;">
								<div style="width: 185px;height: 46px;background: url('${require(type == 90000
          ? "../../../public/img/monitoring/electricity/customTag1-1.png"
          : "../../../public/img/monitoring/electricity/offline2.png")}');background-repeat: no-repeat;background-size: cover;
          display: flex;align-items: center;">
									<span style="padding-left: 36px;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: ${type == 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: 15px;">${type == 90000 ? "正常" : "离线"}</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: 15px;">${location}</span>
									</div>	
									<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
										<span style="opacity: 0.5;font-size: 12px;">累计电量(kw·h):</span>
										<span style="font-size: 15px;">${dataNum}</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: 15px;">${inventarNummer ? inventarNummer : ''}</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: 15px;">${maintainUser  ? maintainUser : ''}</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: 15px;">${maintainPhone ? maintainPhone.substring(0, 10) : ''}</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: 15px;">${maintainTime ? maintainTime : ''}</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: 15px;">${maintainDesc ? maintainDesc : ''}</span>
									</div>	
								</div>	
							</div>
						</div>	
					</div>`;
      customTag(position, null, content);
    },
    // 构件点击(暂定不用)
    onClick() {
      onClick((data) => {
        // 点击构件的筛选条件
        let condition = getObjectDataById(data.objectId);
        let arr = equipmentCondition2[0];
        for (let i = 0; i < arr.length; i++) {
          if (
            condition.categoryId == arr[i].categoryId &&
            condition.familyType == arr[i].familyType
          ) {
            getEquipmentMessage(this.bimModel, data.elementId).then((res) => {
              if (res.data.code == 200) {
                for (let i = 0; i < res.data.data.length; i++) {
                  if (data.elementId == res.data.data[i].modelId) {
                    let { name, status, location, dataNum,inventarNummer,maintainTime,maintainUser,maintainPhone,maintainDesc } = res.data.data[i];
                    // 如果当前点击的是电箱  先清除所以标签
                    clearDrawableContainer();
                    this.addLabel(
                      data.objectId,
                      name,
                      status,
                      location,
                      dataNum,
                      inventarNummer,
                      maintainTime,
                      maintainUser,
                      maintainPhone,
                      maintainDesc
                    );
                  }
                }
              }
            });
            return;
          }
        }
      });
    },
    // 获取数据集合
    getData() {
      this.getCurElectro(); //本月用电
      this.getHistoryElectro(); //历史用电统计
      // this.getElectricityBjxx(); //报警信息
      this.getElectricWarnList();
      this.getsbList(); //设备列表
      this.getEquipmentState(); //获取所有设备状态

      this.setInterval = setInterval(() => {
        this.getCurElectro(); //本月用电
        this.getHistoryElectro(); //历史用电统计
        // this.getElectricityBjxx(); //报警信息
        this.getElectricWarnList();
        this.getsbList(); //设备列表
        this.getEquipmentState(); //获取所有设备状态
      }, 3600000);
    },
    // 接收子组件当前点击楼号
    setTower(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.tower = i;
      this.layer = j;
      this.getsbList();
      // this.getElectricityBjxx();
      this.getElectricWarnList();
      if (this.bimModel == 1) {
        commonValue.getUpdateMap("electricity", i, j);
      } else {
      }
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getsbList();
    },
    // 获取设备列表
    getsbList() {
      getsbList(
        this.bimModel,
        this.tower ? this.tower : "",
        this.layer ? this.layer : "",
        this.current,
        this.size
      ).then((res) => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.records;
      });
    },
    // 获取本月用电
    getCurElectro() {
      if (this.bimModel == 1) {
        getYwqElectricityLeft().then((res) => {
          let {
            firstBuilding,
            firstBuildingPre,
            firstCompare,
            secondBuilding,
            secondBuildingPre,
            secondCompare,
            thirdBuilding,
            thirdBuildingPre,
            thirdCompare,
            forthBuilding,
            forthBuildingPre,
            forthCompare,
            fifthBuilding,
            fifthBuildingPre,
            fifthCompare,
            sixthBuilding,
            sixthBuildingPre,
            sixthCompare,
          } = res.data.data;
          this.curElectro = res.data.data;
          this.electro = [
            {
              instant: firstBuilding,
              ultimo: firstBuildingPre,
              compare: firstCompare,
            },
            {
              instant: secondBuilding,
              ultimo: secondBuildingPre,
              compare: secondCompare,
            },
            {
              instant: thirdBuilding,
              ultimo: thirdBuildingPre,
              compare: thirdCompare,
            },
            {
              instant: forthBuilding,
              ultimo: forthBuildingPre,
              compare: forthCompare,
            },
            {
              instant: fifthBuilding,
              ultimo: fifthBuildingPre,
              compare: fifthCompare,
            },
            {
              instant: sixthBuilding,
              ultimo: sixthBuildingPre,
              compare: sixthCompare,
            },
          ];
          this.$nextTick(() => {
            for (let i = 0; i < this.electro.length; i++) {
              this.$refs[`echartsTwo${i}`][0].getData(this.electro[i]);
            }
          });
          this.electroPie();
        });
      } else {
        getTtElectricityLeft().then((res) => {
          this.curElectro = res.data.data;
          this.floorArray = [
            {
              name: "辅楼",
              nowEle: this.curElectro.sourthBuilding,
              comEle: Math.abs(
                this.curElectro.sourthBuilding - this.curElectro.sourthCompare
              ),
              lastEle: this.curElectro.sourthCompare,
              percent:
                (
                  this.curElectro.sourthBuilding / this.curElectro.sumBuilding
                ).toFixed(2) * 100,
            },

            {
              name: "塔楼",
              nowEle: this.curElectro.towerBuilding,
              comEle: Math.abs(
                this.curElectro.towerBuilding - this.curElectro.towerCompare
              ),
              lastEle: this.curElectro.towerCompare,
              percent:
                (
                  this.curElectro.towerBuilding / this.curElectro.sumBuilding
                ).toFixed(2) * 100,
            },
          ];
          this.tataiElePie();
        });
      }
    },
    // 获取历史用电统计
    getHistoryElectro() {
      if (this.bimModel == 1) {
        getYwqElectricityRight(this.value1[0], this.value1[1], this.type).then(
          (res) => {
            this.historyElectro = res.data.data;
            for (let i = 0; i < this.historyElectro.time.length; i++) {
              this.historyElectro.time[i] =
                this.historyElectro.time[i].substring(5);
            }
            this.$refs.echarts.echartsFun(1, this.historyElectro);
          }
        );
      } else {
        getTtElectricityRight(this.value1[0], this.value1[1], this.type).then(
          (res) => {
            this.historyElectro = res.data.data;
            this.sourthBuilding = this.historyElectro.sourthBuilding;
            this.northBuilding = this.historyElectro.northBuilding;
            this.towerBuilding = this.historyElectro.towerBuilding;
            this.sumBuilding = this.historyElectro.sumBuilding;
            this.tataiXdata = this.historyElectro.time;
            for (let i = 0; i < this.tataiXdata.length; i++) {
              this.tataiXdata[i] = this.tataiXdata[i].substring(5);
            }
            this.tataiTotal = this.historyElectro.sumBuildingSum;
            this.createTataihis();
          }
        );
      }
    },
    // 报警信息
    // getElectricityBjxx() {
    //   getBjxx(
    //     this.bimModel,
    //     this.tower ? this.tower : "",
    //     this.layer ? this.layer : ""
    //   ).then((res) => {
    //     this.listData = res.data.data;
    //     for (let i = 0; i < this.listData.offlineEquipList.length; i++) {
    //       this.listData.offlineEquipList[i].showAlert = false;
    //     }
    //   });
    // },
    // 报警记录-20221031改版
    getElectricWarnList() {
      getElectricWarnList({
        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;
        }
      });
    },
    getNavigationMap() {
      commonValue.getNavigationMap("electricity");
    },
    // 切换日月
    selectBim(i) {
      this.type = i;
      this.getHistoryElectro();
    },
    // 点击查询
    queryBtn() {
      this.getHistoryElectro();
    },
    // 点击报警信息定位到指定设备
    bjClick(item) {
      if (this.bimModel == 2) {
        if (item.build == 9) {
          //辅楼
          // this.tower = item.build;
          // this.layer = item.floored;
          clearDrawableContainer();
          let id = "10000722317177.1065480";
          // let id = bfHelper.disposeId(item.area, item.build, item.modelId);
          this.addLabel(
            id,
            item.name,
            item.status,
            item.location,
            item.dataNum
          );
          this.$refs.clickcp.ttActive = Number(item.build);
          ttLookPipeline2(
            equipmentCondition[0],
            equipmentCopColors[0],
            1,
            "电",
            equipmentCondition2[0]
          );
          setOpacityFun1(false);
        } else {
          clearDrawableContainer();
          // let id = bfHelper.disposeId(item.area, item.build, item.modelId);
          let id = "10000722320211.1253524";
          let boundingBox = getBoxMessage(id);
          this.addLabel(
            id,
            item.name,
            item.status,
            item.location,
            item.dataNum,
            item.warnMsg
          );
          zoomToBoundingBox(boundingBox, 40);
        }
      } else {
        if (item.modelId == "") {
          this.$message.error('对不起，暂无该设备模型，请稍后点击')
        } else {
          // 如果当前点击的是电箱  先清除所以标签
          // this.tower = item.build;
          // this.layer = item.floored;
          clearDrawableContainer();
          let id = disposeId(item.area, item.build, item.modelId);
          this.addLabel(
            id,
            item.name,
            item.status,
            item.location,
            item.dataNum
          );
          this.$refs.clickcp.active = commonValue.activeValue(
            Number(item.build),
            Number(item.floored)
          );
          this.$refs.clickcp.tower = commonValue.towerValue(item.build);
          let camera = cameraPosition[Number(item.build) - 1];
          window.sessionStorage.setItem("camera", JSON.stringify(camera));
          mapUpdate(
            require("../../../public/img/monitoring/mapviewer/electricity" +
              Number(item.build) +
              "b" +
              Number(item.floored) +
              "f.png"),
            mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1]
              .mapAnchors,
            mapViewerCamera[Number(item.build) - 1][Number(item.floored) - 1]
              .modelAnchors
          );
          lookPipeline2(
            equipmentCondition[0],
            equipmentCopColors[0],
            Number(item.build) - 1,
            Number(item.floored),
            "电",
            equipmentCondition2[0]
          );
          setOpacityFun(false);
        }
      }
    },

    // 本月用电饼图
    electroPie() {
      var equipment = ["1#", "2#", "3#", "4#", "5#", "6#"];
      var colorList = [
        "#0055FF",
        "#6369FF",
        "#0089E6",
        "#00A88F",
        "#E88B41",
        "#D2B210",
      ];
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("electroPie"));
      // 绘制图表
      myChart.setOption(
        {
          title: [
            {
              text: this.curElectro.sumBuilding,
              top: "35%",
              left: "center",
              textStyle: {
                fontSize: 20,
                fontWeight: "bold",
                color: "#07a7ff",
              },
            },
            {
              text: "kw·h",
              top: "48%",
              left: "center",
              textStyle: {
                fontSize: 14,
                fontWeight: "bold",
                color: "#07a7ff",
              },
            },
          ],
          legend: {
            itemWidth: 11,
            itemHeight: 11,
            itemGap: 7,
            bottom: "5%",
            textStyle: {
              color: "rgba(239, 239, 239, 1.0)",
            },
            data: ["1#", "2#", "3#", "4#", "5#", "6#"],
          },
          series: [
            {
              bottom: "10%",
              name: "用电比例",
              type: "pie",
              radius: ["40%", "60%"],
              color: colorList,
              label: {
                normal: {
                  color: "rgba(255, 255, 255, 1.0)",
                  formatter: "{c}%",
                  show: true,
                },
              },

              data: [
                {
                  value: this.curElectro.firstBuildingPercent,
                  name: "1#",
                  type: equipment[0],
                },
                {
                  value: this.curElectro.secondBuildingPercent,
                  name: "2#",
                  type: equipment[1],
                },
                {
                  value: this.curElectro.thirdBuildingPercent,
                  name: "3#",
                  type: equipment[2],
                },
                {
                  value: this.curElectro.forthBuildingPercent,
                  name: "4#",
                  type: equipment[3],
                },
                {
                  value: this.curElectro.fifthBuildingPercent,
                  name: "5#",
                  type: equipment[4],
                },
                {
                  value: this.curElectro.sixthBuildingPercent,
                  name: "6#",
                  type: equipment[5],
                },
              ],
            },
          ],
        },
        true
      );
    },
    // 塔台本月用电饼图
    tataiElePie() {
      var equipment = ["辅楼", "塔楼"];
      var colorList = ["#6369ff", "#0089e7", "#00a88f"];
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("tataiElePie"));
      myChart.setOption(
        {
          title: [
            {
              text: this.curElectro.sumBuilding,
              top: "35%",
              left: "center",
              textStyle: {
                fontSize: 20,
                fontWeight: "bold",
                color: "#07a7ff",
              },
            },
            {
              text: "kw·h",
              top: "52%",
              left: "center",
              textStyle: {
                fontSize: 14,
                fontWeight: "bold",
                color: "#07a7ff",
              },
            },
          ],
          legend: {
            itemWidth: 11,
            itemHeight: 11,
            itemGap: 7,
            bottom: "0%",
            textStyle: {
              color: "rgba(239, 239, 239, 1.0)",
            },
            data: ["辅楼", "塔楼"],
          },
          series: [
            {
              bottom: "0",
              name: "用电比例",
              type: "pie",
              radius: ["40%", "60%"],

              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                normal: {
                  color: "rgba(255, 255, 255, 1.0)",
                  formatter: "{c}%",
                  show: true,
                },
              },
              data: [
                {
                  value: this.floorArray[0].percent,
                  name: "辅楼",
                  type: equipment[0],
                },
                {
                  value: this.floorArray[1].percent,
                  name: "塔楼",
                  type: equipment[1],
                },
              ],
            },
          ],
        },
        true
      );
    },

    // 塔台历史用电
    createTataihis() {
      let myChart = this.$echarts.init(document.getElementById("tataiecharts"));
      myChart.setOption(
        {
          color: ["#88deff", "#99bfff", "#318fee", "#01f1fc"],
          legend: {
            data: [
              "南楼",
              "北楼",
              "塔楼",
              {
                icon: "circle",
                name: "总量",
              },
            ],
            right: "6%",
            textStyle: {
              color: "#fff",
            },
            itemWidth: 10,
            itemHeight: 10,
          },
          tooltip: {},
          xAxis: {
            data: this.tataiXdata,
            axisLabel: {
              color: "#fff",
              // interval:0
            },
            axisLine: {
              lineStyle: {
                color: "#45617a",
              },
            },
          },
          yAxis: {
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: "#45617a",
              },
            },
          },
          grid: {
            borderWidth: 0,
            top: "25%",
            bottom: "8%",
            left: "6%",
            right: "6%",
            containLabel: true,
          },
          series: [
            {
              name: "南楼",
              type: "bar",
              stack: "value ",
              data: this.sourthBuilding,
            },
            {
              name: "北楼",
              type: "bar",
              stack: "value ",
              data: this.northBuilding,
            },
            {
              name: "塔楼",
              type: "bar",
              stack: "value ",
              data: this.towerBuilding,
            },
            {
              name: "总量",
              type: "line",
              data: this.sumBuilding,
            },
          ],
        },
        true
      );
    },
  },
};
</script>

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

  // 本月用电
  .instantElectro {
    z-index: 99;
    width: 878px;
    height: 292px;
    background: url(../../../public/img/monitoring/electricity/cur.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 96px;
    transition: all 0.5s;
    bottom: 42px;

    // 塔台本月用电
    &.currentEle {
      background: url(../../../public/img/monitoring/electricity/tataibac.png) no-repeat;
      background-size: 100% 100%;
      width: 730px;
    }

    // 顶部
    .upTit {
      padding: 0 30px 0 20px;
      margin: 15px 0;

      &.top {
        margin: 25px 0 15px 0;
      }

      .tit-left {
        .icon {
          width: 15px;
          height: 17px;
        }

        .tit1 {
          margin: 0 5px;
          color: white;
          font-size: 15px;
          font-weight: bold;
        }

        .use {
          margin-top: -10px;
          font-weight: 900;
          line-height: 24px;
          font-size: 30px;
          color: #ff8b2e;
        }

        .unit {
          margin: 0 20px 0 5px;
          font-size: 14px;
          color: #ff8b2e;
        }

        .tit2 {
          font-size: 14px;
          color: #b6b6b6;
        }

        .compare {
          margin: 0 5px;
          width: 16px;
          height: 9px;
        }

        .use-unit {
          font-size: 14px;
        }
      }

      .tit-right {
        color: white;
        margin-top: 20px;
        font-size: 11px;

        .box {
          margin-left: 20px;

          .color {
            margin-right: 5px;
            width: 8px;
            height: 8px;
          }

          .state2 {
            background-color: #2cd52c;
          }

          .state3 {
            background-color: #07a7ff;
          }
        }
      }
    }

    // 底部
    .down {

      // 饼图
      .pie {
        width: 270px;
        height: 210px;
      }

      // 楼栋用电情况
      .towerUse {
        margin-right: 30px;
        margin-left: 15px;
        flex: 1;
        flex-wrap: wrap;

        &.tataitower {
          display: flex;
          align-items: flex-end;
          // justify-content: space-between;
        }

        .floorele {
          width: 121px;
          height: 179px;
          background: url(../../../public/img/monitoring/electricity/floorbac.png) no-repeat;
          background-size: 100% 100%;

          .floor_name {
            padding: 12px 0px;
            text-align: center;
            color: #07e6ed;
            font-size: 14px;
          }

          .now_ele {
            padding: 15px 0px;
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            text-align: center;
          }

          .com_ele {
            padding: 6px 0px;
            text-align: center;
          }

          .last_ele {
            padding: 8px 0;
            font-size: 14px;
            text-align: center;
            color: #b6b6b6;
          }
        }

        .floorele:nth-of-type(2) {
          margin-left: 30px;
        }

        .towerUseBox {
          width: 48%;

          .towerIcon {
            width: 44px;
            height: 44px;
            margin-right: 13px;
          }

          .center {
            color: white;
            font-size: 14px;

            .echarts {
              width: 140px;
              height: 30px;
            }
          }

          .right {
            margin-left: 10px;
            margin-top: 10px;
            font-size: 14px;
            color: #b6b6b6;

            img {
              margin-top: 5px;
              width: 16px;
              height: 9px;
            }

            .up {
              color: #ff8b2e;
            }

            .down {
              color: #2cd52c;
            }
          }
        }
      }
    }
  }

  // 设备概况
  .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;
    transition: all 0.5s;

    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: cover;
        width: 176px;
        height: 78px;
      }

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

      .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: 126px;
        height: 78px;
      }
    }

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

      .lx {
        color: #ec9b28;
      }

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

    .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: #9d9d9d;

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

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

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

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

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

            span {
              color: #1851ab;
            }
          }

          .left {
            width: 33.3%;

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

  // 历史用电
  .rightBox {
    z-index: 99;
    width: 471px;
    height: 291px;
    background: url(../../../public/img/monitoring/electricity/history.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 991px;
    transition: all 0.5s;

    bottom: 42px;

    &.tataihis {
      background: url(../../../public/img/monitoring/electricity/tataihis.png) no-repeat;
      background-size: 100% 100%;
      width: 615px;
      left: 844px;
    }

    .top1 {
      margin: 10px 0;

      &.tatai {
        margin: 15px 0 0 0;
      }

      .left {
        margin-left: 20px;
        color: #ffffff;

        .icon {
          width: 15px;
          height: 17px;
        }

        .tit1 {
          margin: 0 5px;
          font-size: 15px;
        }

        .tit2 {
          font-size: 12px;
        }
      }

      .cut {
        margin-top: 20px;
        padding-right: 30px;
        justify-content: flex-end;
        text-align: center;

        .cut_select {
          font-size: 0.875rem;
          color: #b9d6df;
          width: 2.563rem;
          height: 1.188rem;
          background-color: rgba(31, 49, 99, 0.5);
          border: 0.062rem solid #00bafe;
        }

        .cut_select:hover {
          cursor: pointer;
        }

        .left {
          border-right: none;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }

        .right {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }

        .active {
          color: white;
          // box-shadow: rgb(7, 144, 235) 0px 0px 0.875rem inset;
          background-color: #07a6ff;
        }
      }
    }

    .top2 {
      margin: 20px 0 10px 0;
      font-size: 1.125rem;
      color: #ffffff;

      &.selectdata {
        /deep/ .el-date-editor--daterange.el-input__inner {
          width: 395px !important;
          background: #969db1;
          border-color: #969db1;
        }

        /deep/.el-range-input {
          background: #969db1;
          color: #fff;
        }

        /deep/.el-date-editor .el-range-separator {
          color: #506996;
        }

        .time {
          .btn {
            color: #155eaa;
          }
        }
      }

      .time {
        flex: 1;
        font-size: 0.875rem;
        color: #07e6ed;

        span {
          margin-right: 0.3rem;
          display: block;
        }

        /deep/ .el-date-editor--daterange.el-input__inner {
          width: 260px;
        }

        .btn {
          margin-left: 1rem;
          color: #fff;
          width: 3.375rem;
          height: 1.313rem;
          text-align: center;
          background-color: #07e6ed;
          border-radius: 0.313rem;
          border: 0.063rem solid #07e5ed;
          cursor: pointer;
        }
      }
    }

    .bottom {
      .right {
        flex: 1;
        height: 170px;

        .right_echarts {
          width: 100%;
          height: 100%;
          position: relative;
          top: -20px;
        }

        .right_tit {
          width: 100%;
          position: relative;
          z-index: 1000;
          font-size: 14px;
          color: #07e6ed;
          padding-left: 35px;
        }
      }
    }
  }

  // 设备列表
  .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;
    transition: all 0.8s;

    .dev_name {
      width: 100%;
    }

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

    .title {
      margin: 1rem 0 2rem 1.25rem;
      color: #fff;
      font-size: 15px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;

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

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

      /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: 12rem !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>
