sagacloud-sagacare-ipad/src/views/envmonitor/components/Air/manualIndex.vue

<template>
  <div class="air">
    <div class="air-top">
      <div class="air-desc">
        <p class="air-title">空调</p>
        <p class="air-temperature">
          {{ airTemp ? airTemp : "--" }}
          <sup>℃</sup>
        </p>
        <div
          class="show-all"
          @click.stop="showAll"
          v-if="equipList && equipList.length > 1"
        >
          <van-icon :name="lightIcon" class="light-icon" />
          <span v-if="!showChild">查看全部</span>
          <span v-else>收起全部</span>
        </div>
      </div>
      <div class="air-right">
        <img v-if="airData.airImg" :src="airData.airImg" alt="" />
        <van-loading style="padding-top: 20px" v-else />
        <Switch
          class="switch-btn"
          v-if="!showChild"
          :loading="loadingAir || firstLoadingAir"
          :disabled="loadingAir || firstLoadingAir"
          inactive-color="rgba(196, 196, 196, 0.4)"
          @click="airChange"
          :model-value="airData.isOpen"
        />
      </div>
    </div>
    <!--温度调节-->
    <div
      v-if="!showChild && airData.runStatus"
      :style="{ opacity: loadingAir || !airData.runStatus ? '0.4' : '1' }"
    >
      <div class="air-control air-control-padding">
        <div class="control-box">
          <div class="temp-text">{{ airData.minTempSet }}℃</div>
          <div class="temp-slider" id="sliderId">
            <div
              class="item"
              v-for="(item, index) in 5"
              :key="'bar' + index"
            ></div>
            <div class="slider-bar" id="barId">
              <div class="bar-temp">{{ realTemp }}℃</div>
              <div class="bar-circle" id="handId"></div>
            </div>
          </div>
          <div class="temp-text">{{ airData.maxTempSet }}℃</div>
        </div>
        <div class="control-text">温度设定</div>
      </div>
      <div class="air-control">
        <div class="control-box">
          <div class="volume-box">
            <div class="number">
              <span
                v-for="(item, index) in windGearArr"
                :class="airData.gear === item ? 'number-active' : ''"
                :key="'volume' + index"
                >{{ item }}</span
              >
            </div>
            <div class="text">风量调节</div>
          </div>
          <div class="volume-icon">
            <div
              class="icon-item"
              :style="{
                opacity: airData.gear <= 1 ? '0.6' : 1,
              }"
              @click="changeZongAir('gear', 'windLow')"
            >
              <img :src="parseImgUrl('ipdImages', 'wind_small.png')" />
            </div>
            <div
              class="icon-item"
              :style="{ opacity: airData.gear >= 3 ? '0.6' : 1 }"
              @click="changeZongAir('gear', 'windUp')"
            >
              <img :src="parseImgUrl('ipdImages', 'wind_big.png')" />
            </div>
            <div
              class="icon-item"
              @click="changeZongAir('gear', 'auto')"
              :class="airData.isAutoGear ? 'active-color' : ''"
            >
              <span> AUTO</span>
            </div>
          </div>
        </div>
      </div>
      <div class="air-control">
        <div class="control-box">
          <div class="volume-box">
            <div class="model">
              {{
                airData.workMode == 1
                  ? "制冷"
                  : airData.workMode == 2
                  ? "制热"
                  : "通风"
              }}
            </div>
            <div class="text">模式设定</div>
          </div>
          <div class="volume-icon">
            <div
              class="icon-item"
              :class="airData.workMode === 2 ? 'active-color' : ''"
              @click="changeZongAir('mode', 2)"
            >
              <img
                :src="
                  airData.workMode === 2
                    ? parseImgUrl('ipdImages', 'airsunred.svg')
                    : parseImgUrl('ipdImages', 'airsunblack.svg')
                "
              />
            </div>
            <div
              class="icon-item"
              :class="airData.workMode === 1 ? 'active-color' : ''"
              @click="changeZongAir('mode', 1)"
            >
              <img
                :src="
                  airData.workMode === 1
                    ? parseImgUrl('ipdImages', 'aircoldblue.svg')
                    : parseImgUrl('ipdImages', 'aircoldblack.svg')
                "
              />
            </div>
            <div
              class="icon-item"
              :class="airData.workMode === 3 ? 'active-color' : ''"
              @click="changeZongAir('mode', 3)"
            >
              <img
                :src="
                  airData.workMode === 3
                    ? parseImgUrl('ipdImages', 'aircloudgreen.svg')
                    : parseImgUrl('ipdImages', 'aircloudblack.svg')
                "
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--子设备-->
    <div class="air-child" v-if="showChild">
      <div
        class="child-control-box"
        :key="'child' + index"
        v-for="(childItem, index) in equipList"
      >
        <div class="open-title">
          <span>{{ childItem.localName }}</span>
          <Switch
            @click="changeChildItemAir('switch', childItem, 'switch')"
            :loading="
              childItem.loadingTimer > 0 && childItem.loadingTimer <= 15
                ? true
                : false
            "
            :disabled="
              childItem.loadingTimer > 0 && childItem.loadingTimer <= 15
                ? true
                : false
            "
            :model-value="childItem.isOpen"
            class="child-switch"
            inactive-color="rgba(196, 196, 196, 0.4)"
            size="14px"
          />
        </div>
        <div
          class="adjust-box"
          :style="{
            opacity: childItem.runStatus && childItem.isOpen ? '' : '0.3',
          }"
        >
          <div class="adjust-item">
            <van-icon
              name="arrow-up"
              :class="
                childItem.tempSet >= airData.maxTempSet ? 'disable-color' : ''
              "
              @click="changeChildItemAir('temp', childItem, 'up')"
              class="adjust-icon"
            />
            <div class="adjust-text">
              <div
                class="value-wrap"
                :style="{
                  transform: valueHeight
                    ? 'translateY(' + -childItem.sel * valueHeight + 'px)'
                    : 'translateY(0px)',
                }"
              >
                <div
                  class="value"
                  :key="index + 'ct'"
                  v-for="(titem, index) in childItem.tempArr"
                >
                  {{ titem }}
                </div>
              </div>
            </div>
            <van-icon
              name="arrow-down"
              :class="
                childItem.tempSet <= airData.minTempSet ? 'disable-color' : ''
              "
              @click="changeChildItemAir('temp', childItem, 'down')"
              class="adjust-icon"
            />
            <span class="adjust-title">温度</span>
          </div>
          <div class="adjust-item">
            <van-icon
              name="arrow-up"
              :class="childItem.isAutoGear ? 'disable-color' : ''"
              @click="changeChildItemAir('gear', childItem, 'up')"
              class="adjust-icon"
            />
            <div class="adjust-text">
              <div
                class="value-wrap"
                :style="{
                  transform: valueHeight
                    ? 'translateY(' + -childItem.gIndex * valueHeight + 'px)'
                    : 'translateY(0px)',
                }"
              >
                <div
                  class="value"
                  v-for="(gItem, index) in childItem.gearArr"
                  :key="index + 'g'"
                >
                  {{ gItem }}
                </div>
              </div>
            </div>
            <van-icon
              name="arrow-down"
              :class="
                !childItem.isAutoGear && childItem.gear <= 1
                  ? 'disable-color'
                  : ''
              "
              @click="changeChildItemAir('gear', childItem, 'down')"
              class="adjust-icon"
            />
            <span class="adjust-title">档位</span>
          </div>
          <div class="adjust-item">
            <van-icon
              name="arrow-up"
              :class="childItem.workMode >= 3 ? 'disable-color' : ''"
              @click="changeChildItemAir('model', childItem, 'up')"
              class="adjust-icon"
            />
            <div class="adjust-text">
              <div
                class="value-wrap"
                :style="{
                  transform: valueHeight
                    ? 'translateY(' + -childItem.mIndex * valueHeight + 'px)'
                    : 'translateY(0px)',
                }"
              >
                <div
                  class="value"
                  v-for="(mItem, index) in childItem.modelArr"
                  :key="index + 'm'"
                >
                  {{ mItem }}
                </div>
              </div>
            </div>
            <van-icon
              name="arrow-down"
              :class="childItem.workMode <= 1 ? 'disable-color' : ''"
              @click="changeChildItemAir('model', childItem, 'down')"
              class="adjust-icon"
            />
            <span class="adjust-title">模式</span>
          </div>
        </div>
      </div>
    </div>
    <!-- v-if="cotrolLoading" -->
    <!-- <div class="loading-box" v-if="cotrolLoading">
      <van-loading style="padding-top: 20px" />
    </div> -->
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  computed,
  watch,
  onUnmounted,
  onBeforeMount,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { Switch, Dialog, Toast } from "vant";
