sagacloud-sagacare-ipad/src/views/envmonitor/components/Curtain/index.vue

<template>
  <div class="curtain" v-if="curtainData && curtainData.length">
    <div class="curtain-top">
      <div class="curtain-desc">
        <p class="curtain-title">
          {{
            curtainData.length && curtainData.length == 1
              ? curtainData[0].name
              : "窗帘"
          }}
        </p>
      </div>
      <div class="curtain-right">
        <img
          v-if="
            curtainData[0].equipmentType !== 4 &&
            curtainData[0].equipmentType !== 5
          "
          :src="parseImgUrl('page-officehome', 'curtain_new.svg')"
          alt=""
        />
        <img
          v-else
          :src="parseImgUrl('page-officehome', 'curtain_roll.svg')"
          alt=""
        />
      </div>
    </div>
    <div
      class="curtain-box"
      v-if="curtainData.length && curtainData.length > 1"
    >
      <div class="top-nav">
        <span
          :class="type == 'all' ? 'nav-active' : ''"
          @click="checkNav('all')"
        >
          总控制
        </span>
        <span
          :class="type == 'child' ? 'nav-active' : ''"
          @click="checkNav('child')"
        >
          子设备
        </span>
      </div>
    </div>
    <template v-if="type == 'all'">
      <div
        class="line"
        v-if="curtainData.length && curtainData.length > 1"
      ></div>
      <div class="top-control">
        <div
          class="control-item"
          v-if="curtainData[0].isOpenSet"
          @click="openCurtainOpening(curtainData)"
        >
          <img
            class="curtain-opening-icon"
            :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
            alt=""
          />
        </div>
        <!--左关-下关-->
        <div
          class="control-item"
          :class="activeIndex == 1 ? 'control-item-active' : ''"
          @click="openCurtainMain(1)"
        >
          <template v-if="activeIndex !== 1">
            <img
              v-if="
                curtainData[0].equipmentType !== 4 &&
                curtainData[0].equipmentType !== 5
              "
              :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
              alt=""
            />
            <img
              v-else
              :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
              alt=""
            />
          </template>
          <span v-else>{{ count }}</span>
        </div>

        <!--暂停-->
        <div
          class="control-item"
          @click="openCurtainMain(3)"
          v-if="curtainData[0].stopSet"
        >
          <img
            :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
            alt=""
          />
        </div>
        <!--右开-->
        <div
          class="control-item"
          @click="openCurtainMain(2)"
          :class="activeIndex == 2 ? 'control-item-active' : ''"
        >
          <template v-if="activeIndex !== 2">
            <img
              v-if="
                curtainData[0].equipmentType !== 4 &&
                curtainData[0].equipmentType !== 5
              "
              :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
              alt=""
            />
            <img
              v-else
              :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
              alt=""
            />
          </template>
          <span v-else>{{ count }}</span>
        </div>
      </div>
    </template>

    <div class="curtain-child" v-if="type == 'child'">
      <div class="child-item" :key="item.id" v-for="item in curtainData">
        <div class="curtain-name">
          <div class="name">{{ item.name }}</div>
          <span v-if="item.isOpenSet">开度{{ item.openValue }}%</span>
        </div>
        <div class="curtain-control top-control">
          <div
            class="control-item"
            @click="openCurtainOpening([item])"
            v-if="item.isOpenSet"
          >
            <img
              :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
              alt=""
            />
          </div>
          <!--左边-->
          <div
            class="control-item"
            @click="openCurtainClid(item, 1)"
            :class="item.activeIndex == 1 ? 'control-item-active' : ''"
          >
            <template v-if="item.activeIndex != 1">
              <img
                v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
                :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
                alt=""
              />
              <img
                v-else
                :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
                alt=""
              />
            </template>
            <span v-else>{{ item.count }}</span>
          </div>

          <!--暂停-->
          <div
            class="control-item"
            @click="openCurtainClid(item, 3)"
            :class="item.activeIndex == 3 ? 'control-item-active' : ''"
            v-if="item.stopSet"
          >
            <img
              :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
              alt=""
            />
          </div>

          <!-- {{ item }} -->
          <!--右边-->
          <div
            class="control-item"
            @click="openCurtainClid(item, 2)"
            :class="item.activeIndex == 2 ? 'control-item-active' : ''"
          >
            <template v-if="item.activeIndex != 2">
              <img
                v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
                :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
                alt=""
              />
              <img
                v-else
                :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
                alt=""
              />
            </template>
            <span v-else>{{ item.count }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onBeforeUnmount,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import {
  getObjectDataEqpGroupHttp,
  setEquipeHttp,
  setSpaceCondtioners,
} from "@/apis/envmonitor";
import { formatDate, parseImgUrl } from "@/utils";
import { Toast } from "vant";

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => "",
    },
    spaceId: {
      type: String,
      default: () => "",
    },
    userIsControl: {
      type: Boolean,
      default: () => false,
    },
  },
  setup(props, contx) {
    let curtainData: any = [];
    let timer: any = null;
    let projectId: any = props.projectId;
    let type: any = "all";
    let interval: any = {};
    let oldTime: any = null;
    const proxyData = reactive({
      curtainData: curtainData,
      userIsControl: props.userIsControl,
      lightIcon: "arrow-down",
      projectId: projectId,
      type: type,
      countText: "", // 到记时文案
      count: 2, // 到记时
      curtainOpen: false,
      curtainClose: false,
      parseImgUrl: parseImgUrl,
      // 开度弹窗
      activeIndex: 0,
      // 打开开度弹窗
      openCurtainOpening(selectData: any) {
        contx.emit("showCurtainOpening", selectData);
      },
      // 导航切换
      checkNav(type: any) {
        proxyData.type = type;
        console.log("proxyData.type==", proxyData.type);
      },
      // 获取窗帘列表
      getEqpGroup() {
        const params: any = {
          criteria: {
            projectId: props.projectId,
            spaceId: props.spaceId, // 空间ID
            type: 0, // 0.窗帘
          },
          orders: [
            {
              column: "sortNum",
              asc: true,
            },
          ],
        };
        getObjectDataEqpGroupHttp(params).then((res) => {
          const resData: any = res;
          proxyData.curtainData = resData.count ? resData.content : [];
          // 初始化状态数据
          proxyData.curtainData.map((item: any) => {
            item.count = 0;
            item.activeIndex = 0;
          });
        });
      },
      // 定时器定时计算
      interval: interval,
      countInterval() {
        proxyData.interval = setInterval(() => {
          proxyData.count--;
          if (proxyData.count == 0) {
            proxyData.count = 2;
            proxyData.activeIndex = 0;
            clearInterval(proxyData.interval);
          }
        }, 1000);
      },
      countChildInterval(item: any) {
        // debugger
        proxyData.interval = setInterval(() => {
          item.count--;
          if (item.count == 0) {
            item.count = 2;
            item.activeIndex = 0;
            clearInterval(proxyData.interval);
          }
          // console.log(item.count)
        }, 1000);
      },
      // 窗帘总开关
      openCurtainMain(type: any) {
        // type=1(关) type=2(开) type=3(暂停)
        if (proxyData.activeIndex == type && proxyData.count !== 0) {
          return;
        }
        proxyData.activeIndex = type;
        proxyData.count = 2;
        proxyData.countInterval();
        proxyData.formateCurtainData(type);
      },
      formateValue(type: any) {
        let value: any = 0;
        if (type == 1) {
          value = 0;
        } else if (type == 2) {
          value = 1;
        } else {
          value = 2;
        }
        return value;
      },
      // 处理窗帘数据
      formateCurtainData(type: any) {
        let data: any = [];
        let value: any = proxyData.formateValue(type);
        proxyData.curtainData.map((item: any) => {
          let obj: any = {
            id: item.equipId,
            code: "EquipSwitchSet",
            value: value,
          };
          data.push(obj);
        });
        proxyData.changeCurtainStatus(data);
      },
      // 修改窗帘的状态
      changeCurtainStatus(data: any) {
        console.log("窗帘==", data);
        setSpaceCondtioners(data).then((res) => {
          proxyData.oldTime = formatDate("YYYY.MM.DD HH:mm:ss");
          if (!proxyData.timer) {
            proxyData.updateGroupPeing();
          }
        });
      },
      // 单个窗帘操作
      openCurtainClid(item: any, type: any) {
        if (item.activeIndex == type && item.count !== 0) {
          return;
        }
        item.activeIndex = type;
        let data: any = [];
        let obj: any = {
          id: item.equipId,
          // id: "Eq110108025995ec5bdc23fc47a0a9d8debb150d18eb",
          code: "EquipSwitchSet",
          value: proxyData.formateValue(type),
        };
        data.push(obj);
        item.count = 2;
        proxyData.countChildInterval(item);
        proxyData.changeCurtainStatus(data);
      },
      oldTime: oldTime,
      timer: timer,
      clearTimer() {
        clearInterval(proxyData.timer);
        proxyData.timer = null;
      },
      // 更新窗帘的开度
      updateGroupPeing() {
        // debugger
        proxyData.timer = setInterval(() => {
          let nowTime: any = formatDate("YYYY.MM.DD HH:mm:ss");
          if (proxyData.oldTime) {
            let secondTimeDiff: any = proxyData.getTimeDifference(
              proxyData.oldTime,
              nowTime
            );
            // console.log("secondTimeDiff==",secondTimeDiff)
            if (secondTimeDiff > 60) {
              proxyData.getEqpGroup();
              proxyData.clearTimer();
            }
          } else {
            proxyData.oldTime = formatDate("YYYY.MM.DD HH:mm:ss");
          }
        }, 1000);
      },
      //计算时间差-分钟
      getTimeDifference(Stime: any, Ttime: any) {
        // debugger
        let startDate: any = new Date(Stime);
        let stopDate: any = new Date(Ttime);
        let startTime: any = startDate.getTime();
        let stopTime: any = stopDate.getTime();
        let cTime: any = Number(stopTime) - Number(startTime);
        let secondTime: any = cTime / 1000;
        return parseInt(secondTime);
      },
    });

    watch(props, (newProps: any) => {
      if (newProps.spaceId) {
        // 当前空间的控制权限
        proxyData.getEqpGroup();
        proxyData.userIsControl = newProps.userIsControl;
      }
    });
    onBeforeUnmount(() => {
      proxyData.clearTimer();
      clearInterval(proxyData.interval);
    });
    onMounted(() => {
      // 获取窗帘信息
      proxyData.getEqpGroup();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.curtain {
  width: 100%;
  padding-top: 17px;
  padding-bottom: 16px;
  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;
}

.curtain-top {
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  .curtain-desc {
    .curtain-title {
      padding-top: 7px;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      line-height: 22px;

      /* TUI/Subtitle */

      color: #4d5262;
    }
  }

  .curtain-right {
    position: relative;
    width: 100px;
    text-align: center;
    margin-right: 33px;

    img {
      width: 100px;
      height: 62px;
    }
  }
}

.curtain-box {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  padding-bottom: 25px;
  padding-top: 10px;
  .top-nav {
    height: 28px;
    line-height: 28px;
    border-radius: 21px;
    background: #f1f4f6;
    span {
      box-sizing: border-box;
      display: inline-block;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 28px;
      padding: 0 8px;
      color: #424c59;
    }
    .nav-active {
      background: #fff;
      border: 1px solid #e1e5eb;
      border-radius: 21px;
    }
  }
}

.line {
  border-top: 1px solid #e8ecf0;
}

.top-control {
  text-align: right;
  padding: 16px 20px;
  padding-bottom: 0;
  .control-item {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    width: 40px;
    height: 40px;
    background: #f1f4f6;
    border-radius: 50%;
    &:active {
      background: rgba(206, 159, 39, 0.4);
    }
    // &:hover {
    //   background: rgba(206, 159, 39, 0.4);
    // }
    img {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .curtain-opening-icon {
      width: 20px;
      height: 20px;
    }
  }

  .control-item-active {
    background: rgba(206, 159, 39, 0.4);
    span {
      position: absolute;
      font-family: "Persagy";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.curtain-child {
  .child-item {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid #e8ecf0;
    .curtain-name {
      display: inline-block;
      vertical-align: middle;
      .name {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        padding-top: 5px;
        color: #4d5262;
      }
      span {
        display: block;
        padding-top: 4px;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #c4c4c4;
      }
    }
  }
  .top-control {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    // padding-top: 5px;
  }
}
</style>