修改打卡界面逻辑、展示必到点位置处理

src/pages/clockInPage/index.vue

@@ -3,7 +3,12 @@ import TopNav from "@/components/topNav.vue";
 import {onMounted, reactive, ref, computed, nextTick, onUnmounted, watch} from "vue";
 import { useRoute } from "vue-router";
 import Timeline from "@/pages/clockInPage/components/Timeline.vue";
-import {fetchPatrolList, fetchSelectListByBddxlrwId, fetchTbZdxlFgdwBddxlrwJlClockIn} from "@/api/patrolList";
+import {
+  fetchPatrolList,
+  fetchSelectByBddxlrwId,
+  fetchSelectListByBddxlrwId,
+  fetchTbZdxlFgdwBddxlrwJlClockIn
+} from "@/api/patrolList";
 import {getBase64, hintToast} from "@/utils/tools";
 import {ImagePreview} from "vant";
 import {qcckPost, qcckGet} from "@/api/qcckApi";
@@ -168,6 +173,7 @@ const count = (item) => {
 
 const onChange = (value) => {
   active.value = value;
+  nextStep.value = 0
   getPatrolList(data?.query)
 }
 
@@ -250,33 +256,17 @@ const getData = async () => {
         imgUrlDkKsFj: item?.dkKsFj ? imageMap.get(item.dkKsFj) : null,
       }));
 
-      data.info?.forEach(i => {
-        if (i?.dkKsJd && i?.dkKsWd) {
-          // 删除标注
-          emitter.emit("deletePointArea", "dkKs");
-          //地图撒点然后移动
-          emitter.emit("addPointArea", {
-            coords: [{ jd: i?.dkKsJd, wd: i?.dkKsWd }],
-            icon: require("../../assets/images/11.png"),
-            flag: "dkKs",
-            sizeX: 30,
-            sizeY: 35
-          });
-        } else if (i?.dkJsJd && i?.dkJsWd) {
-          // 删除标注
-          emitter.emit("deletePointArea", "dkJs");
-          //地图撒点然后移动
-          emitter.emit("addPointArea", {
-            coords: [{ jd: i?.dkJsJd, wd: i?.dkJsWd }],
-            icon: require("../../assets/images/11.png"),
-            flag: "dkKs",
-            sizeX: 30,
-            sizeY: 35
-          });
-        }
-      })
+      const dkJs = res?.map(i => ({ jd: i?.dkJsJd, wd: i?.dkJsWd }))
+      const dkKs = res?.map(i => ({ jd: i?.dkKsJd, wd: i?.dkKsWd }))
 
-      active.value = 1;
+      // 删除标注
+      emitter.emit("deletePointArea", "annotationDkKs");
+      //地图撒点然后移动
+      emitter.emit("addPointArea", {
+        coords: [...dkJs, ...dkKs],
+        icon: require("../../assets/images/11.png"),
+        flag: "annotationDkKs",
+      });
 
       await nextTick(() => {
         const firstItem = data.info[nextStep.value || 0];
@@ -288,6 +278,20 @@ const getData = async () => {
         }
       });
     }
+
+    const result = await fetchSelectByBddxlrwId(activeInfoData?.value?.id || "")
+    if (result) {
+      const { jd, wd } = result
+      // 删除标注
+      emitter.emit("deletePointArea", "checkPoint");
+      //地图撒点然后移动
+      emitter.emit("addPointArea", {
+        coords: [{ jd, wd }],
+        icon: require("../../assets/lz/dw.png"),
+        flag: "checkPoint",
+      });
+    }
+
   } catch (error) {
     console.error(error);
   }
@@ -435,7 +439,7 @@ onMounted(() => {
 
       <div class="clockInList">
         <template v-for="(item, index) in data.info" :key="index">
-          <div class="clockInList_item" @click="handleNext(index)">
+          <div :class="['clockInList_item', { 'active': nextStep === index }]" @click="handleNext(index)">
             <div class="label">{{ `第${item?.count}次打卡` }}</div>
             <div class="dec">
               <van-icon v-if="item?.dkKsSj" name="checked" color="#007DE9" />
@@ -470,18 +474,22 @@ onMounted(() => {
       </div>
 
       <div class="clockWrapper">
-        <div class="circleWrapper" :class="{ 'disabled': !isExpired && expirationTime }" @click="handleClick">
+        <div v-if="!infoData?.dkJsSj || !infoData?.dkKsSj" class="circleWrapper" :class="{ 'disabled': !isExpired && expirationTime || infoData?.dkJsSj }" @click="handleClick">
           <div v-if="!isExpired && expirationTime" class="time">{{ formattedTime }}后</div>
           <div class="title">{{ !infoData?.dkKsSj ? `开始` : `离开` }}</div>
           <div class="info">{{ `第${infoData?.count || ''}次打卡` }}</div>
         </div>
+        <div v-else class="circleWrapper" :class="{ 'disabled': !isExpired && expirationTime || infoData?.dkJsSj }">
+          <div class="title">已结束</div>
+<!--          <div class="info">{{ `第${infoData?.count || ''}次打卡` }}</div>-->
+        </div>
         <div class="circleWrapperTip">
           <van-icon name="success" color="#FFFFFF" />
           <div>已进入考勤范围：{{ activeInfoData?.bddMc }}</div>
         </div>
       </div>
 
-      <timeline v-if="data.info.length > 0" :data="data.info" />
+      <timeline v-if="data.info.length > 0" :data="[data.info?.[nextStep]]" />
       <map-wrapper />
     </div>
   </div>
@@ -642,6 +650,10 @@ onMounted(() => {
         }
       }
     }
+
+    .active {
+      background: rgba(62, 110, 232, 0.2);
+    }
   }
 
   ::v-deep {