<template>
  <div class="right-monitor" v-loading="loading">
    <div class="buildingDiv">
      <img
        class="title-bg"
        src="../../../../assets/images/title-bg.png"
        alt=""
      />
      <div class="title-word">位置：{{ currentName }}</div>
    </div>
    <div class="mostDiv">
      <div class="windC">
        <!-- 定时开关机定位 -->
        <div class="menu-title" @click="openTimeSwitch">
          <div @click="openTimeSwitch">定时开关机</div>
        </div>
        <!-- 空调风柜定位 -->
        <img
          class="wind-img"
          src="../../../../assets/images/fenggui2.png"
          alt=""
        />
        <!-- 风扇定位 -->
        <img
          class="windMove"
          :class="{ tunCircle: runStatusObj.collectValue }"
          src="../../../../assets/images/fengshan.png"
          alt=""
        />
        <div class="arrow-flex2">
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
        </div>
        <div class="arrow-flex3">
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
          <img
            class="wind-arrow"
            src="../../../../assets/images/blue-arrow.png"
            alt=""
          />
        </div>
        <div class="wind-tem1" v-if="isObjectValid(backAirObj)">
          <div :class="getTextClass(backAirObj, 'wind-text')">回风温度</div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                @keyup.enter.native="handleEnter(backAirObj, $event, '℃')"
                @input="handleInput(backAirObj)"
                @blur="handleBlur()"
                v-model="backAirObj.collectValue"
                disabled
                size="mini"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="tem_icon"
                  class="tem-icon"
                />
              </el-input> </el-form-item
          ></el-form>
        </div>
        <div class="wind-tem1-set" v-if="isObjectValid(backAirObjSet)">
          <div :class="getTextClass(backAirObjSet, 'wind-text')">
            回风温度设置
          </div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                @keyup.enter.native="handleEnter(backAirObjSet, $event, '℃')"
                @input="handleInput(backAirObjSet)"
                @blur="handleBlur()"
                v-model="backAirObjSet.collectValue"
                size="mini"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="tem_icon"
                  class="tem-icon"
                />
              </el-input> </el-form-item
          ></el-form>
        </div>
        <div class="dampers-name1">宴会一厅风阀</div>
        <div class="dampers-position1" v-if="isObjectValid(damperOneBackObj)">
          <div :class="getTextClass(damperOneBackObj, 'wind-text')">反馈：</div>
          <div :class="getTextClass(damperOneBackObj, 'back-text')">
            {{ damperOneBackObj.collectValue }}%
          </div>
        </div>
        <div class="dampers-position2" v-if="isObjectValid(damperOneObj)">
          <div :class="getTextClass(damperOneObj, 'wind-text')">自动调节：</div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                style="width: 1.2rem"
                @keyup.enter.native="handleEnter(damperOneObj, $event, '%')"
                @input="handleInput(damperOneObj)"
                @blur="handleBlur()"
                v-model="damperOneObj.collectValue"
                size="mini"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="percentage-icon"
                  class="percentage-icon"
                />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dampers-position3" v-if="isObjectValid(damperOneRemoteObj)">
          <div :class="getTextClass(damperOneRemoteObj, 'wind-text')">
            远程手自动：
          </div>
          <el-switch
            style="display: block"
            v-model="damperOneRemoteObj.collectValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="手动"
            inactive-text="自动"
            @change="handleControlText(damperOneRemoteObj,'手动','自动')"
          >
          </el-switch>
        </div>
        <div class="dampers-position4" v-if="isObjectValid(damperOneManualObj)">
          <div :class="getTextClass(damperOneManualObj, 'wind-text')">
            手动调节：
          </div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                style="width: 1.2rem"
                @keyup.enter.native="
                  handleEnter(damperOneManualObj, $event, '%')
                "
                @input="handleInput(damperOneManualObj)"
                @blur="handleBlur()"
                v-model="damperOneManualObj.collectValue"
                size="mini"
                :disabled="!damperOneRemoteObj.collectValue"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="percentage-icon"
                  class="percentage-icon"
                />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dampers-name2">餐厅风阀</div>
        <div class="dampers-position6" v-if="isObjectValid(damperTwoBackObj)">
          <div :class="getTextClass(damperTwoBackObj, 'wind-text')">反馈：</div>
          <div :class="getTextClass(damperTwoBackObj, 'back-text')">
            {{ damperTwoBackObj.collectValue }}%
          </div>
        </div>
        <div class="dampers-position7" v-if="isObjectValid(damperTwoObj)">
          <div :class="getTextClass(damperTwoObj, 'wind-text')">自动调节：</div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                style="width: 1.2rem"
                @keyup.enter.native="handleEnter(damperTwoObj, $event, '%')"
                @input="handleInput(damperTwoObj)"
                @blur="handleBlur()"
                v-model="damperTwoObj.collectValue"
                size="mini"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="percentage-icon"
                  class="percentage-icon"
                />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dampers-position8" v-if="isObjectValid(damperTwoRemoteObj)">
          <div :class="getTextClass(damperTwoRemoteObj, 'wind-text')">
            远程手自动：
          </div>
          <el-switch
            style="display: block"
            v-model="damperTwoRemoteObj.collectValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="手动"
            inactive-text="自动"
            @change="handleControlText(damperTwoRemoteObj,'手动','自动')"
          >
          </el-switch>
        </div>
        <div class="dampers-position9" v-if="isObjectValid(damperTwoManualObj)">
          <div :class="getTextClass(damperTwoManualObj, 'wind-text')">
            手动调节：
          </div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                style="width: 1.2rem"
                @keyup.enter.native="
                  handleEnter(damperTwoManualObj, $event, '%')
                "
                @input="handleInput(damperTwoManualObj)"
                @blur="handleBlur()"
                v-model="damperTwoManualObj.collectValue"
                size="mini"
                :disabled="!damperTwoRemoteObj.collectValue"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="percentage-icon"
                  class="percentage-icon"
                />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dampers-name3">会议风阀</div>
        <div
          class="dampers-position10"
          v-if="isObjectValid(damperThreeBackObj)"
        >
          <div :class="getTextClass(damperThreeBackObj, 'wind-text')">
            反馈：
          </div>
          <div :class="getTextClass(damperThreeBackObj, 'back-text')">
            {{ damperThreeBackObj.collectValue }}%
          </div>
        </div>
        <div class="dampers-position11" v-if="isObjectValid(damperThreeObj)">
          <div :class="getTextClass(damperThreeObj, 'wind-text')">
            自动调节：
          </div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                style="width: 1.2rem"
                @keyup.enter.native="handleEnter(damperThreeObj, $event, '%')"
                @input="handleInput(damperThreeObj)"
                @blur="handleBlur()"
                v-model="damperThreeObj.collectValue"
                size="mini"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="percentage-icon"
                  class="percentage-icon"
                />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div
          class="dampers-position12"
          v-if="isObjectValid(damperThreeRemoteObj)"
        >
          <div :class="getTextClass(damperThreeRemoteObj, 'wind-text')">
            远程手自动：
          </div>
          <el-switch
            style="display: block"
            v-model="damperThreeRemoteObj.collectValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="手动"
            inactive-text="自动"
            @change="handleControlText(damperThreeRemoteObj,'手动','自动')"
          >
          </el-switch>
        </div>
        <div
          class="dampers-position13"
          v-if="isObjectValid(damperThreeManualObj)"
        >
          <div :class="getTextClass(damperThreeManualObj, 'wind-text')">
            手动调节：
          </div>
          <el-form @submit.native.prevent>
            <el-form-item>
              <el-input
                style="width: 1.2rem"
                @keyup.enter.native="
                  handleEnter(damperThreeManualObj, $event, '%')
                "
                @input="handleInput(damperThreeManualObj)"
                @blur="handleBlur()"
                v-model="damperThreeManualObj.collectValue"
                size="mini"
                :disabled="!damperThreeRemoteObj.collectValue"
              >
                <svg-icon
                  slot="prefix"
                  icon-class="percentage-icon"
                  class="percentage-icon"
                />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="fan-satatus3">
          <div
            class="context-li"
            v-if="isObjectValid(startStopObj)"
            style="width: 2.4rem"
          >
            <div :class="getTextClass(startStopObj, 'wind-text')">
              启停选择:
            </div>
            <el-select
              size="mini"
              v-model="startStopObj.collectValue"
              placeholder="请选择"
              @change="selectThink(startStopObj)"
              @visible-change="
                (visible) => handleVisibleChange(visible, startStopObj)
              "
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div
            class="context-li"
            v-if="isObjectValid(remoteManualObj) && startStopValue === 0"
          >
            <div :class="getTextClass(remoteManualObj, 'wind-text')">
              远程手动启停:
            </div>
            <el-switch
              style="display: block"
              v-model="remoteManualObj.collectValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="停止"
              @change="handleControlText(remoteManualObj,'开启','停止')"
              :disabled="automaticObj.collectValue"
            >
            </el-switch>
          </div>
          <div
            class="context-li"
            v-if="isObjectValid(timeScheduleObj) && startStopValue === 1"
          >
            <div :class="getTextClass(timeScheduleObj, 'wind-text')">
              时间表启停:
            </div>
            <el-switch
              style="display: block"
              v-model="timeScheduleObj.collectValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="停止"
              @change="handleControlText(timeScheduleObj,'开启','停止')"
              :disabled="automaticObj.collectValue"
            >
            </el-switch>
          </div>
          <div
            class="context-li"
            v-if="isObjectValid(openingBackObj)"
            style="width: 2.4rem"
          >
            <div :class="getTextClass(openingBackObj, 'wind-text')">
              风阀开度设置:
            </div>
            <el-form @submit.native.prevent>
              <el-form-item>
                <el-input
                  @keyup.enter.native="handleEnter(openingBackObj, $event, '%')"
                  @input="handleOpenInput(openingBackObj)"
                  @blur="handleBlur()"
                  v-model="openingBackObj.collectValue"
                  size="mini"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="percentage-icon"
                    class="percentage-icon"
                  />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="context-li" v-if="isObjectValid(faultAlarmObj)">
            <div :class="getTextClass(faultAlarmObj, 'wind-text')">
              风机故障状态:
            </div>
            <div class="badStautus" v-if="faultAlarmObj.collectValue">故障</div>
            <div class="goodStautus" v-else>正常</div>
          </div>
          <div class="context-li" v-if="isObjectValid(runStatusObj)">
            <div :class="getTextClass(runStatusObj, 'wind-text')">
              风机运行状态:
            </div>
            <div class="goodStautus" v-if="runStatusObj.collectValue">运行</div>
            <div class="noneStautus" v-else>不运行</div>
          </div>
          <div class="context-li" v-if="isObjectValid(pressureObj)">
            <div :class="getTextClass(pressureObj, 'wind-text')">风机压差:</div>
            <div class="badStautus" v-if="pressureObj.collectValue">故障</div>
            <div class="goodStautus" v-else>正常</div>
          </div>
        </div>
        <div class="fan-satatus1">
          <div class="context-li" v-if="isObjectValid(automaticObj)">
            <div :class="getTextClass(automaticObj, 'wind-text')">
              风机手自动状态:
            </div>
            <div class="noneStautus" v-if="automaticObj.collectValue">手动</div>
            <div class="goodStautus" v-else>自动</div>
          </div>
          <!-- <div class="context-li" v-if="isObjectValid(startControlObj)">
            <div :class="getTextClass(startControlObj, 'wind-text')">风机启停控制</div>
            <el-switch
              style="display: block"
              v-model="startControlObj.collectValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="停止"
              @change="handleControlText(startControlObj,'开启','停止')"
            >
            </el-switch>
          </div> -->
          <div class="context-li" v-if="isObjectValid(damperHzBackObj)">
            <div :class="getTextClass(damperHzBackObj, 'wind-text')">
              风机频率反馈:
            </div>
            <div>{{ damperHzBackObj.collectValue }}Hz</div>
          </div>
          <div class="context-li" v-if="isObjectValid(damperHzObj)">
            <div :class="getTextClass(damperHzObj, 'wind-text')">
              风机频率调节:
            </div>
            <div>{{ Math.floor(damperHzObj.collectValue / 2) }}Hz</div>
          </div>
        </div>
        <div class="fan-satatus2">
          <div class="context-li" v-if="isObjectValid(waterValveObj)">
            <div :class="getTextClass(waterValveObj, 'wind-text')">
              水阀反馈
            </div>
            <el-form @submit.native.prevent>
              <el-form-item>
                <el-input
                  @keyup.enter.native="handleEnter(waterValveObj, $event, '%')"
                  @input="handleInput(waterValveObj)"
                  @blur="handleBlur()"
                  v-model="waterValveObj.collectValue"
                  disabled
                  size="mini"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="percentage-icon"
                    class="percentage-icon"
                  />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="fan-satatus2-set">
          <div class="context-li" v-if="isObjectValid(waterValveObjSet)">
            <div :class="getTextClass(waterValveObjSet, 'wind-text')">
              水阀调节
            </div>
            <el-form @submit.native.prevent>
              <el-form-item>
                <el-input
                  @keyup.enter.native="
                    handleEnter(waterValveObjSet, $event, '%')
                  "
                  @input="handleInput(waterValveObjSet)"
                  @blur="handleBlur()"
                  v-model="waterValveObjSet.collectValue"
                  disabled
                  size="mini"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="percentage-icon"
                    class="percentage-icon"
                  />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="fan-satatus4">
          <div
            class="context-li"
            v-if="isObjectValid(modeChangeObj)"
            style="width: 2.4rem"
          >
            <div :class="getTextClass(modeChangeObj, 'wind-text')">
              模式选择:
            </div>
            <el-select
              size="mini"
              v-model="modeChangeObj.collectValue"
              placeholder="请选择"
              @change="selectThink2(modeChangeObj)"
              @visible-change="
                (visible) => handleVisibleChange2(visible, modeChangeObj)
              "
            >
              <el-option
                v-for="item in modeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="context-li" v-if="isObjectValid(modeOneObj)">
            <div :class="getTextClass(modeOneObj, 'wind-text')">
              宴会一厅模式-频率设定:
            </div>
            <el-form @submit.native.prevent>
              <el-form-item>
                <el-input
                  @keyup.enter.native="handleEnter(modeOneObj, $event, 'Hz')"
                  @input="handleInput(modeOneObj)"
                  @blur="handleBlur()"
                  v-model="modeOneObj.collectValue"
                  size="mini"
                  :disabled="isShowMode1"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="hz-icon"
                    class="percentage-icon"
                  />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="context-li" v-if="isObjectValid(modeTwoObj)">
            <div :class="getTextClass(modeTwoObj, 'wind-text')">
              餐厅模式-频率设定:
            </div>
            <el-form @submit.native.prevent>
              <el-form-item>
                <el-input
                  @keyup.enter.native="handleEnter(modeTwoObj, $event, 'Hz')"
                  @input="handleInput(modeTwoObj)"
                  @blur="handleBlur()"
                  v-model="modeTwoObj.collectValue"
                  size="mini"
                  :disabled="isShowMode2"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="hz-icon"
                    class="percentage-icon"
                  />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="context-li" v-if="isObjectValid(modeThreeObj)">
            <div :class="getTextClass(modeThreeObj, 'wind-text')">
              会议模式-频率设定:
            </div>
            <el-form @submit.native.prevent>
              <el-form-item>
                <el-input
                  @keyup.enter.native="handleEnter(modeThreeObj, $event, 'Hz')"
                  @input="handleInput(modeThreeObj)"
                  @blur="handleBlur()"
                  v-model="modeThreeObj.collectValue"
                  :disabled="isShowMode3"
                  size="mini"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="hz-icon"
                    class="percentage-icon"
                  />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="context-li" v-if="isObjectValid(modeFourObj)">
            <div :class="getTextClass(modeFourObj, 'wind-text')">
              全开模式-频率设定:
            </div>
            <el-form @submit.native.prevent>
              <el-form-item>
                <el-input
                  @keyup.enter.native="handleEnter(modeFourObj, $event, 'Hz')"
                  @input="handleInput(modeFourObj)"
                  @blur="handleBlur()"
                  v-model="modeFourObj.collectValue"
                  size="mini"
                  :disabled="isShowMode4"
                >
                  <svg-icon
                    slot="prefix"
                    icon-class="hz-icon"
                    class="percentage-icon"
                  />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 远程启停 -->
        <div
          class="offClass"
          @click="handleOneKeyButton(remoteManualObj, '远程手动停止')"
          v-if="
            isObjectValid(remoteManualObj) &&
            startStopValue === 0 &&
            !automaticObj.collectValue
          "
        >
          <div v-if="remoteManualObj.collectValue" class="off-bg on-animation">
            运行
          </div>
          <div v-else class="off-bg">停止</div>
        </div>
        <!-- 时间表启停 -->
        <div
          class="offClass"
          @click="handleOneKeyButton(timeScheduleObj, '时间表停止')"
          v-if="
            isObjectValid(timeScheduleObj) &&
            startStopValue === 1 &&
            !automaticObj.collectValue
          "
        >
          <div v-if="timeScheduleObj.collectValue" class="off-bg on-animation">
            运行
          </div>
          <div v-else class="off-bg">停止</div>
        </div>
      </div>
    </div>
    <!-- 定时开关内容 -->
    <el-dialog
      title="定时开关机功能"
      :visible.sync="isOpenTimeSwitch"
      append-to-body
      width="805px"
      class="custom-dialog"
    >
      <div class="dialog-content">
        <div class="device-container" v-loading="loading">
          <div class="device-li">
            <div class="device-name">定时名称</div>
            <div class="device-name">定时开机</div>
            <div class="device-name">定时关机</div>
            <div class="device-name">启动状态</div>
          </div>
          <div
            class="device-li"
            v-for="(item, index) in delayList"
            :key="index"
            :class="{ highlight: item.name.includes(currentWeekday) }"
          >
            <div class="device-name">{{ item.name }}</div>
            <div class="device-name">
              <el-form @submit.native.prevent>
                <el-form-item>
                  <el-input
                    size="mini"
                    v-model="item.delayOpenHour"
                    @keyup.enter.native="
                      handleSwitchEnter(item, 'openHour', $event)
                    "
                    @input="handleSwitchInput(item, 'delayOpenHour', 'hour')"
                  ></el-input> </el-form-item
              ></el-form>
              <div class="slip">:</div>
              <el-form @submit.native.prevent>
                <el-form-item>
                  <el-input
                    size="mini"
                    v-model="item.delayOpenMinute"
                    @keyup.enter.native="
                      handleSwitchEnter(item, 'openMinute', $event)
                    "
                    @input="
                      handleSwitchInput(item, 'delayOpenMinute', 'minute')
                    "
                  ></el-input> </el-form-item
              ></el-form>
            </div>
            <div class="device-name">
              <el-form @submit.native.prevent>
                <el-form-item>
                  <el-input
                    size="mini"
                    v-model="item.delayCloseHour"
                    @keyup.enter.native="
                      handleSwitchEnter(item, 'closeHour', $event)
                    "
                    @input="handleSwitchInput(item, 'delayCloseHour', 'hour')"
                  ></el-input></el-form-item
              ></el-form>
              <div class="slip">:</div>
              <el-form @submit.native.prevent>
                <el-form-item>
                  <el-input
                    size="mini"
                    v-model="item.delayCloseMinute"
                    @keyup.enter.native="
                      handleSwitchEnter(item, 'closeMinute', $event)
                    "
                    @input="
                      handleSwitchInput(item, 'delayCloseMinute', 'minute')
                    "
                  ></el-input></el-form-item
              ></el-form>
            </div>
            <div class="device-name">
              <el-switch
                style="display: block"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="开启"
                inactive-text="停用"
                v-model="item.delayStatus"
                @change="handleSwitchStatus(item)"
              >
              </el-switch>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
