bug修复
This commit is contained in:
parent
b260421c81
commit
5cf9e0c4ec
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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: () => ({
|
||||||
|
|
@ -692,7 +692,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
||||||
{ 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 }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -702,9 +702,9 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
||||||
{ 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",
|
||||||
// 评论数
|
// 评论数
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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() //初始化所有社团状态统计
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user