Merge branch 'master' of http://172.16.20.1:3000/duanhao/SocialNetworks_duan

src/service/api/linkPrediction.js

@@ -68,11 +68,22 @@ export function getSocialCommunityList() {
   return http.get(`/linkPrediction/triangle/community`)
 }
 
-// 社交紧密团体中社团内的
+// 社交紧密团体中社团内的社团内部节点 从用户组中点击，只显示这两个用户的关系
-
+export function getSocialCommunityDetailFromUserGroup(
+  relationId,
+  time = "2024-05-16 16:56:04"
+) {
+  return http.get(`/linkPrediction/user_detail?relationId=${relationId}&time=${time}`)
+}
 // 社交紧密团体的社团内部节点
-export function getSocialCommunityDetailNodes(ids, time = "2024-05-16 16:56:04") {
+export function getSocialCommunityDetailNodes(ids, relationId, time = "2024-05-16 16:56:04") {
-  return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}`)
+  if (relationId != -1) {
+    return http.get(
+      `/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}&relationId=${relationId}`
+    )
+  } else {
+    return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}`)
+  }
 }
 
 //获取人物社交隐关系预测社团节点

src/store/llinkPrediction/index.js

@@ -221,11 +221,17 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
     curComponent: "CommunityNode",
     curSelecedGroupIds: [],
     communityDetailNodeList: [],
+    // 社交紧密团体的所有用户
+    communityAllNodeList: [],
     timeList: [],
     // 当前需要高亮的用户id
     curHighlightUserIdList: [],
+    // 当前的relationId
+    curRelationId: "",
     // 记录点击边的时序列表
     clickEdgeTimeList: [],
+    // 记录是从边点的还是列表项中的点击
+    clickEvent: "list", // list 表示从列表项点的， edge 表示从边点的
     statisticsList: [
       { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" },
       { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" },
@@ -451,15 +457,29 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
       }))
     },
     // 传递社交团体的数组，获取其详情
-    async initGraphCommunityDetailNode(ids, time = "2024-05-16 16:56:04") {
+    async initGraphCommunityDetailNode(ids, time = "2024-05-16 16:56:04", relationId = -1) {
       this.curSelecedGroupIds = ids
-      const res = await getSocialCommunityDetailNodes(ids, time)
+      const res = await getSocialCommunityDetailNodes(ids, relationId, time)
       if (res.code != 200) return
+      console.log("index.js:",res.data)
+      const customStatisticsObj = Object.assign({}, res.data.communityStatistics)
+      //计算两个用户是否同属与同一个社团
+      if (
+        customStatisticsObj.groupCount == null &&
+        customStatisticsObj.hiddenInteractionCount == null
+      ) {
+        customStatisticsObj.hiddenInteractionCount = 1
+        customStatisticsObj.groupCount = ids[0] === ids[1] ? 1 : 3
+      }
+
       this.statisticsDetailList = this.statisticsDetailList.map((item) => ({
         ...item,
-        count: res.data.communityStatistics[item.key]
+        count: customStatisticsObj[item.key]
       }))
+      // 设置社交紧密团体的所有用户id
+      this.communityAllNodeList = res.data.userList
       this.communityDetailNodeList = res.data.userRelation
+      this.curHighlightUserIdList = res.data.predictNodes
     },
 
     // 修改timeList
@@ -468,10 +488,10 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
     },
     // 点击边，先获取需要的timeList
     async getClickEdgeTimeList(ids, time = "2024-05-16 16:56:04") {
-      const res = await getSocialCommunityDetailNodes(ids, time)
+      const relationId = -1
+      const res = await getSocialCommunityDetailNodes(ids, relationId, time)
       if (res.code != 200) return
       console.log("3.获取边中的timelist并设置成它")
-      this.curHighlightUserIdList = res.data.predictNodes
       this.setTimeList(res.data.timeList)
     }
   },

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

@@ -26,10 +26,10 @@
         >
           <div
             class="time-sign"
