Merge branch 'master' of http://39.101.69.29:3000/sunzehao/cesium_three

src/tools/websocket.js

@@ -0,0 +1,108 @@
+import { ref, reactive, onUnmounted } from 'vue'
+
+/**
+ * WebSocket 封装 Hook
+ * @param {string} url - WebSocket 地址
+ * @param {Object} options - 配置项
+ * @param {number} [options.reconnectInterval=3000] - 重连间隔（毫秒）
+ * @param {number} [options.maxReconnectAttempts=5] - 最大重连次数
+ * @returns {Object} 暴露的方法和状态
+ */
+export function useWebSocket(url, options = {}) {
+  const {
+    reconnectInterval = 3000,
+    maxReconnectAttempts = 5
+  } = options
+
+  // 响应式状态
+  const isConnected = ref(false)
+  const messages = ref([])
+  const error = ref(null)
+  const reconnectAttempts = ref(0)
+
+  let ws = null
+
+  // 连接
+  const connect = () => {
+    if (ws && ws.readyState === WebSocket.OPEN) return
+
+    ws = new WebSocket(url)
+
+    ws.onopen = () => {
+      console.log('✅ WebSocket 连接成功')
+      isConnected.value = true
+      error.value = null
+      reconnectAttempts.value = 0 // 重置重连次数
+    }
+
+    ws.onmessage = (event) => {
+      const data = event.data
+      messages.value.push(data)
+    }
+
+    ws.onerror = (err) => {
+      console.error('❌ WebSocket 错误:', err)
+      error.value = err
+    }
+
+    ws.onclose = () => {
+      isConnected.value = false
+      console.log('🔌 WebSocket 连接已关闭')
+
+      // 自动重连逻辑
+      if (reconnectAttempts.value < maxReconnectAttempts) {
+        reconnectAttempts.value++
+        console.log(`🔄 尝试第 ${reconnectAttempts.value} 次重连...`)
+        setTimeout(() => {
+          connect()
+        }, reconnectInterval)
+      } else {
+        console.warn('⚠️ 已达到最大重连次数，停止重连')
+      }
+    }
+  }
+
+  // 发送消息
+  const sendMessage = (data) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(typeof data === 'string' ? data : JSON.stringify(data))
+    } else {
+      console.warn('⚠️ WebSocket 未连接，无法发送消息')
+    }
+  }
+
+  // 断开连接
+  const disconnect = () => {
+    if (ws) {
+      ws.close()
+      ws = null
+    }
+  }
+
+  // 清空消息
+  const clearMessages = () => {
+    messages.value = []
+  }
+
+  // 组件卸载时自动断开
+  onUnmounted(() => {
+    disconnect()
+  })
+
+  // 手动暴露连接（用于初次调用）
+  connect()
+
+  return {
+    // 状态
+    isConnected,
+    messages,
+    error,
+    reconnectAttempts,
+
+    // 方法
+    sendMessage,
+    disconnect,
+    clearMessages,
+    reconnect: connect // 也可以手动触发重连
+  }
+}

src/views/cesiumComponents/allStationJson.json

@@ -7,6 +7,14 @@
             "latitude": 40.475556,
             "isShowWind": true,
             "stationNameEn": "JNWHZ"
+        },
+        {
+            "plantname": "迈越风电场",
+            "energytype": "Wind",
+            "longitude": 114.502778,
+            "latitude": 35.326667,
+            "isShowWind": true,
+            "stationNameEn": "MYFDC"
         }
     ],
     "stationS": [

src/views/cesiumComponents/windMap2D.vue

@@ -129,6 +129,8 @@ import windGridData from "./windGridData.json";
 
 import AdvancedBillboardGenerator from "@/tools/lightsign.js";
 
+import { useWebSocket } from "@/tools/websocket.js"
+
 export default {
   name: "windMap2D",
   components: {
@@ -225,8 +227,8 @@ export default {
         // minimumLevel: 11,
         maximumLevel: 18,
         // url: this.urlTiles,
-        url: "/static/ditu/{z}/{x}/{y}.png",
-        // url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+        // url: "/static/ditu/{z}/{x}/{y}.png",
+        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
         credit: "影像地图",
       });
       imageryProvider.alpha = 0.55; // 透明度
@@ -391,17 +393,31 @@ export default {
     // 展示所选风场的风机
     showWindFromStation(viewer) {
       let stationName = this.$route.query.nameEn;
+        console.log("nameEn====>>>>")
+
       let fjLonLatJson = [];
       this.fjLonLatJsonArr = []
+      let url = ""
+    //   旺海庄:DHWH  苏木山:DHSM 营盘梁:DHYP 迈越:HZMY
       if (stationName === "MYFDC") {
         fjLonLatJson = fjMYLonLatJson;
+        url = "ws://10.121.128.117:8431/ws/HZMY"
       } else if (stationName === "JNWHZ") {
         fjLonLatJson = fjWHZLonLatJson;
+        url = "ws://10.121.128.117:8431/ws/DHWH"
       } else if (stationName === "JNYPL") {
         fjLonLatJson = fjYPLLonLatJson;
+        url = "ws://10.121.128.117:8431/ws/DHYP"
       } else if (stationName === "JNSMS") {
         fjLonLatJson = fjSMSLonLatJson;
+        url = "ws://10.121.128.117:8431/ws/DHSM"
       }
+
+      const ws = useWebSocket(url)
+
+    //   let wsRes = ws.messages.windMachineList
+    console.log("wsres1====>>>>")
+
       this.fjLonLatJsonArr = fjLonLatJson
       fjLonLatJson.data.forEach((e, index) => {
         if (e.status) {
@@ -423,6 +439,7 @@ export default {
           }
         }
       });
+      console.log("wsres2====>>>>")
       this.resetWindViewport();
     },
     // 根据状态展示不同颜色风机贴图
@@ -888,6 +905,15 @@ export default {
       let fromLat = this.$route.query.latitude * 1;
       let fromheight = this.$route.query.height * 1;
       let fromname = this.$route.query.nameEn;
+
+      let targetLon = null;
+      let targetLat = null;
+      this.restLatLon.forEach((it) => {
+        if (it.name === fromname) {
+          targetLon = it.longitude;
+          targetLat = it.latitude;
+        }
+      });
       // 设置镜头到指定的经纬度（度）、高度（米）
       this.viewer.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(
@@ -904,14 +930,7 @@ export default {
       // 目标位置：经度、纬度、高度
       // const targetLon = 114.48789;
       // const targetLat = 35.32916;
-      let targetLon = null;
-      let targetLat = null;
-      this.restLatLon.forEach((it) => {
-        if (it.name === fromname) {
-          targetLon = it.longitude;
-          targetLat = it.latitude;
-        }
-      });
+      
       const targetHeight = 5000;
 
       const draggableHeightTolerance = 5000; // 允许拖拽的高度范围：20,000 ~ 30,000