www.i4k.xyz Open in urlscan Pro
2606:4700:3032::ac43:a98f Public Scan

Back to summary

URL:
https://www.i4k.xyz/article/wuyouguo55/103695576
Submission: On February 27 via manual (February 27th 2022, 10:00:20 am UTC) from BE — Scanned from DE

Form analysis
1 forms found in the DOM

POST /searchArticle

<form id="searchForm" action="/searchArticle" method="post">
  <div>
    <input type="text" name="qc" style="width:200px;"> <input type="submit" value="搜索" style="color:black;">
  </div>
</form>

Text Content

程序员信息网 程序员信息网，程序员的信息网

首页 / 联系我们 / 版权申明 / 隐私条款



万物可视之智能可视化管理平台_FUHUOJIA000000的博客-程序员信息网

技术标签： 物联网可视化  3D可视化  万物可视  pass平台  智能可视化  



　     IT可视化运维管理平台

　　Tarsier是优锘科技推出的一款可视化+大数据的IT运维管理产品，针对当前业务环境和技术环境下企业IT运维面临的结构复杂、数据碎片、变化常态、机制板结等问题，Tarsier提供以可视化、场景化为核心理念的系列产品助力企业解决问题

　　ThingJS-人人都能用的3D平台

　　ThingJS是优锘科技开发的一套面向物联网应用的在线3D可视化应用开发及运营PaaS平台，以“ThingJS云视PaaS服务”形式面向广大物联网企业提供全生命周期在线3D可视化服务


2D/3D界面

ThingJS 是一个先进的 PaaS 开发平台，开发者可以方便、安全地基于云端的各种工具组件随时随地进行开发。


THINGJS 界面概述

为了便于开发者在ThingJS下进行界面开发，ThingJS 提供的界面体系结构目录如下：



上述ThingJS界面体系中，进行3D场景可视化的区域，我们定义为3D容器，如下图所示：




在3D“容器”内

提供了3D和2D的界面展示能力，如下图所示：



3D 界面

 * Marker：可以将图标、Canvas绘制的图片，展现在3D场景中或绑定在3D物体上。
 * WebView：可以将页面嵌入到3D场景中。

2D 界面

 * 原生界面：用户可以使用js代码编写原生的界面，将dom元素插入到相应的节点中。
 * 快捷界面库：内置各种组件模块，供用户进行拼接组装使用。
 * UIAnchor：可以将普通的2D界面“挂接”到某个3D物体对象上，使之随物体移动。


在3D“容器”外

提供通栏组件（如上通栏、侧通栏）。如果用户想基于 ThingJS 做一套独立的应用系统，可使用通栏组件作为系统级别的菜单。




3D 界面

ThingJS 主要提供 `Marker` 物体和 `WebView` 物体以支持 3D 空间界面。


MARKER 物体



Marker 物体可以添加一个图片放置到你希望的位置，也可以将这个图片作为孩子添加到对象身上，随着对象一同移动。

例子 1：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"> app<span style="color:#273d56">.</span><span style="color:#4264fb">create</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
    type<span style="color:#273d56">:</span> <span style="color:#ce2c69">"Marker"</span><span style="color:#273d56">,</span>
    offset<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">0</span><span style="color:#273d56">,</span> <span style="color:#7753eb">2</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    size<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">4</span><span style="color:#273d56">,</span> <span style="color:#7753eb">4</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    url<span style="color:#273d56">:</span> <span style="color:#ce2c69">"https://thingjs.com/static/images/warning1.png"</span><span style="color:#273d56">,</span>
    parent<span style="color:#273d56">:</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">query</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"car01"</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>

 
 

参数：

 * type ： 通知系统创建 Marker 物体；
 * offset ： 设置自身坐标系下偏移量为[0, 2, 0]；
 * size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
 * url ： 图片的 url；
 * parent ：指定 Marker 的父物体；

运行结果见下图。Marker 默认是受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。



