链路预测模块贴文详情

src/layout/index.vue

@@ -37,6 +37,7 @@ const handleOpenDialog = (isOpen) => (openDialog.value = isOpen)
   .el-container-inner {
     padding-left: vw(13);
     margin-top: vh(10);
+
     .el-aside {
       color: aliceblue;
       font-family: Arial, sans-serif;
@@ -45,6 +46,7 @@ const handleOpenDialog = (isOpen) => (openDialog.value = isOpen)
       flex: 1;
       padding: 0 0;
       padding: 0 vw(13);
+      overflow: hidden;
     }
   }
 }

src/service/api/linkPrediction.js

@@ -112,3 +112,8 @@ export function getCharacterSocialCommunityDetailNodes(
 export function getInteractionCount(source, target) {
   return http.get(`/linkPrediction/interactionCount?source=${source}&target=${target}`)
 }
+
+//获取贴文详情
+export function getPostDetail(postId) {
+  return http.get(`/linkPrediction/postDetail?postId=${postId}`)
+}

src/store/linkPrediction/index.js

@@ -14,7 +14,8 @@ import {
   getCharacterSocialCommunityNodes,
   getCharacterSocialCommunityStatistics,
   getCharacterSocialCommunityDetailNodes,
-  getInteractionCount
+  getInteractionCount,
+  getPostDetail
 } from "@/service/api/linkPrediction"
 
 import defaultAvatar from "@/assets/images/avatar/default.png"
@@ -220,6 +221,13 @@ export const useCharacterInteractionStore = defineStore("characterInteraction",
       const res = await getInteractionCount(source, target)
       if (res.code != 200) return
       return res.data
+    },
+    //点击贴文list获取任意贴文信息
+    async initPostDetail(postId) {
+      const res = await getPostDetail(postId)
+      if (res.code == 200) {
+        return res.data
+      }
     }
   },
   persist: true // 开启持久化
@@ -513,6 +521,13 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
       const res = await getInteractionCount(source, target)
       if (res.code != 200) return
       return res.data
+    },
+    //点击贴文list获取任意贴文信息
+    async initPostDetail(postId) {
+      const res = await getPostDetail(postId)
+      if (res.code == 200) {
+        return res.data
+      }
     }
   },
   persist: true // 开启持久化
@@ -708,6 +723,13 @@ export const useCharacterHiddenStore = defineStore("characterHidden", {
       const res = await getInteractionCount(source, target)
       if (res.code != 200) return
       return res.data
+    },
+    //点击贴文list获取任意贴文信息
+    async initPostDetail(postId) {
+      const res = await getPostDetail(postId)
+      if (res.code == 200) {
+        return res.data
+      }
     }
   },
   persist: true // 开启持久化

src/views/KeyNodeDiscern/anchorRecommendation/index.vue

