SocialNetworks_duan/src/views/LinkPrediction/socialGroups/components/graph.vue

<template>
  <div class="graph-component">
    <img :src="title" alt="" class="title" />

    <CommunityNode
      v-if="socialGroupsStore.curComponent == 'CommunityNode'"
      @click:node="handleClickNode"
      @click:edge="handleClickEdge"
    ></CommunityNode>
    <DetailNode
      v-else
      @click:goback="handleClickGoBack"
    ></DetailNode>
  </div>
</template>

<script setup>
import { defineProps } from "vue"
import CommunityNode from "./communityNode.vue"
import DetailNode from "./detailNode.vue"
import { useSocialGroupsStore } from "@/store/llinkPrediction/index"
const socialGroupsStore = useSocialGroupsStore()
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
})

const handleClickNode = async (nodeInfo) => {
  // 点击节点
  socialGroupsStore.initGraphCommunityDetailNode([nodeInfo.id])
  socialGroupsStore.curComponent = "detailNode"
}

const handleClickEdge = async (edgeInfo) => {
  socialGroupsStore.curComponent = "detailNode"
  // 先设置socialGroupsStore.clickEdgeTimeList
  await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target])
  // 点击边时，需要将timeList设置成clickEdgeTimeList
  socialGroupsStore.setTimeList(socialGroupsStore.clickEdgeTimeList)
  const lastTime = socialGroupsStore.clickEdgeTimeList[socialGroupsStore.clickEdgeTimeList?.length - 1]
  socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
}

const handleClickGoBack = (currentComponentName) => {
  socialGroupsStore.curComponent = currentComponentName
}
</script>

<style scoped lang="less">
.graph-component {
  width: 100%;
  height: 100%;
  position: relative;
  .title {
    margin: 0 auto;
  }
  .graph-container {
    width: 100%;
    height: 93%;
  }
}
</style>