From de6fd089b37613808e5a3bef38ecc0761f7456e0 Mon Sep 17 00:00:00 2001 From: Riku <risaku@163.com> Date: 星期日, 02 三月 2025 22:07:47 +0800 Subject: [PATCH] AOD数据产品 --- src/views/dataproduct/ProductManage.vue | 76 +- src/utils/grid/map-grid.js | 0 src/views/satellitetelemetry/SatelliteTelemetry.vue | 89 -- src/api/gridApi.js | 45 + src/components.d.ts | 9 src/views/HomePage.vue | 6 src/views/satellitetelemetry/SatelliteProxy.js | 696 +++++++++++++++++++------ src/views/satellitetelemetry/component/SatelliteMixTool.vue | 272 ++++----- src/stores/satellite-grid.js | 21 src/views/satellitetelemetry/component/SatelliteManage.vue | 1 src/api/aodApi.js | 27 + src/views/satellitetelemetry/component/SatelliteImport.vue | 4 src/components/search/OptionAOD.vue | 64 ++ src/api/index.js | 3 src/views/dataproduct/component/ProductMake.vue | 199 +++++++ src/views/satellitetelemetry/component/AODImport.vue | 7 src/stores/grid-info.js | 29 + src/views/satellitetelemetry/component/SatelliteSearchBar.vue | 23 18 files changed, 1,107 insertions(+), 464 deletions(-) diff --git a/src/api/aodApi.js b/src/api/aodApi.js new file mode 100644 index 0000000..a880420 --- /dev/null +++ b/src/api/aodApi.js @@ -0,0 +1,27 @@ +import { $http } from './index'; +import moment from 'moment'; + +export default { + fetchAOD(groupId, dataTime) { + return $http + .get(`air/satellite/grid/aod`, { + params: { + groupId, + dataTime + } + }) + .then((res) => res.data); + }, + + fetchAODDetail(aodId, groupId, cellId) { + return $http + .get(`air/satellite/aod/data/detail`, { + params: { + aodId, + groupId, + cellId + } + }) + .then((res) => res.data); + }, +}; diff --git a/src/api/gridApi.js b/src/api/gridApi.js index a396d0b..2e9469f 100644 --- a/src/api/gridApi.js +++ b/src/api/gridApi.js @@ -45,22 +45,22 @@ .then((res) => res.data); }, - /** - * 鑾峰彇缃戞牸缁勪笅鐨勯仴娴媋od - * @param {*} groupId - * @param {*} dataTime - * @returns - */ - fetchGridAod(groupId, dataTime) { - return $http - .get(`air/satellite/grid/aod`, { - params: { - groupId, - dataTime - } - }) - .then((res) => res.data); - }, + // /** + // * 鑾峰彇缃戞牸缁勪笅鐨勯仴娴媋od + // * @param {*} groupId + // * @param {*} dataTime + // * @returns + // */ + // fetchGridAod(groupId, dataTime) { + // return $http + // .get(`air/satellite/grid/aod`, { + // params: { + // groupId, + // dataTime + // } + // }) + // .then((res) => res.data); + // }, fetchGridDataDetail(dataId, groupId, cellId) { return $http @@ -73,6 +73,19 @@ }) .then((res) => res.data); }, + + createGridDataAndDataDetail(groupId, dataTime, dataDetailList) { + return $http + .post(`air/satellite/grid/data/create`, { + params: { + groupId, + dataTime + }, + data: dataDetailList + }) + .then((res) => res.data); + }, + downloadTemplate() { return $http .get(`air/satellite/import/grid/data/download/template`, { diff --git a/src/api/index.js b/src/api/index.js index a87b389..cb2280b 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -10,7 +10,8 @@ } if (debug) { - ip1 = 'http://192.168.0.110:8084/'; + // ip1 = 'http://192.168.0.110:8084/'; + ip1 = 'http://192.168.1.8:8084/'; } const $http = axios.create({ diff --git a/src/components.d.ts b/src/components.d.ts index 3789168..7cd7be8 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -12,6 +12,7 @@ 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'] @@ -33,17 +34,16 @@ ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElOption: typeof import('element-plus/es')['ElOption'] - ElPagination: typeof import('element-plus/es')['ElPagination'] ElPopover: typeof import('element-plus/es')['ElPopover'] - ElRadio: typeof import('element-plus/es')['ElRadio'] - ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] - ElSlider: typeof import('element-plus/es')['ElSlider'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] + ElTabPane: typeof import('element-plus/es')['ElTabPane'] + ElTabs: typeof import('element-plus/es')['ElTabs'] ElText: typeof import('element-plus/es')['ElText'] ElUpload: typeof import('element-plus/es')['ElUpload'] FactorCheckbox: typeof import('./components/monitor/FactorCheckbox.vue')['default'] @@ -59,6 +59,7 @@ MissionEdit: typeof import('./components/mission/MissionEdit.vue')['default'] MissionImport: typeof import('./components/mission/MissionImport.vue')['default'] MissionManage: typeof import('./components/mission/MissionManage.vue')['default'] + OptionAOD: typeof import('./components/search/OptionAOD.vue')['default'] OptionDevice: typeof import('./components/search/OptionDevice.vue')['default'] OptionGridGroup: typeof import('./components/search/OptionGridGroup.vue')['default'] OptionLocation: typeof import('./components/search/OptionLocation.vue')['default'] diff --git a/src/components/search/OptionAOD.vue b/src/components/search/OptionAOD.vue new file mode 100644 index 0000000..34757a1 --- /dev/null +++ b/src/components/search/OptionAOD.vue @@ -0,0 +1,64 @@ +<template> + <el-form-item label="AOD鏁版嵁"> + <el-select + :loading="loading" + v-model="index" + @change="handleChange" + placeholder="閫夋嫨AOD鏁版嵁" + size="small" + class="w-150" + > + <el-option + v-for="(s, i) in aodList" + :key="i" + :label="timeFormatter(s.dataTime)" + :value="i" + /> + </el-select> + </el-form-item> +</template> +<script setup> +import { ref, onMounted } from 'vue'; +import moment from 'moment'; +import aodApi from '@/api/aodApi'; +import { useFetchData } from '@/composables/fetchData'; + +defineProps({ + modelValue: Object +}); + +const emits = defineEmits(['update:modelValue']); + +const { loading, fetchData } = useFetchData(); +const aodList = ref([]); +const index = ref(null); + +function fetchAOD(groupId, dataTime) { + return fetchData(() => { + return aodApi.fetchAOD(groupId, dataTime).then((res) => { + aodList.value = res.data; + if (res.data.length > 0) { + index.value = 0; + handleChange(0); + } else { + index.value = null; + handleChange(null); + } + }); + }); +} + +function timeFormatter(value) { + return moment(value).format('YYYY-MM-DD'); +} + +function handleChange(value) { + emits('update:modelValue', value != null ? aodList.value[value] : null); +} + +// onMounted(() => { +// fetchAOD(); +// }); + +defineExpose({ fetchAOD }); +</script> diff --git a/src/stores/grid-info.js b/src/stores/grid-info.js new file mode 100644 index 0000000..7abfcbb --- /dev/null +++ b/src/stores/grid-info.js @@ -0,0 +1,29 @@ +// import { ref } from 'vue'; +// import { defineStore } from 'pinia'; +// import { useFetchData } from '@/composables/fetchData'; +// import sceneInfoApi from '@/api/sceneInfoApi'; +// import { useToolboxStore } from '@/stores/toolbox'; + +// const toolboxStore = useToolboxStore(); + +// // 璧拌埅璁惧 +// export const useGridStore = defineStore('grid', () => { +// const selectedGrid = 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 }; +// }); diff --git a/src/stores/satellite-grid.js b/src/stores/satellite-grid.js index 526ac9a..8eedee8 100644 --- a/src/stores/satellite-grid.js +++ b/src/stores/satellite-grid.js @@ -22,6 +22,11 @@ return v.type == 1; }); }); + // 缃戞牸鏁版嵁璇︽儏 + const gridDataDetailMap = new Map(); + const selectedGridData = ref(undefined) + + const selectedGridDataDetail = ref(undefined) // 鑾峰彇缃戞牸淇℃伅 function fetchGridCell(groupId) { @@ -38,12 +43,17 @@ } // 鑾峰彇閬ユ祴鍗曟棩鍏蜂綋缃戞牸鐩戞祴鏁版嵁 - function fetchGridDataDetail(gridData) { - return gridApi - .fetchGridDataDetail(gridData.id, gridData.groupId) - .then((res) => { - gridData.dataDetail = res.data; + function fetchGridDataDetail(gridData, callback) { + if (gridDataDetailMap.has(gridData.id)) { + selectedGridData.value = gridDataDetailMap.get(gridData.id); + callback(selectedGridData.value); + } else { + gridApi.fetchGridDataDetail(gridData.id, gridData.groupId).then((res) => { + gridDataDetailMap.set(gridData.id, res.data); + selectedGridData.value = res.data; + callback(selectedGridData.value); }); + } } return { @@ -51,6 +61,7 @@ allGridDataList, gridDataList, mixGridDataList, + selectedGridData, fetchGridCell, fetchGridData, fetchGridDataDetail diff --git a/src/utils/grid/map-grid.js b/src/utils/grid/map-grid.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/utils/grid/map-grid.js diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 6509893..459e654 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -10,7 +10,7 @@ <!-- <MapLocation></MapLocation> --> <SceneSearch></SceneSearch> <MapScene></MapScene> - <el-button + <!-- <el-button @click="satelliteImportVisible = !satelliteImportVisible" type="primary" class="el-button-custom satellite-right-top p-events-auto" @@ -21,7 +21,8 @@ type="primary" class="el-button-custom aod-right-top p-events-auto" >AOD鏁版嵁瀵煎叆</el-button - > + > --> + <ProductManage class="satellite-right-top"></ProductManage> </el-row> <!-- <CoreMenu></CoreMenu> --> <router-view></router-view> @@ -35,6 +36,7 @@ import { ref } from 'vue'; import SatelliteImport from './satellitetelemetry/component/SatelliteImport.vue'; import AODImport from './satellitetelemetry/component/AODImport.vue'; +import ProductManage from './dataproduct/ProductManage.vue'; const satelliteImportVisible = ref(false); const aodImportVisible = ref(false); </script> diff --git a/src/views/dataproduct/ProductManage.vue b/src/views/dataproduct/ProductManage.vue index 112fa90..e91ffff 100644 --- a/src/views/dataproduct/ProductManage.vue +++ b/src/views/dataproduct/ProductManage.vue @@ -1,46 +1,46 @@ <template> <div> <el-button - @click="satelliteImportVisible = !satelliteImportVisible" + @click="dialogVisible = !dialogVisible" type="primary" - class="el-button-custom satellite-right-top p-events-auto" - >AOD鏁版嵁瀵煎叆</el-button + class="el-button-custom p-events-auto" + >鏁版嵁浜у搧</el-button > - </div> - <el-table - :data="gridDataList" - 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="true" - @row-click="handleRowClick" - > - <el-table-column type="index" label="搴忓彿" align="center" width="50" /> - <el-table-column - prop="dataTime" - label="鏃堕棿" - align="center" - :formatter="timeFormatter" - width="150" - /> - <el-table-column - prop="type" - label="鏁版嵁绫诲瀷" - align="center" - :formatter="dataTypeFormatter" - width="150" - /> - </el-table> + <CardDialog + draggable + :modal="false" + title="鏁版嵁浜у搧绠$悊" + v-model="dialogVisible" + width="600px" + > + <el-tabs v-model="activeName" @tab-click="handleClick"> + <el-tab-pane label="鍒濈骇浜у搧鍒朵綔" name="first"> + <ProductMake></ProductMake> + </el-tab-pane> + <el-tab-pane label="AOD鏁版嵁瀵煎叆" name="second"> + <AODImport></AODImport> + </el-tab-pane> + <el-tab-pane label="鍒濈骇浜у搧瀵煎叆" name="third"> + <SatelliteImport></SatelliteImport> + </el-tab-pane> + <el-tab-pane label="浜岀骇浜у搧鍒朵綔" name="fourth"> + + </el-tab-pane> + </el-tabs> + </CardDialog> + </div> </template> <script setup> +import SatelliteImport from "@/views/satellitetelemetry/component/SatelliteImport.vue"; +import AODImport from "@/views/satellitetelemetry/component/AODImport.vue"; +import ProductMake from "@/views/dataproduct/component/ProductMake.vue"; import { ref, onMounted } from 'vue'; + +const dialogVisible = ref(false); +const activeName = ref('first'); + + // AOD鏁版嵁鎷熷悎锛岀敓鎴愬垵绾ф暟鎹骇鍝� // 1. 鍙嚜鍔ㄩ�氳繃鍏紡鎷熷悎涓篜M2.5鏁版嵁锛岀敤鎴峰彲淇敼鐩稿叧鍙傛暟锛� @@ -50,3 +50,11 @@ // 1. AOD鏁版嵁瀵煎叆 // 2. AOD鏁版嵁鎷熷悎锛岄�夋嫨AOD鏁版嵁缁勩�佸睍绀哄凡鏈夌粨鏋溿�佽皟鏁村弬鏁般�佹樉绀哄搴旀椂闂寸殑鑳屾櫙鏁版嵁銆佹彁渚涚粨鏋滅敓鎴愪簩娆$‘璁ゅ厑璁歌皟鏁村弬鏁伴噸澶嶇敓鎴愩�佸瓨鍌ㄦ垨鏇存柊缁撴灉 </script> +<style scoped> +::v-deep .el-tabs__item { + color: white; +} +::v-deep .is-active { + color: #23dad0a2; +} +</style> \ No newline at end of file diff --git a/src/views/dataproduct/component/ProductMake.vue b/src/views/dataproduct/component/ProductMake.vue new file mode 100644 index 0000000..1116276 --- /dev/null +++ b/src/views/dataproduct/component/ProductMake.vue @@ -0,0 +1,199 @@ +<template> + <el-form + :inline="true" + :model="formObj" + :rules="rules" + ref="formRef" + label-position="right" + label-width="80px" + > + <SatelliteSearchBar + label-width="80px" + :loading="loading" + @search="onSearchAOD" + ></SatelliteSearchBar> + <OptionAOD ref="optionAODRef" v-model="aodData"></OptionAOD> + <el-form-item label="浜у搧璁板綍"> + <el-text :type="historyGridData ? 'warning' : 'success'">{{ + historyGridData ? '宸茬敓鎴�' : '鏈敓鎴�' + }}</el-text> + </el-form-item> + <el-form-item label="鎷熷悎鍏紡"> + <div> + y = + <el-input-number + v-model="a" + :precision="2" + controls-position="right" + :controls="false" + placeholder="璇疯緭鍏ョ郴鏁癮" + size="small" + /> + x + + <el-input-number + v-model="b" + :precision="2" + controls-position="right" + :controls="false" + placeholder="璇疯緭鍏ョ郴鏁癰" + size="small" + /> + </div> + </el-form-item> + <el-form-item> + <el-button + type="primary" + class="el-button-custom" + size="small" + @click="handleShowAODClick" + > + {{ '鏄剧ずAOD鏁版嵁' }} + </el-button> + <el-button + type="primary" + class="el-button-custom" + size="small" + @click="handlePreviewClick" + > + {{ '鎷熷悎棰勮' }} + </el-button> + <el-button + type="primary" + class="el-button-custom" + size="small" + @click="handleSaveClick" + > + {{ '淇濆瓨鎷熷悎缁撴灉' }} + </el-button> + </el-form-item> + </el-form> +</template> +<script setup> +import { ref, watch } from 'vue'; +import gridApi from '@/api/gridApi'; +import aodApi from '@/api/aodApi'; +import moment from 'moment'; +import SatelliteSearchBar from '@/views/satellitetelemetry/component/SatelliteSearchBar.vue'; +import { SatelliteProxy } from '@/views/satellitetelemetry/SatelliteProxy'; + +const satelliteProxy = new SatelliteProxy(); + +const optionAODRef = ref(null); + +const gridGroup = ref(null); +const aodData = ref(null); +const aodDataDetail = ref(null); +const historyGridData = ref(null); +const a = ref(null); +const b = ref(null); +const tempGridDataDetailList = ref(null); + +function handleShowAODClick() { + if (aodDataDetail.value) { + showAOD(aodDataDetail.value); + } else { + _fetchAODDetail().then((res) => { + showAOD(res); + }); + } +} + +// 璁$畻PM2.5缁撴灉锛屽悗缁簲璇ュ湪鍚庣瀹炵幇 +function calculatePM25(aod) { + return Math.round((a.value * aod + b.value) * 100) / 100; +} + +function handlePreviewClick() { + if (aodDataDetail.value) { + showPreview(aodDataDetail.value); + } else { + _fetchAODDetail().then((res) => { + showPreview(res); + }); + } +} + +function showAOD(data) { + const _aod = data.map((v, i) => { + return { + groupId: v.groupId, + cellId: v.cellId, + pm25: v.aod, + rank: i + 1 + }; + }); + satelliteProxy.drawGrid({ + gridData: _aod, + showDataTxt: true, + showRankTxt: true + }); +} + +function showPreview(data) { + tempGridDataDetailList.value = data.map((v, i) => { + return { + groupId: v.groupId, + cellId: v.cellId, + pm25: calculatePM25(v.aod), + rank: i + 1 + }; + }); + tempGridDataDetailList.value.sort((a, b) => { + return b.pm25 - a.pm25; + }); + satelliteProxy.drawGrid({ + gridData: tempGridDataDetailList.value, + showDataTxt: true, + showRankTxt: true + }); +} + +function handleSaveClick() {} + +function _fetchAODDetail() { + return aodApi + .fetchAODDetail(aodData.value.id, gridGroup.value.id) + .then((res) => { + res.data.sort((a, b) => { + return b.aod - a.aod; + }); + aodDataDetail.value = res.data; + return res.data; + }); +} + +function onSearchAOD(options) { + gridGroup.value = options; + gridApi.fetchGridCell(options.id).then((res) => { + satelliteProxy.gridPrepare(res.data); + }); + optionAODRef.value.fetchAOD(options.id); +} + +function checkHistoryGridData() { + if (aodData.value) { + const groupId = gridGroup.value.id; + const dataTime = moment(aodData.value.dataTime).format( + 'YYYY-MM-DD HH:mm:ss' + ); + // 鍘熷鍗槦鏁版嵁 + const type = 0; + return gridApi.fetchGridData(groupId, dataTime, type).then((res) => { + if (res.data.length > 0) { + historyGridData.value = res.data[0]; + } else { + historyGridData.value = null; + } + }); + } else { + historyGridData.value = null; + } +} + +watch(aodData, (nv, ov) => { + if (nv != ov) { + aodDataDetail.value = null; + checkHistoryGridData(); + } +}); +</script> diff --git a/src/views/satellitetelemetry/SatelliteProxy.js b/src/views/satellitetelemetry/SatelliteProxy.js index 39ae4b1..9088429 100644 --- a/src/views/satellitetelemetry/SatelliteProxy.js +++ b/src/views/satellitetelemetry/SatelliteProxy.js @@ -2,188 +2,542 @@ import gridMapUtil from '@/utils/map/grid'; import { map, onMapMounted } from '@/utils/map/index_old'; -let districtPolygon; -// 缁樺埗鍖哄幙杈圭晫 -function drawDistrict(districtName, isNew) { - onMapMounted(() => { - if (districtPolygon && !isNew) { - map.remove(districtPolygon); - map.add(districtPolygon); - } else { - // eslint-disable-next-line no-undef - var district = new AMap.DistrictSearch({ - extensions: 'all', //杩斿洖琛屾斂鍖鸿竟鐣屽潗鏍囩瓑鍏蜂綋淇℃伅 - level: 'district' //璁剧疆鏌ヨ琛屾斂鍖虹骇鍒负鍖� - }); - district.search(districtName, function (status, result) { - var bounds = result.districtList[0].boundaries; //鑾峰彇鏈濋槼鍖虹殑杈圭晫淇℃伅 - if (bounds) { - for (var i = 0; i < bounds.length; i++) { - //鐢熸垚琛屾斂鍖哄垝 polygon - // eslint-disable-next-line no-undef - districtPolygon = new AMap.Polygon({ - map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞� - strokeWeight: 2, //杞粨绾垮搴� - path: bounds[i], //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁� - fillOpacity: 0, //澶氳竟褰㈠~鍏呴�忔槑搴� - fillColor: '#CCF3FF', //澶氳竟褰㈠~鍏呴鑹� - // strokeColor: '#ffffff' //绾挎潯棰滆壊 - strokeColor: '#0552f7', //绾挎潯棰滆壊 - zIndex: 9 - }); - } - map.setFitView(); //灏嗚鐩栫墿璋冩暣鍒板悎閫傝閲� - } - }); - } - }); -} +export class SatelliteProxy { + // 鍦板浘缃戞牸鐩稿叧瀵硅薄 + mapViews; -function clearAll(mapViews) { - if (mapViews) { - if (typeof mapViews.textViews === 'object') { - map.remove(mapViews.textViews); - } - if (typeof mapViews.gridViews === 'object') { - map.remove(mapViews.gridViews); - } - } -} - -function clearText(mapViews) { - if (mapViews) { - if (typeof mapViews.dataTxt === 'object') { - map.remove(mapViews.dataTxt); - } - if (typeof mapViews.dataLayer === 'object') { - map.remove(mapViews.dataLayer); - } - if (typeof mapViews.rankTxt === 'object') { - map.remove(mapViews.rankTxt); - } - if (typeof mapViews.rankLayer === 'object') { - map.remove(mapViews.rankLayer); - } - } -} - -// 缁樺埗缃戞牸绾� -function drawPolyline(gridInfo, event) { - // 缁樺埗缃戞牸 - const points = gridInfo.map((v) => { - return calculate.wgs84_To_Gcj02(v.longitude, v.latitude); - // return [v.longitude, v.latitude]; - }); - // const gridPoints = gridMapUtil.parseGridPoint(points); - // console.log('gridPoints:', gridPoints); - - const gridPoints = gridInfo.map((v, i) => { - return { - path: [ - calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat), - calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat), - calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat), - calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat) - // [v.point1Lon, v.point1Lat], - // [v.point2Lon, v.point2Lat], - // [v.point3Lon, v.point3Lat], - // [v.point4Lon, v.point4Lat] - ] + districtPolygon; + // 缁樺埗鍖哄幙杈圭晫 + drawDistrict(districtName, isNew) { + onMapMounted(() => { + if (this.districtPolygon && !isNew) { + map.remove(this.districtPolygon); + map.add(this.districtPolygon); + } else { // eslint-disable-next-line no-undef - .map((d) => new AMap.LngLat(d[0], d[1])), - extData: points[i] - }; - }); - const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event }); - return { gridViews, gridPoints, points }; -} + var district = new AMap.DistrictSearch({ + extensions: 'all', //杩斿洖琛屾斂鍖鸿竟鐣屽潗鏍囩瓑鍏蜂綋淇℃伅 + level: 'district' //璁剧疆鏌ヨ琛屾斂鍖虹骇鍒负鍖� + }); + district.search(districtName, (status, result) => { + var bounds = result.districtList[0].boundaries; //鑾峰彇鏈濋槼鍖虹殑杈圭晫淇℃伅 + if (bounds) { + for (var i = 0; i < bounds.length; i++) { + //鐢熸垚琛屾斂鍖哄垝 polygon + // eslint-disable-next-line no-undef + this.districtPolygon = new AMap.Polygon({ + map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞� + strokeWeight: 2, //杞粨绾垮搴� + path: bounds[i], //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁� + fillOpacity: 0, //澶氳竟褰㈠~鍏呴�忔槑搴� + fillColor: '#CCF3FF', //澶氳竟褰㈠~鍏呴鑹� + // strokeColor: '#ffffff' //绾挎潯棰滆壊 + strokeColor: '#0552f7', //绾挎潯棰滆壊 + zIndex: 9 + }); + } + map.setFitView(); //灏嗚鐩栫墿璋冩暣鍒板悎閫傝閲� + } + }); + } + }); + } -// 缁樺埗鐩戞祴鏁版嵁鍊� -function drawDataText(points, gridDataDetail, textViews, labelsLayer) { - const data = gridDataDetail.map((v, i) => { - return { - lnglat_GD: points[i], - // data: v.pm25 ? (v.pm25 + '渭g/m鲁') : '' - data: v.pm25 ? v.pm25 : '' - }; - }); - // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom'); - return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data'); -} + clearAll(mapViews) { + if (mapViews) { + if (typeof mapViews.gridViews === 'object') { + map.remove(mapViews.gridViews); + } + } + this.clearText(mapViews); + } -// 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰 -function drawRankText(points, gridDataDetail, textViews, labelsLayer) { - const data = gridDataDetail.map((v, i) => { - return { - lnglat_GD: points[i], - // data: v.pm25 ? ('鎺掑悕: ' + v.rank) : '' - data: v.pm25 ? v.rank : '' - }; - }); - // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top'); - return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank'); -} + clearText(mapViews) { + if (mapViews) { + if (typeof mapViews.dataTxt === 'object') { + map.remove(mapViews.dataTxt); + } + if (typeof mapViews.dataLayer === 'object') { + map.remove(mapViews.dataLayer); + } + if (typeof mapViews.rankTxt === 'object') { + map.remove(mapViews.rankTxt); + } + if (typeof mapViews.rankLayer === 'object') { + map.remove(mapViews.rankLayer); + } + } + } -// 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹� -function drawColor({ - gridViews, - points, - gridDataDetail, - lastGridViews, - opacity, - zIndex, - customColor -}) { - // 鏍规嵁鏁版嵁绛涢�夋湁鏁版嵁鐨勭綉鏍� - const res = []; - // 浠ュ強瀵瑰簲鐨勪腑蹇冪偣鍧愭爣 - const pointsRes = []; - gridDataDetail.forEach((d) => { - // 鏍规嵁鏁版嵁鍏宠仈鐨勭綉鏍肩紪鍙凤紝鎵惧埌瀵瑰簲缃戞牸 - const cellId = d.cellId; - if (cellId > gridViews.length) { - throw Error( - '閬ユ祴鏁版嵁鐨勭綉鏍肩储寮曠紪鍙疯秴鍑虹綉鏍肩粍鑼冨洿锛屾暟鎹拰缃戞牸缁勫彲鑳戒笉瀵瑰簲' + // 缁樺埗缃戞牸绾� + drawPolyline(gridInfo, event) { + // 缁樺埗缃戞牸 + const points = gridInfo.map((v) => { + return calculate.wgs84_To_Gcj02(v.longitude, v.latitude); + // return [v.longitude, v.latitude]; + }); + // const gridPoints = gridMapUtil.parseGridPoint(points); + // console.log('gridPoints:', gridPoints); + + const gridPoints = gridInfo.map((v, i) => { + return { + path: [ + calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat), + calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat), + calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat), + calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat) + // [v.point1Lon, v.point1Lat], + // [v.point2Lon, v.point2Lat], + // [v.point3Lon, v.point3Lat], + // [v.point4Lon, v.point4Lat] + ] + // eslint-disable-next-line no-undef + .map((d) => new AMap.LngLat(d[0], d[1])), + extData: points[i] + }; + }); + const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event }); + return { gridViews, gridPoints, points }; + } + + // 缁樺埗鐩戞祴鏁版嵁鍊� + drawDataText(points, gridDataDetail, textViews, labelsLayer) { + const data = gridDataDetail.map((v, i) => { + return { + lnglat_GD: points[i], + // data: v.pm25 ? (v.pm25 + '渭g/m鲁') : '' + data: v.pm25 ? v.pm25 : '' + }; + }); + // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom'); + return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data'); + } + + // 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰 + drawRankText(points, gridDataDetail, textViews, labelsLayer) { + const data = gridDataDetail.map((v, i) => { + return { + lnglat_GD: points[i], + // data: v.pm25 ? ('鎺掑悕: ' + v.rank) : '' + data: v.pm25 ? v.rank : '' + }; + }); + // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top'); + return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank'); + } + + // 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹� + drawColor({ + gridViews, + points, + gridDataDetail, + lastGridViews, + opacity, + zIndex, + customColor + }) { + // 鏍规嵁鏁版嵁绛涢�夋湁鏁版嵁鐨勭綉鏍� + const res = []; + // 浠ュ強瀵瑰簲鐨勪腑蹇冪偣鍧愭爣 + const pointsRes = []; + gridDataDetail.forEach((d) => { + // 鏍规嵁鏁版嵁鍏宠仈鐨勭綉鏍肩紪鍙凤紝鎵惧埌瀵瑰簲缃戞牸 + const cellId = d.cellId; + if (cellId > gridViews.length) { + throw Error( + '閬ユ祴鏁版嵁鐨勭綉鏍肩储寮曠紪鍙疯秴鍑虹綉鏍肩粍鑼冨洿锛屾暟鎹拰缃戞牸缁勫彲鑳戒笉瀵瑰簲' + ); + } + res.push(gridViews[cellId - 1]); + pointsRes.push(points[cellId - 1]); + }); + + // 鏍规嵁缁樺埗棰滆壊鏂瑰紡缁樺埗缃戞牸 + let resGridViews; + if (customColor) { + resGridViews = gridMapUtil.drawGridColorCustom( + res, + gridDataDetail, + opacity, + zIndex + ); + } else { + resGridViews = gridMapUtil.drawGridColor( + res, + gridDataDetail, + 'PM25', + opacity, + zIndex ); } - res.push(gridViews[cellId - 1]); - pointsRes.push(points[cellId - 1]); - }); - // 鏍规嵁缁樺埗棰滆壊鏂瑰紡缁樺埗缃戞牸 - let resGridViews; - if (customColor) { - resGridViews = gridMapUtil.drawGridColorCustom( - res, - gridDataDetail, - opacity, - zIndex - ); - } else { - resGridViews = gridMapUtil.drawGridColor( - res, - gridDataDetail, - 'PM25', - opacity, - zIndex - ); + if (lastGridViews) { + map.remove(lastGridViews); + } + map.add(resGridViews); + map.setFitView(resGridViews); + + return { resGridViews, pointsRes }; } - if (lastGridViews) { - map.remove(lastGridViews); + // 鍗槦缃戞牸閰嶇疆鍑嗗 + gridPrepare(gridInfo, event) { + // clearText(mapViews); + this.clearAll(this.mapViews); + this.mapViews = this.drawPolyline(gridInfo, event); } - map.add(resGridViews); - map.setFitView(resGridViews); - return { resGridViews, pointsRes }; + // 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊 + drawGrid({ + gridData, + useCustomColor, + opacity, + zIndex, + showDataTxt, + showRankTxt + }) { + // SatelliteProxy.clearText(mapViews); + const { resGridViews, pointsRes } = this.drawColor({ + gridViews: this.mapViews.gridViews, + points: this.mapViews.points, + gridDataDetail: gridData, + lastGridViews: this.mapViews.lastGridViews, + customColor: useCustomColor, + opacity: opacity, + zIndex: zIndex + }); + this.mapViews.lastGridViews = resGridViews; + this.mapViews.lastPoints = pointsRes; + + // 鏁版嵁鏍囪 + const { textViews: dataTxt, labelsLayer: dataLayer } = this.drawDataText( + this.mapViews.lastPoints, + gridData, + this.mapViews.dataTxt, + this.mapViews.dataLayer + ); + this.mapViews.dataTxt = dataTxt; + this.mapViews.dataLayer = dataLayer; + + const { textViews: rankTxt, labelsLayer: rankLayer } = this.drawRankText( + this.mapViews.lastPoints, + gridData, + this.mapViews.rankTxt, + this.mapViews.rankLayer + ); + this.mapViews.rankTxt = rankTxt; + this.mapViews.rankLayer = rankLayer; + + if (showDataTxt) { + map.add(this.mapViews.dataTxt); + } + + if (showRankTxt) { + map.add(this.mapViews.rankTxt); + } + } + + // 璋冩暣鍚勭被鍦板浘瑕嗙洊鐗╃殑鍙鎬� + changeVisibility({ showGridViews, showDataTxt, showRankTxt }) { + if (showGridViews != undefined) { + showGridViews + ? map.add(this.mapViews.lastGridViews) + : map.remove(this.mapViews.lastGridViews); + } + if (showDataTxt != undefined) { + showDataTxt + ? map.add(this.mapViews.dataTxt) + : map.remove(this.mapViews.dataTxt); + } + if (showRankTxt != undefined) { + showRankTxt + ? map.add(this.mapViews.rankTxt) + : map.remove(this.mapViews.rankTxt); + } + } + + changeGridOpacity({ isOpacity, opacityValue }) { + this.mapViews.lastGridViews.forEach((e) => { + e.setOptions({ + fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7 + }); + }); + } + + setGridEvent(event) { + this.mapViews.gridViews.forEach((polygon) => { + event(polygon); + }); + } + + } -export default { - drawDistrict, - drawPolyline, - drawDataText, - drawRankText, - drawColor, - clearText, - clearAll -}; +// // 鍦板浘缃戞牸鐩稿叧瀵硅薄 +// let mapViews; + +// let districtPolygon; +// // 缁樺埗鍖哄幙杈圭晫 +// function drawDistrict(districtName, isNew) { +// onMapMounted(() => { +// if (districtPolygon && !isNew) { +// map.remove(districtPolygon); +// map.add(districtPolygon); +// } else { +// // eslint-disable-next-line no-undef +// var district = new AMap.DistrictSearch({ +// extensions: 'all', //杩斿洖琛屾斂鍖鸿竟鐣屽潗鏍囩瓑鍏蜂綋淇℃伅 +// level: 'district' //璁剧疆鏌ヨ琛屾斂鍖虹骇鍒负鍖� +// }); +// district.search(districtName, function (status, result) { +// var bounds = result.districtList[0].boundaries; //鑾峰彇鏈濋槼鍖虹殑杈圭晫淇℃伅 +// if (bounds) { +// for (var i = 0; i < bounds.length; i++) { +// //鐢熸垚琛屾斂鍖哄垝 polygon +// // eslint-disable-next-line no-undef +// districtPolygon = new AMap.Polygon({ +// map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞� +// strokeWeight: 2, //杞粨绾垮搴� +// path: bounds[i], //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁� +// fillOpacity: 0, //澶氳竟褰㈠~鍏呴�忔槑搴� +// fillColor: '#CCF3FF', //澶氳竟褰㈠~鍏呴鑹� +// // strokeColor: '#ffffff' //绾挎潯棰滆壊 +// strokeColor: '#0552f7', //绾挎潯棰滆壊 +// zIndex: 9 +// }); +// } +// map.setFitView(); //灏嗚鐩栫墿璋冩暣鍒板悎閫傝閲� +// } +// }); +// } +// }); +// } + +// function clearAll(mapViews) { +// if (mapViews) { +// if (typeof mapViews.gridViews === 'object') { +// map.remove(mapViews.gridViews); +// } +// } +// clearText(mapViews); +// } + +// function clearText(mapViews) { +// if (mapViews) { +// if (typeof mapViews.dataTxt === 'object') { +// map.remove(mapViews.dataTxt); +// } +// if (typeof mapViews.dataLayer === 'object') { +// map.remove(mapViews.dataLayer); +// } +// if (typeof mapViews.rankTxt === 'object') { +// map.remove(mapViews.rankTxt); +// } +// if (typeof mapViews.rankLayer === 'object') { +// map.remove(mapViews.rankLayer); +// } +// } +// } + +// // 缁樺埗缃戞牸绾� +// function drawPolyline(gridInfo, event) { +// // 缁樺埗缃戞牸 +// const points = gridInfo.map((v) => { +// return calculate.wgs84_To_Gcj02(v.longitude, v.latitude); +// // return [v.longitude, v.latitude]; +// }); +// // const gridPoints = gridMapUtil.parseGridPoint(points); +// // console.log('gridPoints:', gridPoints); + +// const gridPoints = gridInfo.map((v, i) => { +// return { +// path: [ +// calculate.wgs84_To_Gcj02(v.point1Lon, v.point1Lat), +// calculate.wgs84_To_Gcj02(v.point2Lon, v.point2Lat), +// calculate.wgs84_To_Gcj02(v.point3Lon, v.point3Lat), +// calculate.wgs84_To_Gcj02(v.point4Lon, v.point4Lat) +// // [v.point1Lon, v.point1Lat], +// // [v.point2Lon, v.point2Lat], +// // [v.point3Lon, v.point3Lat], +// // [v.point4Lon, v.point4Lat] +// ] +// // eslint-disable-next-line no-undef +// .map((d) => new AMap.LngLat(d[0], d[1])), +// extData: points[i] +// }; +// }); +// const gridViews = gridMapUtil.drawPolylines({ points: gridPoints, event }); +// return { gridViews, gridPoints, points }; +// } + +// // 缁樺埗鐩戞祴鏁版嵁鍊� +// function drawDataText(points, gridDataDetail, textViews, labelsLayer) { +// const data = gridDataDetail.map((v, i) => { +// return { +// lnglat_GD: points[i], +// // data: v.pm25 ? (v.pm25 + '渭g/m鲁') : '' +// data: v.pm25 ? v.pm25 : '' +// }; +// }); +// // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'bottom'); +// return gridMapUtil.drawGridText(data, textViews, 'top-center', 'data'); +// } + +// // 缁樺埗鐩戞祴鏁版嵁鎺掑悕鏂囨湰 +// function drawRankText(points, gridDataDetail, textViews, labelsLayer) { +// const data = gridDataDetail.map((v, i) => { +// return { +// lnglat_GD: points[i], +// // data: v.pm25 ? ('鎺掑悕: ' + v.rank) : '' +// data: v.pm25 ? v.rank : '' +// }; +// }); +// // return gridMapUtil.drawGridTextLabel(data, textViews, labelsLayer, 'top'); +// return gridMapUtil.drawGridText(data, textViews, 'bottom-center', 'rank'); +// } + +// // 缁樺埗鐩戞祴鏁版嵁鍊煎搴旂綉鏍奸鑹� +// function drawColor({ +// gridViews, +// points, +// gridDataDetail, +// lastGridViews, +// opacity, +// zIndex, +// customColor +// }) { +// // 鏍规嵁鏁版嵁绛涢�夋湁鏁版嵁鐨勭綉鏍� +// const res = []; +// // 浠ュ強瀵瑰簲鐨勪腑蹇冪偣鍧愭爣 +// const pointsRes = []; +// gridDataDetail.forEach((d) => { +// // 鏍规嵁鏁版嵁鍏宠仈鐨勭綉鏍肩紪鍙凤紝鎵惧埌瀵瑰簲缃戞牸 +// const cellId = d.cellId; +// if (cellId > gridViews.length) { +// throw Error( +// '閬ユ祴鏁版嵁鐨勭綉鏍肩储寮曠紪鍙疯秴鍑虹綉鏍肩粍鑼冨洿锛屾暟鎹拰缃戞牸缁勫彲鑳戒笉瀵瑰簲' +// ); +// } +// res.push(gridViews[cellId - 1]); +// pointsRes.push(points[cellId - 1]); +// }); + +// // 鏍规嵁缁樺埗棰滆壊鏂瑰紡缁樺埗缃戞牸 +// let resGridViews; +// if (customColor) { +// resGridViews = gridMapUtil.drawGridColorCustom( +// res, +// gridDataDetail, +// opacity, +// zIndex +// ); +// } else { +// resGridViews = gridMapUtil.drawGridColor( +// res, +// gridDataDetail, +// 'PM25', +// opacity, +// zIndex +// ); +// } + +// if (lastGridViews) { +// map.remove(lastGridViews); +// } +// map.add(resGridViews); +// map.setFitView(resGridViews); + +// return { resGridViews, pointsRes }; +// } + +// // 鍗槦缃戞牸閰嶇疆鍑嗗 +// function gridPrepare(gridInfo, event) { +// // clearText(mapViews); +// clearAll(mapViews); +// mapViews = drawPolyline(gridInfo, event); +// } + +// // 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊 +// function drawGrid({ +// gridData, +// useCustomColor, +// opacity, +// zIndex, +// showDataTxt, +// showRankTxt +// }) { +// // SatelliteProxy.clearText(mapViews); +// const { resGridViews, pointsRes } = drawColor({ +// gridViews: mapViews.gridViews, +// points: mapViews.points, +// gridDataDetail: gridData, +// lastGridViews: mapViews.lastGridViews, +// customColor: useCustomColor, +// opacity: opacity, +// zIndex: zIndex +// }); +// mapViews.lastGridViews = resGridViews; +// mapViews.lastPoints = pointsRes; + +// // 鏁版嵁鏍囪 +// const { textViews: dataTxt, labelsLayer: dataLayer } = drawDataText( +// mapViews.lastPoints, +// gridData, +// mapViews.dataTxt, +// mapViews.dataLayer +// ); +// mapViews.dataTxt = dataTxt; +// mapViews.dataLayer = dataLayer; + +// const { textViews: rankTxt, labelsLayer: rankLayer } = drawRankText( +// mapViews.lastPoints, +// gridData, +// mapViews.rankTxt, +// mapViews.rankLayer +// ); +// mapViews.rankTxt = rankTxt; +// mapViews.rankLayer = rankLayer; + +// if (showDataTxt) { +// map.add(mapViews.dataTxt); +// } + +// if (showRankTxt) { +// map.add(mapViews.rankTxt); +// } +// } + +// // 璋冩暣鍚勭被鍦板浘瑕嗙洊鐗╃殑鍙鎬� +// function changeVisibility({ showGridViews, showDataTxt, showRankTxt }) { +// if (showGridViews != undefined) { +// showGridViews ? map.add(mapViews.lastGridViews) : map.remove(mapViews.lastGridViews); +// } +// if (showDataTxt != undefined) { +// showDataTxt ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt); +// } +// if (showRankTxt != undefined) { +// showRankTxt ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt); +// } +// } + +// function changeGridOpacity({ isOpacity, opacityValue }) { +// mapViews.lastGridViews.forEach((e) => { +// e.setOptions({ +// fillOpacity: opacityValue ? opacityValue : isOpacity ? 0.1 : 0.7 +// }); +// }); +// } + +// export default { +// drawDistrict, +// drawPolyline, +// drawDataText, +// drawRankText, +// drawColor, +// gridPrepare, +// drawGrid, +// changeVisibility, +// changeGridOpacity, +// clearText, +// clearAll +// }; diff --git a/src/views/satellitetelemetry/SatelliteTelemetry.vue b/src/views/satellitetelemetry/SatelliteTelemetry.vue index 188b0f1..859211a 100644 --- a/src/views/satellitetelemetry/SatelliteTelemetry.vue +++ b/src/views/satellitetelemetry/SatelliteTelemetry.vue @@ -1,4 +1,6 @@ <template> + <SatelliteMixTool :group-id="3"></SatelliteMixTool> + <el-row class="wrap"> <el-col span="2"> <!-- <div class="p-events-auto"> @@ -46,7 +48,6 @@ </el-row> <SatelliteDataMix class="data-mix" @mix-data="handleMixDataClick"> </SatelliteDataMix> - <SatelliteMixTool :group-id="3"></SatelliteMixTool> <!-- <el-row class="historical" justify="center"> <SatelliteAnimation @@ -67,10 +68,12 @@ import SatelliteManage from './component/SatelliteManage.vue'; import SatelliteDataMix from './component/SatelliteDataMix.vue'; import SatelliteMixTool from './component/SatelliteMixTool.vue'; -import SatelliteProxy from './SatelliteProxy'; +import { SatelliteProxy } from './SatelliteProxy'; import { useFetchData } from '@/composables/fetchData'; import { useSatelliteGridStore } from '@/stores/satellite-grid'; import { useSceneStore } from '@/stores/scene'; + +const satelliteProxy = new SatelliteProxy(); const satelliteGridStore = useSatelliteGridStore(); const { loading, fetchData } = useFetchData(10000); @@ -83,16 +86,12 @@ // 缃戞牸鏁版嵁璇︽儏 const gridDataDetailMap = new Map(); const gridDataDetailList = ref([]); -// 鍦板浘缃戞牸鐩稿叧瀵硅薄 -let mapViews; // 鏌ヨ缃戞牸淇℃伅鍜岄仴鎰熸暟鎹粍 function onSearch(options) { satelliteGridStore.fetchGridCell(options.id).then(() => { - SatelliteProxy.clearText(mapViews); - drawGrid(satelliteGridStore.gridInfo); - // initDistrict(); - SatelliteProxy.drawDistrict('闀垮畞鍖�'); + prepareGrid(satelliteGridStore.gridInfo); + satelliteProxy.drawDistrict('闀垮畞鍖�'); }); satelliteGridStore.fetchGridData(options.id).then(() => { max = satelliteGridStore.gridDataList.length; @@ -127,9 +126,8 @@ } } -function drawGrid(gridInfo) { - SatelliteProxy.clearAll(mapViews); - mapViews = SatelliteProxy.drawPolyline(gridInfo, (polygon) => { +function prepareGrid(gridInfo) { + satelliteProxy.gridPrepare(gridInfo, (polygon) => { //榧犳爣绉诲叆浜嬩欢 polygon.on('mouseover', () => { polygon.setOptions({ @@ -154,82 +152,31 @@ }); } -// 缁樺埗缃戞牸閬ユ劅鏁版嵁鍊煎拰缃戞牸棰滆壊 -function drawTextAndColor(gridData) { - // SatelliteProxy.clearText(mapViews); - const { resGridViews, pointsRes } = SatelliteProxy.drawColor({ - gridViews: mapViews.gridViews, - points: mapViews.points, - gridDataDetail: gridData, - lastGridViews: mapViews.lastGridViews - }); - 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(gridData) { + satelliteProxy.drawGrid({ gridData }); } -let selectedGridData; function handleRowClick(row) { - if (gridDataDetailMap.has(row.id)) { - const gridData = gridDataDetailMap.get(row.id); - selectedGridData = gridData; - drawTextAndColor(gridData); - } else { - gridApi.fetchGridDataDetail(row.id, row.groupId).then((res) => { - gridDataDetailMap.set(row.id, res.data); - const gridData = res.data; - selectedGridData = gridData; - drawTextAndColor(gridData); - }); - } + satelliteGridStore.fetchGridDataDetail(row, drawGrid); } function handleRankClick(rankVisible) { - // rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer); - rankVisible ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt); + satelliteProxy.changeVisibility({ showRankTxt: rankVisible }); } function handleDataClick(dataVisible) { - // dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer); - dataVisible ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt); + satelliteProxy.changeVisibility({ showDataTxt: dataVisible }); } function handleColorClick(isStandardColor) { - const { resGridViews, pointsRes } = SatelliteProxy.drawColor({ - gridViews: mapViews.gridViews, - points: mapViews.points, - gridDataDetail: selectedGridData, - lastGridViews: mapViews.lastGridViews, - customColor: !isStandardColor + satelliteProxy.drawGrid({ + gridData: satelliteGridStore.selectedGridData, + useCustomColor: !isStandardColor }); - mapViews.lastGridViews = resGridViews; - mapViews.lastPoints = pointsRes; } function handleOpacityClick(isOpacity) { - mapViews.lastGridViews.forEach((e) => { - e.setOptions({ - fillOpacity: isOpacity ? 0.1 : 0.7 - }); - }); + satelliteProxy.changeGridOpacity({ isOpacity }); } function handleMixDataClick(gridData) { diff --git a/src/views/satellitetelemetry/component/AODImport.vue b/src/views/satellitetelemetry/component/AODImport.vue index 34167b4..26b107c 100644 --- a/src/views/satellitetelemetry/component/AODImport.vue +++ b/src/views/satellitetelemetry/component/AODImport.vue @@ -1,5 +1,5 @@ <template> - <CardDialog title="AOD鏁版嵁瀵煎叆" :model-value="modelValue" :width="420" @changed="handleChange"> + <!-- <CardDialog title="AOD鏁版嵁瀵煎叆" :model-value="modelValue" :width="420" @changed="handleChange"> --> <div class="download"> <el-button @click="downloadTemplate" type="primary" class="el-button-custom" size="small" v-loading="downloadLoading">涓嬭浇妯℃澘</el-button> @@ -44,11 +44,12 @@ <el-text class="mx-1" type="success">{{ successTipMsg }}</el-text> </el-form-item> </el-form> - </CardDialog> + <!-- </CardDialog> --> </template> <script setup> import { ref, watch, defineProps, defineEmits } from 'vue'; import gridApi from '@/api/gridApi'; +import aodApi from '@/api/aodApi'; import { dayjs, ElMessage } from 'element-plus'; import { useFormConfirm } from '@/composables/formConfirm'; @@ -90,7 +91,7 @@ // 閫氳繃缃戞牸缁勫拰鏃堕棿 鏌ヨ 鍦ㄨ繖涓や釜鍙傛暟鏉′欢涓嬫槸鍚︽湁缃戞牸鏁版嵁锛屽苟鎻愮ず鍦ㄧ晫闈腑鏈夋垨鑰呮病鏈� const checkEmpty = () => { - gridApi.fetchGridAod(gridGroup.value.id, dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')).then(res => { + aodApi.fetchAOD(gridGroup.value.id, dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')).then(res => { if (res.data && res.data.length > 0) { hasGridAod.value = true; } else { diff --git a/src/views/satellitetelemetry/component/SatelliteImport.vue b/src/views/satellitetelemetry/component/SatelliteImport.vue index eb962bd..0ab79c0 100644 --- a/src/views/satellitetelemetry/component/SatelliteImport.vue +++ b/src/views/satellitetelemetry/component/SatelliteImport.vue @@ -1,5 +1,5 @@ <template> - <CardDialog title="鐩戞祴鏁版嵁瀵煎叆" :model-value="modelValue" :width="420" @changed="handleChange"> + <!-- <CardDialog title="鐩戞祴鏁版嵁瀵煎叆" :model-value="modelValue" :width="420" @changed="handleChange"> --> <div class="download"> <el-button @click="downloadTemplate" type="primary" class="el-button-custom" size="small" v-loading="downloadLoading">涓嬭浇妯℃澘</el-button> @@ -44,7 +44,7 @@ <el-text class="mx-1" type="success">{{ successTipMsg }}</el-text> </el-form-item> </el-form> - </CardDialog> + <!-- </CardDialog> --> </template> <script setup> import { ref, watch, defineProps, defineEmits } from 'vue'; diff --git a/src/views/satellitetelemetry/component/SatelliteManage.vue b/src/views/satellitetelemetry/component/SatelliteManage.vue index 318f624..2fe2100 100644 --- a/src/views/satellitetelemetry/component/SatelliteManage.vue +++ b/src/views/satellitetelemetry/component/SatelliteManage.vue @@ -92,7 +92,6 @@ import SatelliteSearchBar from './SatelliteSearchBar.vue'; // import { useFetchData } from '@/composables/fetchData'; // import gridApi from '@/api/gridApi'; -// import SatelliteProxy from '../SatelliteProxy'; // eslint-disable-next-line no-unused-vars function timeFormatter(row, col, cellValue, index) { diff --git a/src/views/satellitetelemetry/component/SatelliteMixTool.vue b/src/views/satellitetelemetry/component/SatelliteMixTool.vue index 9f10545..81b5b7e 100644 --- a/src/views/satellitetelemetry/component/SatelliteMixTool.vue +++ b/src/views/satellitetelemetry/component/SatelliteMixTool.vue @@ -1,94 +1,104 @@ <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="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> </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,7 +107,7 @@ } }); -const dialogVisible = ref(true); +const dialogVisible = ref(false); const mission = ref(undefined); const gridCellList = ref(undefined); @@ -111,9 +121,6 @@ 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'); @@ -126,42 +133,22 @@ }); } -function drawGrid(gridInfo) { - SatelliteProxy.clearAll(mapViews); - mapViews = SatelliteProxy.drawPolyline(gridInfo); +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(gridData) { + satelliteProxy.drawGrid({ gridData, opacity: 1, zIndex: 11 }); } watch(mission, (nV, oV) => { @@ -174,10 +161,10 @@ 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); }); } }, @@ -186,29 +173,37 @@ } ); +watch(dialogVisible, (nV, oV) => { + if (nV != oV) { + gridApi.fetchGridCell(props.groupId).then((res) => { + gridCellList.value = res.data; + prepareGrid(gridCellList.value); + }); + } +}); + let selectedGridData; // 鍙犲姞铻嶅悎 function handleFusionClick() { + // resetButton(); const d = fusionData.value; if (gridDataDetailMap.has(d.id)) { const gridData = gridDataDetailMap.get(d.id); selectedGridData = gridData; - drawTextAndColor(gridData); + drawGrid(gridData); } else { gridApi.fetchGridDataDetail(d.id, d.groupId).then((res) => { gridDataDetailMap.set(d.id, res.data); const gridData = res.data; selectedGridData = gridData; - drawTextAndColor(gridData); + drawGrid(gridData); }); } } 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 +213,27 @@ 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, + satelliteProxy.drawGrid({ + gridData: selectedGridData, + 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 }); } /**璧拌埅杞ㄨ抗*******************************************************************/ diff --git a/src/views/satellitetelemetry/component/SatelliteSearchBar.vue b/src/views/satellitetelemetry/component/SatelliteSearchBar.vue index 84a8516..2533597 100644 --- a/src/views/satellitetelemetry/component/SatelliteSearchBar.vue +++ b/src/views/satellitetelemetry/component/SatelliteSearchBar.vue @@ -1,6 +1,6 @@ <template> - <el-row> - <el-col :span="20"> + <!-- <el-row> --> + <!-- <el-col :span="20"> --> <el-form label-position="right" label-width="60px" :inline="false"> <el-form-item label="鍖哄煙"> <OptionLocation2 @@ -16,9 +16,9 @@ v-model="gridGroup" ></OptionGridGroup> </el-form> - </el-col> - <el-col :span="4"> - <el-form-item> + <!-- </el-col> --> + <!-- <el-col :span="4"> --> + <!-- <el-form-item> <el-button :loading="loading" :disabled="!gridGroup" @@ -29,15 +29,15 @@ > 鏌ヨ </el-button> - </el-form-item> - </el-col> - </el-row> + </el-form-item> --> + <!-- </el-col> --> + <!-- </el-row> --> </template> <script setup> import { ref, watch } from 'vue'; defineProps({ - loading: Boolean + loading: Boolean, }); const location = ref(undefined); @@ -63,8 +63,9 @@ }); watch(gridGroup, (nv, ov) => { - // 棣栨杩涘叆鑷姩瑙﹀彂涓�娆℃煡璇簨浠� - if (ov == undefined && nv != ov) { + // 鑷姩瑙﹀彂涓�娆℃煡璇簨浠� + // if (ov == undefined && nv != ov) { + if (nv != ov) { handleClick(); } }); -- Gitblit v1.9.3