<template>
  <!-- 暖 -->
  <div v-if="warmState && bimModel == 1" class="warm">
    <clickCp :bimModel="bimModel" sbType="暖" ref="clickcp"></clickCp>
    <div class="mapDom" style="
          position: absolute;
          left: 105px;
          top: 210px;
          width: 250px;
          height: 180px;
          margin: 45px auto;
        " v-if="bimModel == 1"></div>
    <!-- 返回主视角 -->
    <backHome :bimModel="bimModel" type="暖" :modelIds="warmModel" dom=".mapDom"></backHome>
    <div class="mode_box">
      当前模式：<span class="mode_txt" :style="{
        background:
          mode == '1'
            ? '#06e6ed'
            : mode == '2'
              ? '#f9cc88'
              : mode == '0'
                ? '#bfbfbf'
                : '',
      }">{{ mode == "1" ? "夏" : mode == "2" ? "冬" : "关" }}</span>
    </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/warmIcon.png" />
          <span class="tit1">本月用量</span>
          <span class="use">{{ curWarm.heatOnMonth }}</span>
          <span class="unit">MJ</span>
          <span class="tit2">较上月</span>
          <img v-if="curWarm.compare > 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: curWarm.compare > 0 ? '#ff8b2e' : '#2cd52c' }" class="use-unit">{{
            (curWarm.compare + "").substring((curWarm.compare + "").indexOf(".")).length > 3 ? curWarm.compare.toFixed(2) : Math.abs(curWarm.compare)
          }}MJ</span>
        </div>
      </div>
      <!-- 底部 -->
      <div class="down flex">
        <!-- 饼图 -->
        <div class="pie" id="warmPie"></div>
        <!-- 热量表用热情况 -->
        <div class="towerUse tataitower">
          <div class="floorele" v-for="(item, index) in curWarm.heatList" :key="index" :style="{
            backgroundImage:
              'url(' +
              require(item.status == 90000
                ? '../../../public/img/monitoring/electricity/warmbgblue.png'
                : item.status == 90001
                  ? '../../../public/img/monitoring/electricity/warmbggray.png'
                  : '../../../public/img/monitoring/electricity/warmbgred.png') +
              ')',
          }">
            <div class="warm-block-left">
              <div class="warm-data-num" :style="{
                color:
                  item.status == 90000
                    ? 'white'
                    : item.status == 90001
                      ? '#9d9d9d'
                      : 'red',
              }">
                {{ item.value == "" ? 0 : item.value }}
              </div>
              <span>较上月</span>
            </div>
            <div class="warm-block-right">
              <div class="warm-data-num" :style="{
                color:
                  item.status == 90000
                    ? '#06e6ed'
                    : item.status == 90001
                      ? '#9d9d9d'
                      : 'red',
              }">
                {{ item.heatName }}
              </div>
              <div class="warm-data-compare">
                <img v-if="item.compare > 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.compare > 0 ? '#ff8b2e' : '#2cd52c' }" class="use-unit">{{
                  (item.monthBasis + "").substring((item.monthBasis + "").indexOf(".")) > 2 ? item.monthBasis.toFixed(2) : Math.abs(item.monthBasis)
                }}%</span>
              </div>
            </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/warmIcon.png" />
          <span class="tit1">历史用量统计</span>
          <span class="tit2">单位(MJ)</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="box2">
      <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' }">
          <!-- <span>系统报警 <span class="circle"></span> <span>(4)</span></span> -->
          <el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</span>
        </div>
        <div class="tab_one tab_two" @click="clickAlarm(2)" :style="{ color: activeTab == 2 ? '#07E6ED' : '#fff' }">
          <el-badge :is-dot="isSafe" class="item">告警事件</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEventWarnMumber }})</span>
        </div>
        <!-- <div class="tab_one tab_two" @click="clickAlarm(2)" :style="{color: isSafe ? 'red' :'#fff'}"><el-badge :is-dot='isSafe' class="item">安全报警</el-badge><span style="margin-left:5px;vertical-align: bottom;">({{safeTotal}})</span></div> -->
      </div>
      <div class="flex-center tit">
        <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>
      <vue-seamless-scroll v-else :class-option="classOption"
        :data="activeTab == 1 ? listData.warnEquipList : listData.warnEventList" class="warp">
        <div class="item flex-center" @mouseenter="showAlarkAlert(item, index, 0)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 0)" v-for="(item, index) in listData.warnEquipList" :key="index"
          v-if="activeTab == 1">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.homepageShow == 1">|</span>
            <p v-if="item.homepageShow == 1" @click="doCancelWarn(item.id)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>关闭告警</span>
            </p>
          </div>
          <div class="box flex-center" style="color: red">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.status == 90001" />
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
              <span class="message" v-text="item.name" :style="{
                color:
                  item.status == 90000
                    ? 'white'
                    : item.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }"></span>
            </div>
            <span class="data" :style="{
              color:
                item.status == 90000
                  ? 'white'
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnContent }}</span>
            <span class="time" :style="{
              color:
                item.status == 90000
                  ? 'white'
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
        <div v-if="activeTab == 2" class="item flex-center" v-for="(item, index) in listData.warnEventList"
          @mouseenter="showAlarkAlert(item, index, 1)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 1)" :key="'warnEvent' + index">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.homepageShow == 1">|</span>
            <p v-if="item.homepageShow == 1" @click="doCancelWarn(item.id)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>关闭告警</span>
            </p>
          </div>
          <div class="box flex-center" style="color: red">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" />
              <span class="message" v-text="item.name" :style="{
                color:
                  item.status == 90000
                    ? 'white'
                    : item.status == 90001
                      ? '#a5bbe5'
                      : '#ff0000',
              }"></span>
            </div>
            <span class="data" :style="{
              color:
                item.status == 90000
                  ? 'white'
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnContent }}</span>
            <span class="time" :style="{
              color:
                item.status == 90000
                  ? 'white'
                  : item.status == 90001
                    ? '#a5bbe5'
                    : '#ff0000',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
      </vue-seamless-scroll>
      <div style="
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 345px;
            text-align: right;
            color: rgb(7, 230, 237);
            font-size: 14px;
            cursor: pointer;
          ">
        <span @click="goMoreWarnList">查看报警详情</span>
      </div>
    </div>
    <!-- 设备列表 -->
    <div class="tab">
      <div class="title flex-center">
        <img src="../../../public/img/monitoring/electricity/listIcon3.png" />
        <span>设备列表</span>
      </div>
      <div class="tabBox">
        <el-table :data="tableData.slice((current - 1) * size, current * size)" style="width: 100%; max-height: 210px"
          @row-click="tableClick">
          <el-table-column label="设备名称" align="left" min-width="120px">
            <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="|" width="10"></el-table-column>
          <el-table-column label="设备位置" width="100">
            <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="|" width="10"></el-table-column>
          <el-table-column label="设备状态" width="80px">
            <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="size"
          layout="total, prev, pager, next" :total="tableData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as bfHelper from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import clickCp from "./clickCp";
