1. 显示板配置说明

1. 显示板配置说明

1.1. 修订记录

日期	版本	说明	编写
2018-08-01	1.9 R1	创建	hq
2018-10-24	1.9 R2	新增卡片、累计值显示、柱状图配置方法	smx
2019-04-11	2.0 R1	新增饼状图、雷达图、视频监控配置方法	Roy
2020-05-06	2.0 R2	文档格式修改	Roy

1.2. 概述

1.2.1. 文档说明

本文档是对MixIOT系统中Dashboard（显示板）配置文件作一个使用说明，主要概述文件的配置规则和支持图表类型。教用户怎样配置设备状态监控页面，目前Dashboard配置文件为JSON格式，支持的图表类型有卡片、横向式卡片、组态图、曲线、仪表盘、地图、柱状图、表格、列表、组参数列表。在后续的开发应用中支持的类型会不断的完善和增加。

1.2.2. 适用对象

本文档适用于智物联开发人员和ADMIN管理员。

1.3. Dashboard脚本解析

Dashboard（显示板）的主要作用就是配置设备状态监控页面，通过对脚本的配置，设备状态监控页面样式和监控内容可根据用户自身的需求自行配置。用户只需根据规定的格式和我司提供的图表类型即可配置出如下图2.0所示的设备状态监控页面。那么，本章的重点就是如何配置（显示板），因此接下来就需要对Dashboard（显示板）配置文件作一个解析，在这里我们将配置文件分为布局显示板、分页、图表类型三大步进行讲解。

注：在Dashboard配置脚本中，所使用语言为JSON语言，所有提供的图表模板都已按JSON格式设定好，因此用户只需对提供的图表模板可编辑处进行配置即可。另脚本中符号都为英文符号。

1.3.1. 显示板布局

显示板显示区域通过行和列的规划以正方形小格作为基本单位，基本单位的边长由整个区域的宽度决定。如下图2.1.1所示，画布被分为4 X5格局，如整个页面的宽度为100，则每个正方形的长度为20；每一格的坐标根据图中所示，起始格为[0,0]，横坐标为行，纵坐标为列。按图中规律以此类推。因此在布局显示板时需要设计好页面划分格局，以及每个图表的摆放位置和所占区域大小。

1.3.2. 分页

元素说明：分页是指将页面分为多页。分页脚本如下：

{
    "Dashboard-1": {
        "name": "气站监控",
        "dataType": "images",
        "row ": 12,
        "col ": 8,
        "data": [{
            "type": "card",
            "attribute": "card-01",
            "method": "socket",
            "itemData": {"id":"S02","name":"电压","unit":"V","value":"0"},
            "xys": {
                "pos": [0, 0],
                "len": [1, 1]
            }
        }]
    },
    "Dashboard-2": {
        "name": "流量计参数",
        "dataType": "text",
        "data": [{
            "type": "textData",
            "attribute": "FlowMeterParams",
            "name": "流量计参数",
            "method": "socket",
            "itemData": [
                {"id":"S01","value":0,"name":"瞬时流量","unit":"Nm³/h"}
            ],
            "xys": {
                "pos": [0, 0],
                "len": [1, 8]
            }
        }]
    }
}

效果图如下：

字段解析如下：

Dashboard-1：分页起始标志，该处名称不可相同，一般规定第一页就写Dashboard-1，第二页就写Dashboard-2，以此类推。
name：指该页显示板名称，可自定义。如图中标记处所示。
dataType：指显示板类型，目前显示板类型分为两类，分别为images和text。
- images：显示包含了图表等图形的数据。
- text：显示纯文本列表的数据。
row：指划分行数。根据布局设定行数。
col：指划分的列数。根据布局划分列数。
data：指显示板内容。

注：当row和col不写时，系统默认为4 X 8，即4行8列。

1.3.3. 图表类型解析

