From 2b43e9f4e1f5dcfb99f435a0129c6a3b0df7229b Mon Sep 17 00:00:00 2001
From: zhangli <2235006734@qq.com>
Date: Sun, 8 Oct 2023 10:02:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                          |  3 ++
 src/components/iFrame/src/IFrame.vue      | 40 +++++++++++++++++++++--
 src/views/infra/customInterface/index.vue | 23 +++++++++++++
 src/views/report/goview/index.vue         |  2 +-
 4 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 src/views/infra/customInterface/index.vue

diff --git a/.env.development b/.env.development
index 81a5ed3ea..17b3bbde2 100644
--- a/.env.development
+++ b/.env.development
@@ -29,3 +29,6 @@ VITE_SOURCEMAP=false
 
 # 输出路径
 VITE_OUT_DIR=dist
+
+# 自定义接口路径
+VITE_INTERFACE_URL='http://localhost:12080/magic/web/index.html'
diff --git a/src/components/iFrame/src/IFrame.vue b/src/components/iFrame/src/IFrame.vue
index 19de51a32..85b3e3c34 100644
--- a/src/components/iFrame/src/IFrame.vue
+++ b/src/components/iFrame/src/IFrame.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
+import { getAccessToken, getTenantId } from '@/utils/auth'
 
 defineOptions({ name: 'IFrame' })
 
@@ -13,7 +14,33 @@ const init = () => {
   height.value = document.documentElement.clientHeight - 94.5 + 'px'
   loading.value = false
 }
+console.log(props.src);
+
+function populateIframe(iframe, headers) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", props.src);
+  xhr.responseType = "blob";
+  headers.forEach((header) => {
+    xhr.setRequestHeader(header[0], header[1]);
+  });
+  // xhr.onreadystatechange = () => {
+  //   if (xhr.readyState === xhr.DONE) {
+      
+  //     if (xhr.status === 200) {
+  //       iframe.src = URL.createObjectURL(xhr.response);
+  //     }
+  //   }
+  // };
+  xhr.send();
+}
+
+
 onMounted(() => {
+  
+  setTimeout(() => {
+    var iframe = document.querySelector("#iframe");
+    populateIframe(iframe, [["Authorization", 'Bearer ' +  getAccessToken()], ["tenant-id", getTenantId()]]);
+  }, 300);
   setTimeout(() => {
     init()
   }, 300)
@@ -21,12 +48,21 @@ onMounted(() => {
 </script>
 <template>
   <div v-loading="loading" :style="'height:' + height">
-    <iframe
+    <!-- <iframe
       ref="frameRef"
       :src="props.src"
       frameborder="no"
       scrolling="auto"
       style="width: 100%; height: 100%"
-    ></iframe>
+      id="iframe"
+    ></iframe> -->
+    <iframe
+        ref="frameRef"
+        frameborder="no"
+        scrolling="auto"
+        style="width: 100%; height: 100%"
+        id="iframe"
+        :src="props.src"
+      ></iframe>
   </div>
 </template>
diff --git a/src/views/infra/customInterface/index.vue b/src/views/infra/customInterface/index.vue
new file mode 100644
index 000000000..823aa1219
--- /dev/null
+++ b/src/views/infra/customInterface/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <ContentWrap>
+    <IFrame :src="src" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup name="CustomInterface">
+// import { getAccessToken, getTenantId } from '@/utils/auth'
+const src = import.meta.env.VITE_INTERFACE_URL
+
+// window.MAGIC_EDITOR_CONFIG = {
+//   request: {
+//     beforeSend: function (config) {
+//       // 如果是基于Cookie验证的，此处可以不配。
+//       config.headers.token = getAccessToken() // 此处自行获取Token
+//       return config;
+//     }
+//   },
+//   getMagicTokenValue: function () {
+//     var token = getAccessToken(); // 此处自行获取token 
+//     return token;
+//   }
+// }
+</script>
diff --git a/src/views/report/goview/index.vue b/src/views/report/goview/index.vue
index de90f6243..1bac28692 100644
--- a/src/views/report/goview/index.vue
+++ b/src/views/report/goview/index.vue
@@ -6,5 +6,5 @@
 <script lang="ts" setup>
 defineOptions({ name: 'GoView' })
 
-const src = 'http://localhost:3000'
+const src = 'http://127.0.0.1:3000'
 </script>