例子 2：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript">app<span style="color:#273d56">.</span><span style="color:#4264fb">create</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
    type<span style="color:#273d56">:</span> <span style="color:#ce2c69">"Marker"</span><span style="color:#273d56">,</span>
    offset<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">0</span><span style="color:#273d56">,</span> <span style="color:#7753eb">8</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    size<span style="color:#273d56">:</span> <span style="color:#7753eb">2</span><span style="color:#273d56">,</span>
    keepSize<span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span>
    url<span style="color:#273d56">:</span> <span style="color:#ce2c69">"https://thingjs.com/static/images/reminder.png"</span><span style="color:#273d56">,</span>
    parent<span style="color:#273d56">:</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">query</span><span style="color:#273d56">(</span><span style="color:#ce2c69">".Building"</span><span style="color:#273d56">)</span><span style="color:#273d56">[</span><span style="color:#7753eb">1</span><span style="color:#273d56">]</span>
<span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 
 

参数：

 * keepSize： 控制是否受距离远近影响，呈现近大远小的 3D 效果。如果设置 true，表示保持大小，不随距离近大远小，此时 size
   的单位是屏幕的像素点；
 * offset ： 设置自身坐标系下偏移量为[0, 2, 0]；
 * size ： 设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
 * url ： 图片的 url；
 * parent ：指定 Marker 的父物体；

运行结果见下图：



我们还可以使用 h5 的 canvas 手动创建动态图。

例子 3：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#314ccd">function</span> <span style="color:#4264fb">createTextCanvas</span><span style="color:#273d56">(</span>text<span style="color:#273d56">,</span> canvas<span style="color:#273d56">)</span> <span style="color:#273d56">{</span>
    <span style="color:#314ccd">if</span> <span style="color:#273d56">(</span><span style="color:#273d56">!</span>canvas<span style="color:#273d56">)</span> <span style="color:#273d56">{</span>
        canvas <span style="color:#273d56">=</span> document<span style="color:#273d56">.</span><span style="color:#4264fb">createElement</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"canvas"</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
        canvas<span style="color:#273d56">.</span>width <span style="color:#273d56">=</span> <span style="color:#7753eb">64</span><span style="color:#273d56">;</span>
        canvas<span style="color:#273d56">.</span>height <span style="color:#273d56">=</span> <span style="color:#7753eb">64</span><span style="color:#273d56">;</span>
    <span style="color:#273d56">}</span>

    <span style="color:#314ccd">const</span> ctx <span style="color:#273d56">=</span> canvas<span style="color:#273d56">.</span><span style="color:#4264fb">getContext</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"2d"</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span>fillStyle <span style="color:#273d56">=</span> <span style="color:#ce2c69">"rgb(32, 32, 256)"</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">beginPath</span><span style="color:#273d56">(</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">arc</span><span style="color:#273d56">(</span><span style="color:#7753eb">32</span><span style="color:#273d56">,</span> <span style="color:#7753eb">32</span><span style="color:#273d56">,</span> <span style="color:#7753eb">30</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">,</span> Math<span style="color:#273d56">.</span><span style="color:#314ccd">PI</span> <span style="color:#273d56">*</span> <span style="color:#7753eb">2</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">fill</span><span style="color:#273d56">(</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>

    ctx<span style="color:#273d56">.</span>strokeStyle <span style="color:#273d56">=</span> <span style="color:#ce2c69">"rgb(255, 255, 255)"</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span>lineWidth <span style="color:#273d56">=</span> <span style="color:#7753eb">4</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">beginPath</span><span style="color:#273d56">(</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">arc</span><span style="color:#273d56">(</span><span style="color:#7753eb">32</span><span style="color:#273d56">,</span> <span style="color:#7753eb">32</span><span style="color:#273d56">,</span> <span style="color:#7753eb">30</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">,</span> Math<span style="color:#273d56">.</span><span style="color:#314ccd">PI</span> <span style="color:#273d56">*</span> <span style="color:#7753eb">2</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">stroke</span><span style="color:#273d56">(</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>

    ctx<span style="color:#273d56">.</span>fillStyle <span style="color:#273d56">=</span> <span style="color:#ce2c69">"rgb(255, 255, 255)"</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span>font <span style="color:#273d56">=</span> <span style="color:#ce2c69">"32px sans-serif"</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span>textAlign <span style="color:#273d56">=</span> <span style="color:#ce2c69">"center"</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span>textBaseline <span style="color:#273d56">=</span> <span style="color:#ce2c69">"middle"</span><span style="color:#273d56">;</span>
    ctx<span style="color:#273d56">.</span><span style="color:#4264fb">fillText</span><span style="color:#273d56">(</span>text<span style="color:#273d56">,</span> <span style="color:#7753eb">32</span><span style="color:#273d56">,</span> <span style="color:#7753eb">32</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
    <span style="color:#314ccd">return</span> canvas<span style="color:#273d56">;</span>
<span style="color:#273d56">}</span>

