4.0/src/renderer/components/TS/scale/TimeScale.vue

<template>
  <div class="TimeScale" :style="scaleStyle" @click.prevent="toTime">
    <div class="timeline-bar" @wheel="wheel" :style="scaleStyle">
      <template v-for="(item,index) in Store.scales.ticTiny">
        <span class="timeline-ticTiny"
              :style="'left:'+(index*Store.scales.distanceOfTicTiny+Store.scales.originOffset)+'px'"></span>
      </template>
      <template v-for="(item,index) in Store.scales.ticSub">
        <span class="timeline-ticSub"
              :style="'left:'+(index*Store.scales.distanceOfTicSub+Store.scales.originSubOffset)+'px'"></span>
      </template>

      <template v-for="(item,index) in (Store.scales.ticMain+1)">
        <span class="timeline-ticMain"
              :style="'left:'+(index*Store.scales.distanceOfTicMain+Store.scales.originMainOffset)+'px'"></span>
        <span class="timeline-ticLabel"
              :style="'left:'+(index*Store.scales.distanceOfTicMain+Store.scales.originMainOffset)+'px'">
          {{ ticLabel(index) }}
        </span>
      </template>
    </div>

  </div>
</template>

<script>
export default {
  name: "TimeScale",
  props: ['Store', 'Clock'],
  computed: {
    scaleStyle() {
      return {
        // width: `${this.Store.scales.fullWidth || 2800}px`,
        // width: this.Store.panelWidth ? (this.Store.panelWidth + "px") : "100%",
        height: this.Store.scales.scaleHeight + "px",
        // left: -this.scales.scrollLeft + "px"
      };
    }
  },
  data() {
    return {
      /*distanceOfTicTinyRange: [7, 8, 9, 10, 11, 12, 13],//单个小格子的宽度可选值
      distanceOfTicTiny: 10,//单个小格子的宽度
      ticTiny: 0,//小格数量
      originOffset: 0,//起始小格偏移量
      numOfSubRange: [3, 4, 6, 8, 12, 24],//相邻中格之间的小格数量可选值
      numOfSub: 6,// 相邻中格之间的小格数量
      ticSub: 0,//中格数量
      originSubOffset: 0,
      numOfMain: 0,// 相邻大格之间的中格数量
      ticMain: 0,
      originMainOffset: 0,*/
    }
  },
  mounted() {
    /*let panelWidth = Math.floor(document.getElementsByClassName("TimeScale")[0].getBoundingClientRect().width)
    document.getElementsByClassName("TimeScale")[0].style.width = panelWidth + "px"
    let nums = Math.ceil(panelWidth / this.Store.scales.distanceOfTicTiny)
    let rest = panelWidth % this.Store.scales.distanceOfTicTiny
    //第一个刻度线的偏移量
    // this.Store.scales.originOffset = -(this.Store.scales.distanceOfTicTiny - rest)
    // console.log("this.Store.scales.originOffset", this.Store.scales.originOffset)
    // console.log("this.Store.scales.originOffset", rest)
    this.Store.scales.ticTiny = nums
    // console.log("nums", nums)
    //相邻中格宽度
    let aSubWidth = this.Store.scales.numOfSub * this.Store.scales.distanceOfTicTiny
    let subNums = Math.ceil(panelWidth / aSubWidth)
    let restSubWidth = panelWidth % aSubWidth
    //第一个刻度线的偏移量
    // this.Store.scales.originSubOffset = -(aSubWidth - restSubWidth)
    this.Store.scales.ticSub = subNums

    this.Store.scales.numOfMain = 24 / this.Store.scales.numOfSub
    let aMainWidth = aSubWidth * this.Store.scales.numOfMain
    let mainNums = Math.ceil(panelWidth / aMainWidth)
    let restMainWidth = panelWidth % aMainWidth
    //第一个刻度线的偏移量
    // this.Store.scales.originMainOffset = -(aMainWidth - restMainWidth)
    this.Store.scales.ticMain = mainNums*/
    this.$nextTick(() => {
      this.Store.moveHalf()
    })

  },
  methods: {
    toTime(event){
      console.log("toTime",event)
      // event.
      this.Store.scales.cursorLeft=event.clientX-this.Store.scales.gridWidth
    },
    wheel(event) {
      // console.log("wheel", event)
      //放大缩小
      let num = event.wheelDelta > 0 ? 1 : -1;
      this.$emit("action", {
        action: "wheel-timeLine",
        num,
        cb: this.$nextTick
      });
    },
    ticLabel(val) {
      let timeLabels = []
      /*     console.log("timeLabels", this.Store.scales.ticMain)
           for (let i = 0; i < this.Store.scales.ticMain; i++) {
             // console.log("timeLabels", this.Store.scales.ticMain)
           }*/

      let stamp = this.Store.startTimestamp + val * this.Store.scales.preMains[this.Store.scales.preMainIndex] * 1000// this.Store.scales.preMains[this.Store.scales.preMainIndex] * 1000
      // return

      return this.Clock.makeLabel(this.Store.scales.timeLabels[val], "{y}-{m}-{d} {h}:{i}:{s}");
    }
  },
}
</script>

<style lang="scss" scoped>
.TimeScale {
  position: relative;
  background: linear-gradient(to bottom, rgba(116, 117, 119, 0.8) 0%, rgba(58, 68, 82, 0.8) 11%, rgba(46, 50, 56, 0.8) 46%, rgba(53, 53, 53, 0.8) 81%, rgba(53, 53, 53, 0.8) 100%);
  width: 100%;

  .timeline-bar {
    position: relative;
    left: 0;
    top: 0;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
  }

  .timeline-ticTiny {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 25%;
    background: #888;
  }

  .timeline-ticSub {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 33%;
    background: #aaa;
  }

  .timeline-ticMain {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 50%;
    background: #eee;
  }

  .timeline-ticLabel {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    font-size: 80%;
    color: #eee;
  }
}
</style>