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

<template>
  <!-- 水 -->
  <div v-if="waterState" class="water">
    <!-- 各楼栋楼层切换 -->
    <!-- <clickCp :bimModel="bimModel" sbType="水" ref="clickcp"></clickCp> -->
    <!-- 返回主视角 -->
    <backHome :bimModel="bimModel" type="水" :waterModelOn="onList" :waterModelOff="offList" :waterModelAlarm="bjList"
      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;
        ">
        园区
      </div>
      <div class="mapDom" style="width: 250px; height: 180px; margin-top: 20px"></div>
    </div>
    <!-- 本月用水 -->
    <div class="instantElectro" :style="{
      backgroundImage:
        'url(' +
        require(bimModel == 1
          ? '../../../public/img/monitoring/electricity/cur.png'
          : '../../../public/img/monitoring/electricity/tataibac.png') +
        ')',
    }">
      <!-- 顶部 -->
      <div class="upTit flex-center-between">
        <div class="tit-left flex-center">
          <img class="icon" src="../../../public/img/monitoring/water/waterIcon.png" />
          <span class="tit1">本月用水</span>
          <span class="use">{{ curWater.dataNum }}</span>
          <span class="unit">m³</span>
          <span class="tit2">较上月</span>
          <img v-if="curWater.dataNum - curWater.dataNumPre >= 0" class="compare"
            src="../../../public/img/monitoring/electricity/up.png" />
          <img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
          <span :style="{
            color:
              curWater.dataNum - curWater.dataNumPre >= 0
                ? '#ff8b2e'
                : '#2cd52c',
          }" class="use-unit">{{ Math.abs(curWater.dataNum - curWater.dataNumPre) }}m³</span>
        </div>
      </div>
      <!-- 底部 -->
      <div class="down flex">
        <!-- 饼图 -->
        <div class="pie" id="waterElectroPie"></div>
        <div class="rightMessage flex-center-between" style="justify-content: flex-start">
          <div v-for="(item, index) in curWater.dataList" :key="index" class="messageBox">
            <div class="title">{{ item.name }}</div>
            <div class="num" style="color: white">{{ item.dataNum }}</div>
            <div class="lastMonthNum">上月:{{ item.dataNumPre }}m³</div>
            <div class="lastMonth">较上月</div>
            <div class="flex-center compareLastMonth">
              <img v-if="item.dataNum - item.dataNumPre >= 0" class="compare"
                src="../../../public/img/monitoring/electricity/up.png" />
              <img v-else class="compare" src="../../../public/img/monitoring/electricity/down.png" />
              <span :style="{
                color:
                  item.dataNum - item.dataNumPre >= 0 ? '#ff8b2e' : '#2cd52c',
              }" class="use-unit">{{ Math.abs(item.dataNum - item.dataNumPre) }}m³</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 历史用水 -->
    <div class="rightBox" :style="{
      backgroundImage:
        'url(' +
        require(bimModel == 1
          ? '../../../public/img/monitoring/water/accumulated.png'
          : '../../../public/img/monitoring/electricity/tataihis.png') +
        ')',
    }">
      <div class="top flex-center-between">
        <div class="title flex-center">
          <img class="icon" src="../../../public/img/monitoring/water/waterIcon.png" />
          <span>历史用水统计</span>
          <span class="dw">单位 (m³)</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="bottom flex-center">
        <div v-if="bimModel == 1" class="left">
          <div class="item flex-center" v-for="(item, index) in historyWater">
            <div class="tit" style="font-size: 12px; margin-right: 8px">
              {{ item.name }}
            </div>
            <div class="number">{{ item.dataNum }}m³</div>
          </div>
        </div>
        <div v-else class="left2">
          <div class="item flex-center" v-for="(item, index) in historyWater">
            <div class="tit">{{ item.name }}</div>
            <div class="number">{{ item.dataNum }}m³</div>
          </div>
        </div>
        <div class="rightBox2">
          <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 class="right">
            <echarts ref="echarts"></echarts>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备概况 -->
    <div class="box2" :class="bimModel == 2 ? 'tataigen' : ''">
      <div class="title flex-center">
        <img class="icon" src="../../../public/img/monitoring/electricity/sbIcon.png" />
        <span>设备概况</span>
      </div>
      <div class="state flex-center-center">
        <div class="zc flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.normalEquipNumber }}</span>
        </div>
        <div class="lx flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.warnEquipEquipNumber }}</span>
        </div>
        <div class="bj flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ listData.warnEventEquipNumber }}</span>
        </div>
      </div>
      <div class="stateName flex-center-center">
        <span class="zc span_box">正常</span>
        <span class="lx span_box">设备告警</span>
        <span class="bj span_box">告警事件</span>
      </div>
      <div class="tab_box">
        <div class="tab_one" @click="clickAlarm(1)" :style="{ color: activeTab == 1 ? '#07E6ED' : '#fff' }">
          <el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</span>
        </div>
        <div class="tab_one tab_two" @click="clickAlarm(2)" :style="{ color: activeTab == 2 ? '#07E6ED' : '#fff' }">
          <el-badge :is-dot="isSafe" class="item">告警事件</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEventWarnMumber }})</span>
        </div>
      </div>
      <div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''">
        <p>设备名称</p>
        <p>报警信息</p>
        <p>报警时间</p>
      </div>
      <div v-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEquipList &&
        listData.warnEquipList.length == 0 &&
        activeTab == 1
      " class="noBjxx">
        暂无设备告警信息
      </div>
      <div v-else-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEventList &&
        listData.warnEventList.length == 0 &&
        activeTab == 2
      " class="noBjxx">
        暂无告警事件信息
      </div>
      <div v-else class="warp">
        <div v-if="activeTab == 1" class="item flex-center" v-for="(item, index) in listData.warnEquipList"
          :key="'warnEquip_' + index" @mouseenter="showAlarkAlert(item, index, 0)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 0)">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)" v-if="item.modelId != ''">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span>
            <p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span>
            <p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
              <i class="el-icon-refresh-right" style="margin-right:10px;"></i>
              <span>告警恢复</span>
            </p>
          </div>
          <div class="box flex-center" :class="bimModel == 2 ? 'tataicon' : ''">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.warnStatus == 2" />
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
              <span class="message" :style="{ color:  item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }"
                v-text="item.name"></span>
            </div>
            <span class="data" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ item.warnContent
            }}</span>
            <span class="time" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{
                item.warnDate.substring(5, 16)
            }}</span>
          </div>
        </div>
        <div v-else class="item flex-center" v-for="(item, index) in listData.warnEventList" :key="'warnEvent+' + index"
          @mouseenter="showAlarkAlert(item, index, 1)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 1)">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)" v-if="item.modelId != ''">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span>
            <p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span>
            <p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
              <i class="el-icon-refresh-right" style="margin-right:10px;"></i>
              <span>告警恢复</span>
            </p>
          </div>
          <div class="box flex-center">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.warnStatus == 2" />
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
              <span class="message" v-text="item.name"
                :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }"></span>
            </div>
            <span class="data" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{ item.warnContent
            }}</span>
            <span class="time" :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff000' : 'white', }">{{
                item.warnDate.substring(5, 16)
            }}</span>
          </div>
        </div>
      </div>
      <div style="
          position: absolute;
          bottom: 10px;
          right: 10px;
          width: 345px;
          text-align: right;
          color: rgb(7, 230, 237);
          font-size: 14px;
          cursor: pointer;
        ">
        <span @click="goMoreWarnList">查看报警详情</span>
      </div>
    </div>
    <!-- 设备列表 -->
    <div class="tab" :class="bimModel == 2 ? 'tataigen' : ''" >
      <div class="title flex-center">
        <img src="../../../public/img/monitoring/electricity/listIcon3.png" />
        <span id="water_box">设备列表</span>
      </div>
      <div class="tabBox">
        <el-table @row-click="tableClick" :data="tableData" style="width: 100%" height="230px" @row-contextmenu="tableContext"
          :class="bimModel == 2 ? 'tataitab' : ''">
          <el-table-column label="设备名称" width="130">
            <template slot-scope="scope">
              <div class="flex-center dev_name" style="font-size: 13px; cursor: pointer">
                <img v-if="scope.row.status == 90000" style="margin: 0 6px"
                  src="../../../public/img/monitoring/electricity/listIcon.png" />
                <img v-else-if="scope.row.status == 90001" style="margin: 0 6px"
                  src="../../../public/img/monitoring/electricity/listIcon2.png" />
                <img v-else style="margin: 0 6px" src="../../../public/img/monitoring/electricity/listIcon4.png" />
                <span :style="{
                  color:
                    scope.row.status == 90000
                      ? 'white'
                      : scope.row.status == 90001
                        ? '#a5bbe5'
                        : '#ff0000',
                }">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="设备位置" style="max-width: 180px">
            <template slot-scope="scope">
              <div class="flex-center dev_name" style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  cursor: pointer;
                ">
                <span style="
                    padding-left: 10px;
                    font-size: 13px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  " :style="{
                    color:
                      scope.row.status == 90000
                        ? 'white'
                        : scope.row.status == 90001
                          ? '#a5bbe5'
                          : '#ff0000',
                  }" :title="scope.row.location">{{ scope.row.location }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="设备状态">
            <template slot-scope="scope">
              <div :style="{
                color:
                  scope.row.status == 90000
                    ? 'white'
                    : scope.row.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }" class="flex-center-center" style="font-size: 13px; cursor: pointer">
                {{ scope.row.statusName }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="current" :page-size="5"
          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 echarts from "./echarts1";
import clickCp from "./clickCp";
import {
  // 业务区
  getYwqWaterLeft, //本月用水情况
  getYwqWaterRight, //历史用水统计
  getWaterList,
  getWaterMeterData,
  getWaterWarnList, //报警列表
  getCancelWarn, //关闭报警
  recoveryWarn,//恢复告警
} from "@/api/garden/monitoring";
import backHome from "./backHome";
export default {
  props: {
    waterState: {
      type: Boolean,
    },
    bimModel: {
      type: Number,
    },
  },
  components: {
    echarts,
    clickCp,
    backHome,
  },
  data() {
    return {
      current: 1, //当前页
      size: 5, //每页数量
      total: 14, //总条目数
      tableData: [], //设备列表
      listData: {}, //报警信息
      curWater: {}, //本月用水
      historyWater: {}, //历史用水统计
      type: 2, //日/月
      onLineEquip: null,
      offLineEquip: null,
      value1: [], //选择日期
      tower: null,
      layer: null,
      isAlarm: false, //是否有故障报警
      isSafe: false, //是否有故障报警
      alarmTotal: 0, //故障报警个数
      onList: [], //在线的设备
      offList: [], //离线的设备
      bjList: [], //报警的设备
      activeTab: 1,
    };
  },
  created() {
    this.getData();
  },
  beforeDestroy() {
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
  },
  mounted() {
    let dom = document.getElementById('water_box');
    dom.addEventListener('contextmenu', (event)=> {
      event.preventDefault(); // 阻止默认菜单
      const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0200' } });
      window.open(routerUrl.href, "_blank");
    });
    this.getNavigationMap();
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        if (this.setInterval) {
          clearInterval(this.setInterval);
        }
        this.current = 1; //当前页
        this.total = 0; //总条目数
        this.getData();
      },
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        // 模型恢复全部状态
        bfHelper.resetStatus(2);
        if (newval) {
          if (newval == 1) {
            // 查看管线
            if (this.bimModel == 1) {
              setTimeout(() => {
                this.setTowerWater();
              }, 300)
              bfHelper.lookEquipmentCop("水");
              bfHelper.setOpacityFun();
              this.getNavigationMap();
              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 {
              setTimeout(() => {
                this.setTowerWater();
              }, 300)
              bfHelper.TtLookEquipmentCop("水");
              bfHelper.setOpacityFun1();
              this.getNavigationMap();
              bfHelper.setCameraStatus({
                aspect: 1.889763779527559,
                coordinateSystem: "world",
                far: 454282.4723672335,
                fov: 45,
                name: "persp",
                near: 58.40582500438439,
                position: {
                  x: -49489.96254567479,
                  y: -573828.9828452667,
                  z: 24494.430089748876
                },
                target: {
                  x: -30486.414787489626,
                  y: 324405.89707957854,
                  z: 10522.870646587355
                },
                up: {
                  x: 0.0003288926028793064,
                  y: 0.015545622356942871,
                  z: 0.9998791054198458
                },
                version: 1,
                zoom: 1
              });
              // 查看管线
              // window.sessionStorage.setItem(
              //   "ttcamera",
              //   JSON.stringify(bfHelper.getCameraStatus())
              // );
              // let ttbuild = sessionStorage.getItem("ttbuild");
              // if (ttbuild) {
              //   if (ttbuild == 20) {
              //     //园区
              //     bfHelper.TtLookEquipmentCop("水");
              //     setTimeout(() => {
              //       this.setTowerWater();
              //     }, 300);
              //   } else if (ttbuild == 0) {
              //     //塔楼
              //     setTimeout(() => {
              //       this.setTowerWater("08");
              //       this.$refs.clickcp.ttActive = 0;
              //     }, 300);
              //     bfHelper.ttLookPipeline2(
              //       bfHelper.equipmentCondition[1],
              //       bfHelper.equipmentCopColors[1],
              //       0,
              //       "水",
              //       bfHelper.equipmentCondition2[3]
              //     );
              //   } else if (ttbuild == 1) {
              //     //辅楼1楼
              //     setTimeout(() => {
              //       this.setTowerWater("09", "01");
              //       this.$refs.clickcp.ttActive = 1;
              //     }, 300);
              //     bfHelper.ttLookPipeline2(
              //       bfHelper.equipmentCondition[1],
              //       bfHelper.equipmentCopColors[1],
              //       1,
              //       "水",
              //       bfHelper.equipmentCondition2[3]
              //     );
              //   } else if (ttbuild == 2) {
              //     //辅楼1楼
              //     setTimeout(() => {
              //       this.setTowerWater("09", "02");
              //       this.$refs.clickcp.ttActive = 2;
              //     }, 300);
              //     bfHelper.ttLookPipeline2(
              //       bfHelper.equipmentCondition[1],
              //       bfHelper.equipmentCopColors[1],
              //       2,
              //       "水",
              //       bfHelper.equipmentCondition2[3]
              //     );
              //   } else if (ttbuild == 3) {
              //     //辅楼1楼
              //     setTimeout(() => {
              //       this.setTowerWater("09");
              //       this.$refs.clickcp.ttActive = 3;
              //     }, 300);
              //     bfHelper.ttLookPipeline2(
              //       bfHelper.equipmentCondition[1],
              //       bfHelper.equipmentCopColors[1],
              //       3,
              //       "水",
              //       bfHelper.equipmentCondition2[3]
              //     );
              //   }
              // } else {
              //   // 查看管线
              //   bfHelper.TtLookEquipmentCop("水");
              //   bfHelper.setOpacityFun1();
              // }
            }
          }
        }
      },
    },
  },
  beforeDestroy() { },
  methods: {
    //确认告警 - 重新查询告警列表
    doCancelWarn(item) {
      getCancelWarn(item.id).then((res) => {
        // this.getWaterWarnList();
        item.confirmStatus = 1;
      });
    },
    //恢复告警
    doRecoveryWarn(item) {
      recoveryWarn(item.id).then((res) => {
        item.warnStatus = 2;
      })
    },
    //跳转历史告警列表
    goMoreWarnList() {
      // this.$router.push({ path: '/equipment/warnHistory' });
      const routerUrl = this.$router.resolve({
        path: "/equipment/warnHistory",
        query: { classCode: "0200", area: this.bimModel },
      });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getWaterWarnList() {
      getWaterWarnList({
        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.warnEventList.splice(index, 1, item);
      } else {
        this.listData.warnEquipList.splice(index, 1, item);
      }
    },
    closeAlarkAlert(item, index, key) {
      item.showAlert = false;
      if (key == 0) {
        this.listData.warnEventList.splice(index, 1, item);
      } else {
        this.listData.warnEquipList.splice(index, 1, item);
      }
    },
    clickAlarm(item) {
      this.activeTab = item;
    },
    getNavigationMap() {
      commonValue.getNavigationMap("water");
    },
    // 获取数据集合
    getData() {
      this.getCurWater(); //本月用水
      this.getHistoryWater(); //历史用水统计
      this.getEquipList();
      this.getWaterWarnList(); //告警列表
      if (this.setInterval) {
        clearInterval(this.setInterval);
      }
      this.setInterval = setInterval(() => {
        this.getCurWater(); //本月用水
        this.getHistoryWater(); //历史用水统计
        this.getEquipList();
        this.getWaterWarnList(); //告警列表
      }, 3600000);
    },
    // 接收子组件当前点击楼号
    setTowerWater(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.tower = i; //楼
      this.layer = j; //层
      this.getEquipList(); //设备列表和设备状况
      this.getWaterWarnList(); //告警列表
      if (this.bimModel == 1) {
        commonValue.getUpdateMap("water", i, j);
      }
    },
    onClick() {
      bfHelper.onClick((data) => {
        for (let i = 0; i < this.tableData.length; i++) {
          if (data.elementId == this.tableData[i].modelId) {
            let id = bfHelper.disposeId(
              this.bimModel,
              this.tableData[i].build,
              this.tableData[i].modelId
            );
            this.addLabel(
              id,
              this.tableData[i].name,
              this.tableData[i].status,
              this.tableData[i].location,
              this.tableData[i].dataNum,
              this.tableData[i].status == 90001 ? "离线" : "正常"
            );
          }
        }
      });
    },

    // 表格某行被点击
    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)
    },
    addWaterLabel() {
      //添加水表标签
      setTimeout(() => {
        this.addWaterLabelContent();
      }, 300);
      let bgImg1 = require("../../../public/img/monitoring/electricity/customTag1-1.png");
      let bgImg2 = require("../../../public/img/monitoring/electricity/offline2.png");
      let bgImg3 = require("../../../public/img/monitoring/electricity/customTag3-1.png");
      let lineImg1 = require("../../../public/img/monitoring/electricity/customTag1.png");
      let lineImg2 = require("../../../public/img/monitoring/electricity/offline2_2.png");
      let lineImg3 = require("../../../public/img/monitoring/electricity/customTag3.png");
      window.addEventListener("click", (e) => {
        if (e.target.id.indexOf("watermeter") != -1) {
          let position = bfHelper.getBoxMessage(
            e.target.id.substring(10),
            true
          ).max;
          getWaterMeterData(this.bimModel, e.target.id.substring(25)).then(
            (res) => {
              const data = res.data.data;
              let content;
              if (data.status == 90000) {
                //正常状态
                content = this.labelContent(
                  bgImg1,
                  lineImg1,
                  e.target.id.substring(10),
                  data.status,
                  data.name,
                  data.location,
                  "正常",
                  data.dataNum
                );
              } else if (data.status == 90001) {
                //离线状态
                content = this.labelContent(
                  bgImg2,
                  lineImg2,
                  e.target.id.substring(10),
                  data.status,
                  data.name,
                  data.location,
                  "离线",
                  data.dataNum
                );
              } else {
                //离线状态
                content = this.labelContent(
                  bgImg3,
                  lineImg3,
                  e.target.id.substring(10),
                  data.status,
                  data.name,
                  data.location,
                  "离线",
                  data.dataNum
                );
              }
              bfHelper.clearTags();
              bfHelper.customTag(position, null, content);
              let boundingBox = bfHelper.getBoxMessage(
                e.target.id.substring(10)
              );
              bfHelper.zoomToBoundingBox(boundingBox, 20);
              // bfHelper.zoomToBoundingBox(boundingBox,2);
            }
          );
        }
        if (e.target.id.indexOf("waterclosecha") != -1) {
          bfHelper.clearTags();
          this.addWaterLabelContent();
        }
      });
    },
    addWaterLabelContent() {
      let img1 = require("../../../public/img/monitoring/electricity/water-normal.png");
      let img2 = require("../../../public/img/monitoring/electricity/water-off.png");
      let img3 = require("../../../public/img/monitoring/electricity/water-alarm.png");
      for (let i = 0; i < this.onList.length; i++) {
        let zb = bfHelper.getBoxMessage(this.onList[i], true).max;
        bfHelper.customTag(zb, null, this.labelContent1(img1, this.onList[i]));
      }
      for (let j = 0; j < this.offList.length; j++) {
        let zb = bfHelper.getBoxMessage(this.offList[j], true).max;
        if (this.offList[j])
          bfHelper.customTag(
            zb,
            null,
            this.labelContent1(img2, this.offList[j])
          );
      }
      for (let k = 0; k < this.bjList.length; k++) {
        let zb = bfHelper.getBoxMessage(this.bjList[k], true).max;
        if (this.bjList[k])
          bfHelper.customTag(
            zb,
            null,
            this.labelContent1(img3, this.bjList[k])
          );
      }
    },
    labelContent(img, img1, id, type, name, location, msg, dataNum) {
      //图标标签
      // console.log(msg)
      let content = `<div class="leadTips" style="transform: translateY(-72px);">
						<div style="display: flex;width:max-content;position:relative">
							<img src="${require("../../../public/img/monitoring/closecha.png")}" style="position:absolute;top:-73px;right:0;width:27px;" id="waterclosecha${id}"/>
							<img src="${img1}" style="width:87px;height:53px;"/>
							<div style="margin-top: -42px;">
								<div style="width: 185px;height: 46px;background: url('${img}');">
									<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: ${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: 13px;color:${type == 90000 ? "white" : type == 90001 ? "silver" : "red"
        }">${msg}</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="display:${type == 90000 ? "flex" : "none"
        };justify-content: space-between;" >
										<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;">
											<span style="opacity: 0.5;font-size: 12px;">累计流量:</span>
										</div>	
										<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;">
											<div style="position:relative;width: 52px;height: 63px;background: url('${require("../../../public/img/monitoring/water/bpBg.png")}');">
												<div style="position:absolute;left: 50%;top: 50%;transform: translate(-50%, -40%);">
													<div style="width:100%;text-align: center;color: #e48a1f;font-size: 18px;">${dataNum == "" ? "0" : dataNum
        }</div>
													<div style="opacity: 0.6;color: #ffffff;font-size: 12px;text-align:center">m³</div>
												</div>
											</div>
										</div>
									</div>
																		
								</div>	
							</div>
						</div>	
					</div>`;
      return content;
    },
    labelContent1(img, id) {
      //图标标签
      let content = `<div class="leadTips"  style="transform: translateY(-40px);">
						<div  style="display: flex;width:max-content">
							<img id='watermeter${id}' class = 'montorImg' src="${img}" style="width:35px;height:35px;"/>
						</div>	
					</div>`;
      return content;
    },
    // 添加标签
    addLabel(objectId, name, type, location, statusName, dataNum, msg) {
      // 构件id/设备名称/设备状态/设备位置/累计电量
      // bfHelper.setColor('#ff761a',[objectId])
      // 获取当前点击坐标
      let zb = bfHelper.getBoxMessage(objectId, true);
      // console.log(bfHelper.getBoxMessage('10000730045680.1088835', true))
      //引线标签的顶点
      let position = {
        x: zb.max.x,
        y: zb.max.y,
        z: zb.max.z,
      };

      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"
        : type == 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(type == 90000
            ? "../../../public/img/monitoring/electricity/customTag1-1.png"
            : type == 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: ${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: 13px;color:${type == 90000 ? "white" : type == 90001 ? "silver" : "red"
        }">${statusName ? statusName : msg}</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="display:${type == 90000 ? "flex" : "none"
        };justify-content: space-between;">
										<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;">
											<span style="opacity: 0.5;font-size: 12px;">累计流量:</span>
										</div>	
										<div style="padding: 5px 0;display: flex;align-items: center;justify-content: center;">
											<div style="position:relative;width: 52px;height: 63px;background: url('${require("../../../public/img/monitoring/water/bpBg.png")}');">
												<div style="position:absolute;left: 50%;top: 50%;transform: translate(-50%, -40%);">
													<div style="width:100%;text-align: center;color: #e48a1f;font-size: 18px;">${dataNum == "" ? "0" : dataNum
        }</div>
													<div style="opacity: 0.6;color: #ffffff;font-size: 12px;text-align:center">m³</div>
												</div>
											</div>
										</div>
									</div>
																		
								</div>	
							</div>
						</div>	
					</div>`;
      bfHelper.customTag(position, null, content);
    },
    // 点击报警信息定位到指定设备
    bjClick(item) {
      // console.log(item)
      // 如果当前点击的是电箱  先清除所以标签
      bfHelper.clearDrawableContainer();
      let id = bfHelper.disposeId(item.area, item.build, item.modelId);
      let boundingBox = bfHelper.getBoxMessage(id);
      this.addLabel(
        id,
        item.name,
        item.status,
        item.location,
        item.status == 90000 ? "正常" : "离线",
        item.dataNum,
        item.warnContent
      );
      bfHelper.zoomToBoundingBox(boundingBox, 20);
    },
    // 本月用电饼图
    electroPie() {
      // var equipment = ['水表1', '水表2', '水表3'];
      var colorList = ["#00A88F", "#E88B41", "#D2B210"];
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("waterElectroPie")
      );
      let valueList = [];
      let lengendList = [];
      for (let i = 0; i < this.curWater.dataList.length; i++) {
        valueList.push({
          value: this.curWater.dataList[i].percent,
          name: this.curWater.dataList[i].name,
          color: colorList[i],
          // type:equipment[index]
        });
        lengendList.push(this.curWater.dataList[i].name);
      }
      // 绘制图表
      myChart.setOption(
        {
          title: [
            {
              text: this.curWater.dataNum,
              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: 15,
            bottom: "0%",
            textStyle: {
              color: "rgba(239, 239, 239, 1.0)",
            },
            data: lengendList,
          },
          series: [
            {
              // bottom: "25%",
              name: "用水比例",
              type: "pie",
              radius: ["40%", "60%"],
              color: colorList,
              label: {
                normal: {
                  color: "rgba(255, 255, 255, 1.0)",
                  formatter: "{c}%",
                  show: true,
                },
              },

              data: valueList,
            },
          ],
        },
        true
      );
    },
    // 添加水表外部构件
    addSb() {
      if (this.bimModel == 1) {
        // 添加水表外部构件
        bfHelper.addExternalComponent("东给水", "static/db.fbx").then(() => {
          // 设置外部构件的位置
          bfHelper.setExternalComponentPosition(
            "东给水",
            227756.72450015348,
            101732.21079541274,
            -3611.907097377562
          );
          // 设置外部构件的缩放
          bfHelper.setExternalComponentScale("东给水", 5, 5, 5);

          bfHelper.render();
        });
      }
    },
    // 获取本月用水
    getCurWater() {
      getYwqWaterLeft(this.bimModel).then((res) => {
        this.curWater = res.data.data;
        this.electroPie();
      });
    },
    getEquipList() {
      //设备列表和设备概况
      getWaterList(this.bimModel).then((res) => {
        this.tableData = res.data.data.normalEquipList
          .concat(res.data.data.safeWarnEquipList)
          .concat(res.data.data.systemWarnEquipList);
        let onlineEquipList = res.data.data.normalEquipList;
        let offlineEquipList = res.data.data.safeWarnEquipList.concat(
          res.data.data.systemWarnEquipList
        );
        let onList = []; //在线的构件数组
        let offList = []; //离线的构件数组
        let bjList = []; //离线的构件数组
        for (let i = 0; i < onlineEquipList.length; i++) {
          if (onlineEquipList[i].modelId) {
            let id = bfHelper.disposeId(
              onlineEquipList[i].area,
              onlineEquipList[i].build,
              onlineEquipList[i].modelId
            );
            onList.push(id);
          }
        }
        for (let j = 0; j < offlineEquipList.length; j++) {
          if (offlineEquipList[j].modelId) {
            let id = bfHelper.disposeId(
              offlineEquipList[j].area,
              offlineEquipList[j].build,
              offlineEquipList[j].modelId
            );
            if (offlineEquipList[j].status == 90001) {
              offList.push(id);
            } else {
              bjList.push(id);
            }
          }
        }
        this.onList = onList;
        this.offList = offList;
        this.bjList = bjList;
        bfHelper.setColor("#2cd52c", onList);
        bfHelper.setColor("#9d9d9d", offList);
        bfHelper.setFlicker(bjList, "#ff0000", 100);
        this.addWaterLabel();
      });
    },
    // 获取历史用水统计
    getHistoryWater() {
      let startTime = "";
      let endTime = "";
      if (this.value1.length != 0) {
        startTime = this.value1[0];
        endTime = this.value1[1];
      }
      getYwqWaterRight(this.bimModel, startTime, endTime, this.type).then(
        (res) => {
          this.historyWater = res.data.data.dataList;
          for (let i = 0; i < this.historyWater.length; i++) {
            for (let j = 0; j < this.historyWater[i].xaxis.length; j++) {
              this.historyWater[i].xaxis[j] =
                this.historyWater[i].xaxis[j].substring(5);
            }
          }
          this.$refs.echarts.echartsFun2(this.bimModel, this.historyWater);
        }
      );
    },
    // 切换日月
    selectBim(i) {
      this.type = i;
      this.getHistoryWater();
    },
    // 点击查询
    queryBtn() {
      this.getHistoryWater();
    },
  },
};
</script>

<style scoped lang="scss">
.color1 {
  color: #d81e06;
}

.color2 {
  color: #22ee65;
}

.water {

  // 本月用电
  .instantElectro {
    z-index: 99;
    width: 677px;
    height: 291px;
    // background: url() no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 42px;
    left: 96px;

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

      .tit-left {
        .icon {
          width: 12px;
          height: 16px;
        }

        .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: #2cd52c;
        }

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

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

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

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

    // 底部
    .down {

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

      .rightMessage {
        flex: 1;
        padding-right: 20px;

        .messageBox {
          width: 119px;
          height: 186px;
          background-image: url(../../../public/img/monitoring/water/waterBg1.png);
          background-size: 100% 100%;

          div {
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .title {
            margin: 16px 0 13px;
            font-size: 14px;
            color: #00eeff;
          }

          .num {
            font-weight: bold;
            font-size: 32px;
          }

          .lastMonthNum {
            margin: 4px 0 20px;
            font-size: 12px;
            color: #b6b6b6;
          }

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

          .compareLastMonth {
            font-size: 14px;
            color: #2cd52c;

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

  // 历史用电
  .rightBox {
    z-index: 99;
    width: 661px;
    height: 291px;
    // background: url(../../../public/img/monitoring/water/accumulated.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 800px;
    bottom: 42px;

    .top {
      padding: 0 36px 0 20px;
      margin-top: 5px;
      font-size: 1.125rem;
      color: #ffffff;

      .title {
        .icon {
          width: 12px;
          height: 16px;
        }

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

        .dw {
          font-size: 12px;
          margin-left: 3px;
        }
      }

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

        .cut_select {
          font-size: 0.875rem;
          width: 2.563rem;
          height: 1.188rem;
          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;
          background-color: #07a6ff;
        }
      }
    }

    .bottom {
      margin-top: 15px;

      .left {
        margin: 0 0 0 25px;

        .item {
          margin-bottom: 1rem;
          background-color: rgba(7, 230, 237, 0.1);
          position: relative;
          width: 150px;
          height: 35px;

          .tit {
            text-align: center;
            width: 60%;
            font-size: 0.875rem;
            color: #07e6ed;
          }

          .number {
            text-align: left;
            width: 40%;
            font-size: 0.75rem;
            color: #eafeff;
          }
        }

        .item:first-child .number {
          font-size: 0.875rem;
        }

        .item::before {
          content: "";
          position: absolute;
          width: 0.188rem;
          height: 100%;
          background-color: #1af3fd;
          left: -0.438rem;
          top: 0;
        }
      }

      .left2 {
        margin: 0 0 0 25px;

        .item {
          margin-bottom: 2rem;
          background-color: rgba(7, 230, 237, 0.1);
          position: relative;
          width: 10.938rem;
          height: 2.188rem;

          .tit {
            text-align: center;
            width: 60%;
            font-size: 0.875rem;
            color: #07e6ed;
          }

          .number {
            text-align: left;
            width: 40%;
            font-size: 0.75rem;
            color: #eafeff;
          }
        }

        .item:first-child .number {
          font-size: 0.875rem;
        }

        .item::before {
          content: "";
          position: absolute;
          width: 0.188rem;
          height: 100%;
          background-color: #1af3fd;
          left: -0.438rem;
          top: 0;
        }
      }

      .rightBox2 {
        .time {
          flex: 1;
          font-size: 0.875rem;
          color: #07e6ed;
          margin-bottom: 10px;

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

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

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

        .right {
          width: 510px;
          height: 170px;
        }
      }
    }
  }

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

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

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

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

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

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

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

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

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

      .lx {
        color: #ec9b28;
      }

      .bj {
        // padding-left: 146px;
        color: #d34951;
      }
    }

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

      .tab_one {
        cursor: pointer;
      }

      .tab_two {
        margin-left: 20px;
      }

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

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

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

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

        span {
          color: #1851ab;
        }
      }

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

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

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

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

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

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

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

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

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

            span {
              color: #1851ab;
            }
          }

          .left {
            width: 33.3%;

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

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

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

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

      .item:hover {
        cursor: pointer;
      }
    }

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

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

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

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

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

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

      .dev_name {
        width: 100%;
      }

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

      /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;
        // color: #9d9d9d;
      }

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

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

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

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

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

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

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

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

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

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