SocialNetworks_duan/src/views/GroupEvolution/component/groupGraph.vue

<template>
  <div class="groupGraph-component">
    <img src="@/assets/images/groupEvolution/graph-title.png" class="titleImage" />
    <div class="container" id="container"></div>
    <div class="timeList">
      <TimeAxis
        v-if="timeList.length"
        :time-list="timeList"
        :is-auto-play="true"
        :start-time="new Date(timeList[0])"
        :end-time="new Date(timeList[timeList.length - 1])"
        @click:pointerDown="handlePointerDown"
        @slide:pointerUp="handlePointerDown"
      ></TimeAxis>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue"
import { storeToRefs } from "pinia"
import TimeAxis from "@/components/timeAxis.vue"
import { convertToUtcIsoString } from "@/utils/transform"
const props = defineProps({
  store: {
    required: true
  }
})
const emit = defineEmits(["click:pointerDownAndSlide"])
// 解构 store 中的 state
const { timeList } = storeToRefs(props.store)

// 处理时间轴点击事件和拉动
const handlePointerDown = (time) => {
  const utcTime = convertToUtcIsoString(time)
  emit("click:pointerDownAndSlide", utcTime)
}
</script>

<style scoped lang="less">
.groupGraph-component {
  width: 100%;
  height: 100%;
  position: relative;
  .titleImage {
    margin: 0 auto;
  }
  .container {
    width: 100%;
    height: 503px;
  }
  .timeList {
    width: 95%;
    height: 42px;
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 1;
  }
}
</style>