duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug修复

Browse Source
This commit is contained in:
qumeng039@126.com 2025-08-04 13:54:33 +08:00
parent b260421c81
commit 5cf9e0c4ec
5 changed files with 167 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/timeAxis.vue
View File

@ -75,26 +75,26 @@ const props = defineProps({
}
})
const startTime = ref(props.startTime)
const endTime = ref(props.endTime)
const timeList = ref(props.timeList)
const startTime = ref(props.startTime) //开始时间
const endTime = ref(props.endTime) //结束时间
const timeList = ref(props.timeList) //时间列表
const currentTime = ref(new Date("2024-05-16 16:56:04")) // 当前选中的时间
const currentPosition = ref(props.initPosition) // 初始位置
const isPlaying = ref(props.isAutoPlay) // 是否自动播放
let playTimer = null
const axisRef = ref(null)
const isDragging = ref(false)
// 缓存时间计算相关的常量
const axisWidth = 426
const startTimeMs = startTime.value.getTime()
const endTimeMs = endTime.value.getTime()
const totalDuration = endTimeMs - startTimeMs
const axisRef = ref(null) // 轴的引用
const isDragging = ref(false) // 是否正在拖动
const axisWidth = 415 // 轴的长度(px)
const startTimeMs = startTime.value.getTime() // 起始时间的毫秒数
const endTimeMs = endTime.value.getTime() // 结束时间的毫秒数
const totalDuration = endTimeMs - startTimeMs // 计算总持续时间
const step = 4 // 每次移动的像素数(px)
let playTimer = null // 自动播放定时器
const emit = defineEmits(["click:pointerDown", "slide:pointerUp"])
// 计算进度条的样式
const trackStyle = computed(() => {
const progressPercent = Math.min(100, (currentPosition.value / 426) * 100)
const progressPercent = Math.min(100, (currentPosition.value / axisWidth) * 100)
return {
background: `linear-gradient(90deg, #00F3FF 0%, #00F3FF ${progressPercent}%, #3B7699 ${progressPercent}%, #3B7699 100%)`,
width: "100%"
@ -106,9 +106,11 @@ 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))
return Math.max(0, Math.min(axisWidth, (offset / total) * axisWidth))
}
})
// 监听 props.timeList 的变化，更新 timeList
watch(
() => props.timeList,
(newVal) => {
@ -119,10 +121,7 @@ watch(
// 让 active-needle 标定在 timeList 最后一个时间点
const showHidden = computed(() => {
if (!timeList.value || timeList.value.length === 0) return {}
// 取最后一个时间点
const lastTime = timeList.value[timeList.value.length - 1]
// 计算 left 位置
const left = getTimeSectionLeft.value(lastTime) + 5 // +5px 保持和 time-section 对齐
const left = getTimeSectionLeft.value(timeList.value[timeList.value.length - 1]) + 5 // +5px 保持和 time-section 对齐
return { left: `${left}px` }
})
@ -140,8 +139,6 @@ const pause = () => {
const play = () => {
if (!isPlaying.value) return
playTimer = setInterval(() => {
// 步进像素
const step = 4 // 每次移动4px，可根据需要调整速度
if (currentPosition.value >= axisWidth) {
pause()
return
@ -261,6 +258,7 @@ defineExpose({
cursor: pointer;
transform: translateZ(0); // 启用硬件加速
position: relative;
top: 2px;
.time-section {
position: absolute;
top: -8px;

109
src/store/groupEvolution/index.js
View File

@ -1,7 +1,7 @@
import { defineStore } from "pinia";
import testAvatar from "@/assets/images/leader/chenchen.png";
import nodePrefix from "@/assets/images/groupEvolution/node-prefix.png";
import edgePrefix from "@/assets/images/groupEvolution/edge-prefix.png";
import { defineStore } from "pinia"
import testAvatar from "@/assets/images/leader/chenchen.png"
import nodePrefix from "@/assets/images/groupEvolution/node-prefix.png"
import edgePrefix from "@/assets/images/groupEvolution/edge-prefix.png"
import splitImg from "@/assets/images/groupMember/splitImg.png"
import mergeImg from "@/assets/images/groupMember/mergeImg.png"
import shrinkImg from "@/assets/images/groupMember/shrinkImg.png"
@ -12,7 +12,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
groupList: [
{
id: 1,
type: "头部自媒体",
type: "群体一",
statistics: [
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
{ id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
@ -27,7 +27,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
},
{
id: 2,
type: "官方媒体",
type: "群体二",
statistics: [
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
{ id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
@ -42,7 +42,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
},
{
id: 3,
type: "普通自媒体",
type: "群体三",
statistics: [
{ id: 1, iconImg: nodePrefix, name: "节点数", value: 293 },
{ id: 2, iconImg: edgePrefix, name: "连边数", value: 21389 }
@ -304,7 +304,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
}),
actions: {},
persist: false // 开启持久化
});
})
export const useGroupStructureStore = defineStore("groupStructure", {
state: () => ({
@ -680,7 +680,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
}),
actions: {},
persist: false // 开启持久化
});
})
export const useGroupMemberStore = defineStore("groupMember", {
state: () => ({
@ -689,22 +689,22 @@ export const useGroupMemberStore = defineStore("groupMember", {
id: 1,
type: "头部媒体",
statistics: [
{id: 1, iconImg: splitImg, name: "分裂", value: 0.0298},
{id: 2, iconImg: mergeImg, name: "合并", value: 0},
{id: 3, iconImg: shrinkImg, name: "收缩", value: 0.4741},
{id: 4, iconImg: expamdImg, name: "扩展", value: 1.04e-14},
{ id: 1, iconImg: splitImg, name: "分裂", value: 0.0298 },
{ id: 2, iconImg: mergeImg, name: "合并", value: 0 },
{ id: 3, iconImg: shrinkImg, name: "收缩", value: 0.4741 },
{ id: 4, iconImg: expamdImg, name: "扩展", value: 1.04e-14 }
]
},
{
id: 2,
type: "头部媒体",
statistics: [
{id: 1, iconImg: splitImg, name: "分裂", value: 0.2125},
{id: 2, iconImg: mergeImg, name: "合并", value: 1.65e-15},
{id: 3, iconImg: shrinkImg, name: "收缩", value: 0.4313},
{id: 4, iconImg: expamdImg, name: "扩展", value: 6.02e-15},
{ id: 1, iconImg: splitImg, name: "分裂", value: 0.2125 },
{ id: 2, iconImg: mergeImg, name: "合并", value: 1.65e-15 },
{ id: 3, iconImg: shrinkImg, name: "收缩", value: 0.4313 },
{ id: 4, iconImg: expamdImg, name: "扩展", value: 6.02e-15 }
]
},
}
],
chartsData: {
topSelfMedia: [
@ -723,8 +723,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#2AB8FD',
color: "#0A1A2F",
borderColor: "#2AB8FD",
borderWidth: 1
},
symbol: "circle",
@ -749,8 +749,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#01D7DA',
color: "#0A1A2F",
borderColor: "#01D7DA",
borderWidth: 1
},
symbol: "circle",
@ -776,8 +776,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#FFDA09',
color: "#0A1A2F",
borderColor: "#FFDA09",
borderWidth: 1
},
symbol: "circle",
@ -803,8 +803,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#EB57B0',
color: "#0A1A2F",
borderColor: "#EB57B0",
borderWidth: 1
},
symbol: "circle",
@ -814,7 +814,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
}
]
}
},
}
],
officalMedia: [
{
@ -832,8 +832,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#2AB8FD',
color: "#0A1A2F",
borderColor: "#2AB8FD",
borderWidth: 1
},
symbol: "circle",
@ -858,8 +858,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#01D7DA',
color: "#0A1A2F",
borderColor: "#01D7DA",
borderWidth: 1
},
symbol: "circle",
@ -885,8 +885,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#FFDA09',
color: "#0A1A2F",
borderColor: "#FFDA09",
borderWidth: 1
},
symbol: "circle",
@ -912,8 +912,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#EB57B0',
color: "#0A1A2F",
borderColor: "#EB57B0",
borderWidth: 1
},
symbol: "circle",
@ -923,7 +923,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
}
]
}
},
}
],
ordinaryMedia: [
{
@ -941,8 +941,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#2AB8FD',
color: "#0A1A2F",
borderColor: "#2AB8FD",
borderWidth: 1
},
symbol: "circle",
@ -967,8 +967,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#01D7DA',
color: "#0A1A2F",
borderColor: "#01D7DA",
borderWidth: 1
},
symbol: "circle",
@ -994,8 +994,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#FFDA09',
color: "#0A1A2F",
borderColor: "#FFDA09",
borderWidth: 1
},
symbol: "circle",
@ -1021,8 +1021,8 @@ export const useGroupMemberStore = defineStore("groupMember", {
width: 1 // 设置线条宽度为3像素
},
itemStyle: {
color: '#0A1A2F',
borderColor: '#EB57B0',
color: "#0A1A2F",
borderColor: "#EB57B0",
borderWidth: 1
},
symbol: "circle",
@ -1032,7 +1032,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
}
]
}
},
}
]
},
wordCloudData: [
@ -1107,11 +1107,11 @@ export const useGroupMemberStore = defineStore("groupMember", {
{ 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 }
],
]
}),
actions: {},
persist: false // 开启持久化
});
})
export const useAnomalousGroup = defineStore("anomalousGroup", {
state: () => ({
@ -1144,7 +1144,15 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
fontSize: 14,
opacity: 0.8
},
{ text: "中国海警", top: 120.5, left: 30.5, width: 100, height: 24, fontSize: 16, opacity: 1 },
{
text: "中国海警",
top: 120.5,
left: 30.5,
width: 100,
height: 24,
fontSize: 16,
opacity: 1
},
{
text: "船",
top: 223.5,
@ -1182,7 +1190,7 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
opacity: 1
},
{ text: "蹲下", top: 176.5, left: 15.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
{ text: "邦邦邦邦", top: 87.5, left: 20.5, width: 106, height: 22, fontSize: 14, opacity: 1 },
{ text: "邦邦邦邦", top: 87.5, left: 20.5, width: 106, 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 },
@ -1206,7 +1214,8 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
//
mutualCommentCount: 3,
// 评论内容
content: "在我国海域偷运軍械彈藥是應該依法拘捕送交法院睿理判刑，而且在中国的裹服刑的！难道外国人特权？更何况是這千点小国！#中国海警首次登检菲律宾运补船只# #外交部回应中国海警缴获菲士兵枪支#",
content:
"在我国海域偷运軍械彈藥是應該依法拘捕送交法院睿理判刑，而且在中国的裹服刑的！难道外国人特权？更何况是這千点小国！#中国海警首次登检菲律宾运补船只# #外交部回应中国海警缴获菲士兵枪支#",
// 点赞数
likeCount: "4.8w",
// 评论数

164
src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue
View File

@ -1,99 +1,101 @@
<template>
<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>
</div>
<!-- 用户区域 -->
<div class="content-item-users">
<!-- 评论人 -->
<div class="user-item">
<img :src="content.commenter.userAvatar" alt="" class="user-avatar">
<div class="user-name">{{ content.commenter.userName }}</div>
</div>
<!-- 评论接受人 -->
<div class="user-item">
<img :src="content.commentRecipient.userAvatar" alt="" class="user-avatar">
<div class="user-name">{{ content.commentRecipient.userName }}</div>
</div>
</div>
<!-- 评论的内容 -->
<div class="content-item-comment">
<!-- <div class="post-content">{{ content.commentContent }}</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>
</div>
<!-- 用户区域 -->
<div class="content-item-users">
<!-- 评论人 -->
<div class="user-item">
<img :src="content.commenter.userAvatar" alt="" class="user-avatar" />
<div class="user-name">{{ content.commenter.userName }}</div>
</div>
<!-- 评论接受人 -->
<div class="user-item">
<img :src="content.commentRecipient.userAvatar" alt="" class="user-avatar" />
<div class="user-name">{{ content.commentRecipient.userName }}</div>
</div>
</div>
<!-- 评论的内容 -->
<div class="content-item-comment">
<!-- <div class="post-content">{{ content.commentContent }}</div> -->
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
import { defineProps } from "vue"
const props = defineProps({
contentList: {
type: Array,
default: () => []
}
contentList: {
type: Array,
default: () => []
}
})
</script>
<style scoped lang="less">
<style scoped lang="less">
.anomalousContent-component {
width: 100%;
height: 100%;
.title {
margin-top: -7px;
}
.content-item {
width: 100%;
height: 100%;
.title {
margin-top: -7px;
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 {
width: 100%;
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;
}
.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;
}
}
.user-name {
font-family: "PingFang SC";
color: #fff;
font-size: 16px;
font-style: Bold;
font-weight: 400;
}
}
}
}
}
</style>

34
src/views/GroupEvolution/component/groupPanel.vue
View File

@ -6,7 +6,7 @@
<div class="group-item-title">
<img
class="group-item-title-icon"
src="@/assets/images/linkPrediction/title/group-item-title.png"
src="@/assets/images/linkPrediction/icon/top-icon.png"
alt=""
/>
<div class="group-item-title-type">{{ group.type }}</div>
@ -20,18 +20,13 @@
</div>
</div>
</div>
<div class="media-list" v-if="group.mediaList.length">
<div class="media-item" v-for="media in group.mediaList" :key="media.id">
<img :src="media.avatar" :alt="media.name" class="media-avatar" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps } from "vue";
import { defineProps } from "vue"
const props = defineProps({
groupList: {
@ -42,7 +37,7 @@ const props = defineProps({
type: String,
default: ""
}
});
})
</script>
<style scoped lang="less">
@ -77,9 +72,9 @@ const props = defineProps({
position: relative;
.group-item-title-type {
position: absolute;
top: 0;
top: 3px;
color: #8efbff;
left: 17px;
left: 8px;
font-size: 14px;
}
}
@ -110,25 +105,6 @@ const props = defineProps({
}
}
}
.media-list {
width: 100%;
height: 54px;
display: flex;
margin-top: 20px;
display: flex;
justify-content: space-between;
.media-item {
width: 54px;
height: 54px;
overflow: hidden;
.media-avatar {
width: 100%;
height: 100%;
border-radius: 4px;
cursor: pointer;
}
}
}
}
.group-item:not(:first-child) {
margin-top: 25px;

1
src/views/LinkPrediction/characterInteraction/index.vue
View File

@ -154,6 +154,7 @@ const handleOpenUserInfoDialog = (params) => {
curSelectedUser.value = params.curSelectedUser
}
onMounted(() => {
interactionStore.curComponent = "CommunityNode"
interactionStore.initGroupList() //初始化用户组列表
interactionStore.initGraphCommunityNode() //初始化所有社团节点
interactionStore.initGraphStatistics() //初始化所有社团状态统计