人物互动隐关系页面二级时间切片

src/service/api/linkPrediction.js

@@ -11,7 +11,7 @@ export function getInteractionCommunityNodes() {
 }
 
 //人物互动隐关系预测的社团内部节点
-export function getInteractionCommunityDetailNodes(ids, time = "2024.05.16 16:56:04") {
+export function getInteractionCommunityDetailNodes(ids, time = "2024-05-16 16:56:04") {
   return http.get(`linkPrediction/interaction/community_detail?groupIds=${ids}&dateTime=${time}`)
 }
 
@@ -44,7 +44,6 @@ export function getSocialPostList(outoIncrement) {
 }
 // 社交紧密团体的对应紧密关系的帖文--根据relationId来查找
 export function getSocialPostListByRelationId(relationId) {
-
   return http.get(`/linkPrediction/user_posts_list?relationId=${relationId}`)
 }
 // 社交紧密团体识别的社团统计

src/store/llinkPrediction/index.js

@@ -20,18 +20,17 @@ import nodePrefix from "@/assets/images/linkPrediction/icon/node-count-prefix.pn
 import communityPrefix from "@/assets/images/linkPrediction/icon/community-count-prefix.png"
 import hiddenPrefix from "@/assets/images/linkPrediction/icon/hidden-count-prefix.png"
 import tightCommunityPrefix from "@/assets/images/linkPrediction/icon/tightCommunityPrefix.png"
-import { init } from "echarts"
 
 export const useCharacterInteractionStore = defineStore("characterInteraction", {
   state: () => ({
     userList: [], //用户组列表
     userChartList: [], //组相关性
-    posts: [],
-    communityNodeList: [],
+    posts: [], //贴文列表
+    communityNodeList: [], //所有社团数据
     curComponent: "CommunityNode",
     curSelecedGroupIds: [],
-    communityDetailNodeList: [],
-    curSelectedGroup: [],
+    communityDetailNodeList: [], //点击一级界面后，通过组id查询到的组
+    curSelectedGroup: [], //从用户组列表选择任意一个item
     anlysisList: [
       {
         id: 1,
@@ -174,7 +173,7 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
       if (res.code != 200) return
       this.communityNodeList = res.data
     },
-    async initGraphCommunityDetailNode(ids, time = "2024.05.16 16:56:04") {
+    async initGraphCommunityDetailNode(ids, time = "2024-05-16 16:56:04") {
       this.curSelecedGroupIds = ids
       const res = await getInteractionCommunityDetailNodes(ids, time)
       if (res.code != 200) return
@@ -441,10 +440,9 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
         ...item,
         count: res.data.communityStatistics[item.key]
       }))
-      console.log("打印社交团体详情：");
-      console.log(res.data);
+      console.log("打印社交团体详情：")
+      console.log(res.data)
       this.communityDetailNodeList = res.data.userRelation
-
     }
   },
   persist: true // 开启持久化

src/views/LinkPrediction/characterInteraction/index.vue

@@ -52,6 +52,7 @@ const interactionStore = useCharacterInteractionStore()
 //选择某个用户组，更新贴文列表 && 更新关系图二级界面
 const handleSelectedUserGroup = (group) => {
   interactionStore.curComponent = "detailNode"
+  interactionStore.curSelectedGroup = group //保存从用户列表选择的用户组，为了显示这两个用户交互的时间切片
   interactionStore.initInteractionPostList(group.relationId)
   interactionStore.initGraphCommunityDetailNode(group.list.map((item) => item.groupId))
 }

src/views/LinkPrediction/components/detailNode.vue

@@ -16,6 +16,12 @@
     <div class="time-axis">
       <div class="time">{{ TansTimestamp(startTime, "YYYY.MM.DD HH:mm:ss") }}</div>
       <div class="axis" ref="axisRef" @pointerdown="handlePointerDown">
+        <div
+          class="time-section"
+          v-for="time in curSelectedGroup.timeList"
+          :key="time"
+          :style="{ left: getTimeSectionLeft(time) + 'px' }"
+        ></div>
         <div class="progress-bar" :style="trackStyle"></div>
         <div class="active-sign" :style="{ left: `${currentPosition}px` }">
           <div class="active-needle"></div>
@@ -30,9 +36,6 @@
       </div>
       <div class="time">{{ TansTimestamp(endTime, "YYYY.MM.DD HH:mm:ss") }}</div>
     </div>
-    <div class="current-time-display">
-      <span>当前时间: {{ TansTimestamp(currentTime, "YYYY.MM.DD HH:mm:ss") }}</span>
-    </div>
   </div>
 </template>
 
@@ -44,7 +47,7 @@ import * as echarts from "echarts"
 import { storeToRefs } from "pinia"
 import { useCharacterInteractionStore } from "@/store/llinkPrediction/index"
 const interactionStore = useCharacterInteractionStore()
-const { communityDetailNodeList } = storeToRefs(interactionStore)
+const { communityDetailNodeList, curSelectedGroup } = storeToRefs(interactionStore)
 const emit = defineEmits(["click:goback"])
 const handleGoback = () => {
   emit("click:goback", "CommunityNode")
@@ -53,7 +56,7 @@ const handleGoback = () => {
 //当点击时间轴的时候，communityDetailNodeList改变，重新更新关系图
 watch(
   communityDetailNodeList,
-  (newValue) => {
+  () => {
     initChart()
   },
   { deep: true }
@@ -73,6 +76,14 @@ const startTimeMs = startTime.value.getTime()
 const endTimeMs = endTime.value.getTime()
 const totalDuration = endTimeMs - startTimeMs
 
+//点击用户组列表后，显示这两个用户的交互时间切片，获得每一个时间距离时间轴初始位置的距离
+const getTimeSectionLeft = computed(() => {
+  return (time) => {
+    const total = endTime.value.getTime() - startTime.value.getTime()
+    const offset = new Date(time).getTime() - startTime.value.getTime()
+    return Math.max(0, Math.min(426, (offset / total) * 426))
+  }
+})
 // 根据位置计算时间
 const getTimeFromPosition = (position) => {
   const ratio = Math.max(0, Math.min(1, position / axisWidth))
@@ -275,7 +286,7 @@ const initChart = async () => {
       show: false,
       position: "middle",
       formatter: function (params) {
-        return params.data.interactionTimes
+        return `${params.data.interactionTimes}次互动`
       },
       fontSize: 14
     },
@@ -447,6 +458,15 @@ onMounted(() => {
       cursor: pointer;
       transform: translateZ(0); // 启用硬件加速
       position: relative;
+      .time-section {
+        position: absolute;
+        top: -8px;
+        width: 4px;
+        height: 22px;
+        background: #ffe066;
+        border-radius: 3px;
+        z-index: 3;
+      }
       .progress-bar {
         position: absolute;
         top: 0;
@@ -501,21 +521,6 @@ onMounted(() => {
         }
       }
     }
-    .current-time-display {
-      position: absolute;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(0, 67, 125, 0.8);
-      border: 1px solid #3aa1f8;
-      border-radius: 4px;
-      padding: 8px 16px;
-      color: #fff;
-      font-family: "PingFang SC";
-      font-size: 14px;
-      font-weight: 400;
-      backdrop-filter: blur(3px);
-    }
   }
 }
 </style>

src/views/LinkPrediction/components/userPanel.vue

@@ -9,10 +9,7 @@
           :class="{ active: curUserGroupIndex == index }"
         >
           <div class="group-type">
-            <img
-              src="@/assets/images/linkPrediction/title/group-item-title.png"
-              class="group-type-back"
-            />
+            <img src="@/assets/images/linkPrediction/icon/top-icon.png" class="group-type-back" />
             <div class="group-type-content">TOP{{ group.rank }}</div>
           </div>
           <div class="user-list-item" v-for="child in group.list" :key="child.id">
@@ -89,10 +86,14 @@ const handleUserItem = (index, group = {}) => {
           top: 10px;
           .group-type-content {
             position: absolute;
-            top: 0;
-            left: 10px;
-            font-size: 14px;
+            top: 2px;
+            left: 12px;
+            color: #8efbff;
+            text-shadow: 0 0.552px 1.105px rgba(0, 0, 0, 0.25);
             font-family: "PingFang SC";
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
           }
         }
         &:hover {