<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=""
      />
      <img
        class="title-right"
        src="../../../assets/images/title-right.png"
        alt=""
      />
      <div class="sys-title">铭汉高效冷源站管理系统</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">
      <!-- 天气数据 -->
      <div class="weather">
        <div class="weather-li">
          <span>室外温度：</span>
          <span class="deepColor">{{ weatherObj.temperature }}</span>
          <span>℃</span>
        </div>
        <div class="weather-li">
          <span>室外湿度：</span>
          <span class="deepColor">{{ weatherObj.humidity }}</span>
          <span>%</span>
        </div>
        <div class="weather-li">
          <span>室外含湿：</span>
          <span class="deepColor">{{ weatherObj.humidityRatio }}</span>
          <span>g/kg</span>
        </div>
        <div class="weather-li">
          <span>室外焓值：</span>
          <span class="deepColor">{{ weatherObj.enthalpy }}</span>
          <span>kj/kg</span>
        </div>
        <div class="weather-li">
          <span>室外露点：</span>
          <span class="deepColor">{{ weatherObj.dewPointTemp }}</span>
          <span>℃</span>
        </div>
        <div class="weather-li">
          <span>室外湿球：</span>
          <span class="deepColor">{{ weatherObj.wetBulbTemp }}</span>
          <span>℃</span>
        </div>
      </div>
      <!-- 系统性能数据 -->
      <div class="performance">
        <div class="title">系 统 性 能</div>
        <div class="perdformance-bg">
          <div class="weather-li">
            <span>实时EER：</span>
            <span class="deepColor">{{ performanceObj.realEER }}</span>
            <span>kw/kw</span>
          </div>
          <div class="weather-li">
            <span>实时功率：</span>
            <span class="deepColor">{{ performanceObj.realPower }}</span>
            <span>kw</span>
          </div>
          <div class="weather-li">
            <span>实时冷量：</span>
            <span class="deepColor">{{ performanceObj.realCold }}</span>
            <span>kw</span>
          </div>
          <div class="weather-li">
            <span>全年EER：</span>
            <span class="deepColor">{{ performanceObj.yearEER }}</span>
            <span>kw</span>
          </div>
          <div class="weather-li">
            <span>全年用电：</span>
            <span class="deepColor">{{ performanceObj.yearPower }}</span>
            <span>kw/h</span>
          </div>
          <div class="weather-li">
            <span>全年产冷：</span>
            <span class="deepColor">{{ performanceObj.yearCold }}</span>
            <span>kw</span>
          </div>
        </div>
      </div>
      <!-- 主机加减载时间 -->
      <!-- <div class="detail-data-bottom">
        <div class="detail-data-li">
          <div class="rightDot">
            <div class="leftDot">
              <span>主机加载时间:</span>
              <span class="dotData">{{ hostAddTime }}</span>
              <span class="dotUnit">min</span>
            </div>
          </div>
        </div>
        <div class="detail-data-li">
          <div class="rightDot">
            <div class="leftDot">
              <span>主机减载时间:</span>
              <span class="dotData">{{ hostReduceTime }}</span>
              <span class="dotUnit">min</span>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 一键启停 -->
      <div class="offClass" @click="handleOneKeyButton">
        <div v-if="isShowOn" class="off-bg on-animation">ON</div>
        <div v-else class="off-bg">OFF</div>
      </div>
      <!-- 系统提示 -->
      <div class="sysTips" v-if="startOrStopStatus">
        <img class="step" src="../../../assets/images/step.png" alt="" />
        <div class="tips-text">{{ startOrStopStatus }}</div>
      </div>
      <!-- <div class="funtion-menu1" @click="goPerformance">
        <div class="menu-title"><div>冷机性能统计</div></div>
        <img class="ditu" src="../../../assets/images/di.png" />
      </div> -->
      <div class="funtion-menu1 menu2" @click="goControl">
        <div class="menu-title"><div>系统控制</div></div>
        <img class="ditu" src="../../../assets/images/di.png" />
      </div>
      <!-- 整体图 -->
      <img
        class="monitor-img"
        src="../../../assets/images/haiwang.png"
        alt=""
      />

      <!-- 主机1数据定位 -->
      <div
        class="hostName1"
        v-if="hostList.length > 0"
        @click="goControlList(hostList, 1)"
      >
        {{ hostList[0].deviceName }}
      </div>
      <div
        class="hostStatus1"
        :class="{ startClass: hostListControlClass(1) }"
      ></div>
      <img
        class="host-img1"
        v-if="hostListRunClass(1)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass: hostListRunClass(1) }"
      />
      <div
        class="host-main1"
        v-if="hostList.length > 0 && hostList[0].deviceName"
        :title="`${hostList[0].deviceName}性能`"
        @click="goHostDetail(hostList[0], false)"
      ></div>
      <div class="hostLoad1" v-if="hostListRunClass(1) && hostLoadData(1)">
        {{ hostLoad1 }}%
      </div>
      <div class="water-flow1">
        <div class="water-flow-li">
          <span>1#冷却水流:</span>
          <span v-if="hostCoolingWaterFlowClass(1)">接通</span>
          <span v-else>断开</span>
          <span
            class="break"
            :class="{ connect: hostCoolingWaterFlowClass(1) }"
          ></span>
        </div>
        <div class="water-flow-li">
          <span>1#冷冻水流:</span>
          <span v-if="hostCoolingWaterFlowClass(1)">接通</span>
          <span v-else>断开</span>
          <span
            class="break"
            :class="{ connect: hostFreezeWaterFlowClass(1) }"
          ></span>
        </div>
      </div>
      <line-children
        :angle1="-0"
        :angle2="-40"
        :lineWidth1="200"
        :lineWidth2="100"
        class="host-line1"
      ></line-children>
      <!-- 主机2数据定位 -->
      <div
        class="hostName2"
        v-if="hostList.length > 0"
        @click="goControlList(hostList, 2)"
      >
        {{ hostList[1].deviceName }}
      </div>
      <div
        class="hostStatus2"
        :class="{ startClass: hostListControlClass(2) }"
      ></div>
      <img
        class="host-img2"
        v-if="hostListRunClass(2)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass: hostListRunClass(2) }"
      />
      <div
        class="host-main2"
        v-if="hostList.length > 0 && hostList[1].deviceName"
        :title="`${hostList[1].deviceName}性能`"
        @click="goHostDetail(hostList[1], false)"
      ></div>
      <div class="hostLoad2" v-if="hostListRunClass(2) && hostLoadData(2)">
        {{ hostLoad2 }}%
      </div>
      <div class="water-flow2">
        <div class="water-flow-li">
          <span>2#冷却水流:</span>
          <span v-if="hostCoolingWaterFlowClass(2)">接通</span>
          <span v-else>断开</span>
          <span
            class="break"
            :class="{ connect: hostCoolingWaterFlowClass(2) }"
          ></span>
        </div>
        <div class="water-flow-li">
          <span>2#冷冻水流:</span>
          <span v-if="hostCoolingWaterFlowClass(2)">接通</span>
          <span v-else>断开</span>
          <span
            class="break"
            :class="{ connect: hostFreezeWaterFlowClass(2) }"
          ></span>
        </div>
      </div>
      <line-children
        :angle1="-0"
        :angle2="-40"
        :lineWidth1="230"
        :lineWidth2="330"
        class="host-line2"
      ></line-children>
      <!-- 主机3数据定位 -->
      <div
        class="hostName3"
        v-if="hostList.length > 0"
        @click="goControlList(hostList, 3)"
      >
        {{ hostList[2].deviceName }}
      </div>
      <!-- 主机启停状态 -->
      <div
        class="hostStatus3"
        :class="{ startClass: hostListControlClass(3) }"
      ></div>
      <!-- 主机运行状态 -->
      <img
        class="host-img3"
        v-if="hostListRunClass(3)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass: hostListRunClass(3) }"
      />
      <!-- 点击主机跳转到主机参数详情页 -->
      <div
        class="host-main3"
        v-if="hostList.length > 0 && hostList[2].deviceName"
        :title="`${hostList[2].deviceName}性能`"
        @click="goHostDetail(hostList[2], true)"
      ></div>
      <!-- 主机负载 -->
      <div class="hostLoad3" v-if="hostListRunClass(3) && hostLoadData(3)">
        {{ hostLoad3 }}%
      </div>
      <!-- 主机冷却冷冻水流信息 -->
      <div class="water-flow3">
        <div class="water-flow-li">
          <span>3#冷却水流:</span>
          <span v-if="hostCoolingWaterFlowClass(3)">接通</span>
          <span v-else>断开</span>
          <span
            class="break"
            :class="{ connect: hostCoolingWaterFlowClass(3) }"
          ></span>
        </div>
        <div class="water-flow-li">
          <span>3#冷冻水流:</span>
          <span v-if="hostCoolingWaterFlowClass(3)">接通</span>
          <span v-else>断开</span>
          <span
            class="break"
            :class="{ connect: hostFreezeWaterFlowClass(3) }"
          ></span>
        </div>
      </div>
      <!-- 线+主机冷却水流状态 -->
      <line-children
        :angle1="-0"
        :angle2="-45"
        :lineWidth1="300"
        :lineWidth2="500"
        class="host-line3"
      ></line-children>

      <!-- 冷却泵数据定位 -->
      <div class="coolingPump1" @click="goControlList(coolingPump, 1)">1#</div>
      <div class="coolingPump2" @click="goControlList(coolingPump, 2)">2#</div>
      <div class="coolingPump3" @click="goControlList(coolingPump, 3)">3#</div>
      <!-- 运行状态 -->
      <img
        class="cooling-img1"
        v-if="coolingPumpRunClass(1)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass2: coolingPumpRunClass(1) }"
      />
      <img
        class="cooling-img2"
        v-if="coolingPumpRunClass(2)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass2: coolingPumpRunClass(2) }"
      />
      <img
        class="cooling-img3"
        v-if="coolingPumpRunClass(3)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass2: coolingPumpRunClass(3) }"
      />
      <!-- 频率反馈 -->
      <div
        class="cooling-hz1"
        v-if="coolingPumpHz(1) && coolingPumpRunClass(1)"
      >
        {{ coolingPumpHz1 }}Hz
      </div>
      <div
        class="cooling-hz2"
        v-if="coolingPumpHz(2) && coolingPumpRunClass(2)"
      >
        {{ coolingPumpHz2 }}Hz
      </div>
      <div
        class="cooling-hz3"
        v-if="coolingPumpHz(3) && coolingPumpRunClass(3)"
      >
        {{ coolingPumpHz3 }}Hz
      </div>
      <!-- 冷冻泵数据定位 -->
      <div class="freezingPump1" @click="goControlList(freezingPump, 1)">
        1#
      </div>
      <div class="freezingPump2" @click="goControlList(freezingPump, 2)">
        2#
      </div>
      <div class="freezingPump3" @click="goControlList(freezingPump, 3)">
        3#
      </div>
      <img
        class="freezing-img1"
        v-if="freezingPumpRunClass(1)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass2: freezingPumpRunClass(1) }"
      />
      <img
        class="freezing-img2"
        v-if="freezingPumpRunClass(2)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass2: freezingPumpRunClass(2) }"
      />
      <img
        class="freezing-img3"
        v-if="freezingPumpRunClass(3)"
        src="../../../assets/images/fan-img.png"
        alt=""
        :class="{ moveClass2: freezingPumpRunClass(3) }"
      />
      <!-- 频率反馈 旋转+有频率反馈才显示 -->
      <div
        class="freezing-hz1"
        v-if="freezingPumpHz(1) && freezingPumpRunClass(1)"
      >
        {{ freezingPumpHz1 }}Hz
      </div>
      <div
        class="freezing-hz2"
        v-if="freezingPumpHz(2) && freezingPumpRunClass(2)"
      >
        {{ freezingPumpHz2 }}Hz
      </div>
      <div
        class="freezing-hz3"
        v-if="freezingPumpHz(3) && freezingPumpRunClass(3)"
      >
        {{ freezingPumpHz3 }}Hz
      </div>
      <!-- 冷却塔数据定位 五个风机 三个出水阀 -->
      <div class="coolingTower3" @click="goControlFanList(coolingTower, 3, 1)">
        3#-1
      </div>
      <div class="coolingTower22" @click="goControlFanList(coolingTower, 2, 2)">
        2#-2
      </div>
      <div class="coolingTower21" @click="goControlFanList(coolingTower, 2, 1)">
        2#-1
      </div>
      <div class="coolingTower12" @click="goControlFanList(coolingTower, 1, 2)">
        1#-2
      </div>
      <div class="coolingTower11" @click="goControlFanList(coolingTower, 1, 1)">
        1#-1
      </div>
      <!-- 风机频率 -->
      <div
        class="coolingTowerHz3"
        v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)"
      >
        {{ coolingTowerHz31 }}Hz
      </div>
      <div
        class="coolingTowerHz22"
        v-if="coolingTowerHz(1, 2) && coolingTowerRunClass(1, 2)"
      >
        {{ coolingTowerHz22 }}Hz
      </div>
      <div
        class="coolingTowerHz21"
        v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"
      >
        {{ coolingTowerHz21 }}Hz
      </div>
      <div
        class="coolingTowerHz12"
        v-if="coolingTowerHz(0, 2) && coolingTowerRunClass(0, 2)"
      >
        {{ coolingTowerHz12 }}Hz
      </div>
      <div
        class="coolingTowerHz11"
        v-if="coolingTowerHz(0, 1) && coolingTowerRunClass(0, 1)"
      >
        {{ coolingTowerHz11 }}Hz
      </div>
      <!-- 3号冷却塔风机1 -->
      <img
        class="fan-img1"
        v-if="coolingTowerRunClass(2, 1)"
        :class="{ moveClass2: coolingTowerRunClass(2, 1) }"
        src="../../../assets/images/fan-img.png"
        alt=""
      />
      <!-- 2号冷却塔风机1 -->
      <img
        class="fan-img3"
        v-if="coolingTowerRunClass(1, 1)"
        :class="{ moveClass2: coolingTowerRunClass(1, 1) }"
        src="../../../assets/images/fan-img.png"
        alt=""
      />
      <!-- 2号冷却塔风机2 -->
      <img
        class="fan-img2"
        v-if="coolingTowerRunClass(1, 2)"
        :class="{ moveClass2: coolingTowerRunClass(1, 2) }"
        src="../../../assets/images/fan-img.png"
        alt=""
      />
      <!-- 1 号冷却塔风机1 -->
      <img
        class="fan-img5"
        v-if="coolingTowerRunClass(0, 1)"
        :class="{ moveClass2: coolingTowerRunClass(0, 1) }"
        src="../../../assets/images/fan-img.png"
        alt=""
      />
      <!-- 1号冷却塔风机2 -->
      <img
        class="fan-img4"
        v-if="coolingTowerRunClass(0, 2)"
        :class="{ moveClass2: coolingTowerRunClass(0, 2) }"
        src="../../../assets/images/fan-img.png"
        alt=""
      />
      <div
        class="towerValve1"
        :class="{ startClass: towerValveControlClass(3) }"
        @click="goControlList(coolingTowerOutlet, 3)"
      ></div>
      <div
        class="towerValve2"
        :class="{ startClass: towerValveControlClass(2) }"
        @click="goControlList(coolingTowerOutlet, 2)"
      ></div>
      <div
        class="towerValve3"
        :class="{ startClass: towerValveControlClass(1) }"
        @click="goControlList(coolingTowerOutlet, 1)"
      ></div>
      <!-- 冷冻蝶阀数据定位 -->
      <div
        class="frozenValve1"
        :class="{ startClass: frozenValveControlClass(1) }"
        @click="goControlList(frozenValve, 1)"
      ></div>
      <div
        class="frozenValve2"
        :class="{ startClass: frozenValveControlClass(2) }"
        @click="goControlList(frozenValve, 2)"
      ></div>
      <div
        class="frozenValve3"
        :class="{ startClass: frozenValveControlClass(3) }"
        @click="goControlList(frozenValve, 3)"
      ></div>
      <!-- 冷却蝶阀数据定位 -->
      <div
        class="coolingValue1"
        :class="{ startClass: coolingValueControlClass(1) }"
        @click="goControlList(coolingValue, 1)"
      ></div>
      <div
        class="coolingValue2"
        :class="{ startClass: coolingValueControlClass(2) }"
        @click="goControlList(coolingValue, 2)"
      ></div>
      <div
        class="coolingValue3"
        :class="{ startClass: coolingValueControlClass(3) }"
        @click="goControlList(coolingValue, 3)"
      ></div>
      <!-- 箭头 -->
      <img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" />
      <img
        class="out-arrow"
        src="../../../assets/images/out-arrow.png"
        alt=""
      />
      <!-- 冷冻进出水温度 0是out供(出)水，1是in回(进)水 -->
      <div class="freezingInTem">{{ freezingInTem }}℃</div>
      <div class="freezingOutTem">{{ freezingOutTem }}℃</div>
      <!-- 冷冻水流 -->
      <div class="freezingOutWater">{{ freezingOutWater }}m³/h</div>
      <!-- 冷冻进出水压力 -->
      <div class="freezingInPre">{{ freezingInPre }}KPa</div>
      <div class="freezingOutPre">{{ freezingOutPre }}KPa</div>
      <!-- 冷却进出水温度 -->
      <div class="coolingInTem">{{ coolingInTem }}℃</div>
      <div class="coolingOutTem">{{ coolingOutTem }}℃</div>
      <!-- 报警状态与系统模式 -->
      <div class="statusAndModel" v-if="isWarning">
        <img src="../../../assets/images/red.png" class="warnStatus" alt="" />
        <img
          src="../../../assets/images/border6.png"
          class="modelStatus"
          alt=""
        />
        <div class="sysWarning" @click="showAlarm">Warning</div>
        <div class="sysStatus">{{ sysStatus }}</div>
      </div>
      <div class="statusAndModel" v-else>
        <img src="../../../assets/images/blue.png" class="warnStatus" alt="" />
        <img
          src="../../../assets/images/border5.png"
          class="modelStatus"
          alt=""
        />
        <div class="sysNormal">Normal</div>
        <div class="sysStatus">{{ sysStatus }}</div>
      </div>
    </div>
    <!-- 报警弹框内容 -->
    <el-dialog
      title="报警内容"
      :visible.sync="openDialog"
      width="680px"
      append-to-body
    >
      <el-table :data="alarmList" height="600px">
        <el-table-column
          prop="otherName"
          label="报警位置"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="curTime"
          label="报警时间"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 控制弹框内容 -->
    <el-dialog
      :title="controlTitle"
      :visible.sync="openControlDialog"
      width="850px"
      append-to-body
      class="monitor-dialog"
    >
      <div class="device-container">
        <div class="device-li">
          <div class="device-name">手自动切换</div>
          <div class="device-name">手动控制</div>
          <div
            class="device-name"
            v-if="hasFrequencySet(controlArr[0], 'frequencyAutotext')"
          >
            频率手自动切换
          </div>
          <div
            v-if="hasFrequencySet(controlArr[0], 'frequency')"
            class="device-name"
          >
            频率反馈
          </div>
          <div
            v-if="hasFrequencySet(controlArr[0], 'frequencySet')"
            class="device-name"
          >
            频率调节
          </div>
        </div>
        <div
          class="device-li"
          v-for="(item, index) in controlArr"
          :key="index + 1"
        >
          <div class="device-name">
            <el-switch
              style="display: block"
              v-model="item.automaticText"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="手动"
              inactive-text="自动"
              @change="handleAutomaticText(item)"
            >
            </el-switch>
          </div>
          <div class="device-name">
            <el-switch
              style="display: block"
              v-model="item.controlText"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="停止"
              @change="handleControlText(item)"
            >
            </el-switch>
          </div>
          <!-- 频率-手自动切换 -->
          <div
            class="device-name"
            v-if="hasFrequencySet(controlArr[0], 'frequencyAutotext')"
          >
            <el-switch
              style="display: block"
              v-model="item.frequencyAutotext"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="手动"
              inactive-text="自动"
              @change="handleFrequencyAutomaticText(item)"
            >
            </el-switch>
          </div>
          <div
            class="device-name"
            v-if="hasFrequencySet(controlArr[0], 'frequency')"
          >
            {{ item.frequency }}Hz
          </div>
          <!-- 频率调节 -->
          <div v-if="hasFrequencySet(controlArr[0], 'frequencySet')">
            <el-input
              v-model="item.frequencySet"
              size="mini"
              @keyup.enter.native="handleEnter(item, $event)"
              @input="handleInput(item)"
              @blur="handleBlur()"
              :disabled="!item.frequencyAutotext"
            ></el-input>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  weatherData,
  sysPerformance,
  oneKeyButton,
  monitorList,
  operationConrol,
  systemMode,
  runTime,
} from "@/api/centerairC/sysMonitor";
import LineChildren from "./components/lineChildren.vue";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { policyListData } from "@/api/centerairC/strategy";
import { getDay } from "@/utils/datetime";
export default {
  components: { LineChildren },
  data() {
    return {
      loading: false,
      weatherObj: {},
      performanceObj: {},
      hostList: [], //主机列表
      coolingPump: [], //冷却泵
      freezingPump: [], //冷冻泵
      coolingTower: [], //冷却塔
      frozenValve: [], //冷冻蝶阀
      coolingValue: [], //冷却蝶阀
      coolingTowerInlet: [], //冷却塔进水阀
      coolingTowerOutlet: [], //冷却塔出水阀
      freezingManifold: [], //冷冻总管
      isShowOn: false, //一键启停,false是Off,true显示On
      oneKeyButtonId: "",

      // 主机负载
      hostLoad1: "",
      hostLoad2: "",
      hostLoad3: "",
      // 冷却泵频率反馈
      coolingPumpHz1: "",
      coolingPumpHz2: "",
      coolingPumpHz3: "",
      // 冷冻泵频率反馈
      freezingPumpHz1: "",
      freezingPumpHz2: "",
      freezingPumpHz3: "",
      // 冷却塔风机频率
      coolingTowerHz31: "",
      coolingTowerHz22: "",
      coolingTowerHz21: "",
      coolingTowerHz12: "",
      coolingTowerHz11: "",
      // 冷冻泵进出水温度
      freezingInTem: "",
      freezingOutTem: "",
      // 冷冻水流
      freezingOutWater: "",
      // 冷冻泵进出压力
      freezingInPre: "",
      freezingOutPre: "",
      // 冷却进出水温度
      coolingInTem: "",
      coolingOutTem: "",

      // 报警标志
      isWarning: false,
      // 报警列表
      alarmList: [],
      // 系统模式
      sysStatus: "",
      // 模式提示
      startOrStopStatus: "",
      openDialog: false,
      timer: null, // 用于存储定时器 ID

      currentDate: new Date(),
      nowTimer: null,
      isShowWarning: false, //是否有报警
      dayData: "", //监测天数

      // 控制弹框
      controlTitle: "",
      openControlDialog: false,
      controlArr: [],
      hostAddTime: "", //主机加载时间
      hostReduceTime: "", //主机减载时间
    };
  },
  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() {},
  mounted() {
    // 在组件挂载后尝试进入全屏
    this.requestFullscreen();
    // 首次进入页面时执行
    this.getWeatherData();
    this.getSystemMode();
    this.getPerformance();
    this.getOneKeyButton();
    this.getMonitorList();
    this.getAlarnStatus();
    this.getDayData();
    this.getPolicyList();

    // 设置定时器，每 10 秒执行一次
    this.timer = setInterval(() => {
      this.getWeatherData();
      this.getSystemMode();
      this.getPerformance();
      this.getOneKeyButton();
      this.getMonitorList();
    }, 10000);
    // 每秒更新一次时间
    this.nowTimer = setInterval(() => {
      this.currentDate = new Date();
    }, 1000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
    // 组件销毁前清除定时器
    if (this.nowTimer) {
      clearInterval(this.nowTimer);
    }
    // 在组件销毁前退出全屏
    this.exitFullscreen();
  },
  methods: {
    // 全屏操作
    requestFullscreen() {
      const element = document.documentElement;
      console.log("全屏操作没有进行中啊~~~~~~~~~~~~~~~~", element);
      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() {
      // 退出全屏
      // this.exitFullscreen();
      window.history.go(-2);
    },
    // 冷机性能
    goPerformance() {
      // 退出全屏
      // this.exitFullscreen();
      this.$router.push("/performance");
    },
    // 系统控制
    goControl() {
      // 退出全屏
      // this.exitFullscreen();
      this.$router.push("/centerairC/monitorControl/sysControl");
    },
    // 监测天数
    getDayData() {
      runTime().then((res) => {
        if (res.code == 200) {
          this.dayData = res.data.runTime;
        }
      });
    },

    // 主机参数
    goHostDetail(item, val) {
      console.log("item", item);
      let hostId = item.properties[0].deviceLedgerId;
      this.$router.push({
        path: "/hostDetails",
        query: {
          hostId: hostId,
          hostName: item.deviceName,
          isMagnetic: val,
        },
      });
    },
    // 获取天气相关数据
    getWeatherData() {
      weatherData().then((res) => {
        if (res.code == 200) {
          this.weatherObj = res.data;
        }
      });
    },
    // 获取系统性能数据
    getPerformance() {
      sysPerformance().then((res) => {
        if (res.code == 200) {
          this.performanceObj = res.data;
        }
      });
    },
    // 获取当前系统模式/启动、停止运行状态/报警列表
    getSystemMode() {
      let data = {
        systemType: "0",
        paramType: "27",
      };
      systemMode(data).then((res) => {
        console.log("当前系统模式与报警列表返回", res);
        if (res.code == 200) {
          this.sysStatus = res.data.autoType;
          this.alarmList = res.data.alarmList;
          if (res.data.alarmList.length > 0) {
            this.isWarning = true;
          } else {
            this.isWarning = false;
          }
          this.startOrStopStatus = res.data.startOrStopStatus;
        }
      });
    },
    showAlarm() {
      this.openDialog = true;
    },
    // 获取一键启停信息
    getOneKeyButton() {
      return new Promise((resolve, reject) => {
        let data = {
          systemType: 0,
          paramType: "27",
        };
        oneKeyButton(data)
          .then((res) => {
            console.log("一键启停返回信息", res);
            if (res.code === 200) {
              this.oneKeyButtonId = res.data.id;
              if (Number(res.data.curValue) == 0) {
                this.isShowOn = false;
              } else {
                this.isShowOn = true;
              }
            } else {
              this.oneKeyButtonId = "";
              this.isShowOn = false;
            }
            // 成功时解析 Promise
            resolve(res);
          })
          .catch((error) => {
            // 失败时拒绝 Promise
            reject(error);
          });
      });
    },
    // 一键启停按钮
    handleOneKeyButton() {
      let param = "";
      let paramText = "";
      if (this.isShowOn) {
        // this.isShowOn为true代表ON,此时点击按钮想OFF
        param = 0;
        paramText = "一键关闭";
      } else {
        param = 1;
        paramText = "一键开启";
      }
      this.$confirm(`确定要${paramText}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: this.oneKeyButtonId,
            param: param,
          };
          operationConrol([data])
            .then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess("指令下发成功!");
                // 开启 loading 效果
                this.loading = true;
                // 更新状态;
                setTimeout(() => {
                  this.getOneKeyButton().finally(() => {
                    // 关闭 loading 效果
                    this.loading = false;
                  });
                }, 5000);
              } else {
                this.getOneKeyButton();
              }
            })
            .catch((error) => {
              console.log("请求发生错误，更新设备状态", error);
              this.ggetOneKeyButton();
            });
        })
        .catch(() => {});
    },
    // 主机加减载时间min
    getPolicyList() {
      return new Promise((resolve, reject) => {
        let data = {
          systemType: "0",
          funPolicyType: "1",
        };
        policyListData(data)
          .then((res) => {
            console.log("策略返回res", res);
            if (res.code == 200) {
              let dataList = res.rows;
              // 筛选出主机->加减载时间
              dataList.forEach((val) => {
                if (val.name === "主机策略") {
                  val.values.forEach((child) => {
                    if (child.pointName === "主机加载时间") {
                      this.hostAddTime = child.curValue;
                    }
                    if (child.pointName === "主机减载时间") {
                      this.hostReduceTime = child.curValue;
                    }
                  });
                }
              });
            } else {
              this.policyList = [];
            }
            // 成功时解析 Promise
            resolve(res);
          })
          .catch((error) => {
            // 失败时拒绝 Promise
            reject(error);
          });
      });
    },
    // 系统监测数据
    getMonitorList() {
      monitorList({ systemType: 0 }).then((res) => {
        if (res.code === 200) {
          console.log("设备监测列表返回", res);

          // 初始化各个设备列表
          this.hostList = [];
          this.coolingPump = [];
          this.freezingPump = [];
          this.coolingTower = [];
          this.frozenValve = [];
          this.coolingValue = [];
          this.coolingTowerInlet = [];
          this.coolingTowerOutlet = [];
          this.freezingManifold = [];

          res.rows.forEach((row) => {
            switch (row.name) {
              case "0":
                this.hostList = this.processDeviceList(row.values);
                console.log("主机列表", this.hostList);
                break;
              case "1":
                this.coolingPump = this.processDeviceList(row.values);
                console.log("冷却泵列表", this.coolingPump);
                break;
              case "2":
                this.freezingPump = this.processDeviceList(row.values);
                console.log("冷冻泵列表", this.freezingPump);
                break;
              case "3":
                this.coolingTower = this.processDeviceList(row.values);
                console.log("冷却塔列表", this.coolingTower);
                break;
              case "4":
                this.frozenValve = this.processDeviceList(row.values);
                console.log("冷冻蝶阀列表", this.frozenValve);
                break;
              case "7":
                this.coolingValue = this.processDeviceList(row.values);
                console.log("冷却蝶阀列表", this.coolingValue);
                break;
              case "8":
                this.coolingTowerInlet = this.processDeviceList(row.values);
                console.log("冷却塔进水阀列表", this.coolingTowerInlet);
                break;
              case "9":
                this.coolingTowerOutlet = this.processDeviceList(row.values);
                console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
                break;
              case "15":
                this.freezingManifold = row.values;
                console.log("冷冻总管", this.freezingManifold);
                this.freezingManifoldData();
                break;
              default:
                break;
            }
          });
        }
      });
    },
    // 封装一个通用函数来处理设备列表
    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);
    },
    // 主机负载
    hostLoadData(index) {
      // 检查 hostList 长度是否足够
      if (this.hostList.length < index) {
        return false;
      }
      // 检查 properties 数组是否存在    hostList[index]数组的properties数组
      const properties = this.hostList[index-1].properties;
      if (!properties || properties.length === 0) {
        return false;
      }
      // 遍历 properties 数组，如果当前对象paramType === 28表示主机负载
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "28") {
          // 动态构造属性名
          const propertyName = `hostLoad${index}`;
          // 使用方括号语法动态设置属性值
          this[propertyName] = item.collectValue;
          return true;
        }
      }
      // 否则代表启停控制中的停止
      return false;
    },
    // 主机启停状态
    hostListControlClass(index) {
      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.hostList.length; i++) {
        const device = this.hostList[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;
      if (!properties || properties.length === 0) {
        return false;
      }
      // 遍历 properties 数组，如果当前对象paramType === 2并且item.collectValue !== "0.00"则便是启停控制中的开启
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (
          item.paramType === "2" &&
          Number(item.collectValue) !== 0 &&
          item.collectName.includes("启停")
        ) {
          return true;
        }
      }
      // 否则代表启停控制中的停止
      return false;
    },
    // 主机运行状态
    hostListRunClass(index) {
      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.hostList.length; i++) {
        const device = this.hostList[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 数组是否存在    hostList[index]数组的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;
    },
    // 主机冷却水流信号
    hostCoolingWaterFlowClass(index) {
      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.hostList.length; i++) {
        const device = this.hostList[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 数组是否存在    hostList[index]数组的properties数组
      if (!properties || properties.length === 0) {
        return false;
      }
      // 遍历 properties 数组，如果当前对象paramType === 21并且item.collectValue !== "0.00"则便是主机冷却水流信号：接通
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "21" && Number(item.collectValue) !== 0) {
          return true;
        }
      }
      // 否则代表主机冷却水流信号：断开
      return false;
    },
    // 主机冷冻水流信号
    hostFreezeWaterFlowClass(index) {
      // 从 this.hostList 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.hostList.length; i++) {
        const device = this.hostList[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 === 20并且item.collectValue !== "0.00"则便是主机冷冻水流信号：接通
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "20" && Number(item.collectValue) !== 0) {
          return true;
        }
      }
      // 否则代表主机冷冻水流信号：断开
      return false;
    },
    // 冷却泵运行状态
    coolingPumpRunClass(index) {
      // 从 this.coolingPump 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.coolingPump.length; i++) {
        const device = this.coolingPump[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;
    },
    // 冷却泵频率
    coolingPumpHz(index) {
      // 从 this.coolingPump  中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.coolingPump.length; i++) {
        const device = this.coolingPump[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 = `coolingPumpHz${index}`;
          // 使用方括号语法动态设置属性值
          this[propertyName] = item.collectValue;
          // this.coolingPumpHz[index] = item.collectValue;
          return true;
        }
      }
      // 否则代表运行状态中的不运行
      return false;
    },
    // 冷冻泵运行状态
    freezingPumpRunClass(index) {
      // 从 this.freezingPump  中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.freezingPump.length; i++) {
        const device = this.freezingPump[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;
    },
    //冷冻泵频率
    freezingPumpHz(index) {
      // 从 this.freezingPump  中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.freezingPump.length; i++) {
        const device = this.freezingPump[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 = `freezingPumpHz${index}`;
          // 使用方括号语法动态设置属性值
          this[propertyName] = item.collectValue;
          // this.freezingPumpHz[index] = item.collectValue;
          return true;
        }
      }
      // 否则代表运行状态中的不运行
      return false;
    },
    // 冷却塔风机运行状态,index为多少号风机,0表示1号风机;item表示风机x
    coolingTowerRunClass(index, item) {
      // 检查 coolingTower 长度是否足够
      if (this.coolingTower.length <= index) {
        return false;
      }

      // 获取指定索引的 coolingTower 元素的 properties 数组
      const properties = this.coolingTower[index].properties;

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

      // 创建一个新数组，用于存储 paramType === 1 的对象
      const filteredProperties = [];
      let filterItem = {};
      for (let i = 0; i < properties.length; i++) {
        // console.log('properties[i].paramType',properties[i].paramType)
        if (properties[i].paramType === "1") {
          filteredProperties.push(properties[i]);
          // filterItem  = properties[i]
        }
      }
      // // 将处理后的对象添加到 deviceList 中
      // if (Object.keys(filterItem).length > 1) {
      //   filteredProperties.push(filterItem);
      // }
      // console.log("paramType为1的对象", filteredProperties);
      // console.log("index, item", index, item);
      // 根据 index 和 item 生成目标属性名称
      const towerNumber = index + 1;
      const targetPropertyName = `${towerNumber}号冷却塔风机${item}运行`;
      // console.log("targetPropertyName",targetPropertyName)
      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
      for (let i = 0; i < filteredProperties.length; i++) {
        if (
          filteredProperties[i].collectName === targetPropertyName &&
          Number(filteredProperties[i].collectValue) !== 0
        ) {
          if (index === 0 && item === 1) {
            // console.log(
            //   "返回的true",
            //   filteredProperties[i].collectName === targetPropertyName &&
            //     Number(filteredProperties[i].collectValue) !== 0
            // );
          }
          return true;
        }
      }

      // 否则代表运行状态中的不运行
      return false;
    },
    // 冷却塔风机频率,index为多少号风机,0表示1号风机;item表示风机x
    coolingTowerHz(index, item) {
      // 检查 coolingTower 长度是否足够
      if (this.coolingTower.length <= index) {
        return false;
      }

      // 获取指定索引的 coolingTower 元素的 properties 数组
      const properties = this.coolingTower[index].properties;

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

      // 创建一个新数组，用于存储 paramType === 4 的对象
      const filteredProperties = [];
      let filterItem = {};
      for (let i = 0; i < properties.length; i++) {
        // console.log('properties[i].paramType',properties[i].paramType)
        if (properties[i].paramType === "4") {
          filteredProperties.push(properties[i]);
          // filterItem  = properties[i]
        }
      }
      // // 将处理后的对象添加到 deviceList 中
      // if (Object.keys(filterItem).length > 1) {
      //   filteredProperties.push(filterItem);
      // }
      // console.log("paramType为4的对象", filteredProperties);
      // console.log("index, item", index, item);
      // 根据 index 和 item 生成目标属性名称
      const towerNumber = index + 1;
      const targetPropertyName = `${towerNumber}号冷却塔风机${item}频率反馈`;
      // console.log("targetPropertyName",targetPropertyName)
      // 在新数组中查找与目标名称匹配的对象，并检查其 collectValue 是否不为 "0.00"
      for (let i = 0; i < filteredProperties.length; i++) {
        if (filteredProperties[i].collectName === targetPropertyName) {
          // 动态构造 coolingTowerHz 相关属性名
          const coolingTowerHzPropertyName = `coolingTowerHz${towerNumber}${item}`;
          // console.log(
          //   "coolingTowerHzPropertyName---",
          //   coolingTowerHzPropertyName
          // );
          // 获取 collectValue 转换为数字后的值
          const value = Number(filteredProperties[i].collectValue);
          // 使用方括号语法动态设置属性值
          this[coolingTowerHzPropertyName] = value;
          // console.log("Number(filteredProperties[i].collectValue)", value);
          return true;
        }
      }

      // 否则代表运行状态中的不运行
      return false;
    },
    // 冷却塔出水蝶阀启停状态
    towerValveControlClass(index) {
      // 从 this.coolingTowerOutlet 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.coolingTowerOutlet.length; i++) {
        const device = this.coolingTowerOutlet[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;
      }
      let valveOpenFeedbackFound = false;
      let valveCloseFeedbackFound = false;
      // 遍历 properties 数组
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "7") {
          // console.log("item.collectName", item.collectName);
          // console.log("item.collectValue", item.collectValue);
          // 阀开到位是开启
          if (
            item.collectName.includes("阀开到位") &&
            Number(item.collectValue) == 1
          ) {
            valveOpenFeedbackFound = true;
          }
          // 阀关到位是关闭
          if (
            item.collectName.includes("阀关到位") &&
            Number(item.collectValue) == 0
          ) {
            valveCloseFeedbackFound = true;
          }
        }
      }

      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
      return valveOpenFeedbackFound && valveCloseFeedbackFound;
    },
    // 冷冻蝶阀启停状态
    frozenValveControlClass(index) {
      // 从 this.frozenValve 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.frozenValve.length; i++) {
        const device = this.frozenValve[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;
      }

      let valveOpenFeedbackFound = false;
      let valveCloseFeedbackFound = false;

      // 遍历 properties 数组
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "7") {
          // 阀开到位是开启
          if (
            item.collectName.includes("阀开到位") &&
            Number(item.collectValue) !== 0
          ) {
            valveOpenFeedbackFound = true;
          }
          // 阀关到位是关闭
          if (
            item.collectName.includes("阀关到位") &&
            Number(item.collectValue) === 0
          ) {
            valveCloseFeedbackFound = true;
          }
        }
      }

      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
      return valveOpenFeedbackFound && valveCloseFeedbackFound;
    },
    // 冷却蝶阀启停状态
    coolingValueControlClass(index) {
      // 从 this.coolingValue 中查找 deviceName 包含与 index 相同数字的对象
      let targetDevice = null;
      for (let i = 0; i < this.coolingValue.length; i++) {
        const device = this.coolingValue[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;
      }
      let valveOpenFeedbackFound = false;
      let valveCloseFeedbackFound = false;

      // 遍历 properties 数组
      for (let i = 0; i < properties.length; i++) {
        const item = properties[i];
        if (item.paramType === "7") {
          // 阀开到位是开启
          if (
            item.collectName.includes("阀开到位") &&
            Number(item.collectValue) !== 0
          ) {
            valveOpenFeedbackFound = true;
          }
          // 阀关到位是关闭
          if (
            item.collectName.includes("阀关到位") &&
            Number(item.collectValue) === 0
          ) {
            valveCloseFeedbackFound = true;
            // console.log("冷冻蝶阀阀关到位应该是true才对呀");
          }
        }
      }

      // 当阀开到位和阀关到位的条件都满足时返回 true ,才是真正的阀门开启,其他都是阀门关闭
      return valveOpenFeedbackFound && valveCloseFeedbackFound;
    },
    // 冷冻总管数据 供回水温度、压力等
    freezingManifoldData(index, item) {
      console.log("this.freezingManifold", this.freezingManifold);
      // 检查 freezingManifold 长度是否足够
      if (this.freezingManifold.length <= index) {
        return false;
      }
      this.freezingManifold.forEach((item) => {
        if (item.collectName === "冷冻供水温度") {
          this.freezingOutTem = item.collectValue;
          console.log("item.collectName", item.collectName);
        } else if (item.collectName === "冷冻回水温度") {
          this.freezingInTem = item.collectValue;
        } else if (item.collectName === "冷冻供水压力") {
          this.freezingOutPre = item.collectValue*1000;
        } else if (item.collectName === "冷冻回水压力") {
          this.freezingInPre = item.collectValue*1000;
        } else if (item.collectName === "冷却供水温度") {
          this.coolingOutTem = item.collectValue;
        } else if (item.collectName === "冷却回水温度") {
          this.coolingInTem = item.collectValue;
        } else if (item.collectName === "总冷量计瞬时流量") {
          this.freezingOutWater = item.collectValue;
        }
      });
      return true;
    },
    // 报警列表
    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");
    },
    // 风机控制  index代表冷却塔几，val代表风机几
    goControlFanList(itemArr, index, val) {
      console.log("itemArr", itemArr, index, val);
      // 处理properties值,
      this.controlArr = [];
      this.controlTitle = "";
      itemArr.forEach((item) => {
        // 构建期望的设备名称格式
        const expectedDeviceName = `${index}号冷却塔`;
        const expectedCollectName = `${index}号冷却塔风机${val}`;
        // 检查 item 的 deviceName 是否符合期望格式
        console.log("item.deviceName", item.deviceName);
        if (item.deviceName.includes(expectedDeviceName)) {
          // 初始化一个空对象来存储非蝶阀处理后的结果
          let deviceItem = {};
          let properties = [];
          // 如果符合条件，则将 item.properties 赋值给 properties
          properties = item.properties;
          console.log("匹配的当前的设备数据", properties);
          properties.forEach((child) => {
            if (child.collectName.includes(expectedCollectName)) {
              this.controlTitle = expectedCollectName;
              deviceItem.name = expectedCollectName;
              // 手动控制
              if (
                child.paramType === "2" &&
                !child.collectName.includes("阀") &&
                child.collectName.includes("启停")
              ) {
                deviceItem.controlText =
                  Number(child.collectValue) == 0 ? false : true;
                deviceItem.controlId = child.id;
              }
              // 阀门的-手动控制
              else if (
                child.paramType === "2" &&
                child.collectName.includes("阀")
              ) {
                deviceItem.controlText =
                  Number(child.collectValue) == 0 ? false : true;
                deviceItem.controlId = child.id;
              }
              // 手自动切换    0自动1手动
              else if (
                child.paramType === "6" &&
                !child.collectName.includes("阀")
              ) {
                deviceItem.automaticText =
                  Number(child.collectValue) == 0 ? false : true;
                deviceItem.automaticId = child.id;
              }
              // 阀门的-手自动切换
              else if (
                child.paramType === "6" &&
                child.collectName.includes("阀")
              ) {
                deviceItem.automaticText =
                  Number(child.collectValue) == 0 ? false : true;
                deviceItem.automaticId = child.id;
              }
              // 频率-手自动切换
              else if (
                child.paramType === "40" &&
                !child.collectName.includes("阀")
              ) {
                deviceItem.frequencyAutotext =
                  Number(child.collectValue) == 0 ? false : true;
                deviceItem.frequencyAutotextId = child.id;
              }
              // 频率调节
              else if (
                child.paramType === "3" &&
                !child.collectName.includes("阀")
              ) {
                deviceItem.frequencySet =
                  Number(child.collectValue) == 0 ? "0" : child.collectValue;
                deviceItem.frequencyId = child.id;
              }
              // 频率反馈
              else if (
                child.paramType === "4" &&
                child.collectName.includes("频率反馈")
              ) {
                deviceItem.frequency = child.collectValue;
              }
            }
          });
          // 将处理后的对象添加到 deviceList 中
          if (Object.keys(deviceItem).length > 1) {
            this.controlArr.push(deviceItem);
          }
          console.log("处理后的this.controlArr", this.controlArr);
          this.openControlDialog = true;
        }
      });
    },
    // 控制
    goControlList(item, index, name) {
      console.log("item1111111111111111111", item, index, name);
      // 处理properties值,
      this.controlArr = [];
      this.controlTitle = "";
      // 初始化一个空对象来存储非蝶阀处理后的结果
      let deviceItem = {};
      let properties;
      if (index !== undefined && index !== null && index !== "") {
        // 从 item  中查找 deviceName 包含与 index 相同数字的对象
        let targetDevice = null;
        for (let i = 0; i < item.length; i++) {
          const device = item[i];
          const indexStr = index.toString();
          const deviceName = device.deviceName.toString();
          for (let j = 0; j < indexStr.length; j++) {
            if (deviceName.includes(indexStr[j])) {
              this.controlTitle = deviceName;
              deviceItem.name = deviceName;
              console.log("this.controlTitle", this.controlTitle);
              targetDevice = device;
              break;
            }
          }
          if (targetDevice) {
            break;
          }
        }
        // 如果未找到匹配的设备，返回 false
        if (!targetDevice) {
          return false;
        }
        // 获取匹配设备的 properties 数组
        properties = targetDevice.properties;
        console.log("匹配的当前的设备数据", properties);
      } else {
        // 如果 index 未传值，直接将 item 当作 properties
        properties = item;
        this.controlTitle = name;
        deviceItem.name = name;
        console.log("index 未传值，直接处理 item 作为 properties", properties);
      }
      console.log("匹配的当前的设备数据", properties);
      properties.forEach((child) => {
        if (child.collectName) {
          // 手动控制
          if (
            child.paramType === "2" &&
            !child.collectName.includes("阀") &&
            child.collectName.includes("启停")
          ) {
            deviceItem.controlText =
              Number(child.collectValue) == 0 ? false : true;
            deviceItem.controlId = child.id;
          }
          // 阀门的-手动控制
          else if (
            child.paramType === "2" &&
            child.collectName.includes("阀")
          ) {
            deviceItem.controlText =
              Number(child.collectValue) == 0 ? false : true;
            deviceItem.controlId = child.id;
          }
          // 手自动切换    0自动1手动
          else if (
            child.paramType === "6" &&
            !child.collectName.includes("阀")
          ) {
            deviceItem.automaticText =
              Number(child.collectValue) == 0 ? false : true;
            deviceItem.automaticId = child.id;
          }
          // 阀门的-手自动切换
          else if (
            child.paramType === "6" &&
            child.collectName.includes("阀")
          ) {
            deviceItem.automaticText =
              Number(child.collectValue) == 0 ? false : true;
            deviceItem.automaticId = child.id;
          }
          // 频率-手自动切换
          else if (
            child.paramType === "40" &&
            !child.collectName.includes("阀")
          ) {
            deviceItem.frequencyAutotext =
              Number(child.collectValue) == 0 ? false : true;
            deviceItem.frequencyAutotextId = child.id;
          }
          // 频率调节
          else if (
            child.paramType === "3" &&
            !child.collectName.includes("阀")
          ) {
            deviceItem.frequencySet =
              Number(child.collectValue) == 0 ? "0" : child.collectValue;
            deviceItem.frequencyId = child.id;
          }
          // 频率反馈
          else if (
            child.paramType === "4" &&
            child.collectName.includes("频率反馈")
          ) {
            deviceItem.frequency = child.collectValue;
          }
        }
      });
      // 将处理后的对象添加到 deviceList 中
      if (Object.keys(deviceItem).length > 1) {
        this.controlArr.push(deviceItem);
      }
      console.log("处理后的this.controlArr", this.controlArr);
      this.openControlDialog = true;
    },
    hasFrequencySet(item, name) {
      return (
        item &&
        item.hasOwnProperty(name) &&
        item[name] !== null &&
        item[name] !== ""
      );
    },
    // 处理输入事件，过滤非数字字符
    handleInput(item) {
      console.log("校验");
      // 实时校验并过滤非数字字符
      item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, "");
    },
    // 失去焦点
    handleBlur() {
      // this.currentFocusIndex = "";
    },
    handleEnter(item, event) {
      console.log("请求后端", item);
      // 失去焦点
      event.target.blur();
      this.$confirm(
        `确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.operationConrol(item.frequencyId, item.frequencySet);
        })
        .catch(() => {
          // 用户取消操作，需要更新原来的频率
          // this.$emit("upList");
        });
    },
    //手动控制
    handleControlText(item) {
      this.$confirm(
        `确定要切换设备"${item.name}"的状态为:${
          item.controlText ? "开启" : "停止 吗?"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 这里调用请求函数
          console.log("请求后台", item.controlText);
          let param = null;
          if (item.controlText) {
            param = 1;
          } else {
            param = 0;
          }
          this.operationConrol(item.controlId, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.controlText = !item.controlText;
          console.log("不请求后台");
        });
    },
    // 手自动切换
    handleAutomaticText(item) {
      this.$confirm(
        `确定要切换设备"${item.name}"的状态为:${
          item.automaticText ? "手动" : "自动 吗?"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 这里调用请求函数
          console.log("请求后台", item.automaticText);
          let param = null;
          if (item.automaticText) {
            param = 1;
          } else {
            param = 0;
          }
          this.operationConrol(item.automaticId, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.automaticText = !item.automaticText;
          console.log("不请求后台");
        });
    },
    // 频率-手自动切换
    handleFrequencyAutomaticText(item) {
      this.$confirm(
        `确定要切换"${item.name}"的频率手自动状态为:${
          item.frequencyAutotext ? "手动" : "自动 吗?"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 这里调用请求函数
          console.log("请求后台", item.frequencyAutotext);
          let param = null;
          if (item.frequencyAutotext) {
            param = 1;
          } else {
            param = 0;
          }
          this.operationConrol(item.frequencyAutotextId, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.frequencyAutotext = !item.frequencyAutotext;
          console.log("不请求后台");
        });
    },
    // 操作
    hadleOperationConrol(id, param) {
      let data = {
        id: id,
        param: param,
      };
      console.log("操作参数", data);
      operationConrol([data])
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("指令下发成功!");
            // 开启 loading 效果
            this.loading = true;
            // 更新所有设备状态;
            setTimeout(() => {
              this.getMonitorList();
              this.loading = false;
            }, 5000);
          } else {
            // this.$modal.msgError("操作失败");
            console.log("应该更新状态的");
            // 更新所有设备状态;
            this.getMonitorList();
          }
        })
        .catch((error) => {
          console.log("请求发生错误，更新设备状态", error);
          // 更新所有设备状态;
          this.getMonitorList();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.monitor {
  width: 100%;
  min-height: 100vh;
  height: auto;
  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.69rem;
    }
    .title-right {
      width: 5.04rem;
      height: 0.61rem;
    }
    .sys-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.28rem;
      color: #ffffff;
      font-weight: bold;
      z-index: 100;
    }
    .nowTime {
      position: absolute;
      top: 0.3rem;
      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.33rem;
      right: 4.4rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      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.33rem;
      right: 4rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      margin: 0 0.2rem 0 0.27rem;
      cursor: pointer;
    }
    .back-icon {
      position: absolute;
      top: 0.33rem;
      right: 3.7rem;
      z-index: 10;
      width: 0.3rem;
      height: 0.27rem;
      cursor: pointer;
    }
  }
  .monitor-content {
    width: 16rem;
    min-height: calc(10.74rem - 1rem);
    position: relative;
    margin-left: calc((100% - 16rem) / 2);
    .monitor-img {
      position: absolute;
      top: 0.2rem;
      left: calc((100% - 15.4rem) / 2);
      // left:1rem;
      width: 15.4rem;
      height: 9.25rem;
      z-index: 1;
    }
    .fan-img1 {
      z-index: 10;
      position: absolute;
      top: 1.06rem;
      left: 5.2rem;
      width: 0.5rem;
      height: 0.5rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .fan-img2 {
      z-index: 10;
      position: absolute;
      top: 0.77rem;
      left: 6.2rem;
      width: 0.5rem;
      height: 0.5rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .fan-img3 {
      z-index: 10;
      position: absolute;
      top: 0.67rem;
      left: 6.69rem;
      width: 0.5rem;
      height: 0.5rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .fan-img4 {
      z-index: 10;
      position: absolute;
      top: 0.46rem;
      left: 7.54rem;
      width: 0.5rem;
      height: 0.5rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .fan-img5 {
      z-index: 10;
      position: absolute;
      top: 0.34rem;
      left: 7.95rem;
      width: 0.5rem;
      height: 0.5rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    /* 定义 fan 动画关键帧 */
    @keyframes fan {
      0% {
        /* 修改初始旋转角度 */
        transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
      }
      100% {
        /* 修改结束旋转角度 */
        transform: translateX(-50%) rotateX(60deg) rotateZ(360deg);
      }
    }
    .towerValve1 {
      z-index: 10;
      position: absolute;
      top: 1.51rem;
      left: 5.91rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .towerValve2 {
      z-index: 10;
      position: absolute;
      top: 1.24rem;
      left: 7.02rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .towerValve3 {
      z-index: 10;
      position: absolute;
      top: 0.91rem;
      left: 8.29rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .in-arrow {
      position: absolute;
      top: 2.9rem;
      right: 3.6rem;
      transform: rotate(180deg);
      width: 0.4rem;
      height: 0.6rem;
      z-index: 10;
    }
    .out-arrow {
      position: absolute;
      top: 3.7rem;
      right: 1.3rem;
      width: 0.4rem;
      height: 0.6rem;
      z-index: 10;
    }
    .coolingInTem {
      z-index: 10;
      position: absolute;
      top: 2.2rem;
      left: 8.35rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .coolingOutTem {
      z-index: 10;
      position: absolute;
      top: 3.1rem;
      left: 4.77rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .freezingInTem {
      z-index: 10;
      position: absolute;
      top: 4.45rem;
      right: 4.35rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .freezingOutTem {
      z-index: 10;
      position: absolute;
      top: 5.06rem;
      right: 2.9rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .freezingOutWater {
      z-index: 10;
      position: absolute;
      top: 6.2rem;
      right: 4.4rem;
      font-size: 0.16rem;
      font-weight: bold;
    }

    .freezingInPre {
      z-index: 10;
      position: absolute;
      top: 4.9rem;
      right: 4.9rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .freezingOutPre {
      z-index: 10;
      position: absolute;
      top: 5.6rem;
      right: 3.4rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .host-line1 {
      position: absolute;
      left: -0.2rem;
      top: 7.04rem;
      z-index: 10;
    }
    .host-line2 {
      position: absolute;
      left: -0.25rem;
      top: 7.72rem;
      z-index: 10;
    }
    .host-line3 {
      position: absolute;
      left: 0.3rem;
      top: 8.4rem;
      z-index: 10;
    }
    .hostName1 {
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 255, 255, 1);
      z-index: 10;
      font-size: 0.22rem;
      font-weight: bold;
      color: aqua;
      position: absolute;
      top: 6.95rem;
      left: 2.85rem;
      transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); /* 分别在 X、Y、Z 轴上旋转 */
      transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
    }
    .hostName2 {
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 255, 255, 1);
      z-index: 10;
      font-size: 0.22rem;
      font-weight: bold;
      color: aqua;
      position: absolute;
      top: 6.15rem;
      left: 4.87rem;
      transform: rotateX(50deg) rotateY(0deg) rotateZ(42deg);
      transform-origin: bottom center;
      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
    }
    .hostName3 {
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 255, 255, 1);
      z-index: 10;
      font-size: 0.22rem;
      font-weight: bold;
      color: aqua;
      position: absolute;
      top: 5.3rem;
      left: 6.7rem;
      transform: rotateX(50deg) rotateY(0deg) rotateZ(39deg);
      transform-origin: bottom center;
      text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
    }
    /* 定义 host 动画关键帧 */
    @keyframes host {
      0% {
        /* 修改初始旋转角度 */
        transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
      }
      100% {
        /* 修改结束旋转角度 */
        transform: translateX(-50%) rotateX(15deg) rotateZ(360deg);
      }
    }
    .host-img1 {
      z-index: 10;
      position: absolute;
      top: 6.83rem;
      left: 4.3rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }
    .host-img2 {
      z-index: 10;
      position: absolute;
      top: 6rem;
      left: 6.3rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(0deg) rotateZ(0deg);
    }
    .host-img3 {
      z-index: 10;
      position: absolute;
      top: 5.22rem;
      left: 8.43rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(15deg) rotateZ(0deg);
    }
    .host-main1 {
      z-index: 100;
      position: absolute;
      top: 5.99rem;
      left: 4.02rem;
      width: 1.6rem;
      height: 1.3rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
    }
    .host-main2 {
      z-index: 100;
      position: absolute;
      top: 5.13rem;
      left: 6rem;
      width: 1.55rem;
      height: 1.3rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
    }
    .host-main3 {
      z-index: 100;
      position: absolute;
      top: 4.6rem;
      left: 8rem;
      width: 1.5rem;
      height: 1rem;
      // background-color: #007bff;
      cursor: pointer;
      opacity: 0.4;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateY(0deg) rotateX(0deg) rotateZ(30deg);
    }
    .hostLoad1 {
      z-index: 10;
      position: absolute;
      top: 6.4rem;
      left: 4.1rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .hostLoad2 {
      z-index: 10;
      position: absolute;
      top: 5.6rem;
      left: 6.1rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .hostLoad3 {
      z-index: 10;
      position: absolute;
      top: 4.8rem;
      left: 8.05rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .water-flow1 {
      z-index: 10;
      position: absolute;
      top: 7.5rem;
      left: 0.75rem;
      font-size: 0.16rem;
    }
    .water-flow2 {
      z-index: 10;
      position: absolute;
      top: 8.18rem;
      left: 1rem;
      font-size: 0.16rem;
    }
    .water-flow3 {
      z-index: 10;
      position: absolute;
      top: 8.84rem;
      left: 1.52rem;
      font-size: 0.16rem;
    }
    .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;
    }
    .startClass {
      /* 应用动画 */
      animation: blink 1s infinite;
      background-color: #38fc52 !important;
    }
    .hostStatus1 {
      z-index: 10;
      position: absolute;
      top: 6.4rem;
      left: 3.8rem;
      width: 0.18rem;
      height: 0.18rem;
      border-radius: 50%;
    }
    .hostStatus2 {
      z-index: 10;
      position: absolute;
      top: 5.6rem;
      left: 5.83rem;
      width: 0.18rem;
      height: 0.18rem;
      border-radius: 50%;
    }
    .hostStatus3 {
      z-index: 10;
      position: absolute;
      top: 4.8rem;
      left: 7.8rem;
      width: 0.18rem;
      height: 0.18rem;
      border-radius: 50%;
    }
    .coolingPump1 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 4.07rem;
      left: 7.57rem;
    }
    .coolingPump2 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 3.67rem;
      left: 8.5rem;
    }
    .coolingPump3 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 3.34rem;
      left: 9.4rem;
    }
    .cooling-img1 {
      z-index: 10;
      position: absolute;
      top: 3.57rem;
      left: 7.65rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .cooling-img2 {
      z-index: 10;
      position: absolute;
      top: 3.24rem;
      left: 8.58rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .cooling-img3 {
      z-index: 10;
      position: absolute;
      top: 2.93rem;
      left: 9.49rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .cooling-hz1 {
      z-index: 10;
      position: absolute;
      top: 3.5rem;
      left: 7.43rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .cooling-hz2 {
      z-index: 10;
      position: absolute;
      top: 3.17rem;
      left: 8.35rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .cooling-hz3 {
      z-index: 10;
      position: absolute;
      top: 2.87rem;
      left: 9.25rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .freezingPump1 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 7.56rem;
      left: 7.11rem;
    }
    .freezingPump2 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 6.89rem;
      left: 8.43rem;
    }
    .freezingPump3 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.15rem;
      font-weight: bold;
      color: #46f1e3;
      position: absolute;
      top: 6.38rem;
      left: 9.5rem;
    }
    .freezing-img1 {
      z-index: 10;
      position: absolute;
      top: 7rem;
      left: 7.18rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .freezing-img2 {
      z-index: 10;
      position: absolute;
      top: 6.41rem;
      left: 8.51rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .freezing-img3 {
      z-index: 10;
      position: absolute;
      top: 5.91rem;
      left: 9.6rem;
      width: 0.4rem;
      height: 0.4rem;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(60deg) rotateZ(0deg);
    }
    .freezing-hz1 {
      z-index: 10;
      position: absolute;
      top: 6.96rem;
      left: 6.93rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .freezing-hz2 {
      z-index: 10;
      position: absolute;
      top: 6.36rem;
      left: 8.25rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .freezing-hz3 {
      z-index: 10;
      position: absolute;
      top: 5.85rem;
      left: 9.36rem;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .coolingTower3 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.18rem;
      color: #46f1e3;
      position: absolute;
      top: 2.1rem;
      left: 5.34rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTower22 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.18rem;
      color: #46f1e3;
      position: absolute;
      top: 1.8rem;
      left: 6.3rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTower21 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.18rem;
      color: #46f1e3;
      position: absolute;
      top: 1.7rem;
      left: 6.76rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTower12 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.18rem;
      color: #46f1e3;
      position: absolute;
      top: 1.47rem;
      left: 7.57rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTower11 {
      cursor: pointer;
      z-index: 10;
      font-size: 0.18rem;
      color: #46f1e3;
      position: absolute;
      top: 1.36rem;
      left: 8rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTowerHz11 {
      z-index: 10;
      font-size: 0.16rem;
      color: #ffffff;
      position: absolute;
      top: 0.34rem;
      left: 7.55rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTowerHz12 {
      z-index: 10;
      font-size: 0.16rem;
      color: #ffffff;
      position: absolute;
      top: 0.46rem;
      left: 7rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTowerHz21 {
      z-index: 10;
      font-size: 0.16rem;
      color: #ffffff;
      position: absolute;
      top: 0.65rem;
      left: 6.2rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTowerHz22 {
      z-index: 10;
      font-size: 0.16rem;
      color: #ffffff;
      position: absolute;
      top: 0.79rem;
      left: 5.64rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    .coolingTowerHz3 {
      z-index: 10;
      font-size: 0.16rem;
      color: #ffffff;
      position: absolute;
      top: 1rem;
      left: 4.7rem;
      font-weight: bold;
      transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
    }
    /* 定义灯闪烁的动画 */
    @keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
      100% {
        opacity: 1;
      }
    }
    .frozenValve1 {
      cursor: pointer;
      z-index: 10;
      position: absolute;
      top: 6.75rem;
      left: 4.88rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .frozenValve2 {
      cursor: pointer;
      z-index: 10;
      position: absolute;
      top: 5.93rem;
      left: 6.87rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .frozenValve3 {
      cursor: pointer;
      z-index: 10;
      position: absolute;
      top: 5rem;
      left: 8.73rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .coolingValue1 {
      cursor: pointer;
      z-index: 10;
      position: absolute;
      top: 5.93rem;
      left: 2.97rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .coolingValue2 {
      cursor: pointer;
      z-index: 10;
      position: absolute;
      top: 5.17rem;
      left: 4.98rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .coolingValue3 {
      cursor: pointer;
      z-index: 10;
      position: absolute;
      top: 4.45rem;
      left: 7.11rem;
      width: 0.18rem;
      height: 0.18rem;
      background-color: #ebebeb;
      border-radius: 50%;
    }
    .statusAndModel {
      z-index: 10;
      position: absolute;
      top: 8.6rem;
      right: 2.3rem;
      width: 3rem;
      .warnStatus {
        position: absolute;
        left: 0.04rem;
        top: 0.3rem;
        width: 0.45rem;
        height: 0.45rem;
        animation: breathe 4s ease-in-out infinite;
      }
      @keyframes breathe {
        0% {
          transform: scale(1);
          opacity: 0.5;
        }
        50% {
          transform: scale(1.1);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0.5;
        }
      }
      .modelStatus {
        position: absolute;
        top: 0;
        right: 0rem;
        width: 2.65rem;
        height: 0.83rem;
      }
      .sysNormal {
        position: absolute;
        top: 0.63rem;
        right: 0.7rem;
        font-size: 0.14rem;
        font-weight: bold;
        color: #89e8f5;
        letter-spacing: 0.02rem;
      }
      .sysWarning {
        position: absolute;
        top: 0.63rem;
        right: 0.7rem;
        font-size: 0.14rem;
        font-weight: bold;
        cursor: pointer;
        color: #ffffff;
        letter-spacing: 0.02rem;
        animation: blink 0.5s ease-in-out infinite;
      }
      .sysStatus {
        position: absolute;
        top: 0.2rem;
        left: 0.8rem;
        font-size: 0.18rem;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: 0.02rem;
      }
    }
  }
  .weather {
    min-width: 2.85rem;
    z-index: 10;
    position: absolute;
    top: 0.5rem;
    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: rgb(144, 167, 197);
    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;
    }
  }

  .performance {
    position: absolute;
    top: 6.2rem !important;
    right: -1rem !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 0.16rem;
  }
  .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: rgb(144, 167, 197);
    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: rgba(209, 214, 223, 1);
    padding-left: 0.5rem;
    margin-bottom: 0.01rem;
    margin-left: 0.4rem;
  }
  .offClass {
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(../../../assets/images/border2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0.5rem;
    right: 0.3rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .off-bg {
      position: absolute;
      left: 0.38rem;
      top: 0.32rem;
      width: 1rem;
      height: 1rem;
      background-image: url(../../../assets/images/border3.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 1rem;
      font-family: DIN;
      font-size: 0.3rem;
      color: #6cf02f;
      font-weight: bold;
    }
    .on-animation {
      animation: rotateZ 5s linear infinite;
      transition: 0.6s; /* 设置过渡时间，控制翻转速度 */
      transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
    }
    /* 定义旋转动画 */
    @keyframes rotateZ {
      0% {
        transform: rotateY(0deg); /* 初始状态，不旋转 */
      }
      50% {
        transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */
      }
      100% {
        transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */
      }
    }
  }
  /* 鼠标悬停时移除动画 */
  .offClass:hover .on-animation {
    animation: none;
  }
  .sysTips {
    position: absolute;
    top: 2.2rem;
    left: 14.3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 10;
    .step {
      width: 0.2rem;
      height: 0.3rem;
      margin-right: 0.04rem;
      animation: moveRight 1s ease-in-out infinite alternate;
    }
    @keyframes moveRight {
      0% {
        transform: translateX(0); /* 初始位置，不移动 */
      }
      100% {
        transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
      }
    }
    .tips-text {
      border: 0.01rem solid transparent;
      border-image: linear-gradient(to right, #007bff, #00ffff);
      border-image-slice: 1;
      font-size: 0.18rem;
      color: #1fecf3;
      padding: 0.01rem 0.03rem;
    }
  }
  .funtion-menu1 {
    position: absolute;
    top: 7.2rem;
    left: -1.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 10;
    width: 1.7rem;
    height: 0.8rem;
    cursor: pointer;
    .ditu {
      width: 1.7rem;
      height: 0.8rem;
      position: absolute;
      top: 0;
    }
    .menu-title {
      color: #46f1e3;
      font-size: 0.18rem;
      --bRadius: 0.05rem;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0.2rem;
      width: 1.25rem;
      div {
        position: relative;
        text-align: center;
        border-radius: var(--bRadius);
        transition: all 0.3s;
        padding: 0.01rem 0.02rem;
        background-color: rgba(0, 255, 255, 0.2);
        &::before,
        &::after {
          content: "";
          position: absolute;
          top: -10px;
          left: -10px;
          right: -10px;
          bottom: -10px;
          border: 2px solid #46f1e3;
          transition: all 0.5s;
          border-radius: var(--bRadius);
          animation: clippath 3s infinite linear;
        }
        &::after {
          animation: clippath 3s infinite -1.5s linear;
        }
        @keyframes clippath {
          0%,
          100% {
            clip-path: inset(0 0 98% 0);
          }
          25% {
            clip-path: inset(0 98% 0 0);
          }
          50% {
            clip-path: inset(98% 0 0 0);
          }
          75% {
            clip-path: inset(0 0 0 98%);
          }
        }
      }
    }
  }
  .menu2 {
    position: absolute;
    top: 8.6rem;
    left: -1.4rem;
  }
  .funtion-menu1:hover {
    .menu-title {
      transform: scale(1.1);
    }
  }
}
.detail-data-bottom {
  width: 3.5rem;
  position: absolute;
  top: 0.5rem;
  right: 2.5rem;
}
// @media (min-width: 1240px) and (max-width: 1440px) {
// }
@media (max-width: 1440px) {
  .monitor-content {
    transform: scale(0.9);
  }
}
</style>
<style scoped>
.monitor >>> .el-dialog:not(.is-fullscreen) {
  margin-top: 15% !important;
}
</style>
