<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="monitor-content">
      <!-- 整体图 -->
      <img
        class="monitor-img"
        src="../../../assets/images/steamHeating.png"
        alt=""
      />
      <!-- 箭头 -->
      <img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" />
      <img
        class="out-arrow"
        src="../../../assets/images/out-arrow.png"
        alt=""
      />
      <!-- 采暖锅炉温度 -->
      <div class="performance-div">
        <div
          class="performance"
          v-for="(item, index) in steamHeatingFire"
          :key="index"
        >
          <div class="title">{{ item.deviceName }}</div>
          <div class="perdformance-bg">
            <div class="weather-li">
              <span>出水温度：</span>
              <span class="deepColor">{{
                getTemperature(item.properties, "出水温度")
              }}</span>
              <span>℃</span>
            </div>
            <div class="weather-li">
              <span>回水温度：</span>
              <span class="deepColor">{{
                getTemperature(item.properties, "回水温度")
              }}</span>
              <span>℃</span>
            </div>
            <div class="weather-li">
              <span>炉水温度：</span>
              <span class="deepColor">{{
                getTemperature(item.properties, "炉水温度")
              }}</span>
              <span>℃</span>
            </div>
            <div class="weather-li">
              <span>烟道温度：</span>
              <span class="deepColor">{{
                getTemperature(item.properties, "烟道温度")
              }}</span>
              <span>℃</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 采暖锅炉名称 -->
      <div
        class="steamHeatingBoiler1"
        v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName"
        :title="`${steamHeatingFire[0].deviceName}详情`"
        @click="goBoilerDetail(steamHeatingFire[0], false)"
      >
        {{ steamHeatingFire[0].deviceName }}
      </div>
      <div
        class="steamHeatingBoiler2"
        v-if="steamHeatingFire.length > 1 && steamHeatingFire[0].deviceName"
        :title="`${steamHeatingFire[1].deviceName}详情`"
        @click="goBoilerDetail(steamHeatingFire[1], false)"
      >
        {{ steamHeatingFire[1].deviceName }}
      </div>
      <!-- 采暖锅炉点击跳转 -->
      <div
        class="steamHeatingBoiler-main1"
        v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName"
        :title="`${steamHeatingFire[0].deviceName}详情`"
        @click="goBoilerDetail(steamHeatingFire[0], false)"
      ></div>
      <div
        class="steamHeatingBoiler-main2"
        v-if="steamHeatingFire.length > 1 && steamHeatingFire[1].deviceName"
        :title="`${steamHeatingFire[1].deviceName}详情`"
        @click="goBoilerDetail(steamHeatingFire[1], false)"
      ></div>
      <!-- 采暖锅炉运行状态 -->
      <img
        class="steamHeatingBoiler-img1"
        src="../../../assets/images/fan-img.png"
        alt=""
        v-if="steamHeatingBoilerRunClass(1)"
        :class="{ moveClass2: steamHeatingBoilerRunClass(1) }"
      />
      <img
        class="steamHeatingBoiler-img2"
        src="../../../assets/images/fan-img.png"
        alt=""
        v-if="steamHeatingBoilerRunClass(2)"
        :class="{ moveClass2: steamHeatingBoilerRunClass(2) }"
      />
      <!-- 采暖泵名称 -->
      <div
        class="steamHeatingPump1"
        v-if="
          steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName
        "
        :title="`${steamHeatingHzAndRun[0].deviceName}详情`"
        @click="goPumpDetail(steamHeatingHzAndRun[0], false)"
      >
        1#
      </div>
      <div
        class="steamHeatingPump2"
        v-if="
          steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[0].deviceName
        "
        :title="`${steamHeatingHzAndRun[1].deviceName}详情`"
        @click="goPumpDetail(steamHeatingHzAndRun[1], false)"
      >
        2#
      </div>
      <div
        class="steamHeatingPump3"
        v-if="
          steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[0].deviceName
        "
        :title="`${steamHeatingHzAndRun[2].deviceName}详情`"
        @click="goPumpDetail(steamHeatingHzAndRun[2], false)"
      >
        3#
      </div>
      <!-- 采暖泵点击跳转 -->
      <div
        class="steamHeatingPump-main1"
        v-if="
          steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName
        "
        :title="`${steamHeatingHzAndRun[0].deviceName}详情`"
        @click="goPumpDetail(steamHeatingHzAndRun[0], false)"
      ></div>
      <div
        class="steamHeatingPump-main2"
        v-if="
          steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[1].deviceName
        "
        :title="`${steamHeatingHzAndRun[1].deviceName}详情`"
        @click="goPumpDetail(steamHeatingHzAndRun[1], false)"
      ></div>
      <div
        class="steamHeatingPump-main3"
        v-if="
          steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[2].deviceName
        "
        :title="`${steamHeatingHzAndRun[2].deviceName}详情`"
        @click="goPumpDetail(steamHeatingHzAndRun[2], false)"
      ></div>
      <!-- 采暖泵运行状态 -->
      <img
        class="steamHeatingPump-img1"
        src="../../../assets/images/fan-img.png"
        alt=""
        v-if="steamHeatingPumpRunClass(1)"
        :class="{ moveClass2: steamHeatingPumpRunClass(1) }"
      />
      <img
        class="steamHeatingPump-img2"
        src="../../../assets/images/fan-img.png"
        alt=""
        v-if="steamHeatingPumpRunClass(2)"
        :class="{ moveClass2: steamHeatingPumpRunClass(2) }"
      />
      <img
        class="steamHeatingPump-img3"
        src="../../../assets/images/fan-img.png"
        alt=""
        v-if="steamHeatingPumpRunClass(3)"
        :class="{ moveClass2: steamHeatingPumpRunClass(3) }"
      />
      <!-- 采暖泵频率反馈 -->
      <div
        class="steamHeatingPump-hz1"
        v-if="steamHeatingPumpHz(1) && steamHeatingPumpRunClass(1)"
      >
        {{ steamHeatingPumpHz1 }}Hz
      </div>
      <div
        class="steamHeatingPump-hz2"
        v-if="steamHeatingPumpHz(2) && steamHeatingPumpRunClass(2)"
      >
        {{ steamHeatingPumpHz2 }}Hz
      </div>
      <div
        class="steamHeatingPump-hz3"
        v-if="steamHeatingPumpHz(3) && steamHeatingPumpRunClass(3)"
      >
        {{ steamHeatingPumpHz3 }}Hz
      </div>
      <!-- 热量计供回水温度 -->
      <div class="steamHeatingInTem">{{ steamHeatingInTem }}℃</div>
      <div class="steamHeatingOutTem">{{ steamHeatingOutTem }}℃</div>
      <!--供暖区进水阀  -->
      <div class="hotOut-vavle">
        <div class="water-flow-li">
          <span
            @click="goControlList(hotInletBuild, null, '裙楼供暖进水阀')"
            style="cursor: pointer"
            >裙楼供暖进水阀:</span
          >
          <span
            class="break"
            :class="{ connect: hostAndCoolingControlClass(this.hotInletBuild) }"
          ></span>
          <div class="outInre">
            {{ getValueByType(this.hotInletBuild, "13") }}bar
          </div>
        </div>
        <div class="water-flow-li">
          <span
            @click="goControlList(hotInletGuest, null, '客房供暖进水阀')"
            style="cursor: pointer"
            >客房供暖进水阀:</span
          >
          <span
            class="break"
            :class="{ connect: hostAndCoolingControlClass(this.hotInletGuest) }"
          ></span>
          <div class="outInre">
            {{ getValueByType(this.hotInletGuest, "13") }}bar
          </div>
        </div>
      </div>
      <line-children
        :angle1="-75"
        :angle2="0"
        :lineWidth1="280"
        :lineWidth2="240"
        class="hotOut-line"
      ></line-children>
      <!--供暖区出水阀  -->
      <div class="hotIn-vavle">
        <div class="water-flow-li">
          <span
            @click="goControlList(hotOutletBuild, null, '裙楼供暖出水阀')"
            style="cursor: pointer"
            >裙楼供暖出水阀:</span
          >
          <span
            class="break"
            :class="{
              connect: hostAndCoolingControlClass(this.hotOutletBuild),
            }"
          ></span>
          <div class="outInre">
            {{ getValueByType(this.hotOutletBuild, "13") }}bar
          </div>
        </div>
        <div class="water-flow-li">
          <span
            @click="goControlList(hotOutletGuest, null, '客房供暖出水阀')"
            style="cursor: pointer"
            >客房供暖出水阀:</span
          >
          <span
            class="break"
            :class="{
              connect: hostAndCoolingControlClass(this.hotOutletGuest),
            }"
          ></span>
          <div class="outInre">
            {{ getValueByType(this.hotOutletGuest, "13") }}bar
          </div>
        </div>
      </div>
      <line-children
        :angle1="-75"
        :angle2="0"
        :lineWidth1="330"
        :lineWidth2="240"
        class="hotIn-line"
      ></line-children>
      <!-- 采暖监测设备报警信息 -->
      <div class="alarm">
        <div class="special-div one">
          <div class="special-top">
            <div class="special-title">
              <div class="title-left">
                <div>采暖报警信息</div>
              </div>
            </div>
          </div>
          <div class="pumpli-monitor">
            <div class="pumpli-li">
              <div class="pumpli-li-text">报警位置</div>
              <div class="pumpli-li-text">报警时间</div>
            </div>
            <template v-if="alarmList && alarmList.length > 0">
              <div
                class="pumpli-li"
                v-for="(item, index) in alarmList"
                :key="index + 3"
              >
                <div class="pumpli-li-text">{{ item.otherName }}</div>
                <div class="pumpli-li-text">{{ item.curTime }}</div>
              </div>
            </template>
            <template v-else><div class="none-data">暂无数据</div></template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { runTime } from "@/api/centerairC/sysMonitor";
