From e251b7859cdd4ba353b559c3d13bd2ef4c3de403 Mon Sep 17 00:00:00 2001 From: duanhao Date: Tue, 29 Jul 2025 16:25:28 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A4=BE=E4=BA=A4=E7=B4=A7=E5=AF=86=E5=9B=A2?= =?UTF-8?q?=E4=BD=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../icon/event-activist-legend-icon.png | Bin 0 -> 1521 bytes .../information-publisher-legend-icon.png | Bin 0 -> 1515 bytes .../interactive-relationship-legend-icon.png | Bin 0 -> 191 bytes .../icon/tight-community-legend-icon.png | Bin 144 -> 148 bytes src/service/api/linkPrediction.js | 15 +- src/store/llinkPrediction/index.js | 49 +++- .../socialGroups/components/communityNode.vue | 12 +- .../socialGroups/components/detailNode.vue | 244 +++++++++++++++--- .../socialGroups/components/graph.vue | 25 +- .../socialGroups/components/userPanel.vue | 2 + .../LinkPrediction/socialGroups/index.vue | 9 +- 11 files changed, 287 insertions(+), 69 deletions(-) create mode 100644 src/assets/images/linkPrediction/icon/event-activist-legend-icon.png create mode 100644 src/assets/images/linkPrediction/icon/information-publisher-legend-icon.png create mode 100644 src/assets/images/linkPrediction/icon/interactive-relationship-legend-icon.png diff --git a/src/assets/images/linkPrediction/icon/event-activist-legend-icon.png b/src/assets/images/linkPrediction/icon/event-activist-legend-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..e709b1b5ded0f9b960e6a0b36820af652777ed53 GIT binary patch literal 1521 zcmV;0|Lgm||38E9AJ21V zk5@d09rQSVCg<>bGlBz+nT*3{xaL!@P3*t)Z}Pa&qA>;!%zR!N)9f&J_$y(Kf8WgO zb1IHnIivYFimhAR-1vm!@5{R410mh1mqzxk{x1Wh93DM=bfn~FzfOD)u8#5(j*Foe zg}jg`k~ z4rpFdD;LIQ+ zi0o+_0ZmX)1e~UfLApUvU3LU}8sHiSn8JTTL<@)PoD7)VD|xX%%FSR~OHBtT8r>7I zI_=cx9!U&s(2+J};2tRZ0-(;IPoM!r0F%J)xMSRbTMWQdwtvbn%7wNNrK$~Cum|a< zHi|Z47E62dPTvtQSz&!8$SkfFw{o-0RbFy(kpoG*U^U zm{F1#Kt>8lqGvOm#DT^Qf~{(G8)osZR%h{w>QFLsJZY;hx2{Ed`rzOI#ME1gLKCYf z(MFMSsTH9ob&NzYtv7|;q_HX`FP8;LRc&%G6<=Cf!Y#T;EOD`OvGvtRC*J2uo$0~T zhm2WtEa)bMg!CF2B_>E>C1t`rBlezn|JQeOS;o|sQa{OPQUmom!02dz`8>cMZ~y+I zT#7&0z8E}_>Lr>Oayrd}vC8SCRnL2wXcZ^AAhQqMxY|AT#XD!OQVE**YXFr>1BY0& z+1$J-3FO$sai}l8ckxJmEy>+~J$&3z;878!C7>8;3zgDfVyQHx!5PE+V-P_0!#BQ=)-cOg8zaBlh3@waAvpi&Hlrvjo^Ym-yz zxYQgQhd@HDruzmARw`5c{P}AxW24zXYo9^nBRG^Y;~A!e&2mCa7hIzxZl*nip`uJg z!iBDmy^i8>y9v;RE2RXWrmSK%$abXydVYSZj3O1gITb38giIL5An6+-WorqIq&}Ar zPZFx6h#MW|T(_%Y9uS|pUQ~*qSW^8iV+Peacqob*zeG;9e+eAUo7tGT8S0jF1sF$U zQJ9#THT5-$M0;d~(j3!W5w*H*FrIfK;$l=Tuc(tJYqt5BAr|#;s@H4k;mxzj@^Uv; zs@Rpx?-1ZEon`H)qg#No4a&4!u3NF>O}p2Q!**7!b?4?*qPe+KvQoF+oAnE4qbrlv zJ|@ErJ~07eKDr@Fd7tMp32!xH^nDLIoyagD)L5n{I~|lGBOn`%NrI-TAuUC-eya^f z&}(`rc84sEa@Q`1VP!NNVVN$pT7hr8KzsS1fTNwJCFKI%F?4a*l}2Al%^owj;opbb{HwU#V*~6NH_-F;mZQU74?lka XbsqaMHt1o(00000NkvXXu0mjfJ7LJZ literal 0 HcmV?d00001 diff --git a/src/assets/images/linkPrediction/icon/information-publisher-legend-icon.png b/src/assets/images/linkPrediction/icon/information-publisher-legend-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..c7cc6025c96e85a5326b3bb294d5402c5eaaaaed GIT binary patch literal 1515 zcmVUN_AJ>r! zX^rRLgeUAXOuzvyEO-JgF%K>oVdk3C!PS4W$L%JqwRq2mP$^fv4}I z9_BR52bSjx9xsP}VS2)Uv?x$VMjksqF|m<3MYNm#*f{IaA{MKqQ#}ds;;KEDY8Hbv z$lN*&&jRCQCm7?%Ky{FRqZtc}LNv&f?Eg-93t)tb2j6Yqs|`NCvW{QSsx>sgN;F0x zXMi5F$UQF`evrpJcW&ADjI)=X>b8$j0=CF*0k{b_>h(Gk6Qx(%5jLfQm;pm(41!XQ zIYpqz8zT@v#>g$*e8S5k=se<26w?XBIUJ9IZL)Wh^Yh^N9F8RXk*yj-0~`#+PH7_P zFmjHTp`ZvnGUc?wX}Jh^4L$xez%pfU4*!`VnmFm+X%P;02XJGQo*|CXbaP>w%)o(U z^Ult?r*-A&(c*rX2?@8!U?iZ;6amZv-?3wla4F0dTx#4q8~uw>jSR)%+ybL_`IdM>SC~q^J8Lo?pqcuyRfXY^YT46@VMZku%wNapqv07`J zBI-Ul@1ZRb(n7wU3TWM;jMtrSN+xBrUSGf^-A9uaxa~)uOqT2s=X@9i%Q#bw9Vtsm zvc@@A+DfHNtgY!;t5T~bRFt&ZO7WQ)k^$76WHWNGwzh^-rc6rmG5Phk&x!#Y^*oa| zqaZU7%pALPTKCWdlBTI0NU39`NlEO1<+m=rSqK=@QGK&{roF%|8yw{I&V zDXo;T>6|%xI)J2bU?(2;1+EArf23wpg07HhRRe);mU&sa5xj0qVeA%dWi*_>tCa~mNgrF-0<(k$C`w81q=Ht~EI7@6y9 zE_)q-0W4KgfQELC*=DtCH83kHdsUKX=@)dYb7W-WSc0M_B$ReZdreWlNl7OuX)EE@ z#0B3UXvw40MuS{Zkx;Ja;cgjj*zx8{Q8f5fBH8;f5}bDe$^1NLUfxhKy@2|iq|W1M z7m3Lc3aLp7Qg(OXM|+As9Us+XW@cTVKi|-ZqmD2JV4KZ`et6eHdh_N$YF!>E7WTn2 zT@$cg(l=c|)dOw2J~v&dc*m{vWZVn%#$a)AJy~45plVIW-fkT@+Z~xScb0%#e0mzZ zmE@LJDTcg|PkFZ^F${Cq?;SN3gk{=yuZO zQ5`x264tBnB+Cz=+l@k-i%hN``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBeu$@wV@L(#+p~te4Gsb>7wr=mIG^+IS}?Fb z=wy+c(<02!n5j9Pt*iQ^+U+wuA@_r$w#oHLuH;tLH`=n8`;isdGJ$EV3ZX$o$h h?-TRUH^jbx`SvwFHob+P&H&A4@O1TaS?83{1OWXmH*)|0 literal 0 HcmV?d00001 diff --git a/src/assets/images/linkPrediction/icon/tight-community-legend-icon.png b/src/assets/images/linkPrediction/icon/tight-community-legend-icon.png index 8b669baaa8992d7fa77ed854fdc158a2372c21eb..ade5e4c1a9d697461c580c7c0e45ec4878ffbfbc 100644 GIT binary patch delta 83 zcmbQhIE8V7IF|qi8v_G_{OA9P6BSMEG(BA$Ln;{Go>?f!z`$|%fK2tK{}KrsWtzJ7 nW%(Xp2?;9BuP^u_Z@|ji5iN8-?ZvjIK+O!Eu6{1-oD!Mj@1uleF?KMyh-%@Df3rnpxRsFA_b)z4*}Q$iB}@0%Ks diff --git a/src/service/api/linkPrediction.js b/src/service/api/linkPrediction.js index 611974c..a5562e5 100644 --- a/src/service/api/linkPrediction.js +++ b/src/service/api/linkPrediction.js @@ -36,7 +36,16 @@ export function getInteractionPostList(outoIncrement) { //社交紧密团体识别的贴文列表 export function getSocialPostList(outoIncrement) { - return http.get(`/linkPrediction/social/post_list?page=${outoIncrement}`) + return http.get(`/linkPrediction/triangle/post_list?page=${outoIncrement}`) +} +// 社交紧密团体的对应紧密关系的帖文--根据relationId来查找 +export function getSocialPostListByRelationId(relationId){ + + return http.get(`/linkPrediction/user_posts_list?relationId=${relationId}`) +} +// 社交紧密团体识别的社团统计 +export function getSocialCommunityStatistics() { + return http.get(`linkPrediction/triangle/community_statistics`) } // 社交紧密团体的社团列表数据 @@ -45,8 +54,8 @@ export function getSocialCommunityList() { } // 社交紧密团体的社团内部节点 -export function getSocialCommunityDetailNodes(ids) { - return http.get(`/linkPrediction/triangle/community_detail?groupIds=${ids}`) +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 91c7d02..06a5341 100644 --- a/src/store/llinkPrediction/index.js +++ b/src/store/llinkPrediction/index.js @@ -10,7 +10,9 @@ import { getInteractionCommunityDetailNodes, getInteractionCommunityStatistics, getSocialCommunityList, - getSocialCommunityDetailNodes + getSocialCommunityStatistics, + getSocialCommunityDetailNodes, + getSocialPostListByRelationId } from "@/service/api/linkPrediction" import defaultAvatar from "@/assets/images/avatar/default.png" @@ -201,10 +203,18 @@ export const useSocialGroupsStore = defineStore("socialGroups", { state: () => ({ userList: [], communityNodeList: [], + curComponent: "CommunityNode", + curSelecedGroupIds: [], + communityDetailNodeList: [], statisticsList: [ { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" }, { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" }, - { id: 3, icon: tightCommunityPrefix, name: "紧密团体数", key: "tightCommunityCount" } + { id: 3, icon: tightCommunityPrefix, name: "紧密团体数", key: "hiddenInteractionCount" } + ], + statisticsDetailList: [ + { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" }, + { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" }, + { id: 3, icon: tightCommunityPrefix, name: "紧密团体数", key: "hiddenInteractionCount" } ], userChartList: [ { @@ -398,24 +408,47 @@ export const useSocialGroupsStore = defineStore("socialGroups", { this.posts = res.data } }, + // 获取对应用户组的postList + async getSocialGroupPostListByRelationId(relationId){ + const res = await getSocialPostListByRelationId(relationId) + if (res.code != 200) return + // console.log("打印对应relationId的帖文列表：", res.data) + this.posts = res.data + }, async initGraphCommunityNode() { const res = await getSocialCommunityList() if (res.code != 200) return this.communityNodeList = res.data }, // 初始化statisticsList - initStatisticsList() { + /* initStatisticsList() { this.statisticsList = [ - { id: 1, icon: nodePrefix, name: "用户数", key: "userCount", count: 1000 }, + { id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount", count: 1000 }, { id: 2, icon: communityPrefix, name: "社团数", key: "groupCount", count: 1000 }, - { id: 3, icon: tightCommunityPrefix, name: "紧密团体数", key: "tightCommunityCount", count: 1000 } + { id: 3, icon: tightCommunityPrefix, name: "紧密团体数", key: "hiddenInteractionCount", count: 1000 } ] + }, */ + // 社交紧密团体识别的社团统计 + async initGraphStatistics() { + const res = await getSocialCommunityStatistics() + this.statisticsList = this.statisticsList.map((item) => ({ + ...item, + count: res.data[item.key] + })) }, // 传递社交团体的数组，获取其详情 - async initGraphCommunityDetailNode(ids) { - const res = await getSocialCommunityDetailNodes(ids) + async initGraphCommunityDetailNode(ids, time = "2024-05-16 16:56:04") { + this.curSelecedGroupIds = ids + const res = await getSocialCommunityDetailNodes(ids, time) if (res.code != 200) return - return res.data + this.statisticsDetailList = this.statisticsDetailList.map((item) => ({ + ...item, + count: res.data.communityStatistics[item.key] + })) + console.log("打印社交团体详情："); + console.log(res.data); + this.communityDetailNodeList = res.data.userRelation + } }, persist: true // 开启持久化 diff --git a/src/views/LinkPrediction/socialGroups/components/communityNode.vue b/src/views/LinkPrediction/socialGroups/components/communityNode.vue index 192f96b..490ba26 100644 --- a/src/views/LinkPrediction/socialGroups/components/communityNode.vue +++ b/src/views/LinkPrediction/socialGroups/components/communityNode.vue @@ -62,9 +62,9 @@ const initChart = async () => { const data = { nodes, links } const categories = [ - { name: "普通社团", category: 0 }, - { name: "含预测节点社团", category: 1 }, - { name: "紧密团体关系", category: 2 } + { 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: 2, icon: `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}`} ] const option = { //图例配置 @@ -92,11 +92,7 @@ const initChart = async () => { { offset: 1, color: "#fbc2eb" } ]) }, - icon: c.category === 2 - ? `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}` - : c.category === 0 - ? `image://${new URL('@/assets/images/linkPrediction/icon/node-legend-icon.png', import.meta.url)}` - : `image://${new URL('@/assets/images/linkPrediction/icon/community-legend-icon.png', import.meta.url)}`, + icon: c.icon })), right: 15, bottom: 10, diff --git a/src/views/LinkPrediction/socialGroups/components/detailNode.vue b/src/views/LinkPrediction/socialGroups/components/detailNode.vue index f170080..ae226fb 100644 --- a/src/views/LinkPrediction/socialGroups/components/detailNode.vue +++ b/src/views/LinkPrediction/socialGroups/components/detailNode.vue @@ -3,51 +3,146 @@
-
+
{{ item.name }}: 
{{ item.count }}
-
+
+
{{ TansTimestamp(startTime, "YYYY.MM.DD HH:mm:ss") }}
+
+
+
+
+
+
+
+
{{ TansTimestamp(endTime, "YYYY.MM.DD HH:mm:ss") }}
+
+
+ 当前时间: {{ TansTimestamp(currentTime, "YYYY.MM.DD HH:mm:ss") }} +
@@ -246,7 +341,7 @@ onMounted(() => { height: 93%; } .statistic-container { - width: 400px; + width: 378px; height: 42px; flex-shrink: 0; border-radius: 4px; @@ -299,6 +394,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); + } } } diff --git a/src/views/LinkPrediction/socialGroups/components/graph.vue b/src/views/LinkPrediction/socialGroups/components/graph.vue index 6576c38..35fd312 100644 --- a/src/views/LinkPrediction/socialGroups/components/graph.vue +++ b/src/views/LinkPrediction/socialGroups/components/graph.vue @@ -3,26 +3,23 @@ diff --git a/src/views/LinkPrediction/socialGroups/components/userPanel.vue b/src/views/LinkPrediction/socialGroups/components/userPanel.vue index 14c2cd9..d4b6578 100644 --- a/src/views/LinkPrediction/socialGroups/components/userPanel.vue +++ b/src/views/LinkPrediction/socialGroups/components/userPanel.vue @@ -59,6 +59,8 @@ const props = defineProps({ const handleUserItem = (index, group = {}) => { curUserGroupIndex.value = index; + // console.log("点击用户列表中的item",index); + // console.log("点击用户列表中的item",group); emit("click:selectedGroup", group); }; diff --git a/src/views/LinkPrediction/socialGroups/index.vue b/src/views/LinkPrediction/socialGroups/index.vue index b0463af..719b2f6 100644 --- a/src/views/LinkPrediction/socialGroups/index.vue +++ b/src/views/LinkPrediction/socialGroups/index.vue @@ -84,7 +84,10 @@ const postDialog = ref(false); const currentPostPost = ref(null); const handleSelectedUserGroup = (group) => { - console.log(group); + socialGroupsStore.curComponent = "detailkNode" + const groupIds = group?.list.map((item)=>item.groupId) + socialGroupsStore.initGraphCommunityDetailNode(groupIds) + socialGroupsStore.getSocialGroupPostListByRelationId(group?.relationId) }; const handleOpenPostDialog = (post) => { @@ -98,9 +101,9 @@ const handleTouchButtom = (outoIncrement) => { onMounted(() => { socialGroupsStore.initGroupList(); - socialGroupsStore.initPostList(0); + socialGroupsStore.initPostList(1); socialGroupsStore.initGraphCommunityNode(); - socialGroupsStore.initStatisticsList(); + socialGroupsStore.initGraphStatistics(); }); provide("communityNodeList", socialGroupsStore.communityNodeList);