图表就是显示板页面中需要放入的元素。目前我们支持的图表类型元素有卡片、横向式卡片、组态图、曲线、仪表盘、地图、柱状图、表格、列表、组参数列表，接下来我们就对所支持的图表类型作一个详细的解析。

1.3.3.1. 卡片

元素说明：卡片就是参数数据以卡片的形式展示。卡片脚本如下：

{
    "Dashboard-1": {
        "name": "气站监控",
        "dataType": "images",
        "row": 12,
        "col": 8,
        "data": [
            {
                "type": "card",
                "attribute ": "card-01",
                "init": true,
                "url": "service",
                "method": "socket",
                "fontColor": "#ffffff",
                "backgroundColor": "#5387ff",
                "itemData": {
                    "id": "S01","name": "电压","unit": "V","value": "0"
                },
                "xys": {
                    "pos": [0,0],
                    "len": [1,1]
                }
            }
        ]
    }
}

效果图如下：

字段解析如下：

type：指图表类型，card指卡片类型，每一个类型都有一个唯一的名称，如曲线的type为“line”，如将card改为line，则在页面显示出来的则为曲线。但其它配置没按曲线的格式更改，加载出来的曲线是不会显示数据的，因此此处不建议用户更改，用户如需选用哪种图表类型，直接在模板中完整的复制相应的图表类型即可。
attribute：标识符，用以获取图表更新数值。用户可自定义，只需保证相同图表类型在同一分页中只存在唯一的一个标识符。
init：是否需要通过请求初始化数据。填写项分别为“true/false”，对应“是/否”。模板已规定好，无需更改。
url：请求接口，目的是为了区分相同图表应该请求那里的数据进行填充。除作业、服务、报警、故障表格需要更改外，其余图表无需更改，按模板已写入的使用即可。作业、服务、报警、故障表格的url填写方法在后续文档中进行讲解。
method：指数据更新的方式，目前的方式有socket和http两种，此处不可更改，按模板样式即可。
fontColor：卡片字体颜色，需要则配置，不需要则不配置，可留空或删掉此字段。
backgroundColor：卡片背景色，需要则配置，不需要则不配置，可留空或删掉此字段。
itemData：数据项，该字段大括号中为显示参数的数据来源及其它信息设置。该字段不可更改。按模板样式即可。
id：指数据来源，该处需填写所需显示的参数变量，如上压力参数的变量（变量在数据表中可查询到）为S01，则只需将S01填入即可。
name：参数名称。根据对应的S01的参数名称填写即可。
unit：参数单位。根据参数对应的单位填写即可。
value：默认初始值，即无数据上报时页面的显示的数据。一般设置为0。
flag：状态对应码，如需页面显示文字时需配置此项，否则无需配置。例如设备状态0代表停机，1代表运行；如不配置此项，在页面上显示的就是0或1，如需显示停机和运行文字，则需按此格式 "flag": {"0": "停机", "1":"运行"} 进行配置，key也支持使用区间值 {"0.5 <= $val <1.8":"正常"}。
多个key合并显示，id字段为要合并的key集合，split字段为分隔符："itemData"：{ "id": ["S01","S11","S12"], "split":":" ,"value": 0, "name": "当前时间", "unit": "" }

xys：放置起始区域和占用空间设定，大括号中为设定参数。
pos：指图表放置起始区域，在2.1章节中已提过，显示板是将页面分为一个个小正方形。每一个正方形都有一个坐标值。该处图表放置的起始坐标就是正方形的坐标值。如该卡片的起始区域为第二行第三列，如图棕色标记所示，则坐标为[1,2]。

len：指图表所占区域大小，该处填写的横坐标指占用行数，纵坐标指占用的列数，如上图所示，若起始区域为[1,2]，占用区域坐标为[2,3]，则图表摆放的位置为图中棕色和蓝色标记的整个区域。

注：以上所述字段在各个图表内作用一致，因此在后面的讲解中将不再重复介绍，只介绍未介绍过的字段。

1.3.3.1.1. 统计类卡片

