duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

时间轴提示框

Browse Source
This commit is contained in:
duanhao 2025-08-27 09:54:52 +08:00
parent f756ffc157
commit 0be93343aa
2 changed files with 54 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue
View File

@ -39,7 +39,10 @@
></div>
</el-tooltip>
</div>
<div class="active-pin" :style="{ left: `${clickedPosition}%` }"></div>
<!-- 添加时间提示框到active-pin -->
<el-tooltip effect="light" :content="getActivePinTime()" placement="bottom">
<div class="active-pin" :style="{ left: `${clickedPosition}%` }"></div>
</el-tooltip>
</div>
<span class="time-label">2023.10.15 00:00:00</span>
</div>
@ -75,6 +78,29 @@ const clickedPosition = ref(0)
let animationTimer = null
const isAutoPlaying = ref(false)
// 添加获取active-pin显示时间的方法
const getActivePinTime = () => {
// 时间范围: 2023.10.07T00:00:00 到 2023.10.15T00:00:00
const startTime = new Date("2023.10.07 00:00:00").getTime()
const endTime = new Date("2023.10.15 00:00:00").getTime()
const timeRange = endTime - startTime
// 根据clickedPosition计算对应的时间戳
const position = clickedPosition.value
const timeOffset = (position / 100) * timeRange
const pinTime = new Date(startTime + timeOffset)
// 格式化时间为 'YYYY.MM.DD HH:mm:ss' 格式
const year = pinTime.getFullYear()
const month = String(pinTime.getMonth() + 1).padStart(2, "0")
const day = String(pinTime.getDate()).padStart(2, "0")
const hours = String(pinTime.getHours()).padStart(2, "0")
const minutes = String(pinTime.getMinutes()).padStart(2, "0")
const seconds = String(pinTime.getSeconds()).padStart(2, "0")
return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
}
// 开始自动播放方法
const startAutomaticPlay = () => {
// 如果已经在播放，先清除

28
src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
View File

@ -36,7 +36,10 @@
></div>
</el-tooltip>
</div>
<div class="active-pin" :style="{ left: `${clickedPosition}%` }"></div>
<!-- 添加时间提示框到active-pin -->
<el-tooltip effect="light" :content="getActivePinTime()" placement="bottom">
<div class="active-pin" :style="{ left: `${clickedPosition}%` }"></div>
</el-tooltip>
</div>
<!-- 时间结束标签 -->
<span class="time-label">2022.08.01 00:00:00</span>
@ -66,6 +69,29 @@ const clickedPosition = ref(0)
let animationTimer = null
const isAutoPlaying = ref(false)
// 添加获取active-pin显示时间的方法
const getActivePinTime = () => {
// 时间范围: 2022-07-31T00:00:00 到 2022-08-01T00:00:00
const startTime = new Date("2022-07-31T00:00:00").getTime()
const endTime = new Date("2022-08-01T00:00:00").getTime()
const timeRange = endTime - startTime
// 根据clickedPosition计算对应的时间戳
const position = clickedPosition.value
const timeOffset = (position / 100) * timeRange
const pinTime = new Date(startTime + timeOffset)
// 格式化时间为 'YYYY.MM.DD HH:mm:ss' 格式
const year = pinTime.getFullYear()
const month = String(pinTime.getMonth() + 1).padStart(2, "0")
const day = String(pinTime.getDate()).padStart(2, "0")
const hours = String(pinTime.getHours()).padStart(2, "0")
const minutes = String(pinTime.getMinutes()).padStart(2, "0")
const seconds = String(pinTime.getSeconds()).padStart(2, "0")
return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
}
// 开始自动播放方法
const startAutomaticPlay = () => {
// 如果已经在播放，先清除