From da0d06cb06ef3fc55d88cb4a9a52505ac35c03e6 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期三, 26 三月 2025 15:12:31 +0800
Subject: [PATCH] 走航融合（待完成）
---
src/model/SatelliteGrid.js | 20 ++
src/api/index.js | 4
src/views/underwaymix/UnderwayMixMode.vue | 409 ++++++++++++++++++++++++++++-----------------
src/api/gridApi.js | 15 +
src/components.d.ts | 1
src/views/underwaymix/component/GridStyleTool.vue | 42 ++++
6 files changed, 333 insertions(+), 158 deletions(-)
diff --git a/src/api/gridApi.js b/src/api/gridApi.js
index 8abfe14..83a8c4d 100644
--- a/src/api/gridApi.js
+++ b/src/api/gridApi.js
@@ -148,5 +148,20 @@
return $http.get(`air/satellite/import/grid/aod/download/template`, {
responseType: 'blob'
});
+ },
+
+ buildUnderwayHeatmap(groupId, gridDataDetailList, searchLength) {
+ return $http
+ .post(
+ `air/satellite/product/underway/heatmap/build`,
+ gridDataDetailList,
+ {
+ params: {
+ groupId: groupId,
+ searchLength: 4
+ }
+ }
+ )
+ .then((res) => res.data);
}
};
diff --git a/src/api/index.js b/src/api/index.js
index c19983c..d3d4da3 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,7 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';
-const debug = false;
+const debug = true;
let ip1 = 'http://47.100.191.150:9029/';
// console.log(import.meta.env);
@@ -10,7 +10,7 @@
}
if (debug) {
- ip1 = 'http://192.168.0.138:8084/';
+ ip1 = 'http://192.168.0.110:8084/';
}
const $http = axios.create({
diff --git a/src/components.d.ts b/src/components.d.ts
index a0257ee..f0d1927 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -45,6 +45,7 @@
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider']
+ ElSpace: typeof import('element-plus/es')['ElSpace']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
diff --git a/src/model/SatelliteGrid.js b/src/model/SatelliteGrid.js
index cb547e9..ad01ca9 100644
--- a/src/model/SatelliteGrid.js
+++ b/src/model/SatelliteGrid.js
@@ -629,6 +629,26 @@
return heatTag;
}
+ drawHeatGrid2(tag, headGridDataDetailList) {
+ const heatTag = `heat-${tag}`;
+ if (this.mapViewsMap.has(heatTag)) {
+ this.changeVisibility({
+ tags: [heatTag],
+ showGridViews: true
+ });
+ } else {
+ this.drawTagGrid({
+ tag: heatTag,
+ data: headGridDataDetailList,
+ extData: {
+ name: `璧拌埅鐑姏鍥� - ${heatTag}`,
+ type: 2
+ }
+ });
+ }
+ return heatTag;
+ }
+
search(gdd, width, height, eachwidth, eachheight, searchLength) {
function getCellWidthRange(cellId, width, height) {
const total = width * height;
diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue
index c0dbe9b..460355c 100644
--- a/src/views/underwaymix/UnderwayMixMode.vue
+++ b/src/views/underwaymix/UnderwayMixMode.vue
@@ -8,7 +8,7 @@
<template #content>
<el-row>
<el-form :inline="true">
- <el-form-item label="璧拌埅铻嶅悎">
+ <!-- <el-form-item label="璧拌埅铻嶅悎">
<el-select
v-model="selectedfusionData"
multiple
@@ -26,8 +26,8 @@
:value="i"
/>
</el-select>
- </el-form-item>
- <el-form-item>
+ </el-form-item> -->
+ <!-- <el-form-item>
<el-button
type="primary"
class="el-button-custom"
@@ -37,13 +37,125 @@
"
@click="handleFusionClick"
>
- {{ '鍙犲姞铻嶅悎' }}
+ {{ '鍙犲姞璧拌埅' }}
</el-button>
- </el-form-item>
+ </el-form-item> -->
</el-form>
</el-row>
+ <div class="m-t-8">绛涢�夎緟鍔�</div>
+ <el-form :inline="false">
+ <el-form-item label="鏃舵绛涢��">
+ <el-select
+ v-model="selectedTimeSection"
+ multiple
+ clearable
+ placeholder="閫夋嫨鏃舵"
+ size="small"
+ style="width: 300px"
+ >
+ <el-option
+ v-for="(v, i) in timeSectionList"
+ :key="i"
+ :label="v"
+ :value="v"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍖哄煙绛涢��">
+ <el-select
+ v-model="selectedZone"
+ multiple
+ clearable
+ placeholder="閫夋嫨鍖哄煙"
+ size="small"
+ style="width: 300px"
+ >
+ <el-option
+ v-for="(v, i) in zoneList"
+ :key="i"
+ :label="v"
+ :value="v"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鑳屾櫙绛涢��">
+ <el-select
+ v-model="selectedPollutionDegree"
+ multiple
+ clearable
+ placeholder="閫夋嫨鑳屾櫙"
+ size="small"
+ style="width: 300px"
+ >
+ <el-option
+ v-for="(v, i) in pollutionDegreeList"
+ :key="i"
+ :label="v"
+ :value="v"
+ />
+ </el-select>
+ </el-form-item>
+ </el-form>
+
+ <el-table
+ :data="showFusionDataList"
+ table-layout="fixed"
+ size="small"
+ :show-overflow-tooltip="true"
+ border
+ height="50vh"
+ row-class-name="t-row-normal"
+ cell-class-name="t-cell"
+ header-row-class-name="t-header-row"
+ header-cell-class-name="t-header-cell"
+ :highlight-current-row="false"
+ @row-click="handleRowClick"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="40" />
+ <!-- <el-table-column
+ type="index"
+ label="搴忓彿"
+ width="30"
+ /> -->
+ <el-table-column
+ prop="dataTime"
+ label="鏃堕棿"
+ align="center"
+ :formatter="timeFormatter"
+ width="100"
+ />
+ <el-table-column
+ prop="missionCode"
+ label="浠诲姟缂栧彿"
+ align="center"
+ width="150"
+ />
+ <el-table-column
+ prop="zone"
+ label="鍖哄煙"
+ align="center"
+ width="50"
+ />
+ <el-table-column
+ prop="pollutionDegree"
+ label="姹℃煋鑳屾櫙"
+ align="center"
+ width="50"
+ />
+ </el-table>
+
<div class="m-t-8">鎿嶄綔</div>
- <el-row class="m-t-8">
+ <el-space class="m-t-8 m-b-8">
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ :disabled="!gridCellList || selectedfusionData.length == 0"
+ @click="handleFusionClick"
+ >
+ {{ '鍙犲姞璧拌埅' }}
+ </el-button>
<CheckButton
active-text="寮�鍚瀺鍚�"
inactive-text="闅愯棌铻嶅悎"
@@ -51,80 +163,7 @@
@change="handleMixClick"
>
</CheckButton>
- <CheckButton
- :disabled="!mixActive"
- active-text="椋庨櫓鐑姏鍥�"
- inactive-text="椋庨櫓鐑姏鍥�"
- :default-value="false"
- @change="handleHeatMapClick"
- >
- </CheckButton>
- <!-- <CheckButton
- active-text="鎼滅储缃戞牸"
- inactive-text="鎼滅储缃戞牸"
- :default-value="false"
- @change="handleHeatMapSearchClick"
- >
- </CheckButton> -->
- </el-row>
- <!-- <div class="m-t-8">缃戞牸瑕佺礌</div>
- <el-row class="m-t-8">
- <CheckButton
- active-text="鏄剧ず缃戞牸"
- inactive-text="闅愯棌缃戞牸"
- :default-value="true"
- @change="handleGridClick"
- >
- </CheckButton>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleRankClick"
- >
- {{ rankVisible ? '闅愯棌鎺掑悕' : '鏄剧ず鎺掑悕' }}
- </el-button>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleDataClick"
- >
- {{ dataVisible ? '闅愯棌鏁版嵁' : '鏄剧ず鏁版嵁' }}
- </el-button>
- </el-row>
- <div class="m-t-8">缃戞牸鏍峰紡</div>
- <el-row class="m-t-8">
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleOpacityClick"
- >
- {{ !isOpacity ? '閫忔槑鍖�' : '鍙栨秷閫忔槑鍖�' }}
- </el-button>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleColorClick"
- >
- {{ isStandardColor ? '缁樺埗瀵规瘮鑹�' : '缁樺埗鏍囧噯鑹�' }}
- </el-button>
- </el-row>
- <div class="m-t-8">璧拌埅瑕佺礌</div>
- <el-row class="m-t-8">
-
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- :loading="missionLoading || loading"
- @click="handleUnderwayClick"
- >
- {{ underwayVisible ? '闅愯棌璧拌埅璺嚎' : '鏄剧ず璧拌埅璺嚎' }}
- </el-button>
- </el-row> -->
+ </el-space>
</template>
<template #footer> </template>
</BaseCard>
@@ -181,6 +220,77 @@
const gridDataDetailMap = new Map();
+const selectedTimeSection = ref([]);
+const selectedZone = ref([]);
+const selectedPollutionDegree = ref([]);
+
+const timeSectionList = computed(() => {
+ const res = [];
+ fusionDataList.value.forEach((e) => {
+ const t = moment(e.dataTime).format('YYYY-MM-DD');
+ if (res.indexOf(t) == -1) {
+ res.push(t);
+ }
+ });
+ return res;
+});
+
+const zoneList = computed(() => {
+ const res = [];
+ fusionDataList.value.forEach((e) => {
+ const t = e.zone;
+ if (res.indexOf(t) == -1) {
+ res.push(t);
+ }
+ });
+ return res;
+});
+
+const pollutionDegreeList = computed(() => {
+ const res = [];
+ fusionDataList.value.forEach((e) => {
+ const t = e.pollutionDegree;
+ if (res.indexOf(t) == -1) {
+ res.push(t);
+ }
+ });
+ return res;
+});
+
+const showFusionDataList = computed(() => {
+ return fusionDataList.value.filter((v) => {
+ const b1 =
+ selectedTimeSection.value.length == 0 ||
+ selectedTimeSection.value.indexOf(
+ moment(v.dataTime).format('YYYY-MM-DD')
+ ) != -1;
+ const b2 =
+ selectedZone.value.length == 0 ||
+ selectedZone.value.indexOf(v.zone) != -1;
+ const b3 =
+ selectedPollutionDegree.value.length == 0 ||
+ selectedPollutionDegree.value.indexOf(v.pollutionDegree) != -1;
+
+ return b1 && b2 && b3;
+ });
+});
+// if (
+// selectedTimeSection.value.length == 0 &&
+// selectedZone.value.length == 0 &&
+// selectedPollutionDegree.value.length == 0
+// ) {
+// return true;
+// } else {
+// const b1 =
+// selectedTimeSection.value.indexOf(
+// moment(v.dataTime).format('YYYY-MM-DD')
+// ) != -1;
+// const b2 = selectedZone.value.indexOf(v.zone) != -1;
+// const b3 = selectedPollutionDegree.value.indexOf(v.pollutionDegree) != -1;
+
+// return b1 && b2 || b3;
+// }
+
const mixActive = ref(false);
const heatActive = ref(false);
const gridVisible = ref(true);
@@ -190,8 +300,8 @@
const isStandardColor = ref(true);
const isOpacity = ref(false);
-function timeFormatter(value) {
- return moment(value).format('YYYY-MM-DD');
+function timeFormatter(row, col, cellValue, index) {
+ return moment(cellValue).format('YYYY-MM-DD');
}
function fetchFusionData() {
@@ -215,15 +325,6 @@
// }
// });
// }
-
-function resetButton() {
- gridVisible.value = true;
- underwayVisible.value = false;
- rankVisible.value = false;
- dataVisible.value = false;
- isStandardColor.value = true;
- isOpacity.value = false;
-}
function prepareGrid(gridInfo) {
satelliteGrid.gridPrepare(gridInfo, (polygon) => {
@@ -281,7 +382,8 @@
// resetButton();
satelliteGrid.changeVisibility({ showGridViews: false });
selectedfusionData.value.forEach((i) => {
- const d = fusionDataList.value[i];
+ // const d = fusionDataList.value[i];
+ const d = i;
if (gridDataDetailMap.has(d.id)) {
satelliteGrid.changeVisibility({ tags: [d.id], showGridViews: true });
// gridCtrls.value = Array.from(satelliteGrid.mapViewsMap);
@@ -357,18 +459,34 @@
showRankTxt: false
});
if (heatActive.value) {
- heatTag = satelliteGrid.drawHeatGrid(mixTag);
- satelliteGrid.setGridEvent(
- [heatTag],
- 'click',
- (gridCell, gridDataDetail) => {
- gridStore.selectedGridCellAndDataDetail = {
- gridCell,
- gridDataDetail
- };
- }
- );
- gridCtrls.value = [satelliteGrid];
+ // heatTag = satelliteGrid.drawHeatGrid(mixTag);
+ // satelliteGrid.setGridEvent(
+ // [heatTag],
+ // 'click',
+ // (gridCell, gridDataDetail) => {
+ // gridStore.selectedGridCellAndDataDetail = {
+ // gridCell,
+ // gridDataDetail
+ // };
+ // }
+ // );
+ // gridCtrls.value = [satelliteGrid];
+
+ const data = satelliteGrid.gridDataDetailMap.get(mixTag);
+ gridApi.buildUnderwayHeatmap(3, data, 10).then((res) => {
+ heatTag = satelliteGrid.drawHeatGrid2(mixTag, res.data);
+ satelliteGrid.setGridEvent(
+ [heatTag],
+ 'click',
+ (gridCell, gridDataDetail) => {
+ gridStore.selectedGridCellAndDataDetail = {
+ gridCell,
+ gridDataDetail
+ };
+ }
+ );
+ gridCtrls.value = [satelliteGrid];
+ });
} else {
satelliteGrid.changeVisibility({
tags: [mixTag],
@@ -394,17 +512,6 @@
console.log(res);
}
-function handleGridClick() {
- gridVisible.value = !gridVisible.value;
- selectedfusionData.value.forEach((i) => {
- const d = fusionDataList.value[i];
- satelliteGrid.changeVisibility({
- tags: [d.id],
- showGridViews: gridVisible.value
- });
- });
-}
-
function handleUnderwayClick({ isShow, dataId }) {
underwayVisible.value = !underwayVisible.value;
@@ -419,46 +526,8 @@
}
}
-function handleRankClick() {
- rankVisible.value = !rankVisible.value;
- selectedfusionData.value.forEach((i) => {
- const d = fusionDataList.value[i];
- satelliteGrid.changeVisibility({
- tags: [d.id],
- showRankTxt: rankVisible.value
- });
- });
-}
-
-function handleDataClick() {
- dataVisible.value = !dataVisible.value;
- selectedfusionData.value.forEach((i) => {
- const d = fusionDataList.value[i];
- satelliteGrid.changeVisibility({
- tags: [d.id],
- showDataTxt: dataVisible.value
- });
- });
-}
-
-function handleColorClick() {
- isStandardColor.value = !isStandardColor.value;
- selectedfusionData.value.forEach((i) => {
- const d = fusionDataList.value[i];
- if (gridDataDetailMap.has(d.id)) {
- satelliteGrid.changeGridColor({
- tag: d.id,
- useCustomColor: !isStandardColor.value,
- opacity: 1,
- zIndex: 11
- });
- }
- });
-}
-
-function handleOpacityClick() {
- isOpacity.value = !isOpacity.value;
- satelliteGrid.changeGridOpacity({ opacityValue: isOpacity.value ? 0.1 : 1 });
+function handleSelectionChange(val) {
+ selectedfusionData.value = val;
}
/**璧拌埅杞ㄨ抗*******************************************************************/
@@ -565,4 +634,32 @@
mapLine.drawTagLine(missionCode, fd, factor);
}
</script>
-<style scoped></style>
+<style scoped>
+:deep(.el-table) {
+ --el-table-bg-color: transparent;
+ --el-table-row-hover-bg-color: var(--select_color);
+ --el-table-current-row-bg-color: var(--select_color);
+ /* --el-table-current-row-bg-color: #7dff5d96; */
+ --el-table-text-color: var(--font-color);
+}
+
+:deep(.t-row-normal) {
+ cursor: pointer;
+ background-color: transparent !important;
+}
+
+:deep(.t-cell) {
+ /* background: red !important; */
+ /* height: 40px;
+ border: 1px solid black; */
+}
+
+:deep(.t-header-row) {
+}
+
+:deep(.t-header-cell) {
+ background-color: var(--bg-color-2) !important;
+ /* text-align: center !important; */
+ color: white !important;
+}
+</style>
diff --git a/src/views/underwaymix/component/GridStyleTool.vue b/src/views/underwaymix/component/GridStyleTool.vue
index e21302d..35b61e7 100644
--- a/src/views/underwaymix/component/GridStyleTool.vue
+++ b/src/views/underwaymix/component/GridStyleTool.vue
@@ -53,6 +53,13 @@
>
</CheckButton>
<CheckButton
+ active-text="椋庨櫓鐑姏鍥�"
+ inactive-text="椋庨櫓鐑姏鍥�"
+ :default-value="false"
+ @change="(e) => handleHeatMapClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
v-if="value.extData.type == 0"
active-text="鏄剧ず璧拌埅杞ㄨ抗"
inactive-text="闅愯棌璧拌埅杞ㄨ抗"
@@ -105,6 +112,10 @@
* 缃戞牸鏍峰紡鎺у埗宸ュ叿
*/
import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';
+import gridApi from '@/api/gridApi';
+import { useGridStore } from '@/stores/grid-info';
+
+const gridStore = useGridStore()
const props = defineProps({
// 缃戞牸绠＄悊瀵硅薄[SatelliteGrid]鏁扮粍
@@ -200,6 +211,37 @@
function handleHighlightGridClick(e, index, value) {
toRaw(props.gridCtrls[index]).mixGrid(value.tag.split('-'), e);
}
+
+let heatTag
+function handleHeatMapClick(e, index, value) {
+ const _satelliteGrid = toRaw(props.gridCtrls[index])
+ _satelliteGrid.changeVisibility({
+ showGridViews: false,
+ showDataTxt: false,
+ showRankTxt: false
+ });
+ if (e) {
+ const data = _satelliteGrid.gridDataDetailMap.get(value.tag);
+ gridApi.buildUnderwayHeatmap(3, data).then((res) => {
+ heatTag = _satelliteGrid.drawHeatGrid2(value.tag, res.data);
+ _satelliteGrid.setGridEvent(
+ [heatTag],
+ 'click',
+ (gridCell, gridDataDetail) => {
+ gridStore.selectedGridCellAndDataDetail = {
+ gridCell,
+ gridDataDetail
+ };
+ }
+ );
+ });
+ } else {
+ _satelliteGrid.changeVisibility({
+ tags: [value.tag],
+ showGridViews: true
+ });
+ }
+}
</script>
<style scoped>
.content-wrap {
--
Gitblit v1.9.3