常规上传

src/views/cesiumComponents/windMap3D.vue

@@ -134,6 +134,7 @@ export default {
     windPro,
     ModelUnpack,
   },
+
   data() {
     return {
       benchmark,
@@ -199,17 +200,40 @@ export default {
       zbLabelList: [],
     };
   },
+
   mounted() {
     this.initCesium();
     setTimeout(() => {
       this.loading = false;
     }, 1000);
   },
+
   unmounted() {
     clearInterval(this.fakeDataTimmer);
     this.fakeDataTimmer = null;
+    this.viewer.clock.onTick.removeEventListener(this.clockTickHandler);
   },
+
   methods: {
+    clockTickHandler() {
+      if (
+        (this.viewer.clock.currentTime.secondsOfDay > 0 &&
+          this.viewer.clock.currentTime.secondsOfDay < 45000) ||
+        this.viewer.clock.currentTime.secondsOfDay > 78000
+      ) {
+        if (!this.viewer.scene.light) {
+          this.viewer.scene.light = new Cesium.DirectionalLight({
+            direction: new Cesium.Cartesian3(0, -1, 0),
+            intensity: 0.5, // 增加光源强度，默认1.0
+          });
+        }
+      } else {
+        if (this.viewer.scene.light) {
+          this.viewer.scene.light = null;
+        }
+      }
+    },
+
     async initCesium() {
       const box = document.getElementById("cesiumContainer");
       const viewer = new Cesium.Viewer(box, {
@@ -255,6 +279,7 @@ export default {
       viewer.clock.shouldAnimate = true;
 
       this.viewer = viewer;
+      this.viewer.clock.onTick.addEventListener(this.clockTickHandler);
 
       // 展示场站
       // this.showAllStation(viewer)

src/views/cesiumComponents/windView.vue

@@ -1,51 +1,50 @@
 <template>
   <div class="windView">
-
     <!-- Left Sidebar -->
     <aside class="sidebar-left panel" v-if="showWindDB">
-        <div class="btnms">
-            <aside class="sidebar-left-top btnms1">
-                <div class="stat-block-lefttop" @click="backStations">
-                <p class="label">返回</p>
-                </div>
-            </aside>
-            <aside class="sidebar-left-top btnms2">
-                <div class="stat-block-lefttop" @click="showWeatherMes">
-                <p class="label" v-if="showWeatherDB">隐藏天气详情</p>
-                <p class="label" v-else>查看天气详情</p>
-                </div>
-            </aside>
-            <aside class="sidebar-left-top btnms3">
-                <div class="stat-block-lefttop" @click="showWindMes">
-                <p class="label" v-if="showWindDB">隐藏风机详情</p>
-                <p class="label" v-else>查看风机详情</p>
-                </div>
-            </aside>
-        </div>
-        <div class="btnms">
-            <aside class="sidebar-left-top top2 btnms4">
-                <!-- <div class="stat-block-lefttop" @click="initView">
+      <div class="btnms">
+        <aside class="sidebar-left-top btnms1">
+          <div class="stat-block-lefttop" @click="backStations">
+            <p class="label">返回</p>
+          </div>
+        </aside>
+        <aside class="sidebar-left-top btnms2">
+          <div class="stat-block-lefttop" @click="showWeatherMes">
+            <p class="label" v-if="showWeatherDB">隐藏天气详情</p>
+            <p class="label" v-else>查看天气详情</p>
+          </div>
+        </aside>
+        <aside class="sidebar-left-top btnms3">
+          <div class="stat-block-lefttop" @click="showWindMes">
+            <p class="label" v-if="showWindDB">隐藏风机详情</p>
+            <p class="label" v-else>查看风机详情</p>
+          </div>
+        </aside>
+      </div>
+      <div class="btnms">
+        <aside class="sidebar-left-top top2 btnms4">
+          <!-- <div class="stat-block-lefttop" @click="initView">
                 <p class="label">初始化</p>
                 </div> -->
-                <el-select
-                    class="windSty"
-                    v-model="windvalue"
-                    filterable
-                    clearable
-                    placeholder="选择风机"
-                    size="small"
-                    style="width: 100%"
-                    @change="switchWind"
-                >
-                    <el-option
-                    v-for="(item, index) in fjLonLatJsonArr"
-                    :key="index"
-                    :label="item.fjbh"
-                    :value="index"
-                    />
-                </el-select>
-            </aside>
-        </div>
+          <el-select
+            class="windSty"
+            v-model="windvalue"
+            filterable
+            clearable
+            placeholder="选择风机"
+            size="small"
+            style="width: 100%"
+            @change="switchWind"
+          >
+            <el-option
+              v-for="(item, index) in fjLonLatJsonArr"
+              :key="index"
+              :label="item.fjbh"
+              :value="index"
+            />
+          </el-select>
+        </aside>
+      </div>
       <div class="stat-block" style="margin-top: 15px">
         <p class="label">总装机容量：</p>
         <!-- #fff -->
@@ -53,9 +52,9 @@
           2541<span
             style="
               font-size: 24px;
-                font-weight: 400;
-                color: #e0e0e0;
-                margin-left: 10px;
+              font-weight: 400;
+              color: #e0e0e0;
+              margin-left: 10px;
             "
             >MW</span
           >
@@ -97,15 +96,17 @@
       </div>
       <div class="stat-block" style="margin-top: 25px">
         <p class="label">安全天数：</p>
-        <p class="value">1258<span
-              style="
-                font-size: 24px;
-                font-weight: 400;
-                color: #e0e0e0;
-                margin-left: 10px;
-              "
-              >天</span
-            ></p>
+        <p class="value">
+          1258<span
+            style="
+              font-size: 24px;
+              font-weight: 400;
+              color: #e0e0e0;
+              margin-left: 10px;
+            "
+            >天</span
+          >
+        </p>
       </div>
     </aside>
     <aside class="sidebar-left2 panel" v-if="showWeatherDB && !showWindDetail">
@@ -276,7 +277,7 @@
             class="value"
             id="windBtn"
             @click="showMsg"
-            style="color: #00E5FF; cursor: pointer"
+            style="color: #00e5ff; cursor: pointer"
             >{{ showWindMsg ? "关闭详情" : "查看详情" }}</span
           >
         </div>
@@ -285,7 +286,7 @@
           <span
             class="value"
             @click="showDetail"
-            style="color: #00E5FF; cursor: pointer"
+            style="color: #00e5ff; cursor: pointer"
             >{{ showWindDetail ? "关闭详情" : "查看详情" }}</span
           >
         </div>
@@ -833,10 +834,10 @@ export default {
       default: 0,
     },
     fjLonLatJsonArr: {
-        type: Array,
-        default: () => {
-            return []
-        },
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
     cesiumViewer: {
       type: Object,
@@ -874,7 +875,7 @@ export default {
       sl,
       windvalue: "",
       showWindDB: true,
-      showWeatherDB:true,
+      showWeatherDB: true,
       progressHeight: 0,
       progressPoint: 0,
       windmodelArr: [
@@ -977,7 +978,7 @@ export default {
       marks: {},
       currentTime: 0,
       cesiumClockTimmer: null,
-      timeArray: [22, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
+      timeArray: [20, 22, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20],
       // timeArray: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 0],
     };
   },
@@ -1009,8 +1010,8 @@ export default {
 
   methods: {
     switchWind(value) {
-        let data = this.fjLonLatJsonArr[value]
-        this.$emit("resetChangeWind", data)
+      let data = this.fjLonLatJsonArr[value];
+      this.$emit("resetChangeWind", data);
     },
     getViewerClock() {
       let currentTime = 0;
@@ -1097,7 +1098,7 @@ export default {
       }
     },
     backStations() {
-    //   this.$emit("backStations")
+      //   this.$emit("backStations")
       this.$router.push({
         path: "/",
       });
@@ -1109,7 +1110,7 @@ export default {
       this.showWindDB = !this.showWindDB;
     },
     initView() {
-        this.$emit("initView")
+      this.$emit("initView");
     },
     valueOnChange(it) {
       this.heightArr.forEach((it) => {
@@ -1330,20 +1331,20 @@ export default {
 
 <style lang="less" scoped>
 .panel {
-//   background: rgba(249, 249, 249, 0.2);
-//   backdrop-filter: blur(55px);
-//   -webkit-backdrop-filter: blur(55px);
-//   border: 1px solid rgba(255, 255, 255, 0.2);
-//   border-radius: 12px;
-//   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
-//   padding: 20px;
-    padding: 20px;
-    border-radius: 20px;
-    background-color: rgba(25, 55, 40, 0.7);
-    backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
-    color: #E0E0E0;
+  //   background: rgba(249, 249, 249, 0.2);
+  //   backdrop-filter: blur(55px);
+  //   -webkit-backdrop-filter: blur(55px);
+  //   border: 1px solid rgba(255, 255, 255, 0.2);
+  //   border-radius: 12px;
+  //   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
+  //   padding: 20px;
+  padding: 20px;
+  border-radius: 20px;
+  background-color: rgba(25, 55, 40, 0.7);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  color: #e0e0e0;
 }
 .btnms {
   display: flex;
@@ -1363,30 +1364,28 @@ export default {
   top: 80px;
   margin-right: 15px;
 }
-.btnms3{
-    left: 186px;
-    top: 80px;
+.btnms3 {
+  left: 186px;
+  top: 80px;
 }
-.btnms4{
-    left: 20px;
-    top: 120px;
-    margin: 15px 0;
+.btnms4 {
+  left: 20px;
+  top: 120px;
+  margin: 15px 0;
 }
 .sidebar-left-top {
   flex-grow: 1;
-    padding: 10px 15px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: #F0F0F0;
-    border-radius: 10px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background-color 0.3s 
-ease, border-color 0.3s 
-ease;
+  padding: 10px 15px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #f0f0f0;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
-.top2{
-    background-color: rgba(0, 0, 0, 0.2);
+.top2 {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 .sidebar-left {
   top: 100px;
@@ -1403,18 +1402,18 @@ ease;
 }
 
 .stat-block {
-//   margin-bottom: 15px;
+  //   margin-bottom: 15px;
 }
 .stat-block .label {
   font-size: 18px;
   font-weight: 600;
   color: #fff;
-//   margin-bottom: 5px;
+  //   margin-bottom: 5px;
 }
 .stat-block .value {
   font-size: 48px;
   font-weight: 800;
-  color: #00E5FF;
+  color: #00e5ff;
 }
 .stat-block .labels {
   font-size: 18px;
@@ -1424,7 +1423,7 @@ ease;
 .stat-block .values {
   font-size: 24px;
   font-weight: bold;
-  color: #00E5FF;
+  color: #00e5ff;
 }
 .progress-bar {
   height: 4px;
@@ -1466,7 +1465,7 @@ ease;
     .title-all-content {
       font-weight: bold;
       font-size: 19px;
-      color: #00E5FF;
+      color: #00e5ff;
     }
     .title-all-title {
       font-size: 13px;
@@ -1508,7 +1507,7 @@ ease;
             font-size: 19px;
             font-weight: bold;
             line-height: 27px;
-            color: #00E5FF;
+            color: #00e5ff;
           }
           span:nth-child(4) {
             margin-left: 15px;
@@ -1528,7 +1527,7 @@ ease;
             .el-col:nth-child(2) {
               font-size: 16px;
               font-weight: bold;
-              color: #00E5FF;
+              color: #00e5ff;
             }
             .el-col:nth-child(3) {
               font-size: 14px;
@@ -1672,7 +1671,7 @@ ease;
     margin: 8px 5px 0 5px;
     .op-progress-bar-inner {
       height: 100%;
-      background: #00E5FF;
+      background: #00e5ff;
       border-radius: 3px;
       overflow: hidden;
     }
@@ -1688,7 +1687,7 @@ ease;
   .values {
     font-size: 15px;
     font-weight: 600;
-    color: #00E5FF;
+    color: #00e5ff;
     margin-left: 8px;
   }
   .valuess {
@@ -1773,7 +1772,6 @@ ease;
 }
 </style>
 <style lang="less" scoped>
-
 .model-bg-new-right {
   width: 100%;
   min-height: 135px;
@@ -1820,7 +1818,7 @@ ease;
         }
 
         .purple-value {
-          color: #00E5FF;
+          color: #00e5ff;
         }
       }
     }
@@ -1874,7 +1872,7 @@ ease;
 
         .nums {
           font-size: 20px;
-          color: #00E5FF;
+          color: #00e5ff;
           margin: 0 5px;
         }
       }
@@ -1944,7 +1942,7 @@ ease;
   }
 }
 .fengji-icon-box-blue {
-  box-shadow: inset 1.5px -1px 1px 0px #00E5FF;
+  box-shadow: inset 1.5px -1px 1px 0px #00e5ff;
 }
 .fengji-icon {
   border-radius: 50%;
@@ -2008,7 +2006,7 @@ ease;
     justify-content: center;
     width: 30px;
     height: 22px;
-    border: 1px solid #00E5FF;
+    border: 1px solid #00e5ff;
     border-radius: 11px 0px 0px 11px;
     background: rgba(67, 81, 107, 0.2);
 
@@ -2024,8 +2022,8 @@ ease;
     justify-content: center;
     width: 30px;
     height: 22px;
-    border-top: 1px solid #00E5FF;
-    border-bottom: 1px solid #00E5FF;
+    border-top: 1px solid #00e5ff;
+    border-bottom: 1px solid #00e5ff;
     background: rgba(67, 81, 107, 0.2);
 
     &.active {
@@ -2040,7 +2038,7 @@ ease;
     justify-content: center;
     width: 30px;
     height: 22px;
-    border: 1px solid #00E5FF;
+    border: 1px solid #00e5ff;
     border-radius: 0px 11px 11px 0px;
     background: rgba(67, 81, 107, 0.2);
 
@@ -2083,37 +2081,42 @@ ease;
 }
 </style>
 <style lang="less">
-.windSty{
-    .el-select__wrapper{
-        background: transparent !important;
-        box-shadow: none;
-    }
-    .is-hovering:not(.is-focused){
-        background: transparent !important;
-        box-shadow: none;
-    }
-    .el-select__placeholder {
-        color: #fff !important;
-        font-size: 14px;
-    }
+.windSty {
+  .el-select__wrapper {
+    background: transparent !important;
+    box-shadow: none;
+  }
+  .is-hovering:not(.is-focused) {
+    background: transparent !important;
+    box-shadow: none;
+  }
+  .el-select__placeholder {
+    color: #fff !important;
+    font-size: 14px;
+  }
 }
 
 .currentSlider {
   .el-slider__runway {
     background: linear-gradient(
       90deg,
-      #0a1931 0%,
-      /* 凌晨4点 - 深蓝色 */ #1b3b6f 15%,
-      /* 清晨 - 蓝色 */ #4a90e2 30%,
-      /* 早晨 - 浅蓝色 */ #f7d038 45%,
-      /* 上午 - 黄色 */ #ffffff 60%,
-      /* 正午 - 白色 */ #ff9966 75%,
-      /* 傍晚 - 橙色 */ #6a3093 90%,
-      /* 夜晚 - 深紫色 */ #0a1931 100% /* 凌晨4点 - 深蓝色 */
+      #0a0e1a 0%,
+      #0a0e1a 8.33%,
+      #0c1a33 16.67%,
+      #0f2547 25%,
+      #1e3a72 33.33%,
+      #2c5282 41.67%,
+      #4a90e2 50%,
+      #6bb5ff 58.33%,
+      #ffd700 66.67%,
+      #ffed4e 75%,
+      #ffa500 83.33%,
+      #ff6b6b 91.67%,
+      #0a0e1a 100%
     );
 
-    .el-slider__marks-text{
-        color: #fff !important;
+    .el-slider__marks-text {
+      color: #fff !important;
     }
     // background: linear-gradient(
     //   to right,