1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342 |
- <template>
- <div class="work-content">
- <div class="work-space">
- <div class="space-title">{{ spaceInfo.spaceName }} 申请延时</div>
- <div class="device-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>
- <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>
- <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 } from "@/apis/envmonitor";
- export default defineComponent({
- components: {
- VanSlider: Slider,
- },
- props: {
- workkArr: {
- type: Array,
- default: () => [],
- },
- projectId: {
- type: String,
- default: () => "",
- },
- spaceInfo: {
- type: Object,
- 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 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,
- 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,
- 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;
- },
- // 获取当前位置的坐标
- 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
- );
- if (formatTimer >= cusStartTime && formatTimer <= cusEndTime) {
- //在服务定制时间之间
- timerArr.map((item: any, index: any) => {
- if (item.formatTimer === cusEndTime) {
- obj.nowIndex = index;
- }
- });
- } else if (formatTimer < cusStartTime) {
- timerArr.map((item: any, index: any) => {
- if (item.formatTimer === cusStartTime) {
- obj.len = index - nowIndex;
- if (obj.len > 4) {
- obj.len = 4;
- }
- }
- });
- }
- return obj;
- },
- // 设置可选时间
- setOptionnalTime(timerArr: any) {
- let sliderList: any = document.querySelector("#sliderListId");
- let slidersWrapper: any = document.querySelector("#slidersWrapperId");
- let sliderWidth: any = slidersWrapper.getBoundingClientRect().width;
- 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();
- },
- /**
- * 设置过去的时间
- */
- setPastTime(index: any) {
- if (proxyData.nowData.week === "今天") {
- 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;
- }
- if (proxyData.nowData.cusStartTime && proxyData.nowData.cusEndTime) {
- let formatTimer: any = proxyData.nowTimerArr[index].formatTimer; //在服务定制时间之间
- let cusStartTime: any = proxyData.parseCusStartTime(
- proxyData.nowData.cusStartTime
- );
- let cusEndTime: any = proxyData.parseCusEndTime(
- proxyData.nowData.cusEndTime
- );
- if (formatTimer >= cusStartTime && formatTimer < cusEndTime) {
- return;
- }
- }
- proxyData.setOptionnalPerstion(index);
- },
- /**
- * 获取个人加班申请数据
- */
- dateArr: dateArr,
- myTimeArr: myTimeArr,
- // // 服务定制开始时间转化(处理服务定制时间包含几分钟的问题)
- // parseCusStatTime() {},
- // // 服务定制结束时间转化(处理服务定制时间包含几分钟的问题)
- // parseCusEndTime(time: any) {
- // let newTime: any = "";
- // if (time) {
- // let minute: any = (time / 100) % 100;
- // if (minute < 30) {
- // } else if (minute > 30) {
- // } else {
- // newTime = time;
- // }
- // }
- // },
- 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 cusStartTime: any = proxyData.parseCusStartTime(
- data[i].cusStartTime
- );
- let cusEndTime: any = proxyData.parseCusEndTime(data[i].cusEndTime);
- // let isActive: Boolean = false;
- let week: any = getWeekDate(new Date(date).getDay());
- if (date === nowDate) {
- // isActive = true;
- week = "今天";
- }
- let timerArr: any = [];
- for (let i = 0; i < proxyData.timerArr.length; i++) {
- let obj: any = {
- timer: proxyData.timerArr[i],
- isCheck: 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++) {
- // debugger
- if (timerArr[j].formatTimer < cusStartTime) {
- 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 {
- // 加班时间在服务外定制时间之后
- 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;
- }
- }
- }
- });
- // 是否在固定区域时间
- if (cusStartTime && cusEndTime) {
- timerArr.map((item: any) => {
- if (
- item.formatTimer >= cusStartTime &&
- item.formatTimer < cusEndTime
- ) {
- item.isServiceTime = true;
- } else {
- item.isServiceTime = false;
- }
- });
- }
- proxyData.dateArr.push({
- date: date,
- isActive: false,
- oldDate: data[i].date,
- objectId: data[i].objectId,
- cusStartTime: data[i].cusStartTime,
- customSceneList: customSceneList,
- cusEndTime: data[i].cusEndTime,
- 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,
- checkDate(item: any, index: any) {
- proxyData.clearTimerBoxStyle();
- item.isActive = true;
- proxyData.activeIndex = index;
- proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
- proxyData.nowData = proxyData.dateArr[index];
- nextTick(() => {
- proxyData.setOptionnalTime(proxyData.nowTimerArr);
- let nowIndex: any = proxyData.getNowIndex();
- if (proxyData.nowData.week === "今天") {
- proxyData.setPastTime(nowIndex);
- }
- // // 已经被选择的时间
- proxyData.setCheckTimeStyle();
- // // 固定服务时间
- proxyData.setServiceTimerStyle();
- if (!proxyData.isEvent) {
- proxyData.changeEl();
- proxyData.isEvent = true;
- }
- });
- },
- /**
- * dom的滚动功能设置
- */
- flag: false,
- changeEl() {
- // 事件解绑定
- // proxyData.cancelRemoveListener();
- proxyData.setScreennWidth();
- proxyData.sliderSwiper();
- proxyData.endBoxSwiper();
- // if (!proxyData.flag) {
- // proxyData.setScreennWidth();
- // proxyData.sliderSwiper();
- // proxyData.endBoxSwiper();
- // proxyData.flag = true;
- // }
- },
- // 加班数据格式化=》后台需要的数据结构(添加加班逻辑)
- 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
- );
- 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";
- }
- 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) {
- let obj: any = {
- projectId: proxyData.projectId, //类型:String 必有字段 备注:项目id
- 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 index: any = i;
- let item: any = customSceneList[i];
- if (startTime == item.startTime && endTime == item.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);
- }
- }
- }
- addTimeArr.map((item: any) => {
- let realTime: any = getRelNowTime();
- if (realTime >= item.startTime && realTime <= item.endTime) {
- item.type === "2";
- }
- });
- let formTimeArr: any = addTimeArr.concat(delTimerArr);
- return formTimeArr;
- } else {
- return [];
- }
- },
- // 关闭加班弹窗
- closeWorkTimer() {
- proxyData.formBtn = false;
- context.emit("closeWork");
- },
- // 提交申请
- addWorkTimer() {
- let formTimerArr: any = proxyData.formateAddTimer();
- proxyData.saveBatchCustomScene(formTimerArr);
- // console.log("提交申请-----");
- // console.log(formTimerArr);
- },
- // 提交加班记录
- saveBatchCustomScene(formTimerArr: any, type: any = 1) {
- // proxyGlobal.proxy.$loadingStart(0);
- proxyData.showLoading = true;
- proxyData.formBtn = true;
- saveBatchCustomScene(formTimerArr)
- .then((res) => {
- // debugger;
- if (type === 1) {
- // 添加
- context.emit("closeWork");
- // proxyGlobal.proxy.$loadinngEnd();
- proxyData.showLoading = false;
- } else if (type === 2) {
- // 删除
- proxyData.isUpdate = true;
- proxyData.showLoading = false;
- // proxyData.setWorkTimeList();
- }
- proxyData.formBtn = false;
- })
- .catch(() => {
- // proxyGlobal.proxy.$loadinngEnd();
- proxyData.showLoading = false;
- });
- },
- // 删除
- isUpdate: false, // 删除更新弹窗数据
- triggerDelTime() {
- let formTimeArr: any = proxyData.formateDelTimer();
- if (formTimeArr && formTimeArr.length) {
- // console.log(formTimeArr);
- // alert("确定删除当前时间吗?");
- Dialog.confirm({
- title: "确认",
- message: "确定删除当前时间吗?",
- })
- .then(() => {
- proxyData.saveBatchCustomScene(formTimeArr, 2);
- })
- .catch(() => {
- // on cancel
- });
- }
- },
- });
- watch(props, (newProps: any) => {
- proxyData.workkArr = newProps.workkArr;
- proxyData.projectId = newProps.projectId;
- if (proxyData.isUpdate) {
- proxyData.setWorkTimeList();
- }
- // proxyData.getWorkTimeList();
- });
- onMounted(() => {
- // 设置dom最外层的宽
- proxyData.setWorkTimeList();
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .work-content {
- position: relative;
- height: 100%;
- width: 100%;
- 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;
- }
- .device-tip {
- padding-bottom: 36px;
- 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: 35px;
- .date-item {
- padding-top: 20px;
- width: 50px;
- height: 74px;
- 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: 10px;
- font-style: normal;
- font-weight: 400;
- font-size: 10px;
- line-height: 12px;
- text-align: center;
- color: #8d9399;
- }
- &:nth-child(2) {
- font-family: "Persagy";
- font-style: normal;
- font-weight: 700;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
- color: #000000;
- }
- }
- }
- .date-item-active {
- background: rgba(206, 159, 39, 0.4);
- border: none;
- }
- }
- .sliders-list {
- position: relative;
- // padding-top: 20px;
- margin-top: 20px;
- height: 135px;
- white-space: nowrap;
- overflow-x: auto;
- overflow-y: hidden;
- &::-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;
- // display: flex;
- // justify-content: space-between;
- // width: 100%;
- bottom: 5vh;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
- padding-top: 24px;
- 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;
- }
- }
- </style>
|