DY-JMXF/dy_app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打卡页面修改 增加地图功能处理

Browse Source
This commit is contained in:
maojiacai
2025-09-12 11:41:36 +08:00
parent e4767754d5
commit 95caa69c33
5 changed files with 186 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/clockInPage/components/Timeline.vue
View File

@ -1,15 +1,36 @@
<template>
<div class="info-container">
<div class="title">时间轴</div>
<template v-for="(item, index) in data" :key="index">
<div v-if="item?.dkKsSj" class="item">
<div :class="['item', { 'disabled': !item?.dkKsSj }]">
<div class="point"></div>
<div class="line" v-if="index + 1 != data.length"></div>
<div class="info-right">
<div class="name">{{ `第${item?.count}次打卡` }}</div>
<div class="time">打卡时间：<text>{{ item?.dkKsSj }}</text></div>
<div class="name">{{ `第${item?.count}次打卡 开始` }}</div>
<div v-if="item?.dkKsSj" class="time">打卡时间：<text>{{ handleTime(item?.dkKsSj) }}</text></div>
<div v-if="item?.imgUrl" class="image">
<van-image width="80px" :src="item?.imgUrl" @click="onClickImg(item?.imgUrl)" style="flex: 1">
<div v-if="item?.imgUrlDkKsFj" class="image">
<van-image width="80px" :src="item?.imgUrlDkKsFj" @click="onClickImg(item?.imgUrlDkKsFj)" style="flex: 1">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
</div>
<!-- <div class="address">-->
<!-- <van-icon name="location-o" color="#1DB1FF" />-->
<!-- <div class="name">四川省成都市</div>-->
<!-- </div>-->
</div>
</div>
<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?.imgUrlDkJsFj" class="image">
<van-image width="80px" :src="item?.imgUrlDkJsFj" @click="onClickImg(item?.imgUrlDkJsFj)" style="flex: 1">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
@ -40,6 +61,10 @@ const props = defineProps({
function onClickImg(url) {
ImagePreview([url]);
}
const handleTime = (time) => {
if (time) return time?.split(' ')[1]
}
</script>
<style lang="scss" scoped>
@ -47,6 +72,12 @@ function onClickImg(url) {
padding: 0 2.67vw;
margin-top: 4vw;
.title {
color: #707070;
font-size: 3.73vw;
margin-bottom: 4vw;
}
.item {
color: #666;
display: flex;
@ -55,7 +86,7 @@ function onClickImg(url) {
height: auto;
border-left: 0.53vw dashed #1DB1FF;
max-height: 46.93vw;
padding-bottom: 2.67vw;
padding-bottom: 8vw;
.point {
position: absolute;
@ -70,6 +101,7 @@ function onClickImg(url) {
.info-right {
margin-left: 5.33vw;
font-family: PingFang HK, PingFang HK;
margin-top: -1.33vw;
.name {
font-weight: 400;
font-size: 3.73vw;
@ -84,6 +116,7 @@ function onClickImg(url) {
.time {
margin-top: 2.13vw;
font-size: 3.73vw;
text {
color: #0386FB;
@ -106,5 +139,13 @@ function onClickImg(url) {
}
}
}
.disabled {
border-left: 0.53vw dashed #EDEDED !important;
.point {
background: #EDEDED !important;
}
}
}
</style>

17
src/pages/clockInPage/components/mapWrapper.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup>
import GdMap from "@/components/GdMap/index.vue"
</script>
<template>
<div class="mapWrapper">
<gd-map />
</div>
</template>
<style scoped lang="scss">
.mapWrapper {
margin-top: 4vw;
height: 40vh;
}
</style>

141
src/pages/clockInPage/index.vue
View File

@ -3,10 +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 {fetchSelectListByBddxlrwId, fetchTbZdxlFgdwBddxlrwJlClockIn} from "@/api/patrolList";
import {fetchPatrolList, fetchSelectListByBddxlrwId, fetchTbZdxlFgdwBddxlrwJlClockIn} from "@/api/patrolList";
import {getBase64, hintToast} from "@/utils/tools";
import {ImagePreview} from "vant";
import {qcckPost, qcckGet} from "@/api/qcckApi";
import MapWrapper from "@/pages/clockInPage/components/mapWrapper.vue";
import emitter from "@/utils/eventBus";
const route = useRoute();
const active = ref(0)
@ -123,15 +125,16 @@ const useCountdownFromTime = (minutes = 10) => {
};
const data = reactive({
tabsList: [],
patroObj: {},
info: [],
query: {}
})
const infoData = computed(() => {
return data.info?.[nextStep.value]
})
const activeInfoData = computed(() => data.tabsList?.[active.value])
const activeInfoData = computed(() => data.patroObj?.bddList?.[active.value])
const { formattedTime, isExpired, expirationTime, start, stop } = useCountdownFromTime(10);
@ -165,7 +168,7 @@ const count = (item) => {
const onChange = (value) => {
active.value = value;
getData(data.tabsList[value]?.id)
getPatrolList(data?.query)
}
const handleNext = (index) => {
@ -207,34 +210,73 @@ const getImageUrl = async (fileId) => {
}
};
const getData = async (bddxlrwId = '') => {
const getData = async () => {
try {
const res = await fetchSelectListByBddxlrwId({ bddxlrwId });
if (res) {
// 收集所有需要加载的图片ID
const imageIds = res.map(i => i?.dkJsFj).filter(Boolean);
const res = await fetchSelectListByBddxlrwId({ bddxlrwId: activeInfoData?.value?.id || '' });
if (res && res?.length > 0) {
// 获取所有唯一的图片ID
const uniqueImageIds = new Set();
res?.forEach(item => {
if (item?.dkJsFj) uniqueImageIds.add(item.dkJsFj);
if (item?.dkKsFj) uniqueImageIds.add(item.dkKsFj);
});
// 批量获取图片URL
const imagePromises = imageIds.map(id => getImageUrl(id));
const imageResults = await Promise.allSettled(imagePromises);
const imageEntries = await Promise.allSettled(
Array.from(uniqueImageIds).map(async (id) => {
try {
const url = await getImageUrl(id);
return { id, url };
} catch (error) {
return { id, url: null };
}
})
);
// 创建图片映射表
const imageMap = new Map();
imageIds.forEach((id, index) => {
const result = imageResults[index];
imageMap.set(id, result.status === 'fulfilled' ? result.value : null);
imageEntries.forEach(entry => {
if (entry.status === 'fulfilled') {
imageMap.set(entry.value.id, entry.value.url);
}
});
// 设置数据
data.info = res.map(i => ({
...i,
count: count(i),
imgUrl: imageMap.get(i?.dkJsFj) || null
data.info = res.map(item => ({
...item,
count: count(item),
imgUrlDkJsFj: item?.dkJsFj ? imageMap.get(item.dkJsFj) : null,
imgUrlDkKsFj: item?.dkKsFj ? imageMap.get(item.dkKsFj) : null,
}));
active.value = 1;
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
});
}
})
console.log('完整数据:', data.info);
active.value = 1;
await nextTick(() => {
const firstItem = data.info[nextStep.value || 0];
@ -251,6 +293,49 @@ const getData = async (bddxlrwId = '') => {
}
};
//获取当前位置信息
function getUserLocation(sfdw) {
let { lng, lat } = getLocation();
if (lng && lat) {
emitter.emit("deletePointArea", "dw");
//地图撒点然后移动
emitter.emit("addPointArea", {
coords: [{ jd: lng, wd: lat }],
icon: require("../../assets/lz/dw.png"),
flag: "dw",
sfdw: sfdw,
sizeX: 30,
sizeY: 35
});
} else {
hintToast("暂无坐标信息");
}
}
const getPatrolList = async ({ current, id }) => {
const res = await fetchPatrolList({ pageCurrent: current, pageSize: 10 })
if (res?.records.length > 0) {
getUserLocation()
data.patroObj = res?.records?.find((item) => item.id === id) || {};
// 删除方格
emitter.emit("deletePointArea", "zdxl_fzyc")
// 生成方格
const { x1, y1, x2, y2, fgId, zxX, zxY, fgMc } = data.patroObj
const centerPoint = [zxX, zxY]
const position = [[Number(x1),Number(y1)],[Number(x2),Number(y2)]]
const text = fgMc
const obj = [{ position: position, text, id: fgId, userData: activeInfoData?.value }]
emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: obj, type:'rectangle', flag:'zdxl_fzyc', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
emitter.emit("setMapCenter", { location: centerPoint, zoomLevel: 12 });
await getData()
}
}
// 简单的时间加法函数
const addTenMinutes = (timeString) => {
if (!timeString) return '';
@ -317,7 +402,7 @@ const handleClick = async () => {
if (res) {
hintToast(`打卡成功`)
await getData(data.tabsList?.[0]?.id)
await getData()
start();
}
} catch (error) {
@ -328,12 +413,11 @@ const handleClick = async () => {
}
onMounted(() => {
if (route.query.item) {
data.tabsList = JSON.parse(route.query.item)
if (route?.query) {
data.query = route?.query;
getPatrolList(route?.query)
}
getData(data.tabsList?.[0]?.id)
window.setimagebase64 = setimage_base64;
})
</script>
@ -344,7 +428,7 @@ onMounted(() => {
<div class="clockInWrapper">
<van-tabs v-model:active="active" :active="active" @click="onChange">
<template v-for="(item, index) in data.tabsList" :key="index">
<template v-for="(item, index) in data.patroObj?.bddList" :key="index">
<van-tab :title="item.bddMc" />
</template>
</van-tabs>
@ -389,7 +473,7 @@ onMounted(() => {
<div class="circleWrapper" :class="{ 'disabled': !isExpired && expirationTime }" @click="handleClick">
<div v-if="!isExpired && expirationTime" class="time">{{ formattedTime }}后</div>
<div class="title">{{ !infoData?.dkKsSj ? `开始` : `离开` }}</div>
<div class="info">{{ `第${infoData?.count}次打卡` }}</div>
<div class="info">{{ `第${infoData?.count || ''}次打卡` }}</div>
</div>
<div class="circleWrapperTip">
<van-icon name="success" color="#FFFFFF" />
@ -397,7 +481,8 @@ onMounted(() => {
</div>
</div>
<timeline :data="data.info" />
<timeline v-if="data.info.length > 0" :data="data.info" />
<map-wrapper />
</div>
</div>
</template>