app<span style="color:#273d56">.</span><span style="color:#4264fb">on</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'load'</span><span style="color:#273d56">,</span> <span style="color:#314ccd">function</span> <span style="color:#273d56">(</span>ev<span style="color:#273d56">)</span> <span style="color:#273d56">{</span>
    <span style="color:#314ccd">var</span> marker <span style="color:#273d56">=</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">create</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
        type<span style="color:#273d56">:</span> <span style="color:#ce2c69">"Marker"</span><span style="color:#273d56">,</span>
        offset<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">0</span><span style="color:#273d56">,</span> <span style="color:#7753eb">2</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
        size<span style="color:#273d56">:</span> <span style="color:#7753eb">3</span><span style="color:#273d56">,</span>
        canvas<span style="color:#273d56">:</span> <span style="color:#4264fb">createTextCanvas</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'100'</span><span style="color:#273d56">)</span><span style="color:#273d56">,</span>
        parent<span style="color:#273d56">:</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">query</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'car02'</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><span style="color:#4264fb">on</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'click'</span><span style="color:#273d56">,</span> <span style="color:#314ccd">function</span> <span style="color:#273d56">(</span>ev<span style="color:#273d56">)</span> <span style="color:#273d56">{</span>
        <span style="color:#314ccd">var</span> txt <span style="color:#273d56">=</span> Math<span style="color:#273d56">.</span><span style="color:#4264fb">floor</span><span style="color:#273d56">(</span>Math<span style="color:#273d56">.</span><span style="color:#4264fb">random</span><span style="color:#273d56">(</span><span style="color:#273d56">)</span> <span style="color:#273d56">*</span> <span style="color:#7753eb">100</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
        ev<span style="color:#273d56">.</span>object<span style="color:#273d56">.</span>canvas <span style="color:#273d56">=</span> <span style="color:#4264fb">createTextCanvas</span><span style="color:#273d56">(</span>txt<span style="color:#273d56">,</span> ev<span style="color:#273d56">.</span>object<span style="color:#273d56">.</span>canvas<span style="color:#273d56">)</span>
    <span style="color:#273d56">}</span><span style="color:#273d56">)</span>
<span style="color:#273d56">}</span><span style="color:#273d56">)</span></code> </span></span>

 
 

参数：

 * canvas: 接收 canvas 作为贴图显示

运行结果见下图，在 Marker 上点击时，会改变标记上的数字：


查看示例
 


WEBVIEW 物体

我们可以使用 WebView 物体，将其他网站或者页面的内容嵌到 3D 中。

例子 4：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"> <span style="color:#314ccd">var</span> webView01 <span style="color:#273d56">=</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">create</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
    type<span style="color:#273d56">:</span> <span style="color:#ce2c69">'WebView'</span><span style="color:#273d56">,</span>
    url<span style="color:#273d56">:</span> <span style="color:#ce2c69">'https://www.thingjs.com'</span><span style="color:#273d56">,</span>
    position<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">10</span><span style="color:#273d56">,</span> <span style="color:#7753eb">13</span><span style="color:#273d56">,</span> <span style="color:#273d56">-</span><span style="color:#7753eb">5</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    width<span style="color:#273d56">:</span> <span style="color:#7753eb">1920</span> <span style="color:#273d56">*</span> <span style="color:#7753eb">0.01</span><span style="color:#273d56">,</span> <span style="color:#53708e">// 3D 中实际宽度 单位 米</span>
    height<span style="color:#273d56">:</span> <span style="color:#7753eb">1080</span> <span style="color:#273d56">*</span> <span style="color:#7753eb">0.01</span><span style="color:#273d56">,</span> <span style="color:#53708e">// 3D 中实际高度 单位 米</span>
    domWidth<span style="color:#273d56">:</span> <span style="color:#7753eb">1920</span><span style="color:#273d56">,</span> <span style="color:#53708e">// 页面宽度 单位 px</span>
    domHeight<span style="color:#273d56">:</span> <span style="color:#7753eb">1080</span><span style="color:#53708e">// 页面高度 单位 px</span>
