From 159966c580a2f77c058111bdef5bc3af7699ca7b Mon Sep 17 00:00:00 2001
From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com>
Date: Mon, 28 Jul 2025 15:59:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E7=89=A9=E4=BA=92=E5=8A=A8=E9=9A=90?=
 =?UTF-8?q?=E5=85=B3=E7=B3=BB=E9=A2=84=E6=B5=8B=E5=9B=BE=E4=B8=80=E7=BA=A7?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=EF=BC=8C=E4=BA=8C=E7=BA=A7=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../icon/community-count-prefix.png           | Bin 0 -> 347 bytes
 .../icon/hidden-count-prefix.png              | Bin 0 -> 318 bytes
 .../linkPrediction/icon/legend-icon.png       | Bin 0 -> 147 bytes
 .../linkPrediction/icon/node-count-prefix.png | Bin 0 -> 228 bytes
 src/service/api/linkPrediction.js             |   5 +
 src/store/keyNodeRecognition/index.js         |   2 +-
 src/store/llinkPrediction/index.js            |  22 +-
 .../characterInteraction/index.vue            |   2 +
 .../components/communityNode.vue              |  66 ++++-
 .../LinkPrediction/components/detailNode.vue  | 271 +++++++++++++++++-
 src/views/LinkPrediction/components/graph.vue |  41 ++-
 src/views/keyNodeRecognition3/index.vue       | 132 ++++-----
 12 files changed, 440 insertions(+), 101 deletions(-)
 create mode 100644 src/assets/images/linkPrediction/icon/community-count-prefix.png
 create mode 100644 src/assets/images/linkPrediction/icon/hidden-count-prefix.png
 create mode 100644 src/assets/images/linkPrediction/icon/legend-icon.png
 create mode 100644 src/assets/images/linkPrediction/icon/node-count-prefix.png

diff --git a/src/assets/images/linkPrediction/icon/community-count-prefix.png b/src/assets/images/linkPrediction/icon/community-count-prefix.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba9edba90f54a4478224a715c971783a2841ef7b
GIT binary patch
literal 347
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngd!3HEhbh*6;Qk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFAdQ|bjv*C{YbO~B9dr<BEAKU8zrpOHZ)?lG
z!0kM%jKbEy#nV<S6=%P2d9lCze|i11bme0_`OjwW*<Sg7U%h$YtN9b3?_|Ff_I7f9
zi*f;jpg{unw@up~94kH4*HN=FJV9&c#HyTZsjz!Y>1)3pT_vm*vHRghX2-b}%+H+9
zR`0l#lza18<uxBijmeqTtn;o27Y5F}GuiX|@?hD`k{f<L;fkMJsaWBX(APF)dV9@-
z8)+Zxrae_#I^&y-PTPr>32aF-SIsFdKPa#_GFYs3<FOaP9n+;ldtGA0Y<<7l^;oRv
rew40xbj$R}$^~=sUmXejE5+aTu;J?cS#P%k{m$U&>gTe~DWM4fTCt3s

literal 0
HcmV?d00001

diff --git a/src/assets/images/linkPrediction/icon/hidden-count-prefix.png b/src/assets/images/linkPrediction/icon/hidden-count-prefix.png
new file mode 100644
index 0000000000000000000000000000000000000000..62805cbe8eb5c118e5d309047407f5e0af703444
GIT binary patch
literal 318
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngd!3HEhbh*6;Qk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>lS<7srqa#<dd-g$@P?w8i%X^-Jw#-qB$9
z<qMy{E06W=XIH%Re9yo);me}F{Nv{;eB_Lh)Av=Le0G2P?)sje<xeW(ngym^D1NEc
z_lLtu;BbhZcCgOG1FTugd@ihHjJ7y*U}<sbxd&^~KNWA3+R~^dli;UU@b+(<&Y=rc
z`LBQUuAjShWB0uHMXR>|e)h3CXz{x&b<HoK){56d&z||b=gQ^SZ<98(D7`o=nzx~i
zK}o>hs7tx}jhM&w2)hElMD}Ehmm;NCZNdfH6ThAe_1>&uw7%pHqpodTy<v0JYM}QR
NJYD@<);T3K0RZb)fEoY*

