bug修复

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

View File

@ -75,26 +75,26 @@ const props = defineProps({
} }
}) })
const startTime = ref(props.startTime) const startTime = ref(props.startTime) //
const endTime = ref(props.endTime) const endTime = ref(props.endTime) //
const timeList = ref(props.timeList) const timeList = ref(props.timeList) //
const currentTime = ref(new Date("2024-05-16 16:56:04")) // const currentTime = ref(new Date("2024-05-16 16:56:04")) //
const currentPosition = ref(props.initPosition) // const currentPosition = ref(props.initPosition) //
const isPlaying = ref(props.isAutoPlay) // const isPlaying = ref(props.isAutoPlay) //
let playTimer = null const axisRef = ref(null) //
const axisRef = ref(null) const isDragging = ref(false) //
const isDragging = ref(false) const axisWidth = 415 // (px)
const startTimeMs = startTime.value.getTime() //
// const endTimeMs = endTime.value.getTime() //
const axisWidth = 426 const totalDuration = endTimeMs - startTimeMs //
const startTimeMs = startTime.value.getTime() const step = 4 // (px)
const endTimeMs = endTime.value.getTime() let playTimer = null //
const totalDuration = endTimeMs - startTimeMs
const emit = defineEmits(["click:pointerDown", "slide:pointerUp"]) const emit = defineEmits(["click:pointerDown", "slide:pointerUp"])
//
const trackStyle = computed(() => { const trackStyle = computed(() => {
const progressPercent = Math.min(100, (currentPosition.value / 426) * 100) const progressPercent = Math.min(100, (currentPosition.value / axisWidth) * 100)
return { return {
background: `linear-gradient(90deg, #00F3FF 0%, #00F3FF ${progressPercent}%, #3B7699 ${progressPercent}%, #3B7699 100%)`, background: `linear-gradient(90deg, #00F3FF 0%, #00F3FF ${progressPercent}%, #3B7699 ${progressPercent}%, #3B7699 100%)`,
width: "100%" width: "100%"
@ -106,9 +106,11 @@ const getTimeSectionLeft = computed(() => {
return (time) => { return (time) => {
const total = endTime.value.getTime() - startTime.value.getTime() const total = endTime.value.getTime() - startTime.value.getTime()
const offset = new Date(time).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( watch(
() => props.timeList, () => props.timeList,
(newVal) => { (newVal) => {
@ -119,10 +121,7 @@ watch(
// active-needle timeList // active-needle timeList
const showHidden = computed(() => { const showHidden = computed(() => {
if (!timeList.value || timeList.value.length === 0) return {} if (!timeList.value || timeList.value.length === 0) return {}
// const left = getTimeSectionLeft.value(timeList.value[timeList.value.length - 1]) + 5 // +5px time-section
const lastTime = timeList.value[timeList.value.length - 1]
// left
const left = getTimeSectionLeft.value(lastTime) + 5 // +5px time-section
return { left: `${left}px` } return { left: `${left}px` }
}) })
@ -140,8 +139,6 @@ const pause = () => {
const play = () => { const play = () => {
if (!isPlaying.value) return if (!isPlaying.value) return
playTimer = setInterval(() => { playTimer = setInterval(() => {
//
const step = 4 // 4px
if (currentPosition.value >= axisWidth) { if (currentPosition.value >= axisWidth) {
pause() pause()
return return
@ -261,6 +258,7 @@ defineExpose({
cursor: pointer; cursor: pointer;
transform: translateZ(0); // transform: translateZ(0); //
position: relative; position: relative;
top: 2px;
.time-section { .time-section {
position: absolute; position: absolute;
top: -8px; top: -8px;

View File

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

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="anomalousContent-component"> <div class="anomalousContent-component">
<!-- 标题 --> <!-- 标题 -->
<img class="title" src="@/assets/images/abnormalGroup/anomalousContentInfoTitle.png" alt=""> <img class="title" src="@/assets/images/abnormalGroup/anomalousContentInfoTitle.png" alt="" />
<!-- 异常互动内容列表 --> <!-- 异常互动内容列表 -->
<div class="anomalousContent-list"> <div class="anomalousContent-list">
<!-- 异常内容项 --> <!-- 异常内容项 -->
@ -14,18 +14,20 @@
alt="" alt=""
/> />
<!-- 帖文相互评论次数 --> <!-- 帖文相互评论次数 -->
<div class="content-item-title-text">帖文相互评论次数{{ content.mutualCommentCount }}</div> <div class="content-item-title-text">
帖文相互评论次数{{ content.mutualCommentCount }}
</div>
</div> </div>
<!-- 用户区域 --> <!-- 用户区域 -->
<div class="content-item-users"> <div class="content-item-users">
<!-- 评论人 --> <!-- 评论人 -->
<div class="user-item"> <div class="user-item">
<img :src="content.commenter.userAvatar" alt="" class="user-avatar"> <img :src="content.commenter.userAvatar" alt="" class="user-avatar" />
<div class="user-name">{{ content.commenter.userName }}</div> <div class="user-name">{{ content.commenter.userName }}</div>
</div> </div>
<!-- 评论接受人 --> <!-- 评论接受人 -->
<div class="user-item"> <div class="user-item">
<img :src="content.commentRecipient.userAvatar" alt="" class="user-avatar"> <img :src="content.commentRecipient.userAvatar" alt="" class="user-avatar" />
<div class="user-name">{{ content.commentRecipient.userName }}</div> <div class="user-name">{{ content.commentRecipient.userName }}</div>
</div> </div>
</div> </div>
@ -39,7 +41,7 @@
</template> </template>
<script setup> <script setup>
import { defineProps } from 'vue'; import { defineProps } from "vue"
const props = defineProps({ const props = defineProps({
contentList: { contentList: {
type: Array, type: Array,

View File

@ -6,7 +6,7 @@
<div class="group-item-title"> <div class="group-item-title">
<img <img
class="group-item-title-icon" class="group-item-title-icon"
src="@/assets/images/linkPrediction/title/group-item-title.png" src="@/assets/images/linkPrediction/icon/top-icon.png"
alt="" alt=""
/> />
<div class="group-item-title-type">{{ group.type }}</div> <div class="group-item-title-type">{{ group.type }}</div>
@ -20,18 +20,13 @@
</div> </div>
</div> </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> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineProps } from "vue"; import { defineProps } from "vue"
const props = defineProps({ const props = defineProps({
groupList: { groupList: {
@ -42,7 +37,7 @@ const props = defineProps({
type: String, type: String,
default: "" default: ""
} }
}); })
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -77,9 +72,9 @@ const props = defineProps({
position: relative; position: relative;
.group-item-title-type { .group-item-title-type {
position: absolute; position: absolute;
top: 0; top: 3px;
color: #8efbff; color: #8efbff;
left: 17px; left: 8px;
font-size: 14px; 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) { .group-item:not(:first-child) {
margin-top: 25px; margin-top: 25px;

View File

@ -154,6 +154,7 @@ const handleOpenUserInfoDialog = (params) => {
curSelectedUser.value = params.curSelectedUser curSelectedUser.value = params.curSelectedUser
} }
onMounted(() => { onMounted(() => {
interactionStore.curComponent = "CommunityNode"
interactionStore.initGroupList() // interactionStore.initGroupList() //
interactionStore.initGraphCommunityNode() // interactionStore.initGraphCommunityNode() //
interactionStore.initGraphStatistics() // interactionStore.initGraphStatistics() //