From c7709f42072d29673144c7b3ea2368e67517a2ee Mon Sep 17 00:00:00 2001
From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com>
Date: Tue, 29 Jul 2025 12:13:19 +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=A1=B5=E9=9D=A2=E4=BA=8C=E7=BA=A7=E5=85=B3?=
 =?UTF-8?q?=E7=B3=BB=E5=9B=BE=E6=97=B6=E9=97=B4=E8=BD=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   9 +
 package.json                                  |   2 +
 src/assets/vue.svg                            |   1 -
 src/service/api/linkPrediction.js             |   4 +-
 src/store/llinkPrediction/index.js            |  21 +-
 .../characterInteraction/index.vue            |   1 +
 .../LinkPrediction/components/detailNode.vue  | 233 ++++++++++++++++--
 src/views/LinkPrediction/components/graph.vue |  30 +--
 8 files changed, 247 insertions(+), 54 deletions(-)
 delete mode 100644 src/assets/vue.svg

diff --git a/package-lock.json b/package-lock.json
index 973f3a2..3f8f0de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
         "dayjs": "^1.11.13",
         "echarts": "^5.6.0",
         "element-plus": "^2.10.1",
+        "loadsh": "^0.0.4",
+        "lodash-es": "^4.17.21",
         "pinia": "^3.0.3",
         "pinia-plugin-persistedstate": "^4.3.0",
         "vue": "^3.5.13",
@@ -3131,6 +3133,13 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/loadsh": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/loadsh/-/loadsh-0.0.4.tgz",
+      "integrity": "sha512-U+wLL8InpfRalWrr+0SuhWgGt10M4OyAk6G8xCYo2rwpiHtxZkWiFpjei0vO463ghW8LPCdhqQxXlMy2qicAEw==",
+      "deprecated": "This is a typosquat on the popular Lodash package. This is not maintained nor is the original Lodash package.",
+      "license": "MIT"
+    },
     "node_modules/local-pkg": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
diff --git a/package.json b/package.json
index c406a5d..6f258a3 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",
     "element-plus": "^2.10.1",
+    "loadsh": "^0.0.4",
+    "lodash-es": "^4.17.21",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.3.0",
     "vue": "^3.5.13",
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
deleted file mode 100644
index 770e9d3..0000000
--- a/src/assets/vue.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/src/service/api/linkPrediction.js b/src/service/api/linkPrediction.js
index 8cb286e..dfe7065 100644
--- a/src/service/api/linkPrediction.js
+++ b/src/service/api/linkPrediction.js
@@ -11,8 +11,8 @@ export function getInteractionCommunityNodes() {
 }
 
 //人物互动隐关系预测的社团内部节点