<span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 
 

查看示例
 


2D HTML 界面


JS 编写原生界面

<span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#314ccd">var</span> template <span style="color:#273d56">=</span>
<span style="color:#ce2c69">`<div style='position:absolute;left:20px;top:20px;padding: 8px;width:100px;text-align: center;background: rgba(0,0,0,0.5);'>
<p id="p1" style='color:white'>Hello World!</p>
<button style='margin:4px;padding:4px' onclick='changeLevel()'>Into Level</button></div>`</span><span style="color:#273d56">;</span><span style="color:#53708e">// 插入到 ThingJS 内置的 2D 界面 div 中$('#div2d').append($(template));</span></code></span>

查看示例

ThingJS 为了让大家快速编写界面，我们提供一个“快捷界面库”，可快速创建界面。


UIANCHOR

还有一个神奇的功能，即使是 2D html 界面，我们照样可以把它连接到 3D 物体上，跟随 3D 物体移动，我们使用 `UIAnchor`
物体来实现这个功能。



示例如下：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#314ccd">var</span> uiAnchor <span style="color:#273d56">=</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">create</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
    type<span style="color:#273d56">:</span> <span style="color:#ce2c69">"UIAnchor"</span><span style="color:#273d56">,</span>
    parent<span style="color:#273d56">:</span> app<span style="color:#273d56">.</span><span style="color:#4264fb">query</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"car02"</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>
    element<span style="color:#273d56">:</span> document<span style="color:#273d56">.</span><span style="color:#4264fb">getElementById</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"XXXX"</span><span style="color:#273d56">)</span><span style="color:#273d56">,</span>
    localPosition<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">0</span><span style="color:#273d56">,</span> <span style="color:#7753eb">2</span><span style="color:#273d56">,</span> <span style="color:#7753eb">0</span><span style="color:#273d56">]</span><span style="color:#273d56">,</span>
    pivot<span style="color:#273d56">:</span> <span style="color:#273d56">[</span><span style="color:#7753eb">0.5</span><span style="color:#273d56">,</span> <span style="color:#7753eb">1</span><span style="color:#273d56">]</span>
<span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 
 

参数：

 * element ：要绑定的页面的 element 对象
 * pivot ：指定页面的哪个点放到 localPosition 位置上，0.5 相当于 50%

查看示例

删除UIAnchor方法为：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript">uiAnchor<span style="color:#273d56">.</span><span style="color:#4264fb">destroy</span><span style="color:#273d56">(</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 
 
 
注意事项：

删除后，其对应的 panel 也会被删除

显示和隐藏UIAnchor方法为：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript">uiAnchor<span style="color:#273d56">.</span>visible <span style="color:#273d56">=</span> <span style="color:#7753eb">true</span> <span style="color:#273d56">/</span> <span style="color:#7753eb">false</span><span style="color:#273d56">;</span></code> </span></span>

 
 

通过 js 编写的界面：



可以利用 UIAnchor 连接到 3D 物体上。

查看示例
 

也可以通过快捷界面库，创建 Panel 以 UIAnchor 的方式连接到物体上。

查看示例




快捷界面库

THING.widget 是一个支持动态数据绑定的轻量级界面库。

可通过界面库中的 Panel 组件创建一个面板，并可向该面板中添加文本、数字、单选框、复选框等其他组件。

效果如下：