@@ -489,6 +489,7 @@ watch(topicDialog, (val) => {
   display: flex;
   flex-direction: column;
   gap: vw(10);
+
   .top-container {
     width: 100%;
     height: vh(110);

src/views/LinkPrediction/characterInteraction/index.vue

@@ -21,7 +21,7 @@
           ></Graph>
         </div>
         <div class="postList">
-          <PostList :posts="interactionStore.posts"></PostList>
+          <PostList :posts="interactionStore.posts" @click:openDialog="handlePostDetail"></PostList>
         </div>
       </div>
       <div class="right-container">
@@ -105,6 +105,13 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog v-model="postDialog" :width="640" align-center class="custom-dialog">
+      <img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
+      <div class="dialog-content">
+        <div class="post-content">{{ currentPostContent }}</div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -129,10 +136,13 @@ const { communityNodeList } = storeToRefs(interactionStore)
 
 // 控制个人信息弹窗
 const userInfoDialog = ref(false)
+const postDialog = ref(false)
+
 const curSelectedUser = ref(null)
 
 const storeId = "characterInteraction"
 
+const currentPostContent = ref("")
 //选择某个用户组，更新贴文列表 && 更新关系图二级界面
 const handleSelectedUserGroup = async (group) => {
   interactionStore.timeList = group.timeList //保存从用户列表选择的用户组，为了显示这两个用户交互的时间切片
@@ -149,6 +159,14 @@ const handleOpenUserInfoDialog = (params) => {
   userInfoDialog.value = params.userInfoDialog
   curSelectedUser.value = params.curSelectedUser
 }
+
+const handlePostDetail = async (post) => {
+  const res = await interactionStore.initPostDetail(post.postId)
+  if (res) {
+    currentPostContent.value = res
+    postDialog.value = true
+  }
+}
 onMounted(() => {
   interactionStore.curComponent = "CommunityNode"
   interactionStore.initGroupList() //初始化用户组列表
@@ -176,7 +194,7 @@ provide("statisticsList", interactionStore.statisticsList)
   height: vh(300);
 }
 :deep(.custom-dialog) .postTitleImage {
-  margin-top: vh(-24);
+  margin-top: vh(-27);
   margin-left: vw(-2);
 }
 :deep(.custom-dialog) .userInfoTitle {

src/views/LinkPrediction/charactersHiddenInteraction/index.vue

@@ -21,7 +21,10 @@
           ></Graph>
         </div>
         <div class="postList">
-          <PostList :posts="characterHiddenStore.posts"></PostList>
+          <PostList
+            :posts="characterHiddenStore.posts"
+            @click:openDialog="handlePostDetail"
+          ></PostList>
         </div>
       </div>
       <div class="right-container">
@@ -109,6 +112,13 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog v-model="postDialog" :width="640" align-center class="custom-dialog">
+      <img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
+      <div class="dialog-content">
+        <div class="post-content">{{ currentPostContent }}</div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -132,10 +142,11 @@ const characterHiddenStore = useCharacterHiddenStore()
 const { communityNodeList } = storeToRefs(characterHiddenStore)
 // 控制个人信息弹窗
 const userInfoDialog = ref(false)
+const postDialog = ref(false)
 const curSelectedUser = ref(null)
 
 const storeId = "characterHidden"
-
+const currentPostContent = ref("")
 const handleOpenUserInfoDialog = (params) => {
   userInfoDialog.value = params.userInfoDialog
   curSelectedUser.value = params.curSelectedUser
@@ -152,7 +163,13 @@ const handleSelectedUserGroup = (group) => {
     group.relationId
   )
 }
-
+const handlePostDetail = async (post) => {
+  const res = await characterHiddenStore.initPostDetail(post.postId)
+  if (res) {
+    currentPostContent.value = res
+    postDialog.value = true
+  }
+}
 onMounted(() => {
   characterHiddenStore.initGroupList()
   characterHiddenStore.initCharacterSocialHiddenPostList("79") //初始贴文列表
@@ -179,7 +196,7 @@ provide("statisticsList", characterHiddenStore.statisticsList)
   height: vh(300);
 }
 :deep(.custom-dialog) .postTitleImage {
-  margin-top: vh(-24);
+  margin-top: vh(-27);
   margin-left: vw(-2);
 }
 :deep(.custom-dialog) .userInfoTitle {

src/views/LinkPrediction/components/postList.vue

@@ -39,6 +39,7 @@ const props = defineProps({
     default: () => []
   }
 })
+const emit = defineEmits(["click:openDialog"])
 const listRef = ref(null)
 let scrollTimer = null
 let direction = 1 // 1: 向下, -1: 向上
@@ -67,7 +68,9 @@ function pauseScroll() {
 function resumeScroll() {
   startScroll()
 }
-
+const handleLeaderPost = (post) => {
+  emit("click:openDialog", post)
+}
 onMounted(() => {
   startScroll()
 })
@@ -80,6 +83,7 @@ onBeforeUnmount(() => {
 .postList-component {
   width: 100%;
   height: 100%;
+  overflow: hidden; //滚动轴隐藏
   .ContextoftheincidentTitle {
     margin-top: vh(-18);
     margin-left: vw(-11);

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

@@ -40,7 +40,7 @@ const props = defineProps({
     default: () => []
   }
 })
-
+const emit = defineEmits(["click:openDialog"])
 const listRef = ref(null)
 let scrollTimer = null
 let direction = 1 // 1: 向下, -1: 向上
@@ -70,7 +70,9 @@ function pauseScroll() {
 function resumeScroll() {
   startScroll()
 }
-
+const handleLeaderPost = (post) => {
+  emit("click:openDialog", post)
+}
 onMounted(() => {
   startScroll()
 })
@@ -83,6 +85,7 @@ onBeforeUnmount(() => {
 .postList-component {
   width: 100%;
   height: 100%;
+  overflow: hidden; //滚动轴隐藏
   .ContextoftheincidentTitle {
     margin-left: vw(-12);
     margin-top: vh(-17);

src/views/LinkPrediction/socialGroups/index.vue

@@ -19,7 +19,10 @@
           ></Graph>
         </div>
         <div class="postList">
-          <PostList :posts="socialGroupsStore.posts"></PostList>
+          <PostList
+            :posts="socialGroupsStore.posts"
+            @click:openDialog="handlePostDetail"
+          ></PostList>
         </div>
       </div>
       <div class="right-container">
@@ -130,6 +133,13 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog v-model="postDialog" :width="640" align-center class="custom-dialog">
+      <img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
+      <div class="dialog-content">
+        <div class="post-content">{{ currentPostContent }}</div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -162,7 +172,7 @@ const curSelectedUser = ref(null)
 
 //当前选中的贴文数据
 const currentPostPost = ref(null)
-
+const currentPostContent = ref("")
 // 列表项的点击事件
 const handleSelectedUserGroup = (group) => {
   socialGroupsStore.curComponent = "detailkNode"
@@ -179,7 +189,13 @@ const handleOpenUserInfoDialog = (params) => {
   userInfoDialog.value = params.userInfoDialog
   curSelectedUser.value = params.curSelectedUser
 }
-
+const handlePostDetail = async (post) => {
+  const res = await socialGroupsStore.initPostDetail(post.postId)
+  if (res) {
+    currentPostContent.value = res
+    postDialog.value = true
+  }
+}
 onMounted(() => {
   socialGroupsStore.curComponent = "CommunityNode"
   socialGroupsStore.initGroupList()
@@ -208,7 +224,7 @@ provide("statisticsList", socialGroupsStore.statisticsList)
   height: vh(300);
 }
 :deep(.custom-dialog) .postTitleImage {
-  margin-top: vh(-24);
+  margin-top: vh(-27);
   margin-left: vw(-2);
 }
 :deep(.custom-dialog) .userInfoTitle {

src/views/login/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import LoginPanel from "@/views/login/components/loginPanel.vue"
+import LoginPanel from "./components/loginPanel.vue"
 </script>
 
 <style scoped lang="scss">
@@ -26,7 +26,6 @@ import LoginPanel from "@/views/login/components/loginPanel.vue"
   }
   .body {
     flex: 1;
-
     background-image: url("@/assets/images/login/backimg.png");
     background-repeat: no-repeat;
     background-size: cover;