fix: 加班时间的逻辑处理

src/constant/key.js

@@ -6,12 +6,12 @@ class Keys {
     static projectId = 'projectId';
     static aseKey = 'vue3-typescript-admin-ase-key';
     static companyKey = '245e7060643811eb934c0237aedb39a6';
-    // static openid = '602ef709beb64a1f9a4b6af2196d0af7';
-    static openid = '9a1ecfbacb6b4f249bf2dd3ec7793ead';
+    static openid = '602ef709beb64a1f9a4b6af2196d0af7';
+    // static openid = '9a1ecfbacb6b4f249bf2dd3ec7793ead';
     static pubname = 'sagacareAndtenantslink';
     static userName = '陈珍';
     static userPhone = 15321277745;
-    static userId = '9a1ecfbacb6b4f249bf2dd3ec7793ead';
+    static userId = '602ef709beb64a1f9a4b6af2196d0af7';
 }
 export default Keys;
 //# sourceMappingURL=key.js.map

src/router/index.ts

@@ -137,16 +137,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     }
   },
   {
-    path: '/work-overtime',
-    component: () => import('@/views/envmonitor/workOvertime/index.vue'),
-    name: 'workOvertime',
-    meta: {
-      title: '加班',
-      color: '#f7f8fa',
-      hideHeader: true
-    }
-  },
-  {
     path: '/choice-project',
     component: () => import('@/views/choiceSpace/choiceProject.vue'),
     name: 'choiceProject',

src/store/modules/user/actions.ts

@@ -72,8 +72,8 @@ export const actions: ActionTree<UserState, RootState> & Actions = {
       const userInfo: any = {
         userName: '陈珍',
         userPhone: 15321277745,
-        // userId: '602ef709beb64a1f9a4b6af2196d0af7'
-        userId: '9a1ecfbacb6b4f249bf2dd3ec7793ead'
+        userId: '602ef709beb64a1f9a4b6af2196d0af7'
+        // userId: '9a1ecfbacb6b4f249bf2dd3ec7793ead'
         // userId: '1302990695845462811'
       }
       // setCookieUserInfo(JSON.stringify(userInfo))

src/utils/index.ts

@@ -495,6 +495,12 @@ export const getRelNowTime = function () {
   let date: any = new Date()
   let hours: any = date.getHours()
   let minute: any = date.getMinutes()
+  if (hours < 10) {
+    hours = "0" + hours
+  }
+  if (minute < 10) {
+    minute = "0" + minute
+  }
   return hours + "" + minute + "00"
 }
 

src/views/envmonitor/components/workOvertime/index.vue

@@ -9,7 +9,7 @@
         <div
           class="date-item"
           :class="item.isActive ? 'date-item-active' : ''"
-          @click.stop="checkDate(item)"
+          @click.stop="checkDate(item, index)"
           :key="'date' + index"
           v-for="(item, index) in dateArr"
         >
@@ -30,7 +30,7 @@
             </div>
             <div
               class="slider-box"
-              @click="checkSlider($event, index)"
+              @click="checkSlider(item, index)"
               :data-index="index"
             ></div>
           </div>
@@ -46,7 +46,9 @@
     </div>
     <div class="add-time-btn">
       <div class="cancel-btn">取消</div>
-      <div class="comfirm-btn" @click="addWorkTimer">提交申请</div>
+      <div class="comfirm-btn" 
+      :class="formBtn?'comfirm-btn-diabled':''"
+      @click="addWorkTimer">提交申请</div>
     </div>
   </div>
 </template>
@@ -70,12 +72,14 @@ import {
   formatDateStr,
   getDate,
   getNowTime,
+  getRelNowTime,
   getTimers,
   getWeekDate,
   parseImgUrl,
 } from "@/utils";
 import { myTime } from "@/model/workTimeData";
 import { propsToAttrMap } from "@vue/shared";
+import { isTemplateElement } from "@babel/types";
 
 export default defineComponent({
   components: {
@@ -86,6 +90,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    projectId: {
+      type: String,
+      default: () => "",
+    },
   },
   setup(props) {
     const screenInfo: any = {
@@ -97,15 +105,20 @@ export default defineComponent({
     let timerArr: any = getTimers();
     let nowTimerArr: any = [];
     let nowData: any = [];
+    let redUrl: any = `${parseImgUrl("ipdImages", "time-check.svg")}`;
+    let bgRed: any = `linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)), url(${redUrl})`;
     const proxyData = reactive({
       screenInfo: screenInfo,
+      projectId: props.projectId,
       workkArr: props.workkArr,
+      bgRed: bgRed,
       startIndex: 0,
       endIndex: 0,
       nowData: nowData,
       nowTimerArr: nowTimerArr,
       timerArr: timerArr,
       startLen: 0,
+      formBtn: false,
       setScreennWidth() {
         let addTimeEl: any = document.querySelector("#addTimeId");
         proxyData.screenInfo.screenWidth = addTimeEl.offsetWidth;
@@ -113,19 +126,33 @@ export default defineComponent({
       // 获取当前位置的坐标
       getNowPerstion(timerArr: any) {
         let nowIndex: any = getNowTime()[1];
+        let obj: any = {
+          nowIndex: nowIndex,
+          len: 4,
+        };
         let formatTimer: any = timerArr[nowIndex].formatTimer;
-        if (
-          formatTimer >= proxyData.nowData.cusStartTime &&
-          formatTimer <= proxyData.nowData.cusEndTime
-        ) {
+        let cusStartTime: any = proxyData.parseCusStartTime(
+          proxyData.nowData.cusStartTime
+        );
+        let cusEndTime: any = proxyData.parseCusEndTime(
+          proxyData.nowData.cusEndTime
+        );
+        if (formatTimer >= cusStartTime && formatTimer <= cusEndTime) {
           //在服务定制时间之间
           timerArr.map((item: any, index: any) => {
-            if (item.formatTimer === proxyData.nowData.cusEndTime) {
-              nowIndex = index;
+            if (item.formatTimer === cusEndTime) {
+              obj.nowIndex = index;
+            }
+          });
+        } else if (formatTimer < cusStartTime) {
+          timerArr.map((item: any, index: any) => {
+            if (item.formatTimer === cusStartTime) {
+              console.log("index===", index);
+              obj.len = index - nowIndex;
             }
           });
         }
-        return nowIndex;
+        return obj;
       },
       // 设置可选时间
       setOptionnalTime(timerArr: any) {
@@ -135,10 +162,11 @@ export default defineComponent({
           slidersWrapper.offsetWidth * timerArr.length +
           slidersWrapper.offsetWidth +
           "px";
-        let index: any = proxyData.getNowPerstion(timerArr);
+        let index: any = proxyData.getNowPerstion(timerArr).nowIndex;
+        let len: any = proxyData.getNowPerstion(timerArr).len;
         let sliderLeft: any = slidersWrapper.offsetWidth * index;
         sliderList.style.left = -sliderLeft + "px";
-        proxyData.setOptionnalPerstion(index, 4);
+        proxyData.setOptionnalPerstion(index, len);
         proxyData.setPastTime(getNowTime()[1]);
         // 已经被选择的时间
         proxyData.setCheckTimeStyle();
@@ -195,6 +223,17 @@ export default defineComponent({
         }
         return false;
       },
+      // 判断滑动的位置是否包含服务定制的位置(如果当前滑动的位置在服务定制处不让滑动)
+      checkPersionService() {
+        let flag: any = false;
+        for (let i = proxyData.startIndex; i <= proxyData.endIndex; i++) {
+          if (proxyData.nowTimerArr[i].isServiceTime) {
+            flag = true;
+            break;
+          }
+        }
+        proxyData.formBtn = flag;
+      },
       /**
        * 日历滑动
        */
@@ -234,9 +273,11 @@ export default defineComponent({
               sliderBtnWidth / sliderBoxEl.offsetWidth
             );
             sliderBtnEl.style.width = sliderBoxEl.offsetWidth * index + "px";
-            sliderBtnEl.style.background = `transparent`;
+            sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
             proxyData.setOptionnalPerstion(proxyData.startIndex, index);
             isMove = false;
+            // 判断按钮是否可以点击(如果选择的时候包含服务定制时间,则不可点击)
+            proxyData.checkPersionService();
           }
         });
         swiper(endBox, {
@@ -257,7 +298,7 @@ export default defineComponent({
                 sliderBtnEl.style.width = sliderBtnWidth - moveRealX + "px";
                 proxyData.cancelSliderBoxColor();
               }
-              let bg: any = parseImgUrl("workOvertime", "floorTile.svg");
+              let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
               sliderBtnEl.style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))`;
               if (
                 sliderBtnLeft + (sliderBtnWidth - moveRealX) - sliderBoxWidth <
@@ -327,6 +368,7 @@ export default defineComponent({
           },
         });
       },
+
       cancelSliderBoxColor() {
         let sliderBoxArr: any = document.querySelectorAll(".slider-box");
         for (let i = 0; i < sliderBoxArr.length; i++) {
@@ -355,6 +397,7 @@ export default defineComponent({
         sliderBtnEl.style.left = left + "px";
         sliderBtnEl.style.width =
           slidersWrapper.offsetWidth * len + endEnd.offsetWidth / 2 - 4 + "px";
+        sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
         let sliderBoxArr: any = document.querySelectorAll(".slider-box");
         let parseIndex: any = getNowTime()[1];
         for (let i = 0; i < sliderBoxArr.length; i++) {
@@ -362,7 +405,7 @@ export default defineComponent({
             sliderBoxArr[i].style.background = "transparent";
           }
         }
-        let bg: any = parseImgUrl("workOvertime", "floorTile.svg");
+        let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
         for (let i = 0; i < len; i++) {
           sliderBoxArr[
             index + i
@@ -392,7 +435,7 @@ export default defineComponent({
         let sliderBoxArr: any = document.querySelectorAll(".slider-box");
         for (let i = 0; i < timerArr.length; i++) {
           if (timerArr[i].isCheck) {
-            sliderBoxArr[i].style.background = `red`;
+            sliderBoxArr[i].style.background = proxyData.bgRed;
           }
         }
       },
@@ -462,7 +505,9 @@ export default defineComponent({
       /**
        * 选中当前模块
        */
-      checkSlider(e: any, index: any) {
+      checkSlider(item: any, index: any) {
+        // 按钮的状态
+        proxyData.formBtn = false;
         let nowIndex: any = getNowTime()[1];
         if (index < nowIndex) {
           // 过去的时间不可选择
@@ -471,7 +516,7 @@ export default defineComponent({
         }
         if (proxyData.nowData.cusStartTime && proxyData.nowData.cusEndTime) {
           let formatTimer: any = proxyData.nowTimerArr[index].formatTimer; //在服务定制时间之间
-          let cusStartTime: any = proxyData.parseCusEndTime(
+          let cusStartTime: any = proxyData.parseCusStartTime(
             proxyData.nowData.cusStartTime
           );
           let cusEndTime: any = proxyData.parseCusEndTime(
@@ -515,8 +560,12 @@ export default defineComponent({
           let date: any = formatDateStr(data[i].date);
           // let cusStartTime: any = formatDateStr(data[i].cusStartTime);
           // let cusEndTime: any = formatDateStr(data[i].cusEndTime);
-          let cusStartTime: any = data[i].cusStartTime;
-          let cusEndTime: any = data[i].cusEndTime;
+          // let cusStartTime: any = data[i].cusStartTime;
+          // let cusEndTime: any = data[i].cusEndTime;
+          let cusStartTime: any = proxyData.parseCusStartTime(
+            data[i].cusStartTime
+          );
+          let cusEndTime: any = proxyData.parseCusEndTime(data[i].cusEndTime);
           let isActive: Boolean = false;
           let week: any = getWeekDate(new Date(date).getDay());
           if (date === nowDate) {
@@ -558,9 +607,10 @@ export default defineComponent({
             date: date,
             isActive: isActive,
             oldDate: data[i].date,
-            cusStartTime: cusStartTime,
+            objectId: data[i].objectId,
+            cusStartTime: data[i].cusStartTime,
             customSceneList: customSceneList,
-            cusEndTime: cusEndTime,
+            cusEndTime: data[i].cusEndTime,
             day: getDate(new Date(date)),
             week: week,
             timerArr: timerArr,
@@ -568,24 +618,28 @@ export default defineComponent({
         }
         proxyData.dateArr.map((item: any, index: any) => {
           if (item.week === "今天") {
-            proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
-            proxyData.nowData = proxyData.dateArr[index];
+            // proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
+            // proxyData.nowData = proxyData.dateArr[index];
+            proxyData.checkDate(item, index);
+            return;
           }
         });
-        // dom元素宽高调整
-        nextTick(() => {
-          proxyData.setOptionnalTime(proxyData.nowTimerArr);
-          proxyData.changeEl();
-        });
       },
       /**
        * 切换日期
        */
-      checkDate(item: any) {
+      checkDate(item: any, index: any) {
         proxyData.dateArr.map((elItem: any) => {
           elItem.isActive = false;
         });
         item.isActive = true;
+        proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
+        proxyData.nowData = proxyData.dateArr[index];
+        // dom元素宽高调整
+        nextTick(() => {
+          proxyData.setOptionnalTime(proxyData.nowTimerArr);
+          proxyData.changeEl();
+        });
       },
       /**
        * dom的滚动功能设置
@@ -601,7 +655,6 @@ export default defineComponent({
         let timerArr: any = proxyData.nowData.timerArr;
         let startTime: any = timerArr[proxyData.startIndex].formatTimer;
         let endTime: any = timerArr[proxyData.endIndex].formatTimer;
-        let addTimerArr: any = [];
         let delTimerArr: any = [];
         // 加班时间拼接
         customSceneList.map((item: any, index: any) => {
@@ -620,7 +673,7 @@ export default defineComponent({
               startTime = startTime;
               endTime = item.endTime;
             }
-          } else if (startTime > item.startTime && startTime < item.endTime) {
+          } else if (startTime >= item.startTime && startTime < item.endTime) {
             if (endTime <= item.endTime) {
               let delObj: any = proxyData.formaTimeObj(
                 item,
@@ -658,33 +711,43 @@ export default defineComponent({
           }
         });
 
-        // 加班时间处理好后和服务定制时间做对比
-        let cusStartTime: any = proxyData.parseCusEndTime(
+        // 加班时间处理好后和服务定制时间做对比(处理时分秒的情况)
+        let cusStartTime: any = proxyData.parseCusStartTime(
           proxyData.nowData.cusStartTime
         );
         let cusEndTime: any = proxyData.parseCusEndTime(
           proxyData.nowData.cusEndTime
         );
-
-        if (
-          startTime < proxyData.nowData.cusStartTime &&
-          endTime < proxyData.nowData.cusStartTime
-        ) {
+        if (startTime < cusStartTime && endTime <= cusStartTime) {
           if (endTime === cusStartTime) {
             endTime = proxyData.nowData.cusStartTime;
           }
+        } else if (startTime >= cusEndTime) {
+          if (startTime === cusEndTime) {
+            startTime = proxyData.nowData.cusEndTime;
+          }
+        }
+        debugger
+        let relNowTime: any = getRelNowTime();
+        let type = "0";
+        if (relNowTime >= startTime && relNowTime <= endTime) {
+          type = "2";
         }
+
         let addObj: any = proxyData.formaTimeObj(
           customSceneList[0],
-          "0",
+          type,
           startTime,
           endTime
         );
+        delTimerArr.push(addObj);
+        let formTimeArr: any = delTimerArr;
+        return formTimeArr;
       },
       // 格式化加班单个数据
       formaTimeObj(item: any, type: any, startTime: any, endTime: any) {
         let obj: any = {
-          projectId: proxyData.nowData.projectId, //类型：String  必有字段  备注：项目id
+          projectId: proxyData.projectId, //类型：String  必有字段  备注：项目id
           objectId: proxyData.nowData.objectId, //类型：String  必有字段  备注：空间id
           sourceType: "sagacareAndtenantslink", //类型：String  必有字段  备注：sagacareAndtenantslink 来源
           startDate: proxyData.nowData.oldDate, //类型：String  必有字段  备注：//开始日期
@@ -704,24 +767,9 @@ export default defineComponent({
       },
       // 提交申请
       addWorkTimer() {
+        let formTimerArr: any = proxyData.formateTimer();
         console.log("提交申请-----");
-        proxyData.formateTimer();
-        let obj: any = {
-          //类型：Object  必有字段  备注：无
-          // id: "mock", //类型：String  必有字段  备注：取消加班时必传
-          projectId: proxyData.nowData.projectId, //类型：String  必有字段  备注：项目id
-          objectId: proxyData.nowData.objectId, //类型：String  必有字段  备注：空间id
-          sourceType: "sagacareAndtenantslink", //类型：String  必有字段  备注：sagacareAndtenantslink 来源
-          startDate: proxyData.nowData.oldDate, //类型：String  必有字段  备注：//开始日期
-          endDate: proxyData.nowData.oldDate, //类型：String  必有字段  备注：//结束日期
-          startTime: "mock", //类型：String  必有字段  备注：//开始时间
-          endTime: "mock", //类型：String  必有字段  备注：//结束时间
-          type: "mock", //类型：String  必有字段  备注：//0 预约加班，1 取消，2 加班(我来了)， 3 最后一个走
-          userId: "mock", //类型：String  必有字段  备注：//用户id
-          userPhone: "mock", //类型：String  必有字段  备注：//手机号
-          customSceneEqType: "ALL", //类型：String  必有字段  备注：//来源 AC 空调入口, SE 灯入口 ALL 加班入口
-          // userName: "mock", //类型：String  必有字段  备注：//名字
-        };
+        console.log(formTimerArr);
       },
     });
     nextTick(() => {
@@ -729,6 +777,7 @@ export default defineComponent({
     });
     watch(props, (newProps: any) => {
       proxyData.workkArr = newProps.workkArr;
+      proxyData.projectId = newProps.projectId;
       // proxyData.getWorkTimeList();
     });
     onMounted(() => {
@@ -828,8 +877,9 @@ export default defineComponent({
 
   .sliders-list {
     position: relative;
-    padding-top: 20px;
-    height: 120px;
+    // padding-top: 20px;
+    margin-top: 20px;
+    height: 135px;
     white-space: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
@@ -842,7 +892,7 @@ export default defineComponent({
       display: inline-block;
       box-sizing: border-box;
       width: 72px;
-      height: 125px;
+      height: 135px;
       //border-bottom: 1px solid #ECEFF4;
       &:nth-child(2n + 1) {
         border-left: 1px solid #eceff4;
@@ -860,7 +910,7 @@ export default defineComponent({
 
         .label {
           position: absolute;
-          height: 44px;
+          height: 34px;
           left: 0px;
           top: 0px;
           font-family: "PingFang SC";
@@ -878,6 +928,7 @@ export default defineComponent({
           width: 72px;
           height: 100px;
           left: -1px;
+          // top:25px;
           bottom: 0px;
           //background: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2));
         }
@@ -886,15 +937,15 @@ export default defineComponent({
 
     .slider-btn {
       position: absolute;
-      height: 72px;
+      height: 100px;
       //left: 40px;
-      top: 45px;
+      top: 35px;
 
       .start {
         position: absolute;
         width: 3px;
         top: 0;
-        height: 72px;
+        height: 100px;
         left: 0;
         //left: 176px;
         background: #04b49c;
@@ -904,7 +955,7 @@ export default defineComponent({
         position: absolute;
         top: 0;
         width: 20px;
-        height: 72px;
+        height: 100px;
         right: -3px;
         // z-index: 444;
         //left: 286px;
@@ -914,16 +965,16 @@ export default defineComponent({
           top: 0;
           left: 10px;
           width: 3px;
-          height: 72px;
+          height: 100px;
           background: #04b49c;
         }
 
         .end-radio {
-          width: 18px;
+          width: 22px;
           position: absolute;
-          top: 25px;
-          left: 2px;
-          height: 18px;
+          top: 37px;
+          left: -1px;
+          height: 22px;
           background: #ffffff;
           border-radius: 50%;
           box-shadow: 0px 1px 2px rgba(4, 38, 0, 0.2);
@@ -970,5 +1021,9 @@ export default defineComponent({
     border-radius: 25px;
     color: #fff;
   }
+  .comfirm-btn-diabled {
+    background: rgba(196, 196, 196, 0.2);
+    color: #1F2529;
+  }
 }
 </style>

src/views/envmonitor/index.vue

@@ -132,7 +132,9 @@
       class="popup-content"
       teleport="#app"
     >
-    <work-overtime v-if="isShowWork" :workkArr="workkArr"></work-overtime>
+    <work-overtime v-if="isShowWork" 
+    :projectId="projectId"
+    :workkArr="workkArr"></work-overtime>
     </van-popup>
   </div>
 </template>
@@ -1598,7 +1600,7 @@ export default defineComponent({
       queryCustomAndScence() {
         let params: any = {
           spaceId: proxyData.spaceInfo.spaceId,
-          userId:proxyData.userInfo.userId,
+          // userId:proxyData.userInfo.userId,
           // projectId:proxyData.userInfo.projectId
         };
         let str: any = setQueryConfig(params);