bug 修复

src/views/cesium.vue

@@ -2,6 +2,11 @@
   <div class="mapBox">
     <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
     <div class="menuComC" v-if="0">
+      <!-- @handleWindspeed="switchWindLayer"
+        @handleCloudLayer="switchCloudLayer"
+        @handleRainLayer="switchRainLayer"
+        @handleTemperatureLayerr="switchTemperatureLayerr"
+        @handleCity="switchCity" -->
       <menuCom
         :showwindspeed="false"
         :showcloud="false"
@@ -25,6 +30,73 @@
     </div>
     <!-- Loading 层 -->
     <div id="loading" class="dataLoading">加载中...</div>
+    <!-- <div class="devInfoBox" v-if="showDevInfoBox">
+      <div class="item">===&nbsp;帧率与内存&nbsp;===</div>
+      <div class="item">运行帧率:&nbsp;{{ fps }}</div>
+      <div class="item">响应时长:&nbsp;{{ ms }}</div>
+      <div class="item">内存占用:&nbsp;{{ jsHeapSize }}</div>
+      <template v-if="gVendor || gRenderer">
+        <div class="item" style="margin-top: 12px">
+          ====&nbsp;显卡信息&nbsp;====
+        </div>
+        <el-tooltip
+          effect="dark"
+          :content="gVendor"
+          placement="top-end"
+          v-if="gVendor"
+        >
+          <div class="item">制造商:&nbsp;{{ gVendor }}</div>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="gRenderer"
+          placement="top-end"
+          v-if="gRenderer"
+        >
+          <div class="item">型号:&nbsp;{{ gRenderer }}</div>
+        </el-tooltip>
+      </template>
+    </div>  -->
+    <!-- <div class="tempImg" v-if="showtempImg">
+      <img src="../assets/cesiumImg/temp.png" />
+    </div> -->
+    <el-drawer
+      v-model="windDrawer"
+      direction="rtl"
+      class="windModelDrawer"
+      :before-close="handleClose"
+    >
+      <template #header>
+        <h3 style="font-weight: bold">{{ windDrawerHeader }}</h3>
+      </template>
+      <template #default>
+        <div class="windDrawerCla">
+          <div class="line" v-if="!showModelMsg">
+            <div class="leftContent">
+              <span>{{ windDrawerTitle }}</span>
+            </div>
+          </div>
+          <div class="jcxx" v-if="showBasicMsg">
+            <windHome :modelValItem="modelVal" />
+          </div>
+          <div class="spjk" v-if="showVideoMsg">
+            <!-- src="https://www.bilibili.com/video/BV1421DYCELw?t=12.1" -->
+            <iframe
+              src="/static/windVideo.mp4"
+              frameborder="0"
+              style="width: 100%; height: 100%"
+            ></iframe>
+            <!-- src="https://www.bilibili.com/video/BV1421DYCELw?t=12.1" -->
+            <video ref="videoPlayer" controls width="95%">
+              <source src="/static/windVideo.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div class="gzck" v-if="showProblemMsg">
+            <windPro />
+          </div>
+        </div>
+      </template>
+    </el-drawer>
     <cesiumweatherView
       :viewer="viewer"
       :sidebarRightData="sidebarRightData"
@@ -42,19 +114,32 @@
 </template>
 
 <script>
+// import * as Cesium from "../Cesium";
+// import "../Cesium/Widgets/widgets.css";
 import * as Cesium from "cesium";
 import "cesium/Build/Cesium/Widgets/widgets.css";
 import { createWind } from "../assets/wind/Windy.js";
 
+// import { parseGIF } from 'gifuct-js';
+// import { decompressFrames } from 'gifuct-js';
+
 import cesiumweatherView from "./weatherComponents/cesiumweatherView.vue";
 import jsonData from "./weatherComponents/weatherBase.json";
 import allStationJson from "./cesiumComponents/allStationJson.json";
+// import fjLonLatJson from "./cesiumComponents/fjLonLat.json";
+
+import { WindLayer } from "cesium-wind";
+
+import output from "../assets/WechatIMG1693.jpg";
+import rainoutput from "../assets/rainoutput.jpg";
 
 import cloudJson from "/public/static/exportData/cloud/layer.json";
 import rainJson from "/public/static/exportData/rain/layer.json";
 import tempJson from "/public/static/exportData/tmp/layer.json";
