Iframe-PlotlyJs.page.vue

src/components/iframe-page-comps/Iframe-PlotlyJs-Comp.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const src = computed(() => `${import.meta.env.BASE_URL}iframe/for-plotly.html`);
+
+type I频谱图数据 = number[];
+type WindowWithPlotly = Window & {
+  Plotly: typeof import('plotly.js-dist-min');
+};
+
+const iframeRef = useTemplateRef<HTMLIFrameElement>('iframeRef');
+let contentWindow: null | WindowWithPlotly = null;
+let plotlyElement: import('plotly.js-dist-min').PlotlyHTMLElement | null = null;
+let _readyPromiseReslove = () => {};
+const readyPromise = new Promise<void>((resolve) => {
+  _readyPromiseReslove = resolve;
+});
+
+const 频谱图Trace = {
+  name: '频谱',
+  x: [],
+  y: [],
+  type: 'scatter',
+  line: { color: 'blue' },
+} satisfies import('plotly.js-dist-min').Data;
+
+const data = [频谱图Trace];
+
+const 频谱图layout = {
+  title: '频谱图',
+  xaxis: {
+    title: '频率 (Hz)',
+    // range: [0, 22_050],
+    showgrid: true,
+    gridcolor: '#eee',
+    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
+  },
+  yaxis: {
+    title: '幅度 (dB)',
+    showgrid: true, // 显示网格线
+    gridcolor: '#eee',
+    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
+  },
+  margin: { l: 60, r: 40, b: 60, t: 60 },
+} satisfies Partial<import('plotly.js-dist-min').Layout>;
+
+defineExpose({
+  执行画图: async (数据: I频谱图数据, FFT大小: number /* 也叫快速傅里叶变换大小 */, 采样率: number) => {
+    console.debug('[执行画图被调用]', `数据.length :>> `, 数据.length);
+    await readyPromise;
+    const 频率分辨率 = 采样率 / FFT大小;
+    const x数据 = Array.from({ length: 数据.length }, (_, i) => i * 频率分辨率);
+    contentWindow!.Plotly.addTraces(plotlyElement!, {
+      x: x数据,
+      y: 数据,
+    });
+
+    // // 清除之前的数据并添加新数据
+    // contentWindow!.Plotly.newPlot(plotlyElement!, [{
+    //   x: x数据,
+    //   y: data,
+    //   type: 'scatter',
+    //   line: { color: 'blue' },
+    //   name: '频谱'
+    // }], 频谱图layout);
+  },
+});
+
+async function onIframeLoad() {
+  console.debug('[onIframeLoad] iframe 加载完成');
+  contentWindow = iframeRef.value!.contentWindow as WindowWithPlotly;
+  plotlyElement = await contentWindow.Plotly.newPlot('PLOTLY_CHART', data, 频谱图layout);
+  _readyPromiseReslove();
+}
+onMounted(() => {
+  console.debug('[onMounted] comp 加载完成');
+});
+</script>
+
+<template>
+  <iframe ref="iframeRef" @load="onIframeLoad" :src style="width: 100%; height: 100%; border: none" />
+</template>