工业网络技术（微课版）课件 7.3 ThingsBoard数据可视化

ThingsBoard数据可视化服务教育成就未来北京新大陆时代科技有限公司ThingsBoard数据可视化添加仪表板配置部件添加仪表板01添加仪表板单击“仪表板库”进入“仪表板库”页面，添加一个名称为“SMT产线”的仪表板。打开“SMT产线”仪表板，单击右下角的“进入编辑模式”按钮，使页面变为可编辑状态，再单击页面上方的“设置”按钮打开“设置”页面。添加规则链在“设置”页面中，启用“Titlesettings”下方的“显示仪表板标题”。将页面往下滚动，找到“Layoutsettings”，将下方的“列数”数值改为“384”，将“部件间边距”数值改为“0”，这样可以对仪表板上的控件进行细微的位置调整。找到“背景图片”一栏，按照提示的方法将“SMT背景图”上传。添加规则链配置好参数后单击“保存”按钮，可以看到如下效果。配置部件02添加设备配置1.配置Digitalspeedometer部件添加一个Digitalspeedometer部件，并配置各项参数，用以显示“工单完成率”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置2.配置HTMLValueCard部件添加一个HTMLValueCard部件，并配置各项参数，用以显示“计划产量”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。在CSS代码框中，按照给出的代码直接修改原始代码即可。在HTML代码框中，按照给出的代码直接修改原始代码，原始代码行若在此图中没有出现，则直接删除原始代码行即可。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置继续添加一个HTMLValueCard部件，并配置各项参数，用以显示“实际产量”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。在CSS代码框中，按照给出的代码直接修改原始代码即可。在HTML代码框中，按照给出的代码直接修改原始代码，原始代码行若在此图中没有出现，则直接删除原始代码行即可。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置添加一个HTMLValueCard部件，并配置各项参数，用以显示“当前工单信息”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。在CSS代码框中，按照给出的代码直接修改原始代码即可。在HTML代码框中，按照给出的代码直接修改原始代码，原始代码行若在此图中没有出现，则直接删除原始代码行即可。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置3.配置Timeseriestable部件添加一个Timeseriestable部件，并配置各项参数，用以显示“生产计划/状态”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置4.配置Simplegauge部件添加一个Simplegauge部件，并配置各项参数，用以显示“合格率”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置5.配置Labelwidget部件添加一个Labelwidget部件，并配置各项参数，用以显示“线体信息”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。首先添加背景图片，按照页面提示上传“线体信息.png”图片。添加设备配置接着配置各数据项，根据配置的顺序，“1.”数据项对应着“运行时间”，“2.”数据项对应着“总产量”，以此类推。添加设备配置“高级”选项页默认只有“1.”数据项，要想配置其他数据线，请先单击页面下方的“New”

按钮，每单击一次，页面会按照顺序依次添加新的数据项。“2.”数据项的配置：

“3.”数据项的配置：添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置6.配置Bars部件添加一个Bar部件，并配置各项参数，用以显示“当月产量”。“数据”选项页需要配置的内容。添加设备配置当数据的标签名太长时，可以进行更改，本例中可以单击各个参数后方的，在弹出的“数据键配置”页面中修改标签。添加设备配置“设置”选项页需要配置的内容。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置7.配置Pie-Flot部件添加一个Pie-Flot部件，并配置各项参数，用以显示“当日产量”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置8.配置Speedgauge部件导入名称为“NewSpeedGauge.json”的部件，并配置各项参数，用以显示“车间温度”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容。添加设备配置部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。添加设备配置再次导入名称为“NewSpeedGauge.json”的部件，并配置各项参数，用以显示“车间湿度”。“数据”选项页需要配置的内容。添加设备配置“设置”选项页需要配置的内容。添加设备配置“高级”选项页需要配置的内容与“温度”配置相近，请参照书上完成。部件配置完后，通过缩放及平移将部件放置到合适的位置，最终效果如图所示。项目小结本章主要围绕工业互联网云平台、数据上云与数据可视化等进行教学，项目小节如图所示。思考与练习1.如何