+import windJson from "/public/static/exportData/wind/layer.json";
 
 import basicGeoJson from "../assets/geoJson/basic.json";
+import windLineJson from "./cesiumComponents/windspeed.json";
 import windGridData from "./cesiumComponents/windGridData.json";
 
 import axios from "axios";
@@ -74,7 +159,14 @@ import gf from "@/assets/windimgs/fanSvg/guang.gif";
 //储能展示图标
 import chu from "@/assets/windimgs/fanSvg/chu.gif";
 // import chu1 from "@/assets/windimgs/fanSvg/chu.mp4"
-
+//待机
+import dj from "@/assets/windimgs/fanSvg/dj.svg";
+//动图使用柱子和扇叶
+import bwzhu from "@/assets/windimgs/fanSvg/bwzhu.svg";
+import bwshan from "@/assets/windimgs/fanSvg/bwshan.png";
+
+import windHome from "@/components/windHome/index.vue";
+import windPro from "@/components/windProDetail/windProblem.vue";
 import cesiumwindView from "./cesiumComponents/cesiumwindView.vue";
 
 export default {
@@ -83,6 +175,8 @@ export default {
   components: {
     menuCom,
     cesiumweatherView,
+    windHome,
+    windPro,
     cesiumwindView,
   },
 
@@ -153,6 +247,9 @@ export default {
       modelVal: null,
       menuComTStyB: false,
       modelUnpackType: "fengji",
+      windDrawer: false,
+      windDrawerTitle: "",
+      windDrawerHeader: "",
       showBasicMsg: false,
       showVideoMsg: false,
       showProblemMsg: false,
@@ -1632,6 +1729,138 @@ export default {
 
       that.allStationentitys.push({ entity, handler });
     },
+    // 展示所选风场的风机
+    showWindFromStation(viewer) {
+      fjLonLatJson.data.forEach((e, index) => {
+        if (e.status) {
+          if (e.status === 1) {
+            this.showStatuswind(viewer, e, dj);
+          }
+        } else {
+          this.showAnimatewind(viewer, e);
+        }
+      });
+      this.resetWindViewport();
+    },
+    // 根据状态展示不同颜色风机贴图
+    showStatuswind(viewer, e, type, index) {
+      this.addSvg(
+        viewer,
+        type,
+        e.longitude,
+        e.latitude,
+        e,
+        Math.random().toFixed(4) * 10000
+      );
+    },
+    // 风机柱与扇叶分开展示转动效果贴图
+    showAnimatewind(viewer, e, index) {
+      this.addSvgs(
+        viewer,
+        bwshan,
+        e.longitude,
+        e.latitude,
+        e,
+        Math.random().toFixed(3) * 1000
+      );
+      this.addSvg(
+        viewer,
+        bwzhu,
+        e.longitude,
+        e.latitude,
+        e,
+        Math.random().toFixed(3) * 2000
+      );
+    },
+    //添加svg或png贴图
+    addSvg(viewer, uri, lon, lat, val, index) {
+      let that = this;
+      let ids = that.generateUniqueId(val.id);
+      const position = Cesium.Cartesian3.fromDegrees(lon, lat);
+      const entity = viewer.entities.add({
+        id: ids,
+        position, // 模型位置
+        billboard: {
+          image: uri, // 也可以是 SVG 路径，如 'icon.svg'
+          scale: 0.5,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          // 模型贴地
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        },
+        label: {
+          text: val.name ? val.name : val.plantname,
+          font: "14px sans-serif",
+          fillColor: Cesium.Color.fromBytes(255, 255, 255),
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        },
+      });
+      // 创建事件处理器
+      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      handler.setInputAction(function (movement) {
+        var position = movement.position;
+        var pickedObject = viewer.scene.pick(position);
+        if (pickedObject && pickedObject.id.id === ids) {
+          console.log("你点击了标签或模型！", entity);
+          console.log("标签或模型数据！", val);
+          that.modelVal = val;
+          // 找到实体，显示包含实体信息的弹框
+          that.showRightClickPopup(position, val, "wind");
+          return;
+        }
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      this.allWindEntitys.push({ entity, handler });
+    },
+    //添加svg或png贴图
+    addSvgs(viewer, uri, lon, lat, val, index) {
+      let that = this;
+      let ids = that.generateUniqueId(val.id);
+      const position = Cesium.Cartesian3.fromDegrees(lon, lat);
+      const entity = viewer.entities.add({
+        id: ids,
+        position, // 模型位置
+        billboard: {
+          image: uri, // 也可以是 SVG 路径，如 'icon.svg'
+          scale: 0.5,
+          pixelOffset: new Cesium.Cartesian2(0, -15),
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          // 模型贴地
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          // 核心：使用 CallbackProperty 实现旋转动画
+          rotation: new Cesium.CallbackProperty(function (time) {
+            // 每 3 秒转一圈（可调速度）
+            const seconds = time.secondsOfDay;
+            const angle = Cesium.Math.toRadians(((seconds % 3) * 360) / 3); // 每3秒一圈
+            return angle;
+          }, false),
+          // 确保绕中心旋转
+          rotationAlignment: Cesium.HeightReference.CENTER,
+          alignedAxis: Cesium.Cartesian3.UNIT_Z,
+        },
+      });
+      // 创建事件处理器
+      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      handler.setInputAction(function (movement) {
+        var position = movement.position;
+        var pickedObject = viewer.scene.pick(position);
+        if (pickedObject && pickedObject.id.id === ids) {
+          console.log("你点击了标签或模型！", entity);
+          console.log("标签或模型数据！", val);
+          that.modelVal = val;
+          // 找到实体，显示包含实体信息的弹框
+          that.showRightClickPopup(position, val, "wind");
+          return;
+        }
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      this.allWindEntitys.push({ entity, handler });
+    },
+    generateUniqueId(prefix = "id") {
+      let idCounter = 0;
+      return `${prefix}-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}-${idCounter++}`;
+    },
     // 右键展示元素
     showRightClickPopup(screenPosition, val, type, viewer) {
       // 创建或获取弹框元素
@@ -1783,6 +2012,23 @@ export default {
       document.addEventListener("keydown", keyDownHandler);
     },
     showMessage(type, val, viewer) {
+      console.log("type===>>>", type);
+      if (type !== "windbasic2d" && type !== "windbasic3d") {
+        this.windDrawer = true;
+        this.windDrawerHeader = val.name + "数据详情";
+
+        if (type === "basic") {
+          this.windDrawerTitle = "基础信息";
+          this.showBasicMsg = true;
+        } else if (type === "video") {
+          this.windDrawerTitle = "视频监控";
+          this.showVideoMsg = true;
+        } else if (type === "problem") {
+          this.windDrawerTitle = "故障查看";
+          this.showProblemMsg = true;
+        }
+      } else {
+        // this.showWindDetail = true;
         this.allStationentitys.forEach(({ entity, handler }) => {
           viewer.entities.remove(entity); // 移除实体
           if (!handler.isDestroyed()) {
@@ -1794,6 +2040,11 @@ export default {
         this.showTypeViewer = false;
         this.cancleAllLayer();
         this.getCameraPosition(viewer, type, val);
+      }
+      //  else {
+      //     this.windDrawerTitle = '模型解构'
+      //     this.showModelMsg = true
+      // }
     },
     // 获取当前经纬度和高度并跳转风机详情
     getCameraPosition(viewer, type, val) {

src/views/cesiumComponents/windMap2D.vue

@@ -449,7 +449,7 @@ export default {
         },
         onError: (error) => {
           console.log("❌ WebSocket 错误:", error);
-          // return
+          return
           if (stationName === "MYFDC") {
             fjLonLatJson = JSON.parse(JSON.stringify(fjMYLonLatJson));
           } else if (stationName === "JNWHZ") {
@@ -1113,7 +1113,7 @@ export default {
     showMessage(type, val) {
       console.log("type===>>>", type);
       this.windDrawer = true;
-      this.windDrawerHeader = val.name + "数据详情";
+      this.windDrawerHeader = val.fjbh + "数据详情";
       if (type === "basic") {
         this.windDrawerTitle = "基础信息";
         this.showBasicMsg = true;

src/views/cesiumComponents/windMap3D.vue

@@ -1329,7 +1329,7 @@ export default {
     },
     showMessage(type, val) {
       this.windDrawer = true;
-      this.windDrawerHeader = val.name + "数据详情";
+      this.windDrawerHeader = val.fjbh + "数据详情";
       if (type === "basic") {
         this.windDrawerTitle = "基础信息";
         this.showBasicMsg = true;