From 7eb2abf43167d9db3fca2e7958b90ff1bea0cead Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期一, 03 三月 2025 13:54:31 +0800
Subject: [PATCH] 污染溯源模块编写中
---
src/stores/satellite-grid.js | 14 +-
src/views/satellitetelemetry/SatelliteTelemetry.vue | 35 +++++--
src/components/grid/GridSearch.vue | 74 ++++++++++++++
src/views/dataproduct/component/ProductMake.vue | 4
src/components.d.ts | 2
src/views/HomePage.vue | 13 +-
src/views/satellitetelemetry/PollutionTrace.vue | 35 +++++++
src/views/satellitetelemetry/SatelliteProxy.js | 48 ++++++++-
src/stores/grid-info.js | 34 +-----
src/views/satellitetelemetry/component/SatelliteMixTool.vue | 20 ++--
10 files changed, 211 insertions(+), 68 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 7cd7be8..2431e7a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,7 +12,6 @@
CardButton: typeof import('./components/CardButton.vue')['default']
CardDialog: typeof import('./components/CardDialog.vue')['default']
ConfigManage: typeof import('./components/map/ConfigManage.vue')['default']
- copy: typeof import('./components/search/OptionAOD.vue')['default']
CoreHeader: typeof import('./components/core/CoreHeader.vue')['default']
CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
DataSummary: typeof import('./components/monitor/DataSummary.vue')['default']
@@ -51,6 +50,7 @@
FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']
FactorTrend: typeof import('./components/monitor/FactorTrend.vue')['default']
GaugeChart: typeof import('./components/chart/GaugeChart.vue')['default']
+ GridSearch: typeof import('./components/grid/GridSearch.vue')['default']
HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default']
MapLocation: typeof import('./components/map/MapLocation.vue')['default']
MapScene: typeof import('./components/map/MapScene.vue')['default']
diff --git a/src/components/grid/GridSearch.vue b/src/components/grid/GridSearch.vue
new file mode 100644
index 0000000..c9d90a6
--- /dev/null
+++ b/src/components/grid/GridSearch.vue
@@ -0,0 +1,74 @@
+<template>
+ <CardDialog
+ v-model="dialogVisible"
+ title="缃戞牸淇℃伅"
+ draggable
+ :modal="false"
+ width="300px"
+ >
+ <template #default>
+ <el-form
+ :inline="false"
+ ref="formRef"
+ label-position="right"
+ label-width="100px"
+ >
+ <el-form-item label="缃戞牸缂栧彿锛�">
+ <div>
+ {{ data.cellIndex }}
+ </div>
+ </el-form-item>
+ <el-form-item label="缁忕含搴︼細">
+ <div>
+ {{ data.longitude + ', ' + data.latitude }}
+ </div>
+ </el-form-item>
+ <el-form-item label="PM2.5锛�">
+ <div>
+ {{ data.pm25 + ' 渭g/m鲁' }}
+ </div>
+ </el-form-item>
+ <el-form-item label="鍥涜嚦鑼冨洿锛�">
+ <div>/</div>
+ </el-form-item>
+ </el-form>
+ </template>
+ <template #footer> </template>
+ </CardDialog>
+</template>
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useGridStore } from '@/stores/grid-info';
+
+const gridStore = useGridStore();
+
+const dialogVisible = ref(false);
+
+const data = computed(() => {
+ if (gridStore.selectedGridCellAndDataDetail) {
+ return {
+ cellIndex: gridStore.selectedGridCellAndDataDetail.gridCell.cellIndex,
+ longitude: gridStore.selectedGridCellAndDataDetail.gridCell.longitude,
+ latitude: gridStore.selectedGridCellAndDataDetail.gridCell.latitude,
+ pm25: gridStore.selectedGridCellAndDataDetail.gridDataDetail.pm25
+ };
+ } else {
+ return {
+ cellIndex: '/',
+ longitude: '/',
+ latitude: '/',
+ pm25: '/'
+ };
+ }
+});
+
+watch(
+ () => gridStore.selectedGridCellAndDataDetail,
+ (nv, ov) => {
+ if (nv != ov) {
+ dialogVisible.value = true;
+ }
+ },
+ { deep: true }
+);
+</script>
diff --git a/src/stores/grid-info.js b/src/stores/grid-info.js
index 7abfcbb..c193329 100644
--- a/src/stores/grid-info.js
+++ b/src/stores/grid-info.js
@@ -1,29 +1,11 @@
-// import { ref } from 'vue';
-// import { defineStore } from 'pinia';
-// import { useFetchData } from '@/composables/fetchData';
-// import sceneInfoApi from '@/api/sceneInfoApi';
-// import { useToolboxStore } from '@/stores/toolbox';
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
-// const toolboxStore = useToolboxStore();
+// 璧拌埅璁惧
+export const useGridStore = defineStore('grid', () => {
+ const selectedSatelliteProxy = undefined;
-// // 璧拌埅璁惧
-// export const useGridStore = defineStore('grid', () => {
-// const selectedGrid = ref(undefined);
+ const selectedGridCellAndDataDetail = ref(undefined);
-// function searchScene(lng, lat) {
-// // if (toolboxStore.sceneSearchStatus) {
-// return fetchData(() => {
-// return sceneInfoApi
-// .searchByCoordinate(lng, lat, radius.value * 1000)
-// .then((res) => {
-// sceneList.value = res.data.filter((v) => {
-// return v.typeId != 19 && v.typeId != 20;
-// });
-// return res;
-// });
-// });
-// // }
-// }
-
-// return { radius, sceneList, loading, searchScene };
-// });
+ return { selectedSatelliteProxy, selectedGridCellAndDataDetail };
+});
diff --git a/src/stores/satellite-grid.js b/src/stores/satellite-grid.js
index 8eedee8..0238594 100644
--- a/src/stores/satellite-grid.js
+++ b/src/stores/satellite-grid.js
@@ -24,9 +24,9 @@
});
// 缃戞牸鏁版嵁璇︽儏
const gridDataDetailMap = new Map();
- const selectedGridData = ref(undefined)
+ const selectedGridData = ref(undefined);
- const selectedGridDataDetail = ref(undefined)
+ const selectedGridDataDetail = ref(undefined);
// 鑾峰彇缃戞牸淇℃伅
function fetchGridCell(groupId) {
@@ -44,14 +44,15 @@
// 鑾峰彇閬ユ祴鍗曟棩鍏蜂綋缃戞牸鐩戞祴鏁版嵁
function fetchGridDataDetail(gridData, callback) {
+ selectedGridData.value = gridData;
if (gridDataDetailMap.has(gridData.id)) {
- selectedGridData.value = gridDataDetailMap.get(gridData.id);
- callback(selectedGridData.value);
+ selectedGridDataDetail.value = gridDataDetailMap.get(gridData.id);
+ callback(selectedGridDataDetail.value);
} else {
gridApi.fetchGridDataDetail(gridData.id, gridData.groupId).then((res) => {
gridDataDetailMap.set(gridData.id, res.data);
- selectedGridData.value = res.data;
- callback(selectedGridData.value);
+ selectedGridDataDetail.value = res.data;
+ callback(selectedGridDataDetail.value);
});
}
}
@@ -62,6 +63,7 @@
gridDataList,
mixGridDataList,
selectedGridData,
+ selectedGridDataDetail,
fetchGridCell,
fetchGridData,
fetchGridDataDetail
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 459e654..ebe6bfb 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -8,8 +8,9 @@
<!-- <MissionManage></MissionManage> -->
<ConfigManage></ConfigManage>
<!-- <MapLocation></MapLocation> -->
- <SceneSearch></SceneSearch>
<MapScene></MapScene>
+ <SceneSearch></SceneSearch>
+ <GridSearch></GridSearch>
<!-- <el-button
@click="satelliteImportVisible = !satelliteImportVisible"
type="primary"
@@ -22,13 +23,14 @@
class="el-button-custom aod-right-top p-events-auto"
>AOD鏁版嵁瀵煎叆</el-button
> -->
+ <PollutionTrace class="aod-right-top"></PollutionTrace>
<ProductManage class="satellite-right-top"></ProductManage>
</el-row>
<!-- <CoreMenu></CoreMenu> -->
<router-view></router-view>
</div>
- <SatelliteImport v-model="satelliteImportVisible"></SatelliteImport>
- <AODImport v-model="aodImportVisible"></AODImport>
+ <!-- <SatelliteImport v-model="satelliteImportVisible"></SatelliteImport>
+ <AODImport v-model="aodImportVisible"></AODImport> -->
</template>
<script setup>
@@ -37,6 +39,7 @@
import SatelliteImport from './satellitetelemetry/component/SatelliteImport.vue';
import AODImport from './satellitetelemetry/component/AODImport.vue';
import ProductManage from './dataproduct/ProductManage.vue';
+import PollutionTrace from './satellitetelemetry/PollutionTrace.vue';
const satelliteImportVisible = ref(false);
const aodImportVisible = ref(false);
</script>
@@ -64,13 +67,13 @@
gap: 4px;
}
.satellite-right-top {
- width: 120px;
+ /*width: 120px;*/
position: absolute;
right: 0px;
}
.aod-right-top {
position: absolute;
- right: 124px;
+ right: 100px;
}
</style>
diff --git a/src/views/dataproduct/component/ProductMake.vue b/src/views/dataproduct/component/ProductMake.vue
index 1116276..b39afa0 100644
--- a/src/views/dataproduct/component/ProductMake.vue
+++ b/src/views/dataproduct/component/ProductMake.vue
@@ -123,7 +123,7 @@
};
});
satelliteProxy.drawGrid({
- gridData: _aod,
+ gridDataDetail: _aod,
showDataTxt: true,
showRankTxt: true
});
@@ -142,7 +142,7 @@
return b.pm25 - a.pm25;
});
satelliteProxy.drawGrid({
- gridData: tempGridDataDetailList.value,
+ gridDataDetail: tempGridDataDetailList.value,
showDataTxt: true,
showRankTxt: true
});
diff --git a/src/views/satellitetelemetry/PollutionTrace.vue b/src/views/satellitetelemetry/PollutionTrace.vue
new file mode 100644
index 0000000..bbabf7b
--- /dev/null
+++ b/src/views/satellitetelemetry/PollutionTrace.vue
@@ -0,0 +1,35 @@
+<template>
+ <div>
+ <el-button
+ @click="handleChange"
+ type="primary"
+ class="el-button-custom p-events-auto"
+ >姹℃煋婧簮锛歿{ disable ? '鍏�' : '寮�' }}</el-button
+ >
+ </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useGridStore } from '@/stores/grid-info';
+import { useSceneStore } from '@/stores/scene';
+
+const gridStore = useGridStore();
+const sceneStore = useSceneStore();
+
+const disable = ref(true);
+
+function handleChange() {
+ disable.value = !disable.value;
+ if (disable.value) {
+ gridStore.selectedSatelliteProxy.goBackGridEvent('click');
+ } else {
+ gridStore.selectedSatelliteProxy.setGridEvent('click', (e) => {
+ const polygon = e.target;
+ const { centerPoint } = polygon.getExtData();
+ const [lng, lat] = centerPoint;
+ sceneStore.radius = 0.5;
+ sceneStore.searchScene(lng, lat);
+ });
+ }
+}
+</script>
diff --git a/src/views/satellitetelemetry/SatelliteProxy.js b/src/views/satellitetelemetry/SatelliteProxy.js
index 9088429..8e652e0 100644
--- a/src/views/satellitetelemetry/SatelliteProxy.js
+++ b/src/views/satellitetelemetry/SatelliteProxy.js
@@ -7,6 +7,9 @@
mapViews;
districtPolygon;
+
+ events = new Map();
+
// 缁樺埗鍖哄幙杈圭晫
drawDistrict(districtName, isNew) {
onMapMounted(() => {
@@ -93,7 +96,11 @@
]
// eslint-disable-next-line no-undef
.map((d) => new AMap.LngLat(d[0], d[1])),
- extData: points[i]
+ extData: {
+ centerPoint: points[i],
+ // gridPoints,
+ gridCell: v
+ }
};
});
const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event });
@@ -189,7 +196,7 @@
// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
drawGrid({
- gridData,
+ gridDataDetail,
useCustomColor,
opacity,
zIndex,
@@ -200,7 +207,7 @@
const { resGridViews, pointsRes } = this.drawColor({
gridViews: this.mapViews.gridViews,
points: this.mapViews.points,
- gridDataDetail: gridData,
+ gridDataDetail: gridDataDetail,
lastGridViews: this.mapViews.lastGridViews,
customColor: useCustomColor,
opacity: opacity,
@@ -212,7 +219,7 @@
// 鏁版嵁鏍囪
const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText(
this.mapViews.lastPoints,
- gridData,
+ gridDataDetail,
this.mapViews.dataTxt,
this.mapViews.dataLayer
);
@@ -221,7 +228,7 @@
const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText(
this.mapViews.lastPoints,
- gridData,
+ gridDataDetail,
this.mapViews.rankTxt,
this.mapViews.rankLayer
);
@@ -264,13 +271,38 @@
});
}
- setGridEvent(event) {
+ setGridEvent(name, event) {
+ if (!this.events.has(name)) {
+ this.events.set(name, []);
+ }
+ const list = this.events.get(name);
+ if (list.length > 0) {
+ const lastEvent = list[list.length - 1];
+ this.mapViews.gridViews.forEach((polygon) => {
+ polygon.off(name, lastEvent);
+ });
+ }
+ this.events.get(name).push(event);
this.mapViews.gridViews.forEach((polygon) => {
- event(polygon);
+ polygon.on(name, event);
});
}
-
+ goBackGridEvent(name) {
+ if (this.events.has(name)) {
+ const eventList = this.events.get(name);
+ //鍏堢Щ闄ゅ師鏈夌殑浜嬩欢
+ const lastEvent = eventList.pop();
+ this.mapViews.gridViews.forEach((polygon) => {
+ polygon.off(name, lastEvent);
+ });
+ //鑾峰彇涓婁竴涓簨浠�
+ const event = eventList.pop();
+ this.mapViews.gridViews.forEach((polygon) => {
+ polygon.on(name, event);
+ });
+ }
+ }
}
// // 鍦板浘缃戞牸鐩稿叧瀵硅薄
diff --git a/src/views/satellitetelemetry/SatelliteTelemetry.vue b/src/views/satellitetelemetry/SatelliteTelemetry.vue
index 859211a..9e2998f 100644
--- a/src/views/satellitetelemetry/SatelliteTelemetry.vue
+++ b/src/views/satellitetelemetry/SatelliteTelemetry.vue
@@ -72,12 +72,16 @@
import { useFetchData } from '@/composables/fetchData';
import { useSatelliteGridStore } from '@/stores/satellite-grid';
import { useSceneStore } from '@/stores/scene';
+import { useGridStore } from '@/stores/grid-info';
const satelliteProxy = new SatelliteProxy();
-const satelliteGridStore = useSatelliteGridStore();
-const { loading, fetchData } = useFetchData(10000);
+const gridStore = useGridStore();
+gridStore.selectedSatelliteProxy = satelliteProxy;
const sceneStore = useSceneStore();
+const satelliteGridStore = useSatelliteGridStore();
+
+const { loading, fetchData } = useFetchData(10000);
const animaLoading = ref(true);
const show = ref(true);
@@ -144,16 +148,27 @@
});
});
//榧犳爣鐐瑰嚮浜嬩欢
- polygon.on('click', () => {
- const [lng, lat] = polygon.getExtData();
- sceneStore.radius = 0.5;
- sceneStore.searchScene(lng, lat);
- });
+ // polygon.on('click', () => {
+ // const [lng, lat] = polygon.getExtData();
+ // sceneStore.radius = 0.5;
+ // sceneStore.searchScene(lng, lat);
+ // });
+ });
+ satelliteProxy.setGridEvent('click', (e) => {
+ const polygon = e.target
+ const { gridCell } = polygon.getExtData();
+ const cellIndex = gridCell.cellIndex;
+ const gridDataDetail =
+ satelliteGridStore.selectedGridDataDetail[cellIndex - 1];
+ gridStore.selectedGridCellAndDataDetail = {
+ gridCell,
+ gridDataDetail
+ };
});
}
-function drawGrid(gridData) {
- satelliteProxy.drawGrid({ gridData });
+function drawGrid(gridDataDetail) {
+ satelliteProxy.drawGrid({ gridDataDetail: gridDataDetail });
}
function handleRowClick(row) {
@@ -170,7 +185,7 @@
function handleColorClick(isStandardColor) {
satelliteProxy.drawGrid({
- gridData: satelliteGridStore.selectedGridData,
+ gridDataDetail: satelliteGridStore.selectedGridDataDetail,
useCustomColor: !isStandardColor
});
}
diff --git a/src/views/satellitetelemetry/component/SatelliteMixTool.vue b/src/views/satellitetelemetry/component/SatelliteMixTool.vue
index 81b5b7e..0086149 100644
--- a/src/views/satellitetelemetry/component/SatelliteMixTool.vue
+++ b/src/views/satellitetelemetry/component/SatelliteMixTool.vue
@@ -147,8 +147,8 @@
}
// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
-function drawGrid(gridData) {
- satelliteProxy.drawGrid({ gridData, opacity: 1, zIndex: 11 });
+function drawGrid(gridDataDetail) {
+ satelliteProxy.drawGrid({ gridDataDetail, opacity: 1, zIndex: 11 });
}
watch(mission, (nV, oV) => {
@@ -182,21 +182,21 @@
}
});
-let selectedGridData;
+let selectedGridDataDetail;
// 鍙犲姞铻嶅悎
function handleFusionClick() {
// resetButton();
const d = fusionData.value;
if (gridDataDetailMap.has(d.id)) {
- const gridData = gridDataDetailMap.get(d.id);
- selectedGridData = gridData;
- drawGrid(gridData);
+ selectedGridDataDetail = gridDataDetailMap.get(d.id);
+ // selectedGridData = gridData;
+ drawGrid(selectedGridDataDetail);
} else {
gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
gridDataDetailMap.set(d.id, res.data);
- const gridData = res.data;
- selectedGridData = gridData;
- drawGrid(gridData);
+ selectedGridDataDetail = res.data;
+ // selectedGridData = gridData;
+ drawGrid(selectedGridDataDetail);
});
}
}
@@ -224,7 +224,7 @@
function handleColorClick() {
isStandardColor.value = !isStandardColor.value;
satelliteProxy.drawGrid({
- gridData: selectedGridData,
+ gridDataDetail: selectedGridData,
useCustomColor: !isStandardColor.value,
opacity: 1,
zIndex: 11
--
Gitblit v1.9.3