zy_oyj/jg_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新自动打卡

Browse Source
This commit is contained in:
Esacpe
2026-04-29 10:32:41 +08:00
parent 9b2181ee3b
commit 6d9499edc7
6 changed files with 138 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.vue
View File

@ -251,22 +251,6 @@ body {
padding: 20vw 0 4vw 0;
}
/* 首页头部banner和按钮 */
.leaderTop {
height: 45.33334vw;
background: url("./assets/images/new/banner.png") no-repeat;
background-size: 100% 100%;
position: absolute;
width: 100%;
top: -6vw;
margin-bottom: 7vw;
}
.isGq {
background: url("./assets/images/new/banner_gq.png") no-repeat;
background-size: 100%;
}
.welcome {
font-size: 4.26667vw;
// padding: 14.46667vw 4.73334vw 0 5.73334vw;

0
src/assets/lz/dw.png → src/assets/images/dw.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/new/banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB

BIN
src/assets/images/new/banner_gq.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 130 KiB

BIN
src/assets/lz/peoplePolice.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

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

@ -1,28 +1,78 @@
<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">
<van-tab :title="item.bddMc" />
</template>
</van-tabs>
<div class="clockInList">
<template v-for="(item, index) in data.info" :key="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" />
<div>开始</div>
<div v-if="item?.dkKsSj" class="time">{{ item?.dkKsSj?.split(" ")[1] }}已打卡</div>
</div>
<div class="dec">
<van-icon v-if="item?.dkJsSj" name="checked" color="#007DE9" />
<div>离开</div>
<div v-if="item?.dkJsSj" class="time">{{ item?.dkJsSj?.split(" ")[1] }}已打卡</div>
</div>
</div>
</template>
</div>
<div class="upload_box">
<div class="image_box" v-if="baseUrl">
<van-icon name="close" class="close_icon" @click="clearImage" color="#000" size="24px" />
<van-image :src="baseUrl" @click="onClickImg(baseUrl)" style="flex: 1">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
</div>
<div class="upload_icon_box" v-else>
<van-icon @click="photoFn" color="#1DB1FF" name="plus" />
<span>点击拍照</span>
</div>
<!-- <van-uploader v-model="clockList" :max-count="1" :after-read="afterRead" capture="camera"
:before-read="beforeRead" accept="image/*" /> -->
<div class="upload_tip"><span style="color: red">*</span>须拍摄实景图才可进行打卡</div>
</div>
<div class="clockWrapper">
<div @click="handleClick" v-if="!infoData?.dkJsSj || !infoData?.dkKsSj" class="circleWrapper" :class="{ disabled: (!isExpired && expirationTime) || infoData?.dkJsSj }" >
<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>
<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?.[nextStep]]" />
<map-wrapper />
</div>
</div>
</template>
<script setup>
import TopNav from "@/components/topNav.vue";
import {
onMounted,
reactive,
ref,
computed,
nextTick,
onUnmounted,
watch,
} from "vue";
import { onMounted, reactive, ref, computed, nextTick, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import Timeline from "@/pages/clockInPage/components/Timeline.vue";
import {
selectByBBdId,
fetchSelectByBddxlrwId,
fetchSelectListByBddxlrwId,
fetchTbZdxlFgdwBddxlrwJlClockIn,
} from "@/api/patrolList";
import { selectByBBdId, fetchSelectByBddxlrwId, 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);
const nextStep = ref(0);
@ -129,8 +179,7 @@ const infoData = computed(() => {
return data.info?.[nextStep.value];
});
const activeInfoData = computed(() => data.patroObj?.bddList?.[active.value]);
const { formattedTime, isExpired, expirationTime, start, stop } =
useCountdownFromTime();
const { formattedTime, isExpired, expirationTime, start, stop } = useCountdownFromTime();
// 删除打卡图片
const clearImage = () => {
baseUrl.value = "";
@ -183,20 +232,16 @@ const handleNext = (index) => {
function setimage_base64(pzid, base64) {
baseUrl.value = `data:image/jpeg;base64,${base64}`;
qcckPost({ base64: base64 }, "/mosty-base/minio/image/upload/base64").then(
(res) => {
fileId.value = res;
}
);
qcckPost({ base64: base64 }, "/mosty-base/minio/image/upload/base64").then((res) => {
fileId.value = res;
});
}
const imageCache = new Map();
const getImageUrl = async (fileId) => {
if (!fileId) return null;
// 检查缓存
if (imageCache.has(fileId)) {
return imageCache.get(fileId);
}
if (imageCache.has(fileId)) return imageCache.get(fileId);
try {
const res = await qcckGet({}, `/mosty-base/minio/file/download/${fileId}`);
if (res?.url) {
@ -214,79 +259,64 @@ const getImageUrl = async (fileId) => {
const getData = async () => {
try {
const res = await fetchSelectListByBddxlrwId({
bddxlrwId: activeInfoData.value.id || "",
const res = await fetchSelectListByBddxlrwId({ bddxlrwId: activeInfoData.value.id || "", });
let listArr = res || [];
// 获取所有唯一的图片ID
const uniqueImageIds = new Set();
listArr.forEach((item) => {
if (item?.dkJsFj) uniqueImageIds.add(item.dkJsFj);
if (item?.dkKsFj) uniqueImageIds.add(item.dkKsFj);
});
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 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();
imageEntries.forEach((entry) => {
if (entry.status === "fulfilled") {
imageMap.set(entry.value.id, entry.value.url);
// 批量获取图片URL
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();
imageEntries.forEach((entry) => {
if (entry.status === "fulfilled") imageMap.set(entry.value.id, entry.value.url);
});
// 设置数据
data.info = res.map((item, index) => ({
...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 }));
// 删除标注
emitter.emit("deletePointArea", "annotationDkKs");
//地图撒点然后移动
emitter.emit("addPointArea", {
coords: [...dkJs, ...dkKs],
icon: require("../../assets/images/11.png"),
flag: "annotationDkKs",
});
// 设置数据
data.info = listArr.map((item, index) => ({
...item,
count: getChineseNumber(index + 1),
imgUrlDkJsFj: item?.dkJsFj ? imageMap.get(item.dkJsFj) : null,
imgUrlDkKsFj: item?.dkKsFj ? imageMap.get(item.dkKsFj) : null,
}));
// 打卡结束经纬度
const dkJs = listArr.map((i) => ({ jd: i.dkJsJd, wd: i.dkJsWd }));
// 打卡开始经纬度
const dkKs = listArr.map((i) => ({ jd: i.dkKsJd, wd: i.dkKsWd }));
await nextTick(() => {
const firstItem = data.info[nextStep.value || 0];
if (firstItem?.dkKsSj) {
startTime.value = infoData?.value?.dkKsSj;
start(startTime.value, activeInfoData.value.dkjgsj);
} else {
start("");
}
});
}
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];
if (firstItem?.dkKsSj) {
startTime.value = infoData?.value?.dkKsSj;
start(startTime.value, activeInfoData.value.dkjgsj);
} else {
start("");
}
});
if (activeInfoData.value) {
const result = await fetchSelectByBddxlrwId(
activeInfoData?.value?.id || ""
);
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/peoplePolice.png"),
flag: "checkPoint",
});
let icon = require("../../assets/pointIcon/peoplePolice.png")
emitter.emit("addPointArea", { coords: [{ jd, wd }], icon:icon , flag: "checkPoint" });
}
}
} catch (error) {
@ -300,14 +330,8 @@ function getUserLocation(sfdw) {
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,
});
let icon = require("../../assets/images/dw.png")
emitter.emit("addPointArea", { coords: [{ jd: lng, wd: lat }], icon: icon, flag: "dw", sfdw: sfdw, sizeX: 30, sizeY: 35 });
} else {
hintToast("暂无坐标信息");
}
@ -323,22 +347,10 @@ const getPatrolList = async ({ id }) => {
// 生成方格
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 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",
});
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();
}
@ -350,17 +362,15 @@ const addTenMinutes = (timeString) => {
const date = new Date(timeString);
if (isNaN(date.getTime())) return "";
date.setMinutes(date.getMinutes() + 10);
return date
.toLocaleString("zh-CN", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
})
.replace(/\//g, "-");
return date.toLocaleString("zh-CN", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
}).replace(/\//g, "-");
};
// 判断是否超过10分钟
@ -382,29 +392,17 @@ const isTenMinutesPassed = (startTime) => {
// 打卡
const handleClick = async () => {
if (data.info.length == 0) {
hintToast("此方格没有必打卡点位！");
return;
}
if (data.info.length == 0) return hintToast("此方格没有必打卡点位！");
const { id } = data.info?.[nextStep.value];
if (!isTenMinutesPassed(infoData?.value.dkKsSj) && infoData?.value.dkKsSj) {
const newTime = addTenMinutes(infoData?.value.dkKsSj);
hintToast(`请于${newTime.split(" ")[1]}后打卡`);
return;
}
if (fileId.value === "") {
hintToast("请拍照再打卡");
return;
return hintToast(`请于${newTime.split(" ")[1]}后打卡`);
}
if (fileId.value === "") return hintToast("请拍照再打卡");
const { lng, lat } = getLocation();
try {
const res = await fetchTbZdxlFgdwBddxlrwJlClockIn({
id,
dkWd: lat,
dkJd: lng,
dkFj: fileId.value,
});
const res = await fetchTbZdxlFgdwBddxlrwJlClockIn({ id, dkWd: lat, dkJd: lng, dkFj: fileId.value });
if (res) {
hintToast(`打卡成功`);
baseUrl.value = ""; //打卡成功需要把图片删除掉
@ -428,78 +426,6 @@ onMounted(() => {
});
</script>
<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">
<van-tab :title="item.bddMc" />
</template>
</van-tabs>
<div class="clockInList">
<template v-for="(item, index) in data.info" :key="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" />
<div>开始</div>
<div v-if="item?.dkKsSj" class="time">
{{ item?.dkKsSj?.split(" ")[1] }}已打卡
</div>
</div>
<div class="dec">
<van-icon v-if="item?.dkJsSj" name="checked" color="#007DE9" />
<div>离开</div>
<div v-if="item?.dkJsSj" class="time">
{{ item?.dkJsSj?.split(" ")[1] }}已打卡
</div>
</div>
</div>
</template>
</div>
<div class="upload_box">
<div class="image_box" v-if="baseUrl">
<van-icon name="close" class="close_icon" @click="clearImage" color="#000" size="24px" />
<van-image :src="baseUrl" @click="onClickImg(baseUrl)" style="flex: 1">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
</div>
<div class="upload_icon_box" v-else>
<van-icon @click="photoFn" color="#1DB1FF" name="plus" />
<span>点击拍照</span>
</div>
<!-- <van-uploader v-model="clockList" :max-count="1" :after-read="afterRead" capture="camera"
:before-read="beforeRead" accept="image/*" /> -->
<div class="upload_tip">
<span style="color: red">*</span>须拍摄实景图才可进行打卡
</div>
</div>
<div class="clockWrapper">
<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>
<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?.[nextStep]]" />
<map-wrapper />
</div>
</div>
</template>
<style scoped lang="scss">
.clockInWrapper {