频谱: iframe-page-comps/IframeSpectrogram.vue

src/pages/Page/iframe-page/Spectrogram.page.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+definePage({ meta: { title: '频谱图+瀑布图' } });
+
+const iframeSpectrogramRef = useTemplateRef('iframeSpectrogramRef');
+
+// 模拟生成频谱数据的函数
+function generateFakeSpectrogramData(len = 200, baseLevel = -90, noiseRange = 30) {
+  const data = [];
+  for (let i = 0; i < len; i++) {
+    // 模拟一些峰值
+    let peak = 0;
+    if (i > len * 0.2 && i < len * 0.3) {
+      peak = 30 * Math.sin(((i - len * 0.2) / (len * 0.1)) * Math.PI); // 第一个峰
+    } else if (i > len * 0.6 && i < len * 0.75) {
+      peak = 20 * (1 - Math.abs(i - len * 0.675) / (len * 0.075)); // 第二个峰
+    }
+    data.push(baseLevel + Math.random() * noiseRange + peak);
+  }
+  return data;
+}
+
+// 定时更新数据以模拟实时效果
+let intervalId: null | number = null;
+
+onMounted(() => {
+  // 模拟: 每x秒更新一次数据并通过 ref 发送
+  intervalId = globalThis.setInterval(() => {
+    const newData = generateFakeSpectrogramData();
+    const newTime = new Date().toLocaleTimeString();
+
+    if (iframeSpectrogramRef.value) {
+      console.log('[📄] 页面：通过 ref 发送更新数据'.padEnd(120, '-'));
+      iframeSpectrogramRef.value.sendData(newData, newTime); // 传递动态获取的时间
+    } else {
+      console.warn('[📄] 页面：无法获取 IframeSpectrogram 组件的引用来发送更新数据');
+    }
+    console.log('[📄] 页面：更新频谱数据带时间');
+  }, 2000);
+});
+
+onUnmounted(() => {
+  // 清除定时器
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+});
+</script>
+
+<template>
+  <div>
+    <p>频谱图+瀑布图 (通过 iframe)</p>
+    <div style="width: 100%; height: 400px; border: 1px solid #ccc; margin-top: 10px">
+      <IframeSpectrogram ref="iframeSpectrogramRef" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 可以添加一些页面级别的样式 */
+</style>