From 734fec9d8426a47ca5bf5982459fc4f9e8b744b2 Mon Sep 17 00:00:00 2001 From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com> Date: Tue, 29 Jul 2025 20:08:13 +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=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E5=88=87=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/linkPrediction/icon/top-icon.png | Bin 0 -> 439 bytes src/service/api/linkPrediction.js | 7 ++- src/store/llinkPrediction/index.js | 20 ++++---- .../characterInteraction/index.vue | 1 + .../LinkPrediction/components/detailNode.vue | 47 ++++++++++-------- .../LinkPrediction/components/userPanel.vue | 15 +++--- 6 files changed, 47 insertions(+), 43 deletions(-) create mode 100644 src/assets/images/linkPrediction/icon/top-icon.png diff --git a/src/assets/images/linkPrediction/icon/top-icon.png b/src/assets/images/linkPrediction/icon/top-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..7161817505992db006ce564596ef372e95afb890 GIT binary patch literal 439 zcmV;o0Z9IdP)+}I00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP2Qsk$KWTXhUR6t3Eauc`#hKkM|Rqz!!0ylt)lt4vm8X{2{1!UsH9(GYI z*;Xnly!O}FUQhFBMk~!DC_Lt2Z;2BShSL+a7c+B2=7sy-r4N zoyE)_N6ZMcr^pw)?~HmTh-%tWwidgqe*R393t$ili-Mm(jc8;|rEnST`GF0?cyXP1 z_TG%KsWh^tQY%@RtwvQ?pAq1jAs0Ln@Xb9YnDT+*C$$k4-#NrpoD}7FFYWObI5!B?_s92~s@6 hKz=)F;m}o4>JM0Jac8mnW`6(x002ovPDHLkV1j&^wdVi; literal 0 HcmV?d00001 diff --git a/src/service/api/linkPrediction.js b/src/service/api/linkPrediction.js index 8bd7662..5a6bb4d 100644 --- a/src/service/api/linkPrediction.js +++ b/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}`) } @@ -43,8 +43,7 @@ export function getSocialPostList(outoIncrement) { return http.get(`/linkPrediction/triangle/post_list?page=${outoIncrement}`) } // 社交紧密团体的对应紧密关系的帖文--根据relationId来查找 -export function getSocialPostListByRelationId(relationId){ - +export function getSocialPostListByRelationId(relationId) { return http.get(`/linkPrediction/user_posts_list?relationId=${relationId}`) } // 社交紧密团体识别的社团统计 @@ -58,7 +57,7 @@ export function getSocialCommunityList() { } // 社交紧密团体的社团内部节点 -export function getSocialCommunityDetailNodes(ids, time = "2024-05-16 16:56:04") { +export function getSocialCommunityDetailNodes(ids, time = "2024-05-16 16:56:04") { return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}&dateTime=${time}`) } diff --git a/src/store/llinkPrediction/index.js b/src/store/llinkPrediction/index.js index 2fd4f52..c9f7e79 100644 --- a/src/store/llinkPrediction/index.js +++ b/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 @@ -405,7 +404,7 @@ export const useSocialGroupsStore = defineStore("socialGroups", { } }, // 获取对应用户组的postList - async getSocialGroupPostListByRelationId(relationId){ + async getSocialGroupPostListByRelationId(relationId) { const res = await getSocialPostListByRelationId(relationId) if (res.code != 200) return // console.log("打印对应relationId的帖文列表：", res.data) @@ -433,7 +432,7 @@ 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") { this.curSelecedGroupIds = ids const res = await getSocialCommunityDetailNodes(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 // 开启持久化 diff --git a/src/views/LinkPrediction/characterInteraction/index.vue b/src/views/LinkPrediction/characterInteraction/index.vue index 6e714cc..1ea865a 100644 --- a/src/views/LinkPrediction/characterInteraction/index.vue +++ b/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)) } diff --git a/src/views/LinkPrediction/components/detailNode.vue b/src/views/LinkPrediction/components/detailNode.vue index e2b8939..1e42033 100644 --- a/src/views/LinkPrediction/components/detailNode.vue +++ b/src/views/LinkPrediction/components/detailNode.vue @@ -16,6 +16,12 @@
{{ TansTimestamp(startTime, "YYYY.MM.DD HH:mm:ss") }}
+
@@ -30,9 +36,6 @@
{{ TansTimestamp(endTime, "YYYY.MM.DD HH:mm:ss") }}
-
- 当前时间: {{ TansTimestamp(currentTime, "YYYY.MM.DD HH:mm:ss") }} -
@@ -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); - } } } diff --git a/src/views/LinkPrediction/components/userPanel.vue b/src/views/LinkPrediction/components/userPanel.vue index 66b42a3..b9eebbe 100644 --- a/src/views/LinkPrediction/components/userPanel.vue +++ b/src/views/LinkPrediction/components/userPanel.vue @@ -9,10 +9,7 @@ :class="{ active: curUserGroupIndex == index }" >
- +
TOP{{ group.rank }}
@@ -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 {