269 lines
9.4 KiB
Vue
269 lines
9.4 KiB
Vue
<template>
|
||
<el-dialog title="查看运动轨迹" v-model="data.dialogVisible" :before-close="handleClose" style="width: 700px; padding-bottom: 20px">
|
||
<el-form ref="formDataRef" :inline="true" :model="formData" class="demo-form-inline">
|
||
<el-form-item label="日期">
|
||
<!-- <el-date-picker
|
||
v-model="formData.time"
|
||
type="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
placeholder="请选择日期"
|
||
:disabled-date="disabledDate"
|
||
></el-date-picker> -->
|
||
<el-date-picker
|
||
v-model="formData.time"
|
||
type="datetimerange"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
placeholder="请选择日期"
|
||
:disabled-date="disabledDate"
|
||
@change="dateChange"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="getPath">查询</el-button>
|
||
<el-button type="warning" @click="playPoints" :disabled="!data.mapShow">{{ data.play ? '暂停' : '播放' }}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div
|
||
v-loading="data.trackLoading"
|
||
element-loading-text="正在加载中..."
|
||
style="height: 500px"
|
||
element-loading-background="rgba(255, 255, 255,1)"
|
||
>
|
||
<div class="empty-box" v-if="data.noTrack">
|
||
<img style="width: 50%" src="../../assets/images/wuguiji.png" />
|
||
</div>
|
||
<baidu-map
|
||
class="map"
|
||
@ready="handler"
|
||
:center="data.centerPoint"
|
||
:zoom="data.zoom"
|
||
:dragging="true"
|
||
:auto-resize="true"
|
||
:scroll-wheel-zoom="true"
|
||
style="height: 500px"
|
||
v-if="data.mapShow"
|
||
>
|
||
<!-- 运行轨迹的路线 stroke-weight边线的宽度stroke-opacity边线透明度-->
|
||
<bm-polyline stroke-color="blue" :path="data.path" :stroke-opacity="0.5" :stroke-weight="3" :editing="false"></bm-polyline>
|
||
<!-- marker 可以展示的图标 起点、终点 -->
|
||
<bm-marker :icon="startMarkIcon" :position="{ lng: data.startMark.lng, lat: data.startMark.lat }"></bm-marker>
|
||
<bm-marker :icon="endMarkIcon" :position="{ lng: data.endMark.lng, lat: data.endMark.lat }"></bm-marker>
|
||
<bm-marker
|
||
v-for="(item, index) in data.path"
|
||
:key="index"
|
||
:icon="biaoMarkIcon"
|
||
:position="{ lng: item.lng, lat: item.lat }"
|
||
></bm-marker>
|
||
<!-- 暂停是根据你提供的坐标，如果还没过第一个，就会返回，如果过了，在第一个到第二个之间暂停，他会跑掉第二个后面 -->
|
||
<bml-lushu @stop="reset" :path="data.path" :icon="iconss" :play="data.play" :rotation="true" :speed="900"></bml-lushu>
|
||
</baidu-map>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="handleClose">取消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { BmlLushu } from 'vue-baidu-map-3x';
|
||
import { collarTrack, collarTrackOrder } from '~/api/hardware.js';
|
||
import startIcon from '../../assets/images/qi.png';
|
||
import endIcon from '../../assets/images/zhong.png';
|
||
import biaoIcon from '../../assets/images/biaozhu.png';
|
||
import goIcon from '../../assets/images/yuan.png';
|
||
|
||
const formDataRef = ref(null);
|
||
const data = reactive({
|
||
dialogVisible: false,
|
||
play: false, // 是否自动播放轨迹动画
|
||
zoom: 15,
|
||
path: [],
|
||
centerPoint: { lng: 116.404, lat: 39.915 },
|
||
startMark: { lng: 116.404, lat: 39.915 },
|
||
endMark: { lng: 116.404, lat: 116.404 },
|
||
trackLoading: false,
|
||
noTrack: false,
|
||
mapShow: false,
|
||
type: '',
|
||
});
|
||
const formData = reactive({
|
||
time: '',
|
||
});
|
||
const handleClose = () => {
|
||
data.dialogVisible = false;
|
||
};
|
||
// 查询当前时间
|
||
const getNowDate = () => {
|
||
const year = new Date().getFullYear();
|
||
let month = new Date().getMonth() + 1;
|
||
let day = new Date().getDate();
|
||
let hours = new Date().getHours();
|
||
let minutes = new Date().getMinutes();
|
||
let seconds = new Date().getSeconds();
|
||
month = month < 10 ? `0${month}` : month;
|
||
day = day < 10 ? `0${day}` : day;
|
||
hours = hours < 10 ? `0${hours}` : hours;
|
||
minutes = minutes < 10 ? `0${minutes}` : minutes;
|
||
seconds = seconds < 10 ? `0${seconds}` : seconds;
|
||
// formData.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||
formData.time = [`${year}-${month}-${day} ` + `00` + `:` + `00` + `:` + `00`, `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`];
|
||
};
|
||
// 禁用今天之后的日期
|
||
const disabledDate = (time) => {
|
||
return time.getTime() > Date.now();
|
||
};
|
||
const dateChange = () => {
|
||
if (!formData.time) {
|
||
formData.time = '';
|
||
}
|
||
};
|
||
// 起点图标
|
||
const startMarkIcon = reactive({
|
||
url: startIcon,
|
||
size: { width: 32, height: 32 },
|
||
opts: { anchor: { width: 16, height: 16 } },
|
||
});
|
||
// 终点图标
|
||
const endMarkIcon = reactive({
|
||
url: endIcon,
|
||
size: { width: 32, height: 32 },
|
||
opts: { anchor: { width: 16, height: 16 } },
|
||
});
|
||
// 运动图标
|
||
const iconss = reactive({
|
||
url: goIcon,
|
||
size: { width: 18, height: 18 },
|
||
opts: { anchor: { width: 9, height: 9 } },
|
||
});
|
||
const biaoMarkIcon = reactive({
|
||
url: biaoIcon,
|
||
size: { width: 32, height: 32 },
|
||
opts: { anchor: { width: 15, height: 32 } },
|
||
});
|
||
const handler = ({ BMap, map }) => {
|
||
// 自动获取展示的比例
|
||
const view = map.getViewport(eval(data.path));
|
||
data.zoom = view.zoom;
|
||
data.centerPoint = view.center;
|
||
};
|
||
// 查询
|
||
const getPath = () => {
|
||
data.mapShow = false;
|
||
data.noTrack = false;
|
||
getTrack();
|
||
};
|
||
// 播放/暂停 运行轨迹
|
||
const playPoints = () => {
|
||
if (data.noTrack) {
|
||
ElMessage.warning('暂无定位轨迹');
|
||
return;
|
||
}
|
||
data.play = !data.play;
|
||
};
|
||
// 停止播放运行轨迹
|
||
const reset = () => {
|
||
data.play = false;
|
||
};
|
||
// 查询定位
|
||
const getTrack = () => {
|
||
data.trackLoading = true;
|
||
if (data.type == 'order') {
|
||
collarTrack({
|
||
deliveryId: data.deliveryId,
|
||
xqDeviceId: data.xqDeviceId,
|
||
trackTime: formData.time[0] ? formData.time[0] : '',
|
||
trackEndTime: formData.time[1] ? formData.time[1] : '',
|
||
})
|
||
.then((res) => {
|
||
data.trackLoading = false;
|
||
if (res.code === 200) {
|
||
data.mapShow = true;
|
||
if (res.data.length > 0) {
|
||
data.path = [];
|
||
res.data.forEach((item) => {
|
||
data.path.push({
|
||
lng: item.longitude,
|
||
lat: item.latitude,
|
||
});
|
||
});
|
||
data.startMark = data.path[0]; // 起点
|
||
data.endMark = data.path[data.path.length - 1]; // 终点
|
||
}
|
||
} else {
|
||
ElMessage.error(res.msg);
|
||
data.noTrack = true;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
data.trackLoading = false;
|
||
data.noTrack = true;
|
||
});
|
||
} else {
|
||
collarTrackOrder({
|
||
deliveryId: data.deliveryId,
|
||
xqDeviceId: data.xqDeviceId,
|
||
trackTime: formData.time[0] ? formData.time[0] : '',
|
||
trackEndTime: formData.time[1] ? formData.time[1] : '',
|
||
})
|
||
.then((res) => {
|
||
data.trackLoading = false;
|
||
if (res.code === 200) {
|
||
data.mapShow = true;
|
||
if (res.data.length > 0) {
|
||
data.path = [];
|
||
res.data.forEach((item) => {
|
||
data.path.push({
|
||
lng: item.longitude,
|
||
lat: item.latitude,
|
||
});
|
||
});
|
||
data.startMark = data.path[0]; // 起点
|
||
data.endMark = data.path[data.path.length - 1]; // 终点
|
||
}
|
||
} else {
|
||
ElMessage.error(res.msg);
|
||
data.noTrack = true;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
data.trackLoading = false;
|
||
data.noTrack = true;
|
||
});
|
||
}
|
||
};
|
||
const onShowTrackDialog = (row) => {
|
||
data.dialogVisible = true;
|
||
getNowDate();
|
||
if (row) {
|
||
data.deliveryId = row.deliveryId;
|
||
data.xqDeviceId = row.deviceId;
|
||
data.type = row.type ? row.type : '';
|
||
data.mapShow = false;
|
||
data.noTrack = false;
|
||
data.formData = '';
|
||
getTrack();
|
||
}
|
||
};
|
||
defineExpose({
|
||
onShowTrackDialog,
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
::v-deep .anchorBL {
|
||
display: none;
|
||
visibility: hidden;
|
||
}
|
||
.empty-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 500px;
|
||
}
|
||
</style>
|