123

src/pages/clockInPage/components/Timeline.vue

@@ -2,14 +2,22 @@
   <div class="info-container">
     <div class="title">时间轴</div>
     <template v-for="(item, index) in data" :key="index">
-      <div :class="['item', { 'disabled': !item?.dkKsSj }]">
+      <div :class="['item', { disabled: !item?.dkKsSj }]">
         <div class="point"></div>
         <div class="info-right">
           <div class="name">{{ `第${item?.count}次打卡 开始` }}</div>
-          <div v-if="item?.dkKsSj" class="time">打卡时间：<text>{{ handleTime(item?.dkKsSj) }}</text></div>
+          <div v-if="item?.dkKsSj" class="time">
+            打卡时间：<text>{{ handleTime(item?.dkKsSj) }}</text>
+          </div>
 
           <div v-if="item?.imgUrlDkKsFj" class="image">
-            <van-image width="80px" height="95px" :src="item?.imgUrlDkKsFj" @click="onClickImg(item?.imgUrlDkKsFj)" style="flex: 1">
+            <van-image
+              width="80px"
+              height="90px"
+              :src="item?.imgUrlDkKsFj"
+              @click="onClickImg(item?.imgUrlDkKsFj)"
+              style="flex: 1"
+            >
               <template v-slot:loading>
                 <van-loading type="spinner" size="20" />
               </template>
@@ -23,14 +31,22 @@
         </div>
       </div>
 
-      <div :class="['item', { 'disabled': !item?.dkJsSj }]">
+      <div :class="['item', { disabled: !item?.dkJsSj }]">
         <div class="point"></div>
         <div class="info-right">
           <div class="name">{{ `第${item?.count}次打卡 离开` }}</div>
-          <div v-if="item?.dkJsSj" class="time">打卡时间：<text>{{ handleTime(item?.dkJsSj) }}</text></div>
+          <div v-if="item?.dkJsSj" class="time">
+            打卡时间：<text>{{ handleTime(item?.dkJsSj) }}</text>
+          </div>
 
           <div v-if="item?.imgUrlDkJsFj" class="image">
-            <van-image width="80px" height="95px" :src="item?.imgUrlDkJsFj" @click="onClickImg(item?.imgUrlDkJsFj)" style="flex: 1">
+            <van-image
+              width="80px"
+              height="95px"
+              :src="item?.imgUrlDkJsFj"
+              @click="onClickImg(item?.imgUrlDkJsFj)"
+              style="flex: 1"
+            >
               <template v-slot:loading>
                 <van-loading type="spinner" size="20" />
               </template>
@@ -53,9 +69,9 @@ import {ImagePreview} from "vant";
 const props = defineProps({
   data: {
     type: Array,
-    default: []
+    default: [],
-  }
+  },
-})
+});
 
 //预览图片
 function onClickImg(url) {
@@ -63,8 +79,8 @@ function onClickImg(url) {
 }
 
 const handleTime = (time) => {
-  if (time) return time?.split(' ')[1]
+  if (time) return time?.split(" ")[1];
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -84,15 +100,15 @@ const handleTime = (time) => {
     align-content: center;
     position: relative;
     height: auto;
-    border-left: 0.53vw dashed #1DB1FF;
+    border-left: 0.53vw dashed #1db1ff;
     max-height: 46.93vw;
-    padding-bottom: 8vw;
+    padding-bottom: 4vw;
 
     .point {
       position: absolute;
       width: 3.2vw;
       height: 3.2vw;
-      background: #1DB1FF;
+      background: #1db1ff;
       border-radius: 50%;
       flex-shrink: 0;
       left: -1.665vw;
@@ -111,7 +127,7 @@ const handleTime = (time) => {
       .image {
         margin-top: 2.13vw;
         width: 33.87vw;
-        height: 18.67vw;
+        // height: 18.67vw;
       }
 
       .time {
@@ -119,7 +135,7 @@ const handleTime = (time) => {
         font-size: 3.73vw;
 
         text {
-          color: #0386FB;
+          color: #0386fb;
         }
       }
 
@@ -127,7 +143,7 @@ const handleTime = (time) => {
         margin-top: 2.13vw;
         display: flex;
         align-items: center;
-        color: #75787F;
+        color: #75787f;
 
         div {
           font-size: 2.67vw;
@@ -141,10 +157,10 @@ const handleTime = (time) => {
   }
 
   .disabled {
-    border-left: 0.53vw dashed #EDEDED !important;
+    border-left: 0.53vw dashed #ededed !important;
 
     .point {
-      background: #EDEDED !important;
+      background: #ededed !important;
     }
   }
 }

src/pages/clockInPage/index.vue

@@ -184,10 +184,12 @@ const getChineseNumber = (num) => {
     return num.toString(); // 超过99返回阿拉伯数字
   }
 };
-
+// 切换tab
 const onChange = (value) => {
   active.value = value;
   nextStep.value = 0;
+  baseUrl.value = "";
+  fileId.value = "";
   getPatrolList(data?.query);
 };
 
@@ -462,7 +464,6 @@ onMounted(() => {
 <template>
   <div>
     <top-nav navTitle="打卡" :showLeft="true" />
-
     <div class="clockInWrapper">
       <van-tabs v-model:active="active" @click="onChange">
         <template v-for="(item, index) in data.patroObj?.bddList" :key="index">