历史回顾 图表加载完毕前显示loading效果

public/chart.html

@@ -242,9 +242,8 @@
           })
         }
       }
-      console.log(nodesForRender);
-      console.log(edgesForRender);
       showAll()
+      window.parent.postMessage('fetch data done', '*')
     })
     
     let myChart = null

public/chart4app.html

@@ -250,9 +250,8 @@
           })
         }
       }
-      console.log(nodesForRender);
-      console.log(edgesForRender);
       showAll()
+      window.parent.postMessage('fetch data done', '*')
     })
     
     let myChart = null

src/views/History.vue

@@ -87,8 +87,10 @@ import {
   computed,
   watch,
   watchEffect,
+  onBeforeMount,
 } from 'vue'
 import dataRaw from "@/assets/mock/history.json"
+import { ElLoading } from 'element-plus'
 
 export default {
   name: 'HistoryView',
@@ -107,6 +109,20 @@ export default {
     const activeTimeIdx = ref(null)
     const activeCorpId = ref('')
 
+    // loading相关
+    const loadingInstance = ElLoading.service({
+      background: 'transparent',
+    })
+    function onIframeMessageForLoading(e) {
+      if (e.data === 'fetch data done') {
+        loadingInstance.close()
+      }
+    }
+    window.addEventListener('message', onIframeMessageForLoading)
+    onBeforeUnmount(() => {
+      window.removeEventListener('message', onIframeMessageForLoading)
+    })
+
     function onIframeMessage(e) {
       if (e.data.msg !== 'node-selected') {
         return