定位
This commit is contained in:
13684185576
54
src/App.vue
54
src/App.vue
@ -1,22 +1,31 @@
|
||||
|
||||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<Component :is="Component"></Component>
|
||||
<van-popup v-model:show="showAlert" closeable :close-on-click-overlay="false" close-icon-position="top-right"
|
||||
position="bottom" @close="closePopup">
|
||||
<van-popup
|
||||
v-model:show="showAlert"
|
||||
closeable
|
||||
:close-on-click-overlay="false"
|
||||
close-icon-position="top-right"
|
||||
position="bottom"
|
||||
@close="closePopup"
|
||||
>
|
||||
<div class="alert-content">
|
||||
<div class="alert-cnt">
|
||||
<van-icon name="warning-o" color="orange"></van-icon> {{ message }}
|
||||
</div>
|
||||
<div class="foot-btn">
|
||||
<van-button round block type="primary" @click="okUpdate"> 确定更新 </van-button>
|
||||
<van-button round block type="primary" @click="okUpdate">
|
||||
确定更新
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</router-view>
|
||||
</template>
|
||||
<GdMap />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "./components/GdMap/index.vue";
|
||||
import watermark from "./utils/watermark.js";
|
||||
import emitter from "./utils/eventBus.js";
|
||||
import { onMounted, onUnmounted, ref, watch, reactive } from "vue";
|
||||
@ -24,6 +33,7 @@ import { getMyTaskList, getMyTaskTotal } from "./api/rwzx.js";
|
||||
import { updateDate } from "./api/checkponit.js";
|
||||
import { getDistance, hintToast, timeValidate } from "./utils/tools";
|
||||
import { getAPPLocation } from "./api/spsApi";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi";
|
||||
import { useRoute } from "vue-router";
|
||||
import router from "./router/index.js";
|
||||
import store from "./store";
|
||||
@ -76,6 +86,10 @@ watch(
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getLocation(); //获取经纬度
|
||||
setInterval(() => {
|
||||
getLocation(); //获取经纬度
|
||||
}, 10000);
|
||||
//默认设置用户主题色
|
||||
if (!getStorage("themeSetting")) {
|
||||
setStorage("themeSetting", "light");
|
||||
@ -88,9 +102,31 @@ onMounted(() => {
|
||||
setAttribute(res); // 应用主题
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
const getLocation = () => {
|
||||
if ("geolocation" in navigator) {
|
||||
console.log(navigator.geolocation, "navigator.geolocation");
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
console.log(pos.coords, "pos");
|
||||
if (pos.coords) {
|
||||
var latitude = pos.coords.latitude;
|
||||
var longitude = pos.coords.longitude;
|
||||
qcckPost(
|
||||
{ jd: longitude, wd: latitude, bbid: "" },
|
||||
"/mosty-qwzx/tbQwXfbb/updateBbJzwz"
|
||||
).then((res) => {
|
||||
console.log(res, "res");
|
||||
});
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log(err, "err");
|
||||
}
|
||||
);
|
||||
} else {
|
||||
console.log("Geolocation is not supported by this browser.");
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭提示
|
||||
function closePopup() {
|
||||
@ -117,7 +153,7 @@ function _getTaskList() {
|
||||
pageSize: 10,
|
||||
pageCurrent: 1,
|
||||
};
|
||||
getMyTaskList(data).then((res) => { });
|
||||
getMyTaskList(data).then((res) => {});
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(bbTime.value);
|
||||
|
||||
@ -1,29 +1,34 @@
|
||||
<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,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import Timeline from "@/pages/clockInPage/components/Timeline.vue";
|
||||
import {
|
||||
fetchPatrolList,
|
||||
fetchSelectByBddxlrwId,
|
||||
fetchSelectListByBddxlrwId,
|
||||
fetchTbZdxlFgdwBddxlrwJlClockIn
|
||||
fetchTbZdxlFgdwBddxlrwJlClockIn,
|
||||
} from "@/api/patrolList";
|
||||
import {getBase64, hintToast} from "@/utils/tools";
|
||||
import {ImagePreview} from "vant";
|
||||
import {qcckPost, qcckGet} from "@/api/qcckApi";
|
||||
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)
|
||||
const baseUrl = ref("")
|
||||
const fileId = ref("")
|
||||
|
||||
|
||||
const active = ref(0);
|
||||
const nextStep = ref(0);
|
||||
const baseUrl = ref("");
|
||||
const fileId = ref("");
|
||||
const startTime = ref("2025-09-18 18:15:00");
|
||||
|
||||
const useCountdownFromTime = (minutes = 10) => {
|
||||
const timeLeft = ref(0); // 剩余毫秒数
|
||||
const timer = ref(null);
|
||||
@ -95,23 +100,25 @@ const useCountdownFromTime = (minutes = 10) => {
|
||||
|
||||
// 格式化时间显示
|
||||
const formattedTime = computed(() => {
|
||||
if (timeLeft.value <= 0) return '00:00';
|
||||
if (timeLeft.value <= 0) return "00:00";
|
||||
|
||||
const totalSeconds = Math.floor(timeLeft.value / 1000);
|
||||
const mins = Math.floor(totalSeconds / 60);
|
||||
const secs = totalSeconds % 60;
|
||||
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
return `${mins.toString().padStart(2, "0")}:${secs
|
||||
.toString()
|
||||
.padStart(2, "0")}`;
|
||||
});
|
||||
|
||||
// 过期时间显示
|
||||
const expirationTimeFormatted = computed(() => {
|
||||
if (!expirationTime.value) return '';
|
||||
return expirationTime.value.toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false
|
||||
if (!expirationTime.value) return "";
|
||||
return expirationTime.value.toLocaleTimeString("zh-CN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
hour12: false,
|
||||
});
|
||||
});
|
||||
|
||||
@ -125,55 +132,53 @@ const useCountdownFromTime = (minutes = 10) => {
|
||||
isRunning,
|
||||
isExpired,
|
||||
start,
|
||||
stop
|
||||
stop,
|
||||
};
|
||||
};
|
||||
|
||||
const data = reactive({
|
||||
patroObj: {},
|
||||
info: [],
|
||||
query: {}
|
||||
})
|
||||
query: {},
|
||||
});
|
||||
|
||||
const infoData = computed(() => {
|
||||
return data.info?.[nextStep.value]
|
||||
})
|
||||
|
||||
const activeInfoData = computed(() => data.patroObj?.bddList?.[active.value])
|
||||
|
||||
const { formattedTime, isExpired, expirationTime, start, stop } = useCountdownFromTime(10);
|
||||
|
||||
return data.info?.[nextStep.value];
|
||||
});
|
||||
const activeInfoData = computed(() => data.patroObj?.bddList?.[active.value]);
|
||||
const { formattedTime, isExpired, expirationTime, start, stop } =
|
||||
useCountdownFromTime(10);
|
||||
// 删除打卡图片
|
||||
const clearImage = () => {
|
||||
baseUrl.value = ""
|
||||
}
|
||||
baseUrl.value = "";
|
||||
};
|
||||
|
||||
// 浏览图片
|
||||
const onClickImg = (url) => {
|
||||
ImagePreview([url])
|
||||
}
|
||||
ImagePreview([url]);
|
||||
};
|
||||
|
||||
// 点击上传
|
||||
const photoFn = () => {
|
||||
try {
|
||||
bridge.pZ("photo");
|
||||
} catch (err) {
|
||||
console.log(err, 'err');
|
||||
console.log(err, "err");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 支持更大数字的转换
|
||||
const getChineseNumber = (num) => {
|
||||
const numbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
|
||||
const numbers = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
|
||||
|
||||
if (num <= 10) {
|
||||
return numbers[num - 1];
|
||||
} else if (num <= 19) {
|
||||
return `十${numbers[num - 11] || ''}`;
|
||||
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] : ''}`;
|
||||
return `${numbers[tens - 1]}十${units > 0 ? numbers[units - 1] : ""}`;
|
||||
} else {
|
||||
return num.toString(); // 超过99返回阿拉伯数字
|
||||
}
|
||||
@ -181,34 +186,34 @@ const getChineseNumber = (num) => {
|
||||
|
||||
const onChange = (value) => {
|
||||
active.value = value;
|
||||
nextStep.value = 0
|
||||
getPatrolList(data?.query)
|
||||
}
|
||||
nextStep.value = 0;
|
||||
getPatrolList(data?.query);
|
||||
};
|
||||
|
||||
const handleNext = (index) => {
|
||||
stop()
|
||||
stop();
|
||||
nextStep.value = index;
|
||||
start(infoData?.value?.dkKsSj);
|
||||
}
|
||||
};
|
||||
|
||||
function setimage_base64(pzid, base64) {
|
||||
console.log(base64, 'base64');
|
||||
console.log(base64, "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);
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await qcckGet({}, `/mosty-base/minio/file/download/${fileId}`);
|
||||
if (res?.url) {
|
||||
@ -219,39 +224,39 @@ const getImageUrl = async (fileId) => {
|
||||
}
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.warn('获取图片失败:', error);
|
||||
console.warn("获取图片失败:", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
const res = await fetchSelectListByBddxlrwId({ bddxlrwId: activeInfoData?.value?.id || '' });
|
||||
const res = await fetchSelectListByBddxlrwId({
|
||||
bddxlrwId: activeInfoData?.value?.id || "",
|
||||
});
|
||||
if (res && res?.length > 0) {
|
||||
|
||||
// 获取所有唯一的图片ID
|
||||
const uniqueImageIds = new Set();
|
||||
res?.forEach(item => {
|
||||
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 };
|
||||
}
|
||||
})
|
||||
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') {
|
||||
imageEntries.forEach((entry) => {
|
||||
if (entry.status === "fulfilled") {
|
||||
imageMap.set(entry.value.id, entry.value.url);
|
||||
}
|
||||
});
|
||||
@ -265,9 +270,9 @@ const getData = async () => {
|
||||
}));
|
||||
|
||||
// 打卡结束经纬度
|
||||
const dkJs = res?.map(i => ({ jd: i?.dkJsJd, wd: i?.dkJsWd }))
|
||||
const dkJs = res?.map((i) => ({ jd: i?.dkJsJd, wd: i?.dkJsWd }));
|
||||
// 打卡开始经纬度
|
||||
const dkKs = res?.map(i => ({ jd: i?.dkKsJd, wd: i?.dkKsWd }))
|
||||
const dkKs = res?.map((i) => ({ jd: i?.dkKsJd, wd: i?.dkKsWd }));
|
||||
|
||||
// 删除标注
|
||||
emitter.emit("deletePointArea", "annotationDkKs");
|
||||
@ -284,24 +289,26 @@ const getData = async () => {
|
||||
startTime.value = infoData?.value?.dkKsSj;
|
||||
start(startTime.value);
|
||||
} else {
|
||||
start('');
|
||||
start("");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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",
|
||||
});
|
||||
if (activeInfoData.value) {
|
||||
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",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
@ -319,7 +326,7 @@ function getUserLocation(sfdw) {
|
||||
flag: "dw",
|
||||
sfdw: sfdw,
|
||||
sizeX: 30,
|
||||
sizeY: 35
|
||||
sizeY: 35,
|
||||
});
|
||||
} else {
|
||||
hintToast("暂无坐标信息");
|
||||
@ -327,47 +334,56 @@ function getUserLocation(sfdw) {
|
||||
}
|
||||
|
||||
const getPatrolList = async ({ current, id }) => {
|
||||
const res = await fetchPatrolList({ pageCurrent: current, pageSize: 10 })
|
||||
const res = await fetchPatrolList({ pageCurrent: current, pageSize: 10 });
|
||||
if (res?.records.length > 0) {
|
||||
getUserLocation()
|
||||
|
||||
getUserLocation();
|
||||
data.patroObj = res?.records?.find((item) => item.id === id) || {};
|
||||
// 删除方格
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc")
|
||||
|
||||
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'})
|
||||
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()
|
||||
await getData();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 简单的时间加法函数
|
||||
const addTenMinutes = (timeString) => {
|
||||
if (!timeString) return '';
|
||||
if (!timeString) return "";
|
||||
|
||||
const date = new Date(timeString);
|
||||
if (isNaN(date.getTime())) return '';
|
||||
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分钟
|
||||
@ -385,55 +401,59 @@ const isTenMinutesPassed = (startTime) => {
|
||||
// 判断当前时间是否超过10分钟后
|
||||
return now > tenMinutesLater;
|
||||
} catch (error) {
|
||||
console.error('时间判断错误:', error);
|
||||
console.error("时间判断错误:", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 打卡
|
||||
const handleClick = async () => {
|
||||
const { id } = data.info?.[nextStep.value]
|
||||
if (data.info.length == 0) {
|
||||
hintToast("此方格没有必打卡点位！");
|
||||
return;
|
||||
}
|
||||
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
|
||||
hintToast(`请于${newTime.split(" ")[1]}后打卡`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (fileId.value === '') {
|
||||
hintToast('请拍照再打卡');
|
||||
return
|
||||
if (fileId.value === "") {
|
||||
hintToast("请拍照再打卡");
|
||||
return;
|
||||
}
|
||||
|
||||
const { lng, lat } = getLocation()
|
||||
const { lng, lat } = getLocation();
|
||||
try {
|
||||
const res = await fetchTbZdxlFgdwBddxlrwJlClockIn({
|
||||
id,
|
||||
dkWd: lat,
|
||||
dkJd: lng,
|
||||
dkFj: fileId.value,
|
||||
})
|
||||
});
|
||||
|
||||
if (res) {
|
||||
hintToast(`打卡成功`)
|
||||
await getData()
|
||||
hintToast(`打卡成功`);
|
||||
await getData();
|
||||
start();
|
||||
}
|
||||
} catch (error) {
|
||||
hintToast(`打卡异常`)
|
||||
stop()
|
||||
hintToast(`打卡异常`);
|
||||
stop();
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (route?.query) {
|
||||
data.query = route?.query;
|
||||
getPatrolList(route?.query)
|
||||
getPatrolList(route?.query);
|
||||
}
|
||||
|
||||
window.setimagebase64 = setimage_base64;
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -449,17 +469,24 @@ onMounted(() => {
|
||||
|
||||
<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="['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 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 v-if="item?.dkJsSj" class="time">
|
||||
{{ item?.dkJsSj?.split(" ")[1] }}已打卡
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -467,8 +494,18 @@ onMounted(() => {
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@ -480,18 +517,35 @@ onMounted(() => {
|
||||
</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 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
|
||||
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 class="info">{{ `第${infoData?.count || ""}次打卡` }}</div>
|
||||
</div>
|
||||
<div v-else class="circleWrapper" :class="{ 'disabled': !isExpired && expirationTime || infoData?.dkJsSj }">
|
||||
<div
|
||||
v-else
|
||||
class="circleWrapper"
|
||||
:class="{
|
||||
disabled: (!isExpired && expirationTime) || infoData?.dkJsSj,
|
||||
}"
|
||||
>
|
||||
<div class="title">已结束</div>
|
||||
<!-- <div class="info">{{ `第${infoData?.count || ''}次打卡` }}</div>-->
|
||||
<!-- <div class="info">{{ `第${infoData?.count || ''}次打卡` }}</div>-->
|
||||
</div>
|
||||
<div class="circleWrapperTip">
|
||||
<van-icon name="success" color="#FFFFFF" />
|
||||
@ -535,7 +589,7 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
width: 3.73vw;
|
||||
height: 3.73vw;
|
||||
background: #11AA66;
|
||||
background: #11aa66;
|
||||
border-radius: 13.33vw;
|
||||
}
|
||||
}
|
||||
@ -548,7 +602,7 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
width: 42.67vw;
|
||||
height: 42.67vw;
|
||||
background: linear-gradient( 180deg, #1DB1FF 0%, #007DE9 100%);
|
||||
background: linear-gradient(180deg, #1db1ff 0%, #007de9 100%);
|
||||
border-radius: 26.67vw;
|
||||
color: #fff;
|
||||
font-family: PingFang HK, PingFang HK;
|
||||
@ -572,8 +626,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background: #EDEDED !important;
|
||||
color: #75787F !important;
|
||||
background: #ededed !important;
|
||||
color: #75787f !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -581,7 +635,7 @@ onMounted(() => {
|
||||
margin-top: 4vw;
|
||||
display: flex;
|
||||
padding-bottom: 4vw;
|
||||
border-bottom: 0.27vw solid #D9D9D9;
|
||||
border-bottom: 0.27vw solid #d9d9d9;
|
||||
|
||||
.upload_tip {
|
||||
color: #999999;
|
||||
@ -612,8 +666,8 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1DB1FF;
|
||||
border: 0.27vw dashed #1DB1FF;
|
||||
color: #1db1ff;
|
||||
border: 0.27vw dashed #1db1ff;
|
||||
text-align: center;
|
||||
width: 29.33vw;
|
||||
height: 16.53vw;
|
||||
@ -631,7 +685,7 @@ onMounted(() => {
|
||||
padding: 4vw 2vw;
|
||||
width: 43vw;
|
||||
height: 18vw;
|
||||
background: #EDEDED;
|
||||
background: #ededed;
|
||||
border-radius: 2.67vw;
|
||||
flex-shrink: 0;
|
||||
margin-right: 2.67vw;
|
||||
@ -648,7 +702,7 @@ onMounted(() => {
|
||||
.dec {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #75787F;
|
||||
color: #75787f;
|
||||
font-size: 3.73vw;
|
||||
margin-top: 1.33vw;
|
||||
|
||||
@ -685,8 +739,8 @@ onMounted(() => {
|
||||
width: auto !important;
|
||||
height: 9.33vw;
|
||||
padding: 0 2.67vw;
|
||||
border: 0.27vw solid #EDEDED;
|
||||
color: #75787F;
|
||||
border: 0.27vw solid #ededed;
|
||||
color: #75787f;
|
||||
flex-shrink: 0;
|
||||
border-radius: 2vw;
|
||||
margin-right: 2vw;
|
||||
@ -697,9 +751,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.van-tab--active {
|
||||
background: rgba(62,110,232,0.2);
|
||||
border: 0.27vw solid #3E6EE8;
|
||||
color: #3E6EE8 !important;
|
||||
background: rgba(62, 110, 232, 0.2);
|
||||
border: 0.27vw solid #3e6ee8;
|
||||
color: #3e6ee8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,75 +1,77 @@
|
||||
<script setup>
|
||||
import TopNav from "@/components/topNav.vue";
|
||||
import Search from "@/components/search.vue";
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import ListItemWrapper from "@/pages/collectPage/copmonents/listItemWrapper.vue";
|
||||
import router from "@/router";
|
||||
import {getSelectPage} from "@/api/collectPage";
|
||||
import { getSelectPage } from "@/api/collectPage";
|
||||
|
||||
const finished = ref(false);
|
||||
const loading = ref(false);
|
||||
const loadingRefresh = ref(false);
|
||||
const searchValue = ref("")
|
||||
const searchValue = ref("");
|
||||
const pageData = reactive({
|
||||
pageSize: 10,
|
||||
pageCurrent: 1,
|
||||
total: 0,
|
||||
})
|
||||
});
|
||||
|
||||
const data = reactive({
|
||||
list: []
|
||||
})
|
||||
list: [],
|
||||
});
|
||||
|
||||
const onSearch = (value) => {
|
||||
loading.value = true;
|
||||
pageData.pageCurrent = 1;
|
||||
data.list = []
|
||||
getData()
|
||||
}
|
||||
data.list = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
loading.value = false;
|
||||
loadingRefresh.value = true;
|
||||
finished.value = false;
|
||||
pageData.pageCurrent = 1;
|
||||
data.list = []
|
||||
getData()
|
||||
}
|
||||
data.list = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { total, ...ret } = pageData
|
||||
const res = await getSelectPage({ ...ret, bddMc: searchValue.value })
|
||||
const { total, ...ret } = pageData;
|
||||
const res = await getSelectPage({ ...ret, bddMc: searchValue.value });
|
||||
if (res?.records.length > 0) {
|
||||
data.list = data.list.concat(res?.records) || []
|
||||
pageData.total = res?.total
|
||||
data.list = data.list.concat(res?.records) || [];
|
||||
pageData.total = res?.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
finished.value = true;
|
||||
}
|
||||
loadingRefresh.value = false;
|
||||
} catch (error) {
|
||||
loading.value = false;
|
||||
loadingRefresh.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
const onLoad = () => {
|
||||
if (data.list.length >= pageData?.total) {
|
||||
finished.value = true;
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
pageData.pageCurrent++
|
||||
getData()
|
||||
}
|
||||
pageData.pageCurrent++;
|
||||
getData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
data.list = []
|
||||
getData()
|
||||
})
|
||||
data.list = [];
|
||||
getData();
|
||||
});
|
||||
|
||||
const handleTo = () => {
|
||||
router.push("/collectAndAdd")
|
||||
}
|
||||
router.push("/collectAndAdd");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -78,7 +80,8 @@ const handleTo = () => {
|
||||
|
||||
<van-sticky>
|
||||
<div class="header">
|
||||
<search placeholder="请输入部门、所属方格或必到点名称进行查询"
|
||||
<search
|
||||
placeholder="请输入部门、所属方格或必到点名称进行查询"
|
||||
v-model="searchValue"
|
||||
@update:modelValue="onSearch"
|
||||
/>
|
||||
@ -87,21 +90,27 @@ const handleTo = () => {
|
||||
|
||||
<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">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text=""
|
||||
@load="onLoad"
|
||||
offset="1"
|
||||
:immediate-check="false"
|
||||
>
|
||||
<list-item-wrapper :list="data.list" />
|
||||
|
||||
<van-empty description="暂无采集数据" image="default" v-if="data.list.length <= 0 && loadingRefresh === false" />
|
||||
<van-empty
|
||||
description="暂无采集数据"
|
||||
image="default"
|
||||
v-if="data.list.length <= 0 && loadingRefresh === false"
|
||||
/>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
|
||||
<div class="footer" @click="handleTo">
|
||||
<van-button
|
||||
round
|
||||
native-type="submit"
|
||||
block
|
||||
type="primary"
|
||||
>
|
||||
<van-button round native-type="submit" block type="primary">
|
||||
新增必到点采集
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
@ -385,29 +385,29 @@ export function compare(attr, rev) {
|
||||
* @param {*} url 地址
|
||||
*/
|
||||
export function getBase64(fun, url) {
|
||||
if (fun && typeof fun === 'function') {
|
||||
axios.get(`${baseUrl2}/mosty-api/mosty-base/image/base64`, {
|
||||
params: {
|
||||
url
|
||||
}
|
||||
}).then((res) => {
|
||||
fun(`data:image/jpeg;base64,${res.data.data}`);
|
||||
}).catch((err) => {
|
||||
fun("");
|
||||
});
|
||||
} else {
|
||||
// Promise模式
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(`${baseUrl2}/mosty-api/mosty-base/image/base64`, {
|
||||
params: { url }
|
||||
}).then((res) => {
|
||||
resolve(`data:image/jpeg;base64,${res.data.data}`);
|
||||
}).catch((err) => {
|
||||
console.error('获取base64失败:', err);
|
||||
resolve("");
|
||||
});
|
||||
});
|
||||
}
|
||||
if (fun && typeof fun === 'function') {
|
||||
axios.get(`${baseUrl2}/mosty-api/mosty-base/image/base64`, {
|
||||
params: {
|
||||
url
|
||||
}
|
||||
}).then((res) => {
|
||||
fun(`data:image/jpeg;base64,${res.data.data}`);
|
||||
}).catch((err) => {
|
||||
fun("");
|
||||
});
|
||||
} else {
|
||||
// Promise模式
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(`${baseUrl2}/mosty-api/mosty-base/image/base64`, {
|
||||
params: { url }
|
||||
}).then((res) => {
|
||||
resolve(`data:image/jpeg;base64,${res.data.data}`);
|
||||
}).catch((err) => {
|
||||
console.error('获取base64失败:', err);
|
||||
resolve("");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 文件是否是图片
|
||||
@ -553,3 +553,22 @@ export function hintToast(msg, hintType = 'top') {
|
||||
position: hintType
|
||||
})
|
||||
}
|
||||
export function getLocationJs() {
|
||||
let jwd = {}
|
||||
if ("geolocation" in navigator) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
if (pos.coords) {
|
||||
jwd.lat = pos.coords.latitude;
|
||||
jwd.lng = pos.coords.longitude;
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log(err, "err");
|
||||
}
|
||||
);
|
||||
} else {
|
||||
console.log("Geolocation is not supported by this browser.");
|
||||
}
|
||||
return jwd;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user