创建面板

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#314ccd">var</span> panel <span style="color:#273d56">=</span> <span style="color:#314ccd">new</span> <span style="color:#4264fb">THING<span style="color:#273d56">.</span>widget<span style="color:#273d56">.</span>Panel</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span>
    <span style="color:#53708e">// 设置面板样式</span>
    template<span style="color:#273d56">:</span> <span style="color:#ce2c69">'default'</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 角标样式</span>
    cornerType<span style="color:#273d56">:</span> <span style="color:#ce2c69">"none"</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 设置面板宽度</span>
    width<span style="color:#273d56">:</span> <span style="color:#ce2c69">"300px"</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 是否有标题</span>
    hasTitle<span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 设置标题名称</span>
    titleText<span style="color:#273d56">:</span> <span style="color:#ce2c69">"我是标题"</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 面板是否允许有关闭按钮</span>
    closeIcon<span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 面板是否支持拖拽功能</span>
    dragable<span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 面板是否支持收起功能</span>
    retractable<span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 设置透明度</span>
    opacity<span style="color:#273d56">:</span> <span style="color:#7753eb">0.9</span><span style="color:#273d56">,</span>
    <span style="color:#53708e">// 设置层级</span>
    zIndex<span style="color:#273d56">:</span> <span style="color:#7753eb">99</span>
<span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 
 
 * width： 如果写百分比字符串则表示相对宽度（相对于3D容器的宽度）
 * template：目前，模板样式提供两个样式 default 和 default2，如下图:
   
 * cornerType: cornerType 是指角标样式，依次是:没有角标 none ，没有线的角标 noline ，折线角标 polyline
   ；依次见下图：
   

 
注意事项：

角标样式都不区分大小写

如果 panel 面板设置了关闭按钮 则点击关闭按钮时 会将面板设置为隐藏，如需再次打开该面板 则调用 panel.visible = true;
显示面板即可。

查看示例
 


面板属性及方法介绍

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#53708e">// 获取面板标签</span>
panel<span style="color:#273d56">.</span>domElement<span style="color:#273d56">;</span>

<span style="color:#53708e">// 修改面板标题</span>
panel<span style="color:#273d56">.</span>titleText<span style="color:#273d56">=</span><span style="color:#ce2c69">'修改标题'</span><span style="color:#273d56">;</span>

<span style="color:#53708e">// 设置/获取面板相关属性</span>
panel<span style="color:#273d56">.</span>visible <span style="color:#273d56">=</span> <span style="color:#7753eb">true</span> <span style="color:#273d56">/</span> <span style="color:#7753eb">false</span><span style="color:#273d56">;</span>
panel<span style="color:#273d56">.</span>position <span style="color:#273d56">=</span> <span style="color:#273d56">[</span><span style="color:#7753eb">10</span><span style="color:#273d56">,</span> <span style="color:#7753eb">10</span><span style="color:#273d56">]</span><span style="color:#273d56">;</span><span style="color:#53708e">//设置panel面板的位置</span>
panel<span style="color:#273d56">.</span>zIndex <span style="color:#273d56">=</span> <span style="color:#7753eb">9</span><span style="color:#273d56">;</span>
panel<span style="color:#273d56">.</span>opacity <span style="color:#273d56">=</span> <span style="color:#7753eb">0.5</span><span style="color:#273d56">;</span>

