src/views/cesiumComponents/windView.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="windView">
     <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="showMessages">
-                <p class="label" v-if="showMessagesB">隐藏详情</p>
-                <p class="label" v-else>查看详情</p>
-            </div>
-        </aside>
+      <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="showMessages">
+          <p class="label" v-if="showMessagesB">隐藏详情</p>
+          <p class="label" v-else>查看详情</p>
+        </div>
+      </aside>
     </div>
-    
+
     <!-- Left Sidebar -->
     <aside class="sidebar-left panel" v-if="showMessagesB">
       <div class="stat-block">
@@ -190,12 +190,14 @@
           "
         >
           <el-slider
+            class="currentSlider"
             style="width: 97.5%; margin-left: 2.5%"
             v-model="currentTime"
             :min="0"
             :max="1440"
             :marks="marks"
             size="small"
+            :show-tooltip="false"
             :format-tooltip="sliderFormatTooltip"
             @input="changeClockTime"
             @change="resetClockTimmer"
@@ -928,6 +930,8 @@ export default {
       marks: {},
       currentTime: 0,
       cesiumClockTimmer: null,
+      timeArray: [22, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
+      // timeArray: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 0],
     };
   },
 
@@ -939,11 +943,8 @@ export default {
 
     let marks = {};
     for (let i = 0; i <= 12; i++) {
-      if (i === 12) {
-        marks[i * 120] = "00";
-      } else {
-        marks[i * 120] = i * 2 < 10 ? `0${i * 2}` : `${i * 2}`;
-      }
+      const timeItem = this.timeArray[i];
+      marks[i * 120] = timeItem < 10 ? `0${timeItem}` : `${timeItem}`;
     }
     this.marks = marks;
 
@@ -963,16 +964,14 @@ export default {
     getViewerClock() {
       let currentTime = 0;
       if (this?.viewer?.clock?.currentTime) {
-        // 需减去时区差 4 小时(14400秒)
         currentTime = parseInt(this.viewer.clock.currentTime.secondsOfDay / 60);
       }
       this.currentTime = currentTime;
     },
 
     sliderFormatTooltip(value) {
-      const dTime = value;
-      let m = dTime % 60;
-      let h = parseInt(dTime / 60);
+      let m = value % 60;
+      let h = parseInt(value / 60);
       return `当前时间: ${h < 10 ? "0" + h : h}:${m < 10 ? "0" + m : m}`;
     },
 
@@ -990,7 +989,9 @@ export default {
           dayjs().format("YYYY-MM-DD") + ` ${h}:${m}:00`
         ).subtract(4, "hour");
 
-        this.viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date(changeUtc));
+        this.viewer.clock.currentTime = Cesium.JulianDate.fromDate(
+          new Date(changeUtc)
+        );
       }
     },
 
@@ -1051,7 +1052,7 @@ export default {
       });
     },
     showMessages() {
-        this.showMessagesB = !this.showMessagesB
+      this.showMessagesB = !this.showMessagesB;
     },
     valueOnChange(it) {
       this.heightArr.forEach((it) => {
@@ -1280,8 +1281,8 @@ export default {
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
   padding: 20px;
 }
-.btnms{
-    display: flex;
+.btnms {
+  display: flex;
 }
 /* --- Left Sidebar --- */
 .sidebar-left,
@@ -1686,6 +1687,25 @@ export default {
 }
 </style>
 <style lang="less">
+.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点 - 深蓝色 */
+    );
+  }
+
+  .el-slider__bar {
+    background: transparent;
+  }
+}
 .model-bg-new-right {
   width: 100%;
   min-height: 135px;