From 7d02024c5351e620dcc2d49f36331e4a37228ea4 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期四, 20 三月 2025 22:35:51 +0800
Subject: [PATCH] 走航融合（待完成）
---
src/views/underwaymix/UnderwayMixMode.vue | 398 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 235 insertions(+), 163 deletions(-)
diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue
index bad7c78..38a403a 100644
--- a/src/views/underwaymix/UnderwayMixMode.vue
+++ b/src/views/underwaymix/UnderwayMixMode.vue
@@ -1,133 +1,156 @@
<template>
- <div class="p-events-none m-t-2">
- <el-row justify="space-between">
- <el-row class="wrap">
- <el-col span="2">
- <el-row>
- <BaseCard v-show="show" size="medium" direction="left">
- <template #content>
- <el-row>
- <el-form :inline="true">
- <el-form-item label="璧拌埅铻嶅悎">
- <el-select
- v-model="selectedfusionData"
- multiple
- clearable
- @change="handleChange"
- placeholder="閫夋嫨浠诲姟"
- size="small"
- class="w-250"
- :loading="fusionLoading"
- >
- <el-option
- v-for="(s, i) in fusionDataList"
- :key="i"
- :label="s.mixDataId"
- :value="i"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- :disabled="
- !gridCellList || selectedfusionData.length == 0
- "
- @click="handleFusionClick"
- >
- {{ '鍙犲姞铻嶅悎' }}
- </el-button>
- </el-form-item>
- </el-form>
- </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="handleGridClick"
- >
- {{ gridVisible ? '闅愯棌铻嶅悎' : '鏄剧ず铻嶅悎' }}
- </el-button>
- <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-divider content-position="left"></el-divider> -->
+ <!-- <div class="p-events-none m-t-2"> -->
+ <el-row justify="space-between">
+ <el-row class="wrap">
+ <el-col span="2">
+ <el-row>
+ <BaseCard v-show="show" size="medium" direction="left">
+ <template #content>
+ <el-row>
+ <el-form :inline="true">
+ <el-form-item label="璧拌埅铻嶅悎">
+ <el-select
+ v-model="selectedfusionData"
+ multiple
+ clearable
+ @change="handleChange"
+ placeholder="閫夋嫨浠诲姟"
+ size="small"
+ style="width: 160px"
+ :loading="fusionLoading"
+ >
+ <el-option
+ v-for="(s, i) in fusionDataList"
+ :key="i"
+ :label="s.mixDataId"
+ :value="i"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ :disabled="
+ !gridCellList || selectedfusionData.length == 0
+ "
+ @click="handleFusionClick"
+ >
+ {{ '鍙犲姞铻嶅悎' }}
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </el-row>
+ <div class="m-t-8">鎿嶄綔</div>
+ <el-row class="m-t-8">
+ <CheckButton
+ active-text="寮�鍚瀺鍚�"
+ inactive-text="闅愯棌铻嶅悎"
+ :default-value="false"
+ @change="handleMixClick"
+ >
+ </CheckButton>
+ <CheckButton
+ :disabled="!mixActive"
+ active-text="椋庨櫓鐑姏鍥�"
+ inactive-text="椋庨櫓鐑姏鍥�"
+ :default-value="false"
+ @change="handleHeatMapClick"
+ >
+ </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>
- </template>
- <template #footer> </template>
- </BaseCard>
- </el-row>
- </el-col>
- <el-col span="2">
- <el-row>
- <CardButton
- name="璧拌埅铻嶅悎"
- direction="right"
- @click="() => (show = !show)"
- ></CardButton>
- </el-row>
- </el-col>
- </el-row>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ :loading="missionLoading || loading"
+ @click="handleUnderwayClick"
+ >
+ {{ underwayVisible ? '闅愯棌璧拌埅璺嚎' : '鏄剧ず璧拌埅璺嚎' }}
+ </el-button>
+ </el-row> -->
+ </template>
+ <template #footer> </template>
+ </BaseCard>
+ </el-row>
+ </el-col>
+ <el-col span="2">
+ <el-row>
+ <CardButton
+ name="璧拌埅铻嶅悎"
+ direction="right"
+ @click="() => (show = !show)"
+ ></CardButton>
+ </el-row>
+ </el-col>
</el-row>
- </div>
+ <GridStyleTool
+ :gridCtrls="gridCtrls"
+ @show-underway="handleUnderwayClick"
+ ></GridStyleTool>
+ </el-row>
+ <!-- </div> -->
</template>
<script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
import moment from 'moment';
import gridApi from '@/api/gridApi';
import { SatelliteGrid } from '@/model/SatelliteGrid';
+import GridStyleTool from './component/GridStyleTool.vue';
-const satelliteGrid = new SatelliteGrid();
+const satelliteGrid = new SatelliteGrid('璧拌埅铻嶅悎');
+
+const gridCtrls = ref([satelliteGrid]);
// 鍊熺敤鍗槦閬ユ祴妯″潡涓殑100绫崇綉鏍�
const props = defineProps({
@@ -149,6 +172,7 @@
const gridDataDetailMap = new Map();
+const mixActive = ref(false);
const gridVisible = ref(true);
const underwayVisible = ref(false);
const rankVisible = ref(false);
@@ -195,11 +219,6 @@
satelliteGrid.gridPrepare(gridInfo);
}
-// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
-function drawGrid(gridDataDetail) {
- satelliteGrid.drawGrid({ gridDataDetail, opacity: 1, zIndex: 11 });
-}
-
// watch(mission, (nV, oV) => {
// if (nV != oV) {
// checkUnderwayFusionResult();
@@ -229,27 +248,54 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
if (gridDataDetailMap.has(d.id)) {
- // const gdd = gridDataDetailMap.get(d.id);
- // satelliteGrid.drawTagGrid({
- // tag: d.id,
- // gridDataDetail: gdd,
- // opacity: 1,
- // zIndex: 11
- // });
- satelliteGrid.changeVisibility({ tag: d.id, showGridViews: true });
+ satelliteGrid.changeVisibility({ tags: [d.id], showGridViews: true });
+ // gridCtrls.value = Array.from(satelliteGrid.mapViewsMap);
+ gridCtrls.value = [satelliteGrid];
} else {
gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
gridDataDetailMap.set(d.id, res.data);
const gdd = res.data;
satelliteGrid.drawTagGrid({
tag: d.id,
- gridDataDetail: gdd,
- opacity: 1,
- zIndex: 11
+ data: gdd,
+ extData: {
+ name: `璧拌埅缃戞牸 - ${d.mixDataId}`,
+ type: 0
+ }
});
+ gridCtrls.value = [satelliteGrid];
+ // gridCtrls.value = Array.from(satelliteGrid.mapViewsMap);
+ // console.log(gridCtrls.value);
});
}
});
+}
+
+function handleMixClick() {
+ mixActive.value = !mixActive.value;
+ const tags = fusionDataList.value
+ .filter((v, i) => selectedfusionData.value.indexOf(i) != -1)
+ .map((v) => v.id);
+ satelliteGrid.changeVisibility({
+ showGridViews: false,
+ showDataTxt: false,
+ showRankTxt: false
+ });
+ if (mixActive.value) {
+ satelliteGrid.mixGrid(tags);
+ gridCtrls.value = [satelliteGrid];
+ } else {
+ satelliteGrid.changeVisibility({
+ tags,
+ showGridViews: true
+ });
+ }
+}
+
+function handleHeatMapClick() {
+ const tags = fusionDataList.value
+ .filter((v, i) => selectedfusionData.value.indexOf(i) != -1)
+ .map((v) => v.id);
}
function handleGridClick() {
@@ -257,15 +303,24 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
satelliteGrid.changeVisibility({
- tag: d.id,
+ tags: [d.id],
showGridViews: gridVisible.value
});
});
}
-function handleUnderwayClick() {
+function handleUnderwayClick({ isShow, dataId }) {
underwayVisible.value = !underwayVisible.value;
- underwayVisible.value ? draw() : mapLine.hideLine();
+
+ if (isShow) {
+ draw(dataId);
+ } else {
+ const d = fusionDataList.value.find((v) => v.id == dataId);
+ const mission = missionStore.missionList.find((v) => {
+ return v.missionCode == d.mixDataId;
+ });
+ mapLine.hideLine(mission.missionCode);
+ }
}
function handleRankClick() {
@@ -273,7 +328,7 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
satelliteGrid.changeVisibility({
- tag: d.id,
+ tags: [d.id],
showRankTxt: rankVisible.value
});
});
@@ -284,7 +339,7 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
satelliteGrid.changeVisibility({
- tag: d.id,
+ tags: [d.id],
showDataTxt: dataVisible.value
});
});
@@ -295,10 +350,8 @@
selectedfusionData.value.forEach((i) => {
const d = fusionDataList.value[i];
if (gridDataDetailMap.has(d.id)) {
- const gdd = gridDataDetailMap.get(d.id);
- satelliteGrid.drawTagGrid({
+ satelliteGrid.changeGridColor({
tag: d.id,
- gridDataDetail: gdd,
useCustomColor: !isStandardColor.value,
opacity: 1,
zIndex: 11
@@ -363,30 +416,49 @@
});
}
-function draw() {
+function draw(dataId) {
if (isUnmounted.value) return;
- selectedfusionData.value.forEach((i) => {
- const d = fusionDataList.value[i];
+ // selectedfusionData.value.forEach((i) => {
+ // const d = fusionDataList.value[i];
- const mission = missionStore.missionList.find((v) => {
- return v.missionCode == d.mixDataId;
- });
+ // const mission = missionStore.missionList.find((v) => {
+ // return v.missionCode == d.mixDataId;
+ // });
- if (factorDataMap.has(mission.missionCode)) {
- const fd = factorDataMap.get(mission.missionCode);
- drawLine(mission.missionCode, fd);
- } else {
- search(mission).then((res) => {
- const fd = new FactorDatas();
- fd.setData(res.data, drawMode.value, () => {
- fd.refreshHeight(factorType.value);
- factorDataMap.set(mission.missionCode, fd);
- drawLine(mission.missionCode, fd);
- });
- });
- }
+ // if (factorDataMap.has(mission.missionCode)) {
+ // const fd = factorDataMap.get(mission.missionCode);
+ // drawLine(mission.missionCode, fd);
+ // } else {
+ // search(mission).then((res) => {
+ // const fd = new FactorDatas();
+ // fd.setData(res.data, drawMode.value, () => {
+ // fd.refreshHeight(factorType.value);
+ // factorDataMap.set(mission.missionCode, fd);
+ // drawLine(mission.missionCode, fd);
+ // });
+ // });
+ // }
+ // });
+
+ const d = fusionDataList.value.find((v) => v.id == dataId);
+ const mission = missionStore.missionList.find((v) => {
+ return v.missionCode == d.mixDataId;
});
+
+ if (factorDataMap.has(mission.missionCode)) {
+ const fd = factorDataMap.get(mission.missionCode);
+ drawLine(mission.missionCode, fd);
+ } else {
+ search(mission).then((res) => {
+ const fd = new FactorDatas();
+ fd.setData(res.data, drawMode.value, () => {
+ fd.refreshHeight(factorType.value);
+ factorDataMap.set(mission.missionCode, fd);
+ drawLine(mission.missionCode, fd);
+ });
+ });
+ }
}
function drawLine(missionCode, fd) {
--
Gitblit v1.9.3