<template>
  <div class="monitor" v-loading="loading">
    <div class="monitor-top">
      <img
        class="title-left"
        src="../../../assets/images/title-left.png"
        alt=""
      />
      <img
        class="title-center"
        src="../../../assets/images/title-center.png"
        alt=""
        @click="goSys"
      />
      <img
        class="title-right"
        src="../../../assets/images/title-right.png"
        alt=""
      />
      <div class="sys-title" @click="goSys">生活热水供水监控系统</div>
      <!-- logo -->
      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
      <div class="nowTime">{{ formattedDate }}</div>
      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
      <img
        class="icon_warning"
        src="../../../assets/images/warning.png"
        title="报警记录"
        @click="goWarning"
        v-if="isShowWarning"
        alt=""
      />
      <img
        class="icon_home"
        src="../../../assets/images/icon_home.png"
        title="首页"
        @click="goSys"
        alt=""
      />
      <img
        class="back-icon"
        src="../../../assets/images/back-icon.png"
        title="返回"
        @click="goBack"
        alt=""
      />
    </div>
    <div class="app-container">
      <div class="left-tree">
        <!-- 为 el-tree 设置一个固定的高度和滚动条 -->
        <div style="height: 5rem; overflow-y: auto">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="id"
            :default-expand-all="false"
            :default-expanded-keys="expandedKeys"
            :auto-expand-parent="true"
            icon-class="none"
            @node-expand="handleNodeExpand"
            @node-collapse="handleNodeCollapse"
            :highlight-current="true"
            @node-click="handleNodeClick"
          >
            <template #default="{ node }">
              <span class="custom-tree-node">
                <!-- 根据节点状态动态设置图标类名 -->
                <div class="tree-left">
                  <i :class="getIconClass(node)" class="custom-tree-icon"></i>
                  <span class="tree-label">{{ node.label }}</span>
                </div>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="base-mes" v-if="isShowHotWater">
          <div class="base-title">公共信息</div>
          <div class="base-height">
            <div
              class="base-li"
              v-for="(item, index) in baseTable"
              :key="index"
            >
              {{ item.name }}:<span class="deepColor">{{ item.value }}</span
              >{{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div class="right-monitor">
        <div class="buildingDiv">
          <img
            class="title-bg"
            src="../../../assets/images/title-bg.png"
            alt=""
          />
          <div class="title-word">楼层：{{ currentName }}</div>
        </div>
        <div class="folw" v-if="isShowHotWater">
          <!-- 动态流程图 -->
          <div class="changeimage">
            <!-- <img class="img-rad" src="" alt="" /> -->
            <div class="flowimg">
              <!-- <img v-if="this.useWater == '运行'" src="../../../assets/images/flowimg/move.gif" class="bigMove" alt="" />
            <img v-else src="../../../assets/images/flowimg/nomove.png" class="bigMove" alt="" /> -->

              <!-- 文字定位  -->
              <div class="flow-text text1">{{ progressName1 }}供水泵1</div>
              <div class="flow-text text6">{{ progressName1 }}供水泵2</div>
              <div class="flow-text text9">{{ progressName2 }}供水泵1</div>
              <div class="flow-text text10">{{ progressName2 }}供水泵2</div>
              <div class="flow-text text2">回水管</div>
              <div class="flow-text text3">无线网关</div>
              <div class="flow-text text4">回水阀</div>
              <div class="flow-text text5">房间</div>
              <!-- <div class="flow-text text7">循环加热泵</div> -->
              <div class="flow-text text8">补水阀</div>
              <!-- 补水阀定位 -->
              <img
                class="replenish"
                v-if="this.useWaterState === '1'"
                src="../../../assets/flowimg/replenish-move.gif"
                alt=""
              />
              <img
                class="replenish"
                v-else
                src="../../../assets/flowimg/replenish-nomove.png"
                alt=""
              />
              <!-- 供水定位 -->
              <img
                class="supply"
                v-if="
                  this.upWaterState1 === '1' ||
                  this.upWaterState2 === '1' ||
                  this.upWaterState3 === '1' ||
                  this.upWaterState4 === '1'
                "
                src="../../../assets/flowimg/supply-move.gif"
                alt=""
              />
              <img
                class="supply"
                v-else
                src="../../../assets/flowimg/supply-nomove.png"
                alt=""
              />
              <!-- 加热定位 -->
              <img
                class="circulate"
                v-if="this.hotPumState === '1' && this.isBad !== '1'"
                src="../../../assets/flowimg/circulate-move.gif"
                alt=""
              />
              <img
                class="circulate"
                v-else
                src="../../../assets/flowimg/circulate-nomove.png"
                alt=""
              />
              <!-- 供水泵1定位 -->
              <img
                class="coolpum"
                v-if="this.upWaterState1 === '1'"
                src="../../../assets/flowimg/startpum.png"
                alt=""
              />
              <img
                class="coolpum"
                v-else
                src="../../../assets/flowimg/closepum.png"
                alt=""
              />
              <!-- 供水泵2定位 -->
              <img
                class="waterpum"
                v-if="this.upWaterState2 === '1'"
                src="../../../assets/flowimg/startpum.png"
                alt=""
              />
              <img
                class="waterpum"
                v-else
                src="../../../assets/flowimg/closepum.png"
                alt=""
              />
              <!-- 供水泵3定位 -->
              <img
                class="waterpum2"
                v-if="this.upWaterState3 === '1'"
                src="../../../assets/flowimg/startpum.png"
                alt=""
              />
              <img
                class="waterpum2"
                v-else
                src="../../../assets/flowimg/closepum.png"
                alt=""
              />
              <!-- 供水泵4定位 -->
              <img
                class="waterpum3"
                v-if="this.upWaterState4 === '1'"
                src="../../../assets/flowimg/startpum.png"
                alt=""
              />
              <img
                class="waterpum3"
                v-else
                src="../../../assets/flowimg/closepum.png"
                alt=""
              />
              <!-- 补水定位 -->
              <img
                class="buwaterpum2"
                v-if="backWaterState === '1'"
                src="../../../assets/flowimg/bu-move.gif"
                alt=""
              />
              <img
                class="buwaterpum"
                v-else
                src="../../../assets/flowimg/bu-nomove.png"
                alt=""
              />
              <!-- 循环加热泵定位-->
              <!-- <img
                class="cirpum"
                v-if="this.hotPumState === '1' && this.isBad !== '1'"
                src="../../../assets/flowimg/startpum.png"
                alt=""
              />
              <img
                class="cirpum"
                v-else
                src="../../../assets/flowimg/closepum.png"
                alt=""
              /> -->
              <!-- 热泵定位 -->
              <div :class="getHotPumPositionClass">
                <div
                  class="hotPump-li"
                  v-for="(item, index) in tableData"
                  :key="index"
                >
                  <template v-if="tableData.length === 2">
                    <template v-if="index === 0">
                      <div class="hotPump-name">{{ item.pumpName }}</div>
                      <img
                        class="hotPump-img"
                        :src="getImageSrc(item)"
                        alt=""
                      />
                      <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
                      -->
                      <img
                        class="tem2"
                        src="../../../assets/flowimg/thermometer.png"
                        alt=""
                      />
                      <div class="temContainer2">
                        <div
                          class="temprogress"
                          :style="{ height: item.waterTemp + '%' }"
                        ></div>
                      </div>
                      <b class="temdiv2">{{ item.waterTemp }}℃</b>
                    </template>
                    <template v-else>
                      <img
                        class="hotPump-img"
                        :src="getImageSrc(item)"
                        alt=""
                      />
                      <div class="hotPump-name">{{ item.pumpName }}</div>
                      <img
                        class="tem2"
                        src="../../../assets/flowimg/thermometer.png"
                        alt=""
                      />
                      <div class="temContainer2">
                        <div
                          class="temprogress"
                          :style="{ height: item.waterTemp + '%' }"
                        ></div>
                      </div>
                      <b class="temdiv2">{{ item.waterTemp }}℃</b>
                    </template>
                  </template>
                  <template v-else-if="tableData.length === 4">
                    <template v-if="index < 2">
                      <template v-if="index === 0">
                        <div class="hotPump-name">{{ item.pumpName }}</div>
                        <img
                          class="hotPump-img"
                          :src="getImageSrc(item)"
                          alt=""
                        />
                        <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
                      -->
                        <img
                          class="tem2"
                          src="../../../assets/flowimg/thermometer.png"
                          alt=""
                        />
                        <div class="temContainer2">
                          <div
                            class="temprogress"
                            :style="{ height: item.waterTemp + '%' }"
                          ></div>
                        </div>
                        <b class="temdiv2">{{ item.waterTemp }}℃</b>
                      </template>
                      <template v-else>
                        <div class="hotPump-name">{{ item.pumpName }}</div>
                        <img
                          class="hotPump-img"
                          :src="getImageSrc(item)"
                          alt=""
                        />
                        <img
                          class="tem1"
                          src="../../../assets/flowimg/thermometer.png"
                          alt=""
                        />
                        <div class="temContainer1">
                          <div
                            class="temprogress"
                            :style="{ height: item.waterTemp + '%' }"
                          ></div>
                        </div>
                        <b class="temdiv1">{{ item.waterTemp }}℃</b>
                      </template>
                    </template>
                    <template v-else>
                      <template v-if="index === 2">
                        <img
                          class="hotPump-img"
                          :src="getImageSrc(item)"
                          alt=""
                        />
                        <div class="hotPump-name">{{ item.pumpName }}</div>
                        <!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div>
                      -->
                        <img
                          class="tem2"
                          src="../../../assets/flowimg/thermometer.png"
                          alt=""
                        />
                        <div class="temContainer2">
                          <div
                            class="temprogress"
                            :style="{ height: item.waterTemp + '%' }"
                          ></div>
                        </div>
                        <b class="temdiv2">{{ item.waterTemp }}℃</b>
                      </template>
                      <template v-else>
                        <img
                          class="hotPump-img"
                          :src="getImageSrc(item)"
                          alt=""
                        />
                        <div class="hotPump-name">{{ item.pumpName }}</div>
                        <img
                          class="tem1"
                          src="../../../assets/flowimg/thermometer.png"
                          alt=""
                        />
                        <div class="temContainer1">
                          <div
                            class="temprogress"
                            :style="{ height: item.waterTemp + '%' }"
                          ></div>
                        </div>
                        <b class="temdiv1">{{ item.waterTemp }}℃</b>
                      </template>
                    </template>
                  </template>
                </div>
              </div>
              <!-- 热泵名称定位 -->
              <!-- <div class="pumname">{{ this.pumname }}</div> -->
              <!-- 热泵定位 -->
              <!-- <img
              class="hotpum"
              v-if="this.hotPumState === '1' && this.isBad !== '1'"
              src="../../../assets/flowimg/starthotpum.png"
              alt=""
            />
            <img
              class="hotpum"
              v-else-if="this.isBad === '1'"
              src="../../../assets/flowimg/badhotpum.png"
              alt=""
            />
            <img
              class="hotpum"
              v-else
              src="../../../assets/flowimg/closehotpum.png"
              alt=""
            /> -->
              <!-- 无线网关定位 无状态。-->
              <img
                class="web"
                :src="
                  webstate == 0
                    ? require('../../../assets/flowimg/badweb.png')
                    : require('../../../assets/flowimg/onlineweb.png')
                "
                alt=""
              />
              <!-- 保温水箱定位 -->
              <img
                class="waterBox"
                src="../../../assets/flowimg/waterBox.png"
                alt=""
              />
              <!-- 温度定位1 -->
              <!-- <img
              class="tem1"
              src="../../../assets/flowimg/thermometer.png"
              alt=""
            />
            <div class="temContainer1">
              <div class="temprogress" :style="{ height: temdata + '%' }"></div>
            </div>
            <b class="temdiv1">{{ temdata }}℃</b> -->
              <!-- 温度定位2 -->
              <!-- <img
              class="tem2"
              src="../../../assets/flowimg/thermometer.png"
              alt=""
            />
            <div class="temContainer2">
              <div class="temprogress" :style="{ height: temdata + '%' }"></div>
            </div>
            <b class="temdiv2">{{ temdata }}℃</b> -->
              <!-- 水位定位1 -->
              <div class="progressContainer1" v-if="progress1 > 50">
                <div
                  class="progress"
                  :style="{ height: progress1 + '%' }"
                ></div>
                <b class="propo">{{ progress1 }}%</b>
              </div>
              <div class="progressContainer2" v-else>
                <div
                  class="progress"
                  :style="{ height: progress1 + '%' }"
                ></div>
                <b class="propo">{{ progress1 }}%</b>
              </div>
              <div class="progressName1">{{ progressName1 }}</div>
              <!-- 水位定位2 -->
              <div class="progressContainer3" v-if="progress2 > 50">
                <div
                  class="progress"
                  :style="{ height: progress2 + '%' }"
                ></div>
                <b class="propo">{{ progress2 }}%</b>
              </div>
              <div class="progressContainer4" v-else>
                <div
                  class="progress"
                  :style="{ height: progress2 + '%' }"
                ></div>
                <b class="propo">{{ progress2 }}%</b>
              </div>
              <div class="progressName2">{{ progressName2 }}</div>
            </div>
          </div>
          <div class="changecontent">
            <div class="tablemaeta">系统状态显示</div>
            <el-table
              class="maintable"
              ref="maintable"
              :data="tableData"
              height="200"
              highlight-current-row
              @row-click="handlerow"
              :cell-style="tableRowStyle"
              :show-overflow-tooltip="true"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column label="序号" min-width="50">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="curDate" label="状态时间" min-width="130">
              </el-table-column>
              <el-table-column prop="pumpName" label="热泵名称">
              </el-table-column>
              <el-table-column
                prop="tempSet"
                label="设置温度(℃)"
                min-width="100"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.tempSet }} </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="waterTemp"
                label="实际温度(℃)"
                min-width="100"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.waterTemp }} </span>
                </template>
              </el-table-column>
              <!-- 裙楼、高区 -->
              <el-table-column
                prop="levelSet1"
                label="设置水位1(%)"
                min-width="100"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.levelSet1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="waterLevel1"
                label="实际水位1(%)"
                min-width="100"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.waterLevel1 }} </span>
                </template>
              </el-table-column>
              <!-- 中厨、中区 -->
              <el-table-column
                prop="levelSet2"
                label="设置水位2(%)"
                min-width="100"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.levelSet2 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="waterLevel2"
                label="实际水位2(%)"
                min-width="100"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.waterLevel2 }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="upWaterState" label="补水状态">
                <template slot-scope="{ row }">
                  <span v-if="row.useWaterState === '0'">不运行 </span>
                  <span v-if="row.useWaterState === '1'">运行 </span>
                </template>
              </el-table-column>
              <el-table-column prop="backWaterState" label="回水状态">
                <template slot-scope="{ row }">
                  <span v-if="row.backWaterState === '0'">不运行 </span>
                  <span v-if="row.backWaterState === '1'">运行 </span>
                </template>
              </el-table-column>
              <el-table-column prop="runState" label="热泵状态">
                <template slot-scope="{ row }">
                  <span v-if="row.runState === '0'">不运行 </span>
                  <span v-if="row.runState === '1'">运行 </span>
                </template>
              </el-table-column>
              <el-table-column prop="isFault" label="是否故障">
                <template slot-scope="{ row }">
                  <span v-if="row.isFault === '0'">无故障</span>
                  <span v-if="row.isFault === '1'">有故障</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="folw" v-else>
          <!-- 动态流程图 -->
          <div class="changeimage">
            <div class="flowimg">
              <!-- 冷水水箱定位 -->
              <img
                class="waterBox"
                src="../../../assets/flowimg/coolWaterBox.png"
                alt=""
              />
              <!-- 水位定位1 -->
              <div
                class="progressContainer1"
                v-if="getPercentage(progress1) > 50"
              >
                <div
                  class="progress"
                  :style="{ height: getPercentage(progress1) + '%' }"
                ></div>
                <b class="propo">{{ getPercentage(progress1) }}%</b>
              </div>
              <div class="progressContainer2" v-else>
                <div
                  class="progress"
                  :style="{ height: getPercentage(progress1) + '%' }"
                ></div>
                <b class="propo">{{ getPercentage(progress1) }}%</b>
              </div>
              <div class="waterBoxLong">
                <div>最大值:3.2米</div>
                <div>实际值:{{ progress1 }}米</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { runTime } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { getDay } from "@/utils/datetime";