import { swiper } from "@/utils/swiper";
import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
import { parseImgUrl, setQueryConfig } from "@/utils";
import any = jasmine.any;

export default defineComponent({
  props: {
    temperature: {
      // 空调基本信息
      type: Number,
      default: () => 0,
    },
    hasAir: {
      // 有无空调
      type: Boolean,
      default: () => false,
    },
    airVolumes: {
      // 风量信息
      type: Array,
      default: () => [],
    },
    projectId: {
      type: String,
      default: () => "",
    },
    spaceId: {
      type: String,
      default: () => "",
    },
    userIsControl: {
      type: Boolean,
      default: () => false,
    },
    forceOverTimeFlag: {
      type: Boolean,
      default: () => false,
    },
    seviceEquipmentList: {
      // 是否走服务定制的设备
      type: Array,
      default: () => [],
    },
  },
  components: {
    Switch,
    [Dialog.Component.name]: Dialog.Component,
  },
  setup(props, contx) {
    const propsVal = props;
    let airData: any = {
      avg: "", // 算法调节温度（目标值）
      icon: 1, // 固定框文案ID 7 为关机，其它都是开机
      spaceStatus: "", // 固定框文案展示
      notice: "", // 弹框文案展示
      mode: 0, //  模式
      tempSet: 0, // 温度
      maxTempSet: 32,
      minTempSet: 16,
      isAutoGear: 0,
      workMode: 0, //1=cold(制冷)；2=hot(制热)；3=wind(通风)
      gear: 0, //  风量
      isOpen: false, // 空调开关 true 是开
      runStatus: 0, // 查询设备的真实状态
    };
    const feedbackTimer: any = null;
    const airTimer: any = null;
    const domAirOpeen: any = false;
    let realTemp: any = 16;
    let windGearArr: any = [0, 1, 2, 3];
    let equipList: any = [];
    let valueDom: any = null;
    let valueHeight: any = null;
    let spaceId: any = "";
    const proxyData = reactive({
      seviceEquipmentList: props.seviceEquipmentList,
      valueDom: valueDom,
      spaceId: spaceId,
      valueHeight: valueHeight,
      equipList: equipList,
      cotrolLoading: false,
      loadingTimer: 0,
      airTemp: 0, // 设备真实温度
      loadingAir: false,
      windGearArr: windGearArr, // 风量3/5个档位
      lightIcon: "arrow-down",
      showChild: false,
      realTemp: realTemp,
      temperature: props.temperature,
      userIsControl: props.userIsControl,
      forceOverTimeFlag: props.forceOverTimeFlag,
      firstLoadingAir: true,
      domAirOpeen: domAirOpeen,
      swiperIinit: false,
      parseImgUrl: parseImgUrl,
      part: 1,
      airData: airData,
      modeName: "",
      showAirVolumeBtn: false, // 是否展示风量调节按钮
      showDialog: false,
      airTimer: airTimer,
      airSetText: {
        // 空调反馈文案
        notice: "",
        remark: [],
        nowImg: "",
        toWhere: "",
        designTemperature: 0,
      },
      // 点击展示所有的登录
      async showAll() {
        proxyData.showChild = !proxyData.showChild;
        if (proxyData.lightIcon === "arrow-up") {
          proxyData.lightIcon = "arrow-down";
        } else {
          proxyData.lightIcon = "arrow-up";
        }

        if (proxyData.showChild) {
          await nextTick(() => {
            proxyData.setChildSelectList();
          });
        } else {
          await nextTick(() => {
            proxyData.barSwiperInit();
          });
        }

        // proxyData.getAirInfoToTimer(0);
      },
      // 设置温度条的位置
      setBarNowPerstion() {
        proxyData.realTemp = proxyData.airTemp;
        let barBox: any = document.querySelector("#barId");
        // console.log("设置温度位置---");
        // console.log(barBox)
        if (!barBox) {
          return;
        }
        let sliderBox: any = document.querySelector("#sliderId");
        if (
          proxyData.airTemp >= proxyData.airData.minTempSet &&
          proxyData.airTemp <= proxyData.airData.maxTempSet
        ) {
          // 正常温度范围
          let left: any =
            ((proxyData.airTemp - proxyData.airData.minTempSet) / 0.5) *
            proxyData.part;
          left = Math.floor(left);
          if (barBox) {
            barBox.style.left = left + "px";
          }
        } else {
          if (!proxyData.airTemp) {
            barBox.style.left = 0 + "px";
          } else if (proxyData.airTemp < proxyData.airData.minTempSet) {
            barBox.style.left = 0 + "px";
          } else if (proxyData.airTemp > proxyData.airData.maxTempSet) {
            let sliderWidth: any = sliderBox.offsetWidth;
            let barWidth: any = barBox.offsetWidth;
            barBox.style.left = sliderWidth - barWidth + "px";
          }
        }
      },
      // 滑动
      endBoxSwiper() {
        proxyData.swiperIinit = true;
        let handBox: any = document.querySelector("#handId");
        let barBox: any = document.querySelector("#barId");
        let sliderBox: any = document.querySelector("#sliderId");
        let isMove: any = false;
        let barLeft: any = 0;
        let sliderWidth: any = sliderBox ? sliderBox.offsetWidth : 1;
        let barWidth: any = barBox ? barBox.offsetWidth : 20;
        let tempPart =
          (proxyData.airData.maxTempSet - proxyData.airData.minTempSet) / 20;
        let part: any = 0.5 / (tempPart / (Math.floor(sliderWidth) / 22));
        proxyData.part = part;
        if (!handBox) {
          return;
        }
        handBox.addEventListener("touchstart", function (e: any) {
          barLeft = isNaN(parseInt(barBox.style.left))
            ? 0
            : parseInt(barBox.style.left);
          isMove = true;
        });
        handBox.addEventListener("touchend", function (e: any) {
          isMove = false;
          proxyData.changeZongAir("temp", proxyData.realTemp);
          proxyData.airTemp = proxyData.realTemp;
        });
        swiper(handBox, {
          swipeLeft: function (e: any) {
            if (isMove) {
              barLeft = Math.abs(barLeft);
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let left: any = barLeft - moveRealX;
              left = left < 0 ? 0 : left;
              barBox.style.left = left + "px";
              proxyData.realTemp =
                proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
            }
          },
          swipeRight: function (e: any) {
            if (isMove) {
              barLeft = Math.abs(barLeft);
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let left: any = barLeft + moveRealX;
              left = left > sliderWidth ? sliderWidth - barWidth : left;
              barBox.style.left = left + "px";
              proxyData.realTemp =
                proxyData.airData.minTempSet + Math.ceil(left / part) * 0.5;
              if (proxyData.realTemp > proxyData.airData.maxTempSet) {
                proxyData.realTemp = proxyData.airData.maxTempSet;
              }
            }
          },
        });
      },
      // 定时获取空调状态
      getAirInfoToTimer(timerLong: any = 10000) {
        if (proxyData.airTimer) {
          clearTimeout(proxyData.airTimer);
          proxyData.airTimer = null;
        }
        proxyData.airTimer = setTimeout(function () {
          proxyData.getAirInfo();
        }, timerLong);
      },
      // 计算loading时间
      setLoadingNumber() {
        let timer: any = setInterval(() => {
          proxyData.loadingTimer++;
          console.log(proxyData.loadingTimer);
          if (proxyData.loadingTimer >= 15) {
            clearInterval(timer);
            proxyData.loadingAir = false;
            proxyData.getAirInfoToTimer(0);
          }
        }, 1000);
      },
      // 格式化空调数据
      formatAirData(btnType: any, text: any) {
        let obj: any = {};
        if (btnType == "temp") {
          obj.codeKey = "tempSetCode";
          obj.value = text;
        }
        if (btnType == "gear" && text == "windLow") {
          //降挡
          if (proxyData.airData.gear > 1) {
            proxyData.airData.gear--;
            proxyData.airData.isAutoGear = 0;
            obj.value = proxyData.airData.gear;
            obj.codeKey = "gearCode";
          } else {
            return;
          }
        }
        if (btnType == "gear" && text == "windUp") {
          //升档
          if (proxyData.airData.gear < 3) {
            proxyData.airData.gear++;
            proxyData.airData.isAutoGear = 0;
            obj.value = proxyData.airData.gear;
            obj.codeKey = "gearCode";
          } else {
            return;
          }
        }
        if (btnType == "gear" && text == "auto") {
          proxyData.airData.isAutoGear = proxyData.airData.isAutoGear ? 0 : 1;
          obj.value = proxyData.airData.isAutoGear ? 4 : proxyData.airData.gear;
          obj.codeKey = "gearCode";
        }
        if (btnType == "mode") {
          proxyData.airData.workMode = text;
          obj.codeKey = "modeSetCode";
          obj.value = text;
        }
        return obj;
      },
      /**
       * 加载loading
       */
      loadingStart() {
        proxyData.cotrolLoading = true;
      },
      /**
       * 结束
       */
      loadinngEnd() {
        proxyData.cotrolLoading = false;
      },
      // 计算loading时间
      setChildLoadingNumber(childItem: any) {
        childItem.loadingTimer = 1;
        let timer: any = setInterval(() => {
          childItem.loadingTimer++;
          if (childItem.loadingTimer >= 15) {
            clearInterval(timer);
            childItem.loadingTimer = 0;
            proxyData.getAirInfoToTimer(0);
          }
          console.log("===");
          console.log(childItem.loadingTimer);
        }, 1000);
      },
      // 连续点击2秒内未点击才发指令
      childDisabled(childItem: any, data: any) {
        clearTimeout(childItem.timeOuter);
        childItem.timeOuter = setInterval(() => {
          childItem.num--;
          if (childItem.num == 0) {
            proxyData.setSpaceCondtioners(data);
            clearTimeout(childItem.timeOuter);
          }
        }, 1000);
      },
      // 子设备降低温度
      changeChildItemAir(btnType: any, childItem: any, symbol: any) {
        const domAirOpen = !childItem.isOpen;
        let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime([
          childItem,
        ]);
        if (
          proxyData.forceOverTimeFlag &&
          domAirOpen &&
          isExeSpaceTime &&
          btnType == "switch"
        ) {
          //需要强制加班
          contx.emit("triggerWork", 2, childItem);
          return;
        }
        // 空调没有开的时候不让调温度和风量
        if (!childItem.isOpen && btnType !== "switch") {
          return;
        }
        let arr: any = [];
        if (btnType === "switch") {
          if (childItem.loadingTimer >= 1 && childItem.loadingTimer <= 15) {
            return;
          }
          childItem.isOpen = !childItem.isOpen;
          proxyData.setChildLoadingNumber(childItem);
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.switchCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.isOpen ? "1" : "0", //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
          // loadig的状态
        } else if (btnType === "temp") {
          childItem.num = 2;
          if (symbol === "up") {
            if (childItem.tempSet >= proxyData.airData.maxTempSet) {
              return;
            }
            childItem.tempSet = childItem.tempSet + 0.5;
          } else if (symbol === "down") {
            if (childItem.tempSet <= proxyData.airData.minTempSet) {
              return;
            }
            childItem.tempSet = childItem.tempSet - 0.5;
          }
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.tempSetCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.tempSet, //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
          proxyData.childDisabled(childItem, arr);
        } else if (btnType === "gear") {
          if (symbol === "up") {
            if (childItem.isAutoGear) {
              return;
            }
            if (childItem.gear >= 3) {
              childItem.isAutoGear = 1;
            } else {
              childItem.gear++;
              childItem.isAutoGear = 0;
            }
          } else if (symbol === "down") {
            if (!childItem.isAutoGear && childItem.gear <= 1) {
              return;
            }
            if (childItem.isAutoGear) {
              childItem.isAutoGear = 0;
              childItem.gear = 3;
            } else {
              childItem.gear--;
            }
          }
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.gearCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.isAutoGear ? 4 : childItem.gear, //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
        } else if (btnType === "model") {
          if (symbol === "up") {
            if (childItem.workMode >= 3) {
              return;
            }
            childItem.workMode++;
          } else if (symbol === "down") {
            if (childItem.workMode <= 1) {
              return;
            }
            childItem.workMode--;
          }
          let obj: any = {
            id: childItem.id, //类型：String  必有字段  备注：设备id
            code: childItem.modeSetCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: childItem.workMode, //类型：String  必有字段  备注：值 0
          };
          arr.push(obj);
        }
        // 修改单个设备的状态
        if (btnType !== "temp") {
          proxyData.setSpaceCondtioners(arr);
        }
        proxyData.updateChildPerstion();
      },
      // 改变设备状态
      setSpaceCondtioners(data: any) {
        setSpaceCondtioners(data)
          .then((res) => {
            // proxyData.setLoadingNumber();
            proxyData.loadinngEnd();
          })
          .catch(() => {
            // proxyData.setLoadingNumber();
            proxyData.loadinngEnd();
          });
      },
      // 改变空调状态
      changeZongAir(btnType: any, text: any) {
        if (!airData.runStatus) return;
        let equpObj: any = proxyData.formatAirData(btnType, text);
        let data: any = [];
        proxyData.equipList.map((item: any) => {
          let obj: any = {
            id: item.id, //类型：String  必有字段  备注：设备id
            code: item[equpObj.codeKey], //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: equpObj.value, //类型：String  必有字段  备注：值 0
          };
          data.push(obj);
        });
        console.log("设备数据处理---");
        console.log(data);
        if (!proxyData.cotrolLoading) {
          proxyData.loadingStart();
          // 调整设备状态
          proxyData.setSpaceCondtioners(data);
        }
      },
      // 检查设备是否执行空间服务时间
      checkDeviceIsExeSpaceTime(deviceAll: any = []) {
        let seviceEquipmentList: any = proxyData.seviceEquipmentList;
        let flag: any = false;
        for (let i = 0; i < seviceEquipmentList.length; i++) {
          for (let j = 0; j < deviceAll.length; j++) {
            if (
              seviceEquipmentList[i].id == deviceAll[j].id &&
              seviceEquipmentList[i].isExeSpaceTime
            ) {
              flag = true;
              break;
            }
          }
          if (flag) {
            break;
          }
        }
        return flag;
      },
      // 总控制改变空调状态
      airChange() {
        // 先不更新状态等确认框弹出后再更新状
        // 操作空调
        const domAirOpen = !proxyData.airData.isOpen;
        let isExeSpaceTime: Boolean = proxyData.checkDeviceIsExeSpaceTime(
          proxyData.equipList
        );
        if (proxyData.forceOverTimeFlag && domAirOpen && isExeSpaceTime) {
          //需要强制加班
          contx.emit("triggerWork", 2);
          return;
        }

        proxyData.airData.isOpen = !proxyData.airData.isOpen;
        proxyData.loadingAir = true;
        proxyData.loadingTimer = 0;
        clearTimeout(proxyData.airTimer);
        proxyData.setLoadingNumber();
        let data: any = [];
        proxyData.equipList.map((item: any) => {
          let obj: any = {
            id: item.id, //类型：String  必有字段  备注：设备id
            code: item.switchCode, //类型：String  必有字段  备注：编码 EquipSwtichSet
            value: proxyData.airData.isOpen ? "1" : "0", //类型：String  必有字段  备注：值 0
          };
          data.push(obj);
        });
        // 设备状态处理
        proxyData.setSpaceCondtioners(data);
      },
      // 设置子设备的状态
      formateSetChildStatus() {
        proxyData.equipList.map((item: any) => {
          item.isOpen = item.runStatus === 1 ? true : false;
        });
      },
      // 初始化滚动
      async barSwiperInit() {
        if (proxyData.airData.isOpen && !proxyData.showChild) {
          proxyData.endBoxSwiper();
          proxyData.setBarNowPerstion();
        }
      },
      // 设置子设备的可调范围
      setChildSelectList() {
        proxyData.equipList.map((item: any) => {
          let tempArr: any = [];
          for (
            let i = proxyData.airData.minTempSet;
            i <= proxyData.airData.maxTempSet;
            i = i + 0.5
          ) {
            tempArr.push(i);
          }
          item.tempArr = tempArr;
          let index: any = item.tempArr.findIndex((ele: any) => {
            return ele == item.tempSet;
          });
          item.sel = index == -1 ? 0 : index;

          let modelArr: any = ["制冷", "制热", "通风"];
          item.modelArr = modelArr;
          if (item.workMode > 3) {
            item.workMode = 1;
          }
          let mIndex: any = item.workMode ? item.workMode - 1 : 2;
          item.mIndex = mIndex;

          let gearArr: any = [0, 1, 2, 3, "AUTO"];
          item.gearArr = gearArr;
          let gIndex: any = item.gearArr.findIndex((ele: any) => {
            if (item.isAutoGear == 1) {
              return ele == "AUTO";
            } else {
              return ele == item.gear;
            }
          });
          item.gIndex = gIndex == -1 ? 0 : gIndex;
        });
        proxyData.setValueHeight();
      },
      setValueHeight() {
        if (!proxyData.valueHeight) {
          proxyData.valueDom = proxyData.valueDom
            ? proxyData.valueDom
            : document.querySelectorAll(".value")[0];
          proxyData.valueHeight = proxyData.valueDom
            ? proxyData.valueDom.offsetHeight
            : 0;
        }
        console.log("proxyData.valueHeight==", proxyData.valueHeight);
      },
      // 改变子设备选中的位置
      updateChildPerstion() {
        proxyData.equipList.map((item: any) => {
          let index: any = item.tempArr.findIndex((ele: any) => {
            return ele == item.tempSet;
          });
          item.sel = index == -1 ? 0 : index;

          let mIndex: any = item.workMode ? item.workMode - 1 : 2;
          item.mIndex = mIndex;

          let gIndex: any = item.gearArr.findIndex((ele: any) => {
            if (item.isAutoGear == 1) {
              return ele == "AUTO";
            } else {
              return ele == item.gear;
            }
          });
          item.gIndex = gIndex == -1 ? 0 : gIndex;
        });
      },
      // 空调信息airTemp
      getAirInfo() {
        const paramObj = {
          // // projectId: props.projectId, //'Pj1101080255'
          // projectId: "Pj1101080255",
          // spaceId: "Sp110108025564f438d7fef64eea8202a6462f1bbcce",
          spaceId: proxyData.spaceId,
          // spaceId: props.spaceId,//'Sp110108025564f438d7fef64eea8202a6462f1bbcce' 空间id
        };
        //wx.showLoading();
        let str: any = setQueryConfig(paramObj);
        querySpaceConditioners(str)
          .then((res) => {
            let data: any = res.data || {};
            proxyData.firstLoadingAir = false;
            proxyData.loadingAir = false;
            proxyData.airTemp = data.tempSet;
            proxyData.airData.maxTempSet = data.maxTempSet;
            proxyData.airData.minTempSet = data.minTempSet;
            proxyData.airData.isOpen = data.runStatus ? true : false;
            proxyData.airData.runStatus = data.runStatus;
            proxyData.airData.isAutoGear = data.isAutoGear;
            proxyData.airData.gear = data.gear;
            proxyData.airData.workMode = data.workMode;
            proxyData.equipList = data.equipList;
            // 设置子设备的状态
            proxyData.setChildSelectList();
            proxyData.formateSetChildStatus();

            // 设置当前温度的位置
            if (proxyData.airData.isOpen) {
              proxyData.airData.airImg = parseImgUrl(
                "page-officehome",
                "openair.png"
              );
            } else {
              proxyData.airData.airImg = parseImgUrl(
                "page-officehome",
                "air_close.png"
              );
            }

            nextTick(() => {
              proxyData.barSwiperInit();
            });
            proxyData.getAirInfoToTimer();
          })
          .catch(() => {});
      },
    });
    watch(props, (newProps: any) => {
      if (newProps.spaceId) {
        // proxyData.swiperIinit = false;
        proxyData.spaceId = newProps.spaceId;
        // proxyData.getAirInfoToTimer(0);
        proxyData.temperature = props.temperature;
        proxyData.userIsControl = newProps.userIsControl;
        proxyData.forceOverTimeFlag = newProps.forceOverTimeFlag;
        proxyData.seviceEquipmentList = props.seviceEquipmentList;
      }
    });
    onBeforeUnmount(() => {
      if (proxyData.airTimer) {
        clearTimeout(proxyData.airTimer);
        proxyData.airTimer = null;
      }
    });
    onMounted(() => {
      proxyData.spaceId = props.spaceId;
      proxyData.getAirInfoToTimer(0);
      // 获取空调信息
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.air {
  position: relative;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  margin: 15px 0px;
  .loading-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(#000000, 0.3);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
      0px 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    z-index: 999;
    // line-height: 50px;
  }
  .active-color {
    background: $elActiveColor !important;
    span {
      color: #fff !important;
    }
  }
}

.air-child {
  width: 100%;
  // padding: 20px;
  padding-left: 10px;
  padding-right: 10px;
  // padding-top: 10px;
  .child-control-box {
    display: inline-block;
    width: 50%;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
    // margin-top: 10px;
    // padding-right: 10px;
    border-top: 1px solid rgba(196, 196, 196, 0.4);
    &:nth-child(2n + 1) {
      border-right: 1px solid rgba(196, 196, 196, 0.4);
    }
    .open-title {
      width: 100%;
      font-size: 14px;
      height: 25px;
      line-height: 25px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      span {
        font-size: 16px;
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .child-switch {
        // height: 20px;
        // width: 50px;
      }
    }
    .adjust-box {
      box-sizing: border-box;
      // padding-right: 10px;
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 19px;
      .adjust-item {
        // flex: 1;
        // width: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        &:nth-child(2) {
          // width: 60px;
          flex: 1;
        }
        .adjust-icon {
          display: inline-block;
          flex: 1;
        }
        .adjust-text {
          // flex: 1;
          // padding: 20px 0;
          height: 50px;
          overflow: hidden;
          color: #1f2429;
          .value-wrap {
            transition: transform 1s;
            .value {
              width: 100%;
              height: 50px;
              display: flex;
              align-items: center;
              font-weight: 400;
              justify-content: center;
              text-align: center;
              font-size: 14px;
            }
          }
        }
        .adjust-title {
          padding-top: 10px;
          font-size: 14px;
          font-weight: 400;
        }
        .disable-color {
          color: $elDisabledColor;
        }
      }
    }
  }
}

.air-top {
  padding-left: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  .air-desc {
    position: relative;
    // flex: 1 157px;
    padding-top: 10px;
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 19px;
    color: #4d5262;
    flex: none;
    flex-grow: 0;
    margin: 5px 0px;
    min-height: 100px;
    .air-title {
      font-family: PingFang SC;
      padding-left: 5px;
      font-size: 16px;
      line-height: 20px;
      color: #4d5262;
      padding-bottom: 10px;
      i {
        display: inline-block;
        font-size: 12px;
        transform: scale(0.9);
        font-style: normal;
        padding-left: 5px;
        color: #c4c4c4;
      }
    }
    .air-temperature {
      display: inline-block;
      font-family: "Montserrat";
      font-style: normal;
      font-weight: normal;
      font-size: 32px;
      line-height: 32px;
      flex: none;
      order: 0;
      flex-grow: 0;
      margin: 0px 4px;

      sup {
        font-family: Mulish;
        font-style: normal;
        font-weight: 800;
        font-size: 12px;
        line-height: 15px;
      }
    }
    .show-all {
      position: absolute;
      width: 110px;
      bottom: -8px;
      font-family: PingFang SC;
      font-size: 14px;
      line-height: 16px;
      color: #c4c4c4;
      margin: 0px 5px;
      span {
        font-size: 12px;
      }
      .light-icon {
        font-size: 12px;
        padding-right: 10px;
      }
    }
  }
  .air-right {
    position: relative;
    width: 157px;
    text-align: center;

    img {
      width: 147px;
      height: 110px;
    }

    .switch-btn {
      position: absolute;
      z-index: 111;
      bottom: -5px;
      right: 25px;
    }
  }
}

.air-control {
  padding: 10px;
  border-top: 1px solid rgba(196, 196, 196, 0.4);
  .control-box {
    display: flex;
    justify-content: space-between;
  }
  .volume-box {
    padding: 10px;
    color: #c4c4c4;
    font-size: 12px;
    .text {
      padding-top: 5px;
      font-style: normal;
      font-weight: 600;
      font-size: 11px;
    }
    .number {
      span {
        display: inline-block;
        vertical-align: middle;
        color: #c4c4c4;
        padding-right: 5px;
      }
      .number-active {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 500;
        font-size: 22px;
        line-height: 24px;
        color: #4d5262 !important;
      }
    }
    .model {
      font-size: 14px;
      color: #1f2429;
    }
  }
  .volume-icon {
    .icon-item {
      position: relative;
      display: inline-block;
      width: 42px;
      height: 42px;
      background: rgba(196, 196, 196, 0.2);
      border-radius: 50%;
      img {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      &:nth-child(2) {
        margin-left: 10px;
        margin-right: 10px;
      }
      span {
        font-size: 12px;
        color: #000000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.8);
      }
    }
  }
  .temp-text {
    height: 20px;
    line-height: 20px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    color: #c4c4c4;
    padding: 0 5px;
  }
  .temp-slider {
    position: relative;
    display: flex;
    height: 20px;
    flex: 1;
    border-radius: 5px;
    .item {
      height: 20px;
      flex: 1;
      font-size: 0;
      &:nth-child(1) {
        background: #5e8bcf;
        border-radius: 11px 0 0 11px;
      }
      &:nth-child(2) {
        background: #9fb7cd;
      }
      &:nth-child(3) {
        background: #f3f3f3;
      }
      &:nth-child(4) {
        background: #ff9882;
      }
      &:nth-child(5) {
        background: #e5574f;
        border-radius: 0 11px 11px 0;
      }
    }
    .slider-bar {
      position: absolute;
      width: 25px;
      left: 0;
      bottom: -2px;
      z-index: 333;
      .bar-temp {
        padding-bottom: 10px;
        font-size: 12px;
        color: #1f2429;
      }
      .bar-circle {
        width: 25px;
        height: 25px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
          0px 4px 10px rgba(0, 0, 0, 0.07);
        border-radius: 21px;
        z-index: 444;
      }
    }
  }
  .control-text {
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    line-height: 15px;
    color: #c4c4c4;
    padding: 10px 0 0 10px;
  }
}

.air-control-padding {
  padding-top: 35px;
  padding-bottom: 15px;
}
</style>
<style lang="scss">
.air {
  .loading-box {
    .van-loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .van-loading__spinner {
    color: $elActiveColor !important;
  }

  .van-switch__loading {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 1;
  }

  .van-switch--disabled {
    opacity: 0.5;
  }
  .child-control-box {
    .child-switch {
      // position: relative;
      .van-switch__node {
        // margin-top: -6px;
        // width: 20px !important;
        // height: 20px !important;
      }
    }
  }
}
</style>