元素说明：统计类卡片指展示的参数不是适配器直接采集的数据，而是通过统计计算程序计算出来的数据。累计值有单独配置字段，具体在最后的字段解析说明。

统计类卡片脚本如下：

{
    "type": "card",
    "attribute": "card-01",
    "init": true,
    "url": "service",
    "method": "socket",
    "statistics": {"type": "month","total": 1,"id": "CumulativeFlowMonthly"},
    "itemData": {"id": "CumulativeFlowMonthly","name": "上月用气量","unit": "Nm³","value": "0"},
    "xys": {
        "pos": [0,0],
        "len": [1,1]
    }
}

字段解析如下：

statistics：显示统计类增加的条件。单点的，statistics中增加id字段就仅支持文本类的元素，其中统计时间类型的仅支持“当天|上一天，当月|上月”。还有一类多点的，目前仅支持曲线，这点在后续章节中再进行说明。
type：指时间类型，点类的仅支持“月|日（month| day）”。
total：指取多少条历史数单据，当天和当月直接设为0，上一天和上月设为1。
id：指数据来源，该处的数据来源于统计计算程序进过计算后输出的值。如上月用气量的id为CumulativeFlowMonthly.
cumulative：显示累计值配置的条件。即获取当天、当月、当年、历史的累计结果[day|month|year|total]若需显示累计值，则需在配置中添加cumulative字段配置: "cumulative":{id:"cumulativeID","type:day"}字段含义同上

注：使用cumulative字段就将上面脚本中的statistics字段替换掉。

1.3.3.1.2. 横向式卡片

元素说明：指一个卡片可以放置多个参数进行展示。

横向式卡片脚本如下：

{
    "type": "cardX",
    " attribute ": "card-01",
    "init": true,
    "url": "service",
    "method": "socket",
    "itemData": [
        {"id":"S01","name":"电压","unit":"V","value":"0"},
        {"id":"S02","name":"电流","unit":"A","value":"0"}
    ],
    "xys": {
        "pos": [0,0],
        "len": [1,2]
    }
}

效果图如下：

脚本只需按相应的格式往里增加参数即可一个卡片展示多个参数，每个参数占据的空间会根据卡片的大小和参数数量进行均分。

横向式卡片还有另外一种展示形式，就是参数和数据处于上下结构。只需将type字段中的“cardX”更改为“card”即可，效果图如下：

1.3.3.2. 组态图

元素说明：组态图，能够放置一个图片，在图片上显示不同参数运行值。

组态图脚本如下：

{
    "type": "monitor",
    "attribute": "monitor-01",
    "method": "socket",
    "background": "airCompressor.png",
    "statusData": [
        {
            "id": "Z",
            "name": "运行状态",
            "flagCode": "0",
            "flagColor": {"0": "#bacbe1","1": "green"},
            "flag": {"0": "停止","1": "运行"}
        }
    ],
    "itemData": [
        {"id":"S09","name":"电流","unit":"A","value":0,"position":{"top":"12%","left":"17%","position":"absolute"}},
        {"id":"S24","name":"电压","unit":"V","value":0,"position":{"top":"12%","left":"45%","position":"absolute"}}
    ],
    "xys": {
        "pos": [0,0],
        "len": [2,4]
    }
}

效果图如下：

字段解析如下：

