Browse Source

自定义接口

master
zhangli 1 year ago
parent
commit
2b43e9f4e1
  1. 3
      .env.development
  2. 38
      src/components/iFrame/src/IFrame.vue
  3. 23
      src/views/infra/customInterface/index.vue
  4. 2
      src/views/report/goview/index.vue

3
.env.development

@ -29,3 +29,6 @@ VITE_SOURCEMAP=false
# 输出路径 # 输出路径
VITE_OUT_DIR=dist VITE_OUT_DIR=dist
# 自定义接口路径
VITE_INTERFACE_URL='http://localhost:12080/magic/web/index.html'

38
src/components/iFrame/src/IFrame.vue

@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { getAccessToken, getTenantId } from '@/utils/auth'
defineOptions({ name: 'IFrame' }) defineOptions({ name: 'IFrame' })
@ -13,7 +14,33 @@ const init = () => {
height.value = document.documentElement.clientHeight - 94.5 + 'px' height.value = document.documentElement.clientHeight - 94.5 + 'px'
loading.value = false 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(() => { onMounted(() => {
setTimeout(() => {
var iframe = document.querySelector("#iframe");
populateIframe(iframe, [["Authorization", 'Bearer ' + getAccessToken()], ["tenant-id", getTenantId()]]);
}, 300);
setTimeout(() => { setTimeout(() => {
init() init()
}, 300) }, 300)
@ -21,12 +48,21 @@ onMounted(() => {
</script> </script>
<template> <template>
<div v-loading="loading" :style="'height:' + height"> <div v-loading="loading" :style="'height:' + height">
<iframe <!-- <iframe
ref="frameRef" ref="frameRef"
:src="props.src" :src="props.src"
frameborder="no" frameborder="no"
scrolling="auto" scrolling="auto"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
id="iframe"
></iframe> -->
<iframe
ref="frameRef"
frameborder="no"
scrolling="auto"
style="width: 100%; height: 100%"
id="iframe"
:src="props.src"
></iframe> ></iframe>
</div> </div>
</template> </template>

23
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>

2
src/views/report/goview/index.vue

@ -6,5 +6,5 @@
<script lang="ts" setup> <script lang="ts" setup>
defineOptions({ name: 'GoView' }) defineOptions({ name: 'GoView' })
const src = 'http://localhost:3000' const src = 'http://127.0.0.1:3000'
</script> </script>

Loading…
Cancel
Save