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

<template>
  <div class="work-content">
    <div class="work-space">
      <div class="space-title">{{ spaceInfo.spaceName }} 申请延时</div>
      <!-- <div class="tip">延时期间,空间相关设备会开启</div> -->
    </div>
    <!--加班的按钮-->
    <div class="add-time" id="addTimeId">
      <div class="date_box" v-if="dateArr && dateArr.length">
        <div
          class="date-item"
          :class="item.isActive ? 'date-item-active' : ''"
          @click.stop="checkDate(item, index)"
          :key="'date' + index"
          v-for="(item, index) in dateArr"
        >
          <span>{{ item.week }}</span>
          <span>{{ item.day }}</span>
        </div>
      </div>
      <div class="sliders-list" id="sliderListId">
        <template v-for="(item, index) in nowTimerArr" :key="'slider' + index">
          <div class="sliders-wrapper" id="slidersWrapperId">
            <div class="sliders">
              <div class="label" v-show="index === 0 || index % 2 === 0">
                {{ item.timer }}
              </div>
              <div
                class="slider-box"
                @click="checkSlider(item, index)"
                :data-index="index"
              ></div>
            </div>
          </div>
        </template>

        <!--审批状态-->
        <template v-if="approvalData && approvalData.length">
          <div
            class="approval-status"
            style="width: 60px"
            :key="'approval' + index"
            @click="checkApprovalStatus(item, $event)"
            :style="{
              left: item.left + 'px',
              background: item.bg,
            }"
            v-for="(item, index) in approvalData"
          >
            {{ item.text }}
          </div>
        </template>

        <div class="slider-btn" id="sliderBtnId" @click="triggerDelTime">
          <div class="start" id="startId"></div>
          <div class="end-box" id="endBoxId">
            <div class="end" id="endId"></div>
            <div class="end-radio" id="endRadioId"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="add-time-btn">
      <div class="cancel-btn" @click="closeWorkTimer">取消</div>
      <div
        class="comfirm-btn"
        :class="formBtn ? 'comfirm-btn-diabled' : ''"
        @click="addWorkTimer"
      >
        提交申请
      </div>
    </div>
    <!--预约的设备 start-->
    <div class="device-title" v-if="isLight || isAir">
      <span class="line"></span>
      <span class="text">预约开启设备</span>
      <span class="line"></span>
    </div>
    <div class="work-device">
      <template v-if="isAir">
        <div class="row-title">空调</div>
        <div class="device-box">
          <template
            v-for="(item, index) in nowData.equipmentList"
            :key="'eq' + index"
          >
            <div
              class="device-row"
              :style="{ width: airNum == 1 ? '98%' : '48%' }"
              v-if="item.equipmentCategory !== 'SELTLT'"
              @click="checkEquipment(item)"
            >
              <div class="row-item">
                <span>{{ item.localName }}</span>
                <img
                  :src="
                    item.isCheck
                      ? parseImgUrl('ipdImages', 'check-open.svg')
                      : parseImgUrl('ipdImages', 'check-close.svg')
                  "
                  alt=""
                />
              </div>
            </div>
          </template>
        </div>
      </template>

      <template v-if="isLight">
        <div class="row-title">照明</div>
        <div class="device-box">
          <template
            v-for="(item, index) in nowData.equipmentList"
            :key="'eq' + index"
          >
            <div
              class="device-row"
              :style="{ width: lightNum == 1 ? '98%' : '48%' }"
              v-if="item.equipmentCategory === 'SELTLT'"
              @click="checkEquipment(item)"
            >
              <div class="row-item">
                <span>{{ item.localName }}</span>
                <img
                  :src="
                    item.isCheck
                      ? parseImgUrl('ipdImages', 'check-open.svg')
                      : parseImgUrl('ipdImages', 'check-close.svg')
                  "
                  alt=""
                />
              </div>
            </div>
          </template>
        </div>
      </template>

      <div class="device-tip" v-if="isAir">
        <span>计费方式:</span>
        <p>
          <span> * </span>
          空调延时采用后付费方式，系统将根据您申请的时间产生延时费用。预约时间下您可自由开启空间下的设备。
        </p>
        <p>
          收费标准按开机设备对应空间的面积计费，空调加时费用按0.4元/m²·h进行计费，照明设备延时使用不计费。
        </p>
        <p>
          如您提前结束工作，请点击“我要离开”按钮，系统会自动调整设备关闭时间，感谢与您一同共创可持续的办公环境。
        </p>
      </div>
    </div>

    <van-loading class="temp-loading" v-if="showLoading" />
  </div>
</template>

<script lang="ts">
import { Dialog, Slider, Loading } from "vant";
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onBeforeMount,
  onMounted,
  onUpdated,
  nextTick,
  watch,
  getCurrentInstance,
} from "vue";
import { swiper } from "@/utils/swiper";
import {
  formatDate,
  formatDateStr,
  getDate,
  getNowTime,
  getRelNowTime,
  getTimers,
  getUserInfo,
  getWeekDate,
  parseImgUrl,
} from "@/utils";
import { myTime } from "@/model/workTimeData";
import { propsToAttrMap } from "@vue/shared";
import { isTemplateElement } from "@babel/types";
import {
  saveBatchCustomScene,
  setallLampHttp,
  setSpaceCondtioners,
} from "@/apis/envmonitor";
import { number } from "echarts";

