From 133cf6d9a7fff2a6863d30af6a1992204f067ed0 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Mon, 18 May 2026 21:08:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=99=8D=E9=9B=A8=E6=A0=85?= =?UTF-8?q?=E6=A0=BC=E5=9B=BE=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 5 +- .env.production | 5 +- env.d.ts | 1 + .../detail-panels/RainfallGridComponent.vue | 73 ++++++++++++++++++- src/hooks/rainstorm/useRainstormDeduction.ts | 57 +++++++++++++-- src/stores/useStatusStore.ts | 4 +- src/types/rainstorm/RainfallGridRequest.ts | 6 -- src/types/rainstorm/RainfallGridResponse.ts | 35 ++++----- src/types/websocket/WebSocketConfig.ts | 2 +- src/utils/request/websocket.ts | 17 +++-- 10 files changed, 157 insertions(+), 48 deletions(-) delete mode 100644 src/types/rainstorm/RainfallGridRequest.ts diff --git a/.env.development b/.env.development index 5324732..522525f 100644 --- a/.env.development +++ b/.env.development @@ -10,4 +10,7 @@ START_PORT=81 VITE_GEOSERVER_BASE_URL=http://47.92.216.173:4019/geoserver/xian # WebSocket地址 -VITE_WEBSOCKET_URL=ws://localhost:8081 \ No newline at end of file +VITE_WEBSOCKET_URL=http://localhost:8081/websocket + +# 文件地址 +VITE_FILE_URL=http://localhost:8083 \ No newline at end of file diff --git a/.env.production b/.env.production index b776a57..7248402 100644 --- a/.env.production +++ b/.env.production @@ -10,4 +10,7 @@ START_PORT=80 VITE_GEOSERVER_BASE_URL=http://10.22.245.246/geoserver/xian # WebSocket地址 -VITE_WEBSOCKET_URL=ws://localhost:8080 \ No newline at end of file +VITE_WEBSOCKET_URL=http://localhost:8080/websocket + +# 文件地址 +VITE_FILE_URL=http://localhost:8083 \ No newline at end of file diff --git a/env.d.ts b/env.d.ts index ef8e726..ab7398f 100644 --- a/env.d.ts +++ b/env.d.ts @@ -12,6 +12,7 @@ interface ImportMetaEnv { readonly START_PORT: number; readonly VITE_GEOSERVER_BASE_URL: string; readonly VITE_WEBSOCKET_URL: string; + readonly VITE_FILE_URL: string; readonly MODE: string; readonly DEV: boolean; readonly PROD: boolean; diff --git a/src/component/rain-earthquake/detail-panels/RainfallGridComponent.vue b/src/component/rain-earthquake/detail-panels/RainfallGridComponent.vue index 41cde71..74c9bc0 100644 --- a/src/component/rain-earthquake/detail-panels/RainfallGridComponent.vue +++ b/src/component/rain-earthquake/detail-panels/RainfallGridComponent.vue @@ -3,6 +3,77 @@
- + diff --git a/src/hooks/rainstorm/useRainstormDeduction.ts b/src/hooks/rainstorm/useRainstormDeduction.ts index a90a4ae..6aa6a47 100644 --- a/src/hooks/rainstorm/useRainstormDeduction.ts +++ b/src/hooks/rainstorm/useRainstormDeduction.ts @@ -1,11 +1,16 @@ import { useLeftLegendStore } from '@/stores/useLeftLegendStore'; import { useStatusStore } from '@/stores/useStatusStore'; import { useStepStore } from '@/stores/useStepStore'; +import type { RainfallGridResponse } from '@/types/rainstorm/RainfallGridResponse'; +import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils'; +import { ImageryLayer, Rectangle, SingleTileImageryProvider } from 'cesium'; export const useRainstormDeduction = () => { const statusStore = useStatusStore(); const leftLegendStore = useLeftLegendStore(); const stepStore = useStepStore(); + + let layer: ImageryLayer | null = null; /** * 显示步骤 */ @@ -23,15 +28,15 @@ export const useRainstormDeduction = () => { list: [ { label: '无雨/微雨; <0.1mm/12h', - color: 'rgba(200,200,200,0)', + color: 'rgba(200, 200, 200, 0)', }, { label: '小雨；<5mm/12h', - color: 'rgba(0,0,255,0.4)', + color: 'rgba(0, 0, 255, 0.4)', }, { label: '中雨； <15mm/12h', - color: 'rgba(0,255,255,0.5)', + color: 'rgba(0, 255, 255, 0.5)', }, { label: '大雨； <30mm/12h', @@ -39,19 +44,57 @@ export const useRainstormDeduction = () => { }, { label: '暴雨； <70mm/12h', - color: 'rgba(255,255,0,0.7)', + color: 'rgba(255, 255, 0, 0.7)', }, { label: '大暴雨； <140mm/12h', - color: 'rgba(255,165,0,0.8)', + color: 'rgba(255, 165, 0, 0.8)', }, { label: '特大暴雨； >140mm/12h', - color: 'rgba(255,0,0,0.9)', + color: 'rgba(255, 0, 0, 0.9)', }, ], }; }; - return { showStep, addLegend }; + /** + * 添加降雨栅格图层 + * @param response - 雨量栅格响应 + */ + const addGridLayer = (response: RainfallGridResponse) => { + // 删除旧图层 + if (layer) { + CesiumUtilsSingleton.getViewer()!.imageryLayers.remove(layer); + } + const rectangle = Rectangle.fromDegrees( + response.cesiumConfig!.rectangle.west, + response.cesiumConfig!.rectangle.south, + response.cesiumConfig!.rectangle.east, + response.cesiumConfig!.rectangle.north + ); + + // 创建单张影像提供器 + const provider = new SingleTileImageryProvider({ + url: `${import.meta.env.VITE_FILE_URL}/${response.pngPath}`.replace( + '//', + '/' + ), + rectangle: rectangle, + }); + + layer = + CesiumUtilsSingleton.getViewer()!.imageryLayers.addImageryProvider( + provider + ); + }; + + /** + * 触发图层显示状态 + */ + const triggerLayerShowStatus = (status: boolean) => { + layer!.show = status; + }; + + return { showStep, addLegend, addGridLayer, triggerLayerShowStatus }; }; diff --git a/src/stores/useStatusStore.ts b/src/stores/useStatusStore.ts index 3a71468..9650e0d 100644 --- a/src/stores/useStatusStore.ts +++ b/src/stores/useStatusStore.ts @@ -183,7 +183,7 @@ export const useStatusStore = defineStore('status', () => { /** 显示降雨栅格 */ showRainfallGrid: { show: false, - loading: true, + loading: false, }, }); @@ -320,7 +320,7 @@ export const useStatusStore = defineStore('status', () => { // 气象图层显示状态重置 weatherLayers.showRainfallGrid = { show: false, - loading: true, + loading: false, }; // 功能显示状态重置 diff --git a/src/types/rainstorm/RainfallGridRequest.ts b/src/types/rainstorm/RainfallGridRequest.ts deleted file mode 100644 index 82d5c45..0000000 --- a/src/types/rainstorm/RainfallGridRequest.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface RainfallGridRequest { - // 时间，默认为当前时间 - time?: string; - // 分辨率，默认为0.01，最小为0，最大为0.1 - resolution?: number; -} diff --git a/src/types/rainstorm/RainfallGridResponse.ts b/src/types/rainstorm/RainfallGridResponse.ts index dc726b6..b6618bc 100644 --- a/src/types/rainstorm/RainfallGridResponse.ts +++ b/src/types/rainstorm/RainfallGridResponse.ts @@ -1,26 +1,17 @@ -export interface RainfallFeature { - type: 'Feature'; - geometry: { - type: 'Polygon'; - coordinates: number[][][]; - }; - properties: { - rainfall: number; - color: string; - }; -} - export interface RainfallGridResponse { - type: 'FeatureCollection'; - features: RainfallFeature[]; - metadata: { - resolution: number; - grid_size: number[]; - bounds: { - min_lon: number; - max_lon: number; - min_lat: number; - max_lat: number; + id: number; + pngPath: string; + queryTime?: string; + resolution?: number; + stationCount?: number; + cesiumConfig?: { + rectangle: { + west: number; + south: number; + east: number; + north: number; }; + width?: number; + height?: number; }; } diff --git a/src/types/websocket/WebSocketConfig.ts b/src/types/websocket/WebSocketConfig.ts index 57d2728..6479d8b 100644 --- a/src/types/websocket/WebSocketConfig.ts +++ b/src/types/websocket/WebSocketConfig.ts @@ -3,7 +3,7 @@ */ export interface WebSocketConfig { /** WebSocket路径 */ - url: string; + url?: string; /** 自动重连间隔（毫秒，默认3000） */ reconnectDelay?: number; /** 最大重连次数（默认5，-1表示无限重连） */ diff --git a/src/utils/request/websocket.ts b/src/utils/request/websocket.ts index bf5e36b..e7320de 100644 --- a/src/utils/request/websocket.ts +++ b/src/utils/request/websocket.ts @@ -16,13 +16,14 @@ export class WebSocketService { onDisconnected?: () => void; onError?: (error: unknown) => void; - constructor(config: WebSocketConfig) { + constructor(config?: WebSocketConfig) { + config = config || ({} as WebSocketConfig); this.config = { - url: config.url, - reconnectDelay: config.reconnectDelay || 3000, - maxReconnectAttempts: config.maxReconnectAttempts || 5, - heartbeatIncoming: config.heartbeatIncoming || 30000, - heartbeatOutgoing: config.heartbeatOutgoing || 30000, + url: config!.url || import.meta.env.VITE_WEBSOCKET_URL, + reconnectDelay: config!.reconnectDelay || 3000, + maxReconnectAttempts: config!.maxReconnectAttempts || 5, + heartbeatIncoming: config!.heartbeatIncoming || 30000, + heartbeatOutgoing: config!.heartbeatOutgoing || 30000, }; } @@ -102,7 +103,7 @@ export class WebSocketService { /** * 发送消息到指定目的地 */ - send(destination: string, body: unknown) { + send(destination: string, body?: unknown) { if (!this.stompClient || !this.connected) { console.error('WebSocket 未连接'); return; @@ -153,3 +154,5 @@ export class WebSocketService { } } } + +export const socketSignalInstance = new WebSocketService();