<template>
  <div class="iframe-container">
    <iframe
      ref="iframeRef"
      :src="externalUrl"
      :width="iframeWidth"
      :height="iframeHeight"
      frameborder="0"
      @load="onIframeLoad"
    ></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 外部页面的URL
//const externalUrl = 'http://10.0.0.101:8080/webroot/decision/view/report?viewlet=out%252FWorkOrderlist.cpt&c1=1370100102002H07B05062024122601';
const externalUrl = 'http://10.0.0.101:8080/webroot/decision/view/report?viewlet=out%252FWorkOrder.cpt';
// iframe的宽度
const iframeWidth = '100%';
// iframe的高度
const iframeHeight = '900px';
// 用于获取iframe元素的引用
const iframeRef = ref(null);
// 用于记录iframe是否加载完成
const iframeLoaded = ref(false);

const onIframeLoad = () => {
  iframeLoaded.value = true;
  console.log('Iframe loaded successfully.');
};

onMounted(() => {
  // 可以在这里进行一些初始化操作，例如设置iframe的属性等
});
</script>

<style scoped>
.iframe-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
</style>
