61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
definePage({ meta: { title: '频谱图+瀑布图' } });
|
|
|
|
const iframeSpectrogramRef = useTemplateRef('iframeSpectrogramRef');
|
|
|
|
// 模拟生成频谱数据的函数
|
|
function generateFakeSpectrogramData(len = 30, 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 | NodeJS.Timeout = 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('[📄] 页面：更新频谱数据带时间');
|
|
}, 1000);
|
|
});
|
|
|
|
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>
|