IT运维可视化效果实现前端就能做？

自定义对象属性

CamBuilder 中添加的自定义属性

CamBuilder 中创建的物体，只有在编辑了 UserID、Name 或者 自定义属性 后，导入到 ThingJS 中才能成为独立的管理对象，被程序读取或修改。

在 CampusBuilder 中我们可以手动添加自定义属性。

如下图所示:

从 CampusBuilder 导入的用户自定义的属性可通过 userData 属性访问到

例如上图中的属性，我们这里可以这样访问：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"> obj<span style="color:#273d56">.</span>userData<span style="color:#273d56">[</span><span style="color:#ce2c69">"物体类型"</span><span style="color:#273d56">]</span><span style="color:#273d56">;</span></code></span></span>

 

程序运行中添加的自定义属性

JS 是一个灵活的语言，允许我们动态为对象添加属性。比如，我们从后台接收到的监控数据，可以直接给对象添加自定义属性 monitorData 来进行存储：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript">obj<span style="color:#273d56">.</span>monitorData <span style="color:#273d56">=</span> <span style="color:#273d56">{</span>
    温度：<span style="color:#7753eb">10</span>，
    单位：“摄氏度”
<span style="color:#273d56">}</span></code></span></span>

 

访问自定义属性

正如我们看到的，ThingJS 对象有丰富的属性。其中有的属性可能具有嵌套结构，比如用户在CamBuilder中添加的自定义属性 userData ，以及用户通过代码自行添加的 monitorData ，访问它们有时比较麻烦，如下：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#314ccd">if</span><span style="color:#273d56">(</span>obj<span style="color:#273d56">.</span>monitorData <span style="color:#273d56">&&</span> obj<span style="color:#273d56">.</span>monitorData<span style="color:#273d56">[</span><span style="color:#ce2c69">"温度"</span><span style="color:#273d56">]</span> <span style="color:#273d56">></span> <span style="color:#7753eb">0</span><span style="color:#273d56">)</span>
<span style="color:#273d56">...</span><span style="color:#273d56">.</span><span style="color:#273d56">.</span></code></span></span>

 

所以我们提供了一些便于访问、设置对象属性和判断对象属性是否存在的方法，例如：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript">obj<span style="color:#273d56">.</span><span style="color:#4264fb">getAttribute</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"monitorData/温度"</span><span style="color:#273d56">)</span> <span style="color:#53708e">//获取属性值</span>
obj<span style="color:#273d56">.</span><span style="color:#4264fb">setAttribute</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"monitorData/温度"</span><span style="color:#273d56">,</span> <span style="color:#7753eb">15</span><span style="color:#273d56">)</span> <span style="color:#53708e">//设置属性值</span>
obj<span style="color:#273d56">.</span><span style="color:#4264fb">hasAttribute</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"monitorData/温度"</span><span style="color:#273d56">)</span> <span style="color:#53708e">//判断属性是否存在</span></code></span></span>

 

不论是在CamBuilder中设置的自定义属性，还是在ThingJS中通过代码设置的自定义属性，都可在“在线开发” - “工具” - “场景信息” 中通过选中场景树中的某个物体对象查看物体属性：