社团样式节点更改

src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue

@@ -10,6 +10,8 @@ import * as echarts from "echarts"
 import anchor from "@/assets/json/anchor_community.json"
 import community from "@/assets/json/community_nodes.json"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
+import predictionNodeImg from "@/assets/images/linkPrediction/icon/prediction-node.png"
+import normalGroupNodeImg from "@/assets/images/linkPrediction/icon/normal-group-node.png"
 import { storeToRefs } from "pinia"
 import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index"
 import csvUrl from "@/assets/json/community_edges1.csv?url"
@@ -86,7 +88,8 @@ const initChart = async () => {
     ([communityId, anchorList]) => ({
       name: parseInt(communityId), // 社团id
       anchorCount: anchorList.length, // 该社团包含锚点的个数
-      anchorList: anchorList // 该社团包含的锚点id数组
+      anchorList: anchorList, // 该社团包含的锚点id数组
+      symbol: `image://${new URL(predictionNodeImg, import.meta.url)}`
     })
   )
 
@@ -96,7 +99,8 @@ const initChart = async () => {
   //筛选出不包含锚点的社团（不闪烁的蓝色节点）
   const uncontainedAnchorCommunity = Object.keys(community)
     .filter((node) => !includedCommunityId.includes(node))
-    .map((node) => ({ name: parseInt(node), anchorCount: 0 }))
+    .map((node) => ({ name: parseInt(node), anchorCount: 0, symbol: `image://${new URL(normalGroupNodeImg, import.meta.url)}` }))
+
 
   //合并成功后，统一设置id，避免重复id出现导致echarts渲染失败,并且取出每个社团中有多少个节点
   const nodes = includeAnchorCommunity.concat(uncontainedAnchorCommunity).map((node, index) => ({
@@ -129,8 +133,8 @@ const initChart = async () => {
   const data = { nodes, links }
 
   const categories = [
-    { name: "普通社团", category: 0 },
-    { name: "含锚点社团", category: 1 }
+    { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}` },
+    { name: "含锚点社团", category: 1, icon: `image://${new URL(predictionNodeImg, import.meta.url)}` }
   ]
   //   // 初始选项
   const option = {
@@ -139,7 +143,7 @@ const initChart = async () => {
       {
         data: categories.map((c) => ({
           name: c.name,
-          itemStyle: {
+          /* itemStyle: {
             color:
               c.category === 0
                 ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [
@@ -152,7 +156,8 @@ const initChart = async () => {
                     { offset: 0.37, color: "#aef295" },
                     { offset: 1, color: "#c2f989" }
                   ])
-          }
+          }, */
+          icon: c.icon,
         })),
         right: 15,
         bottom: 13,
@@ -245,7 +250,7 @@ const initChart = async () => {
         animationDurationUpdate: 3500, // 节点移动更平滑
         data: data.nodes.map((node) => ({
           ...node,
-          symbolSize: node.total / 20 < 30 ? 30 : node.total / 20,
+          symbolSize: node.total / 20 < 30 ? 50 : (node.total / 20) + 20,
           itemStyle: {
             color:
               node.anchorCount === 0

src/views/KeyNodeDiscern/bridgeCommunication/components/graph/bridgeCommunityGraph.vue

@@ -9,6 +9,8 @@ import bridgeData from '@/assets/json/bridge_neighbors_communities.json';
 import bridgeNodeHoverBgImg from '@/assets/images/bridge_node_hoverbgimg.png'
 import { useKeyNodeStore2 } from '@/store/keyNodeStore2'; // 引入store
 import { cropToCircleAsync } from "@/utils/transform"; // 引入头像处理
+import normalGroupNodeImg from '@/assets/images/linkPrediction/icon/normal-group-node.png'
+
 
 // 接收父组件传递的timestamp
 const props = defineProps({
@@ -34,7 +36,7 @@ const processData = async() => {
   const nodes = [];
   const links = [];
   const addedCommunities = new Set();
-  // 新增：存储已处理的桥梁节点ID
+  // 存储已处理的桥梁节点ID
   const addedBridgeNodes = new Set();
   // 获取store实例
   const keyNodeStore2 = useKeyNodeStore2();
@@ -114,6 +116,7 @@ const processData = async() => {
         nodes.push({
           id: communityKey,
           category: 1,
+          symbol: `image://${new URL(normalGroupNodeImg, import.meta.url)}`,
           symbolSize: size
         });
         addedCommunities.add(communityKey);
@@ -333,7 +336,7 @@ const initChart = async() => {
           // 添加自定义图标
           icon: c.category === 0
             ? `image://${new URL('@/assets/images/icon/bridge_node_legend.png', import.meta.url)}`
-            : `image://${new URL('@/assets/images/icon/community_node_legend.png', import.meta.url)}`
+            : `image://${new URL(normalGroupNodeImg, import.meta.url)}`
         })),
         right: 15,
         bottom: 13,

src/views/LinkPrediction/characterInteraction/index.vue

@@ -17,6 +17,7 @@
           <Graph
             :title="graphTitleImg"
             :interactionStore="interactionStore"
+            :storeId="storeId"
             @click:openUserInfoDialog="handleOpenUserInfoDialog"
           ></Graph>
         </div>
@@ -137,6 +138,8 @@ const interactionStore = useCharacterInteractionStore()
 const userInfoDialog = ref(false)
 const curSelectedUser = ref(null)
 
+const storeId = "characterInteraction"
+
 //选择某个用户组，更新贴文列表 && 更新关系图二级界面
 const handleSelectedUserGroup = (group) => {
   interactionStore.curComponent = "detailNode"

src/views/LinkPrediction/charactersHiddenInteraction/index.vue

@@ -16,6 +16,7 @@
         <div class="graph">
           <Graph
             :title="graphTitleImg"
+            :storeId = "storeId"
             :interactionStore="characterHiddenStore"
             @click:openUserInfoDialog="handleOpenUserInfoDialog"
           ></Graph>
@@ -135,6 +136,9 @@ const characterHiddenStore = useCharacterHiddenStore()
 const userInfoDialog = ref(false)
 const curSelectedUser = ref(null)
 
+const storeId = "characterHidden"
+
+
 const handleOpenUserInfoDialog = (params) => {
   userInfoDialog.value = params.userInfoDialog
   curSelectedUser.value = params.curSelectedUser

src/views/LinkPrediction/components/communityNode.vue

@@ -15,6 +15,10 @@
 import { onMounted, defineEmits, inject, defineProps } from "vue"
 import * as echarts from "echarts"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
+import predictionNodeImg from "@/assets/images/linkPrediction/icon/prediction-node.png"
+import charHiddenNodeImg from "@/assets/images/linkPrediction/icon/character-hidden-node.png"
+import charInteractionHiddenNodeImg from "@/assets/images/linkPrediction/icon/character-Interaction-hidden-node.png"
+import normalGroupNodeImg from "@/assets/images/linkPrediction/icon/normal-group-node.png"
 let chart = null
 const emit = defineEmits(["click:node", "click:edge"])
 const statisticsList = inject("statisticsList")
@@ -22,11 +26,39 @@ const props = defineProps({
   interactionStore: {
     type: Object,
     required: true
+  },
+  storeId: {
+    type: String,
+    default: ""
   }
 })
+console.log(props.storeId)
 const initChart = () => {
   chart = echarts.init(document.getElementById("container"))
 
+  const imageSelect = (node) => {
+    if (props.storeId == "characterInteraction") {
+      if (node.isIncludePredictNodes) {
+        if (node.selfIncludeImplicitRelationship) {
+          return `image://${new URL(predictionNodeImg, import.meta.url)}`
+        } else {
+          return `image://${new URL(charInteractionHiddenNodeImg, import.meta.url)}`
+        }
+      } else {
+        return `image://${new URL(normalGroupNodeImg, import.meta.url)}`
+      }
+    } else if (props.storeId == "characterHidden") {
+      if (node.isIncludePredictNodes) {
+        if (node.selfIncludeImplicitRelationship) {
+          return `image://${new URL(predictionNodeImg, import.meta.url)}`
+        } else {
+          return `image://${new URL(charHiddenNodeImg, import.meta.url)}`
+        }
+      } else {
+        return `image://${new URL(normalGroupNodeImg, import.meta.url)}`
+      }
+    }
+  }
   //处理社团节点
   const nodes = Object.values(inject("communityNodeList") ?? []).map((item) => ({
     id: item.id,
@@ -35,7 +67,8 @@ const initChart = () => {
     nodesNum: item.nodesNum,
     neighbors: item.neighbors,
     category: item.isIncludePredictNodes ? 1 : 0,
-
+    symbol: imageSelect(item),
+    symbolSize: 30,
     selfIncludeImplicitRelationship:
       item.neighbors.map((nei) => nei.id).includes(item.id) && //若该社团的id在该社团邻居中可以找到，说明自己这个社团中有互动隐关系
       item.neighbors.find((nei) => nei.id == item.id).isHidden
@@ -65,8 +98,8 @@ const initChart = () => {
   const data = { nodes, links }
 
   const categories = [
-    { name: "普通社团", category: 0, icon: "circle" },
-    { name: "含预测节点社团", category: 1, icon: "circle" },
+    { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}` },
+    { name: "含预测节点社团", category: 1, icon:  `image://${new URL(predictionNodeImg, import.meta.url)}` },
     {
       name: props.interactionStore.predictionLegendContent,
       category: 2,
@@ -184,7 +217,7 @@ const initChart = () => {
         animationDurationUpdate: 3500, // 节点移动更平滑
         data: data.nodes.map((node) => ({
           ...node,
-          symbolSize: node.nodesNum / 40 < 30 ? 40 : node.nodesNum / 40,
+          symbolSize: node.nodesNum / 10 < 30 ? 50 : 70,
           itemStyle: {
             color:
               node.isIncludePredictNodes === false

src/views/LinkPrediction/components/graph.vue

@@ -7,6 +7,7 @@
       @click:node="handleClickNode"
       @click:edge="handleClickEdge"
       :interaction-store="interactionStore"
+      :storeId="storeId"
     ></CommunityNode>
     <DetailNode
       v-else
@@ -29,6 +30,10 @@ const props = defineProps({
   interactionStore: {
     type: Object,
     required: true
+  },
+  storeId: {
+    type: String,
+    default: ""
   }
 })
 const emit = defineEmits(["click:openUserInfoDialog"])

src/views/LinkPrediction/socialGroups/components/communityNode.vue

@@ -15,6 +15,10 @@
 import { onMounted, onUnmounted, defineEmits, inject } from "vue" // 添加onUnmounted
 import * as echarts from "echarts"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
+import predictionNodeImg from "@/assets/images/linkPrediction/icon/prediction-node.png"
+import hiddenNodeImg from "@/assets/images/linkPrediction/icon/hidden-node.png"
+import normalGroupNodeImg from "@/assets/images/linkPrediction/icon/normal-group-node.png"
+
 
 let chart = null
 let linkList = null
@@ -26,10 +30,24 @@ const communityNodeList = inject("communityNodeList");
 const initChart = async () => {
   chart = echarts.init(document.getElementById("container"))
 
+  const imageSelect = (node) => {
+    if (node.isIncludePredictNodes) {
+      if (node.selfIncludeImplicitRelationship) {
+        return `image://${new URL(predictionNodeImg, import.meta.url)}`
+      } else {
+        return `image://${new URL(hiddenNodeImg, import.meta.url)}`
+      }
+    } else {
+      return `image://${new URL(normalGroupNodeImg, import.meta.url)}`
+    }
+  }
+
   //处理社团节点
   const nodes = Object.values(communityNodeList).map((item) => ({
     id: (item.id),
     name: (item.id),
+    symbol:  imageSelect(item),
+    symbolSize: 30,
     isIncludePredictNodes: item.isIncludePredictNodes,
     nodesNum: item.nodesNum,
     neighbors: item.neighbors.map((nei) => ({ ...nei, name: parseInt(nei.id) })),
@@ -65,8 +83,8 @@ const initChart = async () => {
   const data = { nodes, links }
 
   const categories = [
-    { name: "普通社团", category: 0, icon: `image://${new URL('@/assets/images/linkPrediction/icon/node-legend-icon.png', import.meta.url)}`},
-    { name: "含预测节点社团", category: 1, icon:  `image://${new URL('@/assets/images/linkPrediction/icon/community-legend-icon.png', import.meta.url)}`},
+    { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}`},
+    { name: "含预测节点社团", category: 1, icon:  `image://${new URL(predictionNodeImg, import.meta.url)}`},
     { name: "紧密团体关系", category: 2, icon:  `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}`}
   ]
   const option = {
@@ -75,26 +93,6 @@ const initChart = async () => {
       {
         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" }
-                    ])
-          },
           icon: c.icon
         })),
         right: 15,
@@ -185,7 +183,7 @@ const initChart = async () => {
         animationDurationUpdate: 3500, // 节点移动更平滑
         data: data.nodes.map((node) => ({
           ...node,
-          symbolSize: node.nodesNum / 40 < 30 ? 40 : node.nodesNum / 40,
+          symbolSize: node.nodesNum / 10 < 30 ? 50 : 70,
           itemStyle: {
             color:
               node.isIncludePredictNodes === false