修改时间轴精确度
This commit is contained in:
parent
62418bccf0
commit
146ea172ea
|
|
@ -9,7 +9,11 @@
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
effect="light"
|
effect="light"
|
||||||
>
|
>
|
||||||
<div class="time-section" :style="{ left: getTimeSectionLeft(time) + 5 + 'px' }"></div>
|
<div
|
||||||
|
class="time-section"
|
||||||
|
:style="{ left: getTimeSectionLeft(time) + 'px' }"
|
||||||
|
@pointerdown.stop="handleSectionPointerDown(time)"
|
||||||
|
></div>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
|
|
||||||
<div class="progress-bar" :style="trackStyle"></div>
|
<div class="progress-bar" :style="trackStyle"></div>
|
||||||
|
|
@ -154,7 +158,7 @@ const play = () => {
|
||||||
const getTimeFromPosition = (position) => {
|
const getTimeFromPosition = (position) => {
|
||||||
const ratio = Math.max(0, Math.min(1, position / axisWidth))
|
const ratio = Math.max(0, Math.min(1, position / axisWidth))
|
||||||
const timeOffset = totalDuration * ratio
|
const timeOffset = totalDuration * ratio
|
||||||
return new Date(startTimeMs + timeOffset)
|
return TansTimestamp(startTimeMs + timeOffset, "YYYY-MM-DD HH:mm:ss")
|
||||||
}
|
}
|
||||||
|
|
||||||
// 在时间轴上点击任意时间
|
// 在时间轴上点击任意时间
|
||||||
|
|
@ -203,6 +207,17 @@ const handlePointPointerDown = (e) => {
|
||||||
document.addEventListener("pointerup", handlePointerUp)
|
document.addEventListener("pointerup", handlePointerUp)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 点击时间段时的处理函数
|
||||||
|
const timeSectionWidth = 4 // 与样式保持一致
|
||||||
|
const handleSectionPointerDown = (time) => {
|
||||||
|
pause()
|
||||||
|
// 计算该时间点的中心位置
|
||||||
|
const left = getTimeSectionLeft.value(time) + timeSectionWidth / 2
|
||||||
|
currentPosition.value = left
|
||||||
|
currentTime.value = TansTimestamp(new Date(time), "YYYY-MM-DD HH:mm:ss")
|
||||||
|
emit("click:pointerDown", currentTime.value)
|
||||||
|
}
|
||||||
|
|
||||||
//重置时间轴
|
//重置时间轴
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
currentPosition.value = props.initPosition
|
currentPosition.value = props.initPosition
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<TimeAxis
|
<TimeAxis
|
||||||
v-if="timeList.length"
|
v-if="timeList.length"
|
||||||
:time-list="timeList"
|
:time-list="timeList"
|
||||||
:is-auto-play="false"
|
:is-auto-play="true"
|
||||||
:start-time="new Date(timeList[0])"
|
:start-time="new Date(timeList[0])"
|
||||||
:end-time="new Date(timeList[timeList.length - 1])"
|
:end-time="new Date(timeList[timeList.length - 1])"
|
||||||
@click:pointerDown="handlePointerDown"
|
@click:pointerDown="handlePointerDown"
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@
|
||||||
import abnormalPostItemTitle from "@/assets/images/abnormalGroup/abnormal-action-analysis-item-title.png"
|
import abnormalPostItemTitle from "@/assets/images/abnormalGroup/abnormal-action-analysis-item-title.png"
|
||||||
import groupEvolutionTitle from "@/assets/images/groupEvolution/group-evolution-analysis-titlt.png"
|
import groupEvolutionTitle from "@/assets/images/groupEvolution/group-evolution-analysis-titlt.png"
|
||||||
import abnormalTitle from "@/assets/images/abnormalGroup/abnormal-action-analysis-title.png"
|
import abnormalTitle from "@/assets/images/abnormalGroup/abnormal-action-analysis-title.png"
|
||||||
import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount } from "vue"
|
import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount, watch, nextTick } from "vue"
|
||||||
import { TansTimestamp } from "@/utils/transform"
|
import { TansTimestamp } from "@/utils/transform"
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
posts: {
|
posts: {
|
||||||
|
|
@ -154,6 +154,19 @@ function resumeScroll() {
|
||||||
startScroll()
|
startScroll()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//当贴文列表更新,自动滚动到最底
|
||||||
|
watch(
|
||||||
|
() => props.posts,
|
||||||
|
() => {
|
||||||
|
nextTick(() => {
|
||||||
|
if (listRef.value) {
|
||||||
|
listRef.value.scrollTop = listRef.value.scrollHeight
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
startScroll()
|
startScroll()
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,10 @@ const handleOpenPostDialog = (post) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleChangeXAxis = (utcTime) => {
|
const handleChangeXAxis = (utcTime) => {
|
||||||
|
const timeList = groupDiscoveryStore.timeList
|
||||||
|
console.log(utcTime)
|
||||||
|
|
||||||
|
if (!timeList.includes(utcTime)) return
|
||||||
groupDiscoveryStore.initialPostByUtcTime(utcTime) //随着时间轴变动,更新贴文列表
|
groupDiscoveryStore.initialPostByUtcTime(utcTime) //随着时间轴变动,更新贴文列表
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user