index.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329
  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="'dater' + 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. delTimerArr.push(delObj);
  827. startTime = item.startTime;
  828. endTime = endTime;
  829. }
  830. } else if (startTime === item.startTime && endTime === item.endTime) {
  831. // 两个时间段一致
  832. }
  833. });
  834. // 加班时间处理好后和服务定制时间做对比(处理时分秒的情况)
  835. let cusStartTime: any = proxyData.parseCusStartTime(
  836. proxyData.nowData.cusStartTime
  837. );
  838. let cusEndTime: any = proxyData.parseCusEndTime(
  839. proxyData.nowData.cusEndTime
  840. );
  841. if (startTime < cusStartTime && endTime <= cusStartTime) {
  842. if (endTime === cusStartTime) {
  843. endTime = proxyData.nowData.cusStartTime;
  844. }
  845. } else if (startTime >= cusEndTime) {
  846. if (startTime === cusEndTime) {
  847. startTime = proxyData.nowData.cusEndTime;
  848. }
  849. }
  850. let relNowTime: any = getRelNowTime();
  851. let type = "0";
  852. if (
  853. proxyData.nowData.week === "今天" &&
  854. relNowTime >= startTime &&
  855. relNowTime <= endTime
  856. ) {
  857. type = "2";
  858. }
  859. let addObj: any = proxyData.formaTimeObj(
  860. customSceneList[0],
  861. type,
  862. startTime,
  863. endTime
  864. );
  865. delTimerArr.push(addObj);
  866. let formTimeArr: any = delTimerArr;
  867. return formTimeArr;
  868. },
  869. // 格式化加班单个数据
  870. formaTimeObj(item: any, type: any, startTime: any, endTime: any) {
  871. let obj: any = {
  872. projectId: proxyData.projectId, //类型:String 必有字段 备注:项目id
  873. objectId: proxyData.nowData.objectId, //类型:String 必有字段 备注:空间id
  874. sourceType: proxyData.userInfo.pubname, //类型:String 必有字段 备注:sagacareAndtenantslink 来源
  875. startDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://开始日期
  876. endDate: proxyData.nowData.oldDate, //类型:String 必有字段 备注://结束日期
  877. startTime: startTime, //类型:String 必有字段 备注://开始时间
  878. endTime: endTime, //类型:String 必有字段 备注://结束时间
  879. type: type, //类型:String 必有字段 备注://0 预约加班,1 取消,2 加班(我来了), 3 最后一个走
  880. userId: proxyData.userInfo.userId, //类型:String 必有字段 备注://用户id
  881. userPhone: proxyData.userInfo.userPhone, //类型:String 必有字段 备注://手机号
  882. customSceneEqType: "ALL", //类型:String 必有字段 备注://来源 AC 空调入口, SE 灯入口 ALL 加班入口
  883. userName: proxyData.userInfo.userName, //类型:String 必有字段 备注://名字
  884. };
  885. if (type === "1") {
  886. obj.id = item.id; //类型:String 必有字段 备注:取消加班时必传
  887. }
  888. return obj;
  889. },
  890. // 加班数据格式化=》后台需要的数据结构(删除加班逻辑)
  891. formateDelTimer() {
  892. let timerArr: any = proxyData.nowData.timerArr;
  893. let endIndex: any = proxyData.endIndex > 0 ? proxyData.endIndex - 1 : 0;
  894. // debugger
  895. // 如果当前选择的日期只在已经选中的范围内
  896. if (
  897. timerArr[proxyData.startIndex].isCheck &&
  898. timerArr[endIndex].isCheck
  899. ) {
  900. let customSceneList: any = proxyData.nowData.customSceneList || [];
  901. let startTime: any = timerArr[proxyData.startIndex].formatTimer;
  902. let endTime: any = timerArr[proxyData.endIndex].formatTimer;
  903. let delTimerArr: any = [];
  904. let addTimeArr: any = [];
  905. let flag = false;
  906. for (let i = 0; i < customSceneList.length; 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. flag = true;
  919. break;
  920. }
  921. }
  922. // 删除时间的数据拼接
  923. if (!flag) {
  924. for (let i = 0; i < customSceneList.length; i++) {
  925. let item: any = customSceneList[i];
  926. if (item.startTime < startTime) {
  927. if (item.endTime <= endTime) {
  928. let delObj: any = proxyData.formaTimeObj(
  929. item,
  930. "1",
  931. item.startTime,
  932. item.endTime
  933. );
  934. delTimerArr.push(delObj);
  935. let addObj: any = proxyData.formaTimeObj(
  936. customSceneList[0],
  937. "0",
  938. item.startTime,
  939. startTime
  940. );
  941. addTimeArr.push(addObj);
  942. } else if (item.endTime > endTime) {
  943. let delObj: any = proxyData.formaTimeObj(
  944. item,
  945. "1",
  946. item.startTime,
  947. item.endTime
  948. );
  949. delTimerArr.push(delObj);
  950. let addObj1: any = proxyData.formaTimeObj(
  951. customSceneList[0],
  952. "0",
  953. item.startTime,
  954. startTime
  955. );
  956. addTimeArr.push(addObj1);
  957. let addObj2: any = proxyData.formaTimeObj(
  958. customSceneList[0],
  959. "0",
  960. endTime,
  961. item.endTime
  962. );
  963. addTimeArr.push(addObj2);
  964. }
  965. } else if (item.startTime === item.startTime) {
  966. if (item.endTime <= endTime) {
  967. // 整段删除
  968. let delObj: any = proxyData.formaTimeObj(
  969. item,
  970. "1",
  971. item.startTime,
  972. item.endTime
  973. );
  974. delTimerArr.push(delObj);
  975. } else if (item.endTime > endTime) {
  976. let delObj: any = proxyData.formaTimeObj(
  977. item,
  978. "1",
  979. item.startTime,
  980. item.endTime
  981. );
  982. delTimerArr.push(delObj);
  983. let addObj1: any = proxyData.formaTimeObj(
  984. customSceneList[0],
  985. "0",
  986. endTime,
  987. item.endTime
  988. );
  989. addTimeArr.push(addObj1);
  990. }
  991. } else if (item.startTime > startTime) {
  992. if (item.endTime <= endTime) {
  993. // 整段删除
  994. let delObj: any = proxyData.formaTimeObj(
  995. item,
  996. "1",
  997. item.startTime,
  998. item.endTime
  999. );
  1000. delTimerArr.push(delObj);
  1001. } else if (item.endTime > endTime) {
  1002. let delObj: any = proxyData.formaTimeObj(
  1003. item,
  1004. "1",
  1005. item.startTime,
  1006. item.endTime
  1007. );
  1008. delTimerArr.push(delObj);
  1009. let addObj1: any = proxyData.formaTimeObj(
  1010. customSceneList[0],
  1011. "0",
  1012. endTime,
  1013. item.endTime
  1014. );
  1015. addTimeArr.push(addObj1);
  1016. }
  1017. }
  1018. }
  1019. }
  1020. let formTimeArr: any = addTimeArr.concat(delTimerArr);
  1021. return formTimeArr;
  1022. } else {
  1023. return [];
  1024. }
  1025. },
  1026. // 关闭加班弹窗
  1027. closeWorkTimer() {
  1028. proxyData.formBtn = false;
  1029. context.emit("closeWork");
  1030. },
  1031. // 提交申请
  1032. addWorkTimer() {
  1033. let formTimerArr: any = proxyData.formateAddTimer();
  1034. proxyData.saveBatchCustomScene(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. context.emit("closeWork");
  1044. proxyData.showLoading = false;
  1045. proxyData.formBtn = false;
  1046. })
  1047. .catch(() => {
  1048. context.emit("closeWork");
  1049. proxyData.showLoading = false;
  1050. proxyData.formBtn = false;
  1051. });
  1052. },
  1053. // 删除
  1054. isUpdate: false, // 删除更新弹窗数据
  1055. triggerDelTime() {
  1056. let formTimeArr: any = proxyData.formateDelTimer();
  1057. if (formTimeArr && formTimeArr.length) {
  1058. // console.log(formTimeArr);
  1059. // alert("确定删除当前时间吗?");
  1060. Dialog.confirm({
  1061. title: "确认",
  1062. message: "确定删除当前时间吗?",
  1063. })
  1064. .then(() => {
  1065. proxyData.saveBatchCustomScene(formTimeArr, 2);
  1066. })
  1067. .catch(() => {
  1068. // on cancel
  1069. });
  1070. }
  1071. },
  1072. });
  1073. watch(props, (newProps: any) => {
  1074. proxyData.workkArr = newProps.workkArr;
  1075. proxyData.projectId = newProps.projectId;
  1076. });
  1077. onMounted(() => {
  1078. // 设置dom最外层的宽
  1079. proxyData.setWorkTimeList();
  1080. });
  1081. return {
  1082. ...toRefs(proxyData),
  1083. };
  1084. },
  1085. });
  1086. </script>
  1087. <style lang="scss" scoped>
  1088. .work-content {
  1089. position: relative;
  1090. height: 100%;
  1091. width: 100%;
  1092. background: #fff;
  1093. }
  1094. .work-space {
  1095. width: 100%;
  1096. padding-left: 10px;
  1097. .space-title {
  1098. padding-bottom: 10px;
  1099. font-family: "Noto Sans SC";
  1100. font-style: normal;
  1101. font-weight: 500;
  1102. font-size: 22px;
  1103. line-height: 31px;
  1104. color: #000000;
  1105. }
  1106. .device-tip {
  1107. padding-bottom: 36px;
  1108. font-family: "Noto Sans SC";
  1109. font-style: normal;
  1110. font-weight: 400;
  1111. font-size: 12px;
  1112. line-height: 17px;
  1113. color: #8d9399;
  1114. }
  1115. }
  1116. .add-time {
  1117. width: 100%;
  1118. // height: 80%;
  1119. background: #fff;
  1120. box-sizing: border-box;
  1121. // padding: 10px;
  1122. overflow: hidden;
  1123. .date_box {
  1124. display: flex;
  1125. justify-content: space-between;
  1126. width: 100%;
  1127. padding-bottom: 35px;
  1128. .date-item {
  1129. padding-top: 20px;
  1130. width: 50px;
  1131. height: 74px;
  1132. box-sizing: border-box;
  1133. border: 1px solid #eff0f1;
  1134. border-radius: 16px;
  1135. span {
  1136. display: block;
  1137. width: 100%;
  1138. text-align: center;
  1139. &:nth-child(1) {
  1140. font-family: "Noto Sans SC";
  1141. padding-bottom: 10px;
  1142. font-style: normal;
  1143. font-weight: 400;
  1144. font-size: 10px;
  1145. line-height: 12px;
  1146. text-align: center;
  1147. color: #8d9399;
  1148. }
  1149. &:nth-child(2) {
  1150. font-family: "Persagy";
  1151. font-style: normal;
  1152. font-weight: 700;
  1153. font-size: 14px;
  1154. line-height: 19px;
  1155. text-align: center;
  1156. color: #000000;
  1157. }
  1158. }
  1159. }
  1160. .date-item-active {
  1161. background: rgba(206, 159, 39, 0.4);
  1162. border: none;
  1163. }
  1164. }
  1165. .sliders-list {
  1166. position: relative;
  1167. // padding-top: 20px;
  1168. margin-top: 20px;
  1169. height: 135px;
  1170. white-space: nowrap;
  1171. overflow-x: auto;
  1172. overflow-y: hidden;
  1173. &::-webkit-scrollbar {
  1174. display: none;
  1175. }
  1176. .sliders-wrapper {
  1177. display: inline-block;
  1178. box-sizing: border-box;
  1179. width: 72px;
  1180. height: 135px;
  1181. //border-bottom: 1px solid #ECEFF4;
  1182. &:nth-child(2n + 1) {
  1183. border-left: 1px solid #eceff4;
  1184. }
  1185. .sliders {
  1186. position: relative;
  1187. // width: 36px;
  1188. width: 100%;
  1189. height: 100%;
  1190. .label {
  1191. position: absolute;
  1192. height: 34px;
  1193. left: 0px;
  1194. top: 5px;
  1195. font-family: "PingFang SC";
  1196. font-style: normal;
  1197. font-weight: 400;
  1198. font-size: 10px;
  1199. line-height: 14px;
  1200. padding-left: 5px;
  1201. color: #8d9399;
  1202. }
  1203. .slider-box {
  1204. position: absolute;
  1205. //width: 100%;
  1206. width: 72px;
  1207. height: 100px;
  1208. left: -1px;
  1209. // top:25px;
  1210. bottom: 0px;
  1211. //background: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2));
  1212. }
  1213. }
  1214. }
  1215. .slider-btn {
  1216. position: absolute;
  1217. height: 100px;
  1218. //left: 40px;
  1219. top: 35px;
  1220. .start {
  1221. position: absolute;
  1222. width: 2px;
  1223. top: 0;
  1224. height: 100px;
  1225. left: 0px;
  1226. //left: 176px;
  1227. background: #04b49c;
  1228. }
  1229. .end-box {
  1230. position: absolute;
  1231. top: 0;
  1232. width: 20px;
  1233. height: 100px;
  1234. right: -8px;
  1235. z-index: 999;
  1236. //left: 286px;
  1237. .end {
  1238. position: absolute;
  1239. top: 0;
  1240. left: 10px;
  1241. width: 2px;
  1242. height: 100px;
  1243. background: #04b49c;
  1244. }
  1245. .end-radio {
  1246. width: 22px;
  1247. position: absolute;
  1248. top: 37px;
  1249. left: -1px;
  1250. height: 22px;
  1251. background: #ffffff;
  1252. border-radius: 50%;
  1253. box-shadow: 0px 1px 2px rgba(4, 38, 0, 0.2);
  1254. }
  1255. }
  1256. }
  1257. }
  1258. }
  1259. .add-time-btn {
  1260. position: absolute;
  1261. // display: flex;
  1262. // justify-content: space-between;
  1263. // width: 100%;
  1264. bottom: 5vh;
  1265. left: 50%;
  1266. transform: translateX(-50%);
  1267. display: flex;
  1268. padding-top: 24px;
  1269. text-align: center;
  1270. .cancel-btn {
  1271. // width: 32%;
  1272. width: 170px;
  1273. height: 50px;
  1274. line-height: 50px;
  1275. background: #ffffff;
  1276. border: 1px solid #c3c7cb;
  1277. border-radius: 25px;
  1278. font-size: 16px;
  1279. margin-right: 20px;
  1280. font-weight: 400;
  1281. color: #1f2529;
  1282. }
  1283. .comfirm-btn {
  1284. // width: 52%;
  1285. width: 265px;
  1286. height: 50px;
  1287. line-height: 50px;
  1288. font-weight: 400;
  1289. font-size: 16px;
  1290. text-align: center;
  1291. background: #ce9f27;
  1292. border-radius: 25px;
  1293. color: #fff;
  1294. }
  1295. .comfirm-btn-diabled {
  1296. background: rgba(196, 196, 196, 0.2);
  1297. color: #1f2529;
  1298. }
  1299. }
  1300. </style>