import LineChildren from "./components/lineChildren.vue";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { monitorList } from "@/api/centerairC/sysMonitor";
import { heatPumpAlarmList } from "@/api/boiler/heatingPump";
import { getDay } from "@/utils/datetime";
export default {
  name: "boilerMonitorDetails",
  components: { LineChildren },
  data() {
    return {
      loading: false,
      currentDate: new Date(),
      nowTimer: null,
      timer: null, // 用于存储定时器 ID
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数
      currentWeekday: "",
      // 频率反馈
      steamHeatingPumpHz1: "",
      steamHeatingPumpHz2: "",
      steamHeatingPumpHz3: "",
      hotOutletBuild: [], //裙楼供暖出水阀
      hotInletBuild: [], //裙楼供暖进水阀
      hotOutletGuest: [], //客房供暖出水阀
      hotInletGuest: [], //客房供暖进水阀
      steamHeatingHzAndRun: [], //运行和频率
      steamHeatingFire: [], //热水锅炉火力
      steamHeatingTem: [], //热量计供回水温度数组
      steamHeatingInTem: "", //回水温度
      steamHeatingOutTem: "", //供水温度
      // 报警列表
      alarmList: [],
    };
  },
  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}`;
    },
  },
  created() {
    const weekdays = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    const date = new Date();
    const dayIndex = date.getDay();
    this.currentWeekday = weekdays[dayIndex];
    console.log("今天是星期几", this.currentWeekday);
  },
  mounted() {
    this.getAlarnStatus();
    this.getDayData();
    // 获取当蒸汽采暖数据
    this.getSteamHeatingData();
    this.getMonitorList();
    // 设置定时器，每 10 秒执行一次
    this.timer = setInterval(() => {
      this.getAlarnStatus();
      this.getDayData();
      // 获取当蒸汽采暖数据
      this.getSteamHeatingData();
      this.getMonitorList();
    }, 10000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
  },
  methods: {
    // 进入系统首页
    goSys() {
      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.$router.push("/alarm/alarmRecord");
    },
    // 获取蒸汽锅炉运行监测数据
    getSteamHeatingData() {
      monitorList({ systemType: 3 }).then((res) => {
        if (res.code === 200) {
          console.log("设备监测列表返回", res);
          // 初始化各个设备列表
          this.steamHeatingHzAndRun = []; //频率和运行状态
          this.steamHeatingFire = []; //热水锅炉火力
          this.steamHeatingTem = []; //热量计供回水温度
          res.rows.forEach((row) => {
            switch (row.name) {
              case "11":
                this.steamHeatingHzAndRun = this.processDeviceList(row.values);
                console.log(
                  "裙蒸汽锅炉频率和运行状态",
                  this.steamHeatingHzAndRun
                );
                break;
              case "25":
                this.steamHeatingFire = this.processDeviceList(row.values);
                console.log("裙蒸汽锅炉火力", this.steamHeatingFire);

                break;
              case "6":
                this.steamHeatingTem = row.values;
                console.log("裙蒸汽锅炉热量计供回水温度", this.steamHeatingTem);
                this.steamHeatingTem.forEach((element) => {
                  if (
                    element.collectName.includes("回水温度") &&
                    element.paramType == "12"
                  ) {
                    this.steamHeatingInTem = element.collectValue;
                  }
                  if (
                    element.collectName.includes("供水温度") &&
                    element.paramType == "12"
                  ) {
                    this.steamHeatingOutTem = element.collectValue;
                  }
                });
                break;
              default:
                break;
            }
          });
        }
      });
    },
    getMonitorList() {
      monitorList({ systemType: 0 }).then((res) => {
        if (res.code === 200) {
          console.log("设备监测列表返回", res);

          // 初始化各个设备列表
          this.hotOutletBuild = []; //裙楼供暖出水阀
          this.hotInletBuild = []; //裙楼供暖进水阀
          this.hotOutletGuest = []; //客房供暖出水阀
          this.hotInletGuest = []; //客房供暖进水阀

          res.rows.forEach((row) => {
            switch (row.name) {
              case "18":
                let buildInData = row.values;
                buildInData.forEach((item) => {
                  if (item.deviceName.includes("供暖")) {
                    this.hotInletBuild.push(item);
                  }
                });
                console.log("裙楼供暖进水阀", this.hotInletBuild);
                break;
              case "19":
                let buildOutData = row.values;
                buildOutData.forEach((item) => {
                  if (item.deviceName.includes("供暖")) {
                    this.hotOutletBuild.push(item);
                  }
                });
                console.log("裙楼供暖出水阀", this.hotOutletBuild);
                break;
              case "20":
                let guestInData = row.values;
                guestInData.forEach((item) => {
                  if (item.deviceName.includes("供暖")) {
                    this.hotInletGuest.push(item);
                  }
                });
                console.log("客房供暖进水阀", this.hotInletGuest);
                break;
              case "21":
                let guestOutData = row.values;
                guestOutData.forEach((item) => {
                  if (item.deviceName.includes("供暖")) {
                    this.hotOutletGuest.push(item);
                  }
                });
                console.log("客房供暖出水阀", this.hotOutletGuest);
                break;
              default:
                break;
            }
          });
          this.getHotPumpAlarmList();
        }
      });
    },
    // 封装一个通用函数来处理设备列表
    processDeviceList(values) {
      const deviceList = [];
      // 遍历每个设备属性
      values.forEach((item) => {
        // 提取设备编号
        const match = item.deviceName.match(/(\d+)号/);
        if (match) {
          const deviceNumber = parseInt(match[1]);
          // 如果 deviceList 中对应编号的对象还不存在，则创建一个新对象
          if (!deviceList[deviceNumber - 1]) {
            deviceList[deviceNumber - 1] = {
              deviceName: item.deviceName,
              properties: [],
            };
          }
          // 将当前属性添加到对应设备的 properties 数组中
          deviceList[deviceNumber - 1].properties.push(item);
        }
      });
      // 过滤掉 deviceList 中可能存在的空元素
      return deviceList.filter((item) => item);
    },
    // 裙楼-客房进出水阀启停状态
    hostAndCoolingControlClass(item) {
      // 检查数组中是否存在 paramType 为 "7" 的对象
      const hasParamType7 = item.some((obj) => obj.paramType === "7");

      if (!hasParamType7) {
        // 如果没有 paramType 为 "7" 的对象
        for (let i = 0; i < item.length; i++) {
          if (item[i].paramType === "2") {
            if (Number(item[i].collectValue) !== 0) {
              return true;
            }
          }
        }
      } else {
        // 如果有 paramType 为 "7" 的对象
        for (let i = 0; i < item.length; i++) {
          if (item[i].paramType === "7") {
            const { collectName, collectValue } = item[i];
            if (
              (collectName.includes("开到位") && Number(collectValue) === 1) ||
              (collectName.includes("关到位") && Number(collectValue) === 0)
            ) {
              return true;
            }
          }
        }
      }
      return false;
    },
    // 裙楼、客房的进出水压力
    getValueByType(arr, targetType) {
      const targetItem = arr.find((item) => item.paramType === targetType);
      return targetItem ? targetItem.collectValue : 0;
    },
    // 采暖泵运行状态
    steamHeatingPumpRunClass(index) {
      // 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) {
        const device = this.steamHeatingHzAndRun[i];
        const indexStr = index.toString();
        const deviceName = device.deviceName.toString();
        for (let j = 0; j < indexStr.length; j++) {
          if (deviceName.includes(indexStr[j])) {
            targetDevice = device;
            break;
          }
        }
        if (targetDevice) {
          break;
        }
      }
      // 如果未找到匹配的设备，返回 false
      if (!targetDevice) {
        return false;
      }
      // 获取匹配设备的 properties 数组
      const properties = targetDevice.properties;

      // 检查 properties 数组是否存在
      if (!properties || properties.length === 0) {
        return false;
      }

      // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "1" && Number(item.collectValue) == !0) {
          return true;
        }
      }
      // 否则代表运行状态中的不运行
      return false;
    },
    // 采暖泵频率
    steamHeatingPumpHz(index) {
      // 从 this.steamHeatingHzAndRun  中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) {
        const device = this.steamHeatingHzAndRun[i];
        const indexStr = index.toString();
        const deviceName = device.deviceName.toString();
        for (let j = 0; j < indexStr.length; j++) {
          if (deviceName.includes(indexStr[j])) {
            targetDevice = device;
            break;
          }
        }
        if (targetDevice) {
          break;
        }
      }
      // 如果未找到匹配的设备，返回 false
      if (!targetDevice) {
        return false;
      }
      // 获取匹配设备的 properties 数组
      const properties = targetDevice.properties;

      // 检查 properties 数组是否存在
      if (!properties || properties.length === 0) {
        return false;
      }
      // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "4") {
          // 动态构造属性名
          const propertyName = `steamHeatingPumpHz${index}`;
          // 使用方括号语法动态设置属性值
          this[propertyName] = item.collectValue;
          // this.steamHeatingPumpHz[index] = item.collectValue;
          return true;
        }
      }
      // 否则代表运行状态中的不运行
      return false;
    },
    // 采暖锅炉运行状态
    steamHeatingBoilerRunClass(index) {
      // 从 this.steamHeatingFire 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.steamHeatingFire.length; i++) {
        const device = this.steamHeatingFire[i];
        const indexStr = index.toString();
        const deviceName = device.deviceName.toString();
        for (let j = 0; j < indexStr.length; j++) {
          if (deviceName.includes(indexStr[j])) {
            targetDevice = device;
            break;
          }
        }
        if (targetDevice) {
          break;
        }
      }
      // 如果未找到匹配的设备，返回 false
      if (!targetDevice) {
        return false;
      }
      // 获取匹配设备的 properties 数组
      const properties = targetDevice.properties;

      // 检查 properties 数组是否存在
      if (!properties || properties.length === 0) {
        return false;
      }

      // console.log("锅炉列表111", properties);
      // 遍历 properties 数组，如果当前对象paramType === 45并且item.collectValue !== "0.00"则便是运行状态中的运行
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (
          item.paramType === "45" &&
          item.collectName.includes("火力") &&
          Number(item.collectValue) !== 0
        ) {
          return true;
        }
      }
      // 否则代表运行状态中的不运行
      return false;
    },
    // 采暖锅炉温度
    getTemperature(values, targetName) {
      // console.log("values和targetName", values, targetName);
      const targetItem = values.find((item) =>
        item.collectName.includes(targetName)
      );
      // console.log("得到的targetItem", targetItem.collectValue);
      return targetItem ? targetItem.collectValue : "";
    },
    // 采暖锅炉跳转
    goBoilerDetail(item, val) {
      // console.log("item", item);
      // let hostId = item.properties[0].deviceLedgerId;
      this.$router.push({
        path: "/hotWaterBoilerDetails",
        // query: {
        //   hostId: hostId,
        //   hostName: item.deviceName,
        //   isMagnetic: val,
        // },
      });
    },
    // 采暖泵跳转
    goPumpDetail() {
      this.$router.push({
        path: "/heatingPumpDetails",
      });
    },
    // 采暖泵报警数据
    getHotPumpAlarmList() {
      let queryParams = {
        systemType: "3",
        type: "0",
      };
      heatPumpAlarmList(queryParams).then((res) => {
        if (res.code == 200 && res.rows.length > 0) {
          console.log("采暖泵报警数据", res.rows);
          this.alarmList = res.rows;
          // 上面只是采暖泵报警信息，再处理采暖锅炉报警信息，添加在this.alarmList 最后一行
          this.getBoilerAlarmObj(this.alarmList);
        } else {
          this.alarmList = [];
          this.getBoilerAlarmObj(this.alarmList);
        }
      });
    },
    // 采暖锅炉报警数据
    getBoilerAlarmObj(alarmList) {
      this.steamHeatingFire.forEach((item) => {
        item.properties.forEach((prop) => {
          if (
            prop.paramType === "5" &&
            prop.collectName.includes("故障报警") &&
            Number(prop.collectValue) !== 0
          ) {
            const newAlarmItem = {
              otherName: prop.collectName,
              curTime: prop.collectTime,
            };
            alarmList.push(newAlarmItem);
          }
        });
      });
      this.alarmList = alarmList;
    },
  },
};
</script>

<style lang="scss" scoped>
.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;
    }
  }
  .monitor-content {
    width: 100%;
    min-height: calc(10.74rem - 1rem);
    position: relative;
    .monitor-img {
      position: absolute;
      top: 1rem;
      left: calc((100% - 12.4rem) / 2);
      // left:1rem;
      width: 12.4rem;
      height: 7.25rem;
      z-index: 1;
    }
    .in-arrow {
      position: absolute;
      top: 3.46rem;
      right: 6.95rem;
      transform: rotate(180deg);
      width: 0.3rem;
      height: 0.45rem;
      z-index: 10;
    }
    .out-arrow {
      position: absolute;
      top: 3.35rem;
      right: 7.25rem;
      width: 0.3rem;
      height: 0.45rem;
      z-index: 10;
    }
    .performance-div {
      position: absolute;
      top: 1.1rem !important;
      left: 0.5rem !important;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 0.16rem;
    }
    .performance {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 0.16rem;
      margin-top: 0.55rem;
      .perdformance-bg {
        width: 2.85rem;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 0.2rem;
        color: #ffffff;
        background-image: url(../../../assets/images/border4.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0.15rem 0.1rem 0.25rem 0rem;
      }
      .title {
        z-index: 10;
        width: 100%;
        background-image: url(../../../assets/images/text_img_title.png);
        background-repeat: no-repeat;
        background-repeat: no-repeat;
        background-size: 2rem 0.45rem;
        background-position: bottom left;
        font-family: SourceHanSansCN-Medium;
        font-size: 0.2rem;
        font-style: italic;
        font-weight: bold;
        line-height: 0.6rem;
        color: #ffffff;
        padding-left: 0.5rem;
        margin-bottom: 0.01rem;
        margin-left: 0.4rem;
      }
      .weather {
        min-width: 2.85rem;
        min-height: 1.6rem;
        z-index: 10;
        position: absolute;
        top: 0.8rem;
        left: 0rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 0.2rem;
        // color: rgb(18, 155, 209);
        // color: rgb(147, 204, 236);
        color: #ffffff;
        background-image: url(../../../assets/images/border1.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0.15rem 0.1rem 0.25rem 0rem;
      }
      .weather-li {
        width: 100%;
        padding: 0.05rem 0 0.05rem 0.3rem;
        /* 初始设置上下边框宽度为 1px，颜色和样式可以先设为透明，后续由 border-image 覆盖 */
        border-top: 1px solid transparent;
        border-bottom: 1px dashed #1a3f8f;
        position: relative;
        .deepColor {
          display: inline-block;
          margin: 0 0.1rem 0 0.05rem;
          // color: #20ebfa;
          // color: #18f13c;
          // color: #6cf02f;
          color: #6cf02f;
          font-weight: bold;
          font-family: DIN;
          font-size: 0.25rem;
        }
      }
    }
    .steamHeatingBoiler1 {
      border-bottom: 1px solid rgba(0, 255, 255, 1);
      z-index: 10;
      font-size: 0.22rem;
      font-weight: bold;
      color: aqua;
      position: absolute;
      cursor: pointer;
      top: 5rem;
      left: 7.5rem;
      transform: rotateX(50deg) rotateY(0deg) rotateZ(40deg); /* 分别在 X、Y、Z 轴上旋转 */
      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
    }
    .steamHeatingBoiler2 {
      border-bottom: 1px solid rgba(0, 255, 255, 1);
      z-index: 10;
      font-size: 0.22rem;
      font-weight: bold;
      color: aqua;
      position: absolute;
      cursor: pointer;
      top: 5.8rem;
      left: 9rem;
      transform: rotateX(50deg) rotateY(0deg) rotateZ(38deg); /* 分别在 X、Y、Z 轴上旋转 */
      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
    }
    .steamHeatingBoiler-main1 {
      z-index: 100;
      position: absolute;
      top: 4.6rem;
      left: 8.6rem;
      width: 0.7rem;
      height: 0.7rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
    }
    .steamHeatingBoiler-main2 {
      z-index: 100;
      position: absolute;
      top: 5.25rem;
      left: 10.2rem;
      width: 0.7rem;
      height: 0.7rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
    }
    .steamHeatingBoiler-img1 {
      z-index: 10;
      position: absolute;
      top: 4.42rem;
      left: 8.95rem;
      width: 0.35rem;
      height: 0.35rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .steamHeatingBoiler-img2 {
      z-index: 10;
      position: absolute;
      top: 5.12rem;
      left: 10.55rem;
      width: 0.35rem;
      height: 0.35rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .steamHeatingPump1 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 4.7rem;
      left: 9.85rem;
    }
    .steamHeatingPump2 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 4.9rem;
      left: 10.5rem;
    }
    .steamHeatingPump3 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 5.2rem;
      left: 11.1rem;
    }
    .steamHeatingPump-main1 {
      z-index: 100;
      position: absolute;
      top: 4.35rem;
      left: 9.77rem;
      width: 0.3rem;
      height: 0.55rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
    }
    .steamHeatingPump-main2 {
      z-index: 100;
      position: absolute;
      top: 4.6rem;
      left: 10.4rem;
      width: 0.3rem;
      height: 0.55rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
    }
    .steamHeatingPump-main3 {
      z-index: 100;
      position: absolute;
      top: 4.85rem;
      left: 11rem;
      width: 0.3rem;
      height: 0.55rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
    }
    .steamHeatingPump-img1 {
      z-index: 10;
      position: absolute;
      top: 4.23rem;
      left: 9.96rem;
      width: 0.35rem;
      height: 0.35rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .steamHeatingPump-img2 {
      z-index: 10;
      position: absolute;
      top: 4.46rem;
      left: 10.59rem;
      width: 0.35rem;
      height: 0.35rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .steamHeatingPump-img3 {
      z-index: 10;
      position: absolute;
      top: 4.7rem;
      left: 11.2rem;
      width: 0.35rem;
      height: 0.35rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .steamHeatingPump-hz1 {
      z-index: 10;
      position: absolute;
      top: 4.15rem;
      left: 9.7rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .steamHeatingPump-hz2 {
      z-index: 10;
      position: absolute;
      top: 4.4rem;
      left: 10.35rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .steamHeatingPump-hz3 {
      z-index: 10;
      position: absolute;
      top: 4.64rem;
      left: 11rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .steamHeatingInTem {
      z-index: 10;
      position: absolute;
      top: 5.3rem;
      right: 6.5rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .steamHeatingOutTem {
      z-index: 10;
      position: absolute;
      top: 4.9rem;
      right: 7.1rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .hotIn-vavle {
      z-index: 10;
      position: absolute;
      top: 1rem;
      right: 4.14rem;
      font-size: 0.16rem;
    }
    .hotIn-line {
      z-index: 10;
      position: absolute;
      top: 3.82rem;
      right: 8.3rem;
      font-size: 0.16rem;
    }
    .hotOut-vavle {
      z-index: 10;
      position: absolute;
      top: 2rem;
      right: 3rem;
      font-size: 0.16rem;
    }
    .hotOut-line {
      z-index: 10;
      position: absolute;
      top: 4.35rem;
      right: 7rem;
      font-size: 0.16rem;
    }
    .outInre {
      font-size: 0.16rem;
      font-weight: bold;
      color: #ffffff;
      margin-left: 0.1rem;
    }
    .water-flow-li {
      margin-bottom: 0.04rem;
      color: #46f1e3;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        background-color: rgba(0, 255, 255, 0.2);
        border-radius: 0.1rem;
        padding: 0.01rem 0.03rem;
      }
      .break {
        margin-left: 0.07rem;
        display: inline-block;
        width: 0.18rem;
        height: 0.18rem;
        border-radius: 50%;
        border: 1px solid #46f1e3;
        background-color: transparent !important;
      }
      .connect {
        animation: blink 1s infinite;
        background-color: #38fc52 !important;
      }
    }
    .moveClass {
      animation: host 2s linear infinite;
    }
    .moveClass2 {
      animation: fan 2s linear infinite;
    }
    /* 定义 fan 动画关键帧 */
    @keyframes fan {
      0% {
        /* 修改初始旋转角度 */
        transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
      }
      100% {
        /* 修改结束旋转角度 */
        transform: translateX(-50%) rotateX(60deg) rotateZ(360deg);
      }
    }
    .startClass {
      /* 应用动画 */
      animation: blink 1s infinite;
      background-color: #38fc52 !important;
    }
    .alarm {
      position: absolute;
      top: 6.3rem;
      right: 0.5rem;
      width: 3.7rem;
      .pumpli-monitor {
        margin-top: 0.2rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 2rem;
        overflow-y: auto;
        .pumpli-li {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 0.1rem 0;
          background-color: rgba(0, 71, 125, 0.2);
          border-bottom: 1px solid #00264f !important;
          .pumpli-li-text {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 50%;
            font-size: 0.14rem !important;
          }
        }
        .none-data {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 0.1rem 0;
          background-color: rgba(0, 71, 125, 0.2);
          border-bottom: 1px solid #00264f !important;
          width: 100%;
          font-size: 0.14rem !important;
        }
        .pumpli-li:nth-child(1) {
          font-size: 0.13rem !important;
          height: 0.4rem !important;
          background-color: #00477d !important;
          color: #b5dfff !important;
          position: sticky;
          top: 0;
          z-index: 1;
        }
      }
    }
  }
}
</style>
<style scoped>
.special-div .special-title {
  padding-left: 0.36rem !important;
  font-size: 0.2rem !important;
  line-height: 0.23rem !important;
  background-size: 1.4rem 0.35rem !important;
  background-position: 0px -0.03rem !important;
}
.special-div .special-top {
  padding: 0.04rem 0.26rem 0.04rem 0px;
  min-height: 0.37rem;
}
</style>
