FVS大屛支援的JS API場景

适用場景：安裝了「FVS大屏編輯模式」插件的用戶，可參考本文了解 FVS 模板的相關功能。

注：不支持移動端。

1.1 版本

1.2 功能簡介

FVS 大屏範本中支援使用JavaScript代碼觸發聯動、跳轉等互動效果。

FVS 大屛範本開發中，可在頁面加載結束事件、表格加載結束事件、互動-點擊事件、互動-輪播事件中使用JS。

2.1 頁面加載結束事件

在FVS畫布編輯頁面，選擇菜單欄【範本】→【頁面加載結束事件】，進入JavaScript代碼編輯介面。

頁面加載結束事件的設定對整張FVS大屏範本生效。

2.2 初始化後事件

「初始化後事件」爲 V1.5.0 版本插件新增的事件類型，僅 表格組件 和所有 元件組件 支持初始化後事件。

表格組件的「初始化後事件」對應 V1.5.0 版本之前的插件中，表格組件編輯界面頂部菜單欄「範本」中的「表格加載結束事件」。

2.3 編輯結束事件

「編輯結束事件」爲 V1.5.0 版本插件新增的事件類型，僅「文本框控件、日期時間控件、下拉框控件、下拉複選框控件」支持編輯結束事件。

2.4.1 除元件外的其他組件

選中單個組件，點選配置欄「交互>點選事件」，支援新增 JavaScript 型別的點選事件。事件在點選這個組件/組件內指定內容時生效。

注：以下組件不支援點選事件：

富正文組件、表格組件、輪播器組件、網頁框組件、本地視頻組件、本地監視組件

輪播餅圖、輪播夜光儀表盤、水球圖、像素點圖、輪播閃爍指標卡、輪播電子指標卡、輪播目錄齒輪圖、輪播三維組合地圖、輪播GIS點地圖、輪播條形圖、弧形柱形圖、粒子計數器、三維流向地球、時間齒輪

2.4.2 元件組件

V1.5.0 版本插件新增元件以及元件事件，僅「無線電鈕組元件、複選按鈕組元件」支援點選事件，且點選事件僅支援使用 JavaScript 代碼。如下圖所示：

2.5 互動-輪播事件

選中單個組件，點擊配置欄【互動】→【輪播設定】→【新增輪播事件】→【JavaScript】，進入JavaScript代碼編輯介面。

事件在這個組件/組件内指定内容輪播時生效。

注：僅以下組件支援JavaScript類型的輪播事件：

場景地圖、輪播器組件、電子智慧樹圖、模型智慧樹圖、輪播餅圖、輪播夜光儀表盤、水球圖、像素點圖、輪播閃爍指标卡、輪播電子指标卡、輪播目錄齒輪圖、輪播三維組合地圖、輪播GIS點地圖。

3.1 呼叫API的方法

在使用 FineReport 設計器其他報表型別時，呼叫全局API一般使用 FR.xxx ，呼叫組件API一般使用 _g.xxx 。

但是在 FVS 企業戰情室報表中，呼叫API的方式統一為 duchamp.xxx 。

3.2 圖表支援的API

在 FVS大屏報表中，圖表支援的API暫時只有 openAutoTooltip() ，即開啓圖表資料點提示輪播。

詳情請參見文檔：FVS基礎圖表實現資料點提示輪播 。

代碼範例如下：

duchamp.on("storychange", (current) => {
  if (current === "頁面2") {
    duchamp.getWidgetByName("組件1").openAutoTooltip();
  }
});

3.3 JS腳本中 document 的用法

在 FVS 大屏報表中，不支持直接使用 document 的 API ，也不建議使用 document ，尤其不能使用 document 取 fvs 頁面内部元素，後續升級無法保證兼容。

若一定要使用，需在 JavaScript 代碼前加上 "use document"; 。

例如當符合某特定條件時，比如某參數值>100，觸發聲音提示。JavaScript 代碼示例如下：

"use document";
// 創建⼀個 audio 标簽⽤於播放聲⾳
const audio = document.createElement("audio");
// 指定⼀個 mp3 ⽂件，⽤來播放此 mp3 ⽂件。
audio.src = "/webroot/help/5196.mp3";
audio.loop = true;// 設置爲循環播放
document.body.appendChild(audio);// 将标簽添加到⻚⾯上，否則⽆法播放。
// 創建⼀個定時循環，周期爲 2 秒
const interval = setInterval(() => {
 // 獲取fvs⻚⾯中名字叫 組件1 的組件
 const widget = duchamp.getWidgetByName("組件1");
 // 判斷這個組件的參數abc 的值是否是⼤於100，如果⼤於100
 if (widget.getParameters("abc") > 100) {
 audio.play();// 開始播放
 clearInterval(interval);// 停⽌定時循環
 }
}, 2000);