This commit is contained in:
qumeng039@126.com 2025-08-05 14:24:34 +08:00
commit 31de894358
12 changed files with 258 additions and 166 deletions

2
package-lock.json generated
View File

@ -4258,7 +4258,7 @@
},
"node_modules/vite-plugin-remove-console": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/vite-plugin-remove-console/-/vite-plugin-remove-console-2.2.0.tgz",
"resolved": "https://registry.npmmirror.com/vite-plugin-remove-console/-/vite-plugin-remove-console-2.2.0.tgz",
"integrity": "sha512-qgjh5pz75MdE9Kzs8J0kBwaCfifHV0ezRbB9rpGsIOxam+ilcGV7WOk91vFJXquzRmiKrFh3Hxlh0JJWAmXTbQ==",
"dev": true,
"license": "MIT"

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -450,116 +450,72 @@ export const useGroupStructureStore = defineStore("groupStructure", {
{
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日中国人民解放军@南部战区 组织海空兵力位南海海域进行例行巡航。战区部队全时保持高度戒备,坚决捍卫国家主权安全和海洋权益,任何搅局南海、制造热点的军事活动尽在掌握之中。 "
groupCategory: "群体一",
innerEdgeAddCount: 8,
outerEdgeAddCount: 2
},
{
id: 2,
timestamp: "2024-02-03 12:58:53",
author: "中国海警",
influence: 6636,
highlighted: false,
like: 5013,
comment: 247,
transmit: 1376,
content: `【#中国海警发声# 】2月2日菲方1艘小型民船对其非法"坐滩" 仁爱礁军舰运送生活物资,中国海警全程跟监管控。中国对包括仁爱礁在内的南沙群岛及其附近海域拥有无可争辩的主权,中国海警依法在中国管辖海域持续开展维权执法活动。`
groupCategory: "群体一",
innerEdgeAddCount: 8,
outerEdgeAddCount: 2
},
{
id: 3,
timestamp: "2024-02-22 17:13:44",
author: "外贸发布BBS",
influence: 6919,
like: 5354,
comment: 155,
transmit: 1410,
highlighted: false,
content: "所以,这算张冠李戴,还是指桑骂槐?#南海救助局寻获2名罹难者遗体#"
groupCategory: "群体二",
innerEdgeAddCount: 13,
outerEdgeAddCount: 3
},
{
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船不顾中方一再劝阻和警告执意侵闯中国黄岩岛邻近海域。"
groupCategory: "群体三",
innerEdgeAddCount: 1,
outerEdgeAddCount: 2
},
{
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人不幸罹难`
groupCategory: "群体三",
innerEdgeAddCount: 1,
outerEdgeAddCount: 2
},
{
id: 6,
timestamp: "2024-03-23 21:20:40",
author: "空天砺剑",
influence: 150,
highlighted: false,
like: 130,
comment: 10,
transmit: 10,
content:
"#菲律宾船对中国海警举白旗# 菲律宾人这是感谢帮它们洗船挥手致谢,既然人家这么客气,那就加大水压吧!"
groupCategory: "群体三",
innerEdgeAddCount: 1,
outerEdgeAddCount: 2
},
{
id: 7,
timestamp: "2024-03-23 21:42:36",
author: "大侠啊啊啊啊",
influence: 2473,
highlighted: false,
like: 1923,
comment: 124,
transmit: 426,
content: "#菲律宾船对中国海警举白旗#大快人心"
groupCategory: "群体三",
innerEdgeAddCount: 1,
outerEdgeAddCount: 2
},
{
id: 8,
timestamp: "2024-04-06 18:17:30",
author: "人民日报",
influence: 8345,
highlighted: false,
like: 6238,
comment: 409,
transmit: 1698,
content: `【#中方正告菲方任何侵权伎俩都是徒劳#】中国海警局新闻发言人甘羽表示4月4日菲方组织多艘船只非法位中国南沙群岛鲎藤礁邻近海域活动中国海警依法依规处置现场操作专业规范。中国对包括鲎藤礁在内的南沙群岛及其邻近海域拥有无可争辩的主权菲公务船打着所谓"护渔"幌子非法侵权挑衅,组织媒体蓄意煽炒误导,持续破坏南海稳定。我们正告菲方,任何侵权伎俩都是徒劳。中国海警将依法在中国管辖海域常态维权执法,坚决维护领土主权和海洋权益。`
groupCategory: "群体三",
innerEdgeAddCount: 1,
outerEdgeAddCount: 2
},
{
id: 9,
timestamp: "2024-04-06 19:19:50",
author: "如皋老猫",
influence: 433,
highlighted: false,
like: 355,
comment: 67,
transmit: 11,
content:
"#中国海警回应菲律宾侵闯鲎藤礁#马科斯已经吃了秤砣铁了心当美狗了,所以,希望中国海警除了文字回应外,也该用行动予以坚决回应了!"
groupCategory: "群体三",
innerEdgeAddCount: 1,
outerEdgeAddCount: 2
},
{
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日到达黄岩岛。菲律宾官方派出海岸警卫队的船为这支所谓"民间船队"护航,一些西方媒体也迅速跟进。这一套配合相当熟练的操作,我们此前已经在菲方于南海生事的好几次事件当中看到。`
groupCategory: "群体三",
innerEdgeAddCount: 1,
outerEdgeAddCount: 2
}
]
}),
@ -1052,6 +1008,68 @@ export const useGroupMemberStore = defineStore("groupMember", {
}
]
},
posts: [
{
id: 1,
timestamp: "2024-01-04 0:03:16",
groupCategory: "群体一",
memberAddCount: 1
},
{
id: 2,
timestamp: "2024-02-03 12:58:53",
groupCategory: "群体二",
memberAddCount: 2
},
{
id: 3,
timestamp: "2024-02-22 17:13:44",
groupCategory: "群体三",
memberAddCount: 4
},
{
id: 4,
timestamp: "2024-02-23 17:54:46",
groupCategory: "群体一",
memberAddCount: 4
},
{
id: 5,
timestamp: "2024-03-14 09:58:12",
groupCategory: "群体三",
memberAddCount: 4
},
{
id: 6,
timestamp: "2024-03-23 21:20:40",
groupCategory: "群体二",
memberAddCount: 4
},
{
id: 7,
timestamp: "2024-03-23 21:42:36",
groupCategory: "群体一",
memberAddCount: 2
},
{
id: 8,
timestamp: "2024-04-06 18:17:30",
groupCategory: "群体二",
memberAddCount: 4
},
{
id: 9,
timestamp: "2024-04-06 19:19:50",
groupCategory: "群体一",
memberAddCount: 4
},
{
id: 10,
timestamp: "2024-05-16 00:22:18",
groupCategory: "群体二",
memberAddCount: 5
}
],
wordCloudData: [
{
text: "中国海警",
@ -1305,6 +1323,28 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
data: [5, 0, 4, 0, 3, 0, 0]
}
]
}
},
posts: [
{
id: 1,
abnormalGroup: "G02与G07互动方式出现显著异常",
explanation: "持续异常行为已累积显著,疑似某组织突然发动“”信息攻击“或”舆论战“",
firstDiscoverTime: "2024.06.20",
duration: 6,
JS: 0.3,
CUSUM: 6.21,
KS: 0.02
},
{
id: 2,
abnormalGroup: "G02与G07互动方式出现显著异常",
firstDiscoverTime: "2024.06.23",
duration: 4,
explanation: "持续异常行为已累积显著,疑似某组织突然发动“”信息攻击“或”舆论战“",
JS: 0.41,
CUSUM: 5.0,
KS: 0.05
}
]
})
})

View File

@ -1,12 +1,11 @@
<template>
<<<<<<< HEAD
<div class="anomalousContent-component">
<!-- 标题 -->
<img class="title" src="@/assets/images/abnormalGroup/anomalousContentInfoTitle.png" alt="">
<!-- 异常互动内容列表 -->
<div class="anomalousContent-list">
<!-- 异常内容项 -->
<div class="content-item" v-for="content in contentList" :key="content.id">
<div class="content-item" v-for="content in props.contentList" :key="content.id">
<!-- 矩形标题 -->
<div class="content-item-title">
<img
@ -15,7 +14,7 @@
alt=""
/>
<!-- 帖文相互评论次数 -->
<div class="content-item-title-text">帖文相互评论次数{{ content.mutualCommentCount }}</div>
<div class="content-item-title-text">帖文相互评论{{ content.mutualCommentCount }}</div>
</div>
<!-- 用户区域 -->
<div class="content-item-users">
@ -51,26 +50,6 @@
</div>
</div>
</div>
=======
<div class="anomalousContent-component">
<!-- 标题 -->
<img class="title" src="@/assets/images/abnormalGroup/anomalousContentInfoTitle.png" alt="" />
<!-- 异常互动内容列表 -->
<div class="anomalousContent-list">
<!-- 异常内容项 -->
<div class="content-item" v-for="content in contentList" :key="content.id">
<!-- 矩形标题 -->
<div class="content-item-title">
<img
class="content-item-title-icon"
src="@/assets/images/linkPrediction/title/group-item-title.png"
alt=""
/>
<!-- 帖文相互评论次数 -->
<div class="content-item-title-text">
帖文相互评论次数{{ content.mutualCommentCount }}
</div>
>>>>>>> 0b728495e801a874026a766723835be2eaba7833
</div>
<!-- 用户区域 -->
<div class="content-item-users">
@ -89,9 +68,7 @@
<div class="content-item-comment">
<!-- <div class="post-content">{{ content.commentContent }}</div> -->
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -113,7 +90,6 @@ const props = defineProps({
}
.content-item {
width: 100%;
<<<<<<< HEAD
height: 100%;
.anomalousContent-list {
width: 100%;
@ -205,46 +181,9 @@ const props = defineProps({
}
}
}
=======
margin-left: 24px;
padding-bottom: 20px;
border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
.content-item-title {
position: relative;
.content-item-title-icon {
width: 160px;
}
.content-item-title-text {
position: absolute;
top: 7px;
color: #8efbff;
left: 12px;
font-size: 14px;
}
}
.content-item-users {
display: flex;
.user-item {
display: flex;
align-items: center;
margin-top: 16px;
margin-right: 40px;
.user-avatar {
width: 20px;
height: 20px;
margin-right: 6px;
}
.user-name {
font-family: "PingFang SC";
color: #fff;
font-size: 16px;
font-style: Bold;
font-weight: 400;
>>>>>>> 0b728495e801a874026a766723835be2eaba7833
}
}
}
<<<<<<< HEAD
/* 滚动条整体样式 - WebKit浏览器 */
.anomalousContent-list::-webkit-scrollbar {
width: 5px; /* 垂直滚动条宽度 */
@ -265,8 +204,5 @@ const props = defineProps({
margin-top: -7px;
}
=======
}
>>>>>>> 0b728495e801a874026a766723835be2eaba7833
}
</style>

View File

@ -7,20 +7,22 @@
<div class="left-container">
<div class="userPanel"></div>
<div class="userChart">
<GroupChart
<!-- <GroupChart
:title="userChartTitleImg"
:moduleName="moduleName"
:chartData="anomalousGroupStore.chartData"
></GroupChart>
></GroupChart> -->
</div>
</div>
<div class="middle-container">
<div class="graph"></div>
<div class="postList"></div>
<div class="postList">
<GroupPost :posts="anomalousGroupStore.posts" :isAbnormal="true" :moduleName="moduleName"></GroupPost>
</div>
</div>
<div class="right-container">
<div class="anlysisPanel">
<AnomalousContentInfo :contentList="anomalousGroupStore.abnormalContentList"></AnomalousContentInfo>
<!-- <AnomalousContentInfo :contentList="anomalousGroupStore.abnormalContentList"></AnomalousContentInfo> -->
</div>
<div class="cloudWords">
<WordsCloud :wordsCloudList="anomalousGroupStore.wordCloudData"></WordsCloud>
@ -54,15 +56,15 @@
<script setup>
import { ref } from "vue";
import GroupChart from "../component/groupChart.vue";
import userChartTitleImg from "@/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png"
// import userChartTitleImg from "@/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png"
import { Icon } from "@iconify/vue";
import WordsCloud from "../component/wordsCloud.vue"
import AnomalousContentInfo from "./components/anomalousContentInfo.vue"
import GroupPost from "../component/groupPost.vue"
// import AnomalousContentInfo from "./components/anomalousContentInfo.vue"
import { useAnomalousGroup } from "@/store/groupEvolution/index";
const anomalousGroupStore = useAnomalousGroup();
const moduleName = "全局异常互动时刻表"
const moduleName = "异常行为分析"
//
const postDialog = ref(false);

View File

@ -1,7 +1,7 @@
<template>
<div class="postList-component">
<img
src="@/assets/images/groupEvolution/event-list-title.png"
:src="isAbnormal ? abnormalTitle : groupEvolutionTitle"
alt=""
style="margin-top: -17px; margin-left: -11px"
/>
@ -11,7 +11,7 @@
@mouseenter="pauseScroll"
@mouseleave="resumeScroll"
>
<div class="scrolling-content">
<div v-if="!isAbnormal" class="scrolling-content">
<div
class="post-item"
v-for="(post, index) in posts"
@ -19,16 +19,50 @@
:class="{ highlighted: post.highlighted }"
@click="handleLeaderPost(post)"
>
<div class="post-type">
<img src="@/assets/images/groupEvolution/group_icon.png" alt="">
</div>
<span class="timestamp">{{ post.timestamp }}</span>
<span class="author">{{ post.author }}发布了帖文</span>
<div class="influence-section">
<div class="influence-label">互动: {{ post.influence }}</div>
<div class="influence-bar">
<div class="bar-track"></div>
<div class="bar-fill" :style="{ width: getInfluenceWidth(post.influence) }"></div>
<div class="bar-handle-wrapper" :style="{ left: getInfluenceWidth(post.influence) }">
<div class="bar-handle"></div>
</div>
<span class="author" v-if="props.moduleName == '群体识别发现'">【{{ post.groupCategory }}】&nbsp;&nbsp;的节点数增加<span style="color: #9DF9FE;">{{ post.nodeAddCount }}</span>个,&nbsp;&nbsp;连边增加<span style="color: #9DF9FE;">{{ post.edgeAddCount }}</span>
</span>
<span class="author" v-else-if="props.moduleName == '群体结构演化分析'">{{ post.groupCategory }}&nbsp;&nbsp;的内部连边增加<span style="color: #9DF9FE;">{{ post.innerEdgeAddCount }}</span>&nbsp;&nbsp;外部连边增加<span style="color: #9DF9FE;">{{ post.outerEdgeAddCount }}</span>
</span>
<span class="author" v-else-if="props.moduleName == '群体成员演化分析'">{{ post.groupCategory }}&nbsp;&nbsp;的成员数目增加了<span style="color: #9DF9FE;">{{ post.memberAddCount }}</span>
</span>
</div>
</div>
<div v-else class="scrolling-content">
<div
v-for="(post, index) in posts"
:key="index"
:class="{ highlighted: post.highlighted }"
@click="handleLeaderPost(post)"
>
<div class="post-type">
<div class="type-left">
<img class="title-img" :src="abnormalPostItemTitle" alt="">
<span class="title-text">{{ post.abnormalGroup }}</span>
</div>
<div class="type-right">
<div class="right-item">首次发现{{ post.firstDiscoverTime }}</div>
<div class="right-item">持续时间{{ post.duration }}</div>
</div>
</div>
<div class="post-explanation">
{{ post.explanation }}
</div>
<div class="post-metrics-list">
<div class="item">
JS散度
<div>滑块组</div>
</div>
<div class="item">
CUSUM
<div>滑块组</div>
</div>
<div class="item">
KS检验值
<div>滑块组</div>
</div>
</div>
</div>
@ -38,11 +72,22 @@
</template>
<script setup>
import { ref, computed, defineProps, defineEmits, onMounted, onBeforeUnmount } from "vue"
import abnormalPostItemTitle from "@/assets/images/abnormalGroup/abnormal-action-analysis-item-title.png"
import groupEvolutionTitle from "@/assets/images/groupEvolution/group-evolution-analysis-titlt.png"
import abnormalTitle from "@/assets/images/abnormalGroup/abnormal-action-analysis-title.png"
import { ref, computed, defineProps, defineEmits, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
posts: {
type: Array,
default: () => []
},
isAbnormal: {
type: Boolean,
default: false
},
moduleName: {
type: String,
required: true
}
})
@ -94,8 +139,12 @@ function resumeScroll() {
}
onMounted(() => {
startScroll()
})
console.log("打印moudleName:");
console.log(props.moduleName);
console.log(props.posts);
startScroll();
});
onBeforeUnmount(() => {
pauseScroll()
})
@ -163,6 +212,53 @@ onBeforeUnmount(() => {
align-items: center;
gap: 8px;
flex-shrink: 0;
.type-left {
position: relative;
.title-text {
position: absolute;
top: 0;
left: 0;
color: #8EFBFF;
font-family: PingFang SC;
font-weight: 400;
font-style: Medium;
font-size: 14px;
}
}
.type-right {
margin-left: 260px;
display: flex;
align-items: center;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-style: Medium;
font-size: 14px;
.right-item {
margin-left: 20px;
}
}
}
.post-explanation {
padding-top: 10px;
padding-bottom: 10px;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-style: Medium;
font-size: 14px;
}
.post-metrics-list {
display: flex;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-style: Regular;
font-size: 14px;
.item {
display: flex;
padding-right: 30px;
}
}
.post-type-text {

View File

@ -27,6 +27,7 @@
<div class="postList">
<GroupPost
:posts="groupDiscoveryStore.posts"
:moduleName="moduleName"
@click:open-dialog="handleOpenPostDialog"
></GroupPost>
</div>
@ -59,7 +60,9 @@ import groupChartTitleImg from "@/assets/images/groupEvolution/chart-title.png"
import groupGroupShowImg from "@/assets/images/groupEvolution/groupDisc-title.png"
import { useGroupDiscoveryStore } from "@/store/groupEvolution/index"
const groupDiscoveryStore = useGroupDiscoveryStore()
const groupDiscoveryStore = useGroupDiscoveryStore();
const moduleName = '群体识别发现';
//
const postDialog = ref(false)

View File

@ -24,7 +24,14 @@
<!-- 中间大矩形 2 -->
<div class="middle-container">
<div class="graph"></div>
<div class="postList"></div>
<div class="postList">
<GroupPost
:posts="groupMemberStore.posts"
@click:open-dialog="handleOpenPostDialog"
:moduleName="moduleName"
></GroupPost>
</div>
</div>
<!-- 右侧矩形 2 -->
<div class="right-container">
@ -67,6 +74,7 @@
<script setup>
import { ref } from "vue";
import GroupPanel from "./components/groupPanel.vue";
import GroupPost from "../component/groupPost.vue";
import GroupAnalysis from "./components/groupAnalysis.vue";
import GroupChart from "../component/groupChart.vue";
import userChartTitleImg from "@/assets/images/groupMember/group-member-evolution-chart-title.png"
@ -79,6 +87,9 @@ import { useGroupMemberStore } from "@/store/groupEvolution/index.js";
const groupMemberStore = useGroupMemberStore();
const moduleName = "群体成员演化分析";
//
const postDialog = ref(false);

View File

@ -24,6 +24,7 @@
<div class="postList">
<GroupPost
:posts="groupStructureStore.posts"
:moduleName="moduleName"
@click:open-dialog="handleOpenPostDialog"
></GroupPost>
</div>
@ -81,6 +82,9 @@ import { Icon } from "@iconify/vue";
import { useGroupStructureStore } from "@/store/groupEvolution/index";
const groupStructureStore = useGroupStructureStore();
const moduleName = '群体结构演化分析';
//
const postDialog = ref(false);