WorkConfig.vue 22 KB

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