This commit is contained in:
磷叶 2025-05-15 09:48:58 +08:00
parent ce110afd33
commit b3143c1b18
7 changed files with 100 additions and 66 deletions

View File

@ -1,26 +1,15 @@
import { debounce } from "@/utils/index";
export default {
data() {
return {
areaPolygons: new Map(),
}
},
watch: {
// 监听区域数据变化
area: {
handler: debounce(function() {
this.renderAll();
}, 300),
deep: true
},
},
methods: {
// 渲染运营区边界
renderAreaBoundary() {
this.clearOverlays(this.areaPolygons);
if (!this.map || !this.area.boundaryStr) {
return;
};

View File

@ -1,6 +1,5 @@
import { AreaSubStatus } from "@/utils/enums";
import { debounce } from "@/utils/index";
import { AREA_STYLES, HIGHLIGHT_STYLES, LABEL_STYLES, MARKER_ICONS } from "@/views/bst/areaSub/components/AreaMap";
export default {
@ -17,13 +16,6 @@ export default {
},
watch: {
// 监听子区域列表变化
areaSubList: {
handler: debounce(function() {
this.renderAll();
}, 300),
deep: true
},
// 监听高亮状态变化
highlightedAreaId: {
handler(newVal, oldVal) {

View File

@ -363,6 +363,11 @@ export default {
this.loadingArea = true;
getArea(this.queryParams.areaId).then(response => {
this.area = response.data;
this.$nextTick(() => {
if (this.$refs.map) {
this.$refs.map.renderAreaBoundary();
}
});
if (!this.enableEdit) {
this.getDeviceList();
@ -397,6 +402,11 @@ export default {
listAreaSubByAreaId(this.queryParams).then(response => {
this.areaSubList = response.data;
this.loading = false;
this.$nextTick(() => {
if (this.$refs.map) {
this.$refs.map.renderSubAreas();
}
});
});
},
/** 搜索按钮操作 */

View File

@ -85,6 +85,11 @@ export default {
this.loading = true;
getArea(this.areaId).then(res => {
this.area = res.data;
this.$nextTick(() => {
if (this.$refs.map) {
this.$refs.map.renderAreaBoundary();
}
});
}).finally(() => {
this.loading = false;
});
@ -97,6 +102,11 @@ export default {
}
listAreaSubByAreaId({ areaId: this.areaId }).then(res => {
this.areaSubList = res.data;
this.$nextTick(() => {
if (this.$refs.map) {
this.$refs.map.renderSubAreas();
}
});
});
},
//

View File

@ -2,7 +2,7 @@
<div v-loading="loading">
<el-row type="flex">
<el-date-picker
v-if="queryParams.timeRange != null && queryParams.timeRange[0] != null && queryParams.timeRange[1] != null"
v-if="queryParams.operTimeRange != null && queryParams.operTimeRange[0] != null && queryParams.operTimeRange[1] != null"
v-model="queryParams.operTimeRange"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
@ -26,7 +26,14 @@
<dict-tag :options="dict.type.sys_common_status" :value="log.status" size="mini" style="margin-left: 4px;"/>
</div>
<div class="right">
<el-link type="success" style="font-size: 12px;margin-right: 4px;" :underline="false" icon="el-icon-location" @click="handleLogLocation(log)">查看定位</el-link>
<el-link
v-if="getLocationType(log)"
type="success"
style="font-size: 12px;margin-right: 4px;"
:underline="false"
icon="el-icon-location"
@click="handleLogLocation(log)"
>{{ getLocationType(log) }}</el-link>
<user-link :id="log.operUserId" :text="log.operName" size="mini"/>
</div>
</div>
@ -102,6 +109,21 @@ export default {
return (log) => {
return log.bizType == LogBizType.ORDER && !isEmpty(log.bizIds)
}
},
getLocationType() {
return (log) => {
const hasDeviceLocation = !isEmpty(log.deviceLon) && !isEmpty(log.deviceLat);
const hasPhoneLocation = !isEmpty(log.paramLon) && !isEmpty(log.paramLat);
if (hasDeviceLocation && hasPhoneLocation) {
return '设备+手机定位';
} else if (hasDeviceLocation) {
return '设备定位';
} else if (hasPhoneLocation) {
return '手机定位';
}
return null;
}
}
},
methods: {
@ -193,8 +215,6 @@ export default {
font-size: 12px;
color: #F56C6C;
line-height: 1.4;
background-color: #FEF0F0;
padding: 4px 8px;
border-radius: 2px;
margin-top: 4px;
}

View File

@ -4,7 +4,7 @@
:visible.sync="dialogVisible"
width="1000px"
append-to-body
@open="initMap"
@open="handleDialogOpen"
>
<div class="map-container" id="mapContainer"></div>
<div class="legend">
@ -107,8 +107,20 @@ export default {
},
methods: {
...mapMethods,
handleDialogOpen() {
this.$nextTick(() => {
this.initMap();
});
},
async initMap() {
try {
//
const container = document.getElementById('mapContainer');
if (!container) {
console.error('地图容器不存在');
return;
}
if (!this.map) {
this.AMap = await AMapLoader.load({
key: globalConfig.aMap.key,
@ -120,73 +132,74 @@ export default {
zoom: 13,
viewMode: '2D',
touchZoom: false,
dragEnable: true
dragEnable: true,
center: [120.35218, 26.944335] //
});
this.map.addControl(new this.AMap.ToolBar());
this.map.addControl(new this.AMap.Scale());
console.log("area", this.area);
if (this.area) {
this.renderAreaBoundary();
}
console.log("areaSubList", this.areaSubList);
if (this.areaSubList) {
if (this.areaSubList && this.areaSubList.length > 0) {
this.renderSubAreas();
}
}
//
this.clearMarkers();
let hasValidLocation = false;
console.log(this.deviceLocation, this.phoneLocation);
let validMarkers = [];
//
const deviceLon = parseFloat(this.deviceLocation.lon);
const deviceLat = parseFloat(this.deviceLocation.lat);
if (!isNaN(deviceLon) && !isNaN(deviceLat)) {
this.deviceMarker = new this.AMap.Marker({
position: [deviceLon, deviceLat],
content: `<div class="marker-content"><i class="el-icon-bicycle" style="color: #67C23A; font-size: 25px;"></i></div>`,
offset: new this.AMap.Pixel(-12, -12),
title: '设备位置'
});
this.markers.push(this.deviceMarker);
if (this.showDevice) {
this.map.add(this.deviceMarker);
if (this.deviceLocation && this.deviceLocation.lon && this.deviceLocation.lat) {
const deviceLon = parseFloat(this.deviceLocation.lon);
const deviceLat = parseFloat(this.deviceLocation.lat);
if (!isNaN(deviceLon) && !isNaN(deviceLat)) {
this.deviceMarker = new this.AMap.Marker({
position: [deviceLon, deviceLat],
content: `<div class="marker-content"><i class="el-icon-bicycle" style="color: #67C23A; font-size: 25px;"></i></div>`,
offset: new this.AMap.Pixel(-12, -12),
title: '设备位置'
});
this.markers.push(this.deviceMarker);
if (this.showDevice) {
this.map.add(this.deviceMarker);
validMarkers.push(this.deviceMarker);
}
}
hasValidLocation = true;
}
//
const phoneLon = parseFloat(this.phoneLocation.lon);
const phoneLat = parseFloat(this.phoneLocation.lat);
if (!isNaN(phoneLon) && !isNaN(phoneLat)) {
this.phoneMarker = new this.AMap.Marker({
position: [phoneLon, phoneLat],
content: `<div class="marker-content"><i class="el-icon-mobile-phone" style="color: #409EFF; font-size: 25px;"></i></div>`,
offset: new this.AMap.Pixel(-12, -12),
title: '手机位置'
});
this.markers.push(this.phoneMarker);
if (this.showPhone) {
this.map.add(this.phoneMarker);
if (this.phoneLocation && this.phoneLocation.lon && this.phoneLocation.lat) {
const phoneLon = parseFloat(this.phoneLocation.lon);
const phoneLat = parseFloat(this.phoneLocation.lat);
if (!isNaN(phoneLon) && !isNaN(phoneLat)) {
this.phoneMarker = new this.AMap.Marker({
position: [phoneLon, phoneLat],
content: `<div class="marker-content"><i class="el-icon-mobile-phone" style="color: #409EFF; font-size: 25px;"></i></div>`,
offset: new this.AMap.Pixel(-12, -12),
title: '手机位置'
});
this.markers.push(this.phoneMarker);
if (this.showPhone) {
this.map.add(this.phoneMarker);
validMarkers.push(this.phoneMarker);
}
}
hasValidLocation = true;
}
if (hasValidLocation) {
//
this.map.setFitView(this.markers, {
padding: [50, 50, 50, 50]
//
if (validMarkers.length > 0) {
this.$nextTick(() => {
this.map.setFitView(validMarkers, {
padding: [50, 50, 50, 50]
});
});
} else {
//
this.map.setCenter([120.35218, 26.944335]);
this.$message.warning('没有有效的位置信息');
//
this.$message.warning('没有可用的位置信息');
}
} catch (error) {
console.error('地图初始化失败:', error);

View File

@ -223,7 +223,7 @@
<el-tab-pane label="车辆轨迹" v-if="checkPermi(['bst:locationLog:list'])">
<device-location
:query="{orderId: detail.id, timeRange: orderTimeRange}"
:operQuery="{bizId: detail.id, bizType: LogBizType.ORDER, timeRange: orderTimeRange}"
:operQuery="{bizId: detail.id, bizType: LogBizType.ORDER, operTimeRange: orderTimeRange}"
:area-id="detail.areaId"
/>
</el-tab-pane>