diff --git a/src/components/timeAxis.vue b/src/components/timeAxis.vue index 9f87458..45fe547 100644 --- a/src/components/timeAxis.vue +++ b/src/components/timeAxis.vue @@ -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; diff --git a/src/store/groupEvolution/index.js b/src/store/groupEvolution/index.js index 81281d1..6222ba2 100644 --- a/src/store/groupEvolution/index.js +++ b/src/store/groupEvolution/index.js @@ -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 }, @@ -1203,10 +1211,11 @@ export const useAnomalousGroup = defineStore("anomalousGroup", { userName: "疾风中青劲草", userAvatar: defaultAvatar }, - // + // mutualCommentCount: 3, // 评论内容 - content: "在我国海域偷运軍械彈藥是應該依法拘捕送交法院睿理判刑,而且在中国的裹服刑的!难道外国人特权?更何况是這千点小国!#中国海警首次登检菲律宾运补船只# #外交部回应中国海警缴获菲士兵枪支#", + content: + "在我国海域偷运軍械彈藥是應該依法拘捕送交法院睿理判刑,而且在中国的裹服刑的!难道外国人特权?更何况是這千点小国!#中国海警首次登检菲律宾运补船只# #外交部回应中国海警缴获菲士兵枪支#", // 点赞数 likeCount: "4.8w", // 评论数 diff --git a/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue b/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue index 52c2be3..1e8c3fe 100644 --- a/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue +++ b/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue @@ -1,99 +1,101 @@ - diff --git a/src/views/GroupEvolution/component/groupPanel.vue b/src/views/GroupEvolution/component/groupPanel.vue index fcd982e..3dc27d6 100644 --- a/src/views/GroupEvolution/component/groupPanel.vue +++ b/src/views/GroupEvolution/component/groupPanel.vue @@ -6,7 +6,7 @@
{{ group.type }}
@@ -20,18 +20,13 @@
-
-
- -
-