104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<el-dialog title="查看定位" v-model="data.dialogVisible" :before-close="handleClose" style="width: 700px; padding-bottom: 20px">
|
||
|
|
<div
|
||
|
|
v-loading="data.loactionLoading"
|
||
|
|
element-loading-text="正在加载中..."
|
||
|
|
element-loading-background="rgba(255, 255, 255,1)"
|
||
|
|
style="height: 500px"
|
||
|
|
>
|
||
|
|
<div class="empty-box" v-if="data.loactionStatus">
|
||
|
|
<img style="width: 50%" src="../../assets/images/wudingwei.png" />
|
||
|
|
</div>
|
||
|
|
<baidu-map style="height: 500px" class="map" :zoom="15" :center="data.center" :scroll-wheel-zoom="true" v-if="data.mapShow">
|
||
|
|
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
|
||
|
|
<bm-marker :position="data.center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
|
||
|
|
<bm-label
|
||
|
|
:content="data.time"
|
||
|
|
:labelStyle="{
|
||
|
|
color: '#67c23a',
|
||
|
|
fontSize: '12px',
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderRadius: 10,
|
||
|
|
}"
|
||
|
|
:offset="{ width: -96, height: 10 }"
|
||
|
|
/>
|
||
|
|
</bm-marker>
|
||
|
|
</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 { collarLocation } from '~/api/hardware.js';
|
||
|
|
|
||
|
|
const data = reactive({
|
||
|
|
dialogVisible: false,
|
||
|
|
loactionLoading: false,
|
||
|
|
loactionStatus: false,
|
||
|
|
mapShow: false,
|
||
|
|
center: { lng: 0, lat: 0 },
|
||
|
|
time: '',
|
||
|
|
deliveryId: '',
|
||
|
|
xqDeviceId: '',
|
||
|
|
});
|
||
|
|
// 查询定位
|
||
|
|
const getLocation = () => {
|
||
|
|
data.loactionLoading = true;
|
||
|
|
collarLocation({
|
||
|
|
deliveryId: data.deliveryId,
|
||
|
|
xqDeviceId: data.xqDeviceId,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
data.loactionLoading = false;
|
||
|
|
if (res.code === 200) {
|
||
|
|
data.mapShow = true;
|
||
|
|
data.center.lng = res.data.longitude;
|
||
|
|
data.center.lat = res.data.latitude;
|
||
|
|
data.time = `最后定位时间：${res.data.updateTime}`;
|
||
|
|
} else {
|
||
|
|
ElMessage.error(res.msg);
|
||
|
|
data.loactionStatus = true;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
data.loactionLoading = false;
|
||
|
|
data.loactionStatus = true;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const handleClose = () => {
|
||
|
|
data.dialogVisible = false;
|
||
|
|
};
|
||
|
|
const onShowLocationDialog = (row) => {
|
||
|
|
data.dialogVisible = true;
|
||
|
|
if (row) {
|
||
|
|
data.deliveryId = row.deliveryId;
|
||
|
|
data.xqDeviceId = row.deviceId;
|
||
|
|
data.mapShow = false;
|
||
|
|
data.loactionStatus = false;
|
||
|
|
getLocation();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
defineExpose({
|
||
|
|
onShowLocationDialog,
|
||
|
|
});
|
||
|
|
</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>
|