background：背景，即加载的图片，后面只需填上图片的文件名即可。“airCompressor.png”即为压缩机的组态图名称。
statusData：状态项，大括号中内容为此状态项的具体配置项，此字段不可更改，按模板样式即可。
id、name、flag字段前面已介绍过，此处不再作介绍。
flagCode：默认状态码，与前面介绍的value字段作用类似，指设备无数据上报时显示一个默认值，设备状态无数据上报时，默认值一般设为0（停止）。
flagColor：颜色对应码，与前面介绍的flag字段作用类似，用于表示哪种颜色对应设备哪种状态。0和1分别是设备的状态码，#bacbe1和green分别代表每种状态的颜色码。颜色码取用方法，目前仅介绍两种最常用的两种方法：
- 方法一：直接百度搜索“RBG取色板”即可。
- 方法二：直接使用谷歌浏览器自带取色板，具体方法查看链接取色板即可。
itemData：数据项，大括号中的内容为此项的具体配置项，此字段不可更改，按模板样式即可。
id、name、unit、value字段前面已介绍过，此处不再作介绍。
position：位置，指该参数在组态图中显示的位置，大括号中位置的设置项。
top：纵向偏移，指上下偏移的距离，数值百分比越大，往下偏移越多。
left：横向偏移：指左右偏移的距离，数值百分比越大，往右偏移越多。
position：定位方式，定位方式分为绝对定位（absolute）和相对定位（relative），在这里我们直接选用绝对定位，即填写absolute即可，无需作更改。

1.3.3.3. 曲线图

元素说明：曲线图，可以以曲线图的形式展示运行数据，最多支持5个参数同时显示在一个元素中。目前支持的曲线图写法分为四类，分别为单曲线、多曲线、标线曲线、统计类曲线。

1.3.3.3.1. 单曲线

元素说明：单曲线，指曲线图中只有一个参数的曲线数据。

单曲线图脚本如下：

{
    "type": "line",
    "attribute": "line-01",
    "name": "排气温度/℃",
    "init": false,
    "url": "service",
    "method": "socket",
    "from": "S05",
    "lineColor": "#4162ff ",
    "legendData": ["排气温度"],
    "min": 0,
    "max": 110,
    "xAxis": [],
    "series": [
        {"name":"排气温度","type":"line","from":"S05","data":[]}
    ],
    "xys": {
        "pos": [0,0],
        "len": [2,4]
    }
}

效果图如下：

字段解析如下：

from：数据来源，与前面所讲id含义相同。
lineColor：曲线颜色
legendData：图例，标示哪条曲线代表哪个参数。一条曲线时，图例默认不显示。多条曲线时才会显示。
min：范围设置，曲线最小值设置。
max：范围设置，曲线最大值设置。
xAxis：横坐标显示数据，不用填写，留空即可。
series：纵坐标显示数据，大括号中为纵坐标数据具体配置项。
name：悬浮窗参数名称。
type：显示方式，直接写“line”即可，无需更改
data：纵坐标数据，不用填写，留空即可。

1.3.3.3.2. 多曲线

元素说明：多曲线指一个曲线图中能显示多条曲线，目前最多支持5条曲线。

多曲线图脚本如下：

{
    "type": "line",
    "attribute": "line-02",
    "name": "瞬时流量/排气温度",
    "init": false,
    "url": "service",
    "method": "socket",
    "from": ["S01","S02"],
    "lineColor": ["#5387ff","#188417"],
    "legendData": ["瞬时流量","排气温度"],
    "xAxis": [],
    "series": [
        {"name":"瞬时流量","type":"line","from":"S01","data":[]},
        {"name":"排气温度","type":"line","from":"S02","data":[]}
    ],
    "xys": {
        "pos": [0,0],
        "len": [2,4]
    }
}

效果图如下：

字段解析如下：

第一个from：所有曲线参数数据来源。两个参数填写格式为“["XXX","XXX"]”，三个参数填写格式为“["XXX","XXX","XXX"]”，以此类推，最多支持五个参数。
lineColor：与单曲线中的lineColor作用相同，就是给每条曲线赋予颜色用于区分。填写格式与上述from字段一致，且一一对应。
series：与单曲线中的series字段作用一致，区别为多曲线里面对应多个配置组，但每个配置组的格式相同。

1.3.3.3.3. 标线曲线

元素说明：标线曲线指曲线图中可以设置一条分界标记线，如原气电比、标准气电比、压力上限等。

标线曲线脚本如下：