<span style="color:#53708e">// 删除面板</span>
panel<span style="color:#273d56">.</span><span style="color:#4264fb">destroy</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"><span style="color:#53708e">// 常用事件类型均支持</span>
panel<span style="color:#273d56">.</span><span style="color:#4264fb">on</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"click"</span><span style="color:#273d56">,</span> callback<span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#53708e">// 'close'事件为面板关闭时触发</span>
panel<span style="color:#273d56">.</span><span style="color:#4264fb">on</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"close"</span><span style="color:#273d56">,</span> callback<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"><span style="color:#314ccd">var</span> dataObj <span style="color:#273d56">=</span> <span style="color:#273d56">{</span>
    pressure<span style="color:#273d56">:</span> <span style="color:#ce2c69">"0.14MPa"</span><span style="color:#273d56">,</span>
    temperature<span style="color:#273d56">:</span> <span style="color:#ce2c69">"21°C"</span><span style="color:#273d56">,</span>
    checkbox<span style="color:#273d56">:</span> <span style="color:#273d56">{</span> 设备<span style="color:#7753eb">1</span><span style="color:#273d56">:</span> <span style="color:#7753eb">false</span><span style="color:#273d56">,</span> 设备<span style="color:#7753eb">2</span><span style="color:#273d56">:</span> <span style="color:#7753eb">false</span><span style="color:#273d56">,</span> 设备<span style="color:#7753eb">3</span><span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span> 设备<span style="color:#7753eb">4</span><span style="color:#273d56">:</span> <span style="color:#7753eb">true</span> <span style="color:#273d56">}</span><span style="color:#273d56">,</span>
    radio<span style="color:#273d56">:</span> <span style="color:#ce2c69">"摄像头01"</span><span style="color:#273d56">,</span>
    open1<span style="color:#273d56">:</span> <span style="color:#7753eb">true</span><span style="color:#273d56">,</span>
    height<span style="color:#273d56">:</span> <span style="color:#7753eb">10</span><span style="color:#273d56">,</span>
    maxSize<span style="color:#273d56">:</span> <span style="color:#7753eb">1.0</span><span style="color:#273d56">,</span>
    iframe<span style="color:#273d56">:</span> <span style="color:#ce2c69">"https://www.3dmomoda.com"</span><span style="color:#273d56">,</span>
    progress<span style="color:#273d56">:</span> <span style="color:#7753eb">1</span><span style="color:#273d56">,</span>
    img<span style="color:#273d56">:</span> <span style="color:#ce2c69">"https://www.thingjs.com/guide/image/new/logo2x.png"</span><span style="color:#273d56">,</span>
    button<span style="color:#273d56">:</span> <span style="color:#7753eb">false</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"><span style="color:#314ccd">var</span> press <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addString</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'pressure'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'水压'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">isChangeValue</span><span style="color:#273d56">(</span><span style="color:#7753eb">true</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> height <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addNumber</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'height'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'高度'</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> maxSize <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addNumberSlider</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'maxSize'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">step</span><span style="color:#273d56">(</span><span style="color:#7753eb">0.25</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">min</span><span style="color:#273d56">(</span><span style="color:#7753eb">1</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">max</span><span style="color:#273d56">(</span><span style="color:#7753eb">10</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> open1 <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addBoolean</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'open1'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'开关01'</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> radio <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addRadio</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'radio'</span><span style="color:#273d56">,</span> <span style="color:#273d56">[</span><span style="color:#ce2c69">'摄像头01'</span><span style="color:#273d56">,</span> <span style="color:#ce2c69">'摄像头02'</span><span style="color:#273d56">]</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> check <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addCheckbox</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'checkbox'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span> <span style="color:#ce2c69">"设备2"</span><span style="color:#273d56">:</span> <span style="color:#ce2c69">"设备2(rename)"</span> <span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> iframe <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addIframe</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'iframe'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'视屏'</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> img <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addIframe</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'img'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'图片'</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> button <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addImageBoolean</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'button'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'仓库编号'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">url</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'https://www.thingjs.com/static/images/example/icon.png'</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

 
 

界面库可设置 `Caption` 的字体颜色:如下例所示：

<span style="color:#1f3349"><span style="color:#273d56 !important"><code class="language-javascript"><span style="color:#314ccd">var</span> press <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addString</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'pressure'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"水压"</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">isChangeValue</span><span style="color:#273d56">(</span><span style="color:#7753eb">true</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> water <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addString</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'temperature'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"水温"</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">isChangeValue</span><span style="color:#273d56">(</span><span style="color:#7753eb">true</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> check <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addCheckbox</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'checkbox'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#273d56">{</span> <span style="color:#ce2c69">"设备2"</span><span style="color:#273d56">:</span> <span style="color:#ce2c69">"设备2(rename)"</span> <span style="color:#273d56">}</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> open1 <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addBoolean</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'open1'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"开关01"</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> height <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addNumber</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'height'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"高度"</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> maxSize <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addNumberSlider</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'maxSize'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">"maxSize"</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">step</span><span style="color:#273d56">(</span><span style="color:#7753eb">0.25</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">min</span><span style="color:#273d56">(</span><span style="color:#7753eb">1</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">max</span><span style="color:#273d56">(</span><span style="color:#7753eb">10</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span>
<span style="color:#314ccd">var</span> iframe <span style="color:#273d56">=</span> panel<span style="color:#273d56">.</span><span style="color:#4264fb">addIframe</span><span style="color:#273d56">(</span>dataObj<span style="color:#273d56">,</span> <span style="color:#ce2c69">'iframe'</span><span style="color:#273d56">)</span><span style="color:#273d56">.</span><span style="color:#4264fb">caption</span><span style="color:#273d56">(</span><span style="color:#ce2c69">'视屏'</span><span style="color:#273d56">)</span><span style="color:#273d56">;</span></code> </span></span>

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyouguo55/article/details/103695576

