优化单位统计页面地图点选交互逻辑
This commit is contained in:
parent
e783375fbf
commit
399ad08a12
|
|
@ -150,7 +150,8 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
|
|||
return;
|
||||
|
||||
if (mapId == "workUnitMap_uuv") {
|
||||
showUnitReport(mapId, e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
|
||||
// 相关逻辑位于单位统计页面
|
||||
// showUnitReport(mapId, e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -166,9 +167,6 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
|
|||
// // const featuresByLayer = groupFeaturesByLayer(allFeatures);
|
||||
// // console.log('点击位置附近的所有要素:', featuresByLayer);
|
||||
|
||||
// console.log(e.features.length, e.features);
|
||||
// console.log("1 e: ", e);
|
||||
|
||||
let feature = e.features[0];
|
||||
if (e.features.length > 1 && e.options)
|
||||
feature = e.features.filter(f => f.properties.sample_name == e.options.sample_name)[0];
|
||||
|
|
@ -193,9 +191,6 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
|
|||
clickedLineIds = clickedLineIds.filter((item) => item !== clickedLineId);
|
||||
} else {
|
||||
Vue.config.maps[mapId].setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: clickedLineId }, { click: true });
|
||||
// 显示信息框
|
||||
// if (sourceId === 'GMSL Cable Data')
|
||||
// document.getElementById("cable-overlay")!.style.display = 'block';
|
||||
// 单击时加入选择列表（用于单击 ESC 键时取消选择状态）
|
||||
clickedLineIds.push(clickedLineId);
|
||||
// document.removeEventListener("keydown", removeHighlight, true);
|
||||
|
|
@ -246,27 +241,28 @@ export async function showUnitReport(mapId, unit, coordinates) {
|
|||
alert("未查询到相关单位的统计信息");
|
||||
return;
|
||||
}
|
||||
|
||||
const description = `
|
||||
<table class="popup-table" style="min-width:320px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colspan="2">参航信息</td>
|
||||
<td colspan="2">单位参航信息</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td colspan="2">单位名称: <b>${unitReports[0].unit_name}</b></td>
|
||||
<td colspan="2">单位名称: <b>${unitReports[0].unit_name}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>首潜人数: <b>${unitReports[0].f_drving_total || ""}</b></td>
|
||||
<td>首次参航人数: <b>${unitReports[0].f_voyage_total || ""}</b></td>
|
||||
<td>参航次数: <b>${unitReports[0].voyage_total || "/"}</b></td>
|
||||
<td>参航天数: <b>${unitReports[0].voyage_days || "/"}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>参航次数: <b>${unitReports[0].voyage_total || ""}</b></td>
|
||||
<td>参航天数: <b>${unitReports[0].voyage_days || ""}</b></td>
|
||||
<td>参航人数: <b>${unitReports[0].member_total || "/"}</b></td>
|
||||
<td>下潜次数: <b>${unitReports[0].drving_total || "/"}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>参航人数: <b>${unitReports[0].member_total || ""}</b></td>
|
||||
<td>下潜次数: <b>${unitReports[0].drving_total || ""}</b></td>
|
||||
<td>首潜人数: <b>${unitReports[0].f_drving_total || "/"}</b></td>
|
||||
<td>首次参航人数: <b>${unitReports[0].f_voyage_total || "/"}</b></td>
|
||||
</tr>
|
||||
</table>`;
|
||||
|
||||
|
|
@ -341,9 +337,6 @@ export function showSampleStationInfo(layerId, mapId = "homeMap") {
|
|||
// if (typeof e.preventDefault === "function")
|
||||
// e.preventDefault();
|
||||
|
||||
// console.log(e.features.length, e.features);
|
||||
// console.log("2 e: ", e);
|
||||
|
||||
let feature = e.features[0];
|
||||
if (e.features.length > 1)
|
||||
feature = e.features.filter(f => f.properties.sample_name == e.options.sample_name)[0];
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ import BarChart from './components/BarChart.vue'
|
|||
import { unitTotal, hovUnit, shipUnit, shipVoyage } from '../../api/statistics'
|
||||
import { getYearRange } from '../../utils/index'
|
||||
import { initMapbox, handleWheel } from '@/utils/mapbox-utils'
|
||||
import { loadVectorLayer, loadJsonPointFeature, showPopupDetails,showUnitReport } from '@/utils/vector-layer-utils'
|
||||
import { loadVectorLayer, loadJsonPointFeature, showPopupDetails, showUnitReport } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator'
|
||||
|
||||
/**
|
||||
|
|
@ -318,23 +318,32 @@ export default {
|
|||
const geojson = {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
}
|
||||
; (res.array || []).forEach(element => {
|
||||
geojson.features.push({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [element.unit_lon, element.unit_lat]
|
||||
},
|
||||
properties: {
|
||||
unit_name: element.unit_name,
|
||||
unit_type: element.unit_type,
|
||||
create_time: element.create_time,
|
||||
tsy_id: element.tsy_id
|
||||
}
|
||||
})
|
||||
};
|
||||
(res.array || []).forEach(element => {
|
||||
geojson.features.push({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [element.unit_lon, element.unit_lat]
|
||||
},
|
||||
properties: {
|
||||
unit_name: element.unit_name,
|
||||
unit_type: element.unit_type,
|
||||
create_time: element.create_time,
|
||||
tsy_id: element.tsy_id
|
||||
}
|
||||
})
|
||||
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_uuv')
|
||||
});
|
||||
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_uuv');
|
||||
|
||||
Vue.config.maps['workUnitMap_uuv'].on('click', 'workUnit', async (e) => {
|
||||
if (!e.features || e.features.length <= 0)
|
||||
return;
|
||||
// 地图点选弹窗显示单位信息
|
||||
showUnitReport('workUnitMap_uuv', e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
|
||||
// 同步更新单位统计图
|
||||
this.applyUnitTotalRows((this.unitTotalRawList || []).filter(row => row.unit_name === e.features[0].properties.unit_name));
|
||||
});
|
||||
})
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue