增加场站筛选和视频

src/views/cesium.vue

@@ -80,8 +80,9 @@
             <windHome :modelValItem="modelVal" />
           </div>
           <div class="spjk" v-if="showVideoMsg">
+              <!-- src="https://www.bilibili.com/video/BV1421DYCELw?t=12.1" -->
             <iframe
-              src="https://www.bilibili.com/video/BV1421DYCELw?t=12.1"
+              src="/public/static/windVideo.mp4"
               frameborder="0"
               style="width: 100%; height: 100%"
             ></iframe>
@@ -96,6 +97,7 @@
       :viewer="viewer"
       :sidebarRightData="sidebarRightData"
       @coverOnChange="coverOnChange"
+      @changeType="changeType"
       v-if="showTypeViewer"
     />
     <cesiumwindView
@@ -253,6 +255,7 @@ export default {
       allStationentitys: [],
       allWindEntitys: [],
       showTypeViewer: true,
+      stationValue: []
     };
   },
   created() {
@@ -279,6 +282,25 @@ export default {
   },
 
   methods: {
+    changeType(value) {
+        this.stationValue = value
+        this.allStationentitys.forEach(({ entity, handler }) => {
+          this.viewer.entities.remove(entity); // 移除实体
+          if (!handler.isDestroyed()) {
+            handler.destroy(); // 销毁事件处理器（关键！）
+          }
+        });
+        this.allStationentitys = [];
+        let showStation = []
+        value.forEach(it => {
+            allStationJson.station.forEach(ic => {
+                if (it === ic.energytype) {
+                    showStation.push(ic)
+                }
+            })
+        })
+        this.showAllStation(this.viewer, showStation);
+    },
     coverOnChange(val) {
       if (val.value === "风场") {
         this.switchWindLayer(val.check);
@@ -416,7 +438,7 @@ export default {
 
       // this.setMapImageryProvider();
       this.switchWindLayer();
-      this.showAllStation(viewer);
+      this.showAllStation(viewer, allStationJson.station);
       this.initGeoJsonData();
     },
 
@@ -1520,8 +1542,8 @@ export default {
     },
 
     // 展示所有风场
-    showAllStation(viewer) {
-      allStationJson.station.forEach((e, index) => {
+    showAllStation(viewer, station) {
+      station.forEach((e, index) => {
         if (e.energytype === "Wind") {
           this.showStationFn(viewer, e, index, fc);
         } else if (e.energytype === "Fire") {
@@ -1945,7 +1967,7 @@ export default {
     backStations() {
       this.showWindDetail = false;
       this.showTypeViewer = true;
-      this.switchWindLayer();
+    //   this.switchWindLayer();
       this.allWindEntitys.forEach(({ entity, handler }) => {
         this.viewer.entities.remove(entity); // 移除实体
         if (!handler.isDestroyed()) {
@@ -1953,7 +1975,7 @@ export default {
         }
       });
       this.allWindEntitys = [];
-      this.showAllStation(this.viewer);
+      this.changeType(this.stationValue);
     },
     menuComTSty(val) {
       this.menuComTStyB = val;

src/views/weatherComponents/cesiumweatherView.vue

@@ -43,14 +43,24 @@
             </div>
             <div class="stat-block">
                 <span class="labels">场站类型 </span>
-                <img :src="fc" style="width:30px;height:30px;position:relative;top:5px;margin-left:5px">
-                <span class="values" style="position:relative;top:10px; margin-right: 10px">风场</span>
-                <img :src="hd" style="width:30px;height:30px;position:relative;top:5px;">
-                <span class="values" style="position:relative;top:10px; margin-right: 10px">火电</span>
-                <img :src="gf" style="width:30px;height:30px;position:relative;top:5px;">
-                <span class="values" style="position:relative;top:10px; margin-right: 10px">新能源</span>
-                <img :src="chu" style="width:30px;height:30px;position:relative;top:5px;">
-                <span class="values" style="position:relative;top:10px; margin-right: 10px">储能</span>
+                <el-checkbox-group v-model="checkList" class="checkTypeGroup" @change="changeType">
+                    <el-checkbox label="Wind" value="Wind">
+                        <img :src="fc" style="width:30px;height:30px;">
+                        <span class="values" style="position:relative;top:-10px; margin-right: 3px">风电</span>
+                    </el-checkbox>
+                    <el-checkbox label="Fire" value="Fire">
+                        <img :src="hd" style="width:30px;height:30px;">
+                        <span class="values" style="position:relative;top:-10px; margin-right: 3px">火电</span>
+                    </el-checkbox>
+                    <el-checkbox label="Solar" value="Solar">
+                        <img :src="gf" style="width:30px;height:30px;">
+                        <span class="values" style="position:relative;top:-10px; margin-right: 3px">光伏</span>
+                    </el-checkbox>
+                    <el-checkbox label="Storage" value="Storage">
+                        <img :src="chu" style="width:30px;height:30px;">
+                        <span class="values" style="position:relative;top:-10px; margin-right: 3px">储能</span>
+                    </el-checkbox>
+                </el-checkbox-group>
             </div>
         </aside>
         <!-- Right Sidebar -->
@@ -208,6 +218,7 @@ export default {
             hd,
             gf,
             chu,
+            checkList: ['Wind', 'Fire', 'Solar', 'Storage'],
             showWeather: false,
             valuechecked: false,
             showWeatherDetail: false,
@@ -323,6 +334,10 @@ export default {
         this.today = DAYJS().format("YYYY年MM月DD日")
     },
     methods: {
+        changeType(value) {
+            console.log('checkList===>>>', value)
+            this.$emit("changeType", value)
+        },
         valueOnChange(it) {
             this.heightArr.forEach(it => {
                 it.check = false
@@ -911,7 +926,7 @@ export default {
 .sidebar-left {
     position: absolute;
     left: 20px;
-    width: 460px;
+    width: 600px;
 }
 .stat-block { margin-bottom: 10px; display: flex; }
 .stat-block .labels { font-size: 15px; color: #6c757d; width: 40px;font-weight: 600;
@@ -933,7 +948,7 @@ display: block;border-right: 2px solid #6c757d; }
         }
     }
     .covercheck{
-        width: 380px;
+        width: 480px;
         margin-left: 5px;
         .el-check-tag{
             margin: 0 2px 3px 0;
@@ -944,6 +959,13 @@ display: block;border-right: 2px solid #6c757d; }
         height: 24px !important;
         margin-left: 5px;
     }
+    .checkTypeGroup{
+        .el-checkbox{
+            position: relative;
+            top: 8px;
+            left: 5px;
+        }
+    }
 }
 
 .progress-bar { height: 4px; background: #e9ecef; border-radius: 2px; margin-top: 10px; }