literal 0
HcmV?d00001

diff --git a/src/assets/images/linkPrediction/icon/legend-icon.png b/src/assets/images/linkPrediction/icon/legend-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3fb9ca84a811bf8b49b728ac14b3fae177ccb3b
GIT binary patch
literal 147
zcmeAS@N?(olHy`uVBq!ia0vp^0zk~d!3HGTx9oodq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFG0%F9eo`c7&i8E|4C#8@-;kN978G?kM<byGB9u)mfG_mp7GEQ1r-Se
onb%kCR1bHj{<(Eb`0oNnUmdaQmyC;+0QE3<y85}Sb4q9e05}jQkN^Mx

literal 0
HcmV?d00001

diff --git a/src/assets/images/linkPrediction/icon/node-count-prefix.png b/src/assets/images/linkPrediction/icon/node-count-prefix.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8f1e610b3d1ce5e778ff4f703e39d82fb4b240d
GIT binary patch
literal 228
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5ztYpiF{Fa=?Kx{c2M3YXhZ8kk-t11ju$ggh
z1Z!6Rw0W#Icx?avP<3CliOKwDnwoieTAyKk?ewkN4s{7KCY=#leLZX0j`tQaO5bEu
zgIG8&zP`&NUB<KG!VVp~J-?HAt^6m1uPA?i;HQhO$l~BNEZr)vd}pmZ8-Kr)aZXK=
VnfL;+44@+zJYD@<);T3K0RUa+Ott_3

literal 0
HcmV?d00001

diff --git a/src/service/api/linkPrediction.js b/src/service/api/linkPrediction.js
index a1b4f9a..8cb286e 100644
--- a/src/service/api/linkPrediction.js
+++ b/src/service/api/linkPrediction.js
@@ -14,6 +14,11 @@ export function getInteractionCommunityNodes() {
 export function getInteractionCommunityDetailNodes(ids) {
   return http.get(`linkPrediction/interaction/community_detail?groupIds=${ids}`)
 }
+
+//人物互动隐关系预测的社团统计
+export function getInteractionCommunityStatistics() {
+  return http.get(`linkPrediction/interaction/community_statistics`)
+}
 //社交紧密团体识别的用户组列表
 export function getGroupUserListFromTriangle() {
   return http.get("/linkPrediction/triangle/group_list")
diff --git a/src/store/keyNodeRecognition/index.js b/src/store/keyNodeRecognition/index.js
index 104c1ae..cba3207 100644
--- a/src/store/keyNodeRecognition/index.js
+++ b/src/store/keyNodeRecognition/index.js
@@ -541,7 +541,7 @@ export const useKeyNodeRecognitionStore = defineStore("keyNodeRecognition", {
           backimg: high3Img,
           riskType: "低风险",
           chart: {
-            predictedData: [12000, 12690, 12108, 10790, 9004, 8006, 7890, 11878],
+            predictedData: [12000, 12690, 12108, 10790, 9004, 5000, 4890, 3300],
             realityData: [8959, 7460, 8334, 7902, 5753, 3070, "-", "-"]
           }
         }
diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js
index 1e93cc2..0d82ac0 100644
--- a/src/store/llinkPrediction/index.js
+++ b/src/store/llinkPrediction/index.js
@@ -7,10 +7,14 @@ import {
   getSocialPostList,
   getInteractionHiddenPostList,
   getInteractionCommunityNodes,
-  getInteractionCommunityDetailNodes
+  getInteractionCommunityDetailNodes,
+  getInteractionCommunityStatistics
 } from "@/service/api/linkPrediction"
 
 import defaultAvatar from "@/assets/images/avatar/default.png"
+import nodePrefix from "@/assets/images/linkPrediction/icon/node-count-prefix.png"
+import communityPrefix from "@/assets/images/linkPrediction/icon/community-count-prefix.png"
+import hiddenPrefix from "@/assets/images/linkPrediction/icon/hidden-count-prefix.png"
 
 export const useCharacterInteractionStore = defineStore("characterInteraction", {
   state: () => ({
@@ -128,6 +132,12 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
       { text: "领土", top: 57.5, left: 72.5, width: 49, height: 19, fontSize: 12, opacity: 0.6 },
       { text: "原则", top: 77.5, left: 264.5, width: 49, height: 19, fontSize: 12, opacity: 0.7 },
       { text: "台湾", top: 195.5, left: 287.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 }
+    ],
+
+    statisticsList: [
+      { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" },
+      { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" },
+      { id: 3, icon: hiddenPrefix, name: "隐关系数", key: "hiddenInteractionCount" }
     ]
   }),
   actions: {
@@ -158,7 +168,15 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
     },
     async initGraphCommunityDetailNode(ids) {
       const res = await getInteractionCommunityDetailNodes(ids)
-      console.log(res)
+      if (res.code != 200) return
+      return res.data
+    },
+    async initGraphStatistics() {
+      const res = await getInteractionCommunityStatistics()
+      this.statisticsList = this.statisticsList.map((item) => ({
+        ...item,
+        count: res.data[item.key]
+      }))
     }
   },
   persist: true // 开启持久化
diff --git a/src/views/LinkPrediction/characterInteraction/index.vue b/src/views/LinkPrediction/characterInteraction/index.vue
index 26bd79e..f1f8289 100644
--- a/src/views/LinkPrediction/characterInteraction/index.vue
+++ b/src/views/LinkPrediction/characterInteraction/index.vue
@@ -99,8 +99,10 @@ onMounted(() => {
   interactionStore.initGroupList()
   interactionStore.initInteractionPostList(1)
   interactionStore.initGraphCommunityNode()
+  interactionStore.initGraphStatistics()
 })
 provide("communityNodeList", interactionStore.communityNodeList) // 提供数据
+provide("statisticsList", interactionStore.statisticsList)
 </script>
 
 <style scoped lang="less">
diff --git a/src/views/LinkPrediction/components/communityNode.vue b/src/views/LinkPrediction/components/communityNode.vue
index 4fc78af..b7a61d5 100644
--- a/src/views/LinkPrediction/components/communityNode.vue
+++ b/src/views/LinkPrediction/components/communityNode.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="communityNode-component">
     <div class="graph-container" id="container"></div>
+    <div class="statistic-container">
+      <div class="statistics-item" v-for="item in statisticsList" :key="item.id">
+        <img :src="item.icon" class="icon" />
+        <div class="name">{{ item.name }}:&nbsp;</div>
+        <div class="count">{{ item.count }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,6 +17,7 @@ import * as echarts from "echarts"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
 let chart = null
 const emit = defineEmits(["click:node", "click:edge"])
+const statisticsList = inject("statisticsList")
 
 const initChart = async () => {
   chart = echarts.init(document.getElementById("container"))
@@ -21,7 +29,10 @@ const initChart = async () => {
     isIncludePredictNodes: item.isIncludePredictNodes,
     nodesNum: item.nodesNum,
     neighbors: item.neighbors.map((item) => ({ ...item, name: parseInt(item.id) })),
-    category: item.isIncludePredictNodes ? 1 : 0
+    category: item.isIncludePredictNodes ? 1 : 0,
+    selfIncludeImplicitRelationship:
+      item.neighbors.map((nei) => nei.id).includes(item.id) && //若该社团的id在该社团邻居中可以找到，说明自己这个社团中有互动隐关系
+      item.neighbors.find((nei) => nei.id == item.id).isHidden
   }))
 
   //处理连边
@@ -80,8 +91,8 @@ const initChart = async () => {
                     ])
           }
         })),
-        right: 21,
-        bottom: 70,
+        right: 15,
+        bottom: 10,
         icon: "circle",
         orient: "vertical",
         itemWidth: 16,
@@ -158,7 +169,6 @@ const initChart = async () => {
         roam: true,
         zoom: 0.3,
         categories: categories,
-
         force: {
           edgeLength: 2500,
           repulsion: 4000,
@@ -187,8 +197,8 @@ const initChart = async () => {
                   ]),
 
             opacity: 1,
-            borderColor: "#46C6AD",
-            borderWidth: 1,
+            borderColor: node.selfIncludeImplicitRelationship ? "#f8bf38" : "#46C6AD",
+            borderWidth: node.selfIncludeImplicitRelationship ? 3 : 1,
             shadowBlur: 4,
             borderType: "dashed",
             shadowColor: "rgba(19, 27, 114, 0.25)"
@@ -250,5 +260,49 @@ onMounted(async () => {
     width: 100%;
     height: 93%;
   }
+  .statistic-container {
+    width: 378px;
+    height: 42px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    border: 1px solid #3aa1f8;
+    background: linear-gradient(270deg, rgba(0, 82, 125, 0.48) 0%, rgba(0, 200, 255, 0.23) 100%);
+    backdrop-filter: blur(3px);
+    position: absolute;
+    bottom: 48px;
+    left: 15px;
+    display: flex;
+    justify-content: space-between;
+    .statistics-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        width: 14px;
+        height: 14px;
+      }
+      .name {
+        color: rgba(255, 255, 255, 0.76);
+        text-align: center;
+        font-family: OPPOSans;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-left: 3px;
+      }
+      .count {
+        color: #fff;
+        font-family: D-DIN;
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        margin-bottom: 2px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/LinkPrediction/components/detailNode.vue b/src/views/LinkPrediction/components/detailNode.vue
index 6c28df4..2241a53 100644
--- a/src/views/LinkPrediction/components/detailNode.vue
+++ b/src/views/LinkPrediction/components/detailNode.vue
@@ -2,22 +2,232 @@
   <div class="detailNode-component">
     <img src="@/assets/images/icon/goback.png" alt="" class="goback" @click="handleGoback" />
     <div class="graph-container" id="container"></div>
+    <div class="statistic-container">
+      <div class="statistics-item" v-for="item in statisticsList" :key="item.id">
+        <img :src="item.icon" class="icon" />
+        <div class="name">{{ item.name }}:&nbsp;</div>
+        <div class="count">{{ item.count }}</div>
+      </div>
+    </div>
+    <div class="time-axis"></div>
   </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from "vue"
-
+import nodePrefix from "@/assets/images/linkPrediction/icon/node-count-prefix.png"
+import communityPrefix from "@/assets/images/linkPrediction/icon/community-count-prefix.png"
+import hiddenPrefix from "@/assets/images/linkPrediction/icon/hidden-count-prefix.png"
+import { defineProps, defineEmits, onMounted, ref } from "vue"
+import nodeHoverImg from "@/assets/images/nodeHover.png"
+import * as echarts from "echarts"
+const statisticsList = [
+  { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount", count: 3000 },
+  { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount", count: 1000 },
+  { id: 3, icon: hiddenPrefix, name: "隐关系数", key: "hiddenInteractionCount", count: 1000 }
+]
 const props = defineProps({
   detailNode: {
     type: Array,
     default: () => []
   }
 })
+
+const curDetailNode = ref(props.detailNode)
+
 const emit = defineEmits(["click:goback"])
 const handleGoback = () => {
   emit("click:goback", "CommunityNode")
 }
+
+let chart = null
+
+const initChart = async () => {
+  chart = echarts.init(document.getElementById("container"))
+
+  const links = []
+  const nodes = []
+  if (!Object.keys(curDetailNode.value).length) return
+  Object.entries(curDetailNode.value).forEach(([parentId, children]) => {
+    nodes.push({
+      id: `parent_${parentId}`,
+      name: parentId
+    })
+    children.forEach((child) => {
+      if (!nodes.some((n) => n.id === child.id)) {
+        nodes.push(child)
+      }
+      links.push({
+        source: `parent_${parentId}`,
+        target: child.id,
+        edge: child.isHidden ? 1 : 0,
+        interactionTimes: child.interactionTime
+      })
+    })
+  })
+  const data = { links, nodes }
+
+  const categories = [
+    { name: "事件活跃者", category: 0 },
+    { name: "信息发布者", category: 1 },
+    { name: "互动关系", category: 2 },
+    { name: "互动隐关系", category: 3 }
+  ]
+  const option = {
+    //图例配置
+    legend: [
+      {
+        data: categories.map((c) => ({
+          name: c.name,
+          itemStyle: {
+            color:
+              c.category === 0
+                ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                    { offset: 1, color: "#1a3860" }, // 深蓝渐变
+                    { offset: 0.5, color: "#38546b" },
+                    { offset: 0, color: "#5fb3b3" }
+                  ])
+                : c.category === 1
+                  ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                      { offset: 0, color: "#9eec9c" }, // 绿色渐变
+                      { offset: 0.37, color: "#aef295" },
+                      { offset: 1, color: "#c2f989" }
+                    ])
+                  : new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                      { offset: 0, color: "#ff9a9e" }, // 红色渐变（用于 category === 2）
+                      { offset: 0.5, color: "#fad0c4" },
+                      { offset: 1, color: "#fbc2eb" }
+                    ])
+          }
+        })),
+        right: 21,
+        bottom: 70,
+        icon: "circle",
+        orient: "vertical",
+        itemWidth: 16,
+        itemHeight: 16,
+        itemGap: 12,
+        backgroundColor: "rgba(0,67,125,0.56)", // 半透明深蓝
+        borderRadius: 8, // 圆角
+        borderColor: "#c2f2ff", // 淡蓝色边框
+        borderWidth: 0.3,
+        padding: [12, 20, 12, 20], // 上右下左
+        textStyle: {
+          color: "#fff",
+          fontSize: 16,
+          fontWeight: "normal"
+        }
+      }
+    ],
+    //hover上去的窗口
+    tooltip: {
+      trigger: "item",
+      backgroundColor: "rgba(0,0,0,0)", // 透明背景
+      borderColor: "rgba(0,0,0,0)", // 透明边框
+      borderWidth: 0,
+      extraCssText: "box-shadow:none;padding:0;",
+      formatter: function (params) {
+        if (params.dataType === "node") {
+          return `<div
+                    style="
+                   padding:10px 15px;
+                    height: 68px;
+                    border-radius: 4px;
+                    background: url('${nodeHoverImg}');
+                    background-size: cover;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    ">
+                <div style="color:#fff;letter-spacing: 0.14px;">
+                    <div >用户ID：${params.data.id}</div>
+              </div>
+            </div>`
+        }
+        return ""
+      }
+    },
+    edgeLabel: {
+      show: false,
+      position: "middle",
+      formatter: function (params) {
+        return params.data.edge
+      },
+      fontSize: 14
+    },
+    emphasis: {
+      edgeLabel: {
+        show: true,
+        color: "#fff",
+        fontSize: 18,
+        textShadowColor: "#fff",
+        textShadowBlur: 0,
+        textShadowOffsetX: 0,
+        textShadowOffsetY: 0
+      }
+    },
+    series: [
+      {
+        type: "graph",
+        layout: "force",
+        animation: false,
+        draggable: true,
+        roam: true,
+        zoom: 0.3,
+        categories: categories,
+
+        force: {
+          edgeLength: 2500,
+          repulsion: 4000,
+          gravity: 0.4,
+          friction: 0.02,
+          coolingFactor: 0.1
+        },
+
+        animationDurationUpdate: 3500, // 节点移动更平滑
+        data: data.nodes.map((node) => ({
+          ...node,
+          symbolSize: 40,
+          itemStyle: {
+            color: new echarts.graphic.RadialGradient(0.98, 0.38, 0.9, [
+              { offset: 1, color: "#1a3860" }, // 最左侧
+              { offset: 0.5, color: "#38546b" }, // 中间
+              { offset: 0, color: "#5fb3b3" } // 最右侧
+            ]),
+
+            opacity: 1,
+            borderColor: "#46C6AD",
+            borderWidth: 1,
+            shadowBlur: 4,
+            borderType: "dashed",
+            shadowColor: "rgba(19, 27, 114, 0.25)"
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 20,
+              shadowColor: "#c4a651",
+              borderColor: "#fcd267",
+              borderWidth: 1,
+              borderType: "solid"
+            }
+          }
+        })),
+        links: data.links,
+        lineStyle: {
+          color: "#37ACD7",
+          width: 1
+        }
+      }
+    ]
+  }
+  chart.setOption(option)
+}
+
+onMounted(() => {
+  initChart()
+})
 </script>
 
 <style scoped lang="less">
@@ -27,7 +237,7 @@ const handleGoback = () => {
   position: relative;
   .goback {
     position: absolute;
-    top: 10px;
+    top: -25px;
     left: 20px;
     cursor: pointer;
   }
@@ -35,5 +245,60 @@ const handleGoback = () => {
     width: 100%;
     height: 93%;
   }
+  .statistic-container {
+    width: 378px;
+    height: 42px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    border: 1px solid #3aa1f8;
+    background: linear-gradient(270deg, rgba(0, 82, 125, 0.48) 0%, rgba(0, 200, 255, 0.23) 100%);
+    backdrop-filter: blur(3px);
+    position: absolute;
+    bottom: 105px;
+    left: 21px;
+    display: flex;
+    justify-content: space-between;
+    .statistics-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .icon {
+        width: 14px;
+        height: 14px;
+      }
+      .name {
+        color: rgba(255, 255, 255, 0.76);
+        text-align: center;
+        font-family: OPPOSans;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-left: 3px;
+      }
+      .count {
+        color: #fff;
+        font-family: D-DIN;
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        margin-bottom: 2px;
+      }
+    }
+  }
+  .time-axis {
+    width: 95%;
+    height: 42px;
+    border: 1px solid #3aa1f8;
+    background: linear-gradient(270deg, rgba(0, 82, 125, 0.48) 0%, rgba(0, 200, 255, 0.23) 100%);
+    backdrop-filter: blur(3px);
+    position: absolute;
+    left: 20px;
+    bottom: 50px;
+    border-radius: 4px;
+    z-index: 1;
+  }
 }
 </style>
diff --git a/src/views/LinkPrediction/components/graph.vue b/src/views/LinkPrediction/components/graph.vue
index 05f9636..3fd6134 100644
--- a/src/views/LinkPrediction/components/graph.vue
+++ b/src/views/LinkPrediction/components/graph.vue
@@ -7,19 +7,22 @@
       @click:node="handleClickNode"
       @click:edge="handleClickEdge"
     ></CommunityNode>
-    <DetailNode v-else @click:goback="handleClickGoBack"></DetailNode>
-
-    <div class="time-axis"></div>
+    <DetailNode
+      v-else
+      @click:goback="handleClickGoBack"
+      :detailNode="curSelectedGroup"
+    ></DetailNode>
   </div>
 </template>
 
 <script setup>
-import { defineProps, onMounted, ref } from "vue"
+import { defineProps, ref } from "vue"
 import CommunityNode from "./communityNode.vue"
 import DetailNode from "./detailNode.vue"
 import { useCharacterInteractionStore } from "@/store/llinkPrediction/index"
 const interactionStore = useCharacterInteractionStore()
 const curComponent = ref("CommunityNode")
+const curSelectedGroup = ref(null)
 const props = defineProps({
   title: {
     type: String,
@@ -27,19 +30,24 @@ const props = defineProps({
   }
 })
 
-const handleClickNode = (nodeInfo) => {
-  interactionStore.initGraphCommunityDetailNode([nodeInfo.id])
-  console.log(nodeInfo)
+const handleClickNode = async (nodeInfo) => {
+  const data = await interactionStore.initGraphCommunityDetailNode([nodeInfo.id])
+  curSelectedGroup.value = data
+  curComponent.value = "detailNode"
 }
 
-const handleClickEdge = (edgeInfo) => {
+const handleClickEdge = async (edgeInfo) => {
   curComponent.value = "detailNode"
-  const ids = [edgeInfo.source, edgeInfo.target]
-  console.log(ids)
+  const data = await interactionStore.initGraphCommunityDetailNode([
+    edgeInfo.source,
+    edgeInfo.target
+  ])
+  curSelectedGroup.value = data
 }
 
 const handleClickGoBack = (currentComponentName) => {
   curComponent.value = currentComponentName
+  console.log(currentComponentName)
 }
 </script>
 
@@ -55,18 +63,5 @@ const handleClickGoBack = (currentComponentName) => {
     width: 100%;
     height: 93%;
   }
-  .time-axis {
-    width: 95%;
-    height: 42px;
-    border: 1px solid #3aa1f8;
-    background: linear-gradient(270deg, rgba(0, 82, 125, 0.48) 0%, rgba(0, 200, 255, 0.23) 100%);
-    backdrop-filter: blur(3px);
-    position: absolute;
-    bottom: 0;
-    left: 20px;
-    bottom: 20px;
-    border-radius: 4px;
-    z-index: 1;
-  }
 }
 </style>
diff --git a/src/views/keyNodeRecognition3/index.vue b/src/views/keyNodeRecognition3/index.vue
index 0cd44f5..1351f7d 100644
--- a/src/views/keyNodeRecognition3/index.vue
+++ b/src/views/keyNodeRecognition3/index.vue
@@ -203,111 +203,111 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, nextTick } from "vue";
-import UserPanel from "./components/userPanel.vue";
-import UserChart from "./components/userChart.vue";
-import AnchorGraph from "./components/anchorGraph.vue";
-import AnchorPost from "./components/anchorPost.vue";
-import AttentionTopic from "./components/attentionTopic.vue";
-import Monitoring from "./components/monitoring.vue";
-import { Icon } from "@iconify/vue";
-import * as echarts from "echarts";
+import { computed, ref, watch, nextTick } from "vue"
+import UserPanel from "./components/userPanel.vue"
+import UserChart from "./components/userChart.vue"
+import AnchorGraph from "./components/anchorGraph.vue"
+import AnchorPost from "./components/anchorPost.vue"
+import AttentionTopic from "./components/attentionTopic.vue"
+import Monitoring from "./components/monitoring.vue"
+import { Icon } from "@iconify/vue"
+import * as echarts from "echarts"
 
-import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index";
-const KeyNodeOneStore = useKeyNodeRecognitionStore();
+import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index"
+const KeyNodeOneStore = useKeyNodeRecognitionStore()
 
 //控制弹窗
-const postDialog = ref(false);
-const topicDialog = ref(false);
-const anchorDialog = ref(false);
+const postDialog = ref(false)
+const topicDialog = ref(false)
+const anchorDialog = ref(false)
 
 //当前选中的贴文数据
-const currentPostPost = ref(null);
+const currentPostPost = ref(null)
 
 //当前选中的热度事件
-const currentTopic = ref(null);
+const currentTopic = ref(null)
 
 //当前选中的锚点数据
-const currentSelectedAnchorItem = ref(null);
+const currentSelectedAnchorItem = ref(null)
 //筛选tabs展示条件
 const filterShowUserList = computed(() => {
   if (KeyNodeOneStore.currentTabType == "全部") {
-    return KeyNodeOneStore.mediaData;
+    return KeyNodeOneStore.mediaData
   } else {
-    return KeyNodeOneStore.mediaData.filter((item) => item.type === KeyNodeOneStore.currentTabType);
+    return KeyNodeOneStore.mediaData.filter((item) => item.type === KeyNodeOneStore.currentTabType)
   }
-});
+})
 
 const contentType = computed(() => {
   return (content) => {
-    if (content.startsWith("//@")) return "转发";
-    return "原发";
-  };
-});
+    if (content.startsWith("//@")) return "转发"
+    return "原发"
+  }
+})
 
 //直接截取前两个关键用户
 const cutOutTheFirstTwo = computed(() => {
   return (keyUserString) => {
-    return keyUserString.split(",").slice(0, 2).join(",");
-  };
-});
+    return keyUserString.split(",").slice(0, 2).join(",")
+  }
+})
 
 watch(filterShowUserList, (newList) => {
-  if (!newList?.length) return;
+  if (!newList?.length) return
 
-  const { anchorChartInfoList } = KeyNodeOneStore;
-  const find = (name) => anchorChartInfoList.find((item) => item.name === name);
+  const { anchorChartInfoList } = KeyNodeOneStore
+  const find = (name) => anchorChartInfoList.find((item) => item.name === name)
 
   // 安全数值转换函数
-  const safeNumber = (val) => (isNaN(+val) ? 0 : +val);
+  const safeNumber = (val) => (isNaN(+val) ? 0 : +val)
 
   // 更新各项数据
-  find("锚点数量").number = newList.length;
+  find("锚点数量").number = newList.length
 
   find("平均粉丝数量").number = `${(
     newList.reduce((acc, cur) => acc + safeNumber(cur.number?.replace("w", "")), 0) / newList.length
-  ).toFixed(1)}w`;
+  ).toFixed(1)}w`
 
   find("平均发帖频率").number = `${Math.round(
     newList.reduce((acc, cur) => acc + safeNumber(cur.transmit?.replace("h/1次", "")), 0) /
       newList.length
-  )}h/1次`;
+  )}h/1次`
 
   find("平均参与互动次数").number = Math.floor(
     newList.reduce((acc, cur) => acc + safeNumber(cur.interaction), 0) / newList.length
-  );
-});
+  )
+})
 
 const handleSwitchTab = (tabName) => {
-  KeyNodeOneStore.currentTabType = tabName;
-};
+  KeyNodeOneStore.currentTabType = tabName
+}
 
 const handleSwitchChartTab = (tabName) => {
-  KeyNodeOneStore.currentChartTabType = tabName;
-};
+  KeyNodeOneStore.currentChartTabType = tabName
+}
 
 const handlePostDialog = (post) => {
-  postDialog.value = true;
-  currentPostPost.value = post;
-  console.log(post);
-};
+  postDialog.value = true
+  currentPostPost.value = post
+  console.log(post)
+}
 
 const handleGotTopicDialog = (topic) => {
-  topicDialog.value = true;
-  currentTopic.value = topic;
-  console.log(topic);
-};
+  topicDialog.value = true
+  currentTopic.value = topic
+  console.log(topic)
+}
 
-let hotChartInstance = null;
+let hotChartInstance = null
 
 const renderHotChart = () => {
   nextTick(() => {
-    const chartDom = document.getElementById("hotChart");
-    if (!chartDom) return;
+    const chartDom = document.getElementById("hotChart")
+    if (!chartDom) return
     if (hotChartInstance) {
-      hotChartInstance.dispose();
+      hotChartInstance.dispose()
     }
-    hotChartInstance = echarts.init(chartDom);
+    hotChartInstance = echarts.init(chartDom)
     const option = {
       backgroundColor: "transparent",
       tooltip: { trigger: "axis" },
@@ -324,7 +324,7 @@ const renderHotChart = () => {
         axisLine: { show: false },
         axisTick: { show: false },
         axisLabel: { color: "#B6D6F7", fontSize: 13 },
-        data: ["7.18", "7.19", "7.20", "7.21", "7.22", "7.23", "7.24", "7.25"]
+        data: ["6.25", "6.26", "6.27", "6.28", "6.29", "6.30", "7.1", "7.2"]
       },
       yAxis: {
         type: "value",
@@ -370,26 +370,26 @@ const renderHotChart = () => {
           padding: [0, 0, 0, 30]
         }
       ]
-    };
-    hotChartInstance.setOption(option);
-  });
-};
+    }
+    hotChartInstance.setOption(option)
+  })
+}
 
 const handleOpenAnchorDialog = (params) => {
-  anchorDialog.value = params.anchorDialog;
-  currentSelectedAnchorItem.value = params.currentSelectAnchorNode;
-  console.log(currentSelectedAnchorItem.value);
-};
+  anchorDialog.value = params.anchorDialog
+  currentSelectedAnchorItem.value = params.currentSelectAnchorNode
+  console.log(currentSelectedAnchorItem.value)
+}
 watch(topicDialog, (val) => {
   if (val) {
-    renderHotChart();
+    renderHotChart()
   } else {
     if (hotChartInstance) {
-      hotChartInstance.dispose();
-      hotChartInstance = null;
+      hotChartInstance.dispose()
+      hotChartInstance = null
     }
   }
-});
+})
 </script>
 
 <style scoped lang="less">