智慧楼宇 freeswitch 智慧楼宇管理平台

智慧楼宇管理平台

• 示例描述与操作指南
• 示例效果展示
• 应用场景
• 实现步骤

• 第一步 初始化设置功能
• 第二步 初始化查看设备信息功能
• 第三步 初始化重点区域监控功能
• 第四步 初始化热力分布功能

• 相关接口
• 相关示例

示例描述与操作指南

点击示例内各个功能，可以查看到建筑中的监控图像，了解各个楼层的热力分布，同时可查看各层建筑的构件详情，楼层剖切，也可观察楼层中各系统的占比，更快速的处理建筑中突发情况，实现智慧楼宇的意义。

示例效果展示

应用场景

智慧楼宇管理平台管理系统是智能建筑的主要组成部分之一。
智能建筑通过楼宇自动化系统实现建筑物（群）内设备与建筑环境的全面监控与管理，为建筑的使用者营造一个舒适、安全、经济、高效、便捷的工作生活环境，并通过优化设备运行与管理，降低运营费用。

实现步骤

第一步 初始化设置功能

加载完模型后初始化设置功能

// 初始化设置功能
function initSetting() {
    bindSettingEvent();
}

第二步 初始化查看设备信息功能

加载完模型后初始化查看设备信息功能

// 初始化查看设备信息功能
function initEquipmentInfo() {
    // 监听点击构件事件
    component.on &&
        component.on("click", function (rlt) {
            const panelDom = $("#attribute-show");
            if (!panelDom.parents(".panel").hasClass("active")) {
                // 若设备信息面板未激活，则退出
                return;
            }
            if (!rlt.status) {
                // 若点击查看数据失败，则清空信息、提示用户并退出
                switcEmptyTip(true);
                panelDom.find("li:not(.empty-tip)").remove(); // 删除旧数据
                return;
            }
            const {
                componentKey,
                componentName,
                componentTypeEx,
                detailInfo = {},
            } = rlt;
            let renderHtml = `<li>
                                    <div class="name">构件名称</div>
                                    <div class="content">${componentName}</div>
                                </li>
                                <li>
                                    <div class="name">构件Key</div>
                                    <div class="content">${componentKey}</div>
                                </li>
                                <li>
                                    <div class="name">构件类型</div>
                                    <div class="content">${componentTypeEx}</div>
                                </li>`;
            if (Object.keys(detailInfo).length > 0) {
                Object.values(detailInfo).forEach((item) => {
                    for (const itemKey in item) {
                        if (item.hasOwnProperty(itemKey)) {
                            renderHtml += `<li>
                                                <div class="name">${itemKey}</div>
                                                <div class="content">${item[itemKey]}</div>
                                            </li>`;
                        }
                    }
                });
            }
            switcEmptyTip(false);
            panelDom.find("li:not(.empty-tip)").remove(); // 删除旧数据
            panelDom.append($(renderHtml)); // 渲染数据
        });
}

第三步 初始化重点区域监控功能

加载完模型后初始化重点区域监控功能

// 初始化重点区域监控功能
function initAreaMonitor() {
    bindBtnEvent();
}

第四步 初始化热力分布功能

加载完模型后初始化热力分布功能

// 初始化热力分布功能
function initHeatDistribution() {
    getTreeLocationData();
}

下载完整代码

相关接口

model.on(‘load’)view.setSceneBackgroundcomponent.on(“click”)component.hidecomponent.showtoolbar.on(“home:click”)

相关示例

智慧屏幕中的能耗数据展示如何实现？