WorkConfig.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633
  1. <template>
  2. <div class="scene-config">
  3. <!--开放办公区-->
  4. <div class="time-box" :class="timerText.classColor">
  5. <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" />
  6. <div class="time-text">
  7. <span>{{ timerText.text }}</span>
  8. <span>{{ timerText.timer }}</span>
  9. </div>
  10. <div
  11. class="time-btn"
  12. :class="timerText.showDel ? 'time-btn-small' : ''"
  13. @click="triggerWork"
  14. >
  15. <span> {{ timerText.btnText }}</span>
  16. </div>
  17. </div>
  18. <div class="time-del" v-if="timerText.showDel" @click="myLeaving">
  19. <img :src="parseImgUrl('page-officehome', 'goOffWork.svg')" alt="" />
  20. <div class="del-text">
  21. <span>我要</span>
  22. <span>离开</span>
  23. </div>
  24. </div>
  25. </div>
  26. <!--加班点击我要离开触发-->
  27. <leave-dailog
  28. :isShowLeaveDailog="isShowLeaveDailog"
  29. v-if="isShowLeaveDailog"
  30. @closeDailog="closeLeavDailog"
  31. >
  32. </leave-dailog>
  33. </template>
  34. <script lang="ts">
  35. import {
  36. defineComponent,
  37. reactive,
  38. toRefs,
  39. onBeforeMount,
  40. onMounted,
  41. ref,
  42. watch,
  43. getCurrentInstance,
  44. } from "vue";
  45. import { useRouter } from "vue-router";
  46. import {
  47. formatDate,
  48. formatDateStr,
  49. formateTimeContinuous,
  50. formatTimerStr,
  51. getRelNowTime,
  52. getWeekDate,
  53. parseImgUrl,
  54. } from "@/utils";
  55. import { UserActionTypes } from "@/store/modules/user/action-types";
  56. import { useStore } from "@/store";
  57. import { saveBatchCustomScene } from "@/apis/envmonitor";
  58. // import { Dialog } from "vant";
  59. import LeaveDailog from "@/views/envmonitor/components/workOvertime/LeaveDailog.vue";
  60. export default defineComponent({
  61. props: {
  62. scenarioArr: {
  63. type: Array,
  64. default: () => [],
  65. },
  66. workkArr: {
  67. type: Array,
  68. default: () => [],
  69. },
  70. },
  71. components: {
  72. LeaveDailog,
  73. },
  74. setup(props, contx) {
  75. const proxyGlobal: any = getCurrentInstance();
  76. let router: any = useRouter();
  77. let timerText: any = {
  78. text: "",
  79. timer: "", // 工作时间
  80. btnText: "",
  81. showDel: false, // 是否展示我要离开按钮
  82. classColor: "grey",
  83. };
  84. let text: any = "";
  85. const store = useStore();
  86. const delTimeArr: any = [];
  87. let customSceneList: any = [];
  88. let workkArr: any = [];
  89. const proxyData = reactive({
  90. parseImgUrl: parseImgUrl,
  91. leaveBtnFlag: false,
  92. scenarioArr: props.scenarioArr,
  93. workkArr: props.workkArr,
  94. forcedOverTimeFlag: false, // 强制加班标记 false:不需要强制加班
  95. onSubmit(values: any) {
  96. router.push({ path: "/choice-project" });
  97. },
  98. // 触发加班按钮
  99. triggerWork() {
  100. contx.emit("triggerWork");
  101. },
  102. timerText: timerText,
  103. text: text,
  104. // 处理时间和第二天和未来连续的问题
  105. formateTimeContinuous(
  106. index: any = 1,
  107. startTime: any,
  108. endTime: any,
  109. type: any = 1
  110. ) {
  111. let data: any = proxyData.workkArr;
  112. return formateTimeContinuous(index, startTime, endTime, type, data,proxyData);
  113. },
  114. // 判断当前时间在不在加班时间里面
  115. beforeWorkTime(data: any, nowTime: any) {
  116. let flag: any = true; // 是否在所有加班时间之前
  117. for (let i = 0; i < data.length; i++) {
  118. if (data[i].startTime < nowTime) {
  119. flag = false;
  120. }
  121. }
  122. return flag;
  123. },
  124. // 当前时间是否在所有加班时间之后
  125. afterWorkTime(data: any, nowTime: any) {
  126. let flag: any = true; // 是否在所有加班时间之前
  127. for (let i = 0; i < data.length; i++) {
  128. if (data[i].endTime > nowTime) {
  129. flag = false;
  130. }
  131. }
  132. return flag;
  133. },
  134. // 查询时间段的范围
  135. checkWorkTime(data: any, nowTime: any) {
  136. let obj: any = {
  137. type: 0, // type=1 当前时间在所有加班时间之前 type=2 当前时间在所有加班时间后 type=3 当前时间在某段加班时间 type=4 当前时间在加班之外,在某一段中间
  138. startTime: 0,
  139. endTime: 0,
  140. };
  141. if (proxyData.beforeWorkTime(data, nowTime)) {
  142. obj.type = 1;
  143. } else if (proxyData.afterWorkTime(data, nowTime)) {
  144. obj.type = 2;
  145. } else {
  146. let flag = true;
  147. for (let i = 0; i < data.length; i++) {
  148. if (nowTime >= data[i].startTime && nowTime <= data[i].endTime) {
  149. obj.startTime = data[i].startTime;
  150. obj.endTime = data[i].endTime;
  151. obj.type = 3;
  152. flag = false;
  153. break;
  154. }
  155. }
  156. if (flag) {
  157. obj.type = 4;
  158. }
  159. }
  160. return obj;
  161. },
  162. // 格式化日期
  163. delTimeArr: delTimeArr,
  164. customSceneList: customSceneList, // 当前日期的加班
  165. formateWorkTime() {
  166. // debugger;
  167. let data: any = proxyData.workkArr;
  168. let nowDate: any = formatDate("YYYY-MM-DD");
  169. for (let i = 0; i < data.length; i++) {
  170. let date: any = formatDateStr(data[i].date);
  171. let cusStartTime: any = data[i].cusStartTime;
  172. let cusEndTime: any = data[i].cusEndTime;
  173. let customSceneList: any = data[i]?.customSceneList ?? [];
  174. let nowTime: any = getRelNowTime();
  175. let week: any = getWeekDate(new Date(date).getDay());
  176. if (date === nowDate) {
  177. // isActive = true;
  178. week = "今天";
  179. }
  180. // console.log("nowTime===" + nowTime);
  181. if (date === nowDate) {
  182. proxyData.customSceneList = customSceneList;
  183. // debugger
  184. // 1.当天没有服务定制时间和加班时间
  185. /**a.未来有服务定制和加班**/
  186. // 2.当天有服务定制时间无加班时间
  187. // 当天在服务定制之内+加班+和未来的时间连续
  188. // a.在服务定制之内
  189. // b.已过了服务定制和1相同处理
  190. // 3.当天有服务定制和加班时间
  191. // a.在服务定制之内,并和加班时间不连着
  192. // b.在服务定制之内,并和加班连续
  193. // c.在加班时间之内,并和后面加班时间连续
  194. // d.在加班时间之内,并且和后面加班不连续
  195. // e.不在服务定制之内,也不在加班时间内,但是当天和未来都有预约时间
  196. /**f.不在服务定制之内,也不在加班时间内,但是当天没有预约时间,未来有预约加班 */
  197. let startTime: any = "";
  198. let endTime: any = "";
  199. if ((!cusStartTime || !cusEndTime) && !customSceneList.length) {
  200. proxyData.timerText.text = "请选择工作时间段";
  201. proxyData.timerText.timer = "将自动开启办公服务";
  202. proxyData.timerText.classColor = "grey";
  203. proxyData.timerText.btnText = "预约时间";
  204. proxyData.timerText.showDel = false;
  205. proxyData.forcedOverTimeFlag = true;
  206. } else if (cusStartTime && cusEndTime && !customSceneList.length) {
  207. if (nowTime >= cusStartTime && nowTime <= cusEndTime) {
  208. proxyData.timerText.text = "工作时间";
  209. proxyData.timerText.timer =
  210. formatTimerStr(cusStartTime) +
  211. "~" +
  212. formatTimerStr(cusEndTime);
  213. proxyData.timerText.classColor = "yellow";
  214. proxyData.timerText.btnText = "预约延时";
  215. proxyData.timerText.showDel = false;
  216. proxyData.forcedOverTimeFlag = false;
  217. } else {
  218. proxyData.timerText.text = "请选择工作时间段";
  219. proxyData.timerText.timer = "将自动开启办公服务";
  220. proxyData.timerText.classColor = "grey";
  221. proxyData.timerText.btnText = "预约时间";
  222. proxyData.timerText.showDel = false;
  223. proxyData.forcedOverTimeFlag = true;
  224. }
  225. } else {
  226. if (
  227. cusStartTime &&
  228. cusEndTime &&
  229. nowTime >= cusStartTime &&
  230. nowTime <= cusEndTime
  231. ) {
  232. // debugger
  233. startTime = cusStartTime;
  234. endTime = cusEndTime;
  235. customSceneList.map((item: any) => {
  236. if (endTime === item.startTime) {
  237. endTime = item.endTime;
  238. }
  239. });
  240. /**
  241. * 需要补加上和未来时间连续的问题
  242. */
  243. let obj: any = proxyData.formateTimeContinuous(
  244. 0,
  245. startTime,
  246. endTime,
  247. 1
  248. );
  249. console.log("工作时间=====");
  250. console.log(obj);
  251. proxyData.timerText.text = "工作时间";
  252. proxyData.timerText.timer =
  253. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  254. proxyData.timerText.classColor = "yellow";
  255. proxyData.timerText.btnText = "预约延时";
  256. proxyData.timerText.showDel = false;
  257. proxyData.forcedOverTimeFlag = false;
  258. } else {
  259. let obj: any = proxyData.checkWorkTime(
  260. customSceneList,
  261. nowTime
  262. );
  263. if (obj.type === 3) {
  264. startTime = obj.startTime;
  265. endTime = obj.endTime;
  266. customSceneList.map((item: any) => {
  267. let oldTimeStart: any = startTime;
  268. let oldTimeEnd: any = endTime;
  269. // debugger
  270. if (
  271. startTime === item.startTime &&
  272. endTime === item.endTime
  273. ) {
  274. // proxyData.delTimeArr.push(item);
  275. } // 点击我要离开的时候需要删除的数据
  276. if (oldTimeEnd === item.startTime) {
  277. endTime = item.endTime;
  278. // proxyData.delTimeArr.push(item);
  279. }
  280. });
  281. if (cusStartTime && cusEndTime && nowTime < cusStartTime) {
  282. // 在服务定制时间之前的时候需要处理连续时间的问题
  283. if (endTime === cusStartTime) {
  284. endTime = cusEndTime;
  285. }
  286. customSceneList.map((item: any) => {
  287. if (endTime === item.startTime) {
  288. endTime = item.endTime;
  289. }
  290. });
  291. }
  292. /**
  293. * 需要补加上和未来时间连续的问题
  294. */
  295. let btnObj: any = proxyData.formateTimeContinuous(
  296. 1,
  297. startTime,
  298. endTime,
  299. 1
  300. );
  301. console.log("预约加班的记录---");
  302. // debugger
  303. console.log(btnObj);
  304. proxyData.timerText.text = `工作时间`;
  305. proxyData.timerText.timer =
  306. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  307. if (btnObj && btnObj.text) {
  308. proxyData.timerText.text = `工作时间~${btnObj.text}`;
  309. proxyData.timerText.timer =
  310. formatTimerStr(btnObj.startTime) +
  311. "~" +
  312. formatTimerStr(btnObj.endTime);
  313. }
  314. proxyData.timerText.classColor = "yellow";
  315. proxyData.timerText.btnText = "预约延时";
  316. proxyData.timerText.showDel = true;
  317. proxyData.forcedOverTimeFlag = false;
  318. } else {
  319. customSceneList.map((item: any) => {
  320. if (nowTime < item.startTime) {
  321. startTime = item.startTime;
  322. endTime = item.endTime;
  323. if (item.startTime < startTime) {
  324. startTime = item.startTime;
  325. endTime = item.endTime;
  326. } else if (endTime === item.startTime) {
  327. endTime = item.endTime;
  328. }
  329. }
  330. });
  331. /**
  332. *需要补加上和未来时间连续的问题
  333. */
  334. if (startTime && endTime) {
  335. proxyData.timerText.text = "已预约~(今日)";
  336. proxyData.timerText.timer =
  337. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  338. proxyData.timerText.classColor = "grey";
  339. proxyData.timerText.btnText = "预约时间";
  340. proxyData.timerText.showDel = false;
  341. proxyData.forcedOverTimeFlag = true;
  342. } else {
  343. proxyData.timerText.text = "请选择工作时间段";
  344. proxyData.timerText.timer = "将自动开启办公服务";
  345. proxyData.timerText.classColor = "grey";
  346. proxyData.timerText.btnText = "预约时间";
  347. proxyData.timerText.showDel = false;
  348. proxyData.forcedOverTimeFlag = true;
  349. }
  350. }
  351. }
  352. }
  353. // debugger
  354. // 记录开灯标记
  355. contx.emit("setForceOverTimeFlag", proxyData.forcedOverTimeFlag);
  356. }
  357. }
  358. },
  359. // 时间拼接
  360. timeJoin(customSceneList: any, nowTime: any) {
  361. let startTime: any = 0;
  362. let endTime: any = 0;
  363. let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
  364. if (obj.type === 3) {
  365. startTime = obj.startTime;
  366. endTime = obj.endTime;
  367. customSceneList.map((item: any) => {
  368. let oldTimeStart: any = startTime;
  369. let oldTimeEnd: any = endTime;
  370. // debugger
  371. if (startTime === item.startTime && endTime === item.endTime) {
  372. // proxyData.delTimeArr.push(item);
  373. } // 点击我要离开的时候需要删除的数据
  374. if (oldTimeEnd === item.startTime) {
  375. endTime = item.endTime;
  376. // proxyData.delTimeArr.push(item);
  377. }
  378. });
  379. /**
  380. * 需要补加上和未来时间连续的问题
  381. */
  382. proxyData.timerText.text = "工作时间";
  383. proxyData.timerText.timer =
  384. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  385. proxyData.timerText.classColor = "yellow";
  386. proxyData.timerText.btnText = "预约延时";
  387. proxyData.timerText.showDel = true;
  388. proxyData.forcedOverTimeFlag = false;
  389. } else {
  390. customSceneList.map((item: any) => {
  391. if (nowTime < item.startTime) {
  392. let oldTimeStart: any = startTime;
  393. let oldTimeEnd: any = endTime;
  394. if (item.startTime < startTime) {
  395. startTime = item.startTime;
  396. endTime = item.endTime;
  397. } else if (endTime === item.startTime) {
  398. endTime = item.endTime;
  399. }
  400. }
  401. });
  402. /**
  403. *需要补加上和未来时间连续的问题
  404. */
  405. if (startTime && endTime) {
  406. proxyData.timerText.text = "已预约~(今日)";
  407. proxyData.timerText.timer =
  408. formatTimerStr(startTime) + "~" + formatTimerStr(endTime);
  409. proxyData.timerText.classColor = "grey";
  410. proxyData.timerText.btnText = "预约时间";
  411. proxyData.timerText.showDel = false;
  412. proxyData.forcedOverTimeFlag = true;
  413. } else {
  414. proxyData.timerText.text = "请选择工作时间段";
  415. proxyData.timerText.timer = "将自动开启办公服务";
  416. proxyData.timerText.classColor = "grey";
  417. proxyData.timerText.btnText = "预约时间";
  418. proxyData.timerText.showDel = false;
  419. proxyData.forcedOverTimeFlag = true;
  420. }
  421. }
  422. },
  423. // 格式化需要删除的数据
  424. formatDataDel() {
  425. proxyData.delTimeArr = [];
  426. let customSceneList: any = proxyData.customSceneList;
  427. let nowTime: any = getRelNowTime();
  428. let startTime: any = 0;
  429. let endTime: any = 0;
  430. let obj: any = proxyData.checkWorkTime(customSceneList, nowTime);
  431. if (obj.type === 3) {
  432. startTime = obj.startTime;
  433. endTime = obj.endTime;
  434. customSceneList.map((item: any) => {
  435. let oldTimeEnd: any = endTime;
  436. if (startTime === item.startTime && endTime === item.endTime) {
  437. item.type = 1;
  438. proxyData.delTimeArr.push(item);
  439. } // 点击我要离开的时候需要删除的数据
  440. if (oldTimeEnd === item.startTime) {
  441. endTime = item.endTime;
  442. item.type = 1;
  443. proxyData.delTimeArr.push(item);
  444. }
  445. });
  446. }
  447. },
  448. // 我要离开
  449. myLeaving() {
  450. proxyData.formatDataDel();
  451. console.log("删除了=====");
  452. console.log(proxyData.delTimeArr);
  453. proxyData.leaveBtnFlag = true;
  454. // 取消加班
  455. proxyData.saveBatchCustomScene();
  456. },
  457. // 取消加班记录
  458. saveBatchCustomScene() {
  459. // proxyGlobal.proxy.$loadingStart(0);
  460. proxyData.openLeavDailog();
  461. saveBatchCustomScene(proxyData.delTimeArr)
  462. .then((res) => {
  463. proxyData.leaveBtnFlag = false;
  464. console.log(res);
  465. // proxyGlobal.proxy.$loadinngEnd();
  466. })
  467. .catch(() => {
  468. proxyData.leaveBtnFlag = false;
  469. // proxyGlobal.proxy.$loadinngEnd();
  470. });
  471. },
  472. isShowLeaveDailog: false,
  473. openLeavDailog() {
  474. proxyData.isShowLeaveDailog = true;
  475. },
  476. closeLeavDailog() {
  477. proxyData.isShowLeaveDailog = false;
  478. },
  479. });
  480. watch(
  481. props,
  482. (newProps: any) => {
  483. proxyData.scenarioArr = newProps.scenarioArr;
  484. proxyData.workkArr = newProps.workkArr;
  485. if (proxyData.workkArr && proxyData.workkArr.length) {
  486. proxyData.formateWorkTime();
  487. }
  488. },
  489. {
  490. deep: true,
  491. immediate: true,
  492. }
  493. );
  494. onMounted(() => {
  495. // proxyData.formateWorkTime();
  496. });
  497. return {
  498. ...toRefs(proxyData),
  499. };
  500. },
  501. });
  502. </script>
  503. <style lang="scss" scoped>
  504. @import "~@/styles/comMedia.scss";
  505. .scene-config {
  506. display: flex;
  507. flex-wrap: wrap;
  508. justify-content: space-between;
  509. padding: 15px;
  510. width: 100%;
  511. height: 100%;
  512. background: #ffffff;
  513. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  514. border-radius: 25px;
  515. .grey {
  516. background: rgba(159, 183, 205, 0.15) !important;
  517. }
  518. .yellow {
  519. background: rgba(206, 159, 39, 0.4);
  520. }
  521. .time-box {
  522. position: relative;
  523. // width: 69%;
  524. flex: 2.4;
  525. height: 100%;
  526. line-height: 70px;
  527. background: rgba(206, 159, 39, 0.4);
  528. // opacity: 0.4;
  529. border-radius: 16px;
  530. img {
  531. display: inline-block;
  532. vertical-align: middle;
  533. width: 20px;
  534. height: 20px;
  535. margin-left: 10px;
  536. }
  537. .time-text {
  538. display: inline-block;
  539. vertical-align: middle;
  540. padding-left: 10px;
  541. span {
  542. display: block;
  543. &:nth-child(1) {
  544. font-family: "Montserrat";
  545. font-style: normal;
  546. font-weight: 500;
  547. font-size: 12px;
  548. line-height: 20px;
  549. color: #4d5262;
  550. }
  551. &:nth-child(2) {
  552. font-family: "Montserrat";
  553. padding-top: 5px;
  554. font-style: normal;
  555. font-weight: 500;
  556. font-size: 15px;
  557. line-height: 20px;
  558. color: #1f2429;
  559. }
  560. }
  561. }
  562. .time-btn {
  563. position: absolute;
  564. // padding-top: 9px;
  565. right: 4px;
  566. top: 50%;
  567. transform: translateY(-50%);
  568. display: inline-block;
  569. width: 98px;
  570. // width: 64px;
  571. height: 58px;
  572. line-height: 20px;
  573. background: #ffffff;
  574. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
  575. 0px 4px 10px rgba(0, 0, 0, 0.07);
  576. border-radius: 12px;
  577. span {
  578. position: absolute;
  579. padding: 0 4px;
  580. width: 100%;
  581. top: 50%;
  582. transform: translateY(-50%);
  583. display: block;
  584. font-size: 13px;
  585. // line-height: 16px;
  586. text-align: center;
  587. color: #000000;
  588. }
  589. }
  590. .time-btn-small {
  591. width: 45px;
  592. }
  593. }
  594. .time-del {
  595. // width: 27%;
  596. padding-top: 14px;
  597. flex: 1;
  598. margin-left: 10px;
  599. background: #f1f4f8;
  600. border-radius: 16px;
  601. text-align: center;
  602. img {
  603. display: inline-block;
  604. vertical-align: middle;
  605. width: 20px;
  606. height: 20px;
  607. // margin-left: 10px;
  608. }
  609. .del-text {
  610. display: inline-block;
  611. vertical-align: middle;
  612. padding-left: 10px;
  613. // padding-top: 9px;
  614. span {
  615. display: block;
  616. font-size: 13px;
  617. line-height: 20px;
  618. text-align: center;
  619. color: #000000;
  620. }
  621. }
  622. }
  623. }
  624. </style>
  625. <style lang="scss">
  626. </style>