From 2592dc279ec82bf3649a4dbe644c6416263a10ef Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 07 三月 2025 17:10:25 +0800
Subject: [PATCH] 各模块功能新增
---
src/views/satellitetelemetry/component/SatelliteMixTool.vue | 498 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 314 insertions(+), 184 deletions(-)
diff --git a/src/views/satellitetelemetry/component/SatelliteMixTool.vue b/src/views/satellitetelemetry/component/SatelliteMixTool.vue
index 9f10545..fb9ae68 100644
--- a/src/views/satellitetelemetry/component/SatelliteMixTool.vue
+++ b/src/views/satellitetelemetry/component/SatelliteMixTool.vue
@@ -1,94 +1,134 @@
<template>
- <CardDialog
- v-model="dialogVisible"
- title="璧拌埅铻嶅悎"
- draggable
- :modal="false"
- width="400px"
- >
- <template #default>
- <el-row>
- <OptionMission v-model="mission"></OptionMission>
- <el-text size="small" :type="fusionData ? 'success' : 'warning'">{{
- fusionData ? '璧拌埅鏁版嵁宸茶瀺鍚�' : '璧拌埅鏁版嵁鏈瀺鍚�'
- }}</el-text>
- </el-row>
- <el-row>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- :disabled="!gridCellList || !fusionData"
- @click="handleFusionClick"
- >
- {{ '鍙犲姞铻嶅悎' }}
- </el-button>
- <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"
- :loading="loading"
- @click="handleUnderwayClick"
- >
- {{ underwayVisible ? '闅愯棌璧拌埅璺嚎' : '鏄剧ず璧拌埅璺嚎' }}
- </el-button>
- </el-row>
- <el-row class="m-t-8">
- <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-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleColorClick"
- >
- {{ isStandardColor ? '缁樺埗瀵规瘮鑹�' : '缁樺埗鏍囧噯鑹�' }}
- </el-button>
- <el-button
- type="primary"
- class="el-button-custom"
- size="small"
- @click="handleOpacityClick"
- >
- {{ !isOpacity ? '閫忔槑鍖�' : '鍙栨秷閫忔槑鍖�' }}
- </el-button>
- </el-row>
- </template>
- <template #footer>
- <el-row justify="start" align="middle" class="p-b-2 one-row">
- <!-- <el-text size="small" type="warning">鎼滅储鑼冨洿</el-text> -->
- </el-row>
- </template>
- </CardDialog>
+ <div>
+ <el-button
+ @click="dialogVisible = !dialogVisible"
+ type="primary"
+ class="el-button-custom p-events-auto"
+ >璧拌埅铻嶅悎</el-button
+ >
+ <CardDialog
+ v-model="dialogVisible"
+ title="璧拌埅铻嶅悎"
+ draggable
+ :modal="false"
+ width="420px"
+ >
+ <template #default>
+ <el-row>
+ <!-- <OptionMission v-model="mission"></OptionMission> -->
+ <el-form :inline="true">
+ <el-form-item label="璧拌埅铻嶅悎">
+ <el-select
+ v-model="selectedfusionData"
+ multiple
+ clearable
+ @change="handleChange"
+ placeholder="閫夋嫨浠诲姟"
+ size="small"
+ class="w-200"
+ :loading="fusionLoading"
+ >
+ <el-option
+ v-for="(s, i) in fusionDataList"
+ :key="i"
+ :label="timeFormatter(s.dataTime)"
+ :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-text size="small" :type="fusionData ? 'success' : 'warning'">{{
+ fusionData ? '璧拌埅鏁版嵁宸茶瀺鍚�' : '璧拌埅鏁版嵁鏈瀺鍚�'
+ }}</el-text> -->
+ </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>
+ <el-row justify="start" align="middle" class="p-b-2 one-row">
+ <!-- <el-text size="small" type="warning">鎼滅储鑼冨洿</el-text> -->
+ </el-row>
+ </template>
+ </CardDialog>
+ </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from 'moment';
import { map, onMapMounted } from '@/utils/map/index_old';
import gridApi from '@/api/gridApi';
-import SatelliteProxy from '../SatelliteProxy';
+import { SatelliteProxy } from '../SatelliteProxy';
+
+const satelliteProxy = new SatelliteProxy();
const props = defineProps({
groupId: {
@@ -97,11 +137,16 @@
}
});
-const dialogVisible = ref(true);
+const dialogVisible = ref(false);
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);
@@ -111,74 +156,66 @@
const isStandardColor = ref(true);
const isOpacity = ref(false);
-// 鍦板浘缃戞牸鐩稿叧瀵硅薄
-let mapViews;
-
-// 妫�鏌ヨ蛋鑸暟鎹槸鍚﹀拰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 timeFormatter(value) {
+ return moment(value).format('YYYY-MM-DD');
}
-function drawGrid(gridInfo) {
- SatelliteProxy.clearAll(mapViews);
- mapViews = SatelliteProxy.drawPolyline(gridInfo);
+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) {
+ satelliteProxy.gridPrepare(gridInfo);
}
// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊
-function drawTextAndColor(gridData) {
- const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
- gridViews: mapViews.gridViews,
- points: mapViews.points,
- gridDataDetail: gridData,
- lastGridViews: mapViews.lastGridViews,
- opacity: 1,
- zIndex: 11
- });
- mapViews.lastGridViews = resGridViews;
- mapViews.lastPoints = pointsRes;
- // 鏂囨湰鏍囪
- const { textViews: dataTxt, labelsLayer: dataLayer } =
- SatelliteProxy.drawDataText(
- mapViews.lastPoints,
- gridData,
- mapViews.dataTxt,
- mapViews.dataLayer
- );
- mapViews.dataTxt = dataTxt;
- mapViews.dataLayer = dataLayer;
- const { textViews: rankTxt, labelsLayer: rankLayer } =
- SatelliteProxy.drawRankText(
- mapViews.lastPoints,
- gridData,
- mapViews.rankTxt,
- mapViews.rankLayer
- );
- mapViews.rankTxt = rankTxt;
- mapViews.rankLayer = rankLayer;
+function drawGrid(gridDataDetail) {
+ satelliteProxy.drawGrid({ gridDataDetail, opacity: 1, zIndex: 11 });
}
-watch(mission, (nV, oV) => {
- if (nV != oV) {
- checkUnderwayFusionResult();
- search(nV);
- }
-});
+// watch(mission, (nV, oV) => {
+// if (nV != oV) {
+// checkUnderwayFusionResult();
+// search(nV);
+// }
+// });
watch(
() => props.groupId,
(nV, oV) => {
- if (nV != oV) {
+ if (dialogVisible.value && nV != oV) {
gridApi.fetchGridCell(nV).then((res) => {
gridCellList.value = res.data;
- drawGrid(gridCellList.value);
+ prepareGrid(gridCellList.value);
});
+ fetchFusionData();
}
},
{
@@ -186,29 +223,66 @@
}
);
-let selectedGridData;
-// 鍙犲姞铻嶅悎
-function handleFusionClick() {
- const d = fusionData.value;
- if (gridDataDetailMap.has(d.id)) {
- const gridData = gridDataDetailMap.get(d.id);
- selectedGridData = gridData;
- drawTextAndColor(gridData);
- } else {
- gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
- gridDataDetailMap.set(d.id, res.data);
- const gridData = res.data;
- selectedGridData = gridData;
- drawTextAndColor(gridData);
+watch(dialogVisible, (nV, oV) => {
+ if (nV != oV) {
+ gridApi.fetchGridCell(props.groupId).then((res) => {
+ gridCellList.value = res.data;
+ prepareGrid(gridCellList.value);
});
+ fetchFusionData();
}
+});
+
+let selectedGridDataDetail;
+// 鍙犲姞铻嶅悎
+// function handleFusionClick() {
+// // resetButton();
+// const d = fusionData.value;
+// if (gridDataDetailMap.has(d.id)) {
+// selectedGridDataDetail = gridDataDetailMap.get(d.id);
+// // selectedGridData = gridData;
+// drawGrid(selectedGridDataDetail);
+// } else {
+// gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => {
+// gridDataDetailMap.set(d.id, res.data);
+// selectedGridDataDetail = res.data;
+// // selectedGridData = gridData;
+// drawGrid(selectedGridDataDetail);
+// });
+// }
+// }
+function handleFusionClick() {
+ // resetButton();
+ satelliteProxy.changeVisibility({ showGridViews: false });
+ selectedfusionData.value.forEach((i) => {
+ const d = fusionDataList.value[i];
+ if (gridDataDetailMap.has(d.id)) {
+ // const gdd = gridDataDetailMap.get(d.id);
+ // satelliteProxy.drawTagGrid({
+ // tag: d.id,
+ // gridDataDetail: gdd,
+ // opacity: 1,
+ // zIndex: 11
+ // });
+ satelliteProxy.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;
+ satelliteProxy.drawTagGrid({
+ tag: d.id,
+ gridDataDetail: gdd,
+ opacity: 1,
+ zIndex: 11
+ });
+ });
+ }
+ });
}
function handleGridClick() {
gridVisible.value = !gridVisible.value;
- gridVisible.value
- ? map.add(mapViews.lastGridViews)
- : map.remove(mapViews.lastGridViews);
+ satelliteProxy.changeVisibility({ showGridViews: gridVisible.value });
}
function handleUnderwayClick() {
@@ -218,36 +292,40 @@
function handleRankClick() {
rankVisible.value = !rankVisible.value;
- rankVisible.value ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt);
+ satelliteProxy.changeVisibility({ showRankTxt: rankVisible.value });
}
function handleDataClick() {
dataVisible.value = !dataVisible.value;
- dataVisible.value ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt);
+ satelliteProxy.changeVisibility({ showDataTxt: dataVisible.value });
}
function handleColorClick() {
isStandardColor.value = !isStandardColor.value;
- const { resGridViews, pointsRes } = SatelliteProxy.drawColor({
- gridViews: mapViews.gridViews,
- points: mapViews.points,
- gridDataDetail: selectedGridData,
- lastGridViews: mapViews.lastGridViews,
- customColor: !isStandardColor.value,
- opacity: 1,
- zIndex: 11
+ // satelliteProxy.drawGrid({
+ // gridDataDetail: selectedGridDataDetail,
+ // useCustomColor: !isStandardColor.value,
+ // opacity: 1,
+ // zIndex: 11
+ // });
+ selectedfusionData.value.forEach((i) => {
+ const d = fusionDataList.value[i];
+ if (gridDataDetailMap.has(d.id)) {
+ const gdd = gridDataDetailMap.get(d.id);
+ satelliteProxy.drawTagGrid({
+ tag: d.id,
+ gridDataDetail: gdd,
+ useCustomColor: !isStandardColor.value,
+ opacity: 1,
+ zIndex: 11
+ });
+ }
});
- mapViews.lastGridViews = resGridViews;
- mapViews.lastPoints = pointsRes;
}
function handleOpacityClick() {
isOpacity.value = !isOpacity.value;
- mapViews.lastGridViews.forEach((e) => {
- e.setOptions({
- fillOpacity: isOpacity.value ? 0.1 : 1
- });
- });
+ satelliteProxy.changeGridOpacity({ opacityValue: isOpacity.value ? 0.1 : 1 });
}
/**璧拌埅杞ㄨ抗*******************************************************************/
@@ -257,29 +335,48 @@
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));
+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 deviceType = ref(undefined);
const drawMode = ref(0);
// 鐩戞祴鏁版嵁
-const factorDatas = ref(new FactorDatas());
+// const factorDatas = ref(new FactorDatas());
+const factorDataMap = new Map();
// pm2.5
const factorType = 6;
-function onFetchData(dType, data) {
+function fetchMission() {
+ missionLoading.value = true;
+ missionStore
+ .fetchMission()
+ // .then((res) => {
+ // if (res.success && res.data.length > 0) {
+
+ // }
+ // })
+ .finally(() => (missionLoading.value = false));
+}
+
+function onFetchData(_factorDatas, dType, data) {
if (isUnmounted.value) return;
// todo 鏍规嵁璁惧绫诲瀷鍒囨崲鍦板浘鐩戞祴鍥犲瓙灞曠ず鍗曢�夋銆佹姌绾垮浘澶嶉�夋銆佹暟鎹〃鏍煎閫夋鐨勫洜瀛愮被鍨�
deviceType.value = dType;
- factorDatas.value.setData(data, drawMode.value, () => {
- factorDatas.value.refreshHeight(factorType.value);
+ _factorDatas.value.setData(data, drawMode.value, () => {
+ _factorDatas.value.refreshHeight(factorType.value);
});
}
@@ -289,7 +386,7 @@
// deviceCode.value = deviceCode;
const _startTime = moment(startTime).format('YYYY-MM-DD HH:mm:ss');
const _endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss');
- fetchData((page, pageSize) => {
+ return fetchData((page, pageSize) => {
return fetchHistoryData({
deviceType,
deviceCode,
@@ -297,15 +394,48 @@
endTime: _endTime,
page,
perPage: pageSize
- }).then((res) => onFetchData(deviceType, res.data));
+ });
+ // .then((res) => onFetchData(deviceType, res.data));
});
}
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 = factorDatas.value.factor[factorType];
+ const factor = fd.factor[factorType];
sector.clearSector();
- factorDatas.value.refreshHeight(factorType);
- mapLine.drawLine(factorDatas.value, factor);
+ fd.refreshHeight(factorType);
+ mapLine.drawTagLine(missionCode, fd, factor);
}
</script>
+<style scoped>
+/* ::v-deep .el-divider__text {
+ background: #122b54;
+ color: white;
+} */
+</style>
--
Gitblit v1.9.3