import echarts from "./echarts1";
import {
  // 业务区
  getYwqWarmLeft, //本月用热情况
  getYwqWarmRight, //历史用热统计
  getWarmMode,
  getWarmSblb,
  // getWarmGK,
  getWarmMeterData,
  getHeatWarnList, //告警列表
  getCancelWarn, //关闭报警
} from "@/api/garden/monitoring";
import backHome from "./backHome";
export default {
  props: {
    warmState: {
      type: Boolean,
    },
    bimModel: {
      type: Number,
    },
  },
  components: {
    echarts,
    backHome,
    clickCp,
  },
  data() {
    return {
      xData: [],
      yData: [],
      curWarm: {
        heatOnMonth: 100,
        compare: 2111,

        firstWarmModel: 10,
        secondWarmModel: 15,
        thirdWarmModel: 20,
        forthWarmModel: 6,
        fifthWarmModel: 9,
        sixthWarmModel: 8,
        seventhWarmModel: 20,
        eighthWarmModel: 12,
        heatList: [],
      }, //本月用热
      historyWarm: {
        sumBuildingSum: 100,
        firstBuildingSum: 10,
        secondBuildingSum: 20,
        thirdBuildingSum: 5,
        forthBuildingSum: 18,
        fivthBuildingSum: 17,
        sixthBuildingSum: 30,
        time: ["06-07", "06-08", "06-09", "06-10", "06-11", "06-12"],
        sumBuilding: [0, 0, 0, 0, 0, 0],
        firstBuilding: [0, 0, 0, 0, 0, 0],
        secondBuilding: [0, 0, 0, 0, 0, 0],
        thirdBuilding: [0, 0, 0, 0, 0, 0],
        forthBuilding: [0, 0, 0, 0, 0, 0],
        fivthBuilding: [0, 0, 0, 0, 0, 0],
        sixthBuilding: [0, 0, 0, 0, 0, 0],
      }, //历史用热统计
      type: 2, //日/月
      value1: [], //选择日期
      tower: null,
      layer: null,
      current: 1,
      size: 5,
      total: 0,
      listData: {},
      warmModel: [
        "10000753440674.2917898",
        "10000752822816.1085784",
        "10000753566194.1425573",
        "10000753466346.2829522",
        "10000753466346.2829482",
        "10000752830259.2426206",
        "10000752830313.1909430",
        "10000753566194.1425741",
      ],
      mode: "",
      tableData: [],
      activeTab: 1,
      classOption: {
        step: 0.3,
      }, //报警信息轮播速度配置
    };
  },
  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) {
        if (newval) {
          // 模型恢复全部状态
          bfHelper.resetStatus(2);
          bfHelper.extObjMngClear(); //清除外部构件
          console.log('bfstate',newval)
          if (newval == 1) {
            // 滚轮设置透明度

            if (this.bimModel == 1) {
              window.sessionStorage.setItem(
                "camera",
                JSON.stringify(bfHelper.getCameraStatus())
              ); //存储相机视角
              // 查看管线
              let build = sessionStorage.getItem("build");
              let floor = sessionStorage.getItem("floor");
              if (build) {
                //如果是单楼层加载
                if (build == 10) {
                  //如果是地下室
                  setTimeout(() => {
                    this.setTowerWarm("07");
                    this.$refs.clickcp.active = 26;
                    this.$refs.clickcp.tower = 9;
                  }, 300);

                  bfHelper.lookPipeline2(
                    bfHelper.equipmentCondition[1],
                    bfHelper.equipmentCopColors[1],
                    build - 1,
                    null,
                    "暖",
                    bfHelper.equipmentCondition2[4]
                  );
                  // bfHelper.setCameraStatus(bfHelper.cameraPosition[6]);
                } else if (build == 26) {
                  //园区
                  setTimeout(() => {
                    this.setTowerWarm();
                  }, 300);
                  bfHelper.lookEquipmentCop("暖");
                  bfHelper.setOpacityFun();
                  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 {
                  if (floor.indexOf("undefined") == -1) {
                    //如果是单楼加载
                    setTimeout(() => {
                      this.setTowerWarm("0" + build, "0" + floor);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        Number(floor)
                      );
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);
                    bfHelper.lookPipeline2(
                      bfHelper.equipmentCondition[2],
                      bfHelper.equipmentCopColors[2],
                      build - 1,
                      floor,
                      "暖",
                      bfHelper.equipmentCondition2[4]
                    );
                  } else {
                    //单层加载
                    setTimeout(() => {
                      this.setTowerWarm("0" + build);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        null
                      );
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);
                    bfHelper.lookPipeline2(
                      bfHelper.equipmentCondition[1],
                      bfHelper.equipmentCopColors[1],
                      build - 1,
                      null,
                      "暖",
                      bfHelper.equipmentCondition2[4]
                    );
                    // bfHelper.setCameraStatus(bfHelper.cameraPosition[build - 1]);
                  }
                }
              } else {
                //整体加载
                bfHelper.lookEquipmentCop("暖");
                bfHelper.setOpacityFun();
                this.getNavigationMap();
              }
            } else {
            }
          } else {
          }
        }
      },
    },
  },
  created() { },
  beforeDestroy() {
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
  },
  mounted() {
    this.getData();
    this.getNavigationMap();
  },
  methods: {
    //关闭告警 - 重新查询告警列表
    doCancelWarn(id) {
      getCancelWarn(id).then((res) => {
        this.getHeatWarnList();
      });
    },
    //跳转历史告警列表
    goMoreWarnList() {
      // this.$router.push({ path: '/equipment/warnHistory' });
      const routerUrl = this.$router.resolve({
        path: "/equipment/warnHistory",
        query: { classCode: "0300", area: this.bimModel },
      });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getHeatWarnList() {
      getHeatWarnList({
        area: this.bimModel,
        build: this.tower ? this.tower : "",
        floor: this.layer ? this.layer : "",
      }).then((res) => {
        this.listData = res.data.data;
        for (let i = 0; i < this.listData.warnEquipList.length; i++) {
          this.listData.warnEquipList[i].showAlert = false;
        }
        for (let i = 0; i < this.listData.warnEventList.length; i++) {
          this.listData.warnEventList[i].showAlert = false;
        }
      });
    },
    showAlarkAlert(item, index, key) {
      //鼠标悬停在设备概况列表里出现查看详情和关闭告警
      item.showAlert = true;
      if (key == 0) {
        this.listData.warnEquipList.splice(index, 1, item);
      } else {
        this.listData.warnEventList.splice(index, 1, item);
      }
    },
    closeAlarkAlert(item, index, key) {
      item.showAlert = false;
      if (key == 0) {
        this.listData.warnEquipList.splice(index, 1, item);
      } else {
        this.listData.warnEventList.splice(index, 1, item);
      }
    },
    getData() {
      if (this.bimModel == 1) {
        this.getHistoryWarm(); //历史用热统计
        this.getCurWarm(); //本月用热
        this.getMode(); //模式
        // this.getWarmLists(); //获取热量表列表 20230317bim加载状态监听内执行
        // this.getWarmGK(); //获取热量表概况
        // this.getHeatWarnList(); //告警列表 20230317bim加载状态监听内执行
      }
    },
    clickAlarm(item) {
      //切换报警类型
      this.activeTab = item;
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getWarmLists(); //获取热量表列表
    },
    getMode() {
      //模式
      getWarmMode().then((res) => {
        this.mode = res.data.data.dictValue;
      });
    },
    getWarmLists() {
      //设备列表
      getWarmSblb(
        1,
        this.tower ? this.tower : "",
        this.layer ? this.layer : ""
      ).then((res) => {
        this.tableData = res.data.data;
        let idArr = [];
        let onList = []; //在线列表
        let offList = []; //离线列表
        let alarmList = []; //报警列表
        for (let i = 0; i < this.tableData.length; i++) {
          let id = bfHelper.disposeId(
            this.tableData[i].area,
            this.tableData[i].build,
            this.tableData[i].modelId
          );
          idArr.push(id);
          if (this.tableData[i].status == 90000) {
            onList.push(id);
          } else if (this.tableData[i].status == 90001) {
            offList.push(id);
          } else {
            alarmList.push(id);
          }
        }
        bfHelper.setColor("#2cd52c", onList);
        bfHelper.setColor("#9d9d9d", offList);
        bfHelper.setFlicker(alarmList, "#ff0000", 100);
        this.total = res.data.data.total;
        this.warmModel = idArr;
        this.addLabel();
      });
    },
    // getWarmGK() { //获取暖概况
    // 	getWarmGK(this.bimModel, this.tower ? this.tower : '', this.layer ? this.layer : '').then(res => {
    // 		this.listData = res.data.data;
    // 		for (let i = 0; i < this.listData.systemWarnEquipList.length; i++) {
    // 			this.listData.systemWarnEquipList[i].showAlert = false
    // 		}
    // 		for (let i = 0; i < this.listData.safeWarnEquipList.length; i++) {
    // 			this.listData.safeWarnEquipList[i].showAlert = false
    // 		}
    // 	})
    // },
    getNavigationMap() {
      //初始化时的鹰眼图
      commonValue.getNavigationMap("warm");
    },
    setTowerWarm(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.tower = i;
      this.layer = j;
      this.getWarmLists();
      // this.getWarmGK()
      this.getHeatWarnList();
      commonValue.getUpdateMap("warm", i, j);
    },
    // 表格某行被点击
    tableClick(row, column, event) {
      this.bjClick(row);
    },
    // 点击报警信息定位到指定设备
    bjClick(item) {
      if (item.modelId == "") {
      } else {
        this.tower = item.build;
        this.layer = item.floored;
        bfHelper.clearDrawableContainer();
        let id = bfHelper.disposeId(item.area, item.build, item.modelId);
        console.log('bjclick',id)
        bfHelper.customTag(
          bfHelper.getBoxMessage(id, true).max,
          null,
          this.warmContent(
            id,
            item.status,
            item.name,
            item.location,
            item.status == 90001 ? "离线" : "在线",
            item.dataNum
          )
        );
        this.$refs.clickcp.active = commonValue.activeValue(
          Number(item.build),
          Number(item.floored)
        );
        this.$refs.clickcp.tower = commonValue.towerValue(item.build);
        let camera = bfHelper.cameraPosition[Number(item.build) - 1];
        window.sessionStorage.setItem("camera", JSON.stringify(camera));
        bfHelper.mapUpdate(
          require("../../../public/img/monitoring/mapviewer/warm" +
            Number(item.build) +
            "b" +
            Number(item.floored) +
            "f.png"),
          bfHelper.mapViewerCamera[Number(item.build) - 1][
            Number(item.floored) - 1
          ].mapAnchors,
          bfHelper.mapViewerCamera[Number(item.build) - 1][
            Number(item.floored) - 1
          ].modelAnchors
        );

        bfHelper.lookPipeline2(
          bfHelper.equipmentCondition[2],
          bfHelper.equipmentCopColors[2],
          Number(item.build) - 1,
          Number(item.floored),
          "暖",
          bfHelper.equipmentCondition2[4]
        );
        bfHelper.setOpacityFun(false);
      }
    },
    addLabel() {
      //添加热量表的标签
      this.labelContent();
      window.addEventListener("click", (e) => {
        //监听事件
        if (e.target.id.indexOf("heatmeter") != -1) {
          //点击热量表的标签变成信息标签
          let position = bfHelper.getBoxMessage(
            e.target.id.substring(9),
            true
          ).max;
          getWarmMeterData(this.bimModel, e.target.id.substring(24)).then(
            (res) => {
              const data = res.data.data;
              let content = this.warmContent(
                e.target.id.substring(9),
                data.status,
                data.name,
                data.location,
                data.statusName,
                data.dataNum
              );
              bfHelper.clearTags();
              bfHelper.customTag(position, null, content);
              let boundingBox = bfHelper.getBoxMessage(
                e.target.id.substring(9)
              );
              bfHelper.zoomToBoundingBox(boundingBox, 30);
            }
          );
        }
        if (e.target.id.indexOf("warmclosecha") != -1) {
          //点击关闭按钮切换回图标标签
          bfHelper.clearTags();
          this.labelContent();
        }
      });
    },
    warmContent(id, type, name, location, statusName, dataNum) {
      //热量表标签显示信息
      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="warmclosecha${id}"/>
								<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
            ? "#9d9d9d"
            : "red"
        }">${statusName}</span>
										</div>	
										<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
											<span style="opacity: 0.5;font-size: 12px;">设备位置:</span>
											<span style="font-size: 13px;color:${type == 90000
          ? "white"
          : type == 90001
            ? "#9d9d9d"
            : "red"
        }">${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: space-between;">
												<span style="opacity: 0.5;font-size: 12px;">累计流量:</span>
											</div>	
											<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
												
												<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}</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;
    },
    warmContent1(id, status) {
      //图标标签显示内容
      let content1 = `<div class="leadTips"  style="transform: translateY(-40px);">
						<div  style="display: flex;width:max-content">
							<img id='heatmeter${id}' class = 'montorImg' src="${require(status == 90000
        ? "../../../public/img/monitoring/electricity/warm-normal.png"
        : status == 90001
          ? "../../../public/img/monitoring/electricity/warm-off.png"
          : "../../../public/img/monitoring/electricity/warm-alarm.png")}" style="width:40px;height:40px;"/>
						</div>	
					</div>`;
      return content1;
    },
    labelContent() {
      //初始化时显示所有热量表标签
      for (let i = 0; i < this.tableData.length; i++) {
        let id = bfHelper.disposeId(
          this.tableData[i].area,
          this.tableData[i].build,
          this.tableData[i].modelId
        );
        // console.log(id,bfHelper.getBoxMessage(id))
        let zb = bfHelper.getBoxMessage(id, true).max;
        bfHelper.customTag(
          zb,
          null,
          this.warmContent1(id, this.tableData[i].status)
        );
      }
    },
    // 获取本月用热
    getCurWarm() {
      getYwqWarmLeft().then((res) => {
        let tmp = res.data.data.heatOnTimeList;
        tmp.map((item) => {
          item.heatName.replace("号楼", "#");
          this.yData.push({
            value: item.value == "" ? 0 : item.value,
            name: item.heatName.replace("号楼", "#"),
            type: item.heatName.replace("号楼", "#"),
          });
        });
        tmp.map((item) => this.xData.push(item.heatName));
        this.curWarm.heatList = tmp;
        for (let i = 0; i < this.curWarm.heatList.length; i++) {
          this.curWarm.heatList[i].heatName = this.curWarm.heatList[
            i
          ].heatName.replace("#", "#\r\n");
          // console.log(this.curWarm.heatList[i].heatName)
        }
        this.curWarm.heatOnMonth = res.data.data.heatOnTime.value;
        this.curWarm.compare =
          res.data.data.heatOnTime.value - res.data.data.heatOnTime.preValue;

        this.warmPie();
      });
    },
    // 获取历史用热统计
    getHistoryWarm() {
      getYwqWarmRight(this.value1[0], this.value1[1], this.type).then((res) => {
        // console.log(res)
        this.historyWarm = res.data.data;
        for (let i = 0; i < this.historyWarm.time.length; i++) {
          this.historyWarm.time[i] = this.historyWarm.time[i].substring(5);
        }
        this.$refs.echarts.echartsFun3(this.historyWarm);
      });
    },
    // 切换日月
    selectBim(i) {
      this.type = i;
      this.getHistoryWarm();
    },
    // 点击查询
    queryBtn() {
      this.getHistoryWarm();
    },

    // 本月用暖饼图
    warmPie() {
      var colorList = [
        "#0055FF",
        "#6369FF",
        "#0089E6",
        "#00A88F",
        "#E88B41",
        "#D2B210",
        "#61c394",
        "#8ab4fe",
      ];
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("warmPie"));
      // 绘制图表
      myChart.setOption(
        {
          title: [
            {
              text: this.curWarm.heatOnMonth,
              top: "30%",
              left: "center",
              textStyle: {
                fontSize: 20,
                fontWeight: "bold",
                color: "#07a7ff",
              },
            },
            {
              text: "kw·h",
              top: "38%",
              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: this.xData,
          },
          series: [
            {
              bottom: "22%",
              name: "用电比例",
              type: "pie",
              radius: ["40%", "60%"],
              color: colorList,
              label: {
                normal: {
                  color: "rgba(255, 255, 255, 1.0)",
                  formatter: "{c}%",
                  show: true,
                },
              },

              data: this.yData,
            },
          ],
        },
        true
      );
    },
  },
};
</script>