import { floorTree } from "@/api/region";
import { waterPublic, waterMonitorList } from "@/api/hotWater/waterMonitor";
export default {
  data() {
    return {
      loading: false,
      currentDate: new Date(),
      nowTimer: null,
      timer: null, // 用于存储定时器 ID
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      deviceList: [],
      expandedKeys: [],
      currentId: "", //当前选中高亮的id
      currentName: "", //当前选中的名称
      currentLevel: "", //当前节点的层级
      currentParentId: "", //当前节点的上级的id

      baseTable: [], //公共信息列表数据
      tableData: [], //系统状态表格数据

      // 供水阀状态 0表示关闭 1表示开启
      useWaterState: "",
      upWaterState1: "", //供水泵1状态
      upWaterState2: "", //供水泵2状态
      upWaterState3: "", //供水泵3状态
      upWaterState4: "", //供水泵4状态
      backWaterState: "", //回水阀状态
      // 热泵状态 两个系数
      hotPumState: "",
      isBad: "无故障",
      // 网关在线状态 0表示离线 1表示在线
      webstate: 1,
      // 水位变化数值
      progress1: 0,
      progress2: 0,
      progressName1: "",
      progressName2: "",
      // 温度变化数值
      temdata: 0,
      // 热泵名称
      pumname: "",
      currentWeekday: "",
      isShowHotWater: false,
    };
  },
  computed: {
    formattedDate() {
      const year = this.currentDate.getFullYear();
      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(this.currentDate.getDate()).padStart(2, "0");
      const hours = String(this.currentDate.getHours()).padStart(2, "0");
      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekDay = weekDays[this.currentDate.getDay()];
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
    },
    getHotPumPositionClass() {
      if (this.tableData.length === 4) {
        return "hotPumPosition-four";
      } else if (this.tableData.length === 2) {
        return "hotPumPosition-two";
      }
      return "";
    },
  },
  created() {
    const weekdays = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    const date = new Date();
    const dayIndex = date.getDay();
    this.currentWeekday = weekdays[dayIndex];
    console.log("今天是星期几", this.currentWeekday);
  },
  mounted() {
    this.requestFullscreen();
    this.getSysBuild();
    this.getAlarnStatus();
    this.getDayData();
    // 设置定时器，每 10 秒执行一次
    this.timer = setInterval(() => {
      if (this.isShowHotWater) {
        this.baseMessgae();
      }
      this.sysStatus();
    }, 10000);
    // 每秒更新一次时间
    this.nowTimer = setInterval(() => {
      this.currentDate = new Date();
    }, 1000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
  },
  methods: {
    // 全屏操作
    requestFullscreen() {
      const element = document.documentElement;
      console.log("全屏了吗");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // Firefox
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        // Chrome, Safari and Opera
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        // IE/Edge
        element.msRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
    },
    // 进入系统首页
    goSys() {
      // this.exitFullscreen();
      this.$router.push("/");
    },
    // 返回上一页
    goBack() {
      window.history.go(-2);
    },
    // 监测天数
    getDayData() {
      runTime().then((res) => {
        if (res.code == 200) {
          this.dayData = res.data.runTime;
        }
      });
    },
    // 报警列表
    getAlarnStatus() {
      let data = {
        pageNum: 1,
        pageSize: 10,
        status: "0",
      };
      let timeArr = [getDay(0), getDay(0)];
      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
        if (res.code == 200 && res.rows.length > 0) {
          this.isShowWarning = true;
        } else {
          this.isShowWarning = false;
        }
      });
    },
    goWarning() {
      // this.exitFullscreen();
      this.$router.push("/alarm/alarmRecord");
    },
    getImageSrc(item) {
      // console.log("item", item);
      if (item.runState === "1" && item.isFault !== "1") {
        // 使用 require 函数导入图片
        return require("@/assets/flowimg/starthotpum.png");
      } else if (item.isFault === "1") {
        return require("@/assets/flowimg/badhotpum.png");
      } else {
        return require("@/assets/flowimg/closehotpum.png");
      }
    },
    getSysBuild() {
      floorTree().then((res) => {
        if (res.code == 200) {
          // 只需要保留热水的系统
          console.log("楼栋返回值", res);
          let newRes = { ...res };

          if (newRes.data && newRes.data[0] && newRes.data[0].children) {
            newRes.data[0].children = newRes.data[0].children.filter((item) => {
              // 假设子项有一个 label属性，用于检查是否包含 "热水"
              return (
                (item.label && item.label.includes("热水")) ||
                item.label.includes("冷水")
              );
            });
          }
          // 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级
          const targetLevel = 4;
          // 从 data[0] 开始处理，当前层级为 1
          if (newRes.data[0]) {
            this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel);
          }
          console.log("筛选后的新结果", newRes);
          this.treeData = newRes.data;
          this.$nextTick(() => {
            // 默认展开节点
            this.getExpandedKeys(this.treeData, 2);
            if (this.treeData.length > 0) {
              // 找到最后一层的第一个子节点
              const lastLevelFirstChild = this.findLastLevelFirstChild(
                this.treeData[0]
              );
              // this.$refs.tree.setCurrentKey(
              //   this.treeData[0].children[0].children[0].children[0].id
              // );
              // 设置当前选中的节点,默认高亮
              this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
              // 更新当前节点的信息
              this.currentId = lastLevelFirstChild.id;
              this.currentLevel = lastLevelFirstChild.level;
              this.currentName = lastLevelFirstChild.label;
              console.log("当前选中节点ID", this.currentId);
              console.log("当前选中节点层级", this.currentLevel);
              console.log("当前选中节点名称", this.currentName);
              if (this.currentName === "-1楼") {
                this.progressName1 = "裙楼";
                this.progressName2 = "中厨";
                this.isShowHotWater = true;
                this.baseMessgae();
                this.sysStatus();
              } else if (this.currentName === "3楼") {
                this.progressName1 = "高区";
                this.progressName2 = "中区";
                this.isShowHotWater = true;
                this.baseMessgae();
                this.sysStatus();
              } else {
                this.isShowHotWater = false;
                this.sysStatus();
              }
            }
          });
        }
      });
    },
    // 递归函数，用于去除指定层级往后的 children 数据
    removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
      if (currentLevel >= targetLevel) {
        // 当达到指定层级时，将 children 属性置为空数组
        obj.children = [];
        return;
      }
      if (obj.children && obj.children.length > 0) {
        // 若存在 children 数组，则递归处理每个子项
        for (let i = 0; i < obj.children.length; i++) {
          this.removeChildrenAfterLevel(
            obj.children[i],
            currentLevel + 1,
            targetLevel
          );
        }
      }
    },
    // 递归函数，找到最后一层的第一个子节点
    findLastLevelFirstChild(node, level = 1) {
      if (!node.children || node.children.length === 0) {
        return {
          id: node.id,
          level,
          label: node.label,
        };
      }
      return this.findLastLevelFirstChild(node.children[0], level + 1);
    },
    // 默认只展示一二级菜单
    getExpandedKeys(nodes, level) {
      nodes.forEach((node) => {
        if (level <= this.currentId + 4) {
          this.expandedKeys.push(node.id);
        }
        if (node.children) {
          this.getExpandedKeys(node.children, level + 1);
        }
      });
    },
    // 更换图标
    getIconClass(node) {
      // console.log("当前图标的节点内容", node);
      if (node.level === 4) {
        // 4级菜单时的图标
        if (node.expanded) {
          return "el-icon-document-opened"; // 三级菜单展开时的图标类名
        }
        return "el-icon-document"; // 三级菜单收缩时的图标类名
      }
      if (node.expanded) {
        return "el-icon-folder-opened"; // 非三级菜单展开时的图标类名
      }
      return "el-icon-folder-add"; // 非三级菜单收缩时的图标类名
    },
    handleNodeExpand(node) {
      // 节点展开时触发
    },
    handleNodeCollapse(node) {
      // 节点收缩时触发
    },
    // 点击当前节点，保存节点内容
    handleNodeClick(node, data) {
      console.log("点击的当前节点", node, data);
      if (data.level !== 4) {
        console.log("不是第4层000");
        // 设置当前选中的节点,默认高亮
        this.$refs.tree.setCurrentKey(this.currentId);
        console.log("当前选中节点ID", this.currentId);
        console.log("当前选中节点层级", this.currentLevel);
        console.log("当前选中节点名称", this.currentName);
      } else {
        console.log("第4层111");
        this.currentId = node.id;
        this.currentLevel = data.level;
        this.currentName = node.label;
        // 设置当前选中的节点,默认高亮
        this.$refs.tree.setCurrentKey(this.currentId);
        console.log("当前选中节点ID", this.currentId);
        console.log("当前选中节点层级", this.currentLevel);
        console.log("当前选中节点名称", this.currentName);
      }
      if (this.currentName === "-1楼") {
        this.progressName1 = "裙楼";
        this.progressName2 = "中厨";
        this.isShowHotWater = true;
        this.baseMessgae();
        this.sysStatus();
      } else if (this.currentName === "3楼") {
        this.progressName1 = "高区";
        this.progressName2 = "中区";
        this.isShowHotWater = true;
        this.baseMessgae();
        this.sysStatus();
      } else {
        this.isShowHotWater = false;
        this.sysStatus();
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log("activeName", this.activeName);
    },
    //查询单个热泵状态 点击表格的某一行
    handlerow(row, event, column) {
      console.log("row", row);
      //水位 温度 热泵名称
      if (this.isShowHotWater) {
        this.progress1 = row.waterLevel1;
      } else {
        this.progress1 = row.waterLevel1 - 0.1;
      }
      this.progress2 = row.waterLevel2;
      this.temdata = row.waterTemp;
      this.pumname = row.pumpName;
      // 热泵状态 是否故障
      this.hotPumState = row.runState;
      this.isBad = row.isFault;
      this.useWaterState = row.useWaterState;
      this.upWaterState1 = row.upWaterState1;
      this.upWaterState2 = row.upWaterState2;
      this.upWaterState3 = row.upWaterState3;
      this.upWaterState4 = row.upWaterState4;
      this.backWaterState = row.backWaterState;
      console.log("补水阀状态11111111111111111111", this.useWaterState);
    },
    /* 加入小手状态 */
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      if (row) {
        return "cursor:pointer;text-align:center";
      }
    },
    // 公共信息
    baseMessgae() {
      let data = {
        systemType: "1",
        floorId: this.currentId,
      };
      waterPublic(data).then((res) => {
        console.log("公共信息返回", res);
        if (res.code == 200 && res.rows.length > 0) {
          this.baseTable = [];
          res.rows.forEach((item) => {
            // 初始化一个空对象来存储阀门处理后的结果
            let baseltem = {
              name: item.name,
            };
            if (item.name.includes("温度")) {
              baseltem.unit = "℃";
            }
            if (item.name.includes("压力")) {
              baseltem.unit = "bar";
            }
            if (item.value.includes("采集失败")) {
              baseltem.value = "0";
            } else {
              baseltem.value = item.value;
            }
            // 将处理后的对象添加到 deviceList 中
            if (Object.keys(baseltem).length > 1) {
              this.baseTable.push(baseltem);
            }
          });
          console.log("处理后的公共信息返回", this.baseTable);
        }
      });
    },
    // 系统状态显示
    sysStatus() {
      let systemTypeId = "";
      if (this.isShowHotWater) {
        systemTypeId = "1";
      } else {
        systemTypeId = "6";
      }
      let data = {
        systemType: systemTypeId,
        floorId: this.currentId,
      };
      waterMonitorList(data).then((res) => {
        console.log("系统状态返回", res);
        if (res.code == 200 && res.rows.length > 0) {
          this.tableData = [];
          res.rows.forEach((item) => {
            let deviceItem = {
              ...item,
              runState: Number(item.runState) == 0 ? "0" : "1", //运行状态
              upWaterState: Number(item.upWaterState) == 0 ? "0" : "1", //供水状态
              isFault: Number(item.isFault) == 0 ? "0" : "1", //故障状态
            };
            this.tableData.push(deviceItem);
          });
          console.log("处理后的tableData", this.tableData);
          if (this.tableData.length > 0) {
            // 获取第一行数据
            const firstRow = this.tableData[0];
            // 模拟点击第一行
            this.handlerow(firstRow);
            // 设置当前选中行
            this.$refs.maintable.setCurrentRow(firstRow);
          }
        } else {
          this.tableData = [];
        }
      });
    },
    getPercentage(value) {
      // 将 progress1 的值转换为百分比
      return ((value / 3.2) * 100).toFixed(2);
    },
  },
};
</script>