{
    "type": "line",
    "attribute": "line-03",
    "name": "压力/Mpa",
    "init": false,
    "url": "service",
    "method": "socket",
    "from": "S05",
    "lineColor": "#4162ff",
    "legendData": ["压力"],
    "min": 0,
    "max": 1,
    "xAxis": [],
    "series": [
        {"name":"压力","type":"line","from":"S05","data":[]}
    ],
    "markLineData": [
        {"name":"压力上限","yAxis":"0.5"}
    ],
    "xys": {
        "pos": [0,0],
        "len": [2,4]
    }
}

效果图如下：

标线曲线是在单曲线的基础上增加了一个“markLineData”字段的配置项，其余与单曲线配置无任何区别。

字段解析如下：

markLineData：标线的配置字段，中括号中为具体配置项。标线可以配置多条。
name：标线名称。按实际要求填写即可。
yAxis：标线值，标线设定的值，根据实际要求设定即可。

多条标线配置方法只是完整的增加一组标线配置项即可，配置脚本如下：

"markLineData":[
    {"name": "温度上限","yAxis": "1000"},
    {"name": "温度下限","yAxis": "-30"}
]

1.3.3.3.4. 统计类曲线

元素说明：统计类曲线指显示的数据是经过统计计算后的数据。

统计类曲线脚本如下：

{
    "type": "line",
    "attribute": "line-04",
    "name": "每小时累计耗电量/Nm³",
    "init": false,
    "url": "service",
    "method": "socket",
    "statistics": {"type": "hour","total": 24},
    "from": "S05",
    "lineColor": "#4162ff",
    "legendData": ["每小时累计耗电量"],
    "min": 0,
    "max": 500,
    "xAxis": [],
    "series": [
        {"name":"每小时累计耗电量","type":"line","from":"S05","data":[]}
    ],
    "xys": {
        "pos": [0,0],
        "len": [2,4]
    }
}

效果图如下：

统计类曲线与单曲线基本相同，统计曲线只是在单曲线的基础上增加了一个statistics字段。

脚本字段解析如下：

statistics：统计数据配置项，括号中为具体配置项。
type：指统计类型，分别指year、month、week、day、hour，含义是每年、每月、每周、每天、每小时为统计单位。
total：数据条数，指曲线加载多少条历史数据进行显示。

例如：

{"type":"hour","total":24}是指加载24条当前时间前每小时统计的历史数据。

{"type":"day","total":7}是指加载7条当前时间前每天统计的历史数据。

以此类推…...

1.3.3.4. 仪表盘

元素说明：仪表盘，参数值以仪表盘的形式展示出来。

仪表盘脚本如下：

{
    "type": "gauge",
    "attribute": "gauge-01",
    "name": "供气压力",
    "init": false,
    "url": "service",
    "method": "socket",
    "from": "S05",
    "unit": "Mpa",
    "min": 0,
    "max": 2,
    "value": 0,
    "steps": 5,
    "color": "#67c23a",
    "xys": {
        "pos": [0,0],
        "len": [2,4]
    }
}

效果图如下：

脚本字段解析如下：

在仪表盘的脚本中，每个字段的含义和用法在前面已进行过说明，这里只重点对“color”字段的特殊用法进行一下说明。

steps：分区，设置仪表盘分格数量。
color：仪表盘颜色设置，仪表盘颜色设置分为两种，一种是单色配置，另一种为多色配置。单色配置：如上效果图所示，上述脚本的仪表盘轮廓为绿色，这是最基本的一种设置方法。整个仪表盘轮廓为一种颜色。多色配置：
- 多色配置指仪表盘按照数据不同范围分为不同颜色。多色配置的先决条件是仪表盘必须设定好范围值，即min、max字段必须填写。多色配置格式：[范围值,"颜色码"]

例如：

三色配置脚本

“color”: [[0.6,"#91c7ae"],[1.6,"#63869e"],[2,"#c23531"]]

效果图

1.3.3.5. 地图

元素说明：地图，能够在地图上显示设备的位置。

地图脚本如下：

