文档中心
目录

资产可视化 ​

机柜模型 ​

机柜模型可以使用3dsmax、blender等建模工具进行建模，需要遵循机柜特有的建模规范。不规范的机柜模型用于资产可视化，将导致各种问题，请勿将公共模型库中的机柜（遗弃，待删除）中的机柜模型用于资产可视化！

机柜标签 ​

如果要将机柜物体用于资产可视化，必须在搭建场景的时候给机柜物体添加机柜标签，参考标签。

资产可视化

资产模型编辑 ​

资产模型无需建模，而是通过模型资源工具库编辑，编辑得到模型数据应该保存成文件或者存入数据库中，以供后续使用。

资产可视化

机柜管理器组件 ​

机柜管理器组件CabinetMgr是资产可视化中的核心组件之一，它必须挂载于楼层或者园区层级，且该层级必须包含有 机柜 标签的物体，用于管理该层级下的所有机柜物体。

初始化资产模型 ​

在使用资产可视化之前，首先要先初始化资产模型。初始化资产模型通过机柜管理器组件的静态方法CabinetMgr.setAssetModel来完成，该方法的调用时机推荐在 app 实例创建之前。

CabinetMgr.setAssetModel 方法有两个参数：

  • model_id : string 类型，资产模型的ID，一般设置为资产管理系统中的资产型号ID。

  • data : RackMountedData 类型，资产模型数据，该数据通过模型资源工具库编辑后获得。

为了演示，我们编辑好了3个资产模型文件，资产型号ID分别为m001、m002、m003，并以JSON文件的形式保存在glowjs/data目录中，资产模型图片提取出来并存放在glowjs/asset目录中。在线示例，以下是示例代码：

typescript
/**
 * 入口函数
 * @param container DIV容器
 */
async function main(container: HTMLDivElement): Promise<void> {
    await initAssetModel();//初始化资产模型

    //创建一个GlowJS App实例
    let app: GLOW.App = new GLOW.App({
        container,
        projectFile: 'glowjs/project/file/2f66ef33c2bdfa9ac2d19eb8522b4157.json'
    });
    //调用App实例的加载方法
    app.load();
}

/** 初始化资产模型 */
async function initAssetModel(): Promise<void> {
    let model_ids: string[] = ["m001", "m002", "m003"];//资产型号ID列表
    for (let model_id of model_ids) {
        let model_url: string = `glowjs/data/${model_id}.json`;//资产模型数据JSON文件地址
        let data: GLOW.RackMountedData = await fetch(model_url).then(res => res.json());//下载资产模型数据
        GLOW.CabinetMgr.setAssetModel(model_id, data);//设置资产模型
    }
}

挂载机柜管理器组件 ​

机柜管理器组件需要手动挂载，挂载时机推荐在 app 的 LevelCreate 事件中，在线示例。以下是示例代码：

typescript
/**
 * 入口函数
 * @param container DIV容器
 */
async function main(container: HTMLDivElement): Promise<void> {
    //创建一个GlowJS App实例
    let app: GLOW.App = new GLOW.App({
        container,
        projectFile: 'glowjs/project/file/2f66ef33c2bdfa9ac2d19eb8522b4157.json'
    });

    app.once(GLOW.EventType.LevelCreate, () => {
        for (let campus of app.levelMgr.campuses) {//遍历园区
            addCabinetMgr(campus);//尝试给园区添加机柜管理器组件
            for (let building of campus.buildings) {//遍历建筑
                for (let floor of building.floors) {//遍历楼层
                    addCabinetMgr(floor);//尝试给楼层添加机柜管理器组件
                }
            }
        }
    });
    
    //调用App实例的加载方法
    app.load();
}

/** 给指定的层级添加机柜管理器组件 */
function addCabinetMgr(level: GLOW.Entity): void {
    if (!level.children.find(item => item.tags.has('机柜'))) return;//无机柜标签直接return
    level.addComponent(GLOW.CabinetMgr);//有机柜标签才添加组件
}

机柜组件 ​

机柜组件Cabinet，顾名思义就是挂载在包含机柜标签的物体上的组件。机柜组件不需要手动挂载，当机柜管理器组件挂载完毕后，层级中的机柜物体将自动添加 机柜组件，此时机柜物体具有交互功能了，鼠标移入有响应，鼠标双击可以进入打开机柜，右键双击可以关闭机柜。机柜管理器组件的 cabinets 属性将返回该层级下的所有机柜组件。

机柜观察方向 ​

大多数情况下，我们都是从机柜的前面观察机柜，资产设备也是安装在机柜的前面。事实上，机柜的前、后面都可以安装资产设备。如果资产设备安装在机柜后面，那么我们更希望从机柜后面观察资产设备。机柜组件Cabinet提供了frontOn和backOn两个方法，用于切换机柜的观察方向。

机柜绑定 ​

机柜物体模型需要跟资产管理系统中的机柜实体建立一对一的关联绑定关系。机柜组件Cabinet的entityId属性是机柜物体模型的唯一ID，可用于机柜绑定。机柜绑定后，需要设置机柜组件Cabinet的三个属性：cabinetId、cabinetName、areaId，这三个属性表示资产系统中机柜的ID、名称（编号）、所属区域ID。如果解除绑定，应该将这三个属性置空。

