智慧屏幕中的能耗數據展示如何實現？

示例描述與操作指南

能耗數據屏幕展示，是以室內燈光場景爲例，利用上方的功能按鈕交互顯示人數佔比、用電比例、發電趨勢、以及異常行爲分析的監控，同時點擊區域內燈光的開關功能，可以模擬室內燈光的點亮效果。

示例效果展示

實現步驟

第一步 添加光源

/**
* @description 創建聚光燈
* @param {array} spotLightList 聚光燈所在構件
* @param {number} color 聚光燈顏色
* @return undefined
*/
function createSpotLight(spotLightList, color) {
    spotLightList.forEach((item) => {
        const componentInfo = viewer3D
            .getViewerImpl()
            .modelManager.getComponent(item)[0]; // 獲取 BOS3D 中存儲的構件的信息
        if (!componentInfo) return; // 若構件信息不存在，則退出

        const spotTarget = new THREE.Object3D(); //  創建一個three對象，用作光源的target
        const targetPosition = [
            componentInfo.matrix.elements[12],
            componentInfo.matrix.elements[13],
            componentInfo.matrix.elements[14] - 3000,
        ]; // 通過燈的位置手動設置 target 物體的位置
        spotTarget.position.set(
            targetPosition[0],
            targetPosition[1],
            targetPosition[2]
        ); // 將這個target物體的位置設置爲該燈的位置的下方
        scene.add(spotTarget);
        const targetConfig = { target: spotTarget }; // 設置spotlight的聚光燈的焦點

        const spotLightObj = new THREE.SpotLight(color, 1); // 創建一個 Object3D，將位置設置在次筒燈的下面4000的位置，作爲此 spotLightObj 的 target
        Object.assign(spotLightObj, targetConfig, spotLightConfig); // 拷貝聚光燈的基礎配置信息
        componentInfo.mesh.add(spotLightObj); // 將此聚光燈添加到該筒燈的場景下
    });
}

第二步 添加統計圖表

加載完模型後向場內添加統計圖表。

// 創建圖表。基於準備好的dom，初始化echarts實例。詳細使用方式請查看 echarts.js 官網
function createReports() {
    const report1 = echarts.init(document.getElementById("report-1"));
    report1.setOption(option1); // 新建人數佔比圖表
    const report2 = echarts.init(document.getElementById("report-2"));
    report2.setOption(option2); // 新建發電趨勢圖表
    const report3 = echarts.init(document.getElementById("report-3"));
    report3.setOption(option3); // 新建用電比例圖表
    const report4 = echarts.init(document.getElementById("report-4"));
    report4.setOption(option4); // 新建異常分析圖表
}

第三步 添加Dom標籤

加載完模型後向場內添加Dom標籤。

/**
* @description 在指定位置創建 DOM 標籤
* @paran {object} config 標籤的配置信息
* @return undefined
*/
function createMark(config = {}) {
    const domElement = document.createElement("div");
    domElement.id = config.idName;
    domElement.classList.add("btn-switch");
    domElement.textContent = "點此打開";
    const domMarkOptions = Object.assign(
        {
            id: "123",
            color: [255, 255, 255],
            colorLine: [137, 247, 245],
            domElement: domElement,
        },
        {
            id: config.id,
            title: config.title,
            startPosition: config.startPosition,
            endPosition: config.endPosition,
        }
    );
    mark.addDomMark(domMarkOptions, () => {});
}ption(option4); // 新建異常分析圖表
}

應用場景

能耗數據屏幕展示可將海量大數據進行處理表現，酷炫的可視化樣式不僅在視覺上讓人感覺震撼，同時通過智能的方式將數據進行展現，提高了工作效率的同時也有助於使用者的數據監控，這些有根據的可視化數據提供給使用者進行更爲科學的判斷。

有需要的小夥伴可以到小紅磚開放平臺上查看完整代碼及調用接口哦～

下載完整代碼