人物互动隐关系页面点击用户组高亮效果

src/views/LinkPrediction/characterInteraction/index.vue

@@ -36,8 +36,7 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue"
+import { onMounted, ref, provide } from "vue"
-import { provide } from "vue"
 import { useCharacterInteractionStore } from "@/store/llinkPrediction/index"
 import UserPanel from "../components/userPanel.vue"
 import PostList from "../components/postList.vue"
@@ -49,10 +48,13 @@ import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png
 import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
 const interactionStore = useCharacterInteractionStore()
 
+//临时保存选中用户组的用户id 为了图的高亮
+const userIds = ref([])
 //选择某个用户组，更新贴文列表 && 更新关系图二级界面
 const handleSelectedUserGroup = (group) => {
   interactionStore.curComponent = "detailNode"
   interactionStore.curSelectedGroup = group //保存从用户列表选择的用户组，为了显示这两个用户交互的时间切片
+  userIds.value = group.list.map((user) => user.userId) //保存选中的用户组的所有用户id，为了高亮二级关系图的用户
   interactionStore.initInteractionPostList(group.relationId)
   interactionStore.initGraphCommunityDetailNode(group.list.map((item) => item.groupId))
 }
@@ -65,6 +67,7 @@ onMounted(() => {
 })
 provide("communityNodeList", interactionStore.communityNodeList) // 提供数据
 provide("statisticsList", interactionStore.statisticsList)
+provide("userIds", userIds) //传递选中的用户组里的用户ids到二级关系图
 </script>
 
 <style scoped lang="less">

src/views/LinkPrediction/components/detailNode.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script setup>
-import { defineEmits, onMounted, ref, onUnmounted, computed, watch } from "vue"
+import { defineEmits, onMounted, ref, onUnmounted, computed, watch, inject, nextTick } from "vue"
 import { TansTimestamp } from "@/utils/transform"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
 import * as echarts from "echarts"
@@ -49,6 +49,8 @@ import { useCharacterInteractionStore } from "@/store/llinkPrediction/index"
 const interactionStore = useCharacterInteractionStore()
 const { communityDetailNodeList, curSelectedGroup } = storeToRefs(interactionStore)
 const emit = defineEmits(["click:goback"])
+const userIds = inject("userIds", [])
+const chartsData = ref({})
 const handleGoback = () => {
   emit("click:goback", "CommunityNode")
 }
@@ -62,6 +64,18 @@ watch(
   { deep: true }
 )
 
+//监听userids的变化
+watch(
+  userIds,
+  (newIds) => {
+    if (newIds.length != 0) {
+      nextTick(() => {
+        highLightUserNodes(newIds)
+      })
+    }
+  },
+  { immediate: true }
+)
 // 时间轴相关数据
 const startTime = ref(new Date("2024-05-16 16:56:04"))
 const endTime = ref(new Date("2024-05-23 10:16:56"))
@@ -168,16 +182,18 @@ const initChart = async () => {
   }
   if (!Object.keys(interactionStore.communityDetailNodeList).length) return
   Object.entries(interactionStore.communityDetailNodeList).forEach(([parentId, children]) => {
-    nodes.push({
+    if (!nodes.some((n) => n.id === parentId)) {
-      id: `parent_${parentId}`,
+      nodes.push({
-      name: parentId
+        id: parentId,
-    })
+        name: parentId
+      })
+    }
     children.forEach((child) => {
       if (!nodes.some((n) => n.id === child.id)) {
         nodes.push(child)
       }
       links.push({
-        source: `parent_${parentId}`,
+        source: parentId,
         target: child.id,
         edge: child.isHidden ? 1 : 0,
         interactionTimes: child.interactionTime,
@@ -189,7 +205,7 @@ const initChart = async () => {
       })
     })
   })
-  const data = { links, nodes }
+  chartsData.value = { links, nodes }
 
   const categories = [
     { name: "事件活跃者", category: 0, icon: "circle" },
@@ -319,7 +335,7 @@ const initChart = async () => {
         },
 
         animationDurationUpdate: 3500, // 节点移动更平滑
-        data: data.nodes.map((node) => ({
+        data: chartsData.value.nodes.map((node) => ({
           ...node,
           symbolSize: 40,
           itemStyle: {
@@ -341,12 +357,12 @@ const initChart = async () => {
               shadowBlur: 20,
               shadowColor: "#c4a651",
               borderColor: "#fcd267",
-              borderWidth: 1,
+              borderWidth: 5,
               borderType: "solid"
             }
           }
         })),
-        links: data.links,
+        links: chartsData.value.links,
         lineStyle: {
           color: "#37ACD7",
           width: 1
@@ -357,14 +373,30 @@ const initChart = async () => {
   chart.setOption(option)
 }
 
+const highLightUserNodes = (userIds) => {
+  if (!userIds) return
+  chart.dispatchAction({
+    type: "downplay",
+    seriesIndex: 0
+  })
+
+  setTimeout(() => {
+    //等待所有节点添加完毕后再查找
+    userIds.forEach((id) => {
+      const index = chartsData.value.nodes.findIndex((node) => node.id === id)
+      if (index != -1) {
+        chart.dispatchAction({
+          type: "highlight",
+          dataIndex: index
+        })
+      }
+    })
+  }, 1000)
+}
+
 onMounted(() => {
   initChart()
-  chart.on("legendselectchanged", function (params) {
+  highLightUserNodes()
-    // 解决变形问题
-    setTimeout(() => {
-      chart.resize()
-    }, 0)
-  })
 })
 </script>