Iframe-PlotlyJs.page.vue

2025-04-17 19:28:47 +08:00
parent 95d5087b5e
commit ebed0cf4bf
7 changed files with 290548 additions and 41 deletions
--- a/public/iframe/for-plotly.html
+++ b/public/iframe/for-plotly.html
@ -0,0 +1,32 @@
+<!--
+XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Plotly 图表的 HTML 页面</title>
+    <!-- <script src="https://cdn.plot.ly/plotly-3.0.1.js"></script> -->
+    <script src="./plotly-3.0.1.js"></script>
+  </head>
+  <body>
+    <div id="PLOTLY_CHART" style="width: 100%; height: 100%"></div>
+  </body>
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden; /* 防止滚动条出现 */
+    }
+
+    /* 确保容器占满整个 iframe */
+    body > div {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</html>
--- a/public/iframe/plotly-3.0.1.js
+++ b/public/iframe/plotly-3.0.1.js
--- a/src/components/iframe-page-comps/Iframe-PlotlyJs-Comp.vue
+++ b/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>
--- a/src/pages/Page/iframe-page/Iframe-PlotlyJs.page.vue
+++ b/src/pages/Page/iframe-page/Iframe-PlotlyJs.page.vue
@ -0,0 +1,20 @@
+<script setup lang="ts">
+import 频谱图数据 from './_频谱图_fftSize65536_32768条.json';
+
+const compRef = useTemplateRef('compRef');
+
+onMounted(() => {
+  console.debug('[onMounted] page 加载完成');
+  compRef.value!.执行画图(
+    频谱图数据, // 实际数据点为32768
+    65_536, // FFT大小为65536
+    96_000, // 采样率为96000
+  );
+});
+</script>
+
+<template>
+  <IframePlotlyJsComp ref="compRef" style="width: 1400px; height: 400px; max-width: 100%" />
+</template>
+
+<style scoped></style>
--- a/src/pages/Page/iframe-page/_频谱图_fftSize65536_32768条.json
+++ b/src/pages/Page/iframe-page/_频谱图_fftSize65536_32768条.json
--- a/src/pages/PkgsUsage/PlotlyJs.page.vue
+++ b/src/pages/PkgsUsage/PlotlyJs.page.vue
@ -1,40 +0,0 @@
-<script setup lang="ts">
-import Plotly from 'plotly.js-dist-min';
-
-const plotRef = useTemplateRef<import('plotly.js-dist-min').PlotlyHTMLElement | null>('plotRef');
-
-// 数据
-const trace1 = {
-  x: [1, 2, 3, 4, 5],
-  y: [2, 4, 1, 5, 3],
-  type: 'scatter',
-} satisfies import('plotly.js-dist-min').Data;
-
-const data = [trace1];
-
-// 布局
-const layout = {
-  title: '简单折线图',
-  xaxis: {
-    title: 'X 轴',
-  },
-  yaxis: {
-    title: 'Y 轴',
-  },
-} satisfies Partial<import('plotly.js-dist-min').Layout>;
-
-onMounted(async () => {
-  // 绘制图表
-  Plotly.newPlot(plotRef.value!, data, layout);
-
-  plotRef.value?.on('plotly_relayout', (eventData) => {
-    console.debug(`eventData :>> `, eventData);
-  });
-});
-</script>
-
-<template>
-  <div ref="plotRef" style="width: 600px; height: 400px"></div>
-</template>
-
-<style scoped></style>
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@ -29,6 +29,7 @@ declare module 'vue-router/auto-routes' {
    'PageDomDraggable': RouteRecordInfo<'PageDomDraggable', '/Page/Dom-Draggable', Record<never, never>, Record<never, never>>,
    'PageFonts': RouteRecordInfo<'PageFonts', '/Page/fonts', Record<never, never>, Record<never, never>>,
    'PageIcons': RouteRecordInfo<'PageIcons', '/Page/Icons', Record<never, never>, Record<never, never>>,
+    'PageIframePageIframePlotlyJs': RouteRecordInfo<'PageIframePageIframePlotlyJs', '/Page/iframe-page/Iframe-PlotlyJs', Record<never, never>, Record<never, never>>,
    'PageIframePageIframeConstellationDiagram': RouteRecordInfo<'PageIframePageIframeConstellationDiagram', '/Page/iframe-page/IframeConstellationDiagram', Record<never, never>, Record<never, never>>,
    'PageIframePageSpectrogram': RouteRecordInfo<'PageIframePageSpectrogram', '/Page/iframe-page/Spectrogram', Record<never, never>, Record<never, never>>,
    'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>,
@ -36,7 +37,6 @@ declare module 'vue-router/auto-routes' {
    'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
    'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
    'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
-    'PkgsUsagePlotlyJs': RouteRecordInfo<'PkgsUsagePlotlyJs', '/PkgsUsage/PlotlyJs', Record<never, never>, Record<never, never>>,
    'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,
    'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>,
    'UIComponentsComponents': RouteRecordInfo<'UIComponentsComponents', '/UI-components/Components', Record<never, never>, Record<never, never>>,