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"
      @click:openDialog="handleClickOpenDialog"
    ></DetailNode>
  </div>
</template>

<script setup>
import CommunityNode from "./communityNode.vue"
import DetailNode from "./detailNode.vue"
import { useSocialGroupsStore } from "@/store/linkPrediction/index"
const socialGroupsStore = useSocialGroupsStore()
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
})
const emit = defineEmits(["click:openUserInfoDialog"])
const handleClickOpenDialog = (userInfo) => {
  if (userInfo) {
    emit("click:openUserInfoDialog", { userInfoDialog: true, curSelectedUser: userInfo })
  }
}

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

const handleClickEdge = async (edgeInfo, groupIdList) => {
  socialGroupsStore.curComponent = "detailNode"
  socialGroupsStore.clickEvent = "edge"
  socialGroupsStore.curRelationId = ""
  // 先设置socialGroupsStore.clickEdgeTimeList
  // await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target])
  await socialGroupsStore.getClickEdgeTimeList(groupIdList)
  const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1]
  // await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
  await socialGroupsStore.initGraphCommunityDetailNode(groupIdList, lastTime)
}

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

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