From edd4cc136606e4e5e019fbb49b54e365d7d76327 Mon Sep 17 00:00:00 2001
From: nanasikeai <nanasikeai@gmail.com>
Date: Mon, 4 Nov 2024 17:48:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90=E5=AE=A1=E8=AE=A1=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8=E3=80=91=E5=88=87=E6=8D=A2=E8=B7=AF=E7=94=B1=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=8A=A5=E8=A1=A8=20--bug=3D133310627?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/statement-manage/detail/index.vue   | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/views/statement-manage/detail/index.vue b/src/frontend/src/views/statement-manage/detail/index.vue
index b0667e6..1acc456 100644
--- a/src/frontend/src/views/statement-manage/detail/index.vue
+++ b/src/frontend/src/views/statement-manage/detail/index.vue
@@ -22,6 +22,7 @@
 <script setup lang="ts">
   import {
     onMounted,
+    onUnmounted,
     watch,
   } from 'vue';
   import {
@@ -43,6 +44,7 @@
   const route = useRoute();
   const { messageError } = useMessage();
   const {  emit } = useEventBus();
+  let app: any;
 
   const loadScript = (src: string) => new Promise((resolve, reject) => {
     const script = document.createElement('script');
@@ -62,33 +64,26 @@
     }
   };
 
-  const render = () => {
-    window.BkVisionSDK.init(
-      '#panel',
-      route.params.id,
-      {
-        apiPrefix: `${window.PROJECT_CONFIG.AJAX_URL_PREFIX}/bkvision/`,
-        chartToolMenu: [
-          { type: 'tool', id: 'fullscreen', build_in: true },
-          { type: 'tool', id: 'refresh', build_in: true },
-          { type: 'menu', id: 'excel', build_in: true },
-        ],
-        handleError,
-      },
-    );
+  const change = (uid: string) => {
+    app.update(uid);
   };
 
   const init = async  () => {
     try {
-      // 样式文件
-      // const link = document.createElement('link');
-      // link.href = 'https://staticfile.qq.com/bkvision/p7e76e4518060411cb65c6bc2eaea9c03/latest/main.css?v=1704275097';
-      // link.rel = 'stylesheet';
-      // document.body.append(link);
       await loadScript('https://staticfile.qq.com/bkvision/pbb9b207ba200407982a9bd3d3f2895d4/latest/main.js');
-      // await loadScript('https://staticfile.qq.com/bkvision/p7e76e4518060411cb65c6bc2eaea9c03/latest/chunk-bk-magic-vue.js?v=1704275097');
-      // await loadScript('https://staticfile.qq.com/bkvision/p7e76e4518060411cb65c6bc2eaea9c03/latest/main.js?v=1704275097');
-      render();
+      app = await window.BkVisionSDK.init(
+        '#panel',
+        route.params.id,
+        {
+          apiPrefix: `${window.PROJECT_CONFIG.AJAX_URL_PREFIX}/bkvision/`,
+          chartToolMenu: [
+            { type: 'tool', id: 'fullscreen', build_in: true },
+            { type: 'tool', id: 'refresh', build_in: true },
+            { type: 'menu', id: 'excel', build_in: true },
+          ],
+          handleError,
+        },
+      );
     } catch (error) {
       console.error(error);
     }
@@ -96,7 +91,7 @@
 
   watch(() => route, () => {
     if (route.params.id !== '' && route.name === 'statementManageDetail') {
-      render();
+      change(route.params.id as string);
     }
   }, {
     deep: true,
@@ -105,4 +100,10 @@
   onMounted(() => {
     init();
   });
+
+  onUnmounted(() => {
+    if (app) {
+      app.unmount();
+    }
+  });
 </script>