<template>
  <!-- 空调 -->
  <div class="light">
    <!-- 各楼栋楼层切换 -->
    <clickCp :bimModel="bimModel" sbType="空调" ref="clickcp"></clickCp>
    <!-- 返回主视角 -->
    <backHome :bimModel="bimModel" type="空调"></backHome>
    <div class="mapDom" style="
        position: absolute;
        left: 105px;
        top: 210px;
        width: 250px;
        height: 180px;
        margin: 45px auto;
      "></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">{{
            normalTotal
          }}</span>
        </div>
        <div class="lx flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ warnEquip }}</span>
        </div>
      </div>
      <div class="stateName flex-center-center">
        <span class="zc">正常</span>
        <span class="lx">设备告警</span>
      </div>
      <div class="tab_box">
        <div class="tab_one" @click="clickAlarm(1)" :style="{ color: isAlarm ? 'red' : '#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">({{ equipWarn }})</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" :class="bimModel == 2 ? 'tataitit' : ''">
        <p>设备名称</p>
        <span>|</span>
        <p>报警信息</p>
        <span>|</span>
        <p>报警时间</p>
      </div>
      <div v-if="listData.length == 0" class="noBjxx">暂无故障报警信息</div>
      <div class="warp">
        <div class="item flex-center" v-for="(item, index) in listData" :key="index" style="position: relative"
          @mouseenter="showAlarkAlert(item, index)" @mouseleave="closeAlarkAlert(item, index)">
          <div v-if="item.confirmStatus == '0'" @click="doCancelWarn(item.id)"
            :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p>
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.confirmStatus == '0' && item.warnStatus == 1">|</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" style="justify-content: space-around" :class="bimModel == 2 ? 'tataicon' : ''">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.warnStatus == '2'" />
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
              <span class="message" v-text="item.name" :style="{
                color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
              }" :title="item.name"></span>
            </div>
            <span></span>
            <span class="data" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }" :title="item.warnContent">{{ item.warnContent }}</span>
            <span class=""></span>
            <span class="time"
              :style="{ color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : '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 v-if="bimModel == 1" class="switch">
      <div class="title flex-center">
        <!-- <img src="../../../public/img/monitoring/sblb.png" /> -->
        <img src="../../../public/img/monitoring/electricity/listIcon3.png" />
        <span id="condi_box">设备列表</span>
      </div>
      <!-- <div class="select flex-center-between">
				<span class="name">设备位置</span>
				<el-select v-model="build" placeholder="请选择">
					<el-option v-for="(item,key) in devices" :key="key" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
				<span class="btn" @click="searchDevice" style="cursor: pointer;">查询</span>
			</div> -->
      <div class="tabBox">
        <el-table :data="tableData" style="width: 100%; max-height: 220px" @row-contextmenu="tableContext">
          <el-table-column label="设备名称" min-width="100px" style="cursor: pointer">
            <template slot-scope="scope">
              <div class="flex-center-center" @click="clickConditions(scope.row)" style="cursor: pointer">
                <img v-if="scope.row.open == 1" style="margin-right: 6px"
                  src="../../../public/img/monitoring/electricity/listIcon.png" />
                <img v-else style="margin-right: 6px" src="../../../public/img/monitoring/electricity/listIcon2.png" />
                <!--<img v-else style="margin-right: 6px;" src="../../../public/img/monitoring/gz.png"> -->
                <!-- <marquee behavior="scroll" direction="left" style="width: 30px;">{{scope.row.name}}</marquee> -->
                <span :style="{ color: scope.row.open == 1 ? 'white' : '#9d9d9d' }">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="|" width="5"></el-table-column>
          <el-table-column label="温度(实际/设定)" style="cursor: pointer">
            <template slot-scope="scope">
              <span @click="clickConditions(scope.row)" style="cursor: pointer"
                :style="{ color: scope.row.open == 1 ? 'white' : '#9d9d9d' }">{{ scope.row.temCur ? scope.row.temCur :
                  "--"
                }}℃/{{
  scope.row.temSetting ? scope.row.temSetting : "--"
}}℃</span>
            </template>
          </el-table-column>
          <el-table-column label="|" width="5"></el-table-column>
          <el-table-column label="楼层" width="100" style="cursor: pointer">
            <template slot-scope="scope">
              <span @click="clickConditions(scope.row)" style="cursor: pointer"
                :style="{ color: scope.row.open == 1 ? 'white' : '#9d9d9d' }">{{
                  Number(scope.row.build) +
                  "号楼" +
                  Number(scope.row.floored) +
                  "层"
                }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="设备状态" style="cursor: pointer;">
						<template slot-scope="scope">
							<span @click="clickConditions(scope.row)" style="cursor: pointer;"
								:style="{color:scope.row.open == 1?'white':'#9d9d9d'}">{{scope.row.open == 1?'开启':'关闭'}}</span>
						</template>
					</el-table-column> -->
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination :pager-count="4" background @current-change="handleCurrentChange" :current-page.sync="current"
          :page-size="size" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
      <!-- <div class="box">
				<span>空开1</span>
				<el-switch @change="switchChange1" v-model="value1" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</div>
			<div class="box">
				<span>空开5</span>
				<el-switch @change="switchChange2" v-model="value2" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</div> -->
    </div>
    <div v-if="bimModel == 1 && isControl" class="tab_control">
      <div class="title flex-center">
        <img src="../../../public/img/monitoring/electricity/kt-control.png" />
        <span>空调控制</span>
        <!-- {{testObject1.name}} -->
      </div>
      <div class="flex-center-between" style="padding: 0 1rem">
        <div class="open-txt">
          {{ testObject1.name }}
          <!-- <span v-if="testObject1.funcCat == 1">{{
            testObject1.mode == 0
            ? "通风"
            : testObject1.mode == 1
              ? "制热"
              : "制冷"
          }}</span> -->
          <span v-if="testObject1.funcCat == 3">{{
            testObject1.mode == 0
            ? "内机制热"
            : testObject1.mode == 1
              ? "内机地暖同时制热"
              : testObject1.mode == 2
                ? "地暖制热"
                : testObject1.mode == 3
                  ? "制冷"
                  : testObject1.mode == 9
                    ? "通风"
                    : ""
          }}</span>
        </div>
        <div>
          <img style="width: 44px; height: 22px" v-if="testObject1.open == 1"
            src="../../../public/img/monitoring/open.png" @click="closeCondition" />
          <img style="width: 44px; height: 22px" v-if="testObject1.open == 2 || testObject1.open == 0"
            src="../../../public/img/monitoring/off.png" @click="openCondition" />
        </div>
      </div>
      <div class="conditios-block" v-if="testObject1.open == 1">
        <div class="conditios-block-temper" v-if="testObject1.mode == 0 || testObject1.mode == 9"
          style="justify-content: center">
          <img src="../../../public/img/monitoring/electricity/green-wind.png" alt="" />
        </div>
        <div class="conditios-block-temper" v-else>
          <img src="../../../public/img/monitoring/electricity/jian.png" alt="" @click="descreaseTemper" />
          <span><span style="font-size: 40px; font-family: fantasy">{{
            testObject1.temSetting
          }}</span>℃</span>
          <img src="../../../public/img/monitoring/electricity/jia.png" alt="" @click="plusTemper" />
        </div>
        <div class="conditios-block-temper1">
          <div class="conditios-block-temper1-left">
            <img src="../../../public/img/monitoring/electricity/wendu.png" alt="" />
            室内温度：
            <span>{{ testObject1.temCur }}℃</span>
          </div>
          <div class="conditios-block-temper1-right">
            <img src="../../../public/img/monitoring/electricity/wind-line.png" alt="" />
            当前风速：
            <span v-if="testObject1.funcCat == 1">{{
              testObject1.speed == 0
              ? "低速"
              : testObject1.speed == 1
                ? "中速"
                : testObject1.speed == 2
                  ? "高速"
                  : "自动"
            }}</span>
            <span v-if="testObject1.funcCat == 3">{{
              testObject1.speed == 1
              ? "低速"
              : testObject1.speed == 2
                ? "中速"
                : testObject1.speed == 3
                  ? "高速"
                  : "自动"
            }}</span>
          </div>
        </div>
      </div>
      <div class="conditios-block" v-if="testObject1.open == 2 || testObject1.open == 0">
        <div class="conditios-block-temper" v-if="testObject1.mode == 0 || testObject1.mode == 9"
          style="justify-content: center">
          <img src="../../../public/img/monitoring/electricity/gray-wind.png" alt="" />
        </div>
        <div class="conditios-block-temper" v-else>
          <img src="../../../public/img/monitoring/electricity/gray-jian.png" alt="" @click="descreaseTemper" />
          <span style="color: #7da0d1"><span style="font-size: 40px; font-family: fantasy">{{
            testObject1.temSetting
          }}</span>℃</span>
          <img src="../../../public/img/monitoring/electricity/gray-jia.png" alt="" @click="plusTemper" />
        </div>
        <div class="conditios-block-temper1">
          <div class="conditios-block-temper1-left">
            <img src="../../../public/img/monitoring/electricity/wendu.png" alt="" />
            室内温度：
            <span>{{ testObject1.temCur }}℃</span>
          </div>
          <div class="conditios-block-temper1-right">
            <img src="../../../public/img/monitoring/electricity/wind-line.png" alt="" />
            当前风速：
            <span v-if="testObject1.funcCat == 1">{{
              testObject1.speed == 0
              ? "低速"
              : testObject1.speed == 1
                ? "中速"
                : testObject1.speed == 2
                  ? "高速"
                  : "自动"
            }}</span>
            <span v-if="testObject1.funcCat == 3">{{
              testObject1.speed == 1
              ? "低速"
              : testObject1.speed == 2
                ? "中速"
                : testObject1.speed == 3
                  ? "高速"
                  : "自动"
            }}</span>
          </div>
        </div>
      </div>
      <!-- 设备不在线 -->
      <div class="conditios-block" style="text-align:center;padding:4rem 0;" v-if="testObject1.open == -1">
        <img src="../../../public/img/monitoring/device_online.png" />
        <div style="color:#7597cb;font-size:0.14rem;margin-top:0.1rem;">设备离线</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as bfHelper from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import {
  openConditionsList,
  getConditionData,
  getConditionOpen,
  getConditionClose,
  setConditionTemUp,
  setConditionTemDown,
  setConditionMode,
  setConditionSpeedUp,
  setConditionSpeedDown,
  getFloorTemp,
  getLifList,
  getAirWarnList,//报警列表
  getCancelWarn,//确认告警
  setLoraTemp,//设置lora面板温度
  setLoraStatus,//设置lora面板开关0：关机 1：开机
  setLoraModel,//设置lora面板模式0:内机制热 1:内机地暖同时制热(默认) 2::地暖制热 3:制冷模式 9:通风模式|
  setLoraSpeed,//设置lora面板风速1：低速 2：中速 3：高速 4：自动
  queryLoraAll,//读取lora面板### 读取空调面板的
  recoveryWarn,//恢复告警
} from "@/api/garden/monitoring";
import clickCp from "./clickCp";
import backHome from "./backHome";
export default {
  props: {
    bimModel: {
      type: Number,
    },
  },
  components: {
    clickCp,
    backHome,
  },
  filters: {
    statusType: (data) => {
      //状态值所对应的数据
      switch (data) {
        case 0:
          return "未运行";
        case 1:
          return "运行中";
        case 2:
          return "故障";
      }
    },
  },
  data() {
    return {
      value1: false,
      value2: false,
      build: "",
      build1: "",
      tableData: [],
      current: 1, //当前页
      size: 5, //每页数量
      total: 0, //总条目数
      chooseId: [],
      switchAllClose: require("../../../public/img/monitoring/switchbg.png"),
      switchAllOpen: require("../../../public/img/monitoring/switchbg.png"),
      conditionInfo: {
        name: "空调1",
        status: 1, //运行中
        temperature: 24,
        roomTemperature: 20,
        speed: "强",
      },
      operatorHot: require("../../../public/img/monitoring/hot.png"),
      operatorCold: require("../../../public/img/monitoring/snow.png"),
      operatorWet: require("../../../public/img/monitoring/wet.png"),

      testObject: {
        status: 0, //通风模式
        isOpen: false, //空调开启
        name: "空调1",
        temper: 28,
        actualTemper: 30,
        windSpeed: 0,
        worldPosition: {
          x: 57430.87626265357,
          y: -5298.693359375,
          z: 3059.87618005641,
        },
        tower: null,
        layer: null,
      },
      testObject1: {},
      status: 0,
      isControl: false,
      bgImg: null,
      openStatus: null,
      build: null,
      floor: null,
      position: null,
      clickCode: null,
      allDatas: [],
      isMapViewer: 0,
      conditionNum: null,
      arr: [], //空调信息
      listData: [], //告警列表
      noramlTotal: 0,//正常设备数量
      warnEquip: 0,//告警设备数量
      equipWarn: 0,//告警数量
      intervalStatus: null,//1分钟轮询一次空调状态
    };
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        this.getAirWarnList();//告警列表
        this.getLifLists();//设备信息
        if (this.setInterval) {
          clearInterval(this.setInterval);
        }
        if (this.intervalStatus) {
          clearInterval(this.intervalStatus);
        }

        this.setInterval = setInterval(() => {
          this.getConditions(); //空调列表
          this.getAirWarnList();//告警列表
        }, 5 * 60 * 1000);

        this.getConditions(); //空调列表
      },
    },
    openStatus(newVal, oldVal) {
      bfHelper.clearTags();
      this.allDatas.forEach((item) => {
        bfHelper.customTag(
          { x: item.xmove, y: item.ymove, z: item.zmove },
          null,
          item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item)
        );
      });
    },
    clickCode(newVal, oldVal) {
      bfHelper.clearTags();
      if (this.conditionNum == 1) {
        bfHelper.customTag(
          this.position,
          null,
          this.testObject1.funcCat == 1 ? this.getContent(this.testObject1) : this.testObject1.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1)
        );
      } else if (this.conditionNum == 2) {
        this.allDatas.forEach((item) => {
          bfHelper.customTag(
            { x: item.xmove, y: item.ymove, z: item.zmove },
            null,
            item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item)
          );
        });
      }
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        if (newval) {
          // 模型恢复全部状态
          bfHelper.resetStatus(2);
          bfHelper.extObjMngClear(); //清除外部构件
          // this.initial();
          if (newval == 1) {
            // 查看管线
            // 滚轮设置透明度
            if (this.bimModel == 1) {
              window.sessionStorage.setItem(
                "camera",
                JSON.stringify(bfHelper.getCameraStatus())
              );
              let build = sessionStorage.getItem("build");
              let floor = sessionStorage.getItem("floor");
              // console.log(build,floor)
              if (build) {
                if (build == 10) {
                  setTimeout(() => {
                    this.setTowerKT("07");
                    this.$refs.clickcp.active = 26;
                    this.$refs.clickcp.tower = 9;
                    this.$refs.clickcp.area = 1;
                    this.$refs.clickcp.type = 'build';
                  }, 300);
                  bfHelper.lookPipeline2(null, null, build - 1, null, "空调");
                  // bfHelper.setCameraStatus(bfHelper.lightCamera[6]);
                } else if (build == 26) {
                  // bfHelper.resetStatus(2);
                  bfHelper.lookEquipmentCop("空调");
                  this.$refs.clickcp.active = 26;
                  this.$refs.clickcp.type = 'build';
                  this.$refs.clickcp.area = 1;
                  setTimeout(() => {
                    this.setTowerKT();
                    this.initial();
                  }, 300);
                  bfHelper.setOpacityFun();
                } else {
                  console.log(build, floor, "=======================")
                  if (floor.indexOf("null") == -1) {
                    setTimeout(() => {
                      this.setTowerKT("0" + build, "0" + floor);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        Number(floor)
                      );
                      this.$refs.clickcp.area = 1;
                      this.$refs.clickcp.type = 'floor';
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);
                    bfHelper.lookPipeline2(
                      null,
                      null,
                      build - 1,
                      floor,
                      "空调"
                    );
                  } else {
                    setTimeout(() => {
                      this.setTowerKT("0" + build);
                      this.$refs.clickcp.active = commonValue.activeValue(
                        Number(build),
                        null
                      );
                      this.$refs.clickcp.area = 1;
                      this.$refs.clickcp.type = 'build';
                      this.$refs.clickcp.tower = commonValue.towerValue(build);
                    }, 300);
                    bfHelper.lookPipeline2(null, null, build - 1, null, "空调");
                    // bfHelper.setCameraStatus(bfHelper.lightCamera[build - 1]);
                  }
                }
              } else {
                bfHelper.lookEquipmentCop("空调");
                this.getNavigationMap();
                bfHelper.setOpacityFun();
                this.$refs.clickcp.area = 1;
                this.$refs.clickcp.type = 'build';
                this.$refs.clickcp.active = 25;
                this.$refs.clickcp.getTypeList(25,'build',1)
                // setTimeout(() => {
                this.initial();
                // },300)
              }
              // this.initial()
            } else {
            }
          } else {
          }
        }
      },
    },
  },
  beforeDestroy() {
    console.log('销毁interval')
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
    if (this.intervalStatus) {
      clearInterval(this.intervalStatus);
    }
  },
  created() {
    this.getConditions(); //空调列表
    this.getAirWarnList();//告警列表
    this.setInterval = setInterval(() => {
      this.getConditions(); //空调列表
      this.getAirWarnList();//告警列表
    }, 5 * 60 * 1000);//5分钟轮询一次
  },
  mounted() {
    let dom = document.getElementById('condi_box');
    dom.addEventListener('contextmenu', (event) => {
      event.preventDefault(); // 阻止默认菜单
      const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0900' } });
      window.open(routerUrl.href, "_blank");
    });
    this.getNavigationMap();
  },

  methods: {
    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)
    },
    //确认告警 - 重新查询告警列表
    doCancelWarn(item) {
      getCancelWarn(item.id).then((res) => {
        // this.getAirWarnList();
        item.confirmStatus = 1;
      })
    },
    //恢复告警
    doRecoveryWarn(item) {
      recoveryWarn(item.id).then((res) => {
        item.warnStatus = 2;
      })
    },
    //跳转历史告警列表
    goMoreWarnList() {
      const routerUrl = this.$router.resolve({ path: '/equipment/warnHistory', query: { classCode: '0900', area: this.bimModel } });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getAirWarnList() {
      getAirWarnList({
        area: this.bimModel,
        build: this.build ? this.build : "",
        floor: this.floor ? this.floor : "",
      }).then((res) => {
        this.listData = res.data.data.warnEquipList;
        this.normalTotal = res.data.data.normalEquipNumber;
        this.warnEquip = res.data.data.warnEquipEquipNumber;
        for (let i = 0; i < this.listData.length; i++) {
          this.listData[i].showAlert = false;
        }
      });
    },
    // 设备信息、告警信息
    getLifLists() {
      getLifList(this.bimModel).then((res) => {
        if (res.data.code == 200) {
          this.arr = res.data.data;
          this.setLiftColor(this.arr);
        }
      });
    },
    setLiftColor(arr) {
      let arrs = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status != 90000) {
          arrs.push(arr[i]);
        }
      }

      // this.listData = arrs;

      for (let j = 0; j < this.listData.length; j++) {
        this.listData[j].showAlert = false;
      }
      let offList = [];
      let bjList = [];
      let normalList = [];
      for (let i = 0; i < arr.length; i++) {
        let objectId = bfHelper.getExternalComponentId(arr[i].modelId);
        if (arr[i].status == 90000) {
          normalList.push(objectId);
        } else if (arr[i].status == 90001) {
          offList.push(objectId);
        } else {
          bjList.push(objectId);
        }
      }
      bfHelper.restoreColor(normalList);
      bfHelper.setFlicker(bjList, "#ff0000", 100);
      bfHelper.cancelFlicker(normalList);
      bfHelper.setColor("#a5bbe5", offList);
    },
    getNavigationMap() {
      commonValue.getNavigationMap("water");
    },
    // 接收子组件当前点击楼号
    setTowerKT(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.build = i;
      this.floor = j;
      if (this.intervalStatus) {
        clearInterval(this.intervalStatus);
      }
      if (this.bimModel == 1) {
        commonValue.getUpdateMap("water", i, j);
        this.removeEvent();
        this.getConditions();

        window.addEventListener("click", this.addEvent);
        this.conditionNum = 2;
      }
    },

    getConditions() {
      if (this.bimModel == 1) {
        openConditionsList(
          this.current,
          this.size,
          1,
          this.build ? this.build : "",
          this.floor ? this.floor : ""
        ).then((res) => {
          if (this.build && this.floor) {
            this.tableData = res.data.data.records.slice(
              (this.current - 1) * this.size,
              this.current * this.size
            );
            this.allDatas = res.data.data.records;
            bfHelper.clearTags();
            res.data.data.records.forEach((item) => {
              bfHelper.customTag(
                {
                  x: item.xmove,
                  y: item.ymove,
                  z: item.zmove,
                },
                null,
                item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item)
              );
            });
          } else {
            // bfHelper.clearTags();
            this.tableData = res.data.data.records;
          }

          this.total = res.data.data.total;
        });
      }
    },
    changeMode(mode) {
      //改变空调模式
      if (this.testObject1.open == 1) {
        this.testObject1.mode = mode;
        if (this.testObject1.funcCat == 3) {
          //lora面板
          setLoraModel(this.testObject1.code, this.testObject1.mode).then(res => {
          })
          return;
        }
        var arr = bfHelper.getAll();
        bfHelper.clearTags();
        if (arr.length < 2) {
          bfHelper.customTag(
            {
              x: this.testObject1.xmove,
              y: this.testObject1.ymove,
              z: this.testObject1.zmove,
            },
            null,
            this.getContent(this.testObject1)
          );
        } else {
          this.allDatas.forEach((item) => {
            if (item.code == this.clickCode) {
              item.mode = mode;
            }
            bfHelper.customTag(
              {
                x: item.xmove,
                y: item.ymove,
                z: item.zmove,
              },
              null,
              item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item)
            );
          });
        }
        setConditionMode(this.testObject1.code, this.testObject1.mode).then(
          (res) => {
            if (res.data.code == 200) {
              this.getConditions();
            }
          }
        );
      }
    },
    descreaseTemper() {
      //减温度
      if (this.testObject1.open == 1) {
        if (this.testObject1.agentCtrl == 0) {
          this.$message.error("暂无设备控制权限！");
        } else {
          this.testObject1.temSetting--;
          if (this.testObject1.temSetting <= 16) {
            this.testObject1.temSetting = 16;
          }
          if (this.testObject1.funcCat == 3) {
            //lora面板
            setLoraTemp(this.testObject1.code, this.testObject1.temSetting).then(res => {
              if (res.data.code == 200) {
                this.$message.success('温度设置成功');
              } else {
                this.$message.error('温度设置失败');
                this.testObject1.temSetting++;
              }
            })
            return;
          }
          setConditionTemDown(
            this.testObject1.code,
            this.testObject1.temSetting
          ).then((res) => {
            if (res.data.code == 200) {
              this.getConditions();
            }
          });
        }
      }
    },
    plusTemper() {
      //加温度
      if (this.testObject1.open == 1) {
        if (this.testObject1.agentCtrl == 0) {
          this.$message.error("暂无设备控制权限！");
        } else {
          this.testObject1.temSetting++;
          if (this.testObject1.temSetting >= 30) {
            this.testObject1.temSetting = 30;
          }
          if (this.testObject1.funcCat == 3) {
            //lora面板
            setLoraTemp(this.testObject1.code, this.testObject1.temSetting).then(res => {
              if (res.data.code == 200) {
                this.$message.success('温度设置成功');
              } else {
                this.$message.error('温度设置失败');
                this.testObject1.temSetting--;
              }
            })
            return;
          }
          setConditionTemUp(
            this.testObject1.code,
            this.testObject1.temSetting
          ).then((res) => {
            if (res.data.code == 200) {
              this.getConditions();
            }
          });
        }
      }
    },
    decreaseWind() {
      //减风速
      if (this.testObject1.open == 1) {
        this.testObject1.speed--;
        if (this.testObject1.speed <= 0) {
          this.testObject1.speed = 0;
        }
        if (this.testObject1.funcCat == 3) {
          //lora面板
          setLoraSpeed(this.testObject1.code, this.testObject1.speed).then(res => {
          })
          return;
        }
        setConditionSpeedDown(
          this.testObject1.code,
          this.testObject1.speed
        ).then((res) => {
          if (res.data.code == 200) {
            this.getConditions();
          }
        });
      }
    },
    plusWind() {
      //加风速
      if (this.testObject1.open == 1) {
        this.testObject1.speed++;
        if (this.testObject1.speed >= 3) {
          this.testObject1.speed = 3;
        }
        if (this.testObject1.funcCat == 3) {
          //lora面板
          setLoraSpeed(this.testObject1.code, this.testObject1.speed).then(res => {
          })
          return;
        }
        setConditionSpeedUp(this.testObject1.code, this.testObject1.speed).then(
          (res) => {
            if (res.data.code == 200) {
              this.getConditions();
            }
          }
        );
      }
    },
    closeCondition() {
      if (this.testObject1.agentCtrl == 0) {
        this.$message.error("暂无设备控制权限！");
      } else {
        if (this.testObject1.funcCat == 3) {
          //lora面板
          setLoraStatus(this.testObject1.code, 0).then(res => {
            this.testObject1.open = 2;
          })
          return;
        }
        getConditionClose(this.testObject1.code).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data) {
              this.getConditions();
              this.testObject1.open = 2;
              var arr = bfHelper.getAll();
              bfHelper.clearTags();
              if (arr.length < 2) {
                bfHelper.customTag(
                  {
                    x: this.testObject1.xmove,
                    y: this.testObject1.ymove,
                    z: this.testObject1.zmove,
                  },
                  null,
                  this.testObject1.funcCat == 1 ? this.getContent(this.testObject1) : this.testObject1.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1)
                );
              } else {
                this.allDatas.forEach((item) => {
                  if (item.code == this.clickCode) {
                    item.open = 2;
                  }
                  bfHelper.customTag(
                    {
                      x: item.xmove,
                      y: item.ymove,
                      z: item.zmove,
                    },
                    null,
                    item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item)
                  );
                });
              }
            } else {
              this.$message.warning(res.data.msg);
            }
          }
        });
      }
    },
    openCondition() {
      if (this.testObject1.agentCtrl == 0) {
        this.$message.error("暂无设备控制权限！");
      } else {
        if (this.testObject1.funcCat == 3) {
          //lora面板
          setLoraStatus(this.testObject1.code, 1).then(res => {
            this.testObject1.open = 1;
          })
          return;
        }
        getConditionOpen(this.testObject1.code).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data) {
              this.getConditions();
              this.testObject1.open = 1;
              var arr = bfHelper.getAll();
              bfHelper.clearTags();
              if (arr.length < 2) {
                getOAContent
                bfHelper.customTag(
                  {
                    x: this.testObject1.xmove,
                    y: this.testObject1.ymove,
                    z: this.testObject1.zmove,
                  },
                  null,
                  this.testObject1.funcCat == 1 ? this.getContent(this.testObject1) : this.testObject1.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1)
                );
              } else {
                this.allDatas.forEach((item) => {
                  if (item.code == this.clickCode) {
                    item.open = 1;
                  }
                  bfHelper.customTag(
                    {
                      x: item.xmove,
                      y: item.ymove,
                      z: item.zmove,
                    },
                    null,
                    item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item)
                  );
                });
              }
            }
          } else {
            this.$message.warning(res.data.msg);
          }
        });
      }
    },
    testaaa(a) {
      console.log(a);
    },
    // 设置单元格的样式
    cellstyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 2) {
        return "text-align: center;padding:0;border-right:1px solid #2083ec;border-left:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;";
      } else {
        return "text-align: center;padding:0;border-left:1px solid #2083ec;border-right:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;";
      }
    },
    // 定义表格的头部样式
    tableHeaderColor({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "line-height:2rem;height:2rem;padding: 0;border:none;background-color: #2083ec;color:#fff;font-size:0.875rem;text-align: center;";
      }
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getConditions();
    },
    selectId(selection, row) {
      // console.log(selection,row)
    },
    handleSelect(selection) {
      var arr = [];
      if (selection.length != 0) {
        selection.forEach((item) => {
          arr.push(item.id);
        });
      }
      this.chooseId = arr;
    },
    clickConditions(row) {
      getConditionData(row.code).then((res) => {
        if (res.data.code == 200) {
          this.testObject1 = res.data.data;
          this.$refs.clickcp.active = commonValue.activeValue(
            Number(row.build),
            Number(row.floored)
          );
          this.$refs.clickcp.tower = commonValue.towerValue(row.build);
          bfHelper.clearDrawableContainer();
          bfHelper.clearTags();
          bfHelper.lookPipeline2(
            null,
            null,
            Number(row.build) - 1,
            Number(row.floored),
            "空调"
          );
          window.sessionStorage.setItem("build", Number(row.build));
          window.sessionStorage.setItem("floor", Number(row.floored));
          commonValue.getUpdateMap("water", row.build, row.floored);
          // this.updateMap(row.build,row.floored)
          this.position = {
            x: row.xmove,
            y: row.ymove,
            z: row.zmove,
          };
          // console.log(this.position)
          // console.log(this.getContent(this.testObject1))
          bfHelper.customTag(
            this.position,
            null,
            row.funcCat == 1 ? this.getContent(this.testObject1) : row.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1)
          );
          this.removeEvent();
          window.addEventListener("click", this.addEvent);
          this.conditionNum = 1;
        }
      });
    },
    // addClick() {
    // 	window.addEventListener('click', (e) => {
    // 		// console.log(e.target.id)

    // 	})
    // },
    addEvent(e) {
      let code = null;
      if (e.target.id.indexOf("condition") != -1) {
        code = e.target.id.substring(10);
      }
      if (e.target.id.indexOf("temper") != -1) {
        code = e.target.id.substring(7);
      }
      if (e.target.id.indexOf("tempea") != -1) {
        code = e.target.id.substring(7);
      }
      if (e.target.id.indexOf("tempec") != -1) {
        code = e.target.id.substring(7);
      }
      if (e.target.id.indexOf("tempac") != -1) {
        code = e.target.id.substring(7);
      }
      if (e.target.id.indexOf("temped") != -1) {
        code = e.target.id.substring(7);
      }
      if (code) {
        if (this.intervalStatus) {
          clearInterval(this.intervalStatus);
        }
        let funcCatObj = this.allDatas.find(item => { return item.code == code });
        if (funcCatObj && funcCatObj.funcCat == 3) {
          //lora面板
          queryLoraAll(code).then(res => {
            this.testObject1 = res.data.data;
            this.testObject1.funcCat = 3;
            if (
              e.target.id == "condition-" + code ||
              e.target.id == "temper-" + code ||
              e.target.id == "tempea-" + code ||
              e.target.id == "tempec-" + code ||
              e.target.id == "tempac-" + code ||
              e.target.id == "temped-" + code
            ) {
              this.isControl = true;
              this.clickCode = code;
            }
            this.doIntervalStatus(code, 3);
          })
          return;
        }
        getConditionData(code).then((res) => {
          if (res.data.code == 200) {
            this.testObject1 = res.data.data;
            if (this.testObject1.getConditionData == 2) {
              //新风不需要控制
              return;
            }
            this.testObject1.funcCat = 1;
            if (
              e.target.id == "condition-" + code ||
              e.target.id == "temper-" + code ||
              e.target.id == "tempea-" + code ||
              e.target.id == "tempec-" + code ||
              e.target.id == "tempac-" + code ||
              e.target.id == "temped-" + code
            ) {
              this.isControl = true;
              this.clickCode = code;
            }
            this.doIntervalStatus(code, 1);
          }
        });
      }
    },
    //定时1分钟轮询一次空调运行状态
    doIntervalStatus(code, type) {
      this.intervalStatus = setInterval(() => {
        if (type == 3) {
          queryLoraAll(code).then(res => {
            this.testObject1 = res.data.data;
            this.testObject1.funcCat = 3;
          })
        } else if (type == 1) {
          getConditionData(code).then((res) => {
            if (res.data.code == 200) {
              this.testObject1 = res.data.data;
              this.testObject1.funcCat = 1;
            }
          });
        }
      }, 5 * 60 * 1000);
    },
    removeEvent() {
      window.removeEventListener("click", this.addEvent);
    },
    getContent(testObject) {
      // console.log(this.clickCode,testObject)
      let button = require("../../../public/img/monitoring/electricity/off-button.png");
      let greenWind = require("../../../public/img/monitoring/electricity/green-wind.png");
      let decrease = require("../../../public/img/monitoring/electricity/jian.png");
      let plus = require("../../../public/img/monitoring/electricity/jia.png");
      let wind = require("../../../public/img/monitoring/electricity/wind.png");
      let hot = require("../../../public/img/monitoring/electricity/hot.png");
      let cold = require("../../../public/img/monitoring/electricity/cold.png");
      let bgImg1 = require("../../../public/img/monitoring/electricity/condition1.png");
      let bgImg2 = require("../../../public/img/monitoring/electricity/condition2.png");
      let content = `<div class="lift-block" style="position:relative;width:133px">
					<div style="background-image:url(${testObject.open == 1 ? bgImg1 : bgImg2
        });width:133px;height:40px;background-size:100% 100%;background-position:-5px 0;color:white" id="temped-${testObject.code
        }">
						<div id="condition-${testObject.code
        }" style="width:103px;position:absolute;height:40px;display:flex;left:30px;top:0;justify-content: space-between;align-items:center;cursor: pointer">
							<span style="font-size:14px;display:${testObject.code == this.clickCode ? "none" : "inline-block"
        }" >
								<span style="font-size:16px;font-family:fantasy;" id="temper-${testObject.code
        }">${testObject.temSetting}</span>
								<span id="tempec-${testObject.code
        }">℃/</span><span style="font-size:16px;font-family:fantasy;" id="tempea-${testObject.code
        }">${testObject.temCur}</span><span id="tempac-${testObject.code
        }"> ℃</span>
							</span>
							<span style="font-size:16px;display:${testObject.code == this.clickCode ? "inline-block" : "none"
        }" id="temper-${testObject.code}">${testObject.name}</span>
						</div>
					</div>
							
				</div>`;

      return content;
    },
    getContent1() {
      let bgImg1 = require("../../../public/img/monitoring/electricity/condition1.png");
      let bgImg2 = require("../../../public/img/monitoring/electricity/condition2.png");
      let content = `<div class="lift-block" style="position:relative;width:133px">
						<div style="background-image:url(${this.testObject.open == 1 ? bgImg1 : bgImg2
        });width:133px;height:40px;background-size:100% 100%;color:white">
							<div style="width:93px;position:absolute;height:40px;display:flex;left:40px;top:0;justify-content: space-between;align-items:center;cursor: pointer">
								<span style="font-size:14px;" >${this.testObject.name}</span>
							</div>
						</div>
								
					</div>`;

      return content;
    },
    //空调面板
    getMbContent(testObject) {
      // console.log('空调面板',testObject)
      let bgImg1 = require("../../../public/img/monitoring/electricity/condition_mb.png");
      let content = `<div class="lift-block" style="position:relative;width:100px">
					<div id="temped-${testObject.code}" style="background:#07a7ff url(${bgImg1}) 5px center no-repeat;width:100px;height:34px;color:white;font-size:18px;" id="temped-${testObject.code
        }">
						<div id="condition-${testObject.code
        }" style="width:60px;position:absolute;height:34px;line-height: 34px;left:40px;top:0;cursor: pointer">
              <span id="temper-${testObject.code}" style="font-size:18px;font-family:fantasy;">${testObject.name}</span>
						</div>
					</div>
							
				</div>`;

      return content;
    },
    //空调主机定位标签样式
    getOAContent(objData) {
      let content = `<div class="leadTips" style="transform: translateY(-72px);">
						<div style="display: flex;width:max-content">
							<img src="${require(objData.open == 1
        ? "../../../public/img/monitoring/electricity/customTag1.png"
        : "../../../public/img/monitoring/electricity/offline2_2.png")}" style="width:87px;height:53px;"/>
							<div style="margin-top: -42px;">
								<div style="width: 185px;height: 46px;background: url('${require(objData.open == 1
          ? "../../../public/img/monitoring/electricity/customTag1-1.png"
          : "../../../public/img/monitoring/electricity/offline2.png")}');">
									<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;">${objData.name}</span>
								</div>	
								<div style="margin-top: 5px;box-sizing: border-box;color: #ffffff;width: 185px;padding: 0 15px;background-color: ${objData.open == 1
          ? "rgba(30, 57, 102, 0.8)"
          : "rgba(96, 96, 96, 0.8)"
        };">	
									<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;">
										<span style="opacity: 0.5;font-size: 12px;">设备状态:</span>
										<span style="font-size: 15px;">${objData.open == 1 ? "开" : "关"}</span>
									</div>
								</div>	
							</div>
						</div>	
					</div>`;
      return content;
    },
    // 初始化标签
    initial() {
      if (this.bimModel == 1) {
        getFloorTemp(this.bimModel).then((res) => {
          let num = [];
          const data = res.data.data;
          let position = bfHelper.ywqThreeLevelPt;
          for (let i = 0; i < data.length; i++) {
            let content = `<div class="leadTips" style="transform: translateY(-40px);">
							 		<div style="display: flex;width:max-content">
							 			<div style="display: flex;align-items: center;justify-content: center;color:#fff;font-size:18px;width:110px;height:40px;background-color: rgba(7, 67, 151, 0.8);box-shadow: #009cff 0px 0px 15px inset;border: 1px solid #00BAFE;border-radius: 12px;">
							 				<span>温度:${data[i].temp}℃</span>
							 			</div>
							 		</div>	
							 </div>`;
            bfHelper.customTag(position[i], null, content);
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.switch {
  z-index: 99;
  position: absolute;
  right: 40px;
  bottom: 41px;
  // background-image: url(../../../public/img/monitoring/ktbg.png);
  width: 402px;
  height: 342px;
  background: url(../../../public/img/monitoring/electricity/newbg.png) no-repeat;
  background-size: cover;
  // padding-bottom: 30px;
  // 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;
    }
  }

  .select {
    width: 87%;
    margin: 1.563rem auto 0;

    .name {
      font-size: 0.875rem;
      color: #07e6ed;
    }

    .btn {
      width: 3.375rem;
      height: 1.125rem;
      background-color: rgba(7, 230, 237, 0.6);
      border-radius: 0.313rem;
      border: 0.063rem solid #07e5ed;
      text-align: center;
      font-size: 0.875rem;
      padding: 5px 10px;
      color: #ffffff;
    }

    /deep/ .el-input__inner {
      background-color: transparent;
      border-radius: 0.313rem;
      border: solid 0.063rem #07e6ed;
      height: 1.888rem;
      color: #fff;
      line-height: 1.888rem;
      font-size: 0.75rem;
    }

    /deep/ .el-select .el-input .el-select__caret {
      color: #07e6ed;
    }

    /deep/ .el-input__icon {
      line-height: 1.888rem;
    }

    /deep/ input::-webkit-input-placeholder {
      color: #d1d5d5;
    }

    /deep/ input::-moz-input-placeholder {
      color: #d1d5d5;
    }

    /deep/ input::-ms-input-placeholder {
      color: #d1d5d5;
    }
  }

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

    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: transparent !important;
    }

    /deep/ .el-table__header-wrapper .has-gutter th {
      border-bottom: none;
      padding: 0;
      text-align: center;
    }

    /deep/ .el-table__header-wrapper .has-gutter th .cell {
      line-height: 31px;
      padding: 0;
      background-color: #07a7ff;
      color: white;
    }

    /deep/ .tataitab .el-table__header-wrapper .has-gutter th .cell {
      background: rgb(33, 110, 196);
    }

    /deep/ .tataitab .el-table__header-wrapper .has-gutter th:nth-of-type(even) .cell {
      color: rgb(31, 91, 180);
    }

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

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

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

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

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

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

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

    .el-pagination.is-background {
      display: flex;
      justify-content: flex-end;
      margin-top: 1rem;
    }
  }

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

  // .box {
  // 	margin: 20px 0;

  // 	span {
  // 		margin-right: 10px;
  // 		color: #fff;

  // 	}
  // }
}

.device-manager {
  z-index: 99;
  position: absolute;
  right: 40px;
  bottom: 41px;
  background-image: url(../../../public/img/monitoring/ktbg.png);
  width: 25.25rem;
  height: auto;
  padding-bottom: 30px;
  background-size: 100% 100%;

  .conditioner-info {
    display: flex;
    align-items: flex-end;
    margin: 1rem 0 1.5rem 0;
    padding: 0 30px;
    justify-content: space-between;

    >span {
      font-size: 30px;
      color: white;
    }

    >div {
      margin-left: 20px;
      color: white;
      font-size: 14px;

      .condition-status {
        display: flex;
        align-items: center;

        .circle {
          width: 10px;
          height: 10px;
          background-color: rgb(0, 230, 0);
          border-radius: 10px;
          margin-right: 8px;
        }
      }
    }
  }

  .condition-operator {
    display: flex;
    padding: 0 30px;
    justify-content: space-between;

    .operators {
      color: white;
      height: 186px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px 0;

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

        span {
          margin-left: 8px;
        }
      }
    }

    .wind-speed,
    .temperature {
      width: 47px;
      height: 186px;
      background-image: url(../../../public/img/monitoring/speedbg.png);
      background-size: 100% 100%;
      display: flex;
      padding: 15px 0;
      color: white;
      font-size: 14px;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
  }
}

// 设备列表
.tab {
  z-index: 99;
  position: fixed;
  right: 40px;
  bottom: 15px;
  width: 402px;
  height: 342px;
  background: url(../../../public/img/monitoring/electricity/newbg.png);
  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 {
    width: 21.563rem;
    margin: 1rem auto 0;

    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: transparent !important;
    }

    /deep/ .el-table__header-wrapper .has-gutter th {
      border-bottom: none;
      padding: 0;
      text-align: center;
    }

    /deep/ .el-table__header-wrapper .has-gutter th .cell {
      line-height: 31px;
      padding: 0;
      background-color: #07a7ff;
      color: white;
    }

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

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

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

.conditios-open {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
  margin-bottom: 10px;

  .open-txt {
    color: #95a1b7;
    line-height: 30px;
  }
}

.conditios-block {
  border: 6px solid rgb(121, 151, 203);
  padding: 40px 0;
  border-radius: 3px;

  .conditios-block-temper {
    color: rgb(43, 213, 42);
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .conditios-block-temper1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;

    .conditios-block-temper1-left,
    .conditios-block-temper1-right {
      p {
        font-size: 13px;
        color: rgb(149, 161, 183);
        margin-bottom: 5px;
        display: flex;
        align-items: center;

        img {
          margin-right: 5px;
        }

        span {
          color: white;
        }
      }
    }

    .conditios-block-temper1-line {
      font-size: 20px;
      margin: 0;
      color: rgb(149, 161, 183);
    }
  }
}

.conditios-block-mode {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin-top: 10px;

  .conditios-block-mode-part {
    font-size: 13px;
    color: rgb(149, 161, 183);
    text-align: center;
    cursor: pointer;

    div {
      width: 90px;
      height: 40px;
      margin-bottom: 5px;
      background: rgba(121, 151, 203, 0.4);
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
      }

      span {
        color: white;
      }
    }
  }
}

.conditios-block-wind {
  background: rgba(121, 151, 203, 0.4);
  padding: 5px 10px;
  margin-top: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

//空调控制
.tab_control {
  position: absolute;
  left: 105px;
  bottom: 41px;
  width: 244px;
  height: 333px;
  background: url(../../../public/img/monitoring/electricity/newbg1.png);
  background-size: 100% 100%;

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

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

  .open-txt {
    color: #fff;
    font-size: 14px;
  }

  .conditios-block {
    border-radius: 10px;
    margin: 1.1rem;
    padding: 0;
  }

  .conditios-block-temper {
    padding: 30px 15px 20px;
  }

  .conditios-block-temper1 {
    display: block;
    text-align: center;
    border-top: 1px solid rgba(55, 255, 255, 0.2);
    padding: 17px 0 5px 0;

    .conditios-block-temper1-left,
    .conditios-block-temper1-right {
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
      margin-bottom: 0.6rem;

      img {
        vertical-align: middle;
        margin-right: 5px;
      }

      span {
        color: #fff;
        font-size: 15px;
      }
    }
  }
}

// 设备概况
.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: cover;
      width: 176px;
      height: 78px;
    }

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

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

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

  .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;
    justify-content: space-around;

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

      span {
        color: #1851ab;
      }
    }

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

    span {
      color: silver;
    }
  }

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

  .warp {
    height: 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%;
          text-align: center;

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

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

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

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

    .item:hover {
      cursor: pointer;
    }
  }

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