地图重复渲染图标问题修改
This commit is contained in:
parent
82e10762a4
commit
fce1c6817e
@ -136,7 +136,7 @@
|
||||
|
||||
<div class="f1 display ai_center jc_end" style="gap: 8px">
|
||||
<span class="responsibility-name">{{ hazardData.roadKeeper.name }}</span>
|
||||
<span class="responsibility-name" style="width: 100px;">{{ hazardData.roadKeeper.phone }}</span>
|
||||
<span class="responsibility-name" style="width: 100px">{{ hazardData.roadKeeper.phone }}</span>
|
||||
<span class="responsibility-frequency">{{ hazardData.roadKeeper.frequency }}</span>
|
||||
<div class="action-btns">
|
||||
<div class="action-btn" @click="handleVideo(hazardData.roadKeeper)" title="视频">
|
||||
@ -331,13 +331,19 @@ const handleVideo = (item) => {
|
||||
// 语音通话
|
||||
const handleVoice = (item) => {
|
||||
console.log('语音通话:', item)
|
||||
emit('voice', item)
|
||||
emit('voice', {
|
||||
...item,
|
||||
id: hazardData.value.id,
|
||||
})
|
||||
}
|
||||
|
||||
// 拨打电话
|
||||
const handleCall = (item) => {
|
||||
console.log('拨打电话:', item)
|
||||
emit('call', item)
|
||||
emit('call', {
|
||||
...item,
|
||||
id: hazardData.value.id,
|
||||
})
|
||||
}
|
||||
|
||||
// 监听visible变化
|
||||
|
||||
@ -344,7 +344,7 @@ const dialogItems = computed(() => {
|
||||
.info-label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: vw(13);
|
||||
// min-width: vw(100);
|
||||
max-width: vw(150);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -412,17 +412,22 @@ const filterDataByCounty = (dataList, flag, options) => {
|
||||
item[countyField] = '两江新区';
|
||||
}
|
||||
|
||||
// 根据受影响区县列表进行过滤
|
||||
affectedCountyData.value.sortedList.forEach(j => {
|
||||
const matchValue = item[matchField];
|
||||
if (flag && matchValue && j.name && matchValue.includes(j.name)) {
|
||||
item.COORDINATE_POINT = coordinateParser(item);
|
||||
filteredData.push(item);
|
||||
} else if (!flag) {
|
||||
const matchValue = item[matchField];
|
||||
|
||||
if (!flag) {
|
||||
// 不过滤，直接添加所有数据
|
||||
item.COORDINATE_POINT = coordinateParser(item);
|
||||
filteredData.push(item);
|
||||
} else {
|
||||
// 根据受影响区县列表进行过滤
|
||||
const isMatched = affectedCountyData.value.sortedList.some(j => {
|
||||
return matchValue && j.name && matchValue.includes(j.name);
|
||||
});
|
||||
if (isMatched) {
|
||||
item.COORDINATE_POINT = coordinateParser(item);
|
||||
filteredData.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return filteredData;
|
||||
@ -432,6 +437,12 @@ const affectedBridgeData = ref([]);
|
||||
// 获取受影响桥梁数据
|
||||
const getAffectedBridgeData = async flag => {
|
||||
try {
|
||||
// 检查桥梁标记是否已存在，如果存在则不加载接口
|
||||
if (hasProjectMarkersByType('bridge')) {
|
||||
console.log('类型为 bridge 的标记已存在，跳过接口调用');
|
||||
return [];
|
||||
}
|
||||
|
||||
const timeParams = getTimeParams();
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/map/bridge',
|
||||
@ -459,6 +470,12 @@ const tunnelInfoDialogRef = ref([]);
|
||||
// 获取受影响隧道数据
|
||||
const getAffectedTunnelData = async flag => {
|
||||
try {
|
||||
// 检查隧道标记是否已存在，如果存在则不加载接口
|
||||
if (hasProjectMarkersByType('tunnel')) {
|
||||
console.log('类型为 tunnel 的标记已存在，跳过接口调用');
|
||||
return [];
|
||||
}
|
||||
|
||||
const timeParams = getTimeParams();
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/map/tunnel',
|
||||
@ -487,6 +504,12 @@ const getAffectedTunnelData = async flag => {
|
||||
const affectedProjectData = ref([]);
|
||||
const getAffectedProjectData = async flag => {
|
||||
try {
|
||||
// 检查项目标记是否已存在，如果存在则不加载接口
|
||||
if (hasProjectMarkersByType('project')) {
|
||||
console.log('类型为 project 的标记已存在，跳过接口调用');
|
||||
return [];
|
||||
}
|
||||
|
||||
const timeParams = getTimeParams();
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/weather-warning/affected-object/project',
|
||||
@ -552,6 +575,14 @@ const getAffectedRoadSectionData = async flag => {
|
||||
} else if (props.roadItem.label == '低风险路段') {
|
||||
riskLevel = '低风险';
|
||||
}
|
||||
|
||||
// 检查该等级的路段标记是否已存在，如果存在则不加载接口
|
||||
const typeKey = `road-${riskLevel}`;
|
||||
if (hasProjectMarkersByType(typeKey)) {
|
||||
console.log(`类型为 ${typeKey} 的标记已存在，跳过接口调用`);
|
||||
return [];
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
// url: '/snow-ops-platform/weather-warning/affected-object/road-section',
|
||||
url: '/snow-ops-platform/risk-point/road-section',
|
||||
@ -608,7 +639,12 @@ const getAffectedRoadSectionData = async flag => {
|
||||
}
|
||||
emit('update:roadvalArr ==== 风险点总数', roadvalArr.value);
|
||||
|
||||
addProjectMarkers(affectedRoadSectionData.value, img, 'road');
|
||||
// 给数据添加风险等级字段，确保 addProjectMarkers 能正确识别类型键
|
||||
const dataWithRiskLevel = affectedRoadSectionData.value.map(item => ({
|
||||
...item,
|
||||
riskLevel: riskLevel
|
||||
}));
|
||||
addProjectMarkers(dataWithRiskLevel, img, 'road');
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
@ -621,6 +657,12 @@ const emergencyForceData = ref([]);
|
||||
// 获取应急力量数据
|
||||
const getEmergencyForceData = async () => {
|
||||
try {
|
||||
// 检查应急力量标记是否已存在，如果存在则不加载接口
|
||||
if (hasProjectMarkersByType('emergency')) {
|
||||
console.log('类型为 emergency 的标记已存在，跳过接口调用');
|
||||
return [];
|
||||
}
|
||||
|
||||
const timeParams = getTimeParams();
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/yhYjll/listForcesAndMaterials',
|
||||
@ -653,6 +695,12 @@ const dangerProjectData = ref([]);
|
||||
// 获取危大工程数据
|
||||
const getDangerProjectData = async flag => {
|
||||
try {
|
||||
// 检查危大工程标记是否已存在，如果存在则不加载接口
|
||||
if (hasProjectMarkersByType('engineering')) {
|
||||
console.log('类型为 engineering 的标记已存在，跳过接口调用');
|
||||
return [];
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/dangerProjectInfo/listAll',
|
||||
method: 'GET',
|
||||
@ -696,6 +744,30 @@ const riskPointStats = ref({
|
||||
// 获取风险点数据
|
||||
const getRiskPointData = async (riskLevel, item) => {
|
||||
try {
|
||||
// 根据风险等级和在红线内外确定类型键
|
||||
let riskTypeKey = 'riskPoint';
|
||||
if (riskLevel) {
|
||||
if (riskLevel.includes('重大') && item.isWithinRedLine === '是') {
|
||||
riskTypeKey = 'riskPoint-重大路内';
|
||||
} else if (riskLevel.includes('重大') && item.isWithinRedLine === '否') {
|
||||
riskTypeKey = 'riskPoint-重大路外';
|
||||
} else if (riskLevel.includes('较大') && item.isWithinRedLine === '是') {
|
||||
riskTypeKey = 'riskPoint-较大路内';
|
||||
} else if (riskLevel.includes('较大') && item.isWithinRedLine === '否') {
|
||||
riskTypeKey = 'riskPoint-较大路外';
|
||||
} else if (riskLevel.includes('一般') && item.isWithinRedLine === '是') {
|
||||
riskTypeKey = 'riskPoint-一般路内';
|
||||
} else if (riskLevel.includes('一般') && item.isWithinRedLine === '否') {
|
||||
riskTypeKey = 'riskPoint-一般路外';
|
||||
}
|
||||
}
|
||||
|
||||
// 检查该类型的风险点标记是否已存在，如果存在则不加载接口
|
||||
if (hasProjectMarkersByType(riskTypeKey)) {
|
||||
console.log(`类型为 ${riskTypeKey} 的标记已存在，跳过接口调用`);
|
||||
return [];
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/risk-point',
|
||||
method: 'GET',
|
||||
@ -735,9 +807,13 @@ const getRiskPointData = async (riskLevel, item) => {
|
||||
isWithinRedLine: item.isWithinRedLine,
|
||||
value: riskPointData.value.length,
|
||||
});
|
||||
// 清除旧的风险点标记，避免重复渲染
|
||||
clearProjectMarkers();
|
||||
addProjectMarkers(riskPointData.value, iconUrl, 'riskPoint');
|
||||
// 给数据添加风险等级和在红线内外字段，确保 addProjectMarkers 能正确识别类型键
|
||||
const dataWithRiskInfo = riskPointData.value.map(riskItem => ({
|
||||
...riskItem,
|
||||
riskLevel: riskLevel,
|
||||
isWithinRedLine: item.isWithinRedLine
|
||||
}));
|
||||
addProjectMarkers(dataWithRiskInfo, iconUrl, 'riskPoint');
|
||||
// 获取风险点统计数据
|
||||
} else {
|
||||
console.warn('没有获取到风险点数据或返回码错误:', res);
|
||||
@ -749,23 +825,47 @@ const getRiskPointData = async (riskLevel, item) => {
|
||||
}
|
||||
};
|
||||
|
||||
let projectMarkers = []; // 存储项目标记
|
||||
// 按类型存储项目标记，避免同类型重复刷新
|
||||
// 格式: { 'road-高风险': [...], 'road-较高风险': [...], 'riskPoint-高风险': [...], ... }
|
||||
let projectMarkersMap = new Map();
|
||||
|
||||
// 清除项目标记
|
||||
// 清除所有项目标记
|
||||
const clearProjectMarkers = () => {
|
||||
projectMarkers.forEach(marker => {
|
||||
if (mapInstance) {
|
||||
mapInstance.removeLayer(marker);
|
||||
}
|
||||
projectMarkersMap.forEach((markers, type) => {
|
||||
markers.forEach(marker => {
|
||||
if (mapInstance) {
|
||||
mapInstance.removeLayer(marker);
|
||||
}
|
||||
});
|
||||
});
|
||||
projectMarkersMap.clear();
|
||||
clearCountyCardMarkers();
|
||||
projectMarkers = [];
|
||||
|
||||
// 关闭所有弹窗
|
||||
mapInfoDialogVisible.value = false;
|
||||
centerCardVisible.value = false;
|
||||
};
|
||||
|
||||
// 清除指定类型的项目标记
|
||||
const clearProjectMarkersByType = (typeKey) => {
|
||||
const markers = projectMarkersMap.get(typeKey);
|
||||
if (markers) {
|
||||
markers.forEach(marker => {
|
||||
if (mapInstance) {
|
||||
mapInstance.removeLayer(marker);
|
||||
}
|
||||
});
|
||||
projectMarkersMap.delete(typeKey);
|
||||
console.log(`已清除类型为 ${typeKey} 的标记，共 ${markers.length} 个`);
|
||||
}
|
||||
};
|
||||
|
||||
// 检查指定类型的项目标记是否已存在
|
||||
const hasProjectMarkersByType = (typeKey) => {
|
||||
const markers = projectMarkersMap.get(typeKey);
|
||||
return markers && markers.length > 0;
|
||||
};
|
||||
|
||||
// 根据数据类型获取对应的图标
|
||||
const getIconByType = (item, type) => {
|
||||
// 如果是风险点类型，根据风险等级和是否在红线内返回对应图标
|
||||
@ -811,8 +911,50 @@ const addProjectMarkers = (data, iconUrl, type = 'project') => {
|
||||
return;
|
||||
}
|
||||
|
||||
// // 清除之前的标记
|
||||
// clearProjectMarkers();
|
||||
// 根据类型和等级生成类型键，用于区分不同类型的标记
|
||||
// 例如: 'road-高风险', 'road-较高风险', 'riskPoint-高风险', 'project', 'tunnel', 'bridge'
|
||||
let typeKey = type;
|
||||
|
||||
// 对于路段类型，从数据中解析风险等级
|
||||
if (type === 'road' && data.length > 0) {
|
||||
const riskLevel = data[0].GL1_FXDJ || data[0].riskLevel || '';
|
||||
if (riskLevel) {
|
||||
typeKey = `road-${riskLevel}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 对于风险点类型，从数据中解析风险等级和在红线内外
|
||||
if (type === 'riskPoint' && data.length > 0) {
|
||||
const riskLevel = data[0].GL1_FXDJ || data[0].riskLevel || '';
|
||||
const isWithinRedLine = data[0].GL1_SFHXN || data[0].isWithinRedLine || '';
|
||||
if (riskLevel) {
|
||||
// 根据风险等级和在红线内外确定类型键
|
||||
if (riskLevel.includes('重大') && isWithinRedLine === '是') {
|
||||
typeKey = 'riskPoint-重大路内';
|
||||
} else if (riskLevel.includes('重大') && isWithinRedLine === '否') {
|
||||
typeKey = 'riskPoint-重大路外';
|
||||
} else if (riskLevel.includes('较大') && isWithinRedLine === '是') {
|
||||
typeKey = 'riskPoint-较大路内';
|
||||
} else if (riskLevel.includes('较大') && isWithinRedLine === '否') {
|
||||
typeKey = 'riskPoint-较大路外';
|
||||
} else if (riskLevel.includes('一般') && isWithinRedLine === '是') {
|
||||
typeKey = 'riskPoint-一般路内';
|
||||
} else if (riskLevel.includes('一般') && isWithinRedLine === '否') {
|
||||
typeKey = 'riskPoint-一般路外';
|
||||
} else {
|
||||
typeKey = `riskPoint-${riskLevel}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 如果该类型的标记已存在，直接返回，避免重复渲染
|
||||
if (hasProjectMarkersByType(typeKey)) {
|
||||
console.log(`类型为 ${typeKey} 的标记已存在，跳过添加`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 存储新添加的标记
|
||||
const newMarkers = [];
|
||||
|
||||
// 遍历数据添加标记
|
||||
data.forEach(item => {
|
||||
@ -856,7 +998,7 @@ const addProjectMarkers = (data, iconUrl, type = 'project') => {
|
||||
});
|
||||
|
||||
marker.addTo(mapInstance);
|
||||
projectMarkers.push(marker);
|
||||
newMarkers.push(marker);
|
||||
} else {
|
||||
console.warn('无效的坐标:', item.COORDINATE_POINT, item);
|
||||
}
|
||||
@ -865,7 +1007,9 @@ const addProjectMarkers = (data, iconUrl, type = 'project') => {
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`已添加 ${projectMarkers.length} 个项目标记`);
|
||||
// 将新标记存储到对应类型中
|
||||
projectMarkersMap.set(typeKey, newMarkers);
|
||||
console.log(`已添加 ${newMarkers.length} 个类型为 ${typeKey} 的标记`);
|
||||
};
|
||||
|
||||
// 确定主要预警颜色（出现最多的预警等级）
|
||||
|
||||
@ -333,15 +333,15 @@ export const openVideoConference = async (item) => {
|
||||
phone: item.phone,
|
||||
},
|
||||
})
|
||||
const userId = 1279134
|
||||
if (res.code === '00000') {
|
||||
// const userId = res.data
|
||||
// const userId = 1279134
|
||||
if (res.code === '00000' && res.data != null) {
|
||||
const userId = res.data
|
||||
const url = `taurusykz://taurusclient/action/avmeeting/conferenceCreateByIds?title=重庆渝路畅行风险预警&isVideoConference=true&calleeStaffIds=${userId}`
|
||||
window.location.href = url
|
||||
// 监听用户点击"打开"按钮后记录日志
|
||||
let jsobj = {
|
||||
name: item.name,
|
||||
phone: item.phone,
|
||||
userName: item.name,
|
||||
userPhone: item.phone,
|
||||
id: item.id,
|
||||
userId: userId,
|
||||
text: '打开视频会议',
|
||||
@ -381,8 +381,8 @@ export const openVoiceConference = async (item) => {
|
||||
window.location.href = url
|
||||
// 监听用户点击"打开"按钮后记录日志
|
||||
let jsobj = {
|
||||
name: item.name,
|
||||
phone: item.phone,
|
||||
userName: item.name,
|
||||
userPhone: item.phone,
|
||||
id: item.id,
|
||||
userId: userId,
|
||||
text: '打开语音通话',
|
||||
@ -408,8 +408,8 @@ export const opencallConference = async (item) => {
|
||||
}
|
||||
// 监听用户点击"打开"按钮后记录日志
|
||||
let jsobj = {
|
||||
name: item.name,
|
||||
phone: item.phone,
|
||||
userName: item.name,
|
||||
userPhone: item.phone,
|
||||
id: item.id,
|
||||
userId: '',
|
||||
text: '拨打电话',
|
||||
|
||||
@ -363,11 +363,19 @@ const chongqingMapRef = ref(null)
|
||||
// 切换导航项时触发
|
||||
const changeActiveIndex = (index) => {
|
||||
activeitem.value = index
|
||||
console.log('切换导航项:', index)
|
||||
|
||||
if (index.label === '路段') {
|
||||
showRoadStats.value = true
|
||||
} else {
|
||||
showRoadStats.value = false
|
||||
}
|
||||
}
|
||||
const roadItem = ref({})
|
||||
const showRoadStats = ref(false)
|
||||
const roadItemClick = (item) => {
|
||||
console.log('点击路段:', item)
|
||||
roadItem.value = {}
|
||||
roadItem.value = item
|
||||
showRoadStats.value = true
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user