人物社交隐关系基础框架完毕

src/App.vue

@@ -115,7 +115,8 @@ const jumpPage = (routePath) => {
     "/key-node-2",
     "/key-node-3",
     "/link-prediction-1",
-    "/link-prediction-2"
+    "/link-prediction-2",
+    "/link-prediction-3"
   ];
   if (activedPaths.includes(routePath)) {
     router.push({ path: routePath });

src/router/index.js

@@ -5,7 +5,8 @@ const KeyNodeRecognition3 = () => import("@/views/KeyNodeRecognition2/index.vue"
 const KeyNodeRecognition1 = () => import("@/views/KeyNodeRecognition3/index.vue");
 const LinkPrediction1 = () => import("@/views/LinkPrediction/characterInteraction/index.vue");
 const LinkPrediction2 = () => import("@/views/LinkPrediction/socialGroups/index.vue");
-// const LinkPrediction3 = () => import("@/views/LinkPrediction3.vue");
+const LinkPrediction3 = () =>
+  import("@/views/LinkPrediction/charactersHiddenInteraction/index.vue");
 const GroupEvolution1 = () => import("@/views/GroupEvolution1.vue");
 const GroupEvolution2 = () => import("@/views/GroupEvolution2.vue");
 const GroupEvolution3 = () => import("@/views/GroupEvolution3.vue");
@@ -18,7 +19,7 @@ const routes = [
   { path: "/key-node-1", component: KeyNodeRecognition1 },
   { path: "/link-prediction-1", component: LinkPrediction1 },
   { path: "/link-prediction-2", component: LinkPrediction2 },
-  { path: "/link-prediction-3", component: "" },
+  { path: "/link-prediction-3", component: LinkPrediction3 },
   { path: "/group-evolution-1", component: GroupEvolution1 },
   { path: "/group-evolution-2", component: GroupEvolution2 },
   { path: "/group-evolution-3", component: GroupEvolution3 },

src/store/llinkPrediction/index.js

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import testAvatar from "@/assets/anchorAvatar/aichuidunhaitao-tingenqifu.png";
 import test1Avatar from "@/assets/anchorAvatar/fei_die_gg.png";
+import test2Avatar from "@/assets/anchorAvatar/qianjuzhangbenren.png";
 export const useCharacterInteractionStore = defineStore("characterInteraction", {
   state: () => ({
     userList: [
@@ -648,3 +649,326 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
     ]
   })
 });
+
+export const useCharacterHiddenStore = defineStore("characterHidden", {
+  state: () => ({
+    userList: [
+      {
+        id: 1,
+        type: "",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: test2Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test2Avatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 2,
+        type: "",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: test2Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test2Avatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 3,
+        list: [
+          { id: 1, name: "Polo Hun", avatar: test2Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test2Avatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 4,
+        type: "",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: test2Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test2Avatar, fancy: 5556, post: 23 }
+        ]
+      },
+      {
+        id: 5,
+        type: "",
+        list: [
+          { id: 1, name: "Polo Hun", avatar: test2Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test2Avatar, fancy: 5556, post: 23 }
+        ]
+      }
+    ],
+
+    userChartList: [
+      {
+        id: 1,
+        group: [
+          { id: 1, name: "Polo Hun", avatar: test2Avatar, fancy: 634, post: 32 },
+          { id: 2, name: "楊政子", avatar: test2Avatar, fancy: 5556, post: 23 }
+        ],
+        number: "0.36"
+      },
+      {
+        id: 2,
+        group: [
+          {
+            id: 7,
+            name: "一人一讚 馬總統感恩有您 永遠支...",
+            avatar: test2Avatar,
+            fancy: 0,
+            post: 0
+          },
+          {
+            id: 8,
+            name: "一人一讚 馬總統感恩有您 永遠支...",
+            avatar: test2Avatar,
+            fancy: 564,
+            post: 13
+          }
+        ],
+        number: 0.28
+      },
+      {
+        id: 3,
+        group: [
+          {
+            id: 9,
+            name: "一人一讚 馬總統感恩有您 永遠支...",
+            avatar: test2Avatar,
+            fancy: 0,
+            post: 0
+          },
+          {
+            id: 10,
+            name: "一人一讚 馬總統感恩有您 永遠支...",
+            avatar: test2Avatar,
+            fancy: 564,
+            post: 13
+          }
+        ],
+        number: 0.24
+      }
+    ],
+
+    posts: [
+      {
+        id: 1,
+        timestamp: "2024-01-04  0:03:16",
+        author: "十八子91221",
+        influence: 2,
+        highlighted: false,
+        like: 1,
+        comment: 1,
+        transmit: 0,
+        content:
+          "转发微博【#南部战区南海海域例行巡航#】1月3日至4日，中国人民解放军@南部战区 组织海空兵力位南海海域进行例行巡航。战区部队全时保持高度戒备，坚决捍卫国家主权安全和海洋权益，任何搅局南海、制造热点的军事活动尽在掌握之中。 "
+      },
+      {
+        id: 2,
+        timestamp: "2024-02-03 12:58:53",
+        author: "中国海警",
+        influence: 6636,
+        highlighted: false,
+        like: 5013,
+        comment: 247,
+        transmit: 1376,
+        content: `【#中国海警发声# 】2月2日，菲方1艘小型民船对其非法"坐滩" 仁爱礁军舰运送生活物资，中国海警全程跟监管控。中国对包括仁爱礁在内的南沙群岛及其附近海域拥有无可争辩的主权，中国海警依法在中国管辖海域持续开展维权执法活动。`
+      },
+      {
+        id: 3,
+        timestamp: "2024-02-22 17:13:44",
+        author: "外贸发布BBS",
+        influence: 6919,
+        like: 5354,
+        comment: 155,
+        transmit: 1410,
+        highlighted: false,
+        content: "所以，这算张冠李戴，还是指桑骂槐？#南海救助局寻获2名罹难者遗体#"
+      },
+      {
+        id: 4,
+        timestamp: "2024-02-23 17:54:46",
+        author: "什么时候有江西舰",
+        influence: 1670,
+        like: 1310,
+        comment: 60,
+        transmit: 300,
+        highlighted: false,
+        content:
+          "转发微博【#中国海警局新闻发言人就菲律宾侵闯黄岩岛发表谈话# 】中国海警局新闻发言人甘羽表示，2月22日至23日，菲律宾渔业和水产资源局3002船不顾中方一再劝阻和警告，执意侵闯中国黄岩岛邻近海域。"
+      },
+      {
+        id: 5,
+        timestamp: "2024-03-14 09:58:12",
+        author: "新浪军事",
+        influence: 5292,
+        highlighted: false,
+        like: 2827,
+        comment: 1350,
+        transmit: 1115,
+        content: `#大陆渔船金门外海翻覆2人不幸罹难#【又有大陆渔船在金门海域翻覆，已致两人遇难！两岸联合搜救】3月14日，南都记者从金门海巡队获悉，当日清晨一艘大陆渔船"闽龙渔61222"在金门海域遭浪袭翻覆，船上6名船员落海行踪不明。据悉，目前落海的6名船员已全部寻获，4人送医、2人不幸罹难`
+      },
+      {
+        id: 6,
+        timestamp: "2024-03-23 21:20:40",
+        author: "空天砺剑",
+        influence: 150,
+        highlighted: false,
+        like: 130,
+        comment: 10,
+        transmit: 10,
+        content:
+          "#菲律宾船对中国海警举白旗# 菲律宾人这是感谢帮它们洗船挥手致谢，既然人家这么客气，那就加大水压吧！"
+      },
+      {
+        id: 7,
+        timestamp: "2024-03-23 21:42:36",
+        author: "大侠啊啊啊啊",
+        influence: 2473,
+        highlighted: false,
+        like: 1923,
+        comment: 124,
+        transmit: 426,
+        content: "#菲律宾船对中国海警举白旗#大快人心"
+      },
+      {
+        id: 8,
+        timestamp: "2024-04-06 18:17:30",
+        author: "人民日报",
+        influence: 8345,
+        highlighted: false,
+        like: 6238,
+        comment: 409,
+        transmit: 1698,
+        content: `【#中方正告菲方任何侵权伎俩都是徒劳#】中国海警局新闻发言人甘羽表示，4月4日，菲方组织多艘船只非法位中国南沙群岛鲎藤礁邻近海域活动，中国海警依法依规处置，现场操作专业规范。中国对包括鲎藤礁在内的南沙群岛及其邻近海域拥有无可争辩的主权，菲公务船打着所谓"护渔"幌子非法侵权挑衅，组织媒体蓄意煽炒误导，持续破坏南海稳定。我们正告菲方，任何侵权伎俩都是徒劳。中国海警将依法在中国管辖海域常态维权执法，坚决维护领土主权和海洋权益。`
+      },
+      {
+        id: 9,
+        timestamp: "2024-04-06 19:19:50",
+        author: "如皋老猫",
+        influence: 433,
+        highlighted: false,
+        like: 355,
+        comment: 67,
+        transmit: 11,
+        content:
+          "#中国海警回应菲律宾侵闯鲎藤礁#马科斯已经吃了秤砣铁了心当美狗了，所以，希望中国海警除了文字回应外，也该用行动予以坚决回应了！"
+      },
+      {
+        id: 10,
+        timestamp: "2024-05-16 00:22:18",
+        author: "环球网",
+        influence: 2889,
+        highlighted: false,
+        like: 1786,
+        comment: 362,
+        transmit: 741,
+        content: `【#环球时报社评#：#中方对菲律宾的善意和耐心不是无止境的#】在菲律宾近来不断公开否认"君子协定"、后被中方以铁证打脸之后，马尼拉又开始了新的政治表演。15日，5艘商业渔船上约200人从菲律宾高调驶向黄岩岛海域"维权"，预计16日到达黄岩岛。菲律宾官方派出海岸警卫队的船为这支所谓"民间船队"护航，一些西方媒体也迅速跟进。这一套配合相当熟练的操作，我们此前已经在菲方于南海生事的好几次事件当中看到。`
+      }
+    ],
+
+    anlysisList: [
+      {
+        id: 1,
+        title: "平均评论数",
+        unit: "数量",
+        xAxis: [0, 20, 40, 60, 80, 100],
+        max: 100,
+        rows: [
+          { label: "目标用户", value: 90.8, type: "leader" },
+          { label: "所有用户", value: 0.01, type: "user" }
+        ]
+      },
+      {
+        id: 2,
+        title: "平均转发次数",
+        unit: "数量",
+        xAxis: [0, 3, 6, 9, 12, 16, 18],
+        max: 18,
+        rows: [
+          { label: "目标用户", value: 17, type: "leader" },
+          { label: "所有用户", value: 0.01, type: "user" }
+        ]
+      },
+      {
+        id: 3,
+        title: "互动时间间隔",
+        unit: "秒",
+        xAxis: [0, 30, 60, 90, 120, 150],
+        max: 150,
+        rows: [
+          { label: "目标用户", value: 3.63, type: "leader", highlight: false },
+          { label: "所有用户", value: 127.63, type: "user" }
+        ]
+      }
+    ],
+    wordCloudData: [
+      {
+        text: "佩洛西",
+        top: 115.5,
+        left: 215.5,
+        width: 109,
+        height: 40,
+        fontSize: 28,
+        opacity: 1
+      },
+      { text: "中国", top: 183.5, left: 69.5, width: 73, height: 35, fontSize: 22, opacity: 1 },
+      {
+        text: "中国人民解放军",
+        top: 72.5,
+        left: 132.5,
+        width: 123,
+        height: 22,
+        fontSize: 12,
+        opacity: 1
+      },
+      {
+        text: "中美关系",
+        top: 171.5,
+        left: 212.5,
+        width: 81,
+        height: 22,
+        fontSize: 14,
+        opacity: 0.8
+      },
+      { text: "台独", top: 135.5, left: 42.5, width: 57, height: 24, fontSize: 16, opacity: 1 },
+      {
+        text: "台海和平",
+        top: 228.5,
+        left: 230.5,
+        width: 81,
+        height: 22,
+        fontSize: 14,
+        opacity: 0.8
+      },
+      {
+        text: "坚决反对",
+        top: 200.5,
+        left: 38.5,
+        width: 73,
+        height: 19,
+        fontSize: 12,
+        opacity: 0.7
+      },
+      {
+        text: "联合公报",
+        top: 241.5,
+        left: 130.5,
+        width: 73,
+        height: 19,
+        fontSize: 12,
+        opacity: 0.7
+      },
+      {
+        text: "有力反制",
+        top: 211.5,
+        left: 143.5,
+        width: 73,
+        height: 19,
+        fontSize: 12,
+        opacity: 1
+      },
+      { text: "白宫", top: 176.5, left: 15.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
+      { text: "内政", top: 87.5, left: 36.5, width: 53, height: 22, fontSize: 14, opacity: 1 },
+      { text: "访台", top: 103.5, left: 95.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
+      { text: "领土", top: 57.5, left: 72.5, width: 49, height: 19, fontSize: 12, opacity: 0.6 },
+      { text: "原则", top: 77.5, left: 264.5, width: 49, height: 19, fontSize: 12, opacity: 0.7 },
+      { text: "台湾", top: 195.5, left: 287.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 }
+    ]
+  })
+});

src/views/LinkPrediction/characterInteraction/index.vue

@@ -94,7 +94,6 @@ const handleSelectedUserGroup = (group) => {
 const handleOpenPostDialog = (post) => {
   postDialog.value = true;
   currentPostPost.value = post;
-  console.log(post);
 };
 </script>
 

src/views/LinkPrediction/charactersHiddenInteraction/index.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="layout-container">
+    <div class="top-container"></div>
+    <div class="content">
+      <div class="left-container">
+        <div class="userPanel">
+          <UserPanel
+            :title="userPanelTitleImg"
+            :userList="characterHiddenStore.userList"
+            @click:selectedGroup="handleSelectedUserGroup"
+          ></UserPanel>
+        </div>
+        <div class="userChart">
+          <UserChart
+            :title="userChartTitleImg"
+            :userChartList="characterHiddenStore.userChartList"
+          ></UserChart>
+        </div>
+      </div>
+      <div class="middle-container">
+        <div class="graph">
+          <Graph :title="graphTitleImg"></Graph>
+        </div>
+        <div class="postList">
+          <PostList
+            :posts="characterHiddenStore.posts"
+            @click:openDialog="handleOpenPostDialog"
+          ></PostList>
+        </div>
+      </div>
+      <div class="right-container">
+        <div class="anlysisPanel">
+          <AnlysisPanle
+            :anlysis-list="characterHiddenStore.anlysisList"
+            :title="analysisTitleImg"
+          ></AnlysisPanle>
+        </div>
+        <div class="cloudWords">
+          <WordsCloud :wordsCloudList="characterHiddenStore.wordCloudData"></WordsCloud>
+        </div>
+      </div>
+    </div>
+
+    <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">{{ currentPostPost.content }}</div>
+        <div class="heat">
+          <div class="item-heat-detail">
+            <div class="item-heat-like">
+              <Icon icon="ei:like" width="25" height="25" /> {{ currentPostPost.like }}
+            </div>
+            <div class="item-heat-comment">
+              <Icon icon="la:comment-dots" width="25" height="25" /> {{ currentPostPost.comment }}
+            </div>
+            <div class="item-heat-transmit">
+              <Icon icon="mdi:share-outline" width="25" height="25" /> {{
+                currentPostPost.transmit
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import UserPanel from "../components/userPanel.vue";
+import UserChart from "../components/userChart.vue";
+import PostList from "../components/postList.vue";
+import AnlysisPanle from "../components/anlysisPanle.vue";
+import Graph from "../components/graph.vue";
+import WordsCloud from "../components/cloudWords.vue";
+import { Icon } from "@iconify/vue";
+import { useCharacterHiddenStore } from "@/store/llinkPrediction/index";
+import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png";
+import userChartTitleImg from "@/assets/images/linkPrediction/title/interaction-strenth-title.png";
+import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png";
+import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png";
+const characterHiddenStore = useCharacterHiddenStore();
+
+//控制弹窗
+const postDialog = ref(false);
+
+//当前选中的贴文数据
+const currentPostPost = ref(null);
+
+const handleSelectedUserGroup = (group) => {
+  console.log(group);
+};
+
+const handleOpenPostDialog = (post) => {
+  postDialog.value = true;
+  currentPostPost.value = post;
+};
+</script>
+
+<style scoped lang="less">
+:deep(.custom-dialog) {
+  width: 640px;
+  border-width: 0px, 0px, 0px, 0px;
+  border-style: solid;
+  border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
+  background-color: rgba(6, 45, 90, 1);
+  border: 1px solid #1a8bff;
+  border-radius: 2px;
+  padding: 0 0;
+  z-index: 1;
+}
+:deep(.post-dialog) {
+  height: 300px;
+}
+:deep(.custom-dialog) .postTitleImage {
+  margin-top: -24px;
+  margin-left: -2px;
+}
+:deep(.custom-dialog) .dialog-content {
+  width: 100%;
+  padding: 25px 20px;
+}
+
+:deep(.custom-dialog) .dialog-content .content {
+  color: rgba(255, 255, 255, 0.8);
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  opacity: 0.7;
+}
+.post-content {
+  color: #fff;
+  font-size: 16px;
+  opacity: 0.7;
+}
+.heat {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  .item-heat-detail {
+    display: flex;
+    justify-content: space-between;
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 70px;
+      color: #fff;
+      opacity: 0.7;
+    }
+  }
+}
+.layout-container {
+  width: 1544px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  .top-container {
+    width: 100%;
+    height: 88px;
+    background-image: url(@/assets/images/linkPrediction/title/page-title.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    fill: linear-gradient(270deg, rgba(6, 61, 113, 0.1) 0%, rgba(8, 30, 56, 0.38) 100%);
+    stroke-width: 1px;
+    stroke: #3aa1f8;
+  }
+
+  .content {
+    width: 100%;
+    height: 805px;
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+    .left-container {
+      width: 352px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      .userPanel {
+        width: 100%;
+        height: 540px;
+        border-radius: 2px;
+        flex-shrink: 0;
+        background-color: rgba(6, 45, 90, 0.3);
+        border: 1px solid rgba(0, 113, 188, 0.705);
+      }
+      .userChart {
+        flex: 1;
+        border-radius: 2px;
+        background-color: rgba(6, 45, 90, 0.3);
+        border: 1px solid rgba(0, 113, 188, 0.705);
+        overflow: auto;
+        -ms-overflow-style: none; /* IE 和 Edge */
+        scrollbar-width: none; /* Firefox */
+      }
+    }
+
+    .middle-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      .search {
+        width: 100%;
+        height: 60px;
+      }
+      .graph {
+        width: 100%;
+        height: 541px;
+        background-color: #070a22;
+        border-radius: 4px;
+        background-color: rgba(6, 45, 90, 0.3);
+        border: 1px solid rgba(0, 113, 188, 0.705);
+      }
+      .postList {
+        flex: 1;
+        border-radius: 4px;
+        background-color: rgba(6, 45, 90, 0.3);
+        border: 1px solid rgba(0, 113, 188, 0.705);
+        fill: linear-gradient(270deg, rgba(6, 61, 113, 0.1) 0%, rgba(8, 30, 56, 0.38) 100%);
+        stroke-width: 1px;
+        stroke: #3aa1f8;
+        overflow: auto;
+        padding: 10px 10px;
+      }
+    }
+
+    .right-container {
+      width: 352px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      .anlysisPanel {
+        width: 100%;
+        height: 540px;
+        border-radius: 2px;
+        flex-shrink: 0;
+        background-color: rgba(6, 45, 90, 0.3);
+        border: 1px solid rgba(0, 113, 188, 0.705);
+      }
+      .cloudWords {
+        flex: 1;
+        border-radius: 2px;
+        flex-shrink: 0;
+        background-color: rgba(6, 45, 90, 0.3);
+        border: 1px solid rgba(0, 113, 188, 0.705);
+      }
+    }
+  }
+}
+</style>

src/views/LinkPrediction/components/userChart.vue

@@ -50,15 +50,7 @@ const props = defineProps({
 });
 
 const specialHandle = computed(() => {
-  return (length) => {
+  return (length) => length > 2 && { width: "25px", height: "25px", marginRight: "3px" };
-    if (length > 2) {
-      return {
-        width: "25px",
-        height: "25px",
-        marginRight: "3px"
-      };
-    }
-  };
 });
 </script>