{
    "type": "bdMap",
    "attribute": "sta_bdMap",
    "init": false,
    "url": "service",
    "method": "socket",
    "name": "设备定位",
    "centerPoint": {
        "long": "113.933782",
        "lat": "22.582649"
    },
    "mapPoint": [],
    "xys": {
        "pos": [0,0],
        "len": [3,4]
    }
}

效果图如下：

脚本字段解析如下：

centerPoint：默认显示中心点，即设置一个坐标是地图加载时直接显示默认区域。设置坐标如下。
- long：经度
- lat：纬度

添加地图时，除默认中心点可按需要进行更改外，其余配置无需任何更改，只需完整添加整个脚本即可。

1.3.3.6. 柱状图

元素说明：柱状图，将数据以柱状图的形式进行显示。目前仅支持统计类数据。

柱状图脚本如下：

{
    "type": "bar",
    "attribute": "bar_AirSupplyPres1",
    "name": "上月/本月耗电量/kW·h",
    "init": "false",
    "url": "service",
    "method": "socket",
    "statistics": {"type": "month"},
    "from": ["PowerConsumption","PowerConsumption"],
    "legendData": ["上月耗电量","本月耗电量"],
    "xAxis": [],
    "series": [
        {"name": "上月耗电量","from": " PowerConsumption ","data": []},
        {"name": "本月耗电量","from": " PowerConsumption ","data": []}
    ],
    "xys": {
        "pos": [0,0],
        "len": [2,5]
    }
}

效果图如下：

脚本字段解析如下：

statistics：统计项设置，大括号内为设置项。
type：统计类型设置项，支持week|month,表示上周/本周|上月/本月，设置为week时，表示上周和本周每天的统计数据进行对比；设置为month时，表示上月和本月每天的统计数据进行对比。
from：数据来源项，此处直接填写统计计算的ID。第一个填空表示上周|上月的值，第二个填空表示本周|本月的值。
series：柱形图的构成数据对象，变量。第一组默认取上周|上月的数据，第二组默认取本周|本月的数据。
name：统计项名称。
from：此处也是填写统计计算的ID。
data：当前柱状显示的值，通常留空。

1.3.3.7. 表格

元素说明：表格，以表格的形式展示服务、作业、报警、故障、服务和作业、报警和故障记录。

表格脚本如下：

{
    "type": "grid",
    "attribute": "grid_warning",
    "name": "异常记录",
    "init": false,
    "url": "warn",
    "method": "http",
    "params": {"name": "","created": ""},
    "gridTitle": ["名称","时间"],
    "gridData": [
        [],
        []
    ],
    "xys": {
        "pos": [0,0],
        "len": [3,2]
    }
}

效果图如下：

该处表格的使用主要掌握url、params、gridTitle的对应关系即可。

其对应关系如下：

服务 url项：service，显示项 params和gridTitle
- 可选[service_id--编号,service_name--名称,category--类型,description--描述,date--时间]
作业 url项：activity，显示项 params和gridTitle
- 可选[activity_id--编号,activity_name--名称,category--类型,description--描述,date--时间]
报警 url项：alarm，显示项 params和gridTitle
- 可选[alert_id--编号,alert_name--名称,description--描述,created--时间]
故障 url项：alarm，显示项 params和gridTitle
- 可选[fault_id--编号,fault_name--名称,description--描述,created--时间]
报警故障 url项：warn，显示项 params和gridTitle
- 可选[id--编号,name--名称,type--类别,description--描述,created--时间]
服务作业 url项：task，显示项 params和gridTitle
- 可选[id--编号,name--名称,type--类别,description--描述,date--时间]

例如，表格只需要显示服务的记录，显示的字段为类型和时间，则需选用服务项的配置，url、params、gridTitle配置如下：

{
    "url": "service",
    "method": "http",
    "params": { "category": "", "created": "","size":15 },
    "gridTitle": ["类型", "时间"]
}

注：此项最多支持三个,按上述规则以此类推