原作者删帖   不实内容删帖   广告或垃圾文章投诉


--------------------------------------------------------------------------------




智能推荐


SESSION中的COOKIES设置及使用_JIEKAILE的博客-程序员信息网_SESSION设置COOKIE

python requests模块session的使用建议及整个会话中的所有cookie的方法2、测试代码2.1
服务端下面是用flask做的一个服务端，用来设置cookie以及打印请求时的请求头# -*- coding: utf-8 -*-from flask
import Flask, make_response, requestapp = Flask(__name__)...


台式电脑计算机为什么没有EF盘,为何我的电脑不显示D,E,F盘?_WEIXIN_39605706的博客-程序员信息网

中毒了由于计算机在系统运行时会自动搜索盘符目录下的Autorun.inf配置文件，并根据其内的文件自动运行加载其内设置好的命令。其实Autorun.inf就是一个文本形式的系统配置文件，用户可以用文本编辑软件进行编辑(注：该文件只能位于驱动器的根目录下时，才能实现启动加载)，该文件包含了需要自动运行的命令，如需要运行的程序文件、改变的驱动器图标、可选快捷菜单内容等等。病情描述当用户在选择：工具-文...


HIVE安装及与HBASE的整合_阳光奶爸的博客-程序员信息网

介绍Hive的工作原理、配置及与HBase的整合。


LINUX安装DISCONF_TOMMER911-程序员信息网_LINUX安装DISCONF

linux安装disconf


JAVA生成MIB文件_MIB浏览器设计（附源码） | 学步园_SHEEPY SHEEPP的博客-程序员信息网

Mib是snmp采集器的基础。Mib是网络oid的描述载体，主要把设备oid的值、描述和参数放入mib。是用来做主动轮询和被动收集收集trap信息翻译的主要基础数据。但是mib是一直特别的协议，通过特别的树形结构存放数据。建立一套良好的mib控制代码，整个网管系统的基础。如果用一个灵活可以扩展的mib库才是一个网管系统可持续发展的生命力。mibble-parser-2.9.2.jar是一套开源的m...


深度学习和其他机器学习方法相比有哪些关键的不同点，它为何能在许多领域取得成功?_萌兔兔MMQ！！-程序员信息网

