debug
This commit is contained in:
parent
ce110afd33
commit
b3143c1b18
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 点击日志
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user