From 68ba3376731aa7a5760ba5fce1dc6ba0c80982b4 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期五, 03 一月 2025 17:28:18 +0800 Subject: [PATCH] 调整网格文本样式 --- src/views/satellitetelemetry/SatelliteTelemetry.vue | 83 ++++++++++++++++++++++++++++++++--------- 1 files changed, 64 insertions(+), 19 deletions(-) diff --git a/src/views/satellitetelemetry/SatelliteTelemetry.vue b/src/views/satellitetelemetry/SatelliteTelemetry.vue index 0f0698f..66ed9cc 100644 --- a/src/views/satellitetelemetry/SatelliteTelemetry.vue +++ b/src/views/satellitetelemetry/SatelliteTelemetry.vue @@ -1,15 +1,6 @@ <template> <el-row class="wrap"> <el-col span="2"> - <!-- <el-button - class="p-events-auto" - type="info" - icon="Memo" - plain - @click="draw" - > - 缁樺埗缃戞牸 - </el-button> --> <el-row> <SatelliteManage v-show="show" @@ -34,16 +25,18 @@ </el-row> </el-col> </el-row> - <el-row class="historical" justify="center"> + <SatelliteDataMix class="data-mix" @mix-data="handleMixDataClick"> + </SatelliteDataMix> + <!-- <el-row class="historical" justify="center"> <SatelliteAnimation :loading="animaLoading" :grid-data="gridDataDetailList" :mapViews="mapViews" ></SatelliteAnimation> - </el-row> + </el-row> --> </template> <script setup> -import { map } from '@/utils/map/index_old'; +import { map, onMapMounted } from '@/utils/map/index_old'; import calculate from '@/utils/map/calculate'; import marks from '@/utils/map/marks'; import grid from '@/utils/map/grid'; @@ -51,9 +44,40 @@ import { ref } from 'vue'; import gridApi from '@/api/gridApi'; import SatelliteManage from './component/SatelliteManage.vue'; +import SatelliteDataMix from './component/SatelliteDataMix.vue'; import SatelliteProxy from './SatelliteProxy'; import { useFetchData } from '@/composables/fetchData'; import { useSatelliteGridStore } from '@/stores/satellite-grid'; + +// 鏌ヨ闀垮畞鍖鸿鏀垮尯鍒� +function initDistrict() { + onMapMounted(() => { + // eslint-disable-next-line no-undef + var district = new AMap.DistrictSearch({ + extensions: 'all', //杩斿洖琛屾斂鍖鸿竟鐣屽潗鏍囩瓑鍏蜂綋淇℃伅 + level: 'district' //璁剧疆鏌ヨ琛屾斂鍖虹骇鍒负鍖� + }); + district.search('闀垮畞鍖�', 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 + var polygon = new AMap.Polygon({ + map: map, //鏄剧ず璇ヨ鐩栫墿鐨勫湴鍥惧璞� + strokeWeight: 3, //杞粨绾垮搴� + path: bounds[i], //澶氳竟褰㈣疆寤撶嚎鐨勮妭鐐瑰潗鏍囨暟缁� + fillOpacity: 0.1, //澶氳竟褰㈠~鍏呴�忔槑搴� + fillColor: '#CCF3FF', //澶氳竟褰㈠~鍏呴鑹� + // strokeColor: '#ffffff' //绾挎潯棰滆壊 + strokeColor: '#0077ff' //绾挎潯棰滆壊 + }); + } + map.setFitView(); //灏嗚鐩栫墿璋冩暣鍒板悎閫傝閲� + } + }); + }); +} const satelliteGridStore = useSatelliteGridStore(); const { loading, fetchData } = useFetchData(10000); @@ -72,8 +96,12 @@ function onSearch(options) { satelliteGridStore.fetchGridCell(options.id).then(() => { drawGrid(satelliteGridStore.gridInfo); + initDistrict(); }); - satelliteGridStore.fetchGridData(options.id); + satelliteGridStore.fetchGridData(options.id).then(() => { + max = satelliteGridStore.gridDataList.length; + // fetchGridDataDetail(satelliteGridStore.gridDataList); + }); } function fetchGridDataDetail(dataList) { @@ -133,32 +161,42 @@ SatelliteProxy.drawColor(mapViews.gridViews, gridData); } -let selectedGridData +let selectedGridData; function handleRowClick(row) { if (gridDataDetailMap.has(row.id)) { const gridData = gridDataDetailMap.get(row.id); - selectedGridData = gridData + 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 + selectedGridData = gridData; drawTextAndColor(gridData); }); } } function handleRankClick(rankVisible) { - rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer); + // rankVisible ? map.add(mapViews.rankLayer) : map.remove(mapViews.rankLayer); + rankVisible ? map.add(mapViews.rankTxt) : map.remove(mapViews.rankTxt); } function handleDataClick(dataVisible) { - dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer); + // dataVisible ? map.add(mapViews.dataLayer) : map.remove(mapViews.dataLayer); + dataVisible ? map.add(mapViews.dataTxt) : map.remove(mapViews.dataTxt); } function handleColorClick(isStandardColor) { - SatelliteProxy.drawColor(mapViews.gridViews, selectedGridData, !isStandardColor); + SatelliteProxy.drawColor( + mapViews.gridViews, + selectedGridData, + !isStandardColor + ); +} + +function handleMixDataClick(gridData) { + handleRowClick(gridData); } </script> <style scoped> @@ -170,5 +208,12 @@ bottom: 10px; left: 0; right: 0; + color: #0077ff; +} + +.data-mix { + position: absolute; + right: 0; + top: 60px; } </style> -- Gitblit v1.9.3