export default defineComponent({
  components: {
    VanSlider: Slider,
  },
  props: {
    workkArr: {
      type: Array,
      default: () => [],
    },
    projectId: {
      type: String,
      default: () => "",
    },
    spaceInfo: {
      type: Object,
      default: () => {},
    },
    enterType: {
      type: Number,
      default: () => 1,
    },
    deviceItem: {
      type: Object,
      default: () => null,
    },
    seviceEquipmentList: {
      // 是否走服务定制的设备
      type: Array,
      default: () => [],
    },
  },
  setup(props, context) {
    const proxyGlobal: any = getCurrentInstance();
    const screenInfo: any = {
      screenWidth: 0,
      screenHeight: 0,
    };
    let dateArr: any = [];
    let myTimeArr: any = [];
    let timerArr: any = getTimers();
    let nowTimerArr: any = [];
    let nowData: any = {};
    let approvalData: any = [];
    let redUrl: any = `${parseImgUrl("ipdImages", "time-check.svg")}`;
    let bgRed: any = `linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)), url(${redUrl})`;
    const userInfo: any = getUserInfo();
    const proxyData = reactive({
      userInfo: userInfo,
      seviceEquipmentList: props.seviceEquipmentList,
      parseImgUrl: parseImgUrl,
      isEvent: false,
      screenInfo: screenInfo,
      projectId: props.projectId,
      workkArr: props.workkArr,
      bgRed: bgRed,
      startIndex: 0,
      endIndex: 0,
      nowData: nowData,
      nowTimerArr: nowTimerArr,
      timerArr: timerArr,
      startLen: 0,
      formBtn: false,
      showLoading: false,
      deviceItem: props.deviceItem,
      enterType: props.enterType, // 1:all 2:空调 3:灯
      setScreennWidth() {
        let addTimeEl: any = document.querySelector("#addTimeId");
        proxyData.screenInfo.screenWidth = addTimeEl.offsetWidth;
      },
      // 获取当前位置
      getNowIndex() {
        // let nowIndex: any = 0;
        // if (proxyData.nowData.week === "今天") {
        //   nowIndex = getNowTime()[1];
        // }
        let nowIndex: any = getNowTime()[1];
        return nowIndex;
      },
      // 获取每天真实的下标
      getTomorrowIndex() {
        let nowIndex: any = 0;
        if (proxyData.nowData.week === "今天") {
          nowIndex = getNowTime()[1];
        }
        return nowIndex;
      },
      // 获取时间的下标
      getTimerIndex(timerArr: any, val: any) {
        let cusIndex: any = 0;
        timerArr.map((time: any, index: any) => {
          if (time.formatTimer == val) {
            cusIndex = index;
          }
        });
        return cusIndex;
      },
      // 获取当前位置的坐标(多端服务定制的判断规则-待开发)
      getNowPerstion(timerArr: any) {
        let nowIndex: any = proxyData.getNowIndex();
        let obj: any = {
          nowIndex: nowIndex,
          len: 4,
        };
        let formatTimer: any = timerArr[nowIndex].formatTimer;
        let cusStartTime: any = proxyData.parseCusStartTime(
          proxyData.nowData.cusStartTime
        );
        let cusEndTime: any = proxyData.parseCusEndTime(
          proxyData.nowData.cusEndTime
        );

        let spaceCustomContentList: any =
          proxyData.nowData.spaceCustomContentList || [];
        // debugger
        if (formatTimer >= cusStartTime && formatTimer <= cusEndTime) {
          // debugger
          //在服务定制时间之间
          timerArr.map((item: any, index: any) => {
            if (item.formatTimer === cusEndTime) {
              obj.nowIndex = index;
            }
          });
          let endFormatTimer: any = timerArr[nowIndex + obj.len].formatTimer;
          spaceCustomContentList.map((item: any) => {
            let startTime: any = proxyData.parseCusStartTime(item.startTime);
            if (startTime > cusEndTime && endFormatTimer > startTime) {
              let cusIndex: any = proxyData.getTimerIndex(timerArr, startTime);
              obj.len =
                cusIndex - obj.nowIndex > 0 ? cusIndex - obj.nowIndex : 0;
            }
          });
        } else if (formatTimer < cusStartTime) {
          console.log("在当前的服务定制之前---4");
          timerArr.map((item: any, index: any) => {
            if (item.formatTimer === cusStartTime) {
              obj.len = index - nowIndex;
              if (obj.len > 4) {
                obj.len = 4;
              }
            }
          });
        } else if (formatTimer >= cusEndTime) {
          // 在服务定制之后
          // 在服务定制之后
          console.log("在当前的服务定制之后---4");
          let endFormatTimer: any = timerArr[nowIndex + obj.len].formatTimer;
          spaceCustomContentList.map((item: any) => {
            let startTime: any = proxyData.parseCusStartTime(item.startTime);
            if (startTime > cusEndTime && endFormatTimer > startTime) {
              let cusIndex: any = proxyData.getTimerIndex(timerArr, startTime);
              obj.len =
                cusIndex - obj.nowIndex > 0 ? cusIndex - obj.nowIndex : 0;
            }
          });
        }
        return obj;
      },
      // 设置当前可选择的时间可选时间
      setNowBarPerstion(timerArr: any) {
        let sliderList: any = document.querySelector("#sliderListId");
        let sliderWidth: any = proxyData.getSliderWapperWidth();
        sliderList.style.width = sliderWidth * timerArr.length + "px";
        let index: any = proxyData.getNowPerstion(timerArr).nowIndex;
        let len: any = proxyData.getNowPerstion(timerArr).len;
        let sliderLeft: any = sliderWidth * index;
        if (
          sliderLeft >
          proxyData.screenInfo.screenWidth +
            proxyData.screenInfo.screenWidth / 2
        ) {
          sliderLeft = sliderLeft - sliderWidth;
        }
        sliderList.style.left = -sliderLeft + "px";
        proxyData.setOptionnalPerstion(index, len);
      },
      sliderSwiper() {
        // 获取当前时间的下标
        let sliderList: any = document.querySelector("#sliderListId");
        let slidersWrapper: any = document.querySelector("#slidersWrapperId");
        let leftInit: any = 0;
        let width: any =
          sliderList.offsetWidth - proxyData.screenInfo.screenWidth;
        sliderList.addEventListener("touchstart", function (e: any) {
          leftInit = isNaN(parseInt(sliderList.style.left))
            ? 0
            : parseInt(sliderList.style.left);
          leftInit = Math.abs(leftInit);
        });
        swiper(sliderList, {
          swipeLeft: function (e: any) {
            if (!proxyData.checkMoveTarget(e)) {
              let left: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              left = Math.abs(left);
              if (left >= width) {
                sliderList.style.left = -width + "px";
              } else {
                sliderList.style.left =
                  -leftInit - Math.abs(e.mation.moveX - e.mation.startX) + "px";
              }
            }
          },
          swipeRight: function (e: any) {
            if (!proxyData.checkMoveTarget(e)) {
              let left: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              if (left >= 0) {
                sliderList.style.left = 0 + "px";
              } else {
                sliderList.style.left =
                  -leftInit + Math.abs(e.mation.moveX - e.mation.startX) + "px";
              }
            }
          },
        });
      },
      // 判断滑动的是否是滑快
      checkMoveTarget(el: any) {
        let endBox: any = document.querySelector("#endBoxId");
        let endEnd: any = document.querySelector("#endId");
        let endRadio: any = document.querySelector("#endRadioId");
        if (
          el.target === endBox ||
          el.target === endEnd ||
          el.target === endRadio
        ) {
          return true;
        }
        return false;
      },
      // 判断滑动的位置是否包含服务定制的位置(如果当前滑动的位置在服务定制处不让滑动)
      checkPersionService() {
        let flag: any = false;
        for (let i = proxyData.startIndex; i < proxyData.endIndex; i++) {
          if (proxyData.nowTimerArr[i].isServiceTime) {
            flag = true;
            break;
          }
        }
        proxyData.formBtn = flag;
      },
      cancelRemoveListener() {
        let endBox: any = document.querySelector("#endBoxId");
        endBox.removeEventListener("touchstart", function (e: any) {}, false);
        endBox.removeEventListener("touchend", function (e: any) {}, false);
        endBox.removeEventListener("touchmove", function (e: any) {}, false);
        let sliderList: any = document.querySelector("#sliderListId");
        sliderList.removeEventListener(
          "touchstart",
          function (e: any) {},
          false
        );
        sliderList.removeEventListener("touchend", function (e: any) {}, false);
        sliderList.removeEventListener(
          "touchmove",
          function (e: any) {},
          false
        );
      },
      /**
       * 日历滑动
       */
      endBoxSwiper() {
        let sliderList: any = document.querySelector("#sliderListId");
        let endBox: any = document.querySelector("#endBoxId");
        let sliderBtnEl: any = document.querySelector("#sliderBtnId");
        let startEl: any = document.querySelector("#startId");
        let sliderBoxEl: any = document.querySelectorAll(".slider-box")[0];
        let sliderInitLeft: any = 0;
        let sliderBtnLeft: any = 0;
        let screenLeft: any = 0;
        let startElLeft: any = 0;
        let sliderBtnWidth: any = 0;
        let sliderBoxWidth: any = 0;
        let direction: any = 0; // 0是像左  1表示向右边移动
        let isMove: any = false;
        endBox.addEventListener("touchstart", function (e: any) {
          isMove = false;
          startElLeft = isNaN(parseInt(startEl.style.left))
            ? 0
            : parseInt(startEl.style.left);
          // sliderInitLeft = isNaN(parseInt(sliderList.style.left))
          //   ? 0
          //   : parseInt(sliderList.style.left);
          sliderBtnLeft = isNaN(parseInt(sliderBtnEl.style.left))
            ? 0
            : parseInt(sliderBtnEl.style.left);
          // sliderInitLeft = Math.abs(sliderInitLeft);
          sliderBtnWidth = sliderBtnEl.offsetWidth;
          sliderBoxWidth = sliderBoxEl.offsetWidth;
        });
        endBox.addEventListener("touchend", function (e: any) {
          // console.log(e);
          if (isMove) {
            sliderBtnWidth = sliderBtnEl.offsetWidth;
            let index: any = Math.ceil(
              sliderBtnWidth / sliderBoxEl.offsetWidth
            );
            if (proxyData.startIndex + index >= proxyData.timerArr.length - 1) {
              index = proxyData.timerArr.length - 1 - proxyData.startIndex;
            }
            sliderBtnEl.style.width = sliderBoxEl.offsetWidth * index + "px";
            sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
            // debugger;
            proxyData.setOptionnalPerstion(proxyData.startIndex, index);
            isMove = false;
            // 判断按钮是否可以点击(如果选择的时候包含服务定制时间,则不可点击)
            proxyData.checkPersionService();
          }
        });
        swiper(endBox, {
          swipeLeft: function (e: any) {
            if (proxyData.checkMoveTarget(e)) {
              direction = 0;
              isMove = true;
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let sliderLeft: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              sliderLeft = Math.abs(sliderLeft);

              let width: any = sliderBoxEl.offsetWidth;
              if (sliderBtnWidth - moveRealX <= width) {
                sliderBtnEl.style.width = width + "px";
              } else {
                sliderBtnEl.style.width = sliderBtnWidth - moveRealX + "px";
                proxyData.cancelSliderBoxColor();
              }
              let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
              sliderBtnEl.style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))`;
              if (
                sliderBtnLeft + (sliderBtnWidth - moveRealX) - sliderBoxWidth <
                sliderLeft
              ) {
                let left: any =
                  -sliderLeft +
                  (sliderLeft +
                    sliderBoxWidth -
                    (sliderBtnLeft + sliderBtnWidth - moveRealX));
                if (left > 0) {
                  sliderList.style.left = 0 + "px";
                } else {
                  sliderList.style.left = left + "px";
                }
              }
            }
          },
          swipeRight: function (e: any) {
            if (proxyData.checkMoveTarget(e)) {
              isMove = true;
              direction = 1;
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              sliderBtnEl.style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))`;
              let sliderLeft: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              sliderLeft = Math.abs(sliderLeft);
              let width: any =
                sliderList.offsetWidth - proxyData.screenInfo.screenWidth;
              screenLeft = sliderLeft + proxyData.screenInfo.screenWidth;
              if (
                sliderBtnLeft +
                  sliderBtnWidth +
                  moveRealX +
                  sliderBoxEl.offsetWidth * 2 >=
                screenLeft
              ) {
                let left: any =
                  -sliderLeft -
                  (sliderBtnLeft +
                    sliderBtnWidth +
                    moveRealX +
                    sliderBoxEl.offsetWidth * 2 -
                    screenLeft);
                sliderList.style.left = left + "px";
                if (sliderLeft >= width) {
                  sliderList.style.left = -width + "px";
                }
              }
              if (
                sliderBtnLeft +
                  sliderBtnWidth +
                  moveRealX +
                  sliderBoxEl.offsetWidth >=
                sliderList.offsetWidth
              ) {
                sliderBtnEl.style.width =
                  sliderList.offsetWidth -
                  sliderBtnLeft -
                  sliderBoxEl.offsetWidth +
                  "px";
              } else {
                sliderBtnEl.style.width = sliderBtnWidth + moveRealX + "px";
              }
            }
          },
        });
      },
      cancelSliderBoxColor() {
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < sliderBoxArr.length; i++) {
          if (!proxyData.nowTimerArr[i].isCheck) {
            if (
              i >= proxyData.startIndex &&
              i < proxyData.startIndex + proxyData.startLen
            ) {
              sliderBoxArr[i].style.background =
                "linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))";
            }
          }
        }
      },
      /**
       * 设置可选日期的位置
       */
      setOptionnalPerstion(index: any, len: any = 1) {
        // debugger
        let sliderList: any = document.querySelector("#sliderListId");
        proxyData.startIndex = index;
        proxyData.startLen = len;
        proxyData.endIndex = proxyData.startIndex + len;
        let slidersWrapper: any = document.querySelector("#slidersWrapperId");
        let slidersWrapperWidth: any =
          slidersWrapper.getBoundingClientRect().width;
        let sliderBtnEl: any = document.querySelector("#sliderBtnId");
        let endEnd: any = document.querySelector("#endBoxId");
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        let parseIndex = proxyData.getTomorrowIndex();
        for (let i = 0; i < sliderBoxArr.length; i++) {
          if (i >= parseIndex) {
            sliderBoxArr[i].style.background = "transparent";
          }
        }
        let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
        for (let i = 0; i < len; i++) {
          sliderBoxArr[
            index + i
          ].style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2)), url(${bg})`;
        }
        sliderBtnEl.style.width = slidersWrapperWidth * len + "px";
        sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
        let left: any = slidersWrapperWidth * index;
        sliderBtnEl.style.left = left + "px";
        // // 已被选择的时间
        proxyData.setCheckTimeStyle();
        // // 固定服务时间（空间服务时间）
        proxyData.setServiceTimerStyle();

        // 过去的时间应该去掉
        proxyData.setPastTime();
      },
      /**
       * 设置过去的时间
       */
      setPastTime() {
        // debugger;
        if (proxyData.nowData.week === "今天") {
          let index: any = proxyData.getNowIndex();
          let sliderBoxArr: any = document.querySelectorAll(".slider-box");
          for (let i = 0; i < sliderBoxArr.length; i++) {
            if (i < index) {
              sliderBoxArr[i].style.background = `rgba(196, 196, 196, 0.2)`;
            }
          }
        }
      },
      /**
       * 设置已经选中时间
       */
      setCheckTimeStyle() {
        let timerArr: any = proxyData.nowTimerArr;
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < timerArr.length; i++) {
          if (timerArr[i].isCheck) {
            sliderBoxArr[i].style.background = proxyData.bgRed;
          }
        }
      },
      /***
       * 固定服务时间的颜色增加
       */
      setServiceTimerStyle() {
        let timerArr: any = proxyData.nowTimerArr;
        // debugger
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < timerArr.length; i++) {
          if (timerArr[i].isServiceTime) {
            sliderBoxArr[i].style.background = `rgba(196, 196, 196, 0.2)`;
          }
        }
      },
      // 转化日期(分钟处理成可选择)
      parseCusStartTime(time: any) {
        let newTime: any = time;
        if (time) {
          let minute: any = (time / 100) % 100;
          if (minute) {
            let temTimeInt: any = time / 10000;
            temTimeInt = parseInt(temTimeInt);
            if (minute < 30) {
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "30" + "00";
              } else {
                newTime = temTimeInt + "30" + "00";
              }
            } else if (minute > 30) {
              temTimeInt = temTimeInt + 1;
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "00" + "00";
              } else {
                newTime = temTimeInt + "00" + "00";
              }
            }
          }
        }
        return newTime;
      },
      // 转化日期(分钟处理成可选择)
      parseCusEndTime(time: any) {
        let newTime: any = time;
        if (time) {
          let minute: any = (time / 100) % 100;
          if (minute) {
            let temTimeInt: any = time / 10000;
            temTimeInt = parseInt(temTimeInt);
            if (minute < 30) {
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "00" + "00";
              } else {
                newTime = temTimeInt + "00" + "00";
              }
            } else if (minute > 30) {
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "30" + "00";
              } else {
                newTime = temTimeInt + "30" + "00";
              }
            }
          }
        }
        return newTime;
      },
      /**
       * 选中当前模块
       */
      checkSlider(item: any, index: any) {
        if (index === proxyData.nowTimerArr.length - 1) {
          return;
        }
        // 按钮的状态
        proxyData.formBtn = false;
        let nowIndex: any = proxyData.getNowIndex();
        if (proxyData.nowData.week === "今天" && index < nowIndex) {
          return;
        }

        let spaceCustomContentList: any =
          proxyData.nowData.spaceCustomContentList || [];
        let formatTimer: any = proxyData.nowTimerArr[index].formatTimer; //在服务定制时间之间
        let flag: any = false;
        spaceCustomContentList.map((spaceCustom: any) => {
          let startTime: any = proxyData.parseCusStartTime(
            spaceCustom.startTime
          );
          let endTime: any = proxyData.parseCusEndTime(spaceCustom.endTime);
          if (formatTimer >= startTime && formatTimer < endTime) {
            flag = true;
          }
        });
        if (flag) {
          return;
        }

        proxyData.setOptionnalPerstion(index);
      },
      /**
       * 获取个人加班申请数据
       */
      dateArr: dateArr,
      myTimeArr: myTimeArr,
      isAir: false,
      isLight: false,
      lightNum: 0,
      airNum: 0,
      // 格式化设备
      formateEquipment() {
        // debugger
        proxyData.isLight = false;
        proxyData.isAir = false;
        proxyData.lightNum = 0;
        proxyData.airNum = 0;
        if (
          proxyData.nowData &&
          proxyData.nowData.equipmentList &&
          proxyData.nowData.equipmentList.length
        ) {
          if (proxyData.enterType === 1) {
            // debugger
            proxyData.nowData.equipmentList.map((item: any) => {
              item.isCheck = true;
            });
          } else if (proxyData.enterType === 2) {
            // 空调
            if (proxyData.deviceItem && proxyData.deviceItem.id) {
              proxyData.nowData.equipmentList.map((item: any) => {
                if (
                  item.equipmentCategory !== "SELTLT" &&
                  proxyData.deviceItem.id == item.id
                ) {
                  item.isCheck = true;
                } else {
                  item.isCheck = false;
                }
              });
            } else {
              proxyData.nowData.equipmentList.map((item: any) => {
                if (item.equipmentCategory !== "SELTLT") {
                  item.isCheck = true;
                } else {
                  item.isCheck = false;
                }
              });
            }
          } else {
            // 灯
            if (proxyData.deviceItem && proxyData.deviceItem.id) {
              proxyData.nowData.equipmentList.map((item: any) => {
                if (
                  item.equipmentCategory === "SELTLT" &&
                  proxyData.deviceItem.id == item.id
                ) {
                  item.isCheck = true;
                } else {
                  item.isCheck = false;
                }
              });
            } else {
              proxyData.nowData.equipmentList.map((item: any) => {
                if (item.equipmentCategory === "SELTLT") {
                  item.isCheck = true;
                } else {
                  item.isCheck = false;
                }
              });
            }
          }
          // 判断是否有空调和灯
          proxyData.nowData.equipmentList.map((item: any) => {
            if (item.equipmentCategory == "SELTLT") {
              proxyData.isLight = true;
              proxyData.lightNum++;
            }
            if (item.equipmentCategory !== "SELTLT") {
              proxyData.isAir = true;
              proxyData.airNum++;
            }
          });
        }
      },
      // 加班时间是否在所有的服务定制时间之前
      isCusTimeBefore(spaceCustomContentList: any, time: any) {
        let flag: any = false;
        spaceCustomContentList.map((item: any) => {
          if (time < item.startTime) {
            flag = true;
          }
        });
        return flag;
      },
      //  设置加班选中区域
      setWorkTimeList() {
        proxyData.isUpdate = false;
        proxyGlobal.proxy.$loadinngEnd();
        let data: any = proxyData.workkArr;
        proxyData.dateArr = [];
        let nowDate: any = formatDate("YYYY-MM-DD");
        for (let i = 0; i < data.length; i++) {
          let date: any = formatDateStr(data[i].date);
          let spaceCustomContentList: any =
            data[i].spaceCustomContentList || []; // 固定服务定制时间

          let week: any = getWeekDate(new Date(date).getDay());
          if (date === nowDate) {
            week = "今天";
          }
          let timerArr: any = [];
          for (let i = 0; i < proxyData.timerArr.length; i++) {
            let obj: any = {
              timer: proxyData.timerArr[i],
              isCheck: false,
              isServiceTime: false,
              formatTimer: proxyData.timerArr[i].replace(/[:]/g, "") + "00",
            };
            timerArr.push(obj);
          }
          let customSceneList: any = data[i]?.customSceneList ?? [];
          customSceneList.map((custom: any) => {
            for (let j = 0; j < timerArr.length; j++) {
              if (
                proxyData.isCusTimeBefore(
                  spaceCustomContentList,
                  custom.endTime
                )
              ) {
                // 加班时间在服务定制时间之前
                let tempStartTime: any = proxyData.parseCusStartTime(
                  custom.startTime
                );
                let tempEndTime: any = proxyData.parseCusStartTime(
                  custom.endTime
                );

                if (
                  timerArr[j].formatTimer >= tempStartTime &&
                  timerArr[j].formatTimer < tempEndTime
                ) {
                  timerArr[j].isCheck = true;
                }
              } else {
                // 加班时间在服务外定制时间之后
                // debugger
                let tempStartTime: any = proxyData.parseCusEndTime(
                  custom.startTime
                );
                let tempEndTime: any = proxyData.parseCusEndTime(
                  custom.endTime
                );
                if (
                  timerArr[j].formatTimer >= tempStartTime &&
                  timerArr[j].formatTimer < tempEndTime
                ) {
                  timerArr[j].isCheck = true;
                }
              }
            }
          });

          spaceCustomContentList.map((spaceCustom: any) => {
            let startTime: any = proxyData.parseCusStartTime(
              spaceCustom.startTime
            );
            let endTime: any = proxyData.parseCusEndTime(spaceCustom.endTime);
            console.log("t==", endTime);
            // 是否在固定区域时间
            if (startTime && endTime) {
              // debugger
              timerArr.map((item: any) => {
                if (
                  item.formatTimer >= startTime &&
                  item.formatTimer < endTime
                ) {
                  item.isServiceTime = true;
                }
              });
            }
          });

          proxyData.dateArr.push({
            date: date,
            isActive: false,
            equipmentList: data[i].equipmentList || [],
            oldDate: data[i].date,
            objectId: data[i].objectId,
            cusStartTime: data[i].cusStartTime,
            customSceneList: customSceneList,
            cusEndTime: data[i].cusEndTime,
            spaceCustomContentList: data[i].spaceCustomContentList || [],
            day: getDate(new Date(date)),
            week: week,
            timerArr: timerArr,
          });
        }
        // debugger
        proxyData.dateArr.map((item: any, index: any) => {
          if (index === proxyData.activeIndex) {
            proxyData.checkDate(item, index);
            return;
          }
        });
      },
      clearTimerBoxStyle() {
        proxyData.dateArr.map((elItem: any) => {
          elItem.isActive = false;
        });
        let timerArr: any = proxyData.nowTimerArr;
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < timerArr.length; i++) {
          sliderBoxArr[i].style.background = `transparent`;
        }
        // 切换日期的时候取消绑定
        // proxyData.cancelRemoveListener();
      },
      /**
       * 切换日期
       */
      activeIndex: 0,
      // 点击审批的时候触发接口
      checkApprovalStatus(item: any, e: any) {
        if (e.target) {
          let targetWidth: any = e.target.offsetWidth * 0.7;
          let left: any = item.left - targetWidth * 1.5 + e.offsetX;
          let sliderBoxEl: any = document.querySelectorAll(".slider-box")[0];
          let sliderWidth: any = sliderBoxEl.offsetWidth;
          let index: any = Math.ceil(left / sliderWidth);
          proxyData.checkSlider({}, index);
        }
      },
      approvalData: approvalData,
      // 获取slider的宽度
      getSliderWapperWidth() {
        let slidersWrapper: any = document.querySelector("#slidersWrapperId");
        let slidersWrapperWidth: any =
          slidersWrapper.getBoundingClientRect().width;
        return slidersWrapperWidth;
      },
      // 格式化审批状态的数据位置
      formateApproveStatusPerstion() {
        if (proxyData.nowData) {
          let spaceCustomContentList: any =
            proxyData.nowData.customSceneList || [];
          let slidersWrapperWidth: any = proxyData.getSliderWapperWidth();
          proxyData.approvalData = [];
          for (let i = 0; i < spaceCustomContentList.length; i++) {
            let item: any = spaceCustomContentList[i];
            //  加班数据
            let obj: any = {
              left: 0,
              bg: "",
              index: 0,
              approvalStatus: item.approvalStatus,
              text: "",
            };
            if (item.approvalStatus == 0) {
              obj.text = "待审批";
              obj.bg = "rgba(65, 107, 255, 0.6)";
            } else if (item.approvalStatus == 1) {
              obj.text = "已通过";
              obj.bg = "rgba(24, 196, 93, 0.6)";
            } else if (item.approvalStatus == 2) {
              obj.text = "已拒绝";
              obj.bg = "rgba(255, 54, 54, 0.6)";
            }
            // else if (item.approvalStatus == 3) {
            //   obj.text = "已失效";
            //   obj.bg = "rgba(255, 54, 54, 0.6)";
            // }
            if (obj.text) {
              let startTime: any = proxyData.parseCusStartTime(item.startTime);
              let endTime: any = proxyData.parseCusEndTime(item.endTime);
              let relNowTime: any = getRelNowTime();
              let timerArr: any = proxyData.nowTimerArr;
              let leftStart: any = 0;
              let leftEnd: any = 0;
              timerArr.map((timer: any, index: any) => {
                if (timer.formatTimer == startTime) {
                  if (slidersWrapperWidth) {
                    leftStart = slidersWrapperWidth * index;
                  }
                }
                if (timer.formatTimer == endTime) {
                  if (slidersWrapperWidth) {
                    leftEnd = slidersWrapperWidth * index;
                  }
                }
              });
              obj.left = leftStart + (leftEnd - leftStart) * 0.5 - 30;
              if (relNowTime < endTime) {
                proxyData.approvalData.push(obj);
              }
            }
          }
        }
      },
      checkDate(item: any, index: any) {
        proxyData.clearTimerBoxStyle();
        item.isActive = true;
        proxyData.activeIndex = index;
        proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
        proxyData.nowData = proxyData.dateArr[index];
        // debugger
        proxyData.formateEquipment();
        nextTick(() => {
          proxyData.setNowBarPerstion(proxyData.nowTimerArr);
          let nowIndex: any = proxyData.getNowIndex();
          // // 已经被选择的时间
          proxyData.setCheckTimeStyle();
          // // 固定服务时间
          proxyData.setServiceTimerStyle();
          if (proxyData.nowData.week === "今天") {
            proxyData.setPastTime();
          }
          // 设置审批状态
          proxyData.formateApproveStatusPerstion();
          if (!proxyData.isEvent) {
            proxyData.changeEl();
            proxyData.isEvent = true;
          }
        });
      },
      /**
       * dom的滚动功能设置
       */
      flag: false,
      changeEl() {
        // 事件解绑定
        // proxyData.cancelRemoveListener();
        proxyData.setScreennWidth();
        proxyData.sliderSwiper();
        proxyData.endBoxSwiper();
      },
      // 加班数据格式化=》后台需要的数据结构(添加加班逻辑)
      formateAddTimer() {
        let customSceneList: any = proxyData.nowData.customSceneList;
        let timerArr: any = proxyData.nowData.timerArr;
        let startTime: any = timerArr[proxyData.startIndex].formatTimer;
        let endTime: any = timerArr[proxyData.endIndex].formatTimer;
        // debugger;
        let delTimerArr: any = [];
        // 加班时间拼接
        customSceneList.map((item: any, index: any) => {
          // let itemStartTime:any=proxyData.parseCusStartTime(item.startTime)
          // let itemEndTime:any=proxyData.parseCusStartTime(item.endTime)
          // item时间段保护当前时间端
          if (startTime < item.startTime) {
            if (endTime < item.startTime) {
            } else if (endTime >= item.startTime) {
              // 时间段连续拼接上
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              startTime = startTime;
              endTime = endTime;
            }
          } else if (startTime >= item.startTime && startTime < item.endTime) {
            if (endTime <= item.endTime) {
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              startTime = startTime;
              endTime = endTime;
            } else if (endTime > item.endTime) {
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              startTime = item.startTime;
              endTime = endTime;
            }
          } else if (startTime >= item.endTime) {
            if (startTime === item.endTime) {
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              startTime = item.startTime;
              endTime = endTime;
            }
          } else if (startTime === item.startTime && endTime === item.endTime) {
            // 两个时间段一致
          }
        });

        // 加班时间处理好后和服务定制时间做对比(处理时分秒的情况)
        let cusStartTime: any = proxyData.parseCusStartTime(
          proxyData.nowData.cusStartTime
        );
        let cusEndTime: any = proxyData.parseCusEndTime(
          proxyData.nowData.cusEndTime
        );
        if (startTime < cusStartTime && endTime <= cusStartTime) {
          if (endTime === cusStartTime) {
            endTime = proxyData.nowData.cusStartTime;
          }
        } else if (startTime >= cusEndTime) {
          if (startTime === cusEndTime) {
            startTime = proxyData.nowData.cusEndTime;
          }
        }
        let relNowTime: any = getRelNowTime();
        let type = "0";
        if (
          proxyData.nowData.week === "今天" &&
          relNowTime >= startTime &&
          relNowTime <= endTime
        ) {
          type = "2";
        }

        // if()
        let addObj: any = proxyData.formaTimeObj(
          customSceneList[0],
          type,
          startTime,
          endTime
        );
        delTimerArr.push(addObj);
        let formTimeArr: any = delTimerArr;
        return formTimeArr;
      },
      // 格式化加班单个数据
      formaTimeObj(item: any, type: any, startTime: any, endTime: any) {
        console.log(item);
        let obj: any = {
          projectId: proxyData.projectId, //类型：String  必有字段  备注：项目id
          sceneEquipList:
            item && item.sceneEquipList ? item.sceneEquipList : [],
          objectId: proxyData.nowData.objectId, //类型：String  必有字段  备注：空间id
          sourceType: proxyData.userInfo.pubname, //类型：String  必有字段  备注：sagacareAndtenantslink 来源
          startDate: proxyData.nowData.oldDate, //类型：String  必有字段  备注：//开始日期
          endDate: proxyData.nowData.oldDate, //类型：String  必有字段  备注：//结束日期
          startTime: startTime, //类型：String  必有字段  备注：//开始时间
          endTime: endTime, //类型：String  必有字段  备注：//结束时间
          type: type, //类型：String  必有字段  备注：//0 预约加班，1 取消，2 加班(我来了)， 3 最后一个走
          userId: proxyData.userInfo.userId, //类型：String  必有字段  备注：//用户id
          userPhone: proxyData.userInfo.userPhone, //类型：String  必有字段  备注：//手机号
          customSceneEqType: "ALL", //类型：String  必有字段  备注：//来源 AC 空调入口, SE 灯入口 ALL 加班入口
          userName: proxyData.userInfo.userName, //类型：String  必有字段  备注：//名字
        };
        if (type === "1") {
          obj.id = item.id; //类型：String  必有字段  备注：取消加班时必传
        }
        return obj;
      },
      //  加班数据格式化=》后台需要的数据结构(删除加班逻辑)
      formateDelTimer() {
        let timerArr: any = proxyData.nowData.timerArr;
        let endIndex: any = proxyData.endIndex > 0 ? proxyData.endIndex - 1 : 0;
        // debugger
        // 如果当前选择的日期只在已经选中的范围内
        if (
          timerArr[proxyData.startIndex].isCheck &&
          timerArr[endIndex].isCheck
        ) {
          let customSceneList: any = proxyData.nowData.customSceneList || [];
          let startTime: any = timerArr[proxyData.startIndex].formatTimer;
          let endTime: any = timerArr[proxyData.endIndex].formatTimer;
          let delTimerArr: any = [];
          let addTimeArr: any = [];

          // 删除时间的数据拼接
          for (let i = 0; i < customSceneList.length; i++) {
            let item: any = customSceneList[i];
            let index: any = i;
            if (item.startTime === startTime && item.endTime === endTime) {
              // 代表需要删除该段
              // 整段删除
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              break;
            } else if (item.startTime < startTime) {
              if (item.endTime <= endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  item.startTime,
                  startTime
                );
                addTimeArr.push(addObj);
              } else if (item.endTime > endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj1: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  item.startTime,
                  startTime
                );
                addTimeArr.push(addObj1);
                let addObj2: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  endTime,
                  item.endTime
                );
                addTimeArr.push(addObj2);
              }
            } else if (item.startTime === item.startTime) {
              if (item.endTime <= endTime) {
                // 整段删除
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
              } else if (item.endTime > endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj1: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  endTime,
                  item.endTime
                );
                addTimeArr.push(addObj1);
              }
            } else if (item.startTime > startTime) {
              if (item.endTime <= endTime) {
                // 整段删除
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
              } else if (item.endTime > endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj1: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  endTime,
                  item.endTime
                );
                addTimeArr.push(addObj1);
              }
            }
          }

          // 删除的时间为当时时间的时候
          let delStartTime: any = 0;
          let formTimeArr: any = addTimeArr.concat(delTimerArr);
          let realTime: any = getRelNowTime();
          formTimeArr.map((item: any, index: any) => {
            if (item.type == "1") {
              // 删除当前时间段
              if (realTime >= item.startTime && realTime <= item.endTime) {
                item.type = "3";
                delStartTime = item.startTime;
                item.endTimeReal = realTime;
              }
            }
          });
          formTimeArr.map((item: any, index: any) => {
            if (item.type == "0" && delStartTime) {
              if (item.startTime == delStartTime) {
                formTimeArr.splice(index, 1);
              }
            }
          });

          return formTimeArr;
        } else {
          return [];
        }
      },
      // 关闭加班弹窗
      closeWorkTimer() {
        proxyData.formBtn = false;
        context.emit("closeWork");
      },
      // 数组去除重复
      removeDuplicateObj(arr: any) {
        let obj = {};
        arr = arr.reduce((newArr: any, next: any) => {
          obj[next.objectId]
            ? ""
            : (obj[next.objectId] = true && newArr.push(next));
          return newArr;
        }, []);
        return arr;
      },
      checkEquipment(item: any) {
        item.isCheck = !item.isCheck;
      },
      // 我来了删除不受服务定制控制的设备的开关灯
      delSpaceNoCtrDevice(formTimerArr: any) {
        formTimerArr.map((item: any) => {
          let sceneEquipList: any = item.sceneEquipList || [];
          let seviceEquipmentList: any = proxyData.seviceEquipmentList;
          if (item.type == "2" && sceneEquipList.length) {
            sceneEquipList.map((scene: any, index: any) => {
              let flag: any = false;
              for (let i = 0; i < seviceEquipmentList.length; i++) {
                if (
                  scene.objectId == seviceEquipmentList[i].id &&
                  seviceEquipmentList[i].isExeSpaceTime
                ) {
                  flag = true;
                }
                if (flag) {
                  break;
                }
              }
              if (!flag) {
                item.sceneEquipList.splice(index, 1);
              }
            });
          }
        });
      },
      // 提交申请
      addWorkTimer() {
        let formTimerArr: any = proxyData.formateAddTimer();
        let sceneEquipList: any = [];
        proxyData.nowData.equipmentList.map((item: any) => {
          if (item.isCheck) {
            let obj: any = {
              projectId: item.projectId, //类型：String  必有字段  备注：无
              objectId: item.id, //类型：String  必有字段  备注：设备id
              type: item.equipmentCategory,
            };
            sceneEquipList.push(obj);
          }
        });
        if (formTimerArr && formTimerArr.length == 2) {
          if (
            formTimerArr[1].startTime >= formTimerArr[0].startTime &&
            formTimerArr[1].endTime <= formTimerArr[0].endTime
          ) {
          } else {
            formTimerArr.map((item: any) => {
              if (item.type == "1") {
                if (item.sceneEquipList && item.sceneEquipList.length) {
                  item.sceneEquipList.map((scene: any) => {
                    let obj: any = {
                      projectId: scene.projectId, //类型：String  必有字段  备注：无
                      objectId: scene.objectId, //类型：String  必有字段  备注：设备id
                      type: scene.type,
                    };
                    sceneEquipList.push(obj);
                  });
                }
              }
            });
          }
        }

        sceneEquipList = proxyData.removeDuplicateObj(sceneEquipList);
        formTimerArr.map((item: any) => {
          if (item.type == "0" || item.type == "2") {
            item.sceneEquipList = sceneEquipList;
          }
        });
        // 我来了过滤设备
        proxyData.delSpaceNoCtrDevice(formTimerArr);
        // 保存加班记录
        proxyData.saveBatchCustomScene(formTimerArr);
        //  如果在当前时间,需要手动开启设备(暂时不需要手动开启设备,后台已经把此逻辑合并)
        // proxyData.openDeviceAll(formTimerArr);
      },
      // 手动控制开启设备
      openDeviceAll(formTimerArr: any) {
        let sceneEquipList: any = [];
        formTimerArr.map((item: any) => {
          if (item.type == "2") {
            sceneEquipList = sceneEquipList.concat(item.sceneEquipList);
          }
        });
        sceneEquipList = proxyData.removeDuplicateObj(sceneEquipList);
        // 改变设备状态
        let airDevice: any = [];
        let lightDevice: any = [];
        sceneEquipList.map((item: any) => {
          if (item.type == "SELTLT") {
            let obj: any = {
              id: item.objectId,
              switch: true,
            };
            lightDevice.push(obj);
          } else {
            let obj: any = {
              id: item.objectId, //类型：String  必有字段  备注：设备id
              code: "EquipSwitchSet", //类型：String  必有字段  备注：编码 EquipSwtichSet
              value: "1", //类型：String  必有字段  备注：值 0
            };
            airDevice.push(obj);
          }
        });
        proxyData.setSpaceCondtioners(airDevice);
        proxyData.setallLampHttp(lightDevice);
      },
      // 手动开空调
      setSpaceCondtioners(data: any) {
        setSpaceCondtioners(data)
          .then((res) => {})
          .catch(() => {});
      },
      // 手动开灯
      setallLampHttp(data: any) {
        setallLampHttp(data)
          .then((res) => {})
          .catch(() => {});
      },
      // 提交加班记录
      saveBatchCustomScene(formTimerArr: any, type: any = 1) {
        // proxyGlobal.proxy.$loadingStart(0);
        proxyData.showLoading = true;
        proxyData.formBtn = true;
        saveBatchCustomScene(formTimerArr)
          .then((res) => {
            context.emit("closeWork");
            proxyData.showLoading = false;
            proxyData.formBtn = false;
          })
          .catch(() => {
            // proxyGlobal.proxy.$loadinngEnd();
            context.emit("closeWork");
            proxyData.showLoading = false;
            proxyData.formBtn = false;
          });
      },
      // 删除
      isUpdate: false, // 删除更新弹窗数据
      triggerDelTime() {
        let formTimeArr: any = proxyData.formateDelTimer();
        console.log("需要删除的数据---");
        console.log(formTimeArr);
        if (formTimeArr && formTimeArr.length) {
          // console.log(formTimeArr);
          // alert("确定删除当前时间吗?");
          // debugger;
          Dialog.confirm({
            title: "确认",
            message: "确定删除当前时间吗?",
          })
            .then(() => {
              let sceneEquipList: any = [];
              formTimeArr.map((item: any) => {
                if (item.type == "1") {
                  if (item.sceneEquipList) {
                    item.sceneEquipList.map((scene: any) => {
                      let obj: any = {
                        projectId: scene.projectId, //类型：String  必有字段  备注：无
                        objectId: scene.objectId, //类型：String  必有字段  备注：设备id
                        type: scene.type,
                      };
                      sceneEquipList.push(obj);
                    });
                  }
                }
              });
              sceneEquipList = proxyData.removeDuplicateObj(sceneEquipList);

              formTimeArr.map((item: any) => {
                if (item.type !== "1") {
                  item.sceneEquipList = sceneEquipList;
                }
              });

              proxyData.saveBatchCustomScene(formTimeArr, 2);
            })
            .catch(() => {
              // on cancel
            });
        }
      },
    });
    watch(
      props,
      (newProps: any) => {
        proxyData.workkArr = newProps.workkArr;
        proxyData.projectId = newProps.projectId;
        proxyData.enterType = newProps.enterType;
        proxyData.deviceItem = newProps.deviceItem;
        proxyData.seviceEquipmentList = newProps.seviceEquipmentList;
        console.log("弹窗变化了-----==");
        // proxyData.setWorkTimeList();
      },
      {
        deep: true,
        immediate: true,
      }
    );
    onMounted(() => {
      // 设置dom最外层的宽
      // console.log("弹窗变化了-----==");
      // proxyData.formateManualWorkTime();
      proxyData.setWorkTimeList();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>

<style lang="scss" scoped>
.work-content {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.work-space {
  width: 100%;
  // padding-left: 10px;
  .space-title {
    padding-bottom: 10px;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 31px;
    color: #000000;
  }
  .tip {
    padding-bottom: 20px;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #8d9399;
  }
}
.add-time {
  width: 100%;
  // height: 80%;
  background: #fff;
  box-sizing: border-box;
  // padding: 10px;
  overflow: hidden;

  .date_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 5px;

    .date-item {
      padding-top: 10px;
      width: 50px;
      height: 60px;
      box-sizing: border-box;
      border: 1px solid #eff0f1;
      border-radius: 16px;

      span {
        display: block;
        width: 100%;
        text-align: center;

        &:nth-child(1) {
          font-family: "Noto Sans SC";
          padding-bottom: 6px;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 14px;
          transform: scale(0.8);
          text-align: center;
          color: #8d9399;
        }

        &:nth-child(2) {
          font-family: "Persagy";
          font-style: normal;
          font-weight: 700;
          font-size: 16px;
          // line-height: 19px;
          text-align: center;
          color: #000000;
        }
      }
    }

    .date-item-active {
      background: rgba(206, 159, 39, 0.4);
      border: none;
    }
  }

  .sliders-list {
    position: relative;
    margin-top: 5px;
    height: 135px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    .approval-status {
      position: absolute;
      font-family: "Montserrat";
      top: 64px;
      z-index: 444;
      height: 30px;
      line-height: 30px;
      border-radius: 10px;
      font-size: 12px;
      transform: scale(0.7);
      font-weight: 500;
      text-align: center;
      color: #ffffff;
    }

    &::-webkit-scrollbar {
      display: none;
    }

    .sliders-wrapper {
      display: inline-block;
      box-sizing: border-box;
      width: 72px;
      height: 135px;
      //border-bottom: 1px solid #ECEFF4;
      &:nth-child(2n + 1) {
        border-left: 1px solid #eceff4;
      }

      .sliders {
        position: relative;
        // width: 36px;
        width: 100%;
        height: 100%;

        .label {
          position: absolute;
          height: 34px;
          left: 0px;
          top: 5px;
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 400;
          font-size: 10px;
          line-height: 14px;
          padding-left: 5px;
          color: #8d9399;
        }

        .slider-box {
          position: absolute;
          //width: 100%;
          width: 72px;
          height: 100px;
          left: -1px;
          // top:25px;
          bottom: 0px;
          //background: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2));
        }
      }
    }

    .slider-btn {
      position: absolute;
      height: 100px;
      //left: 40px;
      top: 35px;

      .start {
        position: absolute;
        width: 2px;
        top: 0;
        height: 100px;
        left: 0px;
        //left: 176px;
        background: #04b49c;
      }

      .end-box {
        position: absolute;
        top: 0;
        width: 20px;
        height: 100px;
        right: -8px;
        z-index: 999;
        //left: 286px;

        .end {
          position: absolute;
          top: 0;
          left: 10px;
          width: 2px;
          height: 100px;
          background: #04b49c;
        }

        .end-radio {
          width: 22px;
          position: absolute;
          top: 37px;
          left: -1px;
          height: 22px;
          background: #ffffff;
          border-radius: 50%;
          box-shadow: 0px 1px 2px rgba(4, 38, 0, 0.2);
        }
      }
    }
  }
}
.add-time-btn {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  // padding-top: 10px;
  text-align: center;

  .cancel-btn {
    // width: 32%;
    width: 170px;
    height: 50px;
    line-height: 50px;
    background: #ffffff;
    border: 1px solid #c3c7cb;
    border-radius: 25px;
    font-size: 16px;
    margin-right: 20px;
    font-weight: 400;
    color: #1f2529;
  }

  .comfirm-btn {
    // width: 52%;
    width: 265px;
    height: 50px;
    line-height: 50px;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    background: #ce9f27;
    border-radius: 25px;
    color: #fff;
  }
  .comfirm-btn-diabled {
    background: rgba(196, 196, 196, 0.2);
    color: #1f2529;
  }
}

.work-device {
  // padding-top: 10px;
  height: 36vh;
  overflow-y: auto;
  .device-tip {
    padding-top: 20px;
    font-weight: 400;
    font-size: 12px;

    color: #8d9399;
    span {
      display: inline-block;
      padding-bottom: 10px;
    }
    p {
      line-height: 24px;
    }
  }
}
.device-box {
  // display: flex;
  // justify-content: space-between;

  .device-row {
    display: inline-block;
    width: 48%;
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    padding: 10px;
    color: #1b2129;
    background: #f7f9fa;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 20px;
    &:nth-child(2n + 1) {
      margin-right: 2%;
    }
    .row-item {
      display: flex;
      justify-content: space-between;
    }
    span {
      display: inline-block;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
    }
    img {
      width: 25px;
      height: 25px;
    }
  }
}

.row-title {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: #000000;
  padding-top: 4px;
}
.device-title {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 5px;
  text-align: center;
  .line {
    display: inline-block;
    flex: 1;
    height: 0px;
    border: 1px solid #e1e5eb;
  }
  .text {
    display: inline-block;
    width: 142px;
    vertical-align: middle;
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: #8d9399;
    text-align: center;
    margin-top: -6px;
  }
}
</style>