index.vue 44 KB

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