同时，以上的记录均为默认取最新10条记录，若需显示更多记录数，可在显示项里配置{"size":"数量"} 参数，例如：取最新15条数据。脚本如下：

{
    "url": "warn",
    "method": "http",
    "params": { "name": "", "created": "","size":15 },
    "gridTitle": ["名称", "时间"]
}

1.3.3.8. 列表

元素说明：列表，通过固定的样式，显示多个参数的列表。

列表脚本如下：

{
    "type": "textData",
    "attribute": " textData -01",
    "name": "电表参数",
    "method": "socket",
    "itemData": [
        {"id":"S38","value":0,"name":"电表表号","unit":""},
        {"id":"S39","value":0,"name":"组合有功总电能","unit":"kW·h"},
        {"id":"S40","value":0,"name":"组合有功尖峰电能","unit":"kW·h"},
        {"id":"S41","value":0,"name":"组合有功峰电能","unit":"kW·h"},
        {"id":"S42","value":0,"name":"组合有功平电能","unit":"kW·h"},
        {"id":"S43","value":0,"name":"组合有功谷电能","unit":"kW·h"}
    ],
    "xys": {
        "pos": [0,0],
        "len": [1,8]
    }
}

效果图如下：

脚本解析如下：

列表的格式与横向式卡片使用规则相同，只需在itemData字段中配置相对应的参数配置即可按效果图样式展示。

1.3.3.9. 组参数列表

元素说明：组参数列表，将参数和设备状态以图列表形式显示。

组参数列表脚本如下：

{
    "type": "crewCard",
    "attribute": "sta_crewCard01",
    "name": "一号机组",
    "init": true,
    "url": "service",
    "method": "socket",
    "statusData": {
        "id": "Z",
        "name": "机组 1 状态",
        "flagCode": "0",
        "flagColor": {"0": "#bacbe1","1": "green"},
        "flag": {"0": "停止","1": "运行"}
    },
    "itemData": [
        {"id":"S23","value":"0","name":"转速","unit":"rpm"},
        {"id":"S24","value":"0","name":"油压","unit":"bar"},
        {"id":"S25","value":"0","name":"水温","unit":"℃"},
        {"id":"S26","value":"0","name":"电池电压","unit":"V"}
    ],
    "xys": {
        "pos": [0, 0],
        "len": [3, 2]
    }
}

效果图如下：

脚本字段解析如下：

组参数列表的使用主要在statusData和itemData字段配置项，这两个字段具体的使用方法可参考组态图，在这里就不再做重复讲解。若设备无状态显示需求，可直接去掉statusData字段的整个配置内容。

1.3.3.10. 饼状图

元素说明：饼状图，将数据以饼状图的形式进行显示。

饼状图脚本如下：

{
    "type": "pie",
    "attribute": "pie_attribute01",
    "name": "设备地区分布图",
    "cumulative": {
        "id": ["EQ_OnePumpWorkingTime_taida", "EQ_TwoPumpWorkingTime_taida", "EQ_PowerConsumption_type", "EQ_FuelConsumption_type", "EQ_FeedWater_type", "EQ_ProduceSteam_type", "EQ_BurnerStartFrequency_taida", "EQ_TotalBoilerStartUpTime_taida"],
        "type": "total"
    },
    "from": ["EQ_OnePumpWorkingTime_taida", "EQ_TwoPumpWorkingTime_taida", "EQ_PowerConsumption_type", "EQ_FuelConsumption_type", "EQ_FeedWater_type", "EQ_ProduceSteam_type", "EQ_BurnerStartFrequency_taida", "EQ_TotalBoilerStartUpTime_taida"],
    "legendData": ["华东", "华南", "华中", "华北", "东北", "西北", "西南", "其他"],
    "series": [{
      "data":[
        {"from":"EQ_OnePumpWorkingTime_taida","value":0,"name":"华东"},
        {"from":"EQ_TwoPumpWorkingTime_taida","value":0,"name":"华南"},
        {"from":"EQ_PowerConsumption_type","value":0,"name":"华中"},
        {"from":"EQ_FuelConsumption_type","value":0,"name":"华北"},
        {"from":"EQ_FeedWater_type","value":0,"name":"东北"},
        {"from":"EQ_ProduceSteam_type","value":0,"name":"西北"},
        {"from":"EQ_BurnerStartFrequency_taida","value":0,"name":"西南"},
        {"from":"EQ_TotalBoilerStartUpTime_taida","value":0,"name":"其他"}
      ]
  }],
  "xys": {
      "pos": [0, 0],
      "len": [5, 5]
  }
}

