常规上传

src/components/timeControl/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="timeControlBox">
     <el-slider
+      style="width: 96%"
       v-model="sTimeRange"
       :min="0"
       :max="sliderMax"
@@ -9,6 +10,7 @@
       range
       :marks="marks"
       :format-tooltip="sliderFormatTooltip"
+      :disabled="isPlay"
       @input="sliderChange"
     />
     <el-progress
@@ -23,6 +25,13 @@
       :percentage="percentage"
       :format="progressFormat"
     />
+    <el-button
+      class="playBtn"
+      :icon="isPlay ? VideoPause : VideoPlay"
+      size="small"
+      circle
+      @click="playProgress"
+    />
   </div>
 </template>
 
@@ -32,6 +41,10 @@ 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 { VideoPlay, VideoPause } from "@element-plus/icons-vue";
+
+import { ElMessage } from "element-plus";
+
 export default {
   props: {
     mode: {
@@ -47,11 +60,15 @@ export default {
       sTimeRange: [0, 0],
       sliderMax: 0,
       progressLeft: 0,
-      progressWidth: 100,
+      progressWidth: 96,
       percentage: 0,
       marks: {},
       cloudJson: [],
-      setpLeft: 0,
+      setpLeft: 1,
+      VideoPlay,
+      VideoPause,
+      isPlay: false,
+      playRange: [0, 0],
     };
   },
 
@@ -67,18 +84,11 @@ export default {
       }
     });
     this.marks = marks;
+  },
 
-    let [setpLeft, setpRight] = this.sTimeRange;
-
-    // setInterval(() => {
-    //   if (setpLeft > setpRight) {
-    //     setpLeft = 0;
-    //   }
-    //   let p = parseInt(((setpLeft + 1) / (setpRight + 1)) * 100);
-    //   this.percentage = p >= 100 ? 100 : p;
-    //   setpLeft++;
-    //   this.setpLeft = setpLeft;
-    // }, 500);
+  unmounted() {
+    clearInterval(this.progressTimmer);
+    this.progressTimmer = null;
   },
 
   methods: {
@@ -93,13 +103,59 @@ export default {
     },
 
     progressFormat() {
-      return this.cloudJson[this.setpLeft].date;
+      console.log(111, this.cloudJson);
+      console.log(222, this.sTimeRange);
+      console.log(333, this.setpLeft);
+      return this.cloudJson[this.sTimeRange[0] + (this.setpLeft - 1)].date;
     },
 
     sliderChange(value) {
-      this.progressLeft = parseFloat((value[0] / (cloudJson.length - 1)) * 100);
+      this.progressLeft = parseFloat(
+        (value[0] / (this.cloudJson.length - 1)) * 96
+      );
       this.progressWidth =
-        (value[1] / (cloudJson.length - 1)) * 100 - this.progressLeft;
+        (value[1] / (this.cloudJson.length - 1)) * 96 - this.progressLeft;
+      this.percentage = 0;
+    },
+
+    playProgress() {
+      this.isPlay = !this.isPlay;
+      if (this.isPlay) {
+        const setpRight = this.sTimeRange[1];
+
+        const st = this.cloudJson[this.sTimeRange[0]].date;
+        const et = this.cloudJson[setpRight].date;
+
+        if (
+          this.playRange[0] !== this.sTimeRange[0] ||
+          this.playRange[1] !== this.sTimeRange[1]
+        ) {
+          const [l, r] = this.sTimeRange;
+          this.playRange = [l, r];
+          this.setpLeft = 1;
+        }
+
+        ElMessage({
+          type: "primary",
+          plain: true,
+          showClose: true,
+          message: `开始回滚 ${st} ~ ${et} 之间的数据`,
+        });
+
+        const scrollRange = this.sTimeRange[1] + 1 - (this.sTimeRange[0] + 1);
+
+        this.progressTimmer = setInterval(() => {
+          if (this.setpLeft > scrollRange) {
+            this.setpLeft = 0;
+          }
+          let p = parseInt((this.setpLeft / scrollRange) * 100);
+          this.percentage = p >= 100 ? 100 : p;
+          this.setpLeft++;
+        }, 1000);
+      } else {
+        clearInterval(this.progressTimmer);
+        this.progressTimmer = null;
+      }
     },
   },
 
@@ -122,6 +178,16 @@ export default {
     user-select: none;
     pointer-events: none;
   }
+
+  .playBtn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 32px;
+    height: 32px;
+    background: rgba(0, 0, 0, 0, 0.5);
+    border: 0;
+  }
 }
 </style>
 
@@ -144,10 +210,22 @@ export default {
     padding: 5px 10px;
     border-radius: 8px;
     margin: 0;
+    position: relative;
+    bottom: 28px;
+    left: 57px;
   }
 
   .el-slider__bar {
     background: transparent;
   }
+
+  .playBtn {
+    .el-icon {
+      font-size: 42px;
+      svg {
+        color: #fff;
+      }
+    }
+  }
 }
 </style>

src/views/cesium.vue

@@ -2229,7 +2229,7 @@ export default {
   .timeControl {
     position: absolute;
     left: 0;
-    top: 12px;
+    top: 24px;
     width: 95%;
     margin: 0 2.5%;
   }