typescript
cabinet.cabinetId = 'JG1';//机柜ID
cabinet.cabinetName = 'A1';//机柜名称(编号)
cabinet.areaId = 'A';//机柜所属区域ID

机柜绑定关系应该存储在数据库中，然后在挂载机柜管理器组件CabinetMgr后初始化机柜绑定关系，在线示例。以下是示例代码：

typescript
/** 给指定的层级添加机柜管理器组件 */
function addCabinetMgr(level: GLOW.Entity): void {
    if (!level.children.find(item => item.tags.has('机柜'))) return;//无机柜标签直接return
    let mgr: GLOW.CabinetMgr = level.addComponent(GLOW.CabinetMgr);//有机柜标签才添加组件
    initCabinetBinding(mgr);//初始化机柜绑定
}

/** 初始化机柜绑定 */
function initCabinetBinding(mgr: GLOW.CabinetMgr): void {
    for (let i: number = 0; i < mgr.cabinets.length; i++) {
        let cabinet: GLOW.Cabinet = mgr.cabinets[i];
        cabinet.cabinetId = `JG${i + 1}`;//设置机柜ID
        cabinet.cabinetName = `A${i + 1}`;//设置机柜名称（编号）
        cabinet.areaId = 'A';//设置区域ID
    }
}

机柜顶部编号标签 ​

当机柜绑定数据后，默认机柜顶部会显示机柜编号（名称）标签。机柜顶部编号标签的显隐和样式是通过机柜组件Cabinet的静态属性tagStyleConfig进行配置的。tagStyleConfig属性的修改时机推荐在app实例创建之前。

资产可视化

机柜事件 ​

机柜组件Cabinet提供了以下事件：

  • onEnterCabinet：机柜进入事件，可以在此事件中加载机柜内的资产。

  • onExistCabinet：机柜退出事件，事件触发前会先清空已加载的资产。

  • onCabinetRightClick：机柜右键事件，可以用来弹出机柜绑定窗口或者机柜右键菜单。进入机柜内部后，该事件失效。

加载资产 ​

机柜组件Cabinet提供了loadAssets方法，用于加载机柜内的资产。

loadAssets方法有一个参数：

  • list : 资产数据列表，AssetData数组类型。

loadAssets方法可以被调用多次，调用时如果已经加载过资产，则会先清空再重新加载。当发生资产上架、下架、变更等业务操作时，请调用loadAssets方法重新加载资产。

在线示例，以下是示例代码：

typescript
/** 进入机柜事件 */
async function onEnterCabinet(cabinet: GLOW.Cabinet): Promise<void> {
    let cabinetId: string = cabinet.cabinetId;//获取机柜唯一ID
    let list: GLOW.AssetData[] = assetDataList.filter(item => item.cabinet_id === cabinetId);//模拟获取指定机柜的资产列表
    await cabinet.loadAssets(list);//加载资产
}

资产可视化

资产设备 ​

机架设备RackMounted，即资产设备，它继承自实体类Entity。当机柜组件调用loadAssets方法后，会根据传入的资产数据创建对应的资产设备。Cabinet对象有一个属性assets，返回该机柜下的所有资产设备。注意：只有加载了资产数据后，才能获取到资产设备，否则会返回空数组，且退出机柜后被清空。

资产详情 ​

一般的，我们希望鼠标左键双击资产设备模型时，弹出资产详情窗口，我们可以在RackMounted对象上注册LeftDoubleClick事件，并在监听函数中打开资产详情窗口。在线示例，示例代码如下：

typescript
/** 初始化资产设备 */
async function initAsset(cabinet: GLOW.Cabinet): Promise<void> {
    for (let asset of cabinet.assets) {
        asset.on(GLOW.EventType.LeftDoubleClick, () => {
            asset.frontOn();//前面居中显示
            let asset_id: string = asset.data.asset_id;//拿到资产唯一ID，再通过唯一ID去获取资产详情
            console.log(`资产唯一ID：${asset_id}的资产详情。`);
        });
    }
}

资产设备右键菜单 ​

资产设备可能有较多的业务操作，一般会将这些操作放在右键菜单中，右键菜单通过右键事件RightClick实现。在线示例，示例代码如下：

typescript
asset.on(GLOW.EventType.RightClick, ev => {//右键事件
    let asset_id: string = asset.data.asset_id;//拿到资产唯一ID
    let pe: PointerEvent = ev.data.event;//拿到DOM事件原始参数
    let left: number = pe.clientX;//距离画布Canvas左侧距离
    let top: number = pe.clientY;//距离画布Canvas顶部距离
    console.log(`打开对应的右键菜单：asset_id=${asset_id},left=${left},top=${top}`);
});

容量统计 ​

容量统计需要调用机柜管理器组件CabinetMgr的showCapacity方法，该方法有一个参数：

如需关闭容量统计，调用机柜管理器组件CabinetMgr的hideCapacity方法即可。

在线示例，示例代码如下：

typescript
mgr.showCapacity(capacityDataList);//显示容量
mgr.hideCapacity();//隐藏容量

资产可视化

技术支持：13352865103（柯工，微信同号）；18688783852（柯工）

Copyright © 2022-2025 广州方讯科技有限公司