<style scoped lang="scss">
.warm {
  .mode_box {
    color: #fff;
    position: absolute;
    top: 2.2rem;
    right: 12.312rem;

    .mode_txt {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      color: #000;
    }
  }

  // 本月用电
  .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;
    bottom: 40px;

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

    // 顶部
    .upTit {
      padding: 0 30px 0 20px;
      margin: 20px 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: 135px;
          height: 106px;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .warm-block-left {
            position: relative;
            height: 100%;
            width: 45%;
            display: flex;
            align-items: center;
            justify-content: center;

            .warm-data-num {
              font-size: 30px;
              font-family: fantasy;
              color: white;
            }

            span {
              color: #9d9d9d;
              font-size: 14px;
              position: absolute;
              bottom: 10px;
              left: 10px;
            }
          }

          .warm-block-right {
            position: relative;
            height: 100%;
            width: 45%;
            display: flex;
            align-items: center;
            justify-content: center;

            .warm-data-num {
              color: #07e6ed;
              font-size: 14px;
            }

            .warm-data-compare {
              position: absolute;
              bottom: 10px;
            }
          }
        }
      }
    }
  }

  // 历史用电
  .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;
        }
      }
    }
  }

  // 设备概况
  .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;

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

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

      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: hidden;

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

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

    .dev_name {
      width: 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;

      /deep/ .el-table {
        background: #1e419d;
      }

      /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/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) {
        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);
      }

      /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>
