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

src/api/collectPage.js

@@ -33,3 +33,10 @@ export function getSelectList(params) {
         params
     })
 }
+
+// 获取方格详情
+export function fetchTbZdxlFgdwId(id) {
+    return service({
+        url: `${api}/tbZdxlFgdw/${id}`
+    })
+}

src/api/patrolList.js

@@ -26,3 +26,10 @@ export function fetchTbZdxlFgdwBddxlrwJlClockIn(data) {
         data
     })
 }
+
+// 必到点巡逻任务详情
+export function fetchSelectByBddxlrwId(bddxlrwId) {
+    return service({
+        url: `${api}/tbZdxlFgdwBdd/selectByBddxlrwId/${bddxlrwId}`,
+    })
+}

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 => {
+      const dkJs = res?.map(i => ({ jd: i?.dkJsJd, wd: i?.dkJsWd }))
-        if (i?.dkKsJd && i?.dkKsWd) {
+      const dkKs = res?.map(i => ({ jd: i?.dkKsJd, wd: 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
-          });
-        }
-      })
 
-      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 {

src/pages/collectPage/collectAndAdd.vue

@@ -4,7 +4,7 @@ import TopNav from "@/components/topNav.vue";
 import {onMounted, ref} from "vue";
 import CustomPopup from "@/pages/collectPage/copmonents/customPopup.vue";
 import GdMap from "@/components/GdMap/index.vue"
-import {addSaveData} from "@/api/collectPage";
+import {addSaveData, fetchTbZdxlFgdwId} from "@/api/collectPage";
 import {hintToast} from "@/utils/tools";
 import router from "@/router";
 import {useRoute} from "vue-router";
@@ -48,6 +48,33 @@ const handleVisible = () => {
   visible.value = true
 }
 
+// 查看获取详情
+const getFetchTbZdxlFgdwId = async (id) => {
+  const res = await fetchTbZdxlFgdwId(id)
+  if (res) {
+    emitter.emit("deletePointArea", "addfg")
+    const { x1 = "", y1 = "", x2 = "", y2 = "", id = "", zxX = "", zxY = "", mc = "" } = res
+    const centerPoint = [zxX, zxY]
+    const position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
+    const text = mc
+    const obj = [{ position: position, text, id, userData: res }]
+
+    emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'addfg', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
+    emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 14 });
+
+    emitter.emit("addPointArea", {
+      coords: [{ jd: formData.value?.jd, wd: formData.value?.wd }],
+      coordinates: [formData.value?.jd, formData.value?.wd],
+      icon: require("@/assets/lz/dw.png"),
+      sizeX: 30,
+      sizeY: 35
+    });
+
+    // 禁用地图
+    emitter.emit("setMapInteractions", !disabled.value)
+  }
+}
+
 onMounted(() => {
   if (route.query?.item) {
     // 查看详情禁用处理
@@ -57,8 +84,7 @@ onMounted(() => {
 
     navTitle.value = '必到点采集详情'
 
-    // 禁用地图
+    getFetchTbZdxlFgdwId(formData.value?.fgdwId)
-    emitter.emit("setMapInteractions", !disabled.value)
   } else {
     disabled.value = false
 

src/pages/collectPage/copmonents/listItemWrapper.vue

@@ -11,8 +11,8 @@ const props = defineProps({
 
 
 const handleTo = (item) => {
-  const { bddMc, bddDz, wd, jd, fgdwMc } = item
+  const { bddMc, bddDz, wd, jd, fgdwMc, fgdwId } = item
-  router.push({ path: "/collectAndAdd", query: { item: JSON.stringify({ bddMc, bddDz, wd, jd, mc: fgdwMc }) } });
+  router.push({ path: "/collectAndAdd", query: { item: JSON.stringify({ bddMc, bddDz, wd, jd, fgdwId, mc: fgdwMc }) } });
 }
 </script>