新增必到点采集详情页面 处理打卡
This commit is contained in:
maojiacai
@ -16,3 +16,13 @@ export function fetchSelectListByBddxlrwId(params) {
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 打卡
|
||||
export function fetchTbZdxlFgdwBddxlrwJlClockIn(data) {
|
||||
return service({
|
||||
url: `${api}/tbZdxlFgdwBddxlrwJl/clockIn`,
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@ -205,6 +205,12 @@ onMounted(() => {
|
||||
mapUtil.value.enableClickEvents()
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
// 禁用地图
|
||||
emitter.on("setMapInteractions", (res) => {
|
||||
console.log(res)
|
||||
mapUtil.value.setMapInteractions(res);
|
||||
})
|
||||
});
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
@ -286,6 +292,7 @@ onUnmounted(() => {
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
emitter.off("getMapClickCoordinates");
|
||||
emitter.off("setMapInteractions");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -724,6 +724,71 @@ export function MapUtil(map) {
|
||||
|
||||
_that.mMap.mapboxGLMap.on('click', _that.clickEventHandler);
|
||||
};
|
||||
|
||||
|
||||
// 在 MapUtil.js 中添加以下方法
|
||||
MapUtil.prototype.disableMapInteractions = function() {
|
||||
const _that = this;
|
||||
|
||||
if (!_that.mMap || !_that.mMap.mapboxGLMap) return;
|
||||
|
||||
const map = _that.mMap.mapboxGLMap;
|
||||
|
||||
// 禁用所有交互
|
||||
map.boxZoom.disable();
|
||||
map.doubleClickZoom.disable();
|
||||
map.dragPan.disable();
|
||||
map.dragRotate.disable();
|
||||
map.keyboard.disable();
|
||||
map.scrollZoom.disable();
|
||||
map.touchZoomRotate.disable();
|
||||
|
||||
// 禁用拖拽
|
||||
map.dragPan.disable();
|
||||
|
||||
// 禁用缩放
|
||||
map.scrollZoom.disable();
|
||||
map.doubleClickZoom.disable();
|
||||
map.touchZoomRotate.disable();
|
||||
|
||||
// 禁用旋转
|
||||
map.dragRotate.disable();
|
||||
map.touchZoomRotate.disable();
|
||||
|
||||
// 禁用键盘操作
|
||||
map.keyboard.disable();
|
||||
|
||||
console.log('地图交互已禁用');
|
||||
};
|
||||
|
||||
MapUtil.prototype.enableMapInteractions = function() {
|
||||
const _that = this;
|
||||
|
||||
if (!_that.mMap || !_that.mMap.mapboxGLMap) return;
|
||||
|
||||
const map = _that.mMap.mapboxGLMap;
|
||||
|
||||
// 启用所有交互
|
||||
map.boxZoom.enable();
|
||||
map.doubleClickZoom.enable();
|
||||
map.dragPan.enable();
|
||||
map.dragRotate.enable();
|
||||
map.keyboard.enable();
|
||||
map.scrollZoom.enable();
|
||||
map.touchZoomRotate.enable();
|
||||
|
||||
console.log('地图交互已启用');
|
||||
};
|
||||
|
||||
MapUtil.prototype.setMapInteractions = function(enabled) {
|
||||
const _that = this;
|
||||
|
||||
if (enabled) {
|
||||
_that.enableMapInteractions();
|
||||
} else {
|
||||
_that.disableMapInteractions();
|
||||
}
|
||||
};
|
||||
}
|
||||
// 获取uuid 作为边界图层ID
|
||||
function getUUid() {
|
||||
|
||||
@ -1,32 +1,45 @@
|
||||
<template>
|
||||
<div class="info-container">
|
||||
<div class="item" v-for="(item, index) in data" :key="index">
|
||||
<template v-for="(item, index) in data" :key="index">
|
||||
<div v-if="item?.dkKsSj" class="item">
|
||||
<div class="point"></div>
|
||||
<div class="line" v-if="index + 1 != data.length"></div>
|
||||
<div class="info-right">
|
||||
<div class="name">{{item.name}}</div>
|
||||
<div class="time">打卡时间：<text>{{ item.time }}</text></div>
|
||||
<div class="name">{{ `第${item?.count}次打卡` }}</div>
|
||||
<div class="time">打卡时间：<text>{{ item?.dkKsSj }}</text></div>
|
||||
|
||||
<div class="image">
|
||||
<img src="../../../assets/home/bddcj.png" alt="">
|
||||
<div v-if="item?.imgUrl" class="image">
|
||||
<van-image width="80px" :src="item?.imgUrl" @click="onClickImg(item?.imgUrl)" 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 class="address">-->
|
||||
<!-- <van-icon name="location-o" color="#1DB1FF" />-->
|
||||
<!-- <div class="name">四川省成都市</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ImagePreview} from "vant";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
//预览图片
|
||||
function onClickImg(url) {
|
||||
ImagePreview([url]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,43 +1,158 @@
|
||||
<script setup>
|
||||
import TopNav from "@/components/topNav.vue";
|
||||
import {onMounted, reactive, ref} 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 {fetchSelectListByBddxlrwId} from "@/api/patrolList";
|
||||
import {fetchSelectListByBddxlrwId, fetchTbZdxlFgdwBddxlrwJlClockIn} from "@/api/patrolList";
|
||||
import {getBase64, hintToast} from "@/utils/tools";
|
||||
import {ImagePreview} from "vant";
|
||||
import {qcckPost, qcckGet} from "@/api/qcckApi";
|
||||
|
||||
const route = useRoute();
|
||||
const activeName = ref("0")
|
||||
const active = ref(0)
|
||||
const nextStep = ref(0)
|
||||
const baseUrl = ref("")
|
||||
const fileId = ref("")
|
||||
|
||||
|
||||
const startTime = ref("2025-09-08 15:29:00");
|
||||
|
||||
const useCountdownFromTime = (minutes = 10) => {
|
||||
const timeLeft = ref(0); // 剩余毫秒数
|
||||
const timer = ref(null);
|
||||
const isRunning = ref(false); // 是否运行中
|
||||
const isExpired = ref(false); // 是否过期
|
||||
const expirationTime = ref(null); // 过期时间
|
||||
|
||||
// 计算过期时间
|
||||
const calculateExpirationTime = (time) => {
|
||||
if (!time) return null;
|
||||
|
||||
try {
|
||||
const startDate = new Date(time);
|
||||
if (isNaN(startDate.getTime())) return null;
|
||||
|
||||
return new Date(startDate.getTime() + minutes * 60000);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 更新倒计时
|
||||
const update = () => {
|
||||
if (!expirationTime.value) {
|
||||
isExpired.value = true;
|
||||
isRunning.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
timeLeft.value = expirationTime.value - now;
|
||||
|
||||
if (timeLeft.value <= 0) {
|
||||
timeLeft.value = 0;
|
||||
isExpired.value = true;
|
||||
isRunning.value = false;
|
||||
stop();
|
||||
return;
|
||||
}
|
||||
|
||||
if (timeLeft.value > 0) {
|
||||
timer.value = setTimeout(update, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
// 开始倒计时
|
||||
const start = (startTime) => {
|
||||
stop();
|
||||
expirationTime.value = calculateExpirationTime(startTime);
|
||||
|
||||
if (!expirationTime.value) {
|
||||
isExpired.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
isRunning.value = true;
|
||||
isExpired.value = false;
|
||||
update();
|
||||
};
|
||||
|
||||
// 停止倒计时
|
||||
const stop = () => {
|
||||
if (timer.value) {
|
||||
clearTimeout(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
isRunning.value = false;
|
||||
};
|
||||
|
||||
// 格式化时间显示
|
||||
const formattedTime = computed(() => {
|
||||
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')}`;
|
||||
});
|
||||
|
||||
// 过期时间显示
|
||||
const expirationTimeFormatted = computed(() => {
|
||||
if (!expirationTime.value) return '';
|
||||
return expirationTime.value.toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false
|
||||
});
|
||||
});
|
||||
|
||||
// 自动清理
|
||||
onUnmounted(stop);
|
||||
|
||||
return {
|
||||
timeLeft,
|
||||
formattedTime,
|
||||
expirationTime: expirationTimeFormatted,
|
||||
isRunning,
|
||||
isExpired,
|
||||
start,
|
||||
stop
|
||||
};
|
||||
};
|
||||
|
||||
const data = reactive({
|
||||
tabsList: [],
|
||||
info: []
|
||||
info: [],
|
||||
})
|
||||
const timeList = [
|
||||
{
|
||||
time:'09:24:34',
|
||||
name: '第一次打卡 开始',
|
||||
person:'李小明',
|
||||
content:'签收订单, 订单状态变更为待回单, 签收备注为\'无\'',
|
||||
},
|
||||
{
|
||||
time:'2020-03-26 12:30:12',
|
||||
name: '吾悦广场',
|
||||
person:'李小明',
|
||||
content:'创建了订单, 并添加了跟踪方式, 电子设备或快递单号: 854654875',
|
||||
},
|
||||
{
|
||||
time:'2020-03-26 12:30:12',
|
||||
name: '吾悦广场',
|
||||
person:'李小明',
|
||||
content:'签收订单, 订单状态变更为待回单, 签收备注为\'无\'',
|
||||
|
||||
const infoData = computed(() => {
|
||||
return data.info?.[nextStep.value]
|
||||
})
|
||||
|
||||
const activeInfoData = computed(() => data.tabsList?.[active.value])
|
||||
|
||||
const { formattedTime, isExpired, expirationTime, start, stop } = useCountdownFromTime(10);
|
||||
|
||||
// 删除打卡图片
|
||||
const clearImage = () => {
|
||||
baseUrl.value = ""
|
||||
}
|
||||
]
|
||||
const clearImage = () => {}
|
||||
|
||||
const onClickImg = () => {}
|
||||
// 浏览图片
|
||||
const onClickImg = (url) => {
|
||||
ImagePreview([url])
|
||||
}
|
||||
|
||||
const photoFn = () => {}
|
||||
// 点击上传
|
||||
const photoFn = () => {
|
||||
try {
|
||||
bridge.pZ("photo");
|
||||
} catch (err) {
|
||||
console.log(err, 'err');
|
||||
}
|
||||
}
|
||||
|
||||
const count = (item) => {
|
||||
if (!item || !item.dkSx) return undefined;
|
||||
@ -48,20 +163,178 @@ const count = (item) => {
|
||||
return numbers[index];
|
||||
};
|
||||
|
||||
const onChange = (value) => {
|
||||
active.value = value;
|
||||
getData(data.tabsList[value]?.id)
|
||||
}
|
||||
|
||||
const handleNext = (index) => {
|
||||
stop()
|
||||
nextStep.value = index;
|
||||
start(infoData?.value?.dkKsSj);
|
||||
}
|
||||
|
||||
function setimage_base64(pzid, 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;
|
||||
})
|
||||
}
|
||||
|
||||
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) {
|
||||
const base64 = await getBase64("", res.url);
|
||||
// 存入缓存
|
||||
imageCache.set(fileId, base64);
|
||||
return base64;
|
||||
}
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.warn('获取图片失败:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async (bddxlrwId = '') => {
|
||||
const res = await fetchSelectListByBddxlrwId({ bddxlrwId })
|
||||
try {
|
||||
const res = await fetchSelectListByBddxlrwId({ bddxlrwId });
|
||||
if (res) {
|
||||
data.info = res
|
||||
// 收集所有需要加载的图片ID
|
||||
const imageIds = res.map(i => i?.dkJsFj).filter(Boolean);
|
||||
|
||||
// 批量获取图片URL
|
||||
const imagePromises = imageIds.map(id => getImageUrl(id));
|
||||
const imageResults = await Promise.allSettled(imagePromises);
|
||||
|
||||
// 创建图片映射表
|
||||
const imageMap = new Map();
|
||||
imageIds.forEach((id, index) => {
|
||||
const result = imageResults[index];
|
||||
imageMap.set(id, result.status === 'fulfilled' ? result.value : null);
|
||||
});
|
||||
|
||||
// 设置数据
|
||||
data.info = res.map(i => ({
|
||||
...i,
|
||||
count: count(i),
|
||||
imgUrl: imageMap.get(i?.dkJsFj) || null
|
||||
}));
|
||||
|
||||
active.value = 1;
|
||||
|
||||
console.log('完整数据:', data.info);
|
||||
|
||||
await nextTick(() => {
|
||||
const firstItem = data.info[nextStep.value || 0];
|
||||
if (firstItem?.dkKsSj) {
|
||||
startTime.value = infoData?.value?.dkKsSj;
|
||||
start(startTime.value);
|
||||
} else {
|
||||
start('');
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 简单的时间加法函数
|
||||
const addTenMinutes = (timeString) => {
|
||||
if (!timeString) return '';
|
||||
|
||||
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, '-');
|
||||
};
|
||||
|
||||
// 判断是否超过10分钟
|
||||
const isTenMinutesPassed = (startTime) => {
|
||||
if (!startTime) return false;
|
||||
|
||||
try {
|
||||
const startDate = new Date(startTime);
|
||||
if (isNaN(startDate.getTime())) return false;
|
||||
|
||||
// 计算10分钟后的时间
|
||||
const tenMinutesLater = new Date(startDate.getTime() + 10 * 60 * 1000);
|
||||
const now = new Date();
|
||||
|
||||
// 判断当前时间是否超过10分钟后
|
||||
return now > tenMinutesLater;
|
||||
} catch (error) {
|
||||
console.error('时间判断错误:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 打卡
|
||||
const handleClick = async () => {
|
||||
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
|
||||
}
|
||||
|
||||
const { lng, lat } = getLocation()
|
||||
try {
|
||||
const res = await fetchTbZdxlFgdwBddxlrwJlClockIn({
|
||||
id,
|
||||
dkWd: lat,
|
||||
dkJd: lng,
|
||||
dkFj: fileId.value,
|
||||
})
|
||||
|
||||
if (res) {
|
||||
hintToast(`打卡成功`)
|
||||
await getData(data.tabsList?.[0]?.id)
|
||||
start();
|
||||
}
|
||||
} catch (error) {
|
||||
hintToast(`打卡异常`)
|
||||
stop()
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.item) {
|
||||
data.tabsList = JSON.parse(route.query.item)
|
||||
console.log(data.tabsList)
|
||||
}
|
||||
|
||||
getData(data.tabsList[0]?.id)
|
||||
getData(data.tabsList?.[0]?.id)
|
||||
|
||||
window.setimagebase64 = setimage_base64;
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -70,30 +343,28 @@ onMounted(() => {
|
||||
<top-nav navTitle="打卡" :showLeft="true" />
|
||||
|
||||
<div class="clockInWrapper">
|
||||
<van-tabs v-model="activeName">
|
||||
<template v-for="(item, index) in data.tabsList" :key="item?.id">
|
||||
<van-tab :name="index" :title="item?.bddMc" />
|
||||
<van-tabs v-model:active="active" :active="active" @click="onChange">
|
||||
<template v-for="(item, index) in data.tabsList" :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">
|
||||
<div class="label">{{ `第${count(item)}次打卡` }}</div>
|
||||
<div class="dec">开始</div>
|
||||
<div class="dec">离开</div>
|
||||
<div class="clockInList_item" @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 class="clockInList_item">-->
|
||||
<!-- <div class="label">第一次打卡</div>-->
|
||||
<!-- <div class="dec">开始</div>-->
|
||||
<!-- <div class="dec">离开</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="clockInList_item">-->
|
||||
<!-- <div class="label">第一次打卡</div>-->
|
||||
<!-- <div class="dec">开始</div>-->
|
||||
<!-- <div class="dec">离开</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<div class="upload_box">
|
||||
@ -115,18 +386,18 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="clockWrapper">
|
||||
<div class="circleWrapper">
|
||||
<div class="time">10：00：00后</div>
|
||||
<div class="title">开始</div>
|
||||
<div class="info">第一次打卡</div>
|
||||
<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>
|
||||
<div class="circleWrapperTip">
|
||||
<van-icon name="success" color="#FFFFFF" />
|
||||
<div>已进入考勤范围：打卡点1德阳市某某某</div>
|
||||
<div>已进入考勤范围：{{ activeInfoData?.bddMc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<timeline :data="timeList" />
|
||||
<timeline :data="data.info" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -182,6 +453,7 @@ onMounted(() => {
|
||||
.time {
|
||||
font-weight: 400;
|
||||
font-size: 4.8vw;
|
||||
margin-bottom: 1.33vw;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -192,8 +464,14 @@ onMounted(() => {
|
||||
.info {
|
||||
font-weight: 400;
|
||||
font-size: 3.73vw;
|
||||
margin-top: 1.33vw;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background: #EDEDED !important;
|
||||
color: #75787F !important;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_box {
|
||||
@ -244,6 +522,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4vw;
|
||||
overflow-y: auto;
|
||||
|
||||
.clockInList_item {
|
||||
padding: 4vw 2vw;
|
||||
@ -251,6 +530,12 @@ onMounted(() => {
|
||||
height: 18vw;
|
||||
background: #EDEDED;
|
||||
border-radius: 2.67vw;
|
||||
flex-shrink: 0;
|
||||
margin-right: 2.67vw;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 400;
|
||||
@ -258,9 +543,18 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.dec {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #75787F;
|
||||
font-size: 3.73vw;
|
||||
margin-top: 1.33vw;
|
||||
|
||||
.van-icon-checked {
|
||||
margin-right: 1.33vw;
|
||||
}
|
||||
.time {
|
||||
margin-left: 1.33vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -275,7 +569,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.van-tabs__line {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.van-tab {
|
||||
|
||||
@ -7,11 +7,14 @@ import GdMap from "@/components/GdMap/index.vue"
|
||||
import {addSaveData} from "@/api/collectPage";
|
||||
import {hintToast} from "@/utils/tools";
|
||||
import router from "@/router";
|
||||
import {useRoute} from "vue-router";
|
||||
|
||||
const navTitle = ref("必到点采集新增")
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const visible = ref(false)
|
||||
const formData = ref({})
|
||||
const route = useRoute()
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
try {
|
||||
@ -20,8 +23,8 @@ const onSubmit = async (data) => {
|
||||
if (res) {
|
||||
hintToast(res?.msg || '新增成功')
|
||||
|
||||
setTimeout(async () => {
|
||||
await router.push(`/collectPage`)
|
||||
setTimeout( () => {
|
||||
router.back()
|
||||
}, 500)
|
||||
}
|
||||
} catch (error) {
|
||||
@ -40,7 +43,25 @@ const handleChange = (val) => {
|
||||
formData.value.fgdwId = val?.id
|
||||
}
|
||||
|
||||
const handleVisible = () => {
|
||||
if (disabled.value) return
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query?.item) {
|
||||
// 查看详情禁用处理
|
||||
formData.value = JSON.parse(route.query.item)
|
||||
console.log(formData.value)
|
||||
disabled.value = true
|
||||
|
||||
navTitle.value = '必到点采集详情'
|
||||
|
||||
// 禁用地图
|
||||
emitter.emit("setMapInteractions", !disabled.value)
|
||||
} else {
|
||||
disabled.value = false
|
||||
|
||||
// 获取经纬度
|
||||
emitter.emit("getMapClickCoordinates");
|
||||
|
||||
@ -59,15 +80,16 @@ onMounted(() => {
|
||||
sizeY: 35
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<TopNav navTitle="必到点采集新增" :showLeft="true" />
|
||||
<TopNav :navTitle="navTitle" :showLeft="true" />
|
||||
|
||||
<div class="formWrapper">
|
||||
<van-form @submit="onSubmit" class="form" :disabled="disabled">
|
||||
<van-form @submit="onSubmit" class="form" :readonly="disabled">
|
||||
<!-- <van-field-->
|
||||
<!-- v-model="formData.cjsbQk"-->
|
||||
<!-- readonly-->
|
||||
@ -77,7 +99,7 @@ onMounted(() => {
|
||||
<van-field
|
||||
v-model="formData.bddMc"
|
||||
name="bddMc"
|
||||
required
|
||||
:required="!disabled"
|
||||
label="必到点名称"
|
||||
placeholder="请输入必到点名称"
|
||||
:rules="[{ required: true, message: '请输入必到点名称' }]"
|
||||
@ -85,18 +107,18 @@ onMounted(() => {
|
||||
<van-field
|
||||
v-model="formData.mc"
|
||||
name="mc"
|
||||
required
|
||||
:required="!disabled"
|
||||
is-link
|
||||
readonly
|
||||
label="所属方格"
|
||||
placeholder="请输入必到点名称"
|
||||
:rules="[{ required: true, message: '请输入必到点名称' }]"
|
||||
@click="visible = true"
|
||||
@click="handleVisible"
|
||||
/>
|
||||
<van-field
|
||||
v-model="formData.bddDz"
|
||||
name="bddDz"
|
||||
required
|
||||
:required="!disabled"
|
||||
label="地址"
|
||||
placeholder="请输入必到点名称"
|
||||
:rules="[{ required: true, message: '请输入必到点名称' }]"
|
||||
@ -104,7 +126,7 @@ onMounted(() => {
|
||||
<van-field
|
||||
v-model="formData.jd"
|
||||
name="jd"
|
||||
required
|
||||
:required="!disabled"
|
||||
label="经度"
|
||||
placeholder="请输入经度"
|
||||
:rules="[{ required: true, message: '请输入经度' }]"
|
||||
@ -112,7 +134,7 @@ onMounted(() => {
|
||||
<van-field
|
||||
v-model="formData.wd"
|
||||
name="wd"
|
||||
required
|
||||
:required="!disabled"
|
||||
label="纬度"
|
||||
placeholder="请输入纬度"
|
||||
:rules="[{ required: true, message: '请输入纬度' }]"
|
||||
@ -124,7 +146,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn">
|
||||
<div class="btn" v-if="!disabled">
|
||||
<van-button
|
||||
round
|
||||
block
|
||||
|
||||
@ -36,6 +36,7 @@ const onSearch = (value) => {
|
||||
}
|
||||
|
||||
const onRadionChange = (value) => {
|
||||
emitter.emit("deletePointArea", "zdxl_fzyc")
|
||||
emits('change', value)
|
||||
|
||||
const { x1, y1, x2, y2, id, zxX, zxY, mc } = value
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import router from "@/router";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
@ -7,14 +9,17 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(["onConfirm"]);
|
||||
|
||||
const handleTo = (item) => {
|
||||
const { bddMc, bddDz, wd, jd, fgdwMc } = item
|
||||
router.push({ path: "/collectAndAdd", query: { item: JSON.stringify({ bddMc, bddDz, wd, jd, mc: fgdwMc }) } });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="item-wrapper">
|
||||
<template v-for="(item, index) in list" :key="index">
|
||||
<div class="item">
|
||||
<div class="item" @click="handleTo(item)">
|
||||
<div class="title">{{ item.bddMc }}</div>
|
||||
<div class="infoWrapper">
|
||||
<!-- <div class="mt">所属部门：{{ item.sssgaj }}</div>-->
|
||||
|
||||
@ -22,11 +22,11 @@ const handleClockInPage = (item) => {
|
||||
<div class="item" @click="handleClockInPage(item)">
|
||||
<div class="rowWrapper">
|
||||
<div class="title">{{ item?.fgMc }}</div>
|
||||
<div class="progress">50%</div>
|
||||
<div class="progress">{{ item?.bddAllProgress || 0 }}%</div>
|
||||
</div>
|
||||
|
||||
<div class="rowWrapper mt co99 fz12">
|
||||
<div>预警等级：{{ item?.fgYjdj }}</div>
|
||||
<div>预警等级：{{ item?.fgYjdjLabel }}</div>
|
||||
<div>任务日期：{{ item?.rwRq }}</div>
|
||||
</div>
|
||||
<div class="rowWrapper mt co99 fz12">
|
||||
|
||||
@ -4,6 +4,7 @@ import TopNav from "@/components/topNav.vue";
|
||||
import Search from "@/components/search.vue";
|
||||
import PatrolWrapper from "@/pages/patrolList/copmonents/patrolWrapper.vue";
|
||||
import {fetchPatrolList} from "@/api/patrolList";
|
||||
import {getDictListByCode} from "@/api/common";
|
||||
|
||||
const finished = ref(false);
|
||||
const loading = ref(false);
|
||||
@ -84,6 +85,8 @@ const getData = async () => {
|
||||
})) || []
|
||||
pageData.total = res?.total
|
||||
loading.value = false;
|
||||
|
||||
await getDictList()
|
||||
}
|
||||
loadingRefresh.value = false;
|
||||
|
||||
@ -93,6 +96,15 @@ const getData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const getDictList = async () => {
|
||||
const res = await getDictListByCode({ dictCode: 'D_ZDXL_FGXLRW_YJDJ' })
|
||||
|
||||
data.list = (data.list || []).map(item => ({
|
||||
...item,
|
||||
fgYjdjLabel: (res?.itemList || []).find(i => i.dm === item.fgYjdj)?.zdmc || item.fgYjdj
|
||||
}));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
@ -105,7 +117,6 @@ onMounted(() => {
|
||||
<van-sticky>
|
||||
<div class="header">
|
||||
<search
|
||||
:isSx="true"
|
||||
placeholder="请输入方格名称进行查询"
|
||||
v-model="searchValue"
|
||||
@update:modelValue="onSearch"
|
||||
|
||||
@ -385,6 +385,7 @@ 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
|
||||
@ -394,6 +395,19 @@ export function getBase64(fun, url) {
|
||||
}).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("");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 文件是否是图片
|
||||
|
||||
Reference in New Issue
Block a user