-            :class="{ active: isTimeSignActive(time.timeStr) }"
             :style="{ left: `${time.position}px` }"
             @click="handleTimePointClick(time.timeStr)"
-          ></div>
+          >
+          </div>
         </el-tooltip>
         <div class="active-sign" :style="{ left: `${currentPosition}px` }">
           <div class="active-needle"></div>
@@ -61,6 +61,9 @@ const socialGroupsStore = useSocialGroupsStore()
 const { communityDetailNodeList } = storeToRefs(socialGroupsStore)
 const { timeList } = storeToRefs(socialGroupsStore)
 const { curHighlightUserIdList } = storeToRefs(socialGroupsStore)
+// 用于监听是从 列表 点进来的还是从 边 点进来的
+const { clickEvent } = storeToRefs(socialGroupsStore)
+
 const chartsData = ref({})
 
 const emit = defineEmits(["click:goback"])
@@ -82,11 +85,14 @@ watch(
   (newHiglightUserIdList) => {
     if(newHiglightUserIdList.length!=0) {
       nextTick(()=> {
-        console.log(newHiglightUserIdList)
         highLightUserNodes(newHiglightUserIdList)
       })
     }
-  }
+  },
+  { 
+    deep: true,
+    immediate: true
+   }
 )
 
 // 时间轴相关数据
@@ -135,9 +141,9 @@ watch(timePointsWithPositions, (newTimePoints) => {
 }, { immediate: true })
 
 // 判断当前时间点是否激活
-const isTimeSignActive = (timeStr) => {
+/* const isTimeSignActive = (timeStr) => {
   return new Date(timeStr).getTime() === currentTime.value.getTime()
-}
+} */
 
 // 添加时间点点击事件处理函数
 const handleTimePointClick = (timeStr) => {
@@ -170,7 +176,11 @@ const handlePointerDown = (e) => {
 
   // 点击后输出当前时间
   const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
-  socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes)
+  if(socialGroupsStore.curRelationId === "") {
+    socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes)
+  } else {
+    socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes, socialGroupsStore.curRelationId)
+  }
 }
 
 // 时间点指针按下事件
@@ -195,7 +205,11 @@ const handlePointPointerDown = (e) => {
     isDragging.value = false
     // 拖动结束时输出当前时间
     const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
-    socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes)
+    if(socialGroupsStore.curRelationId === "") {
+      socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes)
+    } else {
+      socialGroupsStore.initGraphCommunityDetailNode(socialGroupsStore.curSelecedGroupIds, currentTimes, socialGroupsStore.curRelationId)
+    }
 
     document.removeEventListener("pointermove", handlePointerMove)
     document.removeEventListener("pointerup", handlePointerUp)
@@ -234,30 +248,36 @@ const initChart = async () => {
     else return 1
   }
   if (!Object.keys(socialGroupsStore.communityDetailNodeList).length) return
-  Object.entries(socialGroupsStore.communityDetailNodeList).forEach(([parentId, children]) => {
+  // 先获取到所有节点
+  socialGroupsStore.communityAllNodeList.forEach((item) => {
     nodes.push({
-      id: `parent_${parentId}`,
+      id: item.userId,
-      name: parentId
+      name: item.userName,
+      symbolSize: 40,
+      postNum: item.postNum,
+      fancy: item.fans
     })
+  })
+  Object.entries(socialGroupsStore.communityDetailNodeList).forEach(([parentId, children]) => {
     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,
         lineStyle: {
           width: child.isHidden ? 4 : edgeWidth(child.interactionTime),
-          color: child.isHidden ? "#37ACD7" : "#37ACD7", // 无互动=灰色，有互动=黄色
+          color: child.isHidden ? "#FF5E00" : "#37ACD7", // 无互动=灰色，有互动=黄色
           type: child.isHidden ? "dashed" : "solid" // 无互动=实线，有互动=虚线
         }
       })
+      
+      
     })
   })
 
