From 5f44d21b3921abc88506a7ec46b3fe6f078664aa Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 14 三月 2025 15:33:24 +0800
Subject: [PATCH] 新增走航融合功能（初版）
---
src/views/underwaymix/UnderwayMixMode.vue | 398 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 396 insertions(+), 2 deletions(-)
diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue
index a26096a..bad7c78 100644
--- a/src/views/underwaymix/UnderwayMixMode.vue
+++ b/src/views/underwaymix/UnderwayMixMode.vue
@@ -1,6 +1,400 @@
<template>
- <div class="p-events-none m-t-2"></div>
+ <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> -->
+
+ <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-row>
+ </div>
</template>
-<script setup></script>
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import moment from 'moment';
+import gridApi from '@/api/gridApi';
+import { SatelliteGrid } from '@/model/SatelliteGrid';
+
+const satelliteGrid = new SatelliteGrid();
+
+// 鍊熺敤鍗槦閬ユ祴妯″潡涓殑100绫崇綉鏍�
+const props = defineProps({
+ groupId: {
+ type: Number,
+ default: 3
+ }
+});
+const show = ref(true);
+
+const mission = ref(undefined);
+
+const gridCellList = ref(undefined);
+const fusionData = ref(undefined);
+// 璧拌埅铻嶅悎鏁版嵁
+const fusionLoading = ref(false);
+const fusionDataList = ref([]);
+const selectedfusionData = ref([]);
+
+const gridDataDetailMap = new Map();
+
+const gridVisible = ref(true);
+const underwayVisible = ref(false);
+const rankVisible = ref(false);
+const dataVisible = ref(false);
+const isStandardColor = ref(true);
+const isOpacity = ref(false);
+
+function timeFormatter(value) {
+ return moment(value).format('YYYY-MM-DD');
+}
+
+function fetchFusionData() {
+ fusionLoading.value = true;
+ gridApi
+ .fetchGridData(props.groupId, undefined, 3)
+ .then((res) => {
+ fusionDataList.value = res.data;
+ })
+ .finally(() => (fusionLoading.value = false));
+}
+
+// 妫�鏌ヨ蛋鑸暟鎹槸鍚﹀拰100绫崇綉鏍煎凡铻嶅悎
+// function checkUnderwayFusionResult() {
+// const time = moment(mission.value.startTime).format('YYYY-MM-DD HH:mm:ss');
+// gridApi.fetchGridData(props.groupId, time, 3).then((res) => {
+// if (res.data.length > 0) {
+// fusionData.value = res.data[0];
+// } else {
+// fusionData.value = undefined;
+// }
+// });
+// }
+
+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);
+}
+
+// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
+function drawGrid(gridDataDetail) {
+ satelliteGrid.drawGrid({ gridDataDetail, opacity: 1, zIndex: 11 });
+}
+
+// watch(mission, (nV, oV) => {
+// if (nV != oV) {
+// checkUnderwayFusionResult();
+// search(nV);
+// }
+// });
+
+watch(
+ () => props.groupId,
+ (nV, oV) => {
+ if (nV != oV) {
+ gridApi.fetchGridCell(nV).then((res) => {
+ gridCellList.value = res.data;
+ prepareGrid(gridCellList.value);
+ });
+ fetchFusionData();
+ }
+ },
+ {
+ immediate: true
+ }
+);
+
+function handleFusionClick() {
+ // resetButton();
+ satelliteGrid.changeVisibility({ showGridViews: false });
+ 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 });
+ } 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
+ });
+ });
+ }
+ });
+}
+
+function handleGridClick() {
+ gridVisible.value = !gridVisible.value;
+ selectedfusionData.value.forEach((i) => {
+ const d = fusionDataList.value[i];
+ satelliteGrid.changeVisibility({
+ tag: d.id,
+ showGridViews: gridVisible.value
+ });
+ });
+}
+
+function handleUnderwayClick() {
+ underwayVisible.value = !underwayVisible.value;
+ underwayVisible.value ? draw() : mapLine.hideLine();
+}
+
+function handleRankClick() {
+ rankVisible.value = !rankVisible.value;
+ selectedfusionData.value.forEach((i) => {
+ const d = fusionDataList.value[i];
+ satelliteGrid.changeVisibility({
+ tag: d.id,
+ showRankTxt: rankVisible.value
+ });
+ });
+}
+
+function handleDataClick() {
+ dataVisible.value = !dataVisible.value;
+ selectedfusionData.value.forEach((i) => {
+ const d = fusionDataList.value[i];
+ satelliteGrid.changeVisibility({
+ tag: 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)) {
+ const gdd = gridDataDetailMap.get(d.id);
+ satelliteGrid.drawTagGrid({
+ tag: d.id,
+ gridDataDetail: gdd,
+ useCustomColor: !isStandardColor.value,
+ opacity: 1,
+ zIndex: 11
+ });
+ }
+ });
+}
+
+function handleOpacityClick() {
+ isOpacity.value = !isOpacity.value;
+ satelliteGrid.changeGridOpacity({ opacityValue: isOpacity.value ? 0.1 : 1 });
+}
+
+/**璧拌埅杞ㄨ抗*******************************************************************/
+import { FactorDatas } from '@/model/FactorDatas';
+import sector from '@/utils/map/sector';
+import mapLine from '@/utils/map/line';
+import mapUtil from '@/utils/map/util';
+import { fetchHistoryData } from '@/utils/factor/data';
+import { useFetchData } from '@/composables/fetchData';
+import { useMissionStore } from '@/stores/mission';
+
+onMounted(() => {
+ isUnmounted.value = false;
+ fetchMission();
+});
+onUnmounted(() => {
+ mapUtil.clearMap();
+ isUnmounted.value = true;
+});
+const { loading, fetchData } = useFetchData(10000);
+
+const missionStore = useMissionStore();
+const missionLoading = ref(false);
+
+const isUnmounted = ref(false);
+
+const drawMode = ref(0);
+// 鐩戞祴鏁版嵁
+const factorDataMap = new Map();
+// pm2.5
+const factorType = 6;
+
+function fetchMission() {
+ missionLoading.value = true;
+ missionStore.fetchMission().finally(() => (missionLoading.value = false));
+}
+
+function search(option) {
+ const { deviceType, deviceCode, startTime, endTime } = option;
+ const _startTime = moment(startTime).format('YYYY-MM-DD HH:mm:ss');
+ const _endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss');
+ return fetchData((page, pageSize) => {
+ return fetchHistoryData({
+ deviceType,
+ deviceCode,
+ startTime: _startTime,
+ endTime: _endTime,
+ page,
+ perPage: pageSize
+ });
+ });
+}
+
+function draw() {
+ if (isUnmounted.value) return;
+
+ selectedfusionData.value.forEach((i) => {
+ const d = fusionDataList.value[i];
+
+ 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) {
+ // 鍒锋柊鍥句緥
+ const factor = fd.factor[factorType];
+ sector.clearSector();
+ fd.refreshHeight(factorType);
+ mapLine.drawTagLine(missionCode, fd, factor);
+}
+</script>
<style scoped></style>
--
Gitblit v1.9.3