import { operationConrol } from "@/api/hotWater/waterControl";
export default {
  props: {
    // 定义接收的 currentId 和 currentName
    currentId: {
      //当前选中高亮的id
      type: String,
      required: true,
    },
    currentName: {
      //当前选中的名称
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      backwaterObj: {}, //回水温度
      waterValveObj: {}, //水阀调节
      waterValveObjSet: {}, //水阀调节设置
      startControlObj: {}, //启停控制
      runStatusObj: {}, //运行状态
      damperOneObj: {}, //风阀1调节
      damperTwoObj: {}, //风阀2调节
      damperThreeObj: {}, //风阀3调节
      damperOneBackObj: {}, //风阀1反馈
      damperTwoBackObj: {}, //风阀2反馈
      damperThreeBackObj: {}, //风阀3反馈
      damperOneRemoteObj: {}, //风阀1远程手自动选择
      damperTwoRemoteObj: {}, //风阀2远程手自动选择
      damperThreeRemoteObj: {}, //风阀3远程手自动选择
      damperOneManualObj: {}, //风阀1手动调节
      damperTwoManualObj: {}, //风阀2手动调节
      damperThreeManualObj: {}, //风阀3手动调节
      openingBackObj: {}, //风阀开度反馈
      startStopObj: {}, //风阀启停选择
      remoteManualObj: {}, //远程手动启停
      timeScheduleObj: {}, //时间表启停
      damperHzBackObj: {}, //风机频率反馈
      damperHzObj: {}, //风机频率调节
      modeChangeObj: {}, //模式选择
      modeOneObj: {}, //宴会一厅模式
      modeTwoObj: {}, //餐厅模式
      modeThreeObj: {}, //会议模式
      modeFourObj: {}, //全开模式
      pressureObj: {}, //压差
      automaticObj: {}, //手自动状态
      backAirObj: {}, //回风温度
      backAirObjSet: {}, //回风温度设置
      faultAlarmObj: {}, //故障报警
      waterSupplyObj: {}, //供水温度

      tableData: [], //系统状态表格数据
      temValue: "℃", //回风温度
      temValueSet: "℃", //回风温度设置
      valvePercent: "%", //阀比例
      runStatus: false, //运行状态
      autoStatus: false, //手自动状态
      startStatus: false, //启停控制
      frequency: "v",
      isOpenTimeSwitch: false,
      delayList: [],
      currentWeekday: "",
      options: [
        {
          label: "远程手动启停",
          value: 0,
        },
        {
          label: "时间表启停",
          value: 1,
        },
      ], //启停选择列表
      // 用于存储启停选择select选择前的值
      oldValue: null,
      //   用于控制启停选择不同select值显示内容
      startStopValue: null,

      modeOptions: [
        {
          label: "宴会一厅模式",
          value: 0,
        },
        {
          label: "餐厅模式",
          value: 1,
        },
        {
          label: "会议模式",
          value: 2,
        },
        {
          label: "全开模式",
          value: 3,
        },
      ], //模式选择列表
      isShowMode1: false,
      isShowMode2: false,
      isShowMode3: false,
      isShowMode4: false,
      timer: null, // 用于存储定时器 ID
    };
  },
  watch: {
    temValue(newVal) {
      let valueWithoutTem = newVal.replace(/℃/g, "");
      if (valueWithoutTem === "") {
        this.temValue = "℃";
      } else {
        this.temValue = valueWithoutTem + "℃";
      }
    },
    valvePercent(newVal) {
      // 去除输入值中的 %
      let valueWithoutPercent = newVal.replace(/%/g, "");
      // 如果输入值为空，保持 %
      if (valueWithoutPercent === "") {
        this.temValue = "%";
      } else {
        // 否则在输入值后面添加 %
        this.temValue = valueWithoutPercent + "%";
      }
    },
    frequency(newVal) {
      let valueWithoutFrequency = newVal.replace(/v/g, "");
      if (valueWithoutFrequency === "") {
        this.temValue = "v";
      } else {
        this.temValue = valueWithoutFrequency + "v";
      }
    },
    // 监听 currentId 的变化
    currentId: {
      deep: true,
      immediate: true,
      handler(newVal, val) {
        console.log("子组件改变的值-----", newVal);
        if (newVal) {
          this.$nextTick(function () {
            let val = newVal;
            this.getWindList(val);
          });
        }
      },
    },
  },

  created() {
    const weekdays = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    const date = new Date();
    const dayIndex = date.getDay();
    this.currentWeekday = weekdays[dayIndex];
    console.log("今天是星期几", this.currentWeekday);
  },
  mounted() {
    // 设置定时器，每 10 秒执行一次
    this.timer = setInterval(() => {
      this.getWindList(this.currentId);
    }, 10000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 判断对象是否有效（不为空且不为 undefined）
    isObjectValid(obj) {
      return obj && Object.keys(obj).length > 0;
    },
    // 请求数据
    getWindList(val) {
      console.log("请求了风柜系统", val);
      if (val) {
        return new Promise((resolve, reject) => {
          let data = {
            systemType: "2",
            houseId: val,
          };
          windList(data)
            .then((res) => {
              console.log("风柜系统查询返回", res);
              if (res.code == 200 && res.rows.length > 0) {
                let data = res.rows[0].values;
                this.backwaterObj = {}; //回水温度
                this.waterValveObj = {}; //水阀反馈
                this.waterValveObjSet = {}; //水阀调节
                this.startControlObj = {}; //启停控制
                this.runStatusObj = {}; //运行状态
                this.airSupplyObj = {}; //送风温度
                this.damperOneObj = {}; //风阀1调节
                this.damperTwoObj = {}; //风阀2调节
                this.damperThreeObj = {}; //风阀3调节
                this.damperOneBackObj = {}; //风阀1反馈
                this.damperTwoBackObj = {}; //风阀2反馈
                this.damperThreeBackObj = {}; //风阀3反馈
                this.damperOneRemoteObj = {}; //风阀1远程手自动选择
                this.damperTwoRemoteObj = {}; //风阀2远程手自动选择
                this.damperThreeRemoteObj = {}; //风阀3远程手自动选择
                this.damperOneManualObj = {}; //风阀1手动调节
                this.damperTwoManualObj = {}; //风阀2手动调节
                this.damperThreeManualObj = {}; //风阀3手动调节
                this.openingBackObj = {}; //风阀开度反馈
                this.startStopObj = {}; //风机启停选择
                this.remoteManualObj = {}; //远程手动启停
                this.timeScheduleObj = {}; //时间表启停
                this.damperHzBackObj = {}; //风机频率反馈
                this.damperHzObj = {}; //风机频率调节
                this.modeChangeObj = {}; //模式选择
                this.modeOneObj = {}; //宴会一厅模式
                this.modeTwoObj = {}; //餐厅模式
                this.modeThreeObj = {}; //会议模式
                this.modeFourObj = {}; //全开模式
                this.pressureObj = {}; //压差
                this.automaticObj = {}; //手自动状态
                this.backAirObj = {}; //回风温度
                this.faultAlarmObj = {}; //故障报警
                this.waterSupplyObj = {}; //供水温度
                data.forEach((item) => {
                  // 回水温度
                  if (
                    item.paramType === "12" &&
                    item.collectName.includes("回水")
                  ) {
                    this.backwaterObj = item;
                  }
                  //水阀反馈
                  else if (
                    item.paramType === "4" &&
                    item.collectName.includes("水阀反馈")
                  ) {
                    this.waterValveObj = item;
                  }
                  //水阀调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("水阀调节")
                  ) {
                    this.waterValveObjSet = item;
                  }
                  //   //启停控制 0停止1开启
                  //   else if (item.paramType === "2") {
                  //     this.startControlObj = item;
                  //     this.startControlObj.collectValue =
                  //       Number(item.collectValue) == 0 ? false : true;
                  //   }
                  //运行状态  0不运行1运行
                  else if (item.paramType === "1") {
                    this.runStatusObj = item;
                    this.runStatusObj.collectValue =
                      Number(item.collectValue) == 0 ? false : true;
                  }
                  //送风温度
                  else if (
                    item.paramType === "12" &&
                    item.collectName.includes("送风")
                  ) {
                    this.airSupplyObj = item;
                  }
                  //压差 0正常1故障(true)
                  else if (item.paramType === "33") {
                    this.pressureObj = item;
                    this.pressureObj.collectValue =
                      Number(item.collectValue) == 0 ? false : true;
                  }
                  //手自动状态  0手动1自动
                  else if (item.paramType === "6") {
                    this.automaticObj = item;
                    this.automaticObj.collectValue =
                      Number(item.collectValue) == 0 ? true : false;
                  }
                  //回风温度
                  else if (
                    item.paramType === "12" &&
                    item.collectName.includes("回风")
                  ) {
                    this.backAirObj = item;
                  }
                  //回风温度设置
                  else if (
                    item.paramType === "14" &&
                    item.collectName.includes("回风")
                  ) {
                    this.backAirObjSet = item;
                  }
                  //风阀1调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("1号风阀调节")
                  ) {
                    this.damperOneObj = item;
                    console.log("风阀1", item);
                  }
                  //风阀2调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("2号风阀调节")
                  ) {
                    this.damperTwoObj = item;
                  }
                  //风阀3调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("3号风阀调节")
                  ) {
                    this.damperThreeObj = item;
                  }
                  //风阀1反馈
                  else if (
                    item.paramType === "4" &&
                    item.collectName.includes("1号风阀反馈")
                  ) {
                    this.damperOneBackObj = item;
                    console.log("风阀1", item);
                  }
                  //风阀2反馈
                  else if (
                    item.paramType === "4" &&
                    item.collectName.includes("2号风阀反馈")
                  ) {
                    this.damperTwoBackObj = item;
                  }
                  //风阀3反馈
                  else if (
                    item.paramType === "4" &&
                    item.collectName.includes("3号风阀反馈")
                  ) {
                    this.damperThreeBackObj = item;
                  }
                  //风阀1远程手自动状态  0自动1手动
                  else if (
                    item.paramType === "2" &&
                    item.collectName.includes("1号风阀远程手自动")
                  ) {
                    this.damperOneRemoteObj = item;
                    this.damperOneRemoteObj.collectValue =
                      Number(item.collectValue) == 1 ? true : false;
                  }
                  //风阀2远程手自动状态
                  else if (
                    item.paramType === "2" &&
                    item.collectName.includes("2号风阀远程手自动")
                  ) {
                    this.damperTwoRemoteObj = item;
                    this.damperTwoRemoteObj.collectValue =
                      Number(item.collectValue) == 1 ? true : false;
                  }
                  //风阀3远程手自动状态
                  else if (
                    item.paramType === "2" &&
                    item.collectName.includes("3号风阀远程手自动")
                  ) {
                    this.damperThreeRemoteObj = item;
                    this.damperThreeRemoteObj.collectValue =
                      Number(item.collectValue) == 1 ? true : false;
                  }
                  //风阀1手动调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("1号风阀手动调节")
                  ) {
                    this.damperOneManualObj = item;
                  }
                  //风阀2手动调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("2号风阀手动调节")
                  ) {
                    this.damperTwoManualObj = item;
                  }
                  //风阀3手动调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("3号风阀手动调节")
                  ) {
                    this.damperThreeManualObj = item;
                  }
                  //风阀开度反馈
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("风阀开度反馈")
                  ) {
                    this.openingBackObj = item;
                  }
                  //风阀启停选择
                  else if (
                    item.paramType === "27" &&
                    item.collectName.includes("启停选择")
                  ) {
                    this.startStopObj = item;
                    if (typeof this.startStopObj.collectValue === "string") {
                      // 检查字符串是否为纯数字
                      if (
                        /^\d+$/.test(this.startStopObj.collectValue) ||
                        this.startStopObj.collectValue.match(/^\d+\.00$/)
                      ) {
                        this.startStopObj.collectValue = parseInt(
                          this.startStopObj.collectValue,
                          10
                        );
                        this.startStopValue = this.startStopObj.collectValue;
                      }
                    }
                  }
                  //远程手动启停 0停止1开启
                  else if (
                    item.paramType === "2" &&
                    item.collectName.includes("远程手动启停")
                  ) {
                    this.remoteManualObj = item;
                    this.remoteManualObj.collectValue =
                      Number(item.collectValue) == 1 ? true : false;
                  }
                  //时间表启停 0停止1开启
                  else if (
                    item.paramType === "2" &&
                    item.collectName.includes("时间表启停")
                  ) {
                    this.timeScheduleObj = item;
                    this.timeScheduleObj.collectValue =
                      Number(item.collectValue) == 1 ? true : false;
                  }
                  //   风机频率反馈
                  else if (
                    item.paramType === "4" &&
                    item.collectName.includes("频率反馈")
                  ) {
                    this.damperHzBackObj = item;
                  }
                  //   风机频率调节
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("硬件频率控制")
                  ) {
                    this.damperHzObj = item;
                  }
                  //   模式选择
                  else if (
                    item.paramType === "25" &&
                    item.collectName.includes("模式选择")
                  ) {
                    this.modeChangeObj = item;
                    // collectValue转换为整数
                    if (typeof this.modeChangeObj.collectValue === "string") {
                      // 检查字符串是否为纯数字
                      if (
                        /^\d+$/.test(this.modeChangeObj.collectValue) ||
                        this.modeChangeObj.collectValue.match(/^\d+\.00$/)
                      ) {
                        this.modeChangeObj.collectValue = parseInt(
                          this.modeChangeObj.collectValue,
                          10
                        );
                      }
                    }
                    if (this.modeChangeObj.collectValue === 0) {
                      this.isShowMode1 = true;
                      this.isShowMode2 = false;
                      this.isShowMode3 = false;
                      this.isShowMode4 = false;
                    } else if (this.modeChangeObj.collectValue === 1) {
                      this.isShowMode1 = false;
                      this.isShowMode2 = true;
                      this.isShowMode3 = false;
                      this.isShowMode4 = false;
                    } else if (this.modeChangeObj.collectValue === 2) {
                      this.isShowMode1 = false;
                      this.isShowMode2 = false;
                      this.isShowMode3 = true;
                      this.isShowMode4 = false;
                    } else if (this.modeChangeObj.collectValue === 3) {
                      this.isShowMode1 = false;
                      this.isShowMode2 = false;
                      this.isShowMode3 = false;
                      this.isShowMode4 = true;
                    }
                  }
                  //   宴会一厅模式-频率设定
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("宴会一厅模式")
                  ) {
                    this.modeOneObj = item;
                  }
                  //   餐厅模式-频率设定
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("餐厅模式")
                  ) {
                    this.modeTwoObj = item;
                  }
                  //   会议模式-频率设定
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("会议模式")
                  ) {
                    this.modeThreeObj = item;
                  }
                  //   全开模式-频率设定
                  else if (
                    item.paramType === "3" &&
                    item.collectName.includes("全开模式")
                  ) {
                    this.modeFourObj = item;
                  }
                  //故障报警 0正常 1故障
                  else if (item.paramType === "5") {
                    this.faultAlarmObj = item;
                    this.faultAlarmObj.collectValue =
                      Number(item.collectValue) == 0 ? false : true;
                  }
                  //供水温度
                  else if (
                    item.paramType === "12" &&
                    item.collectName.includes("供水")
                  ) {
                    this.waterSupplyObj = item;
                  }
                });
              } else {
                this.backwaterObj = {}; //回水温度
                this.waterValveObj = {}; //水阀调节
                this.startControlObj = {}; //启停控制
                this.runStatusObj = {}; //运行状态
                this.airSupplyObj = {}; //送风温度
                this.damperOneObj = {}; //风阀1调节
                this.damperTwoObj = {}; //风阀2调节
                this.damperThreeObj = {}; //风阀3调节
                this.damperOneBackObj = {}; //风阀1反馈
                this.damperTwoBackObj = {}; //风阀2反馈
                this.damperThreeBackObj = {}; //风阀3反馈
                this.damperOneRemoteObj = {}; //风阀1远程手自动选择
                this.damperTwoRemoteObj = {}; //风阀2远程手自动选择
                this.damperThreeRemoteObj = {}; //风阀3远程手自动选择
                this.damperOneManualObj = {}; //风阀1手动调节
                this.damperTwoManualObj = {}; //风阀2手动调节
                this.damperThreeManualObj = {}; //风阀3手动调节
                this.openingBackObj = {}; //风阀开度反馈
                this.startStopObj = {}; //风机启停选择
                this.remoteManualObj = {}; //远程手动启停
                this.timeScheduleObj = {}; //时间表启停
                this.damperHzBackObj = {}; //风机频率反馈
                this.damperHzObj = {}; //风机频率调节
                this.modeChangeObj = {}; //模式选择
                this.modeOneObj = {}; //宴会一厅模式
                this.modeTwoObj = {}; //餐厅模式
                this.modeThreeObj = {}; //会议模式
                this.modeFourObj = {}; //全开模式
                this.pressureObj = {}; //压差
                this.automaticObj = {}; //手自动状态
                this.backAirObj = {}; //回风温度
                this.faultAlarmObj = {}; //故障报警
                this.waterSupplyObj = {}; //供水温度
              }
              // 成功时解析 Promise
              resolve(res);
            })
            .catch((error) => {
              // 失败时拒绝 Promise
              reject(error);
            });
        });
      }
    },
    // 根据对象的 quality 属性返回对应的类名
    getTextClass(obj, claseName) {
      // console.log("打印所有点位的quality值······",obj.collectName, obj.quality);
      return [claseName, obj.quality !== "0" ? "alarm-text" : ""];
    },
    // 处理输入事件，过滤非数字字符
    handleInput(item) {
      console.log("校验");
      // 实时校验并过滤非数字字符
      item.collectValue = String(item.collectValue).replace(/[^\d]/g, "");
    },
    handleOpenInput(item) {
      console.log("校验");
      // 实时校验并过滤非数字字符
      item.collectValue = String(item.collectValue).replace(/[^\d]/g, "");
    },
    handleOpenBlur(item) {
      let inputValue = parseInt(item.collectValue, 10);
      if (isNaN(inputValue)) {
      } else if (inputValue < 80) {
        item.collectValue = "";
        this.$message.error("请输入大于80的值");
      } else if (inputValue > 300) {
        item.collectValue = "";
        this.$message.error("请输入小于300的值");
      }
    },
    // 失去焦点
    handleBlur() {
      // this.currentFocusIndex = "";
    },
    handleEnter(item, event, unit) {
      console.log("请求后端");
      console.log("接收到的事件对象:", event);
      // 阻止事件的默认行为
      if (event && event.preventDefault) {
        event.preventDefault();
      }
      // 失去焦点
      event.target.blur();
      if (item.collectValue == "" || item.collectValue == "null") {
        this.$message.error("请输入值");
        return; // 确保后续代码不执行
      }
      //   针对风阀开度设置
      if (item.collectName.includes("风阀开度")) {
        if (item.collectValue < 80) {
          this.$message.error("请输入大于80的值");
          return;
        } else if (item.collectValue > 300) {
          this.$message.error("请输入小于300的值");
          return;
        }
      }
      this.$confirm(
        `确定要修改"${item.collectName}"为:${item.collectValue} ${unit}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.hadleOperationConrol(item.id, item.collectValue);
        })
        .catch(() => {
          // 用户取消操作，需要更新原来的频率
          // this.$emit("upList");
        });
    },
    // 手自动切换
    handleAutomaticText(item) {
      this.$confirm(
        `确定要切换设备的状态为:${item.collectValue ? "手动" : "自动 吗?"}`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 这里调用请求函数
          let param = null;
          if (item.collectValue) {
            param = 1;
          } else {
            param = 0;
          }
          this.hadleOperationConrol(item.id, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.collectValue = !item.collectValue;
          console.log("不请求后台");
        });
    },
    //启停控制/手动控制
    handleControlText(item, name1, name2) {
      this.$confirm(
        `确定要切换设备的状态为:${item.collectValue ? name1 : name2}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let param = null;
          if (item.collectValue) {
            param = 1;
          } else {
            param = 0;
          }
          this.hadleOperationConrol(item.id, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.collectValue = !item.collectValue;
          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.getWindList(this.currentId);
              // 关闭 loading 效果
              this.loading = false;
            }, 8000);
          } else {
            // this.$modal.msgError("操作失败");
            console.log("应该更新状态的");
            // 更新所有设备状态;
            this.getWindList(this.currentId);
          }
        })
        .catch((error) => {
          console.log("请求发生错误，更新设备状态", error);
          // 更新所有设备状态;
          this.getWindList(this.currentId);
        });
    },
    // 打开定时开关弹框
    openTimeSwitch() {
      this.isOpenTimeSwitch = true;
      this.getPolicyList();
    },
    // 请求列表
    getPolicyList() {
      return new Promise((resolve, reject) => {
        let data = {
          systemType: "2",
          funPolicyType: "3",
          houseId: this.currentId,
        };
        timeList(data)
          .then((res) => {
            console.log("设备定时开关返回res", res);
            if (res.code === 200) {
              let handleList = res.rows;
              this.delayList = [];
              handleList.forEach((element, index) => {
                if (element.values && element.values.length > 0) {
                  // 初始化一个空对象来存储非蝶阀处理后的结果
                  let delayItem = {
                    name: element.name,
                  };
                  const limitedChildren = element.values;
                  limitedChildren.forEach((child) => {
                    // console.log("定时${index}开_时", `定时${index}开_时`);
                    // console.log("child.pointName", child.pointName);
                    if (child.pointName) {
                      // 定时开机-小时
                      if (child.pointName.includes("开_时")) {
                        // console.log("定时开机-时·························");
                        delayItem.delayOpenHour = child.curValue;
                        delayItem.delayOpenHourId = child.id;
                      }
                      //   定时开机-分钟
                      else if (child.pointName.includes("开_分")) {
                        delayItem.delayOpenMinute = child.curValue;
                        delayItem.delayOpenMinuteId = child.id;
                      }
                      // 定时关机-小时
                      else if (child.pointName.includes("关_时")) {
                        delayItem.delayCloseHour = child.curValue;
                        delayItem.delayCloseHourId = child.id;
                      }
                      //   定时关机-分钟
                      else if (child.pointName.includes("关_分")) {
                        delayItem.delayCloseMinute = child.curValue;
                        delayItem.delayCloseMinuteId = child.id;
                      }
                      // 启动状态
                      else if (child.pointName.includes(`启动标志`)) {
                        delayItem.delayStatus =
                          Number(child.curValue) == 0 ? false : true;
                        delayItem.delayStatusId = child.id;
                      }
                    }
                  });
                  // 将处理后的对象添加到 delayList 中
                  if (Object.keys(delayItem).length > 1) {
                    this.delayList.push(delayItem);
                  }
                }
              });
              console.log("处理后的数组", this.delayList);
              //   this.delayList = res.rows;
            } else {
              this.delayList = [];
            }
            // 成功时解析 Promise
            resolve(res);
          })
          .catch((error) => {
            // 失败时拒绝 Promise
            reject(error);
          });
      });
    },
    // 处理输入事件，过滤非数字字符
    handleSwitchInput(item, propertyName, name) {
      console.log("校验", item[propertyName]);
      // 如果值为空，不进行后续校验
      if (item[propertyName] === "") {
        return;
      }
      let isValid = true;
      // 实时校验并过滤非数字字符
      let inputValue = String(item[propertyName]).replace(/[^\d]/g, "");
      if (name === "hour") {
        isValid =
          !isNaN(inputValue) &&
          parseInt(inputValue) >= 0 &&
          parseInt(inputValue) <= 23;
        if (!isValid) {
          this.$message.error("输入值在0-23区间，请重新输入");
          item[propertyName] = "";
          return;
        }
      } else if (name === "minute") {
        isValid =
          !isNaN(inputValue) &&
          parseInt(inputValue) >= 0 &&
          parseInt(inputValue) <= 59;
        if (!isValid) {
          this.$message.error("输入值在0-59区间，请重新输入");
          item[propertyName] = "";
          return;
        }
      }
      item[propertyName] = inputValue;
    },
    handleSwitchEnter(item, name, event) {
      console.log("item", item);
      console.log("接收到的事件对象:", event);
      // 阻止事件的默认行为
      if (event && event.preventDefault) {
        event.preventDefault();
      }
      // 失去焦点
      event.target.blur();
      let id = "";
      let value = "";
      let title = "";
      let unit = "";
      if (name === "openHour") {
        id = item.delayOpenHourId;
        value = item.delayOpenHour;
        title = "定时开机-小时";
        unit = "时";
      } else if (name === "openMinute") {
        id = item.delayOpenMinuteId;
        value = item.delayOpenMinute;
        title = "定时开机-分钟";
        unit = "分";
      } else if (name === "closeHour") {
        id = item.delayCloseHourId;
        value = item.delayCloseHour;
        title = "定时关机-小时";
        unit = "时";
      } else if (name === "closeMinute") {
        id = item.delayCloseMinuteId;
        value = item.delayCloseMinute;
        title = "定时关机-分钟";
        unit = "分";
      }

      if (value === "") {
        this.$message.warning("请输入当前设置值!");
        return;
      }
      console.log("请求后端", item);
      this.$confirm(
        `确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // console.log("打印id",id)
          this.handleSwitchOperationConrol(id, value);
        })
        .catch(() => {
          // 用户取消操作，需要更新原来的频率
          this.getPolicyList();
        });
    },
    handleSwitchOperationConrol(id, param) {
      let data = {
        policyId: id,
        timeValue: param,
      };
      console.log("操作参数", data);
      undateTime(data)
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("指令下发成功!");
            // 开启 loading 效果
            this.loading = true;
            // 更新所有设备状态;
            setTimeout(() => {
              this.getPolicyList();
              // 关闭 loading 效果
              this.loading = false;
            }, 500);
          } else {
            // this.$modal.msgError("操作失败");
            console.log("应该更新状态的");
            // 更新所有设备状态;
            this.getPolicyList();
          }
        })
        .catch((error) => {
          console.log("请求发生错误，更新设备状态", error);
          // 更新所有设备状态;
          this.getPolicyList();
        });
    },
    // 启用状态
    handleSwitchStatus(item) {
      this.$confirm(
        `确定要切换"${item.name}"的状态为:${
          item.delayStatus ? "开启" : "停用 吗?"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 这里调用请求函数
          console.log("请求后台", item.delayStatus);
          let param = null;
          if (item.delayStatus) {
            param = 1;
          } else {
            param = 0;
          }
          this.handleSwitchOperationConrol(item.delayStatusId, param);
        })
        .catch(() => {
          // 用户取消操作，恢复开关状态
          item.delayStatus = !item.delayStatus;
          console.log("不请求后台");
        });
    },
    // 处理select的选中值
    selectThink(children) {
      console.log(
        "this.startStopObj.collectValue ",
        this.startStopObj.collectValue
      );
      const oldValue = children._oldValue;
      let collectText = "";
      if (this.startStopObj.collectValue === 0) {
        collectText = "远程手动启停";
      } else if (this.startStopObj.collectValue === 1) {
        collectText = "时间表启停";
      }
      this.$confirm(
        `确定要修改"${children.collectName}"的数据为:${collectText}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.startStopValue = this.startStopObj.collectValue;
          this.hadleOperationConrol(children.id, children.collectValue);
        })
        .catch(() => {
          // 用户取消操作，恢复原来的值
          children.collectValue = oldValue;
        });
    },
    // 处理select下拉框显示或隐藏事件
    handleVisibleChange(visible, children) {
      if (visible) {
        // 当下拉框打开时保存原值
        this.$set(children, "_oldValue", children.collectValue);
      }
    },
    // 处理select的选中值
    selectThink2(children) {
      const oldValue = children._oldValue;
      let collectText = "";
      if (this.modeChangeObj.collectValue === 0) {
        collectText = "宴会一厅模式";
      } else if (this.modeChangeObj.collectValue === 1) {
        collectText = "餐厅模式";
      } else if (this.modeChangeObj.collectValue === 2) {
        collectText = "会议模式";
      } else if (this.modeChangeObj.collectValue === 3) {
        collectText = "全开模式";
      }
      this.$confirm(
        `确定要修改"${children.collectName}"的数据为:${collectText}吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (this.modeChangeObj.collectValue === 0) {
            this.isShowMode1 = true;
            this.isShowMode2 = false;
            this.isShowMode3 = false;
            this.isShowMode4 = false;
          } else if (this.modeChangeObj.collectValue === 1) {
            this.isShowMode1 = false;
            this.isShowMode2 = true;
            this.isShowMode3 = false;
            this.isShowMode4 = false;
          } else if (this.modeChangeObj.collectValue === 2) {
            this.isShowMode1 = false;
            this.isShowMode2 = false;
            this.isShowMode3 = true;
            this.isShowMode4 = false;
          } else if (this.modeChangeObj.collectValue === 3) {
            this.isShowMode1 = false;
            this.isShowMode2 = false;
            this.isShowMode3 = false;
            this.isShowMode4 = true;
          }
          this.hadleOperationConrol(children.id, children.collectValue);
        })
        .catch(() => {
          // 用户取消操作，恢复原来的值
          children.collectValue = oldValue;
        });
    },
    // 处理select下拉框显示或隐藏事件
    handleVisibleChange2(visible, children) {
      if (visible) {
        // 当下拉框打开时保存原值
        this.$set(children, "_oldValue", children.collectValue);
      }
    },
    // 一键启停按钮
    handleOneKeyButton(item, val) {
      console.log(
        "this.automaticObj.collectValue",
        this.automaticObj.collectValue
      );
      if (this.automaticObj.collectValue) {
        // 如果风机手自动状态为手动，则不可点击该按钮。
        this.$message({
          message: "当前风机手自动状态为手动",
          type: "warning",
        });
        return;
      }
      let param = "";
      let paramText = "";
      if (item.collectValue) {
        // startControlObj.collectValue为true代表ON开启,此时点击按钮想OFF停止
        param = 0;
        paramText = "停止";
      } else {
        param = 1;
        paramText = "开启";
      }
      this.$confirm(`确定把${val}设置为:${paramText}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hadleOperationConrol(item.id, param);
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.buildingDiv {
  padding-left: 54px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  .title-bg {
    width: 208px;
    height: 38px;
    position: absolute;
    left: 0;
    z-index: 0;
  }
  .title-word {
    z-index: 10;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    color: #ffffff;
    white-space: nowrap;
  }
}
.mostDiv {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //   align-items: flex-start;
}
.windC {
  width: 13rem;
  height: 5.38rem;
  margin-right: 1rem;
  position: relative;
  .menu-title {
    color: #e1f4ff;
    font-size: 0.18rem;
    --bRadius: 0.05rem;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0.5rem;
    width: 1.25rem;
    cursor: pointer;
    z-index: 9;
    div {
      position: relative;
      text-align: center;
      border-radius: var(--bRadius);
      transition: all 0.3s;
      padding: 0.01rem 0.02rem;
      background-color: rgba(85, 139, 211, 0.2);
      cursor: pointer;
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border: 2px solid #46b2f1;
        transition: all 0.5s;
        border-radius: var(--bRadius);
        animation: clippath 3s infinite linear;
        cursor: pointer;
      }
      &::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%);
        }
      }
    }
  }
  .wind-img {
    width: 13.1rem;
    height: 5.7rem;
    position: absolute;
    top: 0.2rem;
    left: 0;
    z-index: 1;
  }
  .wind-tem1 {
    z-index: 10;
    width: 1.3rem;
    position: absolute;
    top: 0rem;
    left: 4.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-bottom: 0.15rem;
    }
  }
  .wind-tem1-set {
    z-index: 10;
    width: 1.3rem;
    position: absolute;
    top: 1rem;
    left: 4.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-bottom: 0.15rem;
    }
  }
  .dampers-name1 {
    z-index: 10;
    position: absolute;
    top: 1.5rem;
    left: 10.1rem;
    color: #00d2ff;
    font-size: 0.18rem;
    white-space: nowrap;
    font-weight: bold;
  }
  .dampers-position1 {
    z-index: 10;
    // width: 3.8rem;
    position: absolute;
    top: 1.1rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position2 {
    z-index: 10;
    // width: 3.8rem;
    position: absolute;
    top: 1.45rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position3 {
    z-index: 10;
    width: 3rem;
    position: absolute;
    top: 1.85rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position4 {
    z-index: 10;
    // width: 3.8rem;
    position: absolute;
    top: 2.2rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-name2 {
    z-index: 10;
    position: absolute;
    top: 3.3rem;
    left: 10.3rem;
    color: #00d2ff;
    font-size: 0.18rem;
    white-space: nowrap;
    font-weight: bold;
  }
  .dampers-position6 {
    z-index: 10;
    // width: 3.57rem;
    position: absolute;
    top: 2.9rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position7 {
    z-index: 10;
    // width: 3.57rem;
    position: absolute;
    top: 3.25rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position8 {
    z-index: 10;
    width: 3rem;
    position: absolute;
    top: 3.7rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position9 {
    z-index: 10;
    // width: 3.57rem;
    position: absolute;
    top: 4.1rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-name3 {
    z-index: 10;
    position: absolute;
    top: 5.2rem;
    left: 10.45rem;
    color: #00d2ff;
    font-size: 0.18rem;
    white-space: nowrap;
    font-weight: bold;
  }
  .dampers-position10 {
    z-index: 10;
    // width: 3.57rem;
    position: absolute;
    top: 4.8rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position11 {
    z-index: 10;
    // width: 3.57rem;
    position: absolute;
    top: 5.15rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position12 {
    z-index: 10;
    width: 3rem;
    position: absolute;
    top: 5.6rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .dampers-position13 {
    z-index: 10;
    // width: 3.57rem;
    position: absolute;
    top: 6rem;
    left: 12rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
    .back-text {
      margin-right: 0.1rem;
    }
  }
  .fan-frequency {
    z-index: 10;
    position: absolute;
    top: 1.7rem;
    left: 8.5rem;
    width: 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-bottom: 0.15rem;
    }
  }
  .fan-satatus1 {
    position: absolute;
    top: 4.3rem;
    left: 6.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .context-li {
      z-index: 10;
      // width: 2rem;
      margin-bottom: 0.1rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 0.18rem;
    }
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-right: 0.15rem;
      white-space: nowrap;
    }
  }
  .fan-satatus2 {
    position: absolute;
    top: 5.3rem;
    left: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .context-li {
      z-index: 10;
      width: 2rem;
      margin-bottom: 0.1rem;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-right: 0.15rem;
      white-space: nowrap;
    }
  }
  .fan-satatus2-set {
    position: absolute;
    top: 5.8rem;
    left: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .context-li {
      z-index: 10;
      width: 2rem;
      margin-bottom: 0.1rem;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-right: 0.15rem;
      white-space: nowrap;
    }
  }
  .fan-satatus3 {
    position: absolute;
    top: 0.8rem;
    left: 6.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .context-li {
      z-index: 10;
      // width: 2rem;
      margin-bottom: 0.1rem;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-right: 0.15rem;
      white-space: nowrap;
    }
  }
  .fan-satatus4 {
    position: absolute;
    top: 5rem;
    left: 0rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .context-li {
      z-index: 10;
      width: 3rem;
      margin-bottom: 0.1rem;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-right: 0.15rem;
      white-space: nowrap;
    }
  }
  .goodStautus {
    color: rgb(57, 248, 51);
    font-size: 0.18rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .goodStautus::before {
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    margin-right: 0.1rem;
    border-radius: 50%;
    background-color: rgb(57, 248, 51);
  }
  .badStautus {
    color: rgb(248, 48, 41);
    font-size: 0.18rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: blink 1s infinite;
  }
  .badStautus::before {
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    margin-right: 0.1rem;
    border-radius: 50%;
    background-color: rgb(248, 48, 41);
    animation: blink 1s infinite;
  }
  .noneStautus {
    color: rgb(194, 191, 191);
    font-size: 0.18rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .noneStautus::before {
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    margin-right: 0.1rem;
    border-radius: 50%;
    background-color: rgb(194, 191, 191);
  }
  /* 定义灯闪烁的动画 */
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
    100% {
      opacity: 1;
    }
  }
  .wind-valve {
    z-index: 10;
    position: absolute;
    top: 4.4rem;
    left: 1.8rem;
    width: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.18rem;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      white-space: nowrap;
    }
  }
  .wind-valve2 {
    z-index: 10;
    position: absolute;
    top: 4.8rem;
    left: 1.8rem;
    width: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    .wind-text {
      color: #00d2ff;
      font-size: 0.18rem;
      margin-right: 0.1rem;
      white-space: nowrap;
    }
  }
  .windMove {
    width: 0.72rem;
    height: 0.73rem;
    position: absolute;
    top: 3.11rem;
    right: 6.24rem;
    z-index: 10;
  }
  .tunCircle {
    /* 应用动画 */
    animation: rotate 2s linear infinite;
  } /* 定义旋转动画 */
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .arrow-flex2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 10;
    position: absolute;
    top: 3.2rem;
    right: 2.9rem;
  }
  .arrow-flex3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 10;
    position: absolute;
    top: 0.6rem;
    right: 8.7rem;
    transform: rotateY(180deg);
  }
  .wind-arrow {
    width: 0.4rem;
    height: 0.6rem;
    margin-right: 0.15rem;
    animation: moveArrow 2s linear infinite;
  }
  /* 定义每个箭头的透明度 */
  .wind-arrow:nth-child(1) {
    opacity: 1;
  }

  .wind-arrow:nth-child(2) {
    opacity: 0.6;
  }

  .wind-arrow:nth-child(3) {
    opacity: 0.4;
  }
  .wind-arrow:nth-child(4) {
    opacity: 0.2;
  }

  /* 定义箭头移动的动画 */
  @keyframes moveArrow {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(0.2rem);
      /* 箭头向右移动的距离 */
    }
  }
  .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: 5.5rem;
    left: 6.7rem;
    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.22rem;
      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;
  }
}
.device-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 530px;
  background-color: #142c4e;
  padding: 10px 10px 30px 10px;
  border-radius: 10px;
  font-size: 14px;
  .device-li {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 0;
    color: #abcdfc;
    border-bottom: 1px dashed #0349ac;
    .device-name {
      flex: 1;
      white-space: nowrap;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      padding: 0 5px;
      .el-form-item {
        margin-bottom: 0 !important;
      }
      .slip {
        margin: 0 5px;
        color: #1282d8;
        font-weight: bold;
      }
    }
  }
  .device-li:nth-child(1) {
    color: #9ca3af;
  }
}
.highlight {
  background-color: #003863 !important; /* 定义高亮的背景颜色 */
  color: #ffffff !important;
  font-weight: bold;
}
.device-container .highlight .device-name .slip {
  color: #ffffff !important;
  font-weight: bold;
}
/* 为高亮行添加图片箭头 */
.device-li.highlight::before {
  content: "";
  background-image: url("../../../../assets/images/step.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 2px; /* 图片位置，根据实际情况调整 */
  top: 20%;
  transform: translateY(-50%);
  z-index: 999;
  animation: moveRight 1s ease-in-out infinite alternate;
}
@keyframes moveRight {
  0% {
    transform: translateX(0); /* 初始位置，不移动 */
  }
  100% {
    transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
  }
}

/* 确保 device-li 有相对定位 */
.device-li {
  position: relative;
}

/* 报警文字样式 */
.alarm-text {
  color: red !important;
  animation: blink 1s infinite;
}

// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
  .device-container {
    min-height: 7rem !important;
    padding: 0.1rem 0.1rem 0.3rem 0.1rem !important;
    border-radius: 0.1rem !important;
    font-size: 0.14rem !important;
    .device-li {
      padding: 0.12rem 0 !important;
      .device-name {
        .slip {
          margin: 0 0.05rem !important;
        }
      }
    }
  }
}
@media (min-width: 1360px) and (max-width: 1680px) {
  .windC {
    transform: scale(0.9);
  }
}
@media (min-width: 990px) and (max-width: 1360px) {
  .windC {
    transform: scale(0.8);
    .fan-satatus3 {
      top: 0.2rem !important;
    }
  }
}
// @media (min-width: 990px) and (max-width: 1160px) {
//   .windC {
//     transform: scale(0.7);
//   }
// }
// 手机端样式
@media (min-width: 0px) and (max-width: 990px) {
  .right-monitor {
    width: calc(100% - 210px) !important;
  }
  .windC {
    transform: scale(0.86);
    .fan-satatus3 {
      top: 0.6rem !important;
    }
  }
  .buildingDiv {
    padding-left: 0.54rem !important;
    margin-bottom: 0.2rem !important;
    .title-bg {
      width: 2.08rem !important;
      height: 0.38rem !important;
    }
    .title-word {
      font-size: 15px !important;
    }
  }
  .dampers-position2 {
    top: 1.3rem !important;
  }
  .dampers-position7 {
    top: 3.1rem !important;
  }
  .dampers-position11 {
    top: 5rem !important;
  }
}
</style>
<style scoped>
.windC >>> .el-input__inner {
  background-color: #04193a;
  border: 1px solid #1262db;
  color: #3ef0fd;
  font-weight: 700;
  text-align: center;
  padding: 0 0.1rem !important;
  font-size: 0.18rem !important;
}
.windC >>> .el-select .el-input__inner {
  background-color: #04193a;
  border: 1px solid #1262db;
  color: #3ef0fd;
  font-weight: 700;
  text-align: left !important;
  padding: 0 0.1rem !important;
  font-size: 0.17rem !important;
}
.windC >>> .el-input__prefix {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.windC >>> .svg-icon {
  width: 0.2rem !important;
  height: 0.2rem !important;
  fill: #ffffff !important;
}
.windC >>> .el-form-item {
  margin-bottom: 0 !important;
}
.windC >>> .el-form-item--medium .el-form-item__content {
  line-height: 0 !important;
}
.windC >>> .el-switch {
  display: flex !important;
  flex-wrap: nowrap !important;
}
.windC >>> .el-switch__label {
  white-space: nowrap !important;
}
/* 手机端样式 */
@media (min-width: 0px) and (max-width: 990px) {
  .windC >>> .el-input--mini .el-input__inner {
    height: 0.28rem !important;
    line-height: 0.28rem !important;
    padding: 0.2rem 0.1rem !important;
  }
  .windC >>> .el-switch {
    height: 0.2rem !important;
    line-height: 0.2rem !important;
    font-size: 0.18rem !important;
  }
  .windC >>> .el-switch__label {
    height: 0.2rem !important;
    line-height: 0.2rem !important;
    font-size: 0.18rem !important;
  }
  .windC >>> .el-switch__label * {
    font-size: 0.18rem !important;
  }
  .windC >>> .el-switch__core {
    width: 0.4rem !important;
    height: 0.2rem !important;
    border-radius: 0.1rem !important;
  }
  .windC >>> .el-switch__core:after {
    width: 0.16rem !important;
    height: 0.16rem !important;
    top: 0.01rem !important;
  }
  .windC >>> .el-switch.is-checked .el-switch__core::after {
    margin-left: -0.17rem !important;
  }
  .custom-dialog >>> .el-dialog {
    width: 550px !important;
  }
  .custom-dialog >>> .el-dialog__title {
    width: 224px !important;
    height: 35px !important;
    font-size: 18px !important;
    line-height: 20px !important;
  }
  .custom-dialog >>> .el-dialog__body {
    padding: 10px 20px !important;
  }
  .device-li .device-name {
    font-size: 12px !important;
  }
  .device-container .device-li {
    padding: 10px 0 !important;
  }
  .device-li .device-name .el-input {
    width: 50px !important;
  }
  .device-li.highlight::before {
    left: -5px !important;
    width: 20px !important;
    height: 20px !important;
    top: 30% !important;
  }
  .custom-dialog >>> .el-switch__label * {
    font-size: 12px !important;
  }
  .custom-dialog >>> .el-switch__core {
    width: 37px !important;
    height: 17px !important;
  }
  .custom-dialog >>> .el-switch__core:after {
    width: 13px !important;
    height: 13px !important;
  }
  .custom-dialog >>> .el-form-item {
    margin-bottom: 0 !important;
  }
  .custom-dialog >>> .el-form-item--medium .el-form-item__content {
    line-height: 0 !important;
  }
  .windC >>> .el-select .el-input .el-select__caret {
    font-size: 0.14rem !important;
  }
  .windC >>> .el-input--mini .el-input__icon {
    line-height: 0.28rem !important;
  }
  .windC >>> .el-input__icon {
    width: 0.25rem !important;
  }
}
</style>
