创建新仓库
This commit is contained in:
169
src/renderer/components/TS/scale/TimeScale.vue
Normal file
169
src/renderer/components/TS/scale/TimeScale.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user