-  if(curHighlightUserIdList.value && curHighlightUserIdList.value.length >= 2) {
+  // 强行加边
+  /* if(curHighlightUserIdList.value && curHighlightUserIdList.value.length >= 2) {
     // 获取timeList的最后一个时间
     const lastTimeStr = Array.isArray(timeList.value) && timeList.value.length > 0 
       ? timeList.value[timeList.value.length - 1] 
@@ -296,7 +316,7 @@ const initChart = async () => {
         }
       }
     }
-  }
+  } */
 
   chartsData.value = { links, nodes }
   const data = { links, nodes }
@@ -385,7 +405,8 @@ const initChart = async () => {
                     flex-direction: column;
                     ">
                 <div style="color:#fff;letter-spacing: 0.14px;">
-                    <div >用户ID：${params.data.id}</div>
+                    <div >用户名：${params.data.id}</div>
+                    <div >用户名：${params.data.name}</div>
               </div>
             </div>`
         }
@@ -396,7 +417,7 @@ const initChart = async () => {
       show: false,
       position: "middle",
       formatter: function (params) {
-        return params.data.interactionTimes
+        return `${params.data.interactionTimes}次互动`
       },
       fontSize: 14
     },
@@ -477,7 +498,9 @@ const highLightUserNodes = (newHiglightUserIdList) => {
   setTimeout(() => {
     //等待所有节点添加完毕后再查找
     newHiglightUserIdList.forEach((id) => {
-      const index = chartsData.value.nodes.findIndex((node) => node.id === `parent_${id}`)
+      const index = chartsData.value.nodes.findIndex((node) => node.id === id)
+      console.log(index);
+      
       if (index != -1) {
         chart.dispatchAction({
           type: "highlight",
@@ -619,10 +642,7 @@ onMounted(() => {
           height: 30px;
           background: transparent;
         }
-        &.active {
+        
-          opacity: 0;
-          pointer-events: none;
-        }
       }
       .active-sign {
         position: relative;

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

@@ -31,16 +31,19 @@ const handleClickNode = async (nodeInfo) => {
   // 点击节点
   socialGroupsStore.initGraphCommunityDetailNode([nodeInfo.id])
   socialGroupsStore.curComponent = "detailNode"
+  socialGroupsStore.curRelationId = ""
 }
 
 const handleClickEdge = async (edgeInfo) => {
   console.log("点击边");
   socialGroupsStore.curComponent = "detailNode"
+  socialGroupsStore.clickEvent = "edge"
+  socialGroupsStore.curRelationId = ""
   // 先设置socialGroupsStore.clickEdgeTimeList
-  console.log("1.初始化获取边中的详情节点-initGraphCommunityDetailNode");
-  await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target])
-  console.log("2.获取边中的timelist并设置");
   await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target])
+  const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1]
+  await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
+  
 }
 
 const handleClickGoBack = (currentComponentName) => {

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

@@ -59,7 +59,7 @@ const props = defineProps({
     default: 480
   }
 });
-
+// ssss
 const handleUserItem = (index, group = {}) => {
   curUserGroupIndex.value = index;
   // 设置需要高亮的用户id

src/views/LinkPrediction/socialGroups/index.vue

@@ -81,12 +81,16 @@ const postDialog = ref(false);
 //当前选中的贴文数据
 const currentPostPost = ref(null);
 
+// 列表项的点击事件
 const handleSelectedUserGroup = (group) => {
   socialGroupsStore.curComponent = "detailkNode"
+  socialGroupsStore.clickEvent = "list"
+  console.log("点击列表group：",group)
   const groupIds = group.list.map((item)=>item.groupId)
+  socialGroupsStore.curRelationId = group.relationId //保存当前点击的relationid，为了区分到底是从哪点进二级界面的
   const length = group.timeList.length
   const lastTime = group.timeList[length - 1]
-  socialGroupsStore.initGraphCommunityDetailNode(groupIds, lastTime)
+  socialGroupsStore.initGraphCommunityDetailNode(groupIds, lastTime, group.relationId)
   socialGroupsStore.setTimeList(group.timeList)
   socialGroupsStore.getSocialGroupPostListByRelationId(group.relationId)
 };