<style lang="scss" scoped>
.buildingDiv {
  padding-left: 54px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  .title-bg {
    width: 208px;
    height: 38px;
    position: absolute;
    left: 0;
    z-index: 0;
  }
  .title-word {
    z-index: 10;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    color: #ffffff;
    white-space: nowrap;
  }
}
.monitor {
  width: 100%;
  min-height: 100vh;
  background-color: black;
  color: #fff;
  .monitor-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.1rem 0.2rem;
    position: relative;
    .title-left {
      width: 3.41rem;
      height: 0.8rem;
    }
    .title-center {
      width: 9.46rem;
      height: 0.8rem;
    }
    .title-right {
      width: 5.04rem;
      height: 0.78rem;
    }
    .sys-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.28rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
      cursor: pointer;
    }
    .nowTime {
      position: absolute;
      top: 0.37rem;
      right: 0.6rem;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }
    .sys-logo {
      width: 1.8rem;
      height: 0.5rem;
      position: absolute;
      top: 0.26rem;
      left: 0.8rem;
      z-index: 10;
    }
    .monitor-time {
      position: absolute;
      top: 0.44rem;
      left: 4.2rem;
      z-index: 10;
      font-size: 0.18rem;
      color: #ffffff;
      font-weight: bold;
    }
    .icon_warning {
      position: absolute;
      top: 0.39rem;
      right: 4.4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.25rem 0 0.27rem;
      cursor: pointer;
      /* 添加闪烁动画 */
      animation: blink 1s infinite;
    }
    @keyframes blink {
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    }
    .icon_home {
      position: absolute;
      top: 0.39rem;
      right: 4rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      margin: 0 0.2rem 0 0.27rem;
      cursor: pointer;
    }
    .back-icon {
      position: absolute;
      top: 0.39rem;
      right: 3.7rem;
      z-index: 10;
      width: 0.35rem;
      height: 0.32rem;
      cursor: pointer;
    }
  }
}
.app-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  padding: 0.3rem 0.2rem 0 0.35rem;
  width: 100%;
  .left-tree {
    width: 256px;
    padding: 15px 10px 10px 10px;
    border: 1px solid #004b8c;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .status {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;
      .status-li {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
      }
      .status1,
      .status2,
      .status3,
      .status4 {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 5px;
      }
      .status1::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #00d2ff;
        margin-right: 5px;
      }
      .status2::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ff2f2f;
        margin-right: 5px;
      }
      .status3::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ff9908;
        margin-right: 5px;
      }
      .status4::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #7398c7;
        margin-right: 5px;
      }
    }
    .base-mes {
      background-color: #142c4e;
      padding: 20px 10px;
      font-size: 16px;
      border-radius: 6px;
      color: #129bd1;
      .base-title {
        font-family: SourceHanSansCN-Medium;
        font-size: 18px;
        font-style: italic;
        color: #d1d6df;
        margin-bottom: 20px;
      }
      .base-height {
        height: 2.6rem;
        overflow-y: auto;
        .base-li {
          margin-bottom: 20px;
          .deepColor {
            display: inline-block;
            margin: 0 10px 0 5px;
            color: #20ebfa;
            font-weight: bold;
            font-size: 18px;
          }
        }
      }
    }
  }
  .right-monitor {
    width: calc(100% - 280px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .folw {
      width: 100%;
      margin-top: -0.2rem;

      .changeimage {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .flowimg {
          width: 12.27rem;
          height: 5.6rem;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          position: relative;

          .bigMove {
            width: 12.27rem;
            height: 4.6rem;
            position: absolute;
            top: 0;
          }

          .flow-text {
            font-size: 0.17rem;
            line-height: 0.18rem;
            letter-spacing: 0.01rem;
            color: #fefefe;
          }

          .text1 {
            position: absolute;
            top: 3.15rem;
            left: 0.55rem;
            z-index: 1;
          }

          .text2 {
            position: absolute;
            top: 0.22rem;
            left: 5.3rem;
            z-index: 1;
          }

          .text3 {
            position: absolute;
            top: 0.6rem;
            width: 0.4rem;
            right: 1.2rem;
            line-height: 0.28rem;
            z-index: 1;
          }

          .text4 {
            position: absolute;
            top: 2.6rem;
            right: 0.5rem;
            z-index: 1;
          }

          .text5 {
            position: absolute;
            top: 4.4rem;
            right: 0.2rem;
            z-index: 1;
          }

          .text6 {
            position: absolute;
            top: 4.3rem;
            left: 0.55rem;
            z-index: 1;
          }

          .text7 {
            position: absolute;
            top: 3.1rem;
            left: 5.75rem;
            z-index: 1;
          }
          .text8 {
            position: absolute;
            top: 0.5rem;
            left: 1.4rem;
            z-index: 1;
          }
          .text9 {
            position: absolute;
            top: 5.4rem;
            left: 0.55rem;
            z-index: 1;
          }
          .text10 {
            position: absolute;
            top: 6.4rem;
            left: 0.55rem;
            z-index: 1;
          }

          .replenish {
            position: absolute;
            top: 0.7rem;
            left: 0rem;
            width: 2.55rem;
            height: 0.34rem;
            z-index: 1;
          }

          .supply {
            position: absolute;
            top: 1.2rem;
            left: 0rem;
            width: 12.3rem;
            height: 4.9rem;
            z-index: 0;
          }

          .circulate {
            position: absolute;
            top: 1.5rem;
            left: 4.8rem;
            width: 3.5rem;
            height: 1.2rem;
          }

          .coolpum {
            width: 0.9rem;
            height: 0.68rem;
            position: absolute;
            top: 2.4rem;
            left: 0.6rem;
            z-index: 2;
          }

          .waterpum {
            width: 0.9rem;
            height: 0.68rem;
            position: absolute;
            top: 3.55rem;
            left: 0.6rem;
          }
          .waterpum2 {
            width: 0.9rem;
            height: 0.68rem;
            position: absolute;
            top: 4.65rem;
            left: 0.6rem;
          }
          .waterpum3 {
            width: 0.9rem;
            height: 0.68rem;
            position: absolute;
            top: 5.65rem;
            left: 0.6rem;
          }
          .buwaterpum {
            width: 8.5rem;
            height: 2.9rem;
            position: absolute;
            top: -0.1rem;
            right: -0.02rem;
            z-index: 2;
          }
          .buwaterpum2 {
            width: 8.5rem;
            height: 4.4rem;
            position: absolute;
            top: -0.9rem;
            right: -0.02rem;
            z-index: 2;
          }

          .cirpum {
            width: 1rem;
            height: 0.78rem;
            position: absolute;
            top: 2.15rem;
            left: 5.64rem;
          }

          .hotpum {
            width: 2.2rem;
            height: 2.2rem;
            position: absolute;
            top: 1.2rem;
            left: 7.9rem;
          }

          .web {
            width: 0.78rem;
            height: 1.12rem;
            position: absolute;
            top: 0.26rem;
            right: 0.36rem;
          }

          .tem1 {
            width: 0.6rem;
            height: 1.15rem;
            position: absolute;
            top: 2.25rem;
            left: 3.2rem;
            z-index: 3;
          }

          .tem2 {
            width: 0.6rem;
            height: 1.15rem;
            position: absolute;
            top: 2.25rem;
            left: 4.51rem;
            z-index: 3;
          }

          .temContainer1 {
            width: 0.06rem;
            height: 0.65rem;
            background-color: #02072d;
            // background-color: #11aaea;
            position: absolute;
            top: 2.63rem;
            left: 3.46rem;
            z-index: 3;

            .temprogress {
              background-color: #d22727;
              width: 100%;
              position: absolute;
              bottom: 0;
              z-index: 3;
            }
          }
          .temContainer2 {
            width: 0.06rem;
            height: 0.65rem;
            background-color: #02072d;
            // background-color: #11aaea;
            position: absolute;
            top: 2.63rem;
            left: 4.77rem;
            z-index: 3;

            .temprogress {
              background-color: #d22727;
              width: 100%;
              position: absolute;
              bottom: 0;
              z-index: 3;
            }
          }

          .waterBox {
            position: absolute;
            top: 0.3rem;
            left: 2.47rem;
            width: 2.86rem;
            height: 3.32rem;
            z-index: 2;
          }

          .temdiv1 {
            font-size: 0.15rem;
            line-height: 0.18rem;
            letter-spacing: 0.01rem;
            color: #d22727;
            position: absolute;
            top: 2.15rem;
            left: 3.2rem;
            z-index: 3;
          }
          .temdiv2 {
            font-size: 0.15rem;
            line-height: 0.18rem;
            letter-spacing: 0.01rem;
            color: #d22727;
            position: absolute;
            top: 2.15rem;
            left: 4.5rem;
            z-index: 3;
          }

          .progressContainer1 {
            width: 0.3rem;
            height: 1.7rem;
            background-color: #dff1fa;
            margin-left: 2%;
            position: absolute;
            top: 1.8rem;
            left: 2.8rem;
            border: solid 0.01rem #11aaea;
            z-index: 3;

            .progress {
              background-color: #1167db;
              width: 100%;
              position: absolute;
              bottom: 0;
              z-index: 3;
            }

            b {
              font-family: AdobeHeitiStd-Regular;
              font-size: 0.17rem;
              line-height: 0.2rem;
              letter-spacing: 0rem;
              color: #d22727;
              position: absolute;
              top: -0.3rem;
              z-index: 3;
            }
          }

          .progressContainer2 {
            width: 0.3rem;
            height: 1.7rem;
            background-color: #dff1fa;
            margin-left: 2%;
            position: absolute;
            top: 1.8rem;
            left: 2.8rem;
            border: solid 0.01rem red;
            z-index: 3;

            .progress {
              background-color: red;
              width: 100%;
              position: absolute;
              bottom: 0;
              z-index: 3;
            }

            b {
              font-family: AdobeHeitiStd-Regular;
              font-size: 0.17rem;
              line-height: 0.2rem;
              letter-spacing: 0rem;
              color: #d22727;
              position: absolute;
              top: -0.3rem;
              z-index: 3;
            }
          }
          .progressContainer3 {
            width: 0.3rem;
            height: 1.7rem;
            background-color: #dff1fa;
            margin-left: 2%;
            position: absolute;
            top: 1.8rem;
            left: 4.2rem;
            border: solid 0.01rem #11aaea;
            z-index: 3;

            .progress {
              background-color: #1167db;
              width: 100%;
              position: absolute;
              bottom: 0;
              z-index: 3;
            }

            b {
              font-family: AdobeHeitiStd-Regular;
              font-size: 0.17rem;
              line-height: 0.2rem;
              letter-spacing: 0rem;
              color: #d22727;
              position: absolute;
              top: -0.3rem;
              z-index: 3;
            }
          }
          .progressContainer4 {
            width: 0.3rem;
            height: 1.7rem;
            background-color: #dff1fa;
            margin-left: 2%;
            position: absolute;
            top: 1.8rem;
            left: 4.2rem;
            border: solid 0.01rem red;
            z-index: 3;

            .progress {
              background-color: red;
              width: 100%;
              position: absolute;
              bottom: 0;
              z-index: 3;
            }

            b {
              font-family: AdobeHeitiStd-Regular;
              font-size: 0.17rem;
              line-height: 0.2rem;
              letter-spacing: 0rem;
              color: #d22727;
              position: absolute;
              top: -0.3rem;
              z-index: 3;
            }
          }
          .waterBoxLong {
            font-size: 0.17rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.2rem;
            letter-spacing: 0.01rem;
            color: #0a3797;
            position: absolute;
            top: 2.4rem;
            left: 3.6rem;
            z-index: 3;
          }
          .progressName1 {
            font-size: 0.17rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.2rem;
            letter-spacing: 0.01rem;
            color: #0a3797;
            position: absolute;
            top: 2rem;
            left: 2.6rem;
            z-index: 3;
          }
          .progressName2 {
            font-size: 0.17rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.2rem;
            letter-spacing: 0.01rem;
            color: #0a3797;
            position: absolute;
            top: 2rem;
            left: 4rem;
            z-index: 3;
          }

          .pumname {
            font-size: 0.17rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.2rem;
            letter-spacing: 0.01rem;
            color: #fefefe;
            position: absolute;
            top: 0.8rem;
            left: 8.8rem;
            z-index: 1;
          }
          /* 四个元素时的样式 */
          .hotPumPosition-four {
            font-size: 0.17rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.2rem;
            letter-spacing: 0.01rem;
            color: #fefefe;
            position: absolute;
            top: 0.7rem;
            left: 7.8rem;
            z-index: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 2.3rem !important;
            .hotPump-li {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 50% !important;
              position: relative;
              // margin-bottom: 0.2rem;
              .hotPump-img {
                width: 1rem;
                height: 1rem;
                margin: 0.1rem 0;
              }
              .hotPump-tem1 {
                position: absolute;
                bottom: 0.2rem;
                color: #ee3a7f;
                font-size: 0.13rem;
                font-weight: bold;
              }
              .hotPump-tem2 {
                position: absolute;
                bottom: 0.4rem;
                color: #ee3a7f;
                font-size: 0.13rem;
                font-weight: bold;
              }
              .tem1 {
                width: 0.4rem;
                height: 0.7rem;
                position: absolute;
                top: 0.3rem;
                left: 1rem;
                z-index: 3;
              }
              .tem2 {
                width: 0.4rem;
                height: 0.7rem;
                position: absolute;
                top: 0.3rem;
                left: -0.3rem;
                z-index: 3;
              }
              .temContainer2 {
                width: 0.042rem;
                height: 0.4rem;
                background-color: #02072d;
                // background-color: #11aaea;
                position: absolute;
                top: 0.52rem;
                left: -0.12rem;
                z-index: 3;

                .temprogress {
                  background-color: #d22727;
                  width: 100%;
                  position: absolute;
                  bottom: 0;
                  z-index: 3;
                }
              }
              .temdiv2 {
                font-size: 0.15rem;
                line-height: 0.18rem;
                letter-spacing: 0.01rem;
                color: #d22727;
                position: absolute;
                top: 1rem;
                left: -0.5rem;
                z-index: 3;
              }
              .temContainer1 {
                width: 0.042rem;
                height: 0.4rem;
                background-color: #02072d;
                // background-color: #11aaea;
                position: absolute;
                top: 0.52rem;
                left: 1.18rem;
                z-index: 3;

                .temprogress {
                  background-color: #d22727;
                  width: 100%;
                  position: absolute;
                  bottom: 0;
                  z-index: 3;
                }
              }
              .temdiv1 {
                font-size: 0.15rem;
                line-height: 0.18rem;
                letter-spacing: 0.01rem;
                color: #d22727;
                position: absolute;
                top: 1rem;
                left: 1.1rem;
                z-index: 3;
              }
            }
          }
          /* 两个元素时的样式 */
          .hotPumPosition-two {
            font-size: 0.17rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.2rem;
            letter-spacing: 0.01rem;
            color: #fefefe;
            position: absolute;
            top: 0.7rem;
            left: 7.8rem;
            z-index: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1.2rem !important;
            .hotPump-li {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 100% !important;
              position: relative;
              // margin-bottom: 0.2rem;
              .hotPump-img {
                width: 1rem;
                height: 1rem;
                margin: 0.1rem 0;
              }
              .hotPump-tem1 {
                position: absolute;
                bottom: 0.2rem;
                color: #ee3a7f;
                font-size: 0.13rem;
                font-weight: bold;
              }
              .hotPump-tem2 {
                position: absolute;
                bottom: 0.4rem;
                color: #ee3a7f;
                font-size: 0.13rem;
                font-weight: bold;
              }
              .tem2 {
                width: 0.4rem;
                height: 0.7rem;
                position: absolute;
                top: 0.3rem;
                left: -0.3rem;
                z-index: 3;
              }
              .temContainer2 {
                width: 0.042rem;
                height: 0.4rem;
                background-color: #02072d;
                // background-color: #11aaea;
                position: absolute;
                top: 0.52rem;
                left: -0.12rem;
                z-index: 3;

                .temprogress {
                  background-color: #d22727;
                  width: 100%;
                  position: absolute;
                  bottom: 0;
                  z-index: 3;
                }
              }
              .temdiv2 {
                font-size: 0.15rem;
                line-height: 0.18rem;
                letter-spacing: 0.01rem;
                color: #d22727;
                position: absolute;
                top: 1rem;
                left: -0.5rem;
                z-index: 3;
              }
              .temContainer1 {
                width: 0.042rem;
                height: 0.4rem;
                background-color: #02072d;
                // background-color: #11aaea;
                position: absolute;
                top: 0.52rem;
                left: -0.12rem;
                z-index: 3;

                .temprogress {
                  background-color: #d22727;
                  width: 100%;
                  position: absolute;
                  bottom: 0;
                  z-index: 3;
                }
              }
              .temdiv1 {
                font-size: 0.15rem;
                line-height: 0.18rem;
                letter-spacing: 0.01rem;
                color: #d22727;
                position: absolute;
                top: 1rem;
                left: -0.5rem;
                z-index: 3;
              }
            }
          }
        }
      }

      .changecontent {
        background: #142c4e;
        border-radius: 6px;
        // height: 250px;
        padding: 10px;
        overflow: hidden;
        margin-top: 100px;

        .tablemaeta {
          font-family: SourceHanSansCN-Medium;
          font-size: 18px;
          font-style: italic;
          color: #d1d6df;
          margin-bottom: 20px;
        }
      }
    }
  }
}
.tree-container {
  height: 300px; /* 设置固定高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
}
// 滚动条
:-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
  background: transparent !important; /* 滚动条轨道背景色 */
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .tree-left {
    .custom-tree-icon {
      margin-right: 5px;
    }
  }
}
// @media (min-width: 1270px) and (max-width: 1490px) {
//   .changeimage {
//     transform: scale(0.9);
//   }
// }
// @media (min-width: 1120px) and (max-width: 1270px) {
//   .changeimage {
//     transform: scale(0.8);
//   }
// }
// @media (min-width: 990px) and (max-width: 1120px) {
//   .changeimage {
//     transform: scale(0.7);
//   }
// }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
  .base-mes {
    padding: 0.2rem 0.1rem !important;
    font-size: 0.16rem !important;
    border-radius: 0.06rem !important;
    .base-title {
      font-size: 0.18rem !important;
      margin-bottom: 0.2rem !important;
    }
    .base-height {
      height: 2.6rem !important;
      .base-li {
        margin-bottom: 0.2rem !important;
        .deepColor {
          margin: 0 0.1rem 0 0.05rem !important;
          font-size: 0.18rem !important;
        }
      }
    }
  }
  .changecontent {
    border-radius: 0.06rem !important;
    // height: 3rem !important;
    padding: 0.1rem !important;
    margin-top: 1rem !important;

    .tablemaeta {
      font-size: 0.18rem !important;
      margin-bottom: 0.2rem !important;
    }
  }
}
// 手机端样式
@media (min-width: 0px) and (max-width: 990px) {
  .buildingDiv {
    padding-left: 0.54rem !important;
    margin-bottom: 0.2rem !important;
    .title-bg {
      width: 2.08rem !important;
      height: 0.38rem !important;
    }
    .title-word {
      font-size: 15px !important;
    }
  }
  .app-container .left-tree .base-mes {
    padding: 0.2rem 0.1rem !important;
    font-size: 14px !important;
    border-radius: 0.06rem !important;
  }
  .app-container .left-tree .base-mes .base-title {
    font-size: 15px !important;
  }
  .app-container .left-tree .base-mes .base-height {
    height: 5.7rem !important;
  }
  .app-container .right-monitor .folw .changecontent .tablemaeta {
    font-size: 14px !important;
  }
  .app-container {
    padding: 0rem 0.2rem 0 0.35rem !important;
  }
  .app-container .left-tree {
    width: 200px !important;
    min-height: 340px !important;
    padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
    // justify-content: flex-start !important;
  }
  .app-container .tree-div {
    height: 200px !important;
    width: 100%;
    overflow-x: hidden !important;
  }
  .base-height {
    overflow-y: hidden !important;
    min-height: 250px !important;
  }
  .app-container .right-monitor {
    width: calc(100% - 210px) !important;
    .folw {
      .changecontent {
        border-radius: 0.06rem !important;
        padding: 0.1rem !important;
        margin-top: 1rem !important;
      }
    }
  }
  .custom-tree-node {
    font-size: 12px !important;
  }
}
</style>
<style scoped>
/* 自定义高亮颜色 */
.left-tree
  >>> .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #285b9e !important;
  /* color: #f56c6c;  */
  color: #25f1f8;
}
/* 手机端样式 */
@media (min-width: 0px) and (max-width: 990px) {
  .left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 3px !important;
  }
}
</style>
