处理巡逻打卡列表时间筛选 处理时间轴图片展示处理

src/components/SelectTime.vue

@@ -3,14 +3,14 @@
     <van-datetime-picker
       v-model="presentTime"
       type="date"
-      :title="timeType == 'start' ? '选择开始日期' : '选择结束日期'"
+      :title="title"
       @cancel="onCancel"
       @confirm="onTimeConfirm"
     ></van-datetime-picker>
   </van-dialog>
 </template>
 <script setup>
-import { ref, defineProps, onMounted, defineEmits, watch } from "vue";
+import {ref, defineProps, onMounted, defineEmits, watch, computed} from "vue";
 import { dateFormat } from "../utils/tools.js";
 const props = defineProps({
   timeType: String,
@@ -19,6 +19,15 @@ const emits = defineEmits(["update:time"]);
 const show = ref(true);
 const presentTime = ref(new Date()); //选择器默认时间
 
+const title = computed(() => {
+  if (props.timeType == 'start') {
+    return '选择开始日期'
+  } else if (props.timeType == 'end') {
+    return '选择结束日期'
+  } else {
+    return props.timeType
+  }
+})
 function onTimeConfirm(val) {
   emits("update:time", dateFormat("", val));
 }

src/components/SxPopup.vue

@@ -17,28 +17,30 @@
           </template>
         </div>
 
-        <div v-show="showTime" class="other_type_title" style="margin-left: 3vw">自定义时间</div>
+        <slot>
-        <div v-show="showTime" class="time_box">
+          <div v-show="showTime" class="other_type_title" style="margin-left: 3vw">自定义时间</div>
-          <van-field
+          <div v-show="showTime" class="time_box">
-            v-model="startTime"
+            <van-field
-            label-width="60px"
+                v-model="startTime"
-            placeholder="开始日期"
+                label-width="60px"
-            input-align="left"
+                placeholder="开始日期"
-            right-icon="arrow-down"
+                input-align="left"
-            readonly
+                right-icon="arrow-down"
-            @click.stop="onClickTime('start')"
+                readonly
-          ></van-field>
+                @click.stop="onClickTime('start')"
-          <div class="relevance">至</div>
+            ></van-field>
-          <van-field
+            <div class="relevance">至</div>
-            v-model="endTime"
+            <van-field
-            label-width="60px"
+                v-model="endTime"
-            input-align="left"
+                label-width="60px"
-            right-icon="arrow-down"
+                input-align="left"
-            placeholder="结束日期"
+                right-icon="arrow-down"
-            @click.stop="onClickTime('end')"
+                placeholder="结束日期"
-            readonly
+                @click.stop="onClickTime('end')"
-          ></van-field>
+                readonly
-        </div>
+            ></van-field>
+          </div>
+        </slot>
         <div class="but_box">
           <van-button round block type="primary" size="small" @click.stop="onConfirm" style="margin: 0 3vw 0 0vw">确定</van-button>
           <van-button round block type="warning" size="small" @click.stop="onReset" style="margin: 0 0 0 3vw">重置 </van-button>
@@ -175,10 +177,10 @@ function onHide() {
 }
 //确认选中数据
 function onConfirm() {
-  const list = JSON.parse(JSON.stringify(props.list));
+  const list = props?.list ? JSON.parse(JSON.stringify(props?.list)) : [];
   let array = [];
   //筛选出按时间的筛选条件
-  for (let i = 0; i < list.length; i++) {
+  for (let i = 0; i < list?.length; i++) {
     if (list[i].title != "按时间") {
       array.push(list[i]);
     }
@@ -197,8 +199,8 @@ function onConfirm() {
 }
 //重置选项
 function onReset() {
-  props.list.forEach((item) => {
+  props.list?.forEach((item) => {
-    item.array.forEach((_item) => {
+    item.array?.forEach((_item) => {
       _item.isCheck = false;
     });
   });

src/pages/clockInPage/components/Timeline.vue

@@ -9,7 +9,7 @@
           <div v-if="item?.dkKsSj" class="time">打卡时间：<text>{{ handleTime(item?.dkKsSj) }}</text></div>
 
           <div v-if="item?.imgUrlDkKsFj" class="image">
-            <van-image width="80px" :src="item?.imgUrlDkKsFj" @click="onClickImg(item?.imgUrlDkKsFj)" style="flex: 1">
+            <van-image width="80px" height="95px" :src="item?.imgUrlDkKsFj" @click="onClickImg(item?.imgUrlDkKsFj)" style="flex: 1">
               <template v-slot:loading>
                 <van-loading type="spinner" size="20" />
               </template>
@@ -30,7 +30,7 @@
           <div v-if="item?.dkJsSj" class="time">打卡时间：<text>{{ handleTime(item?.dkJsSj) }}</text></div>
 
           <div v-if="item?.imgUrlDkJsFj" class="image">
-            <van-image width="80px" :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>

src/pages/clockInPage/index.vue

@@ -22,7 +22,7 @@ const baseUrl = ref("")
 const fileId = ref("")
 
 
-const startTime = ref("2025-09-08 15:29:00");
+const startTime = ref("2025-09-18 18:15:00");
 
 const useCountdownFromTime = (minutes = 10) => {
   const timeLeft = ref(0); // 剩余毫秒数
@@ -162,13 +162,21 @@ const photoFn = () => {
   }
 }
 
-const count = (item) => {
+// 支持更大数字的转换
-  if (!item || !item.dkSx) return undefined;
+const getChineseNumber = (num) => {
+  const numbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
 
-  const numbers = ['一', '二', '三', '四'];
+  if (num <= 10) {
-  const index = item.dkSx - 1; // 假设 dkSx 是从1开始的数字
+    return numbers[num - 1];
-
+  } else if (num <= 19) {
-  return numbers[index];
+    return `十${numbers[num - 11] || ''}`;
+  } else if (num <= 99) {
+    const tens = Math.floor(num / 10);
+    const units = num % 10;
+    return `${numbers[tens - 1]}十${units > 0 ? numbers[units - 1] : ''}`;
+  } else {
+    return num.toString(); // 超过99返回阿拉伯数字
+  }
 };
 
 const onChange = (value) => {
@@ -249,14 +257,16 @@ const getData = async () => {
       });
 
       // 设置数据
-      data.info = res.map(item => ({
+      data.info = res.map((item, index) => ({
         ...item,
-        count: count(item),
+        count: getChineseNumber(index + 1),
         imgUrlDkJsFj: item?.dkJsFj ? imageMap.get(item.dkJsFj) : null,
         imgUrlDkKsFj: item?.dkKsFj ? imageMap.get(item.dkKsFj) : null,
       }));
 
+      // 打卡结束经纬度
       const dkJs = res?.map(i => ({ jd: i?.dkJsJd, wd: i?.dkJsWd }))
+      // 打卡开始经纬度
       const dkKs = res?.map(i => ({ jd: i?.dkKsJd, wd: i?.dkKsWd }))
 
       // 删除标注
@@ -287,7 +297,7 @@ const getData = async () => {
       //地图撒点然后移动
       emitter.emit("addPointArea", {
         coords: [{ jd, wd }],
-        icon: require("../../assets/lz/dw.png"),
+        icon: require("../../assets/lz/peoplePolice.png"),
         flag: "checkPoint",
       });
     }

src/pages/collectPage/index.vue

@@ -37,6 +37,7 @@ const onRefresh = () => {
 }
 
 const getData = async () => {
+  loading.value = true;
   try {
     const { total, ...ret }  = pageData
     const res = await getSelectPage({ ...ret, bddMc: searchValue.value })

src/pages/patrolList/index.vue

@@ -6,7 +6,11 @@ import PatrolWrapper from "@/pages/patrolList/copmonents/patrolWrapper.vue";
 import {fetchPatrolList} from "@/api/patrolList";
 import {getDictListByCode} from "@/api/common";
 import router from "@/router";
+import SxPopup from "@/components/SxPopup.vue";
+import SelectTime from "@/components/SelectTime.vue";
 
+const showPopup = ref(false);
+const timeShow = ref(false);
 const finished = ref(false);
 const loading = ref(false);
 const loadingRefresh = ref(false);
@@ -19,7 +23,9 @@ const pageData = reactive({
 })
 
 const data = reactive({
-  list: []
+  list: [],
+  dictList: [],
+  startTime: ''
 })
 
 const onSearch = () => {
@@ -79,19 +85,20 @@ const parseAndJoinLx = (jsonString, type = 'lx') => {
 };
 
 const getData = async () => {
-
   const { total, ...ret }  = pageData
+  loading.value = true;
   try {
-    const res = await fetchPatrolList({ ...ret, fgMc: searchValue.value })
+    const res = await fetchPatrolList({ ...ret, fgMc: searchValue.value, rwRq: data.startTime })
     if (res?.records.length > 0) {
       data.list = data.list.concat(res?.records)?.map((item) => ({
         ...item,
-        fgJqtjLx: parseAndJoinLx(item?.fgJqtjLx, 'lx')
+        fgJqtjLx: parseAndJoinLx(item?.fgJqtjLx, 'lx'),
+        fgYjdjLabel: data.dictList?.find(i => i.dm === item.fgYjdj)?.zdmc || item.fgYjdj
       })) || []
+
       pageData.total = res?.total
       loading.value = false;
 
-      await getDictList()
     }
     loadingRefresh.value = false;
 
@@ -103,15 +110,36 @@ const getData = async () => {
 
 const getDictList = async () => {
   const res = await getDictListByCode({ dictCode: 'D_ZDXL_FGXLRW_YJDJ' })
-
+  if (res && res?.itemList?.length > 0) {
-  data.list = (data.list || []).map(item => ({
+    data.dictList = res?.itemList
-    ...item,
+  }
-    fgYjdjLabel: (res?.itemList || []).find(i => i.dm === item.fgYjdj)?.zdmc || item.fgYjdj
-  }));
 }
 
-onMounted(() => {
+const onSelectTime = (val) => {
+  data.startTime = val;
+  timeShow.value = false
+}
+
+const onClickTime = () => {
+  timeShow.value = true;
+}
+
+const onConfirm = () => {
+  pageData.pageCurrent = 1;
+  data.list = []
   getData()
+  showPopup.value = false;
+}
+
+const handleReset = () => {
+  data.startTime = ""
+  onConfirm()
+}
+
+
+onMounted(async () => {
+  await getDictList()
+  await getData()
 })
 </script>
 
@@ -122,13 +150,32 @@ onMounted(() => {
     <van-sticky>
       <div class="header">
         <search
+          :isSx="true"
           placeholder="请输入方格名称进行查询"
           v-model="searchValue"
+          @update:sx="showPopup = !showPopup"
           @update:modelValue="onSearch"
         />
       </div>
     </van-sticky>
 
+    <sx-popup :showPopup="showPopup" :p_top="110" @update:close="showPopup = false"
+              @update:onConfirm="onConfirm" @reset="handleReset">
+      <div class="time_box">
+        <van-field
+          v-model="data.startTime"
+          label-width="60px"
+          placeholder="请选择时间"
+          input-align="left"
+          right-icon="arrow-down"
+          readonly
+          @click.stop="onClickTime"
+        />
+      </div>
+    </sx-popup>
+
+    <select-time v-if="timeShow" time-type="选择任务日期" @update:time="onSelectTime" @update:cancelTime="timeShow = false" />
+
     <div class="content">
       <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
         <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" offset="1" :immediate-check="false">
@@ -142,6 +189,10 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+.time_box {
+  padding: 0 3vw 3vw;
+}
+
 .header {
   margin-top: 13vw;
 }