修改
This commit is contained in:
parent
aa71d8c97d
commit
3c9c11107b
|
|
@ -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]
|
||||||
|
|
|
||||||
|
|
@ -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-2和2-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;
|
||||||
|
|
|
||||||
|
|
@ -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) => {
|
||||||
|
|
|
||||||
|
|
@ -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]
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user