-export function getInteractionCommunityDetailNodes(ids) {
-  return http.get(`linkPrediction/interaction/community_detail?groupIds=${ids}`)
+export function getInteractionCommunityDetailNodes(ids, time = "2024.05.16 16:56:04") {
+  return http.get(`linkPrediction/interaction/community_detail?groupIds=${ids}&dateTime=${time}`)
 }
 
 //人物互动隐关系预测的社团统计
diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js
index 0d82ac0..6cfd6ed 100644
--- a/src/store/llinkPrediction/index.js
+++ b/src/store/llinkPrediction/index.js
@@ -22,9 +22,10 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
     userChartList: [], //组相关性
     posts: [],
     communityNodeList: [],
-
+    curComponent: "CommunityNode",
+    curSelecedGroupIds: [],
     communityDetailNodeList: [],
-
+    curSelectedGroup: [],
     anlysisList: [
       {
         id: 1,
@@ -138,6 +139,11 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
       { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" },
       { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" },
       { id: 3, icon: hiddenPrefix, name: "隐关系数", key: "hiddenInteractionCount" }
+    ],
+    statisticsDetailList: [
+      { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" },
+      { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" },
+      { id: 3, icon: hiddenPrefix, name: "隐关系数", key: "hiddenInteractionCount" }
     ]
   }),
   actions: {
@@ -166,10 +172,15 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
       if (res.code != 200) return
       this.communityNodeList = res.data
     },
-    async initGraphCommunityDetailNode(ids) {
-      const res = await getInteractionCommunityDetailNodes(ids)
+    async initGraphCommunityDetailNode(ids, time = "2024.05.16 16:56:04") {
+      this.curSelecedGroupIds = ids
+      const res = await getInteractionCommunityDetailNodes(ids, time)
       if (res.code != 200) return
-      return res.data
+      this.statisticsDetailList = this.statisticsDetailList.map((item) => ({
+        ...item,
+        count: res.data.communityStatistics[item.key]
+      }))
+      this.communityDetailNodeList = res.data.userRelation
     },
     async initGraphStatistics() {
       const res = await getInteractionCommunityStatistics()
diff --git a/src/views/LinkPrediction/characterInteraction/index.vue b/src/views/LinkPrediction/characterInteraction/index.vue
index f1f8289..b7c7474 100644
--- a/src/views/LinkPrediction/characterInteraction/index.vue
+++ b/src/views/LinkPrediction/characterInteraction/index.vue
@@ -83,6 +83,7 @@ const postDialog = ref(false)
 const currentPostPost = ref(null)
 
 const handleSelectedUserGroup = (group) => {
+  interactionStore.curComponent = "detailNode"
   console.log(group)
 }
 
diff --git a/src/views/LinkPrediction/components/detailNode.vue b/src/views/LinkPrediction/components/detailNode.vue
index 2241a53..9395d6a 100644
--- a/src/views/LinkPrediction/components/detailNode.vue
+++ b/src/views/LinkPrediction/components/detailNode.vue
@@ -3,51 +3,146 @@
     <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">
+      <div
+        class="statistics-item"
+        v-for="item in interactionStore.statisticsDetailList"
+        :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 class="time-axis">
+      <div class="time">{{ TansTimestamp(startTime, "YYYY.MM.DD HH:mm:ss") }}</div>
+      <div class="axis" ref="axisRef" @pointerdown="handlePointerDown">
+        <div class="progress-bar" :style="trackStyle"></div>
+        <div class="active-sign" :style="{ left: `${currentPosition}px` }">
+          <div class="active-needle"></div>
+          <div class="timeLine-point" @pointerdown.stop="handlePointPointerDown"></div>
+        </div>
+      </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>
 
 <script setup>
-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 { defineEmits, onMounted, ref, onUnmounted, computed, watch } from "vue"
+import { TansTimestamp } from "@/utils/transform"
 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)
-
+import { storeToRefs } from "pinia"
+import { useCharacterInteractionStore } from "@/store/llinkPrediction/index"
+const interactionStore = useCharacterInteractionStore()
+const { communityDetailNodeList } = storeToRefs(interactionStore)
 const emit = defineEmits(["click:goback"])
 const handleGoback = () => {
   emit("click:goback", "CommunityNode")
 }
 
-let chart = null
+//当点击时间轴的时候，communityDetailNodeList改变，重新更新关系图
+watch(
+  communityDetailNodeList,
+  (newValue) => {
+    initChart()
+  },
+  { deep: true }
+)
 
+// 时间轴相关数据
+const startTime = ref(new Date("2024-05-16 16:56:04"))
+const endTime = ref(new Date("2024-05-23 10:16:56"))
+const currentTime = ref(new Date("2024-05-16 16:56:04")) // 当前选中的时间
+const currentPosition = ref(0) // 初始位置（轴长度的一半）
+const axisRef = ref(null)
+const isDragging = ref(false)
+
+// 缓存时间计算相关的常量
+const axisWidth = 426
+const startTimeMs = startTime.value.getTime()
+const endTimeMs = endTime.value.getTime()
+const totalDuration = endTimeMs - startTimeMs
+
+// 根据位置计算时间
+const getTimeFromPosition = (position) => {
+  const ratio = Math.max(0, Math.min(1, position / axisWidth))
+  const timeOffset = totalDuration * ratio
+  return new Date(startTimeMs + timeOffset)
+}
+
+// 指针按下事件
+const handlePointerDown = (e) => {
+  if (e.target.classList.contains("timeLine-point")) return
+  const rect = axisRef.value.getBoundingClientRect()
+  const position = Math.max(0, Math.min(axisWidth, e.clientX - rect.left))
+
+  // 直接更新位置，不使用节流函数
+  currentPosition.value = position
+  currentTime.value = getTimeFromPosition(position)
+
+  // 点击后输出当前时间
+  const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
+  interactionStore.initGraphCommunityDetailNode(interactionStore.curSelecedGroupIds, currentTimes)
+}
+
+// 时间点指针按下事件
+const handlePointPointerDown = (e) => {
+  e.stopPropagation()
+  e.preventDefault()
+  isDragging.value = true
+  // 缓存轴的边界矩形，避免重复计算
+  const rect = axisRef.value.getBoundingClientRect()
+  const axisLeft = rect.left
+
+  const handlePointerMove = (e) => {
+    if (!isDragging.value) return
+    const position = Math.max(0, Math.min(axisWidth, e.clientX - axisLeft))
+
+    // 直接更新位置，不检查阈值，确保实时响应
+    currentPosition.value = position
+    currentTime.value = getTimeFromPosition(position)
+  }
+
+  const handlePointerUp = () => {
+    isDragging.value = false
+    // 拖动结束时输出当前时间
+    const currentTimes = TansTimestamp(currentTime.value, "YYYY.MM.DD HH:mm:ss")
+    console.log("拖动结束，当前时间:", currentTimes)
+
+    document.removeEventListener("pointermove", handlePointerMove)
+    document.removeEventListener("pointerup", handlePointerUp)
+  }
+
+  document.addEventListener("pointermove", handlePointerMove, { passive: true })
+  document.addEventListener("pointerup", handlePointerUp)
+}
+
+const trackStyle = computed(() => {
+  const progressPercent = Math.min(100, (currentPosition.value / 426) * 100)
+  return {
+    background: `linear-gradient(90deg, #00F3FF 0%, #00F3FF ${progressPercent}%, #3B7699 ${progressPercent}%, #3B7699 100%)`,
+    width: "100%"
+  }
+})
+
+// 组件卸载时清理事件监听器
+onUnmounted(() => {
+  document.removeEventListener("pointermove", () => {})
+  document.removeEventListener("pointerup", () => {})
+})
+
+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]) => {
+  if (!Object.keys(interactionStore.communityDetailNodeList).length) return
+  Object.entries(interactionStore.communityDetailNodeList).forEach(([parentId, children]) => {
     nodes.push({
       id: `parent_${parentId}`,
       name: parentId
@@ -177,11 +272,10 @@ const initChart = async () => {
         roam: true,
         zoom: 0.3,
         categories: categories,
-
         force: {
           edgeLength: 2500,
           repulsion: 4000,
-          gravity: 0.4,
+          gravity: 0.1,
           friction: 0.02,
           coolingFactor: 0.1
         },
@@ -299,6 +393,95 @@ onMounted(() => {
     bottom: 50px;
     border-radius: 4px;
     z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 10px;
+    color: #fff;
+    touch-action: none; // 防止触摸设备上的默认行为
+    .time {
+      font-family: "PingFang SC";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+    .axis {
+      width: 426px;
+      height: 6px;
+      border-radius: 20px;
+      background-color: #3b7699;
+      cursor: pointer;
+      transform: translateZ(0); // 启用硬件加速
+      position: relative;
+      .progress-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 6px;
+        background-color: #00ecf9;
+        border-radius: 20px;
+        z-index: 1;
+      }
+      .active-sign {
+        position: relative;
+        z-index: 2;
+        .active-needle {
+          width: 30px;
+          height: 34px;
+          background-image: url("@/assets/images/point.png");
+          background-size: cover;
+          bottom: 1px;
+          left: -6px;
+          position: absolute;
+        }
+        .timeLine-point {
+          width: 18px;
+          height: 18px;
+          background-color: transparent;
+          border-radius: 50%;
+          border: 1.6px solid #ffe5a4;
+          position: absolute;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          top: -6px;
+          cursor: pointer;
+          user-select: none;
+          will-change: left;
+          transform: translate3d(0, 0, 0); // 强制启用硬件加速
+          &:hover {
+            transform: translate3d(0, 0, 0) scale(1.1);
+          }
+          &:active {
+            transform: translate3d(0, 0, 0) scale(0.95);
+          }
+          &::after {
+            content: "";
+            width: 10px;
+            height: 10px;
+            background-color: #f9bd25;
+            border-radius: 50%;
+            position: absolute;
+          }
+        }
+      }
+    }
+    .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>
diff --git a/src/views/LinkPrediction/components/graph.vue b/src/views/LinkPrediction/components/graph.vue
index 3fd6134..bab09b5 100644
--- a/src/views/LinkPrediction/components/graph.vue
+++ b/src/views/LinkPrediction/components/graph.vue
@@ -3,26 +3,20 @@
     <img :src="title" alt="" class="title" />
 
     <CommunityNode
-      v-if="curComponent == 'CommunityNode'"
+      v-if="interactionStore.curComponent == 'CommunityNode'"
       @click:node="handleClickNode"
       @click:edge="handleClickEdge"
     ></CommunityNode>
-    <DetailNode
-      v-else
-      @click:goback="handleClickGoBack"
-      :detailNode="curSelectedGroup"
-    ></DetailNode>
+    <DetailNode v-else @click:goback="handleClickGoBack"></DetailNode>
   </div>
 </template>
 
 <script setup>
-import { defineProps, ref } from "vue"
+import { defineProps } 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,
@@ -31,23 +25,17 @@ const props = defineProps({
 })
 
 const handleClickNode = async (nodeInfo) => {
-  const data = await interactionStore.initGraphCommunityDetailNode([nodeInfo.id])
-  curSelectedGroup.value = data
-  curComponent.value = "detailNode"
+  interactionStore.initGraphCommunityDetailNode([nodeInfo.id])
+  interactionStore.curComponent = "detailNode"
 }
 
-const handleClickEdge = async (edgeInfo) => {
-  curComponent.value = "detailNode"
-  const data = await interactionStore.initGraphCommunityDetailNode([
-    edgeInfo.source,
-    edgeInfo.target
-  ])
-  curSelectedGroup.value = data
+const handleClickEdge = (edgeInfo) => {
+  interactionStore.curComponent = "detailNode"
+  interactionStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target])
 }
 
 const handleClickGoBack = (currentComponentName) => {
-  curComponent.value = currentComponentName
-  console.log(currentComponentName)
+  interactionStore.curComponent = currentComponentName
 }
 </script>