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

View File

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

View File

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

View File

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