This commit is contained in:
duanhao 2025-07-31 10:10:03 +08:00
parent aa71d8c97d
commit 3c9c11107b
4 changed files with 39 additions and 16 deletions

View File

@ -211,6 +211,8 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
curHighlightUserIdList: [],
// 记录点击边的时序列表
clickEdgeTimeList: [],
// 记录是从边点的还是列表项中的点击
clickEvent: "list", // list 表示从列表项点的, edge 表示从边点的
statisticsList: [
{ id: 1, icon: nodePrefix, name: "节点数", key: "nodesCount" },
{ id: 2, icon: communityPrefix, name: "社团数", key: "groupCount" },
@ -440,6 +442,7 @@ export const useSocialGroupsStore = defineStore("socialGroups", {
this.curSelecedGroupIds = ids
const res = await getSocialCommunityDetailNodes(ids, time)
if (res.code != 200) return
console.log("index.js:",res.data)
this.statisticsDetailList = this.statisticsDetailList.map((item) => ({
...item,
count: res.data.communityStatistics[item.key]

View File

@ -26,10 +26,10 @@
>
<div
class="time-sign"
:class="{ active: isTimeSignActive(time.timeStr) }"
:style="{ left: `${time.position}px` }"
@click="handleTimePointClick(time.timeStr)"
></div>
>
</div>
</el-tooltip>
<div class="active-sign" :style="{ left: `${currentPosition}px` }">
<div class="active-needle"></div>
@ -61,6 +61,9 @@ const socialGroupsStore = useSocialGroupsStore()
const { communityDetailNodeList } = storeToRefs(socialGroupsStore)
const { timeList } = storeToRefs(socialGroupsStore)
const { curHighlightUserIdList } = storeToRefs(socialGroupsStore)
//
const { clickEvent } = storeToRefs(socialGroupsStore)
const chartsData = ref({})
const emit = defineEmits(["click:goback"])
@ -82,11 +85,14 @@ watch(
(newHiglightUserIdList) => {
if(newHiglightUserIdList.length!=0) {
nextTick(()=> {
console.log(newHiglightUserIdList)
highLightUserNodes(newHiglightUserIdList)
})
}
}
},
{
deep: true,
immediate: true
}
)
//
@ -135,9 +141,9 @@ watch(timePointsWithPositions, (newTimePoints) => {
}, { immediate: true })
//
const isTimeSignActive = (timeStr) => {
/* const isTimeSignActive = (timeStr) => {
return new Date(timeStr).getTime() === currentTime.value.getTime()
}
} */
//
const handleTimePointClick = (timeStr) => {
@ -233,6 +239,8 @@ const initChart = async () => {
else if (interactionTime > 30) return 10
else return 1
}
//
const edgeSet = new Set()
if (!Object.keys(socialGroupsStore.communityDetailNodeList).length) return
Object.entries(socialGroupsStore.communityDetailNodeList).forEach(([parentId, children]) => {
nodes.push({
@ -243,6 +251,14 @@ const initChart = async () => {
if (!nodes.some((n) => n.id === child.id)) {
nodes.push(child)
}
// 1-22-1
const source = `parent_${parentId}`
const target = child.id
const edgeKey = [source, target].sort().join('-')
if(!edgeSet.has(edgeKey)){
edgeSet.add(edgeKey)
}
links.push({
source: `parent_${parentId}`,
target: child.id,
@ -250,14 +266,15 @@ const initChart = async () => {
interactionTimes: child.interactionTime,
lineStyle: {
width: child.isHidden ? 4 : edgeWidth(child.interactionTime),
color: child.isHidden ? "#37ACD7" : "#37ACD7", // ==
color: child.isHidden ? "#FF5E00" : "#37ACD7", // ==
type: child.isHidden ? "dashed" : "solid" // =线=线
}
})
})
})
if(curHighlightUserIdList.value && curHighlightUserIdList.value.length >= 2) {
//
/* if(curHighlightUserIdList.value && curHighlightUserIdList.value.length >= 2) {
// timeList
const lastTimeStr = Array.isArray(timeList.value) && timeList.value.length > 0
? timeList.value[timeList.value.length - 1]
@ -296,7 +313,7 @@ const initChart = async () => {
}
}
}
}
} */
chartsData.value = { links, nodes }
const data = { links, nodes }
@ -478,6 +495,8 @@ const highLightUserNodes = (newHiglightUserIdList) => {
//
newHiglightUserIdList.forEach((id) => {
const index = chartsData.value.nodes.findIndex((node) => node.id === `parent_${id}`)
console.log(index);
if (index != -1) {
chart.dispatchAction({
type: "highlight",
@ -619,10 +638,7 @@ onMounted(() => {
height: 30px;
background: transparent;
}
&.active {
opacity: 0;
pointer-events: none;
}
}
.active-sign {
position: relative;

View File

@ -36,11 +36,12 @@ const handleClickNode = async (nodeInfo) => {
const handleClickEdge = async (edgeInfo) => {
console.log("点击边");
socialGroupsStore.curComponent = "detailNode"
socialGroupsStore.clickEvent = "edge"
// socialGroupsStore.clickEdgeTimeList
console.log("1.初始化获取边中的详情节点-initGraphCommunityDetailNode");
await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target])
console.log("2.获取边中的timelist并设置");
await socialGroupsStore.getClickEdgeTimeList([edgeInfo.source, edgeInfo.target])
const lastTime = socialGroupsStore.timeList[socialGroupsStore.timeList.length - 1]
await socialGroupsStore.initGraphCommunityDetailNode([edgeInfo.source, edgeInfo.target], lastTime)
}
const handleClickGoBack = (currentComponentName) => {

View File

@ -81,8 +81,11 @@ const postDialog = ref(false);
//
const currentPostPost = ref(null);
//
const handleSelectedUserGroup = (group) => {
socialGroupsStore.curComponent = "detailkNode"
socialGroupsStore.clickEvent = "list"
console.log("点击列表group",group)
const groupIds = group.list.map((item)=>item.groupId)
const length = group.timeList.length
const lastTime = group.timeList[length - 1]