是近十年来人工智能领域取得的重要突破。它在语音识别、自然语言处理、计算机视觉、图像与视频分析、多媒体等诸多领域的应用取得了巨大成功。现有的模型属于神经网络。神经网络的起源可追溯到20世纪40年代，曾经在八
…是近十年来人工智能领域取得的重要突破。它在语音识别、自然语言处理、计算机视觉、图像与视频分析、多媒体等诸多领域的应用取得了巨大成功。现有的模型属于神经网络。神经网络的起源可追溯到20世纪40年代，曾经在八九十年代流行。神经网络试图通过模拟大脑认知的机理解决各种机器学习问题。1986年，鲁梅尔哈特(Ru




随便推点


ECLIPSE笔记-怎么让MAVEN子项目在父项目的依赖中显示为JAR包_不积跬步，无以至千里-程序员信息网

之前有个问题困扰了我很久，就是Maven父项目引用了几个子项目打包成的jar包，然而在Maven
Dependencies中却总是显示成一个项目，而不是jar包。这导致了我在debug父项目时，当debug到子项目的代码时总是不跳入jar中编译好的class文件，而是直接跳转到工作空间中的子项目的java文件。由于我修改过子项目的代码，但是还未重新打包，于是debug的时候进入的是java...


WEB前端和后端开发面临的挑战_IT～子民的博客-程序员信息网

　WEB前端和后端开发面临的挑战　　要成为一名高效的Web开发者，这需要我们做很多工作，来提高我们的工作方式，以及改善我们的劳动成果。而在开发中难免会遇到一些困难，从前端到后端，近日，在问答网站知乎上，有人抛出了“Web前端开发面临的挑战主要有哪些?”和“后端开发主要的挑战有哪些?”。 　　一、Web前端开发所面临的挑战 　　盛大Web工程师
曹刘阳：前端语言的胶水性需求太强 ...


IMPALA常见错误小结_WEIXIN_34393428的博客-程序员信息网

线上使用impala做一部分的nginx日志实时计算，简单记录下在使用过程中遇到的一些小问题：部署常见问题：1.mysql jar错误Caused by:
org.datanucleus.exceptions.NucleusException: Attempt to invoke the "DBCP" plugin
to create a Co...


【OPENCV】OPENCV（PYTHON） 教程-轮廓（2）轮廓特征求取_ZJ360202的专栏-程序员信息网_轮廓特征提取

目标查找轮廓的不同特征，例如面积，周长，重心，边界框等，这些特征在未来的图像识别中，会大量的用到。矩的概念图像识别的一个核心问题是图像的特征提取，简单描述即为用一组简单的数据（图像描述量）来描述整个图像，这组数据越简单越有代表性越好。良好的特征不受光线、噪点、几何形变的干扰。图像识别发展几十年，不断有新的特征提出，而图像不变矩就是其中一个。矩是概率与


手游图片素材提取_一款可以提取安卓游戏模型的软件，支持贴图、声音导出丨带测试..._WEIXIN_39845113的博客-程序员信息网

小编之前给大家介绍过一款电脑端的游戏模型提取软件Ninja
Ripper今天呢，在带来一款针对安卓游戏的模型提取在讲解软件之前，我们分析一下一个3D安卓游戏的资源组成情况，一般大型游戏主要是由APK文件以及OBB文件组成，我们的思路就是资源包含到OBB文件内我们可以先查看一下OBB文件内部的情况，这里就需要用到打开OBB文件的软件7zip下图就是文件内部打开的状况，从assets文件后缀可以了解到...


我的JAVA学习历程（一HTML5篇）_LOGIC_007的博客-程序员信息网

html5这部分还是十分简单的！一些简单的标签总结：一，        html5文档结构                           
yh6                   标题一                                      
二，        meta标签的常见用法a)        设置中



- PapayAds Advertising -


推荐文章

 * JavaEE PO VO BO DTO POJO DAO 整理总结_weixin_34399060的博客-程序员信息网

 * python爬虫: 抓取任意歌手的歌词,简直不要太骚_Johnny Liao的博客-程序员信息网_python爬取歌词

 * 如何实现操作操作日志记录_t_jindao的博客-程序员信息网_操作记录

 * python建模与仿真控制系统_控制系统的建模与仿真_weixin_39648469的博客-程序员信息网

 * 举步维艰——如何调试显示器点亮前的故障_weixin_30664051的博客-程序员信息网

 * 央行广西面试结构化计算机岗,各省人行面试有什么区别_11号温耀威 无的博客-程序员信息网

 * drf序列化器之反序列化的数据验证_晚安_玛卡巴卡_的博客-程序员信息网

 * Tomcat6启动报错java.lang.IllegalArgumentException:_~-程序员信息网


- PapayAds Advertising -



热门文章

 * Spring Boot 解决跨域问题的 3 种方案！_Java基基的博客-程序员信息网

 * python3.6.5安装教程-Centos7 安装Python3.6.5步骤_weixin_37988176的博客-程序员信息网

 * Android学习——Mac Os X下载和编译android 4.2.2 源码_Janrone's Blog-程序员信息网

 * Hbase学习02_anghiking20140716的博客-程序员信息网

 * Android简单实用的交互动画库_无二的博客-程序员信息网

 * 在idea里使用vue 一个tab为4个空格_做一个有知识的流氓-程序员信息网_idea vue 空格

 * jquery使用serialize()出现中文乱码怎么办_yy743的博客-程序员信息网

 * Axure RP里单选按钮组_weixin_34192993的博客-程序员信息网


相关标签

 * 物联网可视化

 * 3D可视化

 * 万物可视

 * pass平台

 * 智能可视化





Copyright © 2018-2022 - All Rights Reserved - 网站内容人工审核和清理中！

www.i4k.xyz Open in urlscan Pro 2606:4700:3032::ac43:a98f Public Scan

Form analysis 1 forms found in the DOM

POST /searchArticle

Text Content

www.i4k.xyz Open in urlscan Pro
2606:4700:3032::ac43:a98f Public Scan

Form analysis
1 forms found in the DOM