69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="graph-component">
|
||
|
|
<img :src="title" alt="" class="title" />
|
||
|
|
|
||
|
|
<CommunityNode
|
||
|
|
v-if="curComponent == 'CommunityNode'"
|
||
|
|
@click:node="handleClickNode"
|
||
|
|
@click:edge="handleClickEdge"
|
||
|
|
></CommunityNode>
|
||
|
|
<DetailNode
|
||
|
|
v-else
|
||
|
|
@click:goback="handleClickGoBack"
|
||
|
|
:detailNode="curSelectedGroup"
|
||
|
|
></DetailNode>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineProps, ref } from "vue"
|
||
|
|
import CommunityNode from "./communityNode.vue"
|
||
|
|
import DetailNode from "./detailNode.vue"
|
||
|
|
import { useSocialGroupsStore } from "@/store/llinkPrediction/index"
|
||
|
|
const socialGroupsStore = useSocialGroupsStore()
|
||
|
|
const curComponent = ref("CommunityNode")
|
||
|
|
const curSelectedGroup = ref(null)
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ""
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleClickNode = async (nodeInfo) => {
|
||
|
|
const data = await socialGroupsStore.initGraphCommunityDetailNode([nodeInfo.id])
|
||
|
|
console.log(data);
|
||
|
|
curSelectedGroup.value = data
|
||
|
|
curComponent.value = "detailNode"
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClickEdge = async (edgeInfo) => {
|
||
|
|
curComponent.value = "detailNode"
|
||
|
|
const data = await socialGroupsStore.initGraphCommunityDetailNode([
|
||
|
|
edgeInfo.source,
|
||
|
|
edgeInfo.target
|
||
|
|
])
|
||
|
|
curSelectedGroup.value = data
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClickGoBack = (currentComponentName) => {
|
||
|
|
curComponent.value = currentComponentName
|
||
|
|
console.log(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>
|