脚本解析如下：

legendData：图例显示的名称,对应下面的series中的每一项
series：饼状图的构成数据,变量

1.3.3.11. 雷达图

元素说明：雷达图，将数据以雷达图的形式进行显示。

雷达图脚本如下：

{
  "type":"radar",
  "attribute": "radar_deviceRadarMap",
  "name": "设备状态映像指数",
  "legendData":["设备状态映像指数"],
  "indicator": [
    { "name": "1#发电12线压", "max": 2000},
    { "name": "1#转速", "max": 100},
    { "name": "1#发电频率", "max": 100},
    { "name": "1#市线压1-2", "max": 100},
    { "name": "1#市电频率", "max": 100},
    { "name": "1#电池电压", "max": 1000},
    { "name": "1#D+(充电电压)", "max": 1000},
    { "name": "1#油压", "max": 100},
    { "name": "1#水温", "max": 100},
    { "name": "1#燃油阀", "max": 1000}
  ],
  "seriesData": [
    {"value" : [1500, 49.97, 49.94, 80.14, 90.06, 0, 391.41, 26.1, 27, 379.95],"name" : "设备状态映像指数"}
  ],
  "xys":{
    "pos":[ 0, 0],
    "len":[ 5, 5]
  }
}

脚本解析如下：

legendData：图例显示的名称,对应下面的series中的每一项
indicator：雷达图的指示器,用来指定雷达图中的多个变量
seriesData：用来指定雷达图中显示值

1.3.3.12. 视频监控

元素说明：视频监控，支持标准流（HLS、RTMP）协议视频监控。

视频监控脚本如下：

{
  "type": "video",
  "attribute": "video_ys7",
  "name": "机组1监控",
  "platform":"ys7",
  "videoSrc":{
    "rtmp" : "rtmp://rtmp.open.ys7.com/openlive/1f06045ec1ea4f0fb2f5a32bea1aecec",
    "http" : "http://hls.open.ys7.com/openlive/6887896824264f2482641888fa7813a6.m3u8"
  },
  "xys": {
      "pos": [0, 0],
      "len": [4, 6]
  }
}

脚本解析如下：

type：video为视频监控类型元素
platform：平台 {"ys7":"萤石云"}
videoSrc：监控视频HLS、RTMP地址

Dashboard显示板配置规范

1. 显示板配置说明

1.1. 修订记录

1.2. 概述

1.2.1. 文档说明

1.2.2. 适用对象

1.3. Dashboard脚本解析

1.3.1. 显示板布局

1.3.2. 分页

1.3.3. 图表类型解析

1.3.3.1. 卡片

1.3.3.1.1. 统计类卡片

1.3.3.1.2. 横向式卡片

1.3.3.2. 组态图

1.3.3.3. 曲线图

1.3.3.3.1. 单曲线

1.3.3.3.2. 多曲线

1.3.3.3.3. 标线曲线

1.3.3.3.4. 统计类曲线

1.3.3.4. 仪表盘

1.3.3.5. 地图

1.3.3.6. 柱状图

1.3.3.7. 表格

1.3.3.8. 列表

1.3.3.9. 组参数列表

1.3.3.10. 饼状图

1.3.3.11. 雷达图

1.3.3.12. 视频监控

results matching ""

No results matching ""