diff --git a/dist.zip b/dist.zip index b61afc4..5ad21c3 100644 Binary files a/dist.zip and b/dist.zip differ diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue index 0e18553..6025612 100644 --- a/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue +++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue @@ -38,7 +38,12 @@ const props = defineProps({ } }) -const emit = defineEmits(["click:hotTopic", "auto:currentTopList", "over:hotTopic"]) +const emit = defineEmits([ + "click:hotTopic", + "auto:currentTopList", + "over:hotTopic", + "click:refresh" +]) const currentTopicList = ref([]) let myChart = null let timer = null @@ -265,6 +270,8 @@ const handleRefresh = () => { initTopicChart() // 重新启动动态事件列表展示 dynamicShowEventList() + + emit("click:refresh", true) } } const handleResize = () => { diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue index 05ac171..be196b0 100644 --- a/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue +++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue @@ -38,11 +38,33 @@ const currentTopicList = inject("currentTopicList") //从锚点关注话题组件hover任意一个item后的结果 const currentTopic = inject("currentTopic") +//是否点击了topic组件中的刷新按钮 +const isRefresh = inject("refresh") + const riskNodeColorMap = { 低风险: `image://${new URL(lowRiskNode, import.meta.url)}`, 中风险: `image://${new URL(middleRiskNode, import.meta.url)}`, 高风险: `image://${new URL(highRiskNode, import.meta.url)}` } + +const initNodeState = () => { + const option = chart.getOption() + const anchorCommunityList = option.series[0].data //获取已初始化好的数据 + //先让所有的含锚点社团恢复初始状态 + anchorCommunityList.forEach((node) => { + if (node.category === 1) { + node.symbol = `image://${new URL(predictionNodeImg, import.meta.url)}` + } + }) + chart.setOption({ + series: [ + { + data: anchorCommunityList + } + ] + }) + return anchorCommunityList +} //与锚点实时关注话题联动(实时) watch(currentTopicList, (newList) => { const set = new Set() //去重 @@ -83,21 +105,7 @@ watch(currentTopicList, (newList) => { //与锚点实时关注话题联动(hover) watch(currentTopic, (newValue) => { - const option = chart.getOption() - const anchorCommunityList = option.series[0].data //获取已初始化好的数据 - //先让所有的含锚点社团恢复初始状态 - anchorCommunityList.forEach((node) => { - if (node.category === 1) { - node.symbol = `image://${new URL(predictionNodeImg, import.meta.url)}` - } - }) - chart.setOption({ - series: [ - { - data: anchorCommunityList - } - ] - }) + const anchorCommunityList = initNodeState() //再让选中的话题中的锚点用户社团高亮 const currentTopicEvent = { @@ -124,6 +132,15 @@ watch(currentTopic, (newValue) => { ] }) }) + +//与锚点实时关注话题联动(点击刷新按钮初始化关系图) +watch(isRefresh, (newFlag) => { + if (newFlag) { + initNodeState(newFlag) + isRefresh.value = false + } +}) + //当选中userPanel中的某个用户的时候,更新当前组件的用户 watch(currentUser, (val) => { if (val && chart) { @@ -158,11 +175,9 @@ const initChart = async () => { // 添加鼠标悬浮事件监听 chart.on("mouseover", function (params) { if (!params.data) return - // 如果是用户选择的节点,不处理鼠标悬停效果 - if (userSelectedNodeIndex.value !== null && params.dataIndex === userSelectedNodeIndex.value) { + if (userSelectedNodeIndex.value !== null && params.dataIndex === userSelectedNodeIndex.value) return - } if (params.dataType === "node") { // 仅节点时触发相邻高亮 diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue index 3003fbb..2b772f0 100644 --- a/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue +++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue @@ -35,13 +35,17 @@ const props = defineProps({ } }) +const anchorMonitorList = ref(props.anchorMonitorList) + const sortAnchorMonitorListByTime = (anchorMonitorList) => { return anchorMonitorList.sort((a, b) => { // 将时间字符串转换为时间戳进行比较 return new Date(a.time.trim()) - new Date(b.time.trim()) }) } -props.anchorMonitorList = sortAnchorMonitorListByTime(props.anchorMonitorList) + +anchorMonitorList.value = sortAnchorMonitorListByTime(anchorMonitorList.value) + const startAutoScroll = () => { if (!monitorListRef.value) return scrollTimer = setInterval(() => { diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/index.vue b/src/views/KeyNodeDiscern/anchorRecommendation/index.vue index c9df3d4..977c3b6 100644 --- a/src/views/KeyNodeDiscern/anchorRecommendation/index.vue +++ b/src/views/KeyNodeDiscern/anchorRecommendation/index.vue @@ -38,6 +38,7 @@ :topicList="KeyNodeOneStore.tooltipList" @click:hotTopic="handleGotTopicDialog" @over:hotTopic="handleMouseOver" + @click:refresh="handleRefreshTopic" @auto:currentTopList="handleCurrentTopList" > @@ -246,6 +247,9 @@ const currentSelectedAnchorItem = ref(null) //当前显示的话题列表 const currentTopicList = ref([]) +//是否点击了刷新按钮 +const isRefresh = ref(false) + //筛选tabs展示条件 const filterShowUserList = computed(() => { if (KeyNodeOneStore.currentTabType == "全部") { @@ -325,8 +329,12 @@ const handleCurrentTopList = (list) => { const handleMouseOver = (topic) => { currentTopic.value = topic } +const handleRefreshTopic = (flag) => { + isRefresh.value = flag +} provide("currentTopicList", currentTopicList) provide("currentTopic", currentTopic) +provide("refresh", isRefresh) let hotChartInstance = null const renderHotChart = () => {