<template>
|
<div class="timeLineBox">
|
<div class="iconePlay">
|
<i
|
class="menu-icon"
|
:class="{'icon-play': !playing, 'icon-pause': playing}"
|
@click="togglePlay"
|
/>
|
</div>
|
<div
|
ref="dayDataList"
|
class="dayDataList"
|
>
|
<div class="oneDayData">
|
<div
|
v-for="item in dataFormList"
|
:key="item.id"
|
class="oneDataBox"
|
:class="{'minWdth': dateType==='hour'}"
|
>
|
<div
|
class="lineBox"
|
:class="{'borLeft': dateType!=='hour','activeBg': (activeIndex > item.id )&&(dateType!=='hour')}"
|
@click="changeActiveIndex(item.id,item)"
|
>
|
<!-- 小时 -->
|
<div
|
v-if="dateType==='hour'"
|
class="hourData"
|
>
|
<el-tooltip
|
v-for="val in item.hourListTime"
|
:key="val.value"
|
transition=""
|
:open-delay="450"
|
popper-class="tooltip-style"
|
effect="dark"
|
:content="val.name"
|
:disabled="val.isShow"
|
placement="top"
|
>
|
<div
|
class="oneHourData"
|
:class="{'cursorNot': val.isShow}"
|
@click.stop="changeActiveIndex(val.id,val)"
|
>
|
<div
|
class="hourLineBox"
|
:class="{'activeBg': activeIndex > val.id,'activeIhShow': val.isShow}"
|
/>
|
<div v-if="((parseInt(val.name, 10) % 3)===0)&&val.name!=='9999'">
|
{{ val.name }}
|
</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
<div
|
class="dataFont"
|
:class="{'mgTop': dateType==='hour'}"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import _ from 'lodash'
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {
|
options: {
|
type: Object,
|
default () {
|
return {}
|
}
|
},
|
dateTimes: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
// 小时或者天
|
dateType: {
|
type: String,
|
default () {
|
return ''
|
}
|
}
|
},
|
data () {
|
// 这里存放数据
|
return {
|
intervalTimer: null, // 定时器
|
playing: false,
|
activeIndex: 1,
|
activeItem: {},
|
activeFarterItem: {},
|
timeLineData: [ // 数据格式
|
{
|
id: 0,
|
name: '2019-01-01',
|
index: 1,
|
hourList: [
|
{
|
name: '00:00',
|
value: 0,
|
isShow: false
|
}
|
]
|
},
|
|
],
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {
|
dataFormList () {
|
let dataList = _.cloneDeep(this.dateTimes)
|
let hourListTime = dataList[dataList.length - 1].hourListTime
|
let hourListTimeStar = dataList[0].hourListTime
|
if (hourListTime.length < 24 && this.dateType === 'hour') {
|
const newArr = hourListTime.concat(Array(24 - hourListTime.length).fill({
|
id: 9999,
|
name: '9999',
|
isShow: true
|
}))
|
console.log('newArr', newArr)
|
dataList[dataList.length - 1].hourListTime = newArr
|
}
|
if (hourListTimeStar.length < 24 && this.dateType === 'hour') {
|
const newArr = (Array(24 - hourListTimeStar.length).fill({
|
id: 9999,
|
name: '9999',
|
isShow: true
|
})).concat(hourListTimeStar)
|
console.log('newArr', newArr)
|
dataList[0].hourListTime = newArr
|
}
|
console.log('dataList', dataList)
|
return dataList
|
}
|
},
|
// 监控data中的数据变化
|
watch: {
|
dateTimes: {
|
handler (newVal, oldVal) {
|
this.activeIndex = 1
|
this.playing = false
|
console.log('newVal', newVal)
|
},
|
deep: true
|
},
|
|
playing () {
|
if (this.playing) {
|
console.log('开始播放', this.dataFormList)
|
console.log('this.activeIndex', this.activeIndex)
|
clearInterval(this.intervalTimer)
|
if (this.dateType === 'hour' && this.activeIndex === this.dataFormList[0].idLength) {
|
this.activeIndex = 1
|
this.chanScroll(0)
|
} else if (this.dateType !== 'hour' && this.activeIndex === this.dataFormList.length) {
|
this.activeIndex = 1
|
this.chanScroll(0)
|
} else {
|
this.activeIndex = (this.activeIndex + 1)
|
}
|
this.intervalTimer = setInterval(() => {
|
if (this.dateType === 'hour' && this.activeIndex === this.dataFormList[0].idLength) {
|
// this.activeIndex = 1
|
this.playing = false
|
} else if (this.dateType !== 'hour' && this.activeIndex === this.dataFormList.length) {
|
// this.activeIndex = 1
|
this.playing = false
|
} else {
|
this.activeIndex = (this.activeIndex + 1)
|
}
|
console.log('this.activeIndex', this.activeIndex)
|
}, this.options.speed * 1000)
|
} else {
|
console.log('停止播放')
|
if (this.intervalTimer) {
|
clearInterval(this.intervalTimer)
|
this.intervalTimer = null
|
}
|
}
|
},
|
activeIndex () {
|
let activeItem = {}
|
if ((this.activeIndex > this.dataFormList.length) && this.dateType !== 'hour') {
|
this.playing = false
|
this.activeIndex = this.dataFormList.length
|
} else if (this.activeIndex > this.dataFormList[0].idLength && this.dateType === 'hour') {
|
this.playing = false
|
this.activeIndex = this.dataFormList[0].idLength
|
}
|
|
if (this.dateType === 'hour') {
|
this.dataFormList.forEach(element => {
|
element.hourListTime.forEach(item => {
|
if (item.id === (this.activeIndex - 1)) {
|
activeItem = {
|
id: item.id,
|
name: `${element.name} ${item.name}`,
|
}
|
this.activeFarterItem = element
|
}
|
})
|
})
|
} else {
|
activeItem = this.dataFormList[this.activeIndex - 1]
|
this.activeFarterItem = activeItem
|
}
|
console.log('activeItem', activeItem, this.activeIndex)
|
this.chanScroll()
|
this.$emit('getDateFun', activeItem)
|
}
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created () {
|
console.log('this.dataFormList', this.dataFormList)
|
if (this.dateType === 'hour') {
|
let data = this.dataFormList[this.dataFormList.length - 1].hourListTime
|
this.activeIndex = data[0].id + 1
|
}
|
},
|
methods: {
|
chanScroll () {
|
const scrollableDiv = this.$refs.dayDataList
|
let farterElementChild = scrollableDiv.firstElementChild
|
let sunElementChild = farterElementChild.firstElementChild.clientWidth
|
let activElementWidth = sunElementChild * (this.activeFarterItem.id + 1)
|
// let childrenlist = farterElementChild.children.length
|
console.log('scrollableDiv.index', this.activeFarterItem.id + 1)
|
console.log('scrollableDiv.index', activElementWidth)
|
// console.log('scrollableDiv.childrenlist', childrenlist)
|
// console.log('scrollableDiv.scrollWidth', scrollableDiv.scrollWidth)
|
console.log('scrollableDiv.clientWidth', scrollableDiv.clientWidth)
|
if (scrollableDiv.scrollWidth > scrollableDiv.clientWidth) {
|
scrollableDiv.scrollTo(((this.activeFarterItem.id) * sunElementChild), 0)
|
}
|
},
|
changeActiveIndex (data, item) {
|
if (item.isShow && this.dateType === 'hour') {
|
return
|
}
|
this.activeIndex = data + 1
|
console.log('changeActiveIndex', data, item)
|
if (this.playing) {
|
this.playing = false
|
}
|
},
|
/**
|
* @name: 播放和暂停
|
*/
|
togglePlay () {
|
this.playing = !this.playing
|
},
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
.timeLineBox{
|
background: rgba(51,51,51,.8);
|
width:100%;
|
color: #fff;
|
// box-shadow: 1px 1px 5px #666;
|
cursor: pointer;
|
padding: 10px;
|
padding-bottom: 5px;
|
padding-top: 10px;
|
display: flex;
|
align-items: center;
|
.dayDataList{
|
width: calc(100% - 60px);
|
overflow-x: auto;
|
.oneDayData{
|
display: flex;
|
// justify-content: space-around;
|
.oneDataBox{
|
font-size: 16px;
|
flex: 1;
|
text-align: center;
|
min-width: 100px;
|
border-left: 1px solid rgba(255, 255, 255, 0.7);;
|
.lineBox{
|
width: 100%;
|
height: 10px;
|
background-color: rgba(0, 0, 0, 0.3);
|
.hourData{
|
display: flex;
|
width:100%;
|
justify-content: space-around;
|
.oneHourData{
|
flex: 1;
|
text-align: center;
|
min-width: 20px;
|
.hourLineBox{
|
width: 100%;
|
height: 10px;
|
// border-left: 1px solid #fff;
|
border-right: 1px solid rgba(255, 255, 255, 0.7);;
|
}
|
}
|
}
|
}
|
.dataFont{
|
margin-top: 5px;
|
padding-top: 5px;
|
border-top: 1px solid rgba(255, 255, 255, 0.7);;
|
// border-top: 1px solid #fff;
|
}
|
}
|
}
|
|
}
|
.dayDataList::-webkit-scrollbar-track
|
{
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
background-color: #F5F5F5;
|
border-radius: 10px;
|
}
|
|
.dayDataList::-webkit-scrollbar
|
{
|
width: 5px;
|
background-color: #F5F5F5;
|
}
|
|
.dayDataList::-webkit-scrollbar-thumb
|
{
|
background-color: #AAA;
|
border-radius: 10px;
|
background-image: -webkit-linear-gradient(90deg,
|
rgba(0, 0, 0, .2) 25%,
|
transparent 25%,
|
transparent 50%,
|
rgba(0, 0, 0, .2) 50%,
|
rgba(0, 0, 0, .2) 75%,
|
transparent 75%,
|
transparent)
|
}
|
|
}
|
.minWdth{
|
min-width: 500px!important;
|
}
|
.iconePlay{
|
margin-right: 10px;
|
width: 50px;
|
text-align: center;
|
}
|
.menu-icon {
|
font-size: 20px;
|
width: 43px;
|
height: 43px;
|
background-size: cover;
|
background-repeat: no-repeat;
|
display: inline-block;
|
&.icon-play {
|
background-image: url('./img/icon-play.png');
|
}
|
|
&.icon-pause {
|
background-image: url('./img/icon-pause.png');
|
}
|
&.menu-icon-disabled {
|
cursor: no-drop;
|
opacity: 0.5;
|
}
|
}
|
.textCenter{
|
text-align: center;
|
}
|
.activeBg{
|
background: #009845 !important;
|
}
|
.activeIhShow{
|
border: none!important;
|
background: #fff !important;
|
pointer-events:none;
|
}
|
.mgTop{
|
margin-top: 20px!important;
|
}
|
.borLeft{
|
// border-left:1px solid #fff;
|
}
|
.cursorNot{
|
cursor: not-allowed;
|
}
|
</style>
|
<style>
|
.tooltip-style.el-tooltip__popper {
|
background: #009845;
|
}
|
.tooltip-style.el-tooltip__popper.is-dark {
|
background: #009845;
|
}
|
.tooltip-style.el-tooltip__popper[x-placement^='top'] .popper__arrow:after{
|
border-top-color:#009845;
|
}
|
.el-tooltip__popper[x-placement^='top'] .popper__arrow{
|
border-top-color:#009845;
|
}
|
</style>
|
