From 7ce6f4361b22ff88f863ad5293c37d9e8bff0c7d Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 20 Dec 2023 13:06:25 +0800
Subject: [PATCH] fix:热力图播放
---
src/views/hotMap/components/timeLinePlay.vue | 97 +++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 82 insertions(+), 15 deletions(-)
diff --git a/src/views/hotMap/components/timeLinePlay.vue b/src/views/hotMap/components/timeLinePlay.vue
index d9c0622..e92c531 100644
--- a/src/views/hotMap/components/timeLinePlay.vue
+++ b/src/views/hotMap/components/timeLinePlay.vue
@@ -7,7 +7,10 @@
@click="togglePlay"
/>
</div>
- <div class="dayDataList">
+ <div
+ ref="dayDataList"
+ class="dayDataList"
+ >
<div class="oneDayData">
<div
v-for="item in dataFormList"
@@ -97,8 +100,9 @@
return {
intervalTimer: null, // ���������
playing: false,
- activeIndex: 0,
+ activeIndex: 1,
activeItem: {},
+ activeFarterItem: {},
timeLineData: [ // ������������
{
id: 0,
@@ -121,6 +125,7 @@
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,
@@ -130,6 +135,16 @@
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
}
},
@@ -137,7 +152,7 @@
watch: {
dateTimes: {
handler (newVal, oldVal) {
- this.activeIndex = 0
+ this.activeIndex = 1
this.playing = false
console.log('newVal', newVal)
},
@@ -151,8 +166,10 @@
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)
}
@@ -194,25 +211,47 @@
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.activeItem = item
this.activeIndex = data + 1
console.log('changeActiveIndex', data, item)
if (this.playing) {
@@ -230,9 +269,10 @@
</script>
<style scoped lang="scss">
.timeLineBox{
- background: hsla(0,0%,80%,.8);
+ background: rgba(51,51,51,.8);
width:100%;
- box-shadow: 1px 1px 5px #666;
+ color: #fff;
+ // box-shadow: 1px 1px 5px #666;
cursor: pointer;
padding: 10px;
padding-bottom: 5px;
@@ -241,7 +281,7 @@
align-items: center;
.dayDataList{
width: calc(100% - 60px);
- overflow: auto;
+ overflow-x: auto;
.oneDayData{
display: flex;
// justify-content: space-around;
@@ -250,7 +290,7 @@
flex: 1;
text-align: center;
min-width: 100px;
- border-left: 1px solid #fff;
+ border-left: 1px solid rgba(255, 255, 255, 0.7);;
.lineBox{
width: 100%;
height: 10px;
@@ -267,7 +307,7 @@
width: 100%;
height: 10px;
// border-left: 1px solid #fff;
- border-right: 1px solid #fff;
+ border-right: 1px solid rgba(255, 255, 255, 0.7);;
}
}
}
@@ -275,11 +315,38 @@
.dataFont{
margin-top: 5px;
padding-top: 5px;
- border-top: 1px solid #fff;
+ 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)
}
}
@@ -314,7 +381,7 @@
text-align: center;
}
.activeBg{
- background: green !important;
+ background: #009845 !important;
}
.activeIhShow{
border: none!important;
@@ -333,15 +400,15 @@
</style>
<style>
.tooltip-style.el-tooltip__popper {
- background: green;
+ background: #009845;
}
.tooltip-style.el-tooltip__popper.is-dark {
- background: green;
+ background: #009845;
}
.tooltip-style.el-tooltip__popper[x-placement^='top'] .popper__arrow:after{
- border-top-color:green;
+ border-top-color:#009845;
}
.el-tooltip__popper[x-placement^='top'] .popper__arrow{
- border-top-color:green;
+ border-top-color:#009845;
}
</style>
--
Gitblit v1.8.0