时间轴のAPI

此部分为单独时间轴timeLine API 的介绍

API 参数

let Option = {
  curTimeInterval: {
    // 时间间隔 数量
    type: Number,
    default: 60,
  },
  TimeIntervalUnit: {
    // 时间间隔 单位
    type: String,
    default: 'minute', // 小时hour; 分钟minute; 秒second
  },
  curTimerSlider: {
    // 当前时间点  [ 与父组件同步 ]
    type: String,
    default: '',
  },
  changeCurTime: {
    // 更变当前时间的回调函数  可以作为异步函数，等待loading结束后再进行其他操作
    type: Function,
    default: null,
  },
  dateFormartStr: {
    // 日期格式化方式
    type: String,
    default: 'YYYY-MM-DD HH:mm',
  },
  timeListLength: {
    // 时间轴点的数量
    type: Number,
    default: 40,
  },
  tooltip: {
    // 提示条：none不显示; always总是显示; active:拖动时显示
    type: String,
    default: 'always',
  },
  timesOrder: {
    // 时间点排序：sort正序:预报从开始时间到未来的时间点; reverse倒序：历史从现在时间点倒推到之前的时间点
    type: String,
    default: 'sort',
  },
  // EC模式下的说明:
  // <=72小时  3小时 间隔
  // >72小时   6小时 间隔
  cutTime: {
    // 分割时间
    type: Number,
    default: 0,
  },
  cutedTimeInterval: {
    //分割时间后的 间隔时间
    type: Number,
    default: 0,
  },
}

API全配置例子

<template>
  <timeLine curTimerSlider="2022/07/18 18:00" dateFormartStr="YYYY/MM/DD HH:mm" 
            :curTimeInterval="60" TimeIntervalUnit="minute" :timeListLength="30" 
            tooltip="always" timesOrder="sort" :changeCurTime="changeCurTime"/>
</template>

<script>

export default {
  components: { timeLine },
  methods: {
    async changeCurTime(v) {
      // 可以作为异步函数，然后等待loading结束后再进行其他操作
      console.log('changeCurTime', v)
    },
  },
}
</script>

效果演示

重新初始化时间轴

<template>
  <timeLine ref="tlREF"/>
</template>
<script>
  this.$refs.tlREF.init("2022-07-18 08:00") // 时间格式化需要和dateFormartStr配置统一，默认为：YYYY-MM-DD HH:mm
</script>