cesium_three/src/components/timeControl/index.vue

<template>
  <div class="timeControlBox">
    <el-slider
      style="width: 96%"
      v-model="sTimeRange"
      :min="0"
      :max="sliderMax"
      size="small"
      placement="bottom"
      range
      :marks="marks"
      :format-tooltip="sliderFormatTooltip"
      :disabled="isPlay"
      @input="sliderChange"
    />
    <el-progress
      class="timeControlProgress"
      :style="`left:${progressLeft}%; width:${progressWidth}%`"
      :text-inside="true"
      striped
      striped-flow
      indeterminate
      :duration="80"
      :stroke-width="6"
      :percentage="percentage"
      :format="progressFormat"
    />
    <el-button
      class="playBtn"
      :icon="isPlay ? VideoPause : VideoPlay"
      size="small"
      circle
      @click="playProgress"
    />
  </div>
</template>

<script>
import cloud from "/public/static/exportData/cloud/layer.json";
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: {
      type: String,
      default: () => {
        return "";
      },
    },
  },

  data() {
    return {
      sTimeRange: [0, 0],
      sliderMax: 0,
      progressLeft: 0,
      progressWidth: 96,
      percentage: 0,
      marks: {},
      cloudJson: [],
      setpLeft: 1,
      VideoPlay,
      VideoPause,
      isPlay: false,
      playRange: [0, 0],
    };
  },

  created() {
    this.cloudJson = cloud.reverse();
    this.controlMode = this.mode || "";
    this.sliderMax = this.cloudJson.length - 1;
    this.sTimeRange = [0, this.sliderMax];
    let marks = {};
    this.cloudJson.forEach((ele, index) => {
      if (index % 2 === 0) {
        marks[index] = ele.date.split(" ")[1];
      }
    });
    this.marks = marks;
  },

  unmounted() {
    clearInterval(this.progressTimmer);
    this.progressTimmer = null;
  },

  methods: {
    sliderFormatTooltip(value) {
      let descStr = "";
      if (value === this.sTimeRange[0]) {
        descStr = "起始时间: ";
      } else if (value === this.sTimeRange[1]) {
        descStr = "截止时间: ";
      }
      return `${descStr}${this.cloudJson[value].date}`;
    },

    progressFormat() {
      return this.cloudJson[this.sTimeRange[0] + (this.setpLeft - 1)].date;
    },

    sliderChange(value) {
      this.progressLeft = parseFloat(
        (value[0] / (this.cloudJson.length - 1)) * 96
      );
      this.progressWidth =
        (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;
      }
    },
  },

  watch: {
    mode(val) {
      this.controlMode = val;
    },
  },
};
</script>

<style lang="less" scoped>
.timeControlBox {
  position: relative;
  width: 100%;

  .timeControlProgress {
    position: absolute;
    top: 9px;
    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>

<style lang="less">
.timeControlBox {
  .el-slider__marks {
    .el-slider__marks-text {
      color: #e4e7ed;
      text-shadow: 2px 2px 0 #000;
    }
  }

  .el-progress-bar__outer {
    overflow: visible;
  }

  .el-progress-bar__innerText {
    background: #303133;
    font-size: 12px;
    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>