功能增加

src/views/cesiumComponents/topographicMap.vue

@@ -63,7 +63,7 @@
       :modelVal="modelVal"
       @showDia="showComDia"
     />
-    <windView v-if="showWindDetail" :showWeather="showWeather" @coverOnChange="coverOnChange"
+    <windView v-if="showWindDetail" @coverOnChange="coverOnChange" :currentHeight="currentHeight"
      @showDetail="menuComTSty" @backStations="backStations" />
   </div>
 </template>
@@ -136,6 +136,7 @@ export default {
       temperatureLayer: null, //温度图
       tempintervalId: null, //温度图
       showcomModelDia: false,
+      currentHeight: 0,
       modelVal: null,
       menuComTStyB: false,
       modelUnpackType: "fengji",
@@ -149,7 +150,6 @@ export default {
       showWindDetail: true,
       allStationentitys: [],
       allWindEntitys: [],
-      showWeather: false,
       urlTiles: "/public/static/tiles/{z}/{x}/{y}.jpg"
     };
   },
@@ -819,7 +819,7 @@ export default {
         const targetLat = 35.326667;
         const targetHeight = 20000;
 
-        const draggableHeightTolerance = 10000; // 允许拖拽的高度范围：18,000 ~ 22,000
+        const draggableHeightTolerance = 10000; // 允许拖拽的高度范围：20,000 ~ 30,000
         const minHeight = 10000;   // 最低高度
         const maxHeight = 800000;  // 最高高度
 
@@ -853,6 +853,7 @@ export default {
                 if (!posCartographic) return;
 
                 const currentHeight = posCartographic.height;
+                that.currentHeight = currentHeight
                 const currentLon = Cesium.Math.toDegrees(posCartographic.longitude);
                 const currentLat = Cesium.Math.toDegrees(posCartographic.latitude);
 
@@ -872,7 +873,6 @@ export default {
                 }
 
                 if (currentHeight > maxHeight) {
-                    that.showWeather = true
                     const newPos = Cesium.Cartesian3.fromDegrees(currentLon, currentLat, maxHeight);
                     camera.setView({
                         destination: newPos,
@@ -884,10 +884,9 @@ export default {
                     });
                     return;
                 }
-                if (currentHeight < (maxHeight-1000)) {
-                    that.showWeather = false
-                    that.cancleAllLayer();
-                }
+                // if (currentHeight < (maxHeight-700000)) {
+                //     that.cancleAllLayer();
+                // }
 
                 // === 第二步：判断是否在“可拖拽高度区间” ===
                 const isInDraggableRange =
@@ -1003,7 +1002,7 @@ export default {
           maxAge: 60,
           globalAlpha: 0.8,
           velocityScale: 1 / 30,// 粒子移动速度缩放因子（控制动画快慢）
-          paths: 1000,
+          paths: 2000,
           lineWidth: 2,
         });
         this.windLayer.addTo(this.viewer);

src/views/cesiumComponents/windView.vue

@@ -22,12 +22,12 @@
             </div>
             
         </aside>
-        <aside class="sidebar-left2 panel" v-if="showWindStatus">
-            <div class="stat-block2" v-if="showWeather">
+        <aside class="sidebar-left2 panel">
+            <div class="stat-block2">
                 <span class="labels">数据 </span>
-                <span class="values">{{showCover}} @ {{showHeight}}hpa </span>
+                <span class="values">{{showCover}} @ 目前高度:{{progressHeight}}m; 气压: 0hpa; </span>
             </div>
-            <div class="stat-block2" v-if="showWeather">
+            <div class="stat-block2">
                 <span class="labels">模式 </span>
                 <span class="covercheck">
                     <el-check-tag v-for="(it, index) in windmodelArr" :key="index" type="primary"
@@ -35,22 +35,27 @@
                      :checked="it.check">{{it.value}}</el-check-tag>
                 </span>
             </div>
-            <div class="stat-block2" v-if="showWeather">
+            <div class="stat-block2">
                 <span class="labels">范围 </span>
                 <span class="values">0.0m/s</span>
                 <span class="valuess"></span>
                 <span class="values">100.0m/s</span>
             </div>
-            <div class="stat-block2" v-if="showWeather">
+            <div class="stat-block2">
                 <span class="labels">高度 </span>
-                <span class="values">地表 </span>
+                <!-- <span class="values">地表 </span>
                 <span class="heightcheck">
                     <el-check-tag v-for="(it, index) in heightArr" :key="index" type="primary"
                      :checked="it.check" @change="valueOnChange(it)">{{it.value}}</el-check-tag>
                 </span>
-                <span class="values">hpa </span>
+                <span class="values">hpa </span> -->
+                <span class="values">10000(m)</span>
+                <div class="op-progress-bar">
+                    <div class="op-progress-bar-inner" :style="`width: ${progressPoint}`+'%'"></div>
+                </div>
+                <span class="values"> 800000(m)</span>
             </div>
-            <div class="stat-block2" v-if="showWeather">
+            <div class="stat-block2">
                 <span class="labels">覆盖模式 </span>
                 <span class="covercheck">
                     <el-check-tag v-for="(it, index) in coverArr" :key="index" type="primary"
@@ -709,10 +714,23 @@ export default {
             type: Boolean,
             default: false
         },
+        currentHeight: {
+            type: Number,
+            default: 0
+        }
+    },
+    watch: {
+        currentHeight: {
+            handler(val) {
+                if (val) {
+                    this.progressHeight = Math.ceil(val)
+                    this.progressPoint = Math.ceil(Math.ceil(val) / 790000 * 100)
+                }
+            }
+        }
     },
     data() {
         return {
-            showWindStatus: true,
             bw,
             gz,
             jx,
@@ -720,15 +738,17 @@ export default {
             xd,
             lx,
             sl,
+            progressHeight: 0,
+            progressPoint: 0,
             windmodelArr: [
                 {
                     value: "大气层",
-                    check: false,
-                    disabled: true
+                    check: true,
                 },
                 {
                     value: "地表层",
-                    check: true
+                    check: false,
+                    disabled: true
                 },
             ],
             showHeight: 1000,
@@ -842,11 +862,11 @@ export default {
                     it.check = false
                 }
             })
+            this.showCover = itv.value
             this.$emit("coverOnChange", itv)
         },
         showDetail() {
             this.showWindDetail = !this.showWindDetail
-            this.showWindStatus = !this.showWindStatus
             this.findProjectPlan();
             this.$emit("showDetail", this.showWindDetail)
         },
@@ -1297,11 +1317,29 @@ export default {
             margin: 0 5px 3px 0;
             padding: 5px 8px;
         }
+        .is-disabled{
+            background: #d4d4d4;
+            color: #909090;
+        }
     }
 }
 .stat-block2 {
     margin-bottom: 10px;
     display: flex;
+    .op-progress-bar { 
+        width: 240px;
+        height: 6px; 
+        background: #e9ecef; 
+        border-radius: 3px; 
+        margin-top: 8px; 
+        margin: 8px 5px 0 5px;
+        .op-progress-bar-inner { 
+            height: 100%; 
+            background: #134ac0; 
+            border-radius: 3px; 
+        }
+
+    }
     .labels { 
         font-size: 15px; 
         color: #6c757d;