revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: revisit:378d1b877854249f2b553b1310f176dd6e282f4b
Branches Tags
revisit:master
..
compare: revisit:399ad08a129b89eaa78d450202accff6ce4ee2f2
Branches Tags
revisit:master

No commits in common. "378d1b877854249f2b553b1310f176dd6e282f4b" and "399ad08a129b89eaa78d450202accff6ce4ee2f2" have entirely different histories.
378d1b8778 ... 399ad08a12

7 changed files with 45 additions and 85 deletions
Show Stats Expand all files Collapse all files

57
src/utils/vector-layer-utils.js
View File

@ -146,11 +146,15 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
let hoveredLineId = null;
let clickedLineId = null;
Vue.config.maps[mapId].on('click', layerId, async (e) => {
sourceLayer = e.features[0].sourceLayer;
// 排除没有 sourceLayer 的情况（如点击事件中 features 可能来自多个图层，某些图层缺乏 sourceLayer 属性会导致后续 setFeatureState 报错）
if (!sourceLayer)
if (!e.features || e.features.length <= 0)
return;
if (mapId == "workUnitMap_uuv") {
// 相关逻辑位于单位统计页面
// showUnitReport(mapId, e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
return;
}
// // 查询点击点周围的所有要素（使用边界框）
// const bbox = [
// [e.point.x - 10, e.point.y - 10], // 左上
@ -190,18 +194,21 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
// 单击时加入选择列表（用于单击 ESC 键时取消选择状态）
clickedLineIds.push(clickedLineId);
// document.removeEventListener("keydown", removeHighlight, true);
// document.addEventListener("keydown", (e) => {
// removeHighlight(e, sourceId);
// }, { once: true }); // once：一个布尔值，表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。
document.addEventListener("keydown", (e) => {
removeHighlight(e, sourceId);
}, { once: true }); // once：一个布尔值，表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。
// }, true);
}
});
// When the user moves their mouse over the state-fill layer, we'll update the feature state for the feature under the mouse.
Vue.config.maps[mapId].on('mousemove', layerId, (e) => {
sourceLayer = e.features[0].sourceLayer;
// 排除没有 sourceLayer 的情况（如点击事件中 features 可能来自多个图层，某些图层缺乏 sourceLayer 属性会导致后续 setFeatureState 报错）
if (!sourceLayer)
if (mapId == "workUnitMap_uuv")
return;
if (e.features.length <= 0)
return;
sourceLayer = e.features[0].sourceLayer;
if (hoveredLineId) {
Vue.config.maps[mapId].setFeatureState(
{ source: sourceId, sourceLayer: sourceLayer, id: hoveredLineId },
@ -227,7 +234,7 @@ export function setHighlight(layerId, sourceId, mapId = "homeMap") {
});
}
export async function showUnitReport(mapId, unit, coordinate, callbackOnClose = null) {
export async function showUnitReport(mapId, unit, coordinates) {
const result = await (await fetch(`${Vue.config.baseUrl}/ds/report/unit/total.htm?unit=${unit}`)).json();
const unitReports = result.array || [];
if (!unitReports.length) {
@ -259,7 +266,7 @@ export async function showUnitReport(mapId, unit, coordinate, callbackOnClose =
</tr>
</table>`;
showPopupDetails({ mapId, coordinate, description, maxWidth: "350px", callbackOnClose: callbackOnClose });
showPopupDetails(mapId, coordinates, description, "350px");
}
export function changeCursor(layerId, mapId = "homeMap", cursor = "pointer") {
@ -317,7 +324,7 @@ export function showSampleLineInfo(layerId, mapId = "homeMap") {
</tr>
</table>`;
showPopupDetails({ mapId, coordinate: e.lngLat, description, maxWidth: "450px" });
showPopupDetails(mapId, e.lngLat, description, "450px");
});
}
@ -362,7 +369,7 @@ export function showSampleStationInfo(layerId, mapId = "homeMap") {
</tr>
</table>`;
showPopupDetails({ mapId, coordinate: feature.geometry.coordinates, description, maxWidth: "450px" });
showPopupDetails(mapId, feature.geometry.coordinates, description, "450px");
});
}
@ -406,12 +413,12 @@ export function showTrackInfo(layerId, mapId = "homeMap") {
</tr>
</table>`;
showPopupDetails({ coordinate, mapId, description, maxWidth: "420px" });
showPopupDetails(mapId, coordinate, description, "420px");
})
});
}
export function showPopupDetails({ mapId, coordinate, description, maxWidth = "300px", closeButton = true, closeOnClick = true, options = {}, callbackOnClose }) {
export function showPopupDetails(mapId, coordinate, description, maxWidth = "300px", closeButton = true, closeOnClick = true, options = {}) {
const map = Vue.config.maps[mapId];
if (!map)
return;
@ -439,13 +446,7 @@ export function showPopupDetails({ mapId, coordinate, description, maxWidth = "3
.setOffset(10)
.setMaxWidth(maxWidth)
.addTo(map);
sharedPopup.on('close', () => {
sharedPopup = null;
// 关闭弹窗时执行回调（如有）
if (callbackOnClose && typeof callbackOnClose === "function") {
callbackOnClose();
}
});
sharedPopup.on('close', () => { sharedPopup = null; });
}
} else {
sharedPopup = new window.mapboxgl.Popup(popupOptions)
@ -454,17 +455,13 @@ export function showPopupDetails({ mapId, coordinate, description, maxWidth = "3
.setOffset(10)
.setMaxWidth(maxWidth)
.addTo(map);
sharedPopup.on('close', () => {
sharedPopup = null;
// 关闭弹窗时执行回调（如有）
if (callbackOnClose && typeof callbackOnClose === "function") {
callbackOnClose();
}
});
sharedPopup.on('close', () => { sharedPopup = null; });
}
}
export async function loadJsonLineFeature(layerId, color, geojson, mapId) {
// console.log("layerId: ",layerId);
let source = Vue.config.maps[mapId].getSource(layerId);
if (!source) {
Vue.config.maps[mapId].addSource(layerId, {
@ -554,11 +551,13 @@ export async function loadJsonPointFeature(layerId, color, geojson, text_field,
export async function highlightFeaturesByProperty(mapId, sourceId, layerId, propertyName = "sample_name", targetValue = "TARGET_VALUE") {
// 清空所有高亮状态（可选）
Vue.config.maps[mapId].querySourceFeatures(sourceId).forEach(f => {
console.log("AAAAA: ", f);
Vue.config.maps[mapId].setFeatureState({ source: sourceId, id: f.id }, { highlight: false });
});
// 标记匹配要素
Vue.config.maps[mapId].querySourceFeatures(sourceId).forEach(f => {
console.log("BBBBB: ", f);
if (f.properties && f.properties[propertyName] === targetValue) {
Vue.config.maps[mapId].setFeatureState({ source: sourceId, id: f.id }, { highlight: true });
}

7
src/views/dataSearch.vue
View File

@ -231,10 +231,13 @@ import {
import { getParamsList, getVoyageLine } from '../api/home'
import { regInfo } from '@/api/dataSearch'
import Cookies from 'js-cookie'
import {
setImageryViewModels
} from '@/utils/common'
import Vue from 'vue'
import { loadVectorLayer } from '@/utils/vector-layer-utils'
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
import { initMapbox, triggerLayerClick } from "@/utils/mapbox-utils";
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
export default {
name: 'Shuju',

12
src/views/statistics/AuvStatistics.vue
View File

@ -64,7 +64,6 @@
</template>
<script>
import Vue from 'vue'
/**
* 无人航行潜水器汇总统计页，请求 `/report/platform/auv` 系列接口；交互与遥控潜水器汇总页一致（ECharts）。
*/
@ -72,8 +71,8 @@ import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'
import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } from '../../api/statistics'
import { filterDictItems } from '../../utils/index'
import { initMapbox } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonPointFeature,showUnitReport } from '@/utils/vector-layer-utils'
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
export default {
@ -208,13 +207,6 @@ export default {
});
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_auv");
Vue.config.maps['workUnitMap_auv'].on('click', 'workUnit', async (e) => {
if (!e.features || e.features.length <= 0)
return;
// 地图点选弹窗显示单位信息
showUnitReport('workUnitMap_auv', e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
});
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1

13
src/views/statistics/HovStatistics.vue
View File

@ -64,13 +64,13 @@
</template>
<script>
import Vue from 'vue'
import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'
import { setImageryViewModels } from '../../utils/common'
import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
import { filterDictItems } from '../../utils/index'
import { initMapbox } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonPointFeature,showUnitReport } from '@/utils/vector-layer-utils'
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
export default {
@ -205,13 +205,6 @@ export default {
});
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_hov");
Vue.config.maps['workUnitMap_hov'].on('click', 'workUnit', async (e) => {
if (!e.features || e.features.length <= 0)
return;
// 地图点选弹窗显示单位信息
showUnitReport('workUnitMap_hov', e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
});
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1

12
src/views/statistics/RovStatistics.vue
View File

@ -64,7 +64,6 @@
</template>
<script>
import Vue from 'vue'
/**
* 遥控潜水器汇总统计页，请求 `/report/platform/rov` 系列接口。
*/
@ -72,8 +71,8 @@ import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'
import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } from '../../api/statistics'
import { filterDictItems } from '../../utils/index'
import { initMapbox } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonPointFeature,showUnitReport } from '@/utils/vector-layer-utils'
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
export default {
@ -208,13 +207,6 @@ export default {
});
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_rov");
Vue.config.maps['workUnitMap_rov'].on('click', 'workUnit', async (e) => {
if (!e.features || e.features.length <= 0)
return;
// 地图点选弹窗显示单位信息
showUnitReport('workUnitMap_rov', e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
});
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1

10
src/views/statistics/ShipStatistics.vue
View File

@ -70,13 +70,12 @@
</template>
<script>
import Vue from 'vue'
import BarChart from './components/BarChart.vue'
import PieChart from './components/PieChart.vue'
import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
import { getYearRange, filterDictItems } from '../../utils/index'
import { initMapbox } from '@/utils/mapbox-utils'
import { loadVectorLayer, loadJsonPointFeature, showUnitReport } from '@/utils/vector-layer-utils'
import { loadVectorLayer, loadJsonPointFeature } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator'
export default {
@ -219,13 +218,6 @@ export default {
})
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_ship')
Vue.config.maps['workUnitMap_ship'].on('click', 'workUnit', async (e) => {
if (!e.features || e.features.length <= 0)
return;
// 地图点选弹窗显示单位信息
showUnitReport('workUnitMap_ship', e.features[0].properties.unit_name, e.features[0].geometry.coordinates);
});
const typeCount = res.array.reduce((acc, unit) => {
const type = unit.unit_type
acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1

19
src/views/statistics/UuvUnitStatistics.vue
View File

@ -59,8 +59,9 @@ import Vue from 'vue'
import BarChart from './components/BarChart.vue'
import { unitTotal, hovUnit, shipUnit, shipVoyage } from '../../api/statistics'
import { getYearRange } from '../../utils/index'
import { initMapbox } from '@/utils/mapbox-utils'
import { loadJsonPointFeature, showUnitReport } from '@/utils/vector-layer-utils'
import { initMapbox, handleWheel } from '@/utils/mapbox-utils'
import { loadVectorLayer, loadJsonPointFeature, showPopupDetails, showUnitReport } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator'
/**
* @param {*} v 原始值
@ -339,24 +340,12 @@ export default {
if (!e.features || e.features.length <= 0)
return;
// 地图点选弹窗显示单位信息
showUnitReport('workUnitMap_uuv', e.features[0].properties.unit_name, e.features[0].geometry.coordinates,this.resetFilter);
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));
});
})
},
resetFilter(){
const raw = this.unitTotalRawList || []
const sel = this.selectedUnits || []
if (!sel.length) {
this.applyUnitTotalRows(raw)
return
}
const nameSet = new Set(sel.map(u => u && u.unit_name).filter(Boolean))
const filtered = raw.filter(row => nameSet.has(row.unit_name))
this.applyUnitTotalRows(filtered)
}
}
}
</script>