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

public/html-page/Spectrogram.html

@@ -54,14 +54,6 @@
         wfAdjStep: 1000,
       };
 
-      // 模拟频谱数据
-      const generateFakeData = (len) => {
-        const data = [];
-        for (let i = 0; i < len; i++) {
-          data.push(-80 - Math.random() * 20);
-        }
-        return data;
-      };
       const id = 'waterfall';
 
       // 定义 label_manager
@@ -85,62 +77,112 @@
         },
       };
 
-      // 初始化频谱图组件
-      this.waterWidget = new waterfallwidget(id, {
-        wfOption: wfOption,
-        min_freq: payload.minFreq, //全局最小频率
-        max_freq: payload.maxFreq, //全局最大频率
-        min_band: 500, //最小选择带宽
-        max_band: 100000, //最大选择带宽
-        min_db: wfOption.wfMindB, //全局最小增益
-        max_db: wfOption.wfMaxdB, //全局最大增益
-        showPeakMarker: wfOption.showPeakMarker, //是否显示极值标注
-        showSpectrogramAvg: wfOption.wfShowAvg, //是否显示平均保持
-        showSpectrogramMin: wfOption.wfShowMin, //是否显示最小保持
-        showSpectrogramMax: wfOption.wfShowMax, //是否显示最大保持
-        spec_per: payload.waveSplite, //波形图占比
-        menuEnableHandle: this.getAnalysisRun,
-        menuDisableText: '---',
-        menuDoppler: payload.doppler,
-        allowRunMode: payload.rtmode, //实时选择模式
-        //allowCycleControl: payload.allowCycleControl,
-        info_Position: wfOption.wfInfoPos,
-        showCurLine: wfOption.wfCurLine,
-        adj_maxbw: payload.adjMaxbw,
-        adj_show: payload.adjShow,
-        fucFFTBuff: payload.enableWfBuff ? this.fucFFTBuff.bind(this) : null,
-        unitBuffId: payload.unitId,
-        wave_color: wfOption.specColor,
-        wave_color_avg: wfOption.specAvgColor,
-        wave_color_max: wfOption.specMaxColor,
-        wave_color_min: wfOption.specMinColor,
-        waveAfterglow_color: wfOption.afterGlowColor,
-        adj_step: wfOption.wfAdjStepType == 1 ? 0 : wfOption.wfAdjStep,
-        label_manager: pl.label_manager,
-        coorFreqType: payload.coorFreqType,
-        showFreqLable: payload.showFreqLable, //是否显示高亮频点
-        wfFreqPointLable: payload.wfFreqPointLable, //是否显示频点标注
-        wfFreqPointLableList: payload.wfFreqPointLableList, //频点标注数据
-        showWhitelist: payload.showWhitelist, //黑名单频谱阴影显示
+      // 全局变量，用于存储 waterfallwidget 实例
+      window.waterWidgetInstance = null;
+
+      // 监听来自父窗口的消息
+      window.addEventListener('message', (event) => {
+        // 强烈建议在此处添加来源验证 (event.origin) 以提高安全性
+        // 例如: if (event.origin !== 'YOUR_VUE_APP_ORIGIN') return;
+
+        if (!event.data) return; // 如果没有数据，则忽略
+
+        // 处理初始化消息
+        if (event.data.type === 'INIT_WIDGET') {
+          console.log('[🌐] HTML (频谱图): 收到初始化指令');
+          if (!window.waterWidgetInstance) {
+            // 合并 Vue 传递的配置（如果存在）
+            const mergedPayload = { ...payload, ...(event.data.config?.payload || {}) };
+            const mergedWfOption = { ...wfOption, ...(event.data.config?.wfOption || {}) };
+
+            // 创建 waterfallwidget 实例
+            window.waterWidgetInstance = new waterfallwidget(id, {
+              wfOption: mergedWfOption,
+              min_freq: mergedPayload.minFreq,
+              max_freq: mergedPayload.maxFreq,
+              min_band: 500,
+              max_band: 100000,
+              min_db: mergedWfOption.wfMindB,
+              max_db: mergedWfOption.wfMaxdB,
+              showPeakMarker: mergedWfOption.showPeakMarker,
+              showSpectrogramAvg: mergedWfOption.wfShowAvg,
+              showSpectrogramMin: mergedWfOption.wfShowMin,
+              showSpectrogramMax: mergedWfOption.wfShowMax,
+              spec_per: mergedPayload.waveSplite,
+              menuEnableHandle: null, // 在 iframe 中通常不需要此句柄
+              menuDisableText: '---',
+              menuDoppler: mergedPayload.doppler,
+              allowRunMode: mergedPayload.rtmode,
+              info_Position: mergedWfOption.wfInfoPos,
+              showCurLine: mergedWfOption.wfCurLine,
+              adj_maxbw: mergedPayload.adjMaxbw,
+              adj_show: mergedPayload.adjShow,
+              fucFFTBuff: mergedPayload.enableWfBuff ? this.fucFFTBuff.bind(this) : null, // 如果需要，保留 FFT 缓冲功能
+              unitBuffId: mergedPayload.unitId,
+              wave_color: mergedWfOption.specColor,
+              wave_color_avg: mergedWfOption.specAvgColor,
+              wave_color_max: mergedWfOption.specMaxColor,
+              wave_color_min: mergedWfOption.specMinColor,
+              waveAfterglow_color: mergedWfOption.afterGlowColor,
+              adj_step: mergedWfOption.wfAdjStepType == 1 ? 0 : mergedWfOption.wfAdjStep,
+              label_manager: pl.label_manager, // 保留 label_manager
+              coorFreqType: mergedPayload.coorFreqType,
+              showFreqLable: mergedPayload.showFreqLable,
+              wfFreqPointLable: mergedPayload.wfFreqPointLable,
+              wfFreqPointLableList: mergedPayload.wfFreqPointLableList,
+              showWhitelist: mergedPayload.showWhitelist,
+            });
+            console.log('[🌐] HTML (频谱图): waterfallwidget 已实例化');
+
+            // 监听用户框选范围变更事件 (移到初始化之后)
+            window.waterWidgetInstance.on('zoom-change', (e) => {
+              console.log('频率范围变更:', e.start, e.end);
+              // 可选：将此事件通知回 Vue 组件
+              // if (window.parent !== window) {
+              //   window.parent.postMessage({ type: 'ZOOM_CHANGE', payload: { start: e.start, end: e.end } }, '*');
+              // }
+            });
+          } else {
+            console.log('[🌐] HTML (频谱图): waterfallwidget 已存在，无需重复实例化');
+          }
+          // 可选：通知父窗口已准备好接收数据
+          // if (window.parent !== window) {
+          //   window.parent.postMessage({ type: 'WIDGET_READY' }, '*'); // 使用更具体的 targetOrigin
+          // }
+        }
+        // 处理数据馈送消息
+        else if (event.data.type === 'FEED_DATA') {
+          if (window.waterWidgetInstance) {
+            console.log('[🌐] HTML (频谱图): 收到来自父窗口的数据:', event.data.payload);
+            if (Array.isArray(event.data.payload)) {
+              // waterfallwidget.addData 接受可选的第二个参数 time
+              // 如果 Vue 组件传递了时间戳，可以在这里使用
+              const time = event.data.time || new Date().toLocaleTimeString(); // 如果没有提供时间，使用当前时间
+              window.waterWidgetInstance.addData(event.data.payload, time);
+            } else {
+              console.error('[🌐] HTML (频谱图): 收到的数据格式无效:', event.data.payload);
+            }
+          } else {
+            console.warn('[🌐] HTML (频谱图): Widget 尚未初始化，无法处理 FEED_DATA');
+          }
+        }
       });
-      // 监听用户框选范围变更事件
-      this.waterWidget.on('zoom-change', (e) => {
-        console.log('频率范围变更:', e.start, e.end);
-      });
-
-      // 生成模拟数据并更新频谱图
-      const updateData = () => {
-        const data = generateFakeData(100 /* 0 */);
-        console.debug(`data :>> `, data);
-        const time = new Date().toLocaleTimeString();
-        this.waterWidget.addData(data, time);
-      };
-
-      // 首次更新
-      updateData();
-
-      // 定期更新数据
-      setInterval(updateData, 1000);
     </script>
   </body>
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden; /* 防止滚动条出现 */
+    }
+
+    /* 确保容器占满整个 iframe */
+    body > div {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 </html>