index.vue 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131
  1. <template>
  2. <div class="work-content">
  3. <div class="work-space">
  4. <div class="space-title">尚格云 申请延时</div>
  5. <div class="device-tip">延时期间,空间相关设备会开启</div>
  6. </div>
  7. <div class="add-time" id="addTimeId">
  8. <div class="date_box" v-if="dateArr && dateArr.length">
  9. <div
  10. class="date-item"
  11. :class="item.isActive ? 'date-item-active' : ''"
  12. @click.stop="checkDate(item, index)"
  13. :key="'date' + index"
  14. v-for="(item, index) in dateArr"
  15. >
  16. <span>{{ item.week }}</span>
  17. <span>{{ item.day }}</span>
  18. </div>
  19. </div>
  20. <div class="sliders-list" id="sliderListId">
  21. <template v-for="(item, index) in nowTimerArr" :key="'slider' + index">
  22. <div class="sliders-wrapper" id="slidersWrapperId">
  23. <div class="sliders">
  24. <div class="label" v-show="index === 0 || index % 2 === 0">
  25. {{ item.timer }}
  26. </div>
  27. <div
  28. class="slider-box"
  29. @click="checkSlider(item, index)"
  30. :data-index="index"
  31. ></div>
  32. </div>
  33. </div>
  34. </template>
  35. <div class="slider-btn" id="sliderBtnId" @click="triggerDelTime">
  36. <div class="start" id="startId"></div>
  37. <div class="end-box" id="endBoxId">
  38. <div class="end" id="endId"></div>
  39. <div class="end-radio" id="endRadioId"></div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="add-time-btn">
  45. <div class="cancel-btn">取消</div>
  46. <div
  47. class="comfirm-btn"
  48. :class="formBtn ? 'comfirm-btn-diabled' : ''"
  49. @click="addWorkTimer"
  50. >
  51. 提交申请
  52. </div>
  53. </div>
  54. </div>
  55. </template>
  56. <script lang="ts">
  57. import { Slider } from "vant";
  58. import {
  59. defineComponent,
  60. reactive,
  61. toRefs,
  62. ref,
  63. onBeforeMount,
  64. onMounted,
  65. onUpdated,
  66. nextTick,
  67. watch,
  68. } from "vue";
  69. import { swiper } from "@/utils/swiper";
  70. import {
  71. formatDate,
  72. formatDateStr,
  73. getDate,
  74. getNowTime,
  75. getRelNowTime,
  76. getTimers,
  77. getUserInfo,
  78. getWeekDate,
  79. parseImgUrl,
  80. } from "@/utils";
  81. import { myTime } from "@/model/workTimeData";
  82. import { propsToAttrMap } from "@vue/shared";
  83. import { isTemplateElement } from "@babel/types";
  84. export default defineComponent({
  85. components: {
  86. VanSlider: Slider,
  87. },
  88. props: {
  89. workkArr: {
  90. type: Array,
  91. default: () => [],
  92. },
  93. projectId: {
  94. type: String,
  95. default: () => "",
  96. },
  97. },
  98. setup(props) {
  99. const screenInfo: any = {
  100. screenWidth: 0,
  101. screenHeight: 0,
  102. };
  103. let dateArr: any = [];
  104. let myTimeArr: any = [];
  105. let timerArr: any = getTimers();
  106. let nowTimerArr: any = [];
  107. let nowData: any = [];
  108. let redUrl: any = `${parseImgUrl("ipdImages", "time-check.svg")}`;
  109. let bgRed: any = `linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)), url(${redUrl})`;
  110. const userInfo: any = getUserInfo();
  111. const proxyData = reactive({
  112. userInfo: userInfo,
  113. screenInfo: screenInfo,
  114. projectId: props.projectId,
  115. workkArr: props.workkArr,
  116. bgRed: bgRed,
  117. startIndex: 0,
  118. endIndex: 0,
  119. nowData: nowData,
  120. nowTimerArr: nowTimerArr,
  121. timerArr: timerArr,
  122. startLen: 0,
  123. formBtn: false,
  124. setScreennWidth() {
  125. let addTimeEl: any = document.querySelector("#addTimeId");
  126. proxyData.screenInfo.screenWidth = addTimeEl.offsetWidth;
  127. },
  128. // 获取当前位置的坐标
  129. getNowPerstion(timerArr: any) {
  130. let nowIndex: any = getNowTime()[1];
  131. let obj: any = {
  132. nowIndex: nowIndex,
  133. len: 4,
  134. };
  135. let formatTimer: any = timerArr[nowIndex].formatTimer;
  136. let cusStartTime: any = proxyData.parseCusStartTime(
  137. proxyData.nowData.cusStartTime
  138. );
  139. let cusEndTime: any = proxyData.parseCusEndTime(
  140. proxyData.nowData.cusEndTime
  141. );
  142. if (formatTimer >= cusStartTime && formatTimer <= cusEndTime) {
  143. //在服务定制时间之间
  144. timerArr.map((item: any, index: any) => {
  145. if (item.formatTimer === cusEndTime) {
  146. obj.nowIndex = index;
  147. }
  148. });
  149. } else if (formatTimer < cusStartTime) {
  150. timerArr.map((item: any, index: any) => {
  151. if (item.formatTimer === cusStartTime) {
  152. console.log("index===", index);
  153. obj.len = index - nowIndex;
  154. }
  155. });
  156. }
  157. return obj;
  158. },
  159. // 设置可选时间
  160. setOptionnalTime(timerArr: any) {
  161. let sliderList: any = document.querySelector("#sliderListId");
  162. let slidersWrapper: any = document.querySelector("#slidersWrapperId");
  163. sliderList.style.width =
  164. slidersWrapper.offsetWidth * timerArr.length - 15 + "px";
  165. let index: any = proxyData.getNowPerstion(timerArr).nowIndex;
  166. let len: any = proxyData.getNowPerstion(timerArr).len;
  167. let sliderLeft: any = slidersWrapper.offsetWidth * index;
  168. sliderList.style.left = -sliderLeft + "px";
  169. proxyData.setOptionnalPerstion(index, len);
  170. proxyData.setPastTime(getNowTime()[1]);
  171. // 已经被选择的时间
  172. proxyData.setCheckTimeStyle();
  173. // 固定服务时间
  174. proxyData.setServiceTimerStyle();
  175. },
  176. sliderSwiper() {
  177. // 获取当前时间的下标
  178. let sliderList: any = document.querySelector("#sliderListId");
  179. let slidersWrapper: any = document.querySelector("#slidersWrapperId");
  180. let width: any =
  181. sliderList.offsetWidth - proxyData.screenInfo.screenWidth;
  182. swiper(sliderList, {
  183. swipeLeft: function (e: any) {
  184. if (!proxyData.checkMoveTarget(e)) {
  185. let left: any = isNaN(parseInt(sliderList.style.left))
  186. ? 0
  187. : parseInt(sliderList.style.left);
  188. left = Math.abs(left);
  189. if (left >= width) {
  190. sliderList.style.left = -width + "px";
  191. } else {
  192. sliderList.style.left =
  193. -left - Math.abs(e.mation.moveX - e.mation.startX) + "px";
  194. }
  195. }
  196. },
  197. swipeRight: function (e: any) {
  198. if (!proxyData.checkMoveTarget(e)) {
  199. let left: any = isNaN(parseInt(sliderList.style.left))
  200. ? 0
  201. : parseInt(sliderList.style.left);
  202. if (left >= 0) {
  203. sliderList.style.left = 0 + "px";
  204. } else {
  205. sliderList.style.left =
  206. left + Math.abs(e.mation.moveX - e.mation.startX) + "px";
  207. }
  208. }
  209. },
  210. });
  211. },
  212. // 判断滑动的是否是滑快
  213. checkMoveTarget(el: any) {
  214. let endBox: any = document.querySelector("#endBoxId");
  215. let endEnd: any = document.querySelector("#endId");
  216. let endRadio: any = document.querySelector("#endRadioId");
  217. if (
  218. el.target === endBox ||
  219. el.target === endEnd ||
  220. el.target === endRadio
  221. ) {
  222. return true;
  223. }
  224. return false;
  225. },
  226. // 判断滑动的位置是否包含服务定制的位置(如果当前滑动的位置在服务定制处不让滑动)
  227. checkPersionService() {
  228. let flag: any = false;
  229. for (let i = proxyData.startIndex; i < proxyData.endIndex; i++) {
  230. if (proxyData.nowTimerArr[i].isServiceTime) {
  231. flag = true;
  232. break;
  233. }
  234. }
  235. proxyData.formBtn = flag;
  236. },
  237. /**
  238. * 日历滑动
  239. */
  240. endBoxSwiper() {
  241. let sliderList: any = document.querySelector("#sliderListId");
  242. let endBox: any = document.querySelector("#endBoxId");
  243. let sliderBtnEl: any = document.querySelector("#sliderBtnId");
  244. let startEl: any = document.querySelector("#startId");
  245. let sliderBoxEl: any = document.querySelectorAll(".slider-box")[0];
  246. let sliderInitLeft: any = 0;
  247. let sliderBtnLeft: any = 0;
  248. let screenLeft: any = 0;
  249. let startElLeft: any = 0;
  250. let sliderBtnWidth: any = 0;
  251. let sliderBoxWidth: any = 0;
  252. let direction: any = 0; // 0是像左 1表示向右边移动
  253. let isMove: any = false;
  254. endBox.addEventListener("touchstart", function (e: any) {
  255. isMove = false;
  256. startElLeft = isNaN(parseInt(startEl.style.left))
  257. ? 0
  258. : parseInt(startEl.style.left);
  259. sliderInitLeft = isNaN(parseInt(sliderList.style.left))
  260. ? 0
  261. : parseInt(sliderList.style.left);
  262. sliderBtnLeft = isNaN(parseInt(sliderBtnEl.style.left))
  263. ? 0
  264. : parseInt(sliderBtnEl.style.left);
  265. sliderInitLeft = Math.abs(sliderInitLeft);
  266. sliderBtnWidth = sliderBtnEl.offsetWidth;
  267. sliderBoxWidth = sliderBoxEl.offsetWidth;
  268. });
  269. endBox.addEventListener("touchend", function (e: any) {
  270. if (isMove) {
  271. sliderBtnWidth = sliderBtnEl.offsetWidth;
  272. let index: any = Math.ceil(
  273. sliderBtnWidth / sliderBoxEl.offsetWidth
  274. );
  275. sliderBtnEl.style.width = sliderBoxEl.offsetWidth * index + "px";
  276. sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
  277. proxyData.setOptionnalPerstion(proxyData.startIndex, index);
  278. isMove = false;
  279. // 判断按钮是否可以点击(如果选择的时候包含服务定制时间,则不可点击)
  280. proxyData.checkPersionService();
  281. }
  282. });
  283. swiper(endBox, {
  284. swipeLeft: function (e: any) {
  285. if (proxyData.checkMoveTarget(e)) {
  286. direction = 0;
  287. isMove = true;
  288. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  289. let sliderLeft: any = isNaN(parseInt(sliderList.style.left))
  290. ? 0
  291. : parseInt(sliderList.style.left);
  292. sliderLeft = Math.abs(sliderLeft);
  293. let width: any = sliderBoxEl.offsetWidth;
  294. if (sliderBtnWidth - moveRealX <= width) {
  295. sliderBtnEl.style.width = width + "px";
  296. } else {
  297. sliderBtnEl.style.width = sliderBtnWidth - moveRealX + "px";
  298. proxyData.cancelSliderBoxColor();
  299. }
  300. let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
  301. sliderBtnEl.style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))`;
  302. if (
  303. sliderBtnLeft + (sliderBtnWidth - moveRealX) - sliderBoxWidth <
  304. sliderLeft
  305. ) {
  306. let left: any =
  307. -sliderLeft +
  308. (sliderLeft +
  309. sliderBoxWidth -
  310. (sliderBtnLeft + sliderBtnWidth - moveRealX));
  311. if (left > 0) {
  312. sliderList.style.left = 0 + "px";
  313. } else {
  314. sliderList.style.left = left + "px";
  315. }
  316. }
  317. }
  318. },
  319. swipeRight: function (e: any) {
  320. if (proxyData.checkMoveTarget(e)) {
  321. isMove = true;
  322. direction = 1;
  323. let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
  324. sliderBtnEl.style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))`;
  325. let sliderLeft: any = isNaN(parseInt(sliderList.style.left))
  326. ? 0
  327. : parseInt(sliderList.style.left);
  328. sliderLeft = Math.abs(sliderLeft);
  329. let width: any =
  330. sliderList.offsetWidth - proxyData.screenInfo.screenWidth;
  331. screenLeft = sliderLeft + proxyData.screenInfo.screenWidth;
  332. if (
  333. sliderBtnLeft +
  334. sliderBtnWidth +
  335. moveRealX +
  336. sliderBoxEl.offsetWidth * 2 >=
  337. screenLeft
  338. ) {
  339. let left: any =
  340. -sliderLeft -
  341. (sliderBtnLeft +
  342. sliderBtnWidth +
  343. moveRealX +
  344. sliderBoxEl.offsetWidth * 2 -
  345. screenLeft);
  346. sliderList.style.left = left + "px";
  347. if (sliderLeft >= width) {
  348. sliderList.style.left = -width + "px";
  349. }
  350. }
  351. if (
  352. sliderBtnLeft +
  353. sliderBtnWidth +
  354. moveRealX +
  355. sliderBoxEl.offsetWidth >=
  356. sliderList.offsetWidth
  357. ) {
  358. sliderBtnEl.style.width =
  359. sliderList.offsetWidth -
  360. sliderBtnLeft -
  361. sliderBoxEl.offsetWidth +
  362. "px";
  363. } else {
  364. sliderBtnEl.style.width = sliderBtnWidth + moveRealX + "px";
  365. }
  366. }
  367. },
  368. });
  369. },
  370. cancelSliderBoxColor() {
  371. let sliderBoxArr: any = document.querySelectorAll(".slider-box");
  372. for (let i = 0; i < sliderBoxArr.length; i++) {
  373. if (!proxyData.nowTimerArr[i].isCheck) {
  374. if (
  375. i >= proxyData.startIndex &&
  376. i < proxyData.startIndex + proxyData.startLen
  377. ) {
  378. sliderBoxArr[i].style.background =
  379. "linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))";
  380. }
  381. }
  382. }
  383. },
  384. /**
  385. * 设置可选日期的位置
  386. */
  387. setOptionnalPerstion(index: any, len: any = 1) {
  388. proxyData.startIndex = index;
  389. proxyData.startLen = len;
  390. proxyData.endIndex = proxyData.startIndex + len;
  391. let slidersWrapper: any = document.querySelector("#slidersWrapperId");
  392. let left: any = slidersWrapper.offsetWidth * index;
  393. let sliderBtnEl: any = document.querySelector("#sliderBtnId");
  394. let endEnd: any = document.querySelector("#endBoxId");
  395. sliderBtnEl.style.left = left + "px";
  396. sliderBtnEl.style.width =
  397. slidersWrapper.offsetWidth * len + endEnd.offsetWidth / 2 - 4 + "px";
  398. sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
  399. let sliderBoxArr: any = document.querySelectorAll(".slider-box");
  400. let parseIndex: any = getNowTime()[1];
  401. for (let i = 0; i < sliderBoxArr.length; i++) {
  402. if (i >= parseIndex) {
  403. sliderBoxArr[i].style.background = "transparent";
  404. }
  405. }
  406. let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
  407. for (let i = 0; i < len; i++) {
  408. sliderBoxArr[
  409. index + i
  410. ].style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2)), url(${bg})`;
  411. }
  412. // // 已被选择的时间
  413. proxyData.setCheckTimeStyle();
  414. // // 固定服务时间(空间服务时间)
  415. proxyData.setServiceTimerStyle();
  416. },
  417. /**
  418. * 设置过去的时间
  419. */
  420. setPastTime(index: any) {
  421. let sliderBoxArr: any = document.querySelectorAll(".slider-box");
  422. for (let i = 0; i < sliderBoxArr.length; i++) {
  423. if (i < index) {
  424. sliderBoxArr[i].style.background = `rgba(196, 196, 196, 0.2)`;
  425. }
  426. }
  427. },
  428. /**
  429. * 设置已经选中时间
  430. */
  431. setCheckTimeStyle() {
  432. let timerArr: any = proxyData.nowTimerArr;
  433. let sliderBoxArr: any = document.querySelectorAll(".slider-box");
  434. for (let i = 0; i < timerArr.length; i++) {
  435. if (timerArr[i].isCheck) {
  436. sliderBoxArr[i].style.background = proxyData.bgRed;
  437. }
  438. }
  439. },
  440. /***
  441. * 固定服务时间的颜色增加
  442. */
  443. setServiceTimerStyle() {
  444. let timerArr: any = proxyData.nowTimerArr;
  445. let sliderBoxArr: any = document.querySelectorAll(".slider-box");
  446. for (let i = 0; i < timerArr.length; i++) {
  447. if (timerArr[i].isServiceTime) {
  448. sliderBoxArr[i].style.background = `rgba(196, 196, 196, 0.2)`;
  449. }
  450. }
  451. },
  452. // 转化日期(分钟处理成可选择)
  453. parseCusStartTime(time: any) {
  454. let newTime: any = time;
  455. if (time) {
  456. let minute: any = (time / 100) % 100;
  457. if (minute) {
  458. let temTimeInt: any = time / 10000;
  459. temTimeInt = parseInt(temTimeInt);
  460. if (minute < 30) {
  461. if (temTimeInt < 10) {
  462. newTime = "0" + temTimeInt + "30" + "00";
  463. } else {
  464. newTime = temTimeInt + "30" + "00";
  465. }
  466. } else if (minute > 30) {
  467. temTimeInt = temTimeInt + 1;
  468. if (temTimeInt < 10) {
  469. newTime = "0" + temTimeInt + "00" + "00";
  470. } else {
  471. newTime = temTimeInt + "00" + "00";
  472. }
  473. }
  474. }
  475. }
  476. return newTime;
  477. },
  478. // 转化日期(分钟处理成可选择)
  479. parseCusEndTime(time: any) {
  480. let newTime: any = time;
  481. if (time) {
  482. let minute: any = (time / 100) % 100;
  483. if (minute) {
  484. let temTimeInt: any = time / 10000;
  485. temTimeInt = parseInt(temTimeInt);
  486. if (minute < 30) {
  487. if (temTimeInt < 10) {
  488. newTime = "0" + temTimeInt + "00" + "00";
  489. } else {
  490. newTime = temTimeInt + "00" + "00";
  491. }
  492. } else if (minute > 30) {
  493. if (temTimeInt < 10) {
  494. newTime = "0" + temTimeInt + "30" + "00";
  495. } else {
  496. newTime = temTimeInt + "30" + "00";
  497. }
  498. }
  499. }
  500. }
  501. return newTime;
  502. },
  503. /**
  504. * 选中当前模块
  505. */
  506. checkSlider(item: any, index: any) {
  507. if (index === proxyData.nowTimerArr.length - 1) {
  508. return;
  509. }
  510. // 按钮的状态
  511. proxyData.formBtn = false;
  512. let nowIndex: any = getNowTime()[1];
  513. if (index < nowIndex) {
  514. // 过去的时间不可选择
  515. // 过去的时间不可选择
  516. return;
  517. }
  518. if (proxyData.nowData.cusStartTime && proxyData.nowData.cusEndTime) {
  519. let formatTimer: any = proxyData.nowTimerArr[index].formatTimer; //在服务定制时间之间
  520. let cusStartTime: any = proxyData.parseCusStartTime(
  521. proxyData.nowData.cusStartTime
  522. );
  523. let cusEndTime: any = proxyData.parseCusEndTime(
  524. proxyData.nowData.cusEndTime
  525. );
  526. if (formatTimer >= cusStartTime && formatTimer < cusEndTime) {
  527. return;
  528. }
  529. }
  530. proxyData.setOptionnalPerstion(index);
  531. },
  532. /**
  533. * 获取个人加班申请数据
  534. */
  535. dateArr: dateArr,
  536. myTimeArr: myTimeArr,
  537. // // 服务定制开始时间转化(处理服务定制时间包含几分钟的问题)
  538. // parseCusStatTime() {},
  539. // // 服务定制结束时间转化(处理服务定制时间包含几分钟的问题)
  540. // parseCusEndTime(time: any) {
  541. // let newTime: any = "";
  542. // if (time) {
  543. // let minute: any = (time / 100) % 100;
  544. // if (minute < 30) {
  545. // } else if (minute > 30) {
  546. // } else {
  547. // newTime = time;
  548. // }
  549. // }
  550. // },
  551. setWorkTimeList() {
  552. let data: any = proxyData.workkArr;
  553. proxyData.myTimeArr = data;
  554. proxyData.dateArr = [];
  555. let nowDate: any = formatDate("YYYY-MM-DD");
  556. for (let i = 0; i < data.length; i++) {
  557. let date: any = formatDateStr(data[i].date);
  558. let cusStartTime: any = proxyData.parseCusStartTime(
  559. data[i].cusStartTime
  560. );
  561. let cusEndTime: any = proxyData.parseCusEndTime(data[i].cusEndTime);
  562. let isActive: Boolean = false;
  563. let week: any = getWeekDate(new Date(date).getDay());
  564. if (date === nowDate) {
  565. isActive = true;
  566. week = "今天";
  567. }
  568. let timerArr: any = [];
  569. for (let i = 0; i < proxyData.timerArr.length; i++) {
  570. let obj: any = {
  571. timer: proxyData.timerArr[i],
  572. isCheck: false,
  573. formatTimer: proxyData.timerArr[i].replace(/[:]/g, "") + "00",
  574. };
  575. timerArr.push(obj);
  576. }
  577. let customSceneList: any = data[i]?.customSceneList ?? [];
  578. customSceneList.map((custom: any) => {
  579. for (let j = 0; j < timerArr.length; j++) {
  580. // debugger
  581. if (timerArr[j].formatTimer < cusStartTime) {
  582. let tempStartTime: any = proxyData.parseCusStartTime(
  583. custom.startTime
  584. );
  585. let tempEndTime: any = proxyData.parseCusStartTime(
  586. custom.endTime
  587. );
  588. // 加班时间在服务定制时间之前
  589. if (
  590. timerArr[j].formatTimer >= tempStartTime &&
  591. timerArr[j].formatTimer < tempEndTime
  592. ) {
  593. timerArr[j].isCheck = true;
  594. }
  595. } else {
  596. // 加班时间在服务外定制时间之后
  597. let tempStartTime: any = proxyData.parseCusEndTime(
  598. custom.startTime
  599. );
  600. let tempEndTime: any = proxyData.parseCusEndTime(
  601. custom.endTime
  602. );
  603. if (
  604. timerArr[j].formatTimer >= tempStartTime &&
  605. timerArr[j].formatTimer < tempEndTime
  606. ) {
  607. timerArr[j].isCheck = true;
  608. }
  609. }
  610. }
  611. });
  612. // 是否在固定区域时间
  613. timerArr.map((item: any) => {
  614. if (
  615. item.formatTimer >= cusStartTime &&
  616. item.formatTimer < cusEndTime
  617. ) {
  618. item.isServiceTime = true;
  619. } else {
  620. item.isServiceTime = false;
  621. }
  622. });
  623. proxyData.dateArr.push({
  624. date: date,
  625. isActive: isActive,
  626. oldDate: data[i].date,
  627. objectId: data[i].objectId,
  628. cusStartTime: data[i].cusStartTime,
  629. customSceneList: customSceneList,
  630. cusEndTime: data[i].cusEndTime,
  631. day: getDate(new Date(date)),
  632. week: week,
  633. timerArr: timerArr,
  634. });
  635. }
  636. proxyData.dateArr.map((item: any, index: any) => {
  637. if (item.week === "今天") {
  638. // proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
  639. // proxyData.nowData = proxyData.dateArr[index];
  640. proxyData.checkDate(item, index);
  641. return;
  642. }
  643. });
  644. },
  645. /**
  646. * 切换日期
  647. */
  648. checkDate(item: any, index: any) {
  649. proxyData.dateArr.map((elItem: any) => {
  650. elItem.isActive = false;
  651. });
  652. item.isActive = true;
  653. proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
  654. proxyData.nowData = proxyData.dateArr[index];
  655. // dom元素宽高调整
  656. nextTick(() => {
  657. proxyData.setOptionnalTime(proxyData.nowTimerArr);
  658. proxyData.changeEl();
  659. });
  660. },
  661. /**
  662. * dom的滚动功能设置
  663. */
  664. changeEl() {
  665. proxyData.setScreennWidth();
  666. proxyData.sliderSwiper();
  667. proxyData.endBoxSwiper();
  668. },
  669. // 加班数据格式化=》后台需要的数据结构(添加加班逻辑)
  670. formateAddTimer() {
  671. let customSceneList: any = proxyData.nowData.customSceneList;
  672. let timerArr: any = proxyData.nowData.timerArr;
  673. let startTime: any = timerArr[proxyData.startIndex].formatTimer;
  674. let endTime: any = timerArr[proxyData.endIndex].formatTimer;
  675. let delTimerArr: any = [];
  676. // 加班时间拼接
  677. customSceneList.map((item: any, index: any) => {
  678. // item时间段保护当前时间端
  679. if (startTime < item.startTime) {
  680. if (endTime < item.startTime) {
  681. } else if (endTime >= item.startTime) {
  682. // 时间段连续拼接上
  683. let delObj: any = proxyData.formaTimeObj(
  684. item,
  685. "1",
  686. item.startTime,
  687. item.endTime
  688. );
  689. delTimerArr.push(delObj);
  690. startTime = startTime;
  691. endTime = item.endTime;
  692. }
  693. } else if (startTime >= item.startTime && startTime < item.endTime) {
  694. if (endTime <= item.endTime) {
  695. let delObj: any = proxyData.formaTimeObj(
  696. item,
  697. "1",
  698. item.startTime,
  699. item.endTime
  700. );
  701. delTimerArr.push(delObj);
  702. startTime = startTime;
  703. endTime = endTime;
  704. } else if (endTime > item.endTime) {
  705. let delObj: any = proxyData.formaTimeObj(
  706. item,
  707. "1",
  708. item.startTime,
  709. item.endTime
  710. );
  711. delTimerArr.push(delObj);
  712. startTime = item.startTime;
  713. endTime = endTime;
  714. }
  715. } else if (startTime > item.endTime) {
  716. if (startTime === item.endTime) {
  717. let delObj: any = proxyData.formaTimeObj(
  718. item,
  719. "1",
  720. item.startTime,
  721. item.endTime
  722. );
  723. startTime = item.startTime;
  724. endTime = endTime;
  725. }
  726. } else if (startTime === item.startTime && endTime === item.endTime) {
  727. // 两个时间段一致
  728. }
  729. });
  730. // 加班时间处理好后和服务定制时间做对比(处理时分秒的情况)
  731. let cusStartTime: any = proxyData.parseCusStartTime(
  732. proxyData.nowData.cusStartTime
  733. );
  734. let cusEndTime: any = proxyData.parseCusEndTime(
  735. proxyData.nowData.cusEndTime
  736. );
  737. if (startTime < cusStartTime && endTime <= cusStartTime) {
  738. if (endTime === cusStartTime) {
  739. endTime = proxyData.nowData.cusStartTime;
  740. }
  741. } else if (startTime >= cusEndTime) {
  742. if (startTime === cusEndTime) {
  743. startTime = proxyData.nowData.cusEndTime;
  744. }
  745. }
  746. let relNowTime: any = getRelNowTime();
  747. let type = "0";
  748. if (relNowTime >= startTime && relNowTime <= endTime) {
  749. type = "2";
  750. }
  751. let addObj: any = proxyData.formaTimeObj(
  752. customSceneList[0],
  753. type,
  754. startTime,
  755. endTime
  756. );
  757. delTimerArr.push(addObj);
  758. let formTimeArr: any = delTimerArr;
  759. return formTimeArr;
  760. },
  761. // 格式化加班单个数据
  762. formaTimeObj(item: any, type: any, startTime: any, endTime: any) {
  763. let obj: any = {
  764. projectId: proxyData.projectId, //类型:String 必有字段 备注:项目id
  765. objectId: proxyData.nowData.objectId, //类型:String 必有字段 备注:空间id
  766. sourceType: "sagacareAndtenantslink", //类型:String 必有字段 备注:sagacareAndtenantslink 来源
  767. startDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://开始日期
  768. endDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://结束日期
  769. startTime: startTime, //类型:String 必有字段 备注://开始时间
  770. endTime: endTime, //类型:String 必有字段 备注://结束时间
  771. type: type, //类型:String 必有字段 备注://0 预约加班,1 取消,2 加班(我来了), 3 最后一个走
  772. userId: proxyData.userInfo.userId, //类型:String 必有字段 备注://用户id
  773. userPhone: proxyData.userInfo.userPhone, //类型:String 必有字段 备注://手机号
  774. customSceneEqType: "ALL", //类型:String 必有字段 备注://来源 AC 空调入口, SE 灯入口 ALL 加班入口
  775. userName: proxyData.userInfo.userName, //类型:String 必有字段 备注://名字
  776. };
  777. if (type === "1") {
  778. obj.id = item.id; //类型:String 必有字段 备注:取消加班时必传
  779. }
  780. return obj;
  781. },
  782. // 加班数据格式化=》后台需要的数据结构(删除加班逻辑)
  783. formateDelTimer() {
  784. let timerArr: any = proxyData.nowData.timerArr;
  785. let endIndex: any = proxyData.endIndex > 0 ? proxyData.endIndex - 1 : 0;
  786. // 如果当前选择的日期只在已经选中的范围内
  787. if (
  788. timerArr[proxyData.startIndex].isCheck &&
  789. timerArr[endIndex].isCheck
  790. ) {
  791. let customSceneList: any = proxyData.nowData.customSceneList;
  792. let startTime: any = timerArr[proxyData.startIndex].formatTimer;
  793. let endTime: any = timerArr[proxyData.endIndex].formatTimer;
  794. let delTimerArr: any = [];
  795. let addTimeArr: any = [];
  796. // 删除时间的数据拼接
  797. customSceneList.map((item: any, index: any) => {
  798. if (item.startTime < startTime) {
  799. if (item.endTime <= endTime) {
  800. let delObj: any = proxyData.formaTimeObj(
  801. item,
  802. "1",
  803. item.startTime,
  804. item.endTime
  805. );
  806. delTimerArr.push(delObj);
  807. let addObj: any = proxyData.formaTimeObj(
  808. customSceneList[0],
  809. "0",
  810. item.startTime,
  811. startTime
  812. );
  813. addTimeArr.push(addObj);
  814. } else if (item.endTime > endTime) {
  815. let delObj: any = proxyData.formaTimeObj(
  816. item,
  817. "1",
  818. item.startTime,
  819. item.endTime
  820. );
  821. delTimerArr.push(delObj);
  822. let addObj1: any = proxyData.formaTimeObj(
  823. customSceneList[0],
  824. "0",
  825. item.startTime,
  826. startTime
  827. );
  828. addTimeArr.push(addObj1);
  829. let addObj2: any = proxyData.formaTimeObj(
  830. customSceneList[0],
  831. "0",
  832. endTime,
  833. item.endTime
  834. );
  835. addTimeArr.push(addObj2);
  836. }
  837. } else if (item.startTime === item.startTime) {
  838. if (item.endTime === endTime) {
  839. // 整段删除
  840. let delObj: any = proxyData.formaTimeObj(
  841. item,
  842. "1",
  843. item.startTime,
  844. item.endTime
  845. );
  846. delTimerArr.push(delObj);
  847. }
  848. }
  849. });
  850. // return formTimeArr;
  851. } else {
  852. return [];
  853. }
  854. },
  855. // 提交申请
  856. addWorkTimer() {
  857. let formTimerArr: any = proxyData.formateAddTimer();
  858. console.log("提交申请-----");
  859. console.log(formTimerArr);
  860. },
  861. // 删除
  862. triggerDelTime() {
  863. let formTimeArr: any = proxyData.formateDelTimer();
  864. if (formTimeArr && formTimeArr.length) {
  865. alert("确定删除当前时间吗?");
  866. }
  867. },
  868. });
  869. nextTick(() => {
  870. // proxyData.setScreennWidth()
  871. });
  872. watch(props, (newProps: any) => {
  873. proxyData.workkArr = newProps.workkArr;
  874. proxyData.projectId = newProps.projectId;
  875. // proxyData.getWorkTimeList();
  876. });
  877. onMounted(() => {
  878. // 设置dom最外层的宽
  879. proxyData.setWorkTimeList();
  880. });
  881. return {
  882. ...toRefs(proxyData),
  883. };
  884. },
  885. });
  886. </script>
  887. <style lang="scss" scoped>
  888. .work-content {
  889. position: relative;
  890. height: 100%;
  891. width: 100%;
  892. background: #fff;
  893. }
  894. .work-space {
  895. width: 100%;
  896. padding-left: 10px;
  897. .space-title {
  898. padding-bottom: 10px;
  899. font-family: "Noto Sans SC";
  900. font-style: normal;
  901. font-weight: 500;
  902. font-size: 22px;
  903. line-height: 31px;
  904. color: #000000;
  905. }
  906. .device-tip {
  907. padding-bottom: 36px;
  908. font-family: "Noto Sans SC";
  909. font-style: normal;
  910. font-weight: 400;
  911. font-size: 12px;
  912. line-height: 17px;
  913. color: #8d9399;
  914. }
  915. }
  916. .add-time {
  917. width: 100%;
  918. // height: 80%;
  919. background: #fff;
  920. box-sizing: border-box;
  921. // padding: 10px;
  922. overflow: hidden;
  923. .date_box {
  924. display: flex;
  925. justify-content: space-between;
  926. width: 100%;
  927. padding-bottom: 35px;
  928. .date-item {
  929. padding-top: 20px;
  930. width: 50px;
  931. height: 74px;
  932. box-sizing: border-box;
  933. border: 1px solid #eff0f1;
  934. border-radius: 16px;
  935. span {
  936. display: block;
  937. width: 100%;
  938. text-align: center;
  939. &:nth-child(1) {
  940. font-family: "Noto Sans SC";
  941. padding-bottom: 10px;
  942. font-style: normal;
  943. font-weight: 400;
  944. font-size: 10px;
  945. line-height: 12px;
  946. text-align: center;
  947. color: #8d9399;
  948. }
  949. &:nth-child(2) {
  950. font-family: "Persagy";
  951. font-style: normal;
  952. font-weight: 700;
  953. font-size: 14px;
  954. line-height: 19px;
  955. text-align: center;
  956. color: #000000;
  957. }
  958. }
  959. }
  960. .date-item-active {
  961. background: rgba(206, 159, 39, 0.4);
  962. }
  963. }
  964. .sliders-list {
  965. position: relative;
  966. // padding-top: 20px;
  967. margin-top: 20px;
  968. height: 135px;
  969. white-space: nowrap;
  970. overflow-x: auto;
  971. overflow-y: hidden;
  972. &::-webkit-scrollbar {
  973. display: none;
  974. }
  975. .sliders-wrapper {
  976. display: inline-block;
  977. box-sizing: border-box;
  978. width: 72px;
  979. height: 135px;
  980. //border-bottom: 1px solid #ECEFF4;
  981. &:nth-child(2n + 1) {
  982. border-left: 1px solid #eceff4;
  983. .label {
  984. //border-left: 1px solid #ECEFF4;
  985. }
  986. }
  987. .sliders {
  988. position: relative;
  989. width: 36px;
  990. //width: 100%;
  991. height: 100%;
  992. .label {
  993. position: absolute;
  994. height: 34px;
  995. left: 0px;
  996. top: 0px;
  997. font-family: "PingFang SC";
  998. font-style: normal;
  999. font-weight: 400;
  1000. font-size: 10px;
  1001. line-height: 14px;
  1002. padding-left: 5px;
  1003. color: #8d9399;
  1004. }
  1005. .slider-box {
  1006. position: absolute;
  1007. //width: 100%;
  1008. width: 72px;
  1009. height: 100px;
  1010. left: -1px;
  1011. // top:25px;
  1012. bottom: 0px;
  1013. //background: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2));
  1014. }
  1015. }
  1016. }
  1017. .slider-btn {
  1018. position: absolute;
  1019. height: 100px;
  1020. //left: 40px;
  1021. top: 35px;
  1022. .start {
  1023. position: absolute;
  1024. width: 3px;
  1025. top: 0;
  1026. height: 100px;
  1027. left: 0;
  1028. //left: 176px;
  1029. background: #04b49c;
  1030. }
  1031. .end-box {
  1032. position: absolute;
  1033. top: 0;
  1034. width: 20px;
  1035. height: 100px;
  1036. right: -3px;
  1037. // z-index: 444;
  1038. //left: 286px;
  1039. .end {
  1040. position: absolute;
  1041. top: 0;
  1042. left: 10px;
  1043. width: 3px;
  1044. height: 100px;
  1045. background: #04b49c;
  1046. }
  1047. .end-radio {
  1048. width: 22px;
  1049. position: absolute;
  1050. top: 37px;
  1051. left: -1px;
  1052. height: 22px;
  1053. background: #ffffff;
  1054. border-radius: 50%;
  1055. box-shadow: 0px 1px 2px rgba(4, 38, 0, 0.2);
  1056. }
  1057. }
  1058. }
  1059. }
  1060. }
  1061. .add-time-btn {
  1062. position: absolute;
  1063. // display: flex;
  1064. // justify-content: space-between;
  1065. // width: 100%;
  1066. bottom: 5vh;
  1067. left: 50%;
  1068. transform: translateX(-50%);
  1069. display: flex;
  1070. padding-top: 24px;
  1071. text-align: center;
  1072. .cancel-btn {
  1073. // width: 32%;
  1074. width: 170px;
  1075. height: 50px;
  1076. line-height: 50px;
  1077. background: #ffffff;
  1078. border: 1px solid #c3c7cb;
  1079. border-radius: 25px;
  1080. font-size: 16px;
  1081. margin-right: 20px;
  1082. font-weight: 400;
  1083. color: #1f2529;
  1084. }
  1085. .comfirm-btn {
  1086. // width: 52%;
  1087. width: 265px;
  1088. height: 50px;
  1089. line-height: 50px;
  1090. font-weight: 400;
  1091. font-size: 16px;
  1092. text-align: center;
  1093. background: #ce9f27;
  1094. border-radius: 25px;
  1095. color: #fff;
  1096. }
  1097. .comfirm-btn-diabled {
  1098. background: rgba(196, 196, 196, 0.2);
  1099. color: #1f2529;
  1100. }
  1101. }
  1102. </style>