92 lines
2.4 KiB
Vue
92 lines
2.4 KiB
Vue
<template>
|
||
<div class="go-iframe-container" :style="{ width: w + 'px', height: h + 'px' }">
|
||
<iframe ref="iframeRef" class="iframe-content" src="/public/static/index.html"></iframe>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import config, { BarOption } from './config';
|
||
import { PropType, toRefs, ref, onMounted, computed, watchEffect } from 'vue'; // 1. 引入 watchEffect
|
||
import dataJson from './data.json'
|
||
|
||
const iframeRef = ref<HTMLIFrameElement | null>(null);
|
||
const isIframeReady = ref(false); // 2. 创建一个状态来跟踪 iframe 是否已加载
|
||
let iframeApi: any = null;
|
||
|
||
const props = defineProps({
|
||
chartConfig: {
|
||
type: Object as PropType<config>,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
const { w, h } = toRefs(props.chartConfig.attr)
|
||
|
||
|
||
|
||
const BarOptionsData = computed(() => {
|
||
return dataJson.barOptions.map(item =>
|
||
new BarOption(item as unknown as Partial<BarOption>)
|
||
);
|
||
});
|
||
console.log(BarOptionsData)
|
||
|
||
onMounted(() => {
|
||
const iframe = iframeRef.value;
|
||
if (iframe) {
|
||
iframe.onload = () => {
|
||
console.log(" Iframe content has loaded!");
|
||
if (iframe.contentWindow && (iframe.contentWindow as any).g) {
|
||
iframeApi = (iframe.contentWindow as any).g.active3d;
|
||
isIframeReady.value = true;
|
||
} else {
|
||
console.error("无法访问 iframe 内的 g.active3d 对象。");
|
||
}
|
||
};
|
||
}
|
||
});
|
||
|
||
// 4. 使用 watchEffect 来处理所有绘图逻辑
|
||
// index.vue
|
||
|
||
watchEffect(() => {
|
||
if (isIframeReady.value && BarOptionsData.value && iframeApi) {
|
||
// console.log(" Drawing chart with new options...");
|
||
|
||
// 增加延迟，确保iframe内方法准备就绪
|
||
setTimeout(() => {
|
||
BarOptionsData.value.forEach(barConfig => {
|
||
// console.log(" Drawing bar with config:", barConfig);
|
||
callIframeMethod("createBar", barConfig);
|
||
});
|
||
}, 500); // 500ms延迟，可根据实际情况调整
|
||
}
|
||
});
|
||
|
||
|
||
/**
|
||
* 调用 iframe 内部方法的通用函数
|
||
*/
|
||
function callIframeMethod(methodName: string, ...args: any[]) {
|
||
if (iframeApi && typeof iframeApi[methodName] === 'function') {
|
||
iframeApi[methodName].apply(iframeApi, args);
|
||
} else if (isIframeReady.value) {
|
||
console.error(`方法 ${methodName} 在 iframe API 上不存在。`);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.go-iframe-container {
|
||
// width: 1300px;
|
||
// height: 900px;
|
||
overflow: hidden;
|
||
// border: 1px solid #ccc;
|
||
}
|
||
|
||
.iframe-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
</style> |