解决第二个模块关系图第一次点击不渲染问题

使用watch监听communityNodeList的变化，只要发生改变，就调用initChart函数，并且移除在onMounted中调用initChart

src/utils/http.js

@@ -3,17 +3,15 @@ import cache from "./cache"
 import { ElMessage } from "element-plus"
 import router from "@/router"
 import { useLoginStore } from "@/store/authentication/index"
-
+// 创建axios实例
 const service = axios.create({
-  baseURL: import.meta.env.VITE_APP_BASE_API,
-  timeout: 10000,
+  baseURL: import.meta.env.VITE_APP_BASE_API, // 从环境变量获取基础URL
+  timeout: 10000, // 请求超时时间
   withCredentials: true
 })
 
 //白名单
 const excludePath = new Set(["/auth/login", "/auth/refresh"])
-
-//请求拦截器
 service.interceptors.request.use(
   (config) => {
     const token = cache.getItem("token")
@@ -27,49 +25,43 @@ service.interceptors.request.use(
   }
 )
 
-//响应拦截器
 service.interceptors.response.use(
   async (response) => {
     const res = response.data
     const loginStore = useLoginStore()
-
-    if (res.code == 200) {
-      return res
-    }
-
-    //500会抛出该错
-    if (res.code !== 401 && res.code !== 403) {
-      ElMessage.error(res.message || "Error")
-    }
-
-    //res.code != 200 && res.code == 401 || res.code == 403的情况如下
-    try {
-      // 尝试刷新token
-      const refreshed = await loginStore.loginForRefreshToken()
-      if (!refreshed) {
-        throw new Error("Refresh token failed")
-      }
-      // 刷新成功，更新请求头中的accessToken并重新发送请求
-      const updateConfig = {
-        ...response.config,
-        headers: {
-          ...response.config.headers,
-          Authorization: `Bearer ${loginStore.token}`
-        }
-      }
-      return service(updateConfig) //使用新请求头重新发送原始请求
-    } catch (refreshError) {
+    if (res.code !== 200) {
       ElMessage({
-        message: "会话已过期，请重新登录!",
+        message: res.message || "Error",
         type: "error",
         duration: 5 * 1000
       })
-      cache.removeItem("token")
-      router.push("/login")
-      return Promise.reject(refreshError)
+
+      if (res.code === 401 || res.code === 403) {
+        try {
+          // 若token过期，或者token无效，或者未找到token，对页面中需要认证的接口都有效，使得重新登录
+          const refreshed = await loginStore.loginForRefreshToken()
+          if (refreshed) {
+            // 刷新成功，更新请求头中的accessToken
+            response.config.headers.Authorization = `Bearer ${loginStore.token}`
+            return service(response.config) // 重新发送失败的请求
+          }
+        } catch (refreshError) {
+          ElMessage({
+            message: "会话已过期，请重新登录!",
+            type: "error",
+            duration: 5 * 1000
+          })
+          cache.removeItem("token")
+          router.push("/login")
+          return Promise.reject(new Error("Refresh token failed"))
+        }
+      }
+      return Promise.reject(new Error(res.message || "Error"))
+    } else {
+      return res
     }
   },
-  (error) => {
+  async (error) => {
     ElMessage({
       message: error.message,
       type: "error",

src/views/LinkPrediction/characterInteraction/index.vue

@@ -127,9 +127,12 @@ import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.p
 import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"
 import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
 import { getAvatarUrl } from "@/utils/transform"
+import { storeToRefs } from "pinia"
 
 const interactionStore = useCharacterInteractionStore()
 
+const { communityNodeList } = storeToRefs(interactionStore)
+
 // 控制个人信息弹窗
 const userInfoDialog = ref(false)
 const curSelectedUser = ref(null)
@@ -159,7 +162,7 @@ onMounted(() => {
   interactionStore.initGraphStatistics() //初始化所有社团状态统计
   interactionStore.initInteractionPostList("106888") //初始贴文列表
 })
-provide("communityNodeList", interactionStore.communityNodeList) // 提供数据
+provide("communityNodeList", communityNodeList) // 提供响应式数据
 provide("statisticsList", interactionStore.statisticsList)
 </script>
 

src/views/LinkPrediction/charactersHiddenInteraction/index.vue

@@ -126,8 +126,11 @@ import { useCharacterHiddenStore } from "@/store/linkPrediction/index"
 import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png"
 import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"
 import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
+import { storeToRefs } from "pinia"
 
 const characterHiddenStore = useCharacterHiddenStore()
+
+const { communityNodeList } = storeToRefs(characterHiddenStore)
 // 控制个人信息弹窗
 const userInfoDialog = ref(false)
 const curSelectedUser = ref(null)
@@ -157,7 +160,7 @@ onMounted(() => {
   characterHiddenStore.initGraphCommunityNode() //初始化社团节点
   characterHiddenStore.initGraphStatistics() //初始化社团统计
 })
-provide("communityNodeList", characterHiddenStore.communityNodeList) // 提供数据
+provide("communityNodeList", communityNodeList) // 提供响应式数据
 provide("statisticsList", characterHiddenStore.statisticsList)
 </script>
 

src/views/LinkPrediction/components/communityNode.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { onMounted, inject } from "vue"
+import { onMounted, inject, watch, ref } from "vue"
 import * as echarts from "echarts"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
 import predictionNodeImg from "@/assets/images/linkPrediction/icon/prediction-node.png"
@@ -22,6 +22,7 @@ import normalGroupNodeImg from "@/assets/images/linkPrediction/icon/normal-group
 let chart = null
 const emit = defineEmits(["click:node", "click:edge"])
 const statisticsList = inject("statisticsList")
+const communityNodeList = ref(inject("communityNodeList"))
 const props = defineProps({
   interactionStore: {
     type: Object,
@@ -32,10 +33,17 @@ const props = defineProps({
     default: ""
   }
 })
-console.log(props.storeId)
-const initChart = () => {
-  chart = echarts.init(document.getElementById("container"))
 
+// 监听communityNodeList变化 解决第一次进入页面不渲染问题
+watch(
+  communityNodeList,
+  () => {
+    initChart()
+  },
+  { deep: true }
+)
+
+const initChart = () => {
   const imageSelect = (node) => {
     if (props.storeId == "characterInteraction") {
       if (node.isIncludePredictNodes) {
@@ -60,7 +68,8 @@ const initChart = () => {
     }
   }
   //处理社团节点
-  const nodes = Object.values(inject("communityNodeList") ?? []).map((item) => ({
+  // 确保item是有效的对象
+  const nodes = Object.values(communityNodeList.value).map((item) => ({
     id: item.id,
     nodeName: item.id,
     isIncludePredictNodes: item.isIncludePredictNodes,
@@ -96,10 +105,17 @@ const initChart = () => {
   })
 
   const data = { nodes, links }
-
   const categories = [
-    { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}` },
-    { name: "含预测节点社团", category: 1, icon:  `image://${new URL(predictionNodeImg, import.meta.url)}` },
+    {
+      name: "普通社团",
+      category: 0,
+      icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}`
+    },
+    {
+      name: "含预测节点社团",
+      category: 1,
+      icon: `image://${new URL(predictionNodeImg, import.meta.url)}`
+    },
     {
       name: props.interactionStore.predictionLegendContent,
       category: 2,
@@ -273,8 +289,6 @@ const initChart = () => {
 
 const handleClickNode = () => {
   chart.on("click", function (params) {
-    console.log(params)
-
     if (params.dataType === "node") {
       emit("click:node", params.data)
     } else if (params.dataType == "edge") {
@@ -286,8 +300,11 @@ const handleClickNode = () => {
   })
 }
 
-onMounted(async () => {
-  initChart()
+onMounted(() => {
+  // 确保容器存在
+  const container = document.getElementById("container")
+  if (!container) return
+  chart = echarts.init(container)
   handleClickNode()
 })
 </script>

src/views/LinkPrediction/socialGroups/components/communityNode.vue

@@ -12,24 +12,29 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, inject } from "vue" // 添加onUnmounted
+import { onMounted, onUnmounted, inject, watch, ref } from "vue" // 添加onUnmounted
 import * as echarts from "echarts"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
 import predictionNodeImg from "@/assets/images/linkPrediction/icon/prediction-node.png"
 import hiddenNodeImg from "@/assets/images/linkPrediction/icon/hidden-node.png"
 import normalGroupNodeImg from "@/assets/images/linkPrediction/icon/normal-group-node.png"
 
-
 let chart = null
 let linkList = null
 let nodeList = null
 const emit = defineEmits(["click:node", "click:edge"])
 const statisticsList = inject("statisticsList")
-const communityNodeList = inject("communityNodeList")
+const communityNodeList = ref(inject("communityNodeList"))
 
-const initChart = async () => {
-  chart = echarts.init(document.getElementById("container"))
+watch(
+  communityNodeList,
+  () => {
+    initChart()
+  },
+  { deep: true }
+)
 
+const initChart = () => {
   const imageSelect = (node) => {
     if (node.isIncludePredictNodes) {
       if (node.selfIncludeImplicitRelationship) {
@@ -43,10 +48,10 @@ const initChart = async () => {
   }
 
   //处理社团节点
-  const nodes = Object.values(communityNodeList).map((item) => ({
-    id: (item.id),
-    nodeName: (item.id),
-    symbol:  imageSelect(item),
+  const nodes = Object.values(communityNodeList.value).map((item) => ({
+    id: item.id,
+    nodeName: item.id,
+    symbol: imageSelect(item),
     symbolSize: 30,
     isIncludePredictNodes: item.isIncludePredictNodes,
     nodesNum: item.nodesNum,
@@ -83,9 +88,21 @@ const initChart = async () => {
   const data = { nodes, links }
 
   const categories = [
-    { name: "普通社团", category: 0, icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}`},
-    { name: "含预测节点社团", category: 1, icon:  `image://${new URL(predictionNodeImg, import.meta.url)}`},
-    { name: "紧密团体关系", category: 2, icon:  `image://${new URL('@/assets/images/linkPrediction/icon/tight-community-legend-icon.png', import.meta.url)}`}
+    {
+      name: "普通社团",
+      category: 0,
+      icon: `image://${new URL(normalGroupNodeImg, import.meta.url)}`
+    },
+    {
+      name: "含预测节点社团",
+      category: 1,
+      icon: `image://${new URL(predictionNodeImg, import.meta.url)}`
+    },
+    {
+      name: "紧密团体关系",
+      category: 2,
+      icon: `image://${new URL("@/assets/images/linkPrediction/icon/tight-community-legend-icon.png", import.meta.url)}`
+    }
   ]
   const option = {
     //图例配置
@@ -279,10 +296,9 @@ const handleClickNode = () => {
   })
 }
 
-onMounted(async () => {
-  await initChart()
+onMounted(() => {
+  chart = echarts.init(document.getElementById("container"))
   handleClickNode()
-  console.log("nodeList", nodeList)
 })
 
 onUnmounted(() => {

src/views/LinkPrediction/socialGroups/index.vue

@@ -150,8 +150,10 @@ import userChartTitleImg from "@/assets/images/linkPrediction/title/interaction-
 import graphTitleImg from "@/assets/images/linkPrediction/title/graph1-title.png"
 import analysisTitleImg from "@/assets/images/linkPrediction/title/analysis-title.png"
 import { getAvatarUrl } from "@/utils/transform"
+import { storeToRefs } from "pinia"
 const socialGroupsStore = useSocialGroupsStore()
 
+const { communityNodeList } = storeToRefs(socialGroupsStore)
 //控制弹窗
 const postDialog = ref(false)
 
@@ -188,7 +190,7 @@ onMounted(() => {
   socialGroupsStore.initGraphStatistics()
 })
 
-provide("communityNodeList", socialGroupsStore.communityNodeList)
+provide("communityNodeList", communityNodeList)
 provide("statisticsList", socialGroupsStore.statisticsList)
 </script>