123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329 |
- <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="'dater' + 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
- );
- 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";
- }
- 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 = [];
- let flag = false;
- for (let i = 0; i < customSceneList.length; 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);
- flag = true;
- break;
- }
- }
- // 删除时间的数据拼接
- if (!flag) {
- for (let i = 0; i < customSceneList.length; i++) {
- let item: any = customSceneList[i];
- 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 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);
- },
- // 提交加班记录
- 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(() => {
- context.emit("closeWork");
- proxyData.showLoading = false;
- proxyData.formBtn = 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;
- });
- 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>
|