Iframe-PlotlyJs-Comp.vue

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

@@ -1,30 +1,37 @@
 <script setup lang="ts">
 const src = computed(() => `${import.meta.env.BASE_URL}iframe/for-plotly.html`);
 
-type I频谱图数据 = number[];
+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 频谱图Element: import('plotly.js-dist-min').PlotlyHTMLElement | null = null;
+// let 瀑布图Element: 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 频谱瀑布图Layout = {
+  title: '频谱瀑布图',
+  xaxis: {
+    title: '频率 (Hz)',
+    // range: [0, 22_050],
+    showgrid: false,
+  },
+  yaxis: {
+    title: '时间步',
+    showgrid: false,
+  },
+  margin: { l: 60, r: 40, b: 40, t: 60 },
+};
 
-const data = [频谱图Trace];
-
-const 频谱图layout = {
+const 频谱图Layout = {
   title: '频谱图',
   xaxis: {
     title: '频率 (Hz)',
@@ -39,35 +46,39 @@ const 频谱图layout = {
     gridcolor: '#eee',
     tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
   },
-  margin: { l: 60, r: 40, b: 60, t: 60 },
+  margin: { l: 60, r: 40, b: 40, t: 60 },
 } satisfies Partial<import('plotly.js-dist-min').Layout>;
 
 defineExpose({
-  执行画图: async (数据: I频谱图数据, FFT大小: number /* 也叫快速傅里叶变换大小 */, 采样率: number) => {
-    console.debug('[执行画图被调用]', `数据.length :>> `, 数据.length);
-    await readyPromise;
+  添加数据: async (DB数据: I数据, FFT大小: number /* 也叫快速傅里叶变换大小 */, 采样率: number) => {
     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);
+    {
+      // 频谱图
+      console.debug('[添加数据被调用]', `数据.length :>> `, DB数据.length);
+      await readyPromise;
+      // 先清空之前的数据
+      await contentWindow!.Plotly.react(频谱图Element!, [], 频谱图Layout);
+      const x频率数据 = Array.from({ length: DB数据.length }, (_, i) => i * 频率分辨率);
+      await contentWindow!.Plotly.addTraces(频谱图Element!, {
+        x: x频率数据,
+        y: DB数据,
+        type: 'scatter',
+        line: { color: 'blue' },
+      });
+    }
+
+    {
+      // 瀑布图
+    }
   },
 });
 
 async function onIframeLoad() {
   console.debug('[onIframeLoad] iframe 加载完成');
   contentWindow = iframeRef.value!.contentWindow as WindowWithPlotly;
-  plotlyElement = await contentWindow.Plotly.newPlot('PLOTLY_CHART', data, 频谱图layout);
+  频谱图Element = await contentWindow.Plotly.newPlot('PLOTLY_CHART_spectrogram', [], 频谱图Layout);
+  瀑布图Element = await contentWindow.Plotly.newPlot('PLOTLY_CHART_waterfall', [], 频谱瀑布图Layout);
   _readyPromiseReslove();
 }
 onMounted(() => {

src/pages/Page/iframe-page/Iframe-PlotlyJs.page.vue

@@ -5,7 +5,7 @@ const compRef = useTemplateRef('compRef');
 
 onMounted(() => {
   console.debug('[onMounted] page 加载完成');
-  compRef.value!.执行画图(
+  compRef.value!.添加数据(
     频谱图数据, // 实际数据点为32768
     65_536, // FFT大小为65536
     96_000, // 采样率为96000
@@ -14,7 +14,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <IframePlotlyJsComp ref="compRef" style="width: 1400px; height: 400px; max-width: 100%" />
+  <IframePlotlyJsComp ref="compRef" style="width: 1400px; height: 600px; max-width: 100%" />
 </template>
 
 <style scoped></style>