• 1. Dashboard显示板配置使用手册
  • 2. 修订记录
  • 3. 显示板支持列表配置
    • 3.1. 配置说明
      • 3.1.1. 卡片样式说明:
      • 3.1.2. 服务作业报警故障说明:
      • 3.1.3. 统计类字段说明
      • 3.1.4. 区间状态类说明:
      • 3.1.5. 多个key合并显示说明:
      • 3.1.6. 累计值配置说明:
      • 3.1.7. 设备在线/离线标识配置说明:
    • 3.2. 显示板分页说明
      • 3.2.1. 分页示例
    • 3.3. 示例说明
      • 3.3.1. 组态图
      • 3.3.2. 曲线
      • 3.3.3. 表盘
      • 3.3.4. 地图
      • 3.3.5. 柱状图
      • 3.3.6. 饼状图
      • 3.3.7. 卡片
      • 3.3.8. 横向式卡片
      • 3.3.9. 雷达图
      • 3.3.10. 表格
      • 3.3.11. 列表
      • 3.3.12. 组参数列表
      • 3.3.13. 视频监控

    1. Dashboard显示板配置使用手册

    2. 修订记录

    日期版本说明编写
    2019-11-011.0 R11.组态图区块增加title；2.增加显示板状态灯配置；lizhijun

    3. 显示板支持列表配置

    注:

    图表数据更新需配置一个from表示数据来源,不配置无法更新数据

    其他的数据来源则是配置在项id中。

    3.1. 配置说明

    3.1.1. 卡片样式说明:

    卡片支持颜色配置, "backgroundColor" 属性配置背景色, "fontColor" 属性配置字体颜色。

    3.1.2. 服务作业报警故障说明:

    • 服务 url项:"service",显示项 "params" 可选 ["service_id"—编号,"service_name"—名称,"category"—类型,"description"—描述,"date"—时间,"equipment_name"—设备名称]
    • 作业 url项:"activity",显示项 "params" 可选 ["activity_id"—编号,"activity_name"—名称,"category"—类型,"description"—描述,"date"—时间,"equipment_name"—设备名称]
    • 报警 url项:"alarm",显示项 "params" 可选 ["alert_id"—编号,"alert_name"—名称,"description"—描述,"created"—时间,"equipment_name"—设备名称]
    • 故障 url项:"fault",显示项 "params" 可选 ["fault_id"—编号,"fault_name"—名称,"description"—描述,"created"—时间,"equipment_name"—设备名称]
    • 报警故障 url项:"warn",显示项 "params" 可选 ["id"—编号,"name"—名称,"type"—类别,"description"—描述,"created"—时间,"equipment_name"—设备名称]
    • 服务作业 url项:"task",显示项 "params" 可选 ["id"—编号,"name"—名称,"type"—类别,"description"—描述,"date"—时间,"equipment_name"—设备名称]

    以上都记录均为默认取最新10条记录,若需显示更多记录数,可在显示项里配置 size:10 参数；

    上面所有获取数据显示的仅且支持在表格中显示。

    3.1.3. 统计类字段说明

    • type:年|月|周|日|小时(year|month|week|day|hour)
    • total:取多少条历史记录

    多个点的,仅支持曲线

    单点的,"statistics" 中增加 "id" 字段,

    如上月的:"statistics":{"type":"month","total":1,"id":"TotalCumulativeActivePower2"},

    注:柱状图统计,需配置 "statistics":{"type":"month"},type可为[week|month],表示上周/本周|上月/本月

    3.1.4. 区间状态类说明:

    卡片等文本类可配置 "flag" 的 "key" 为区间值,如: {"0.5<=$val<1.8":正常}

    表盘可配置 "color" 为区间颜色段:

    如:[[0.6,"#91c7ae"],[1.6,"#63869e"],[2,"#c23531"]],其中数值为一个区间的终点值,当配置有最大最小值(max,min)字段方可生效

    3.1.5. 多个key合并显示说明:

    id字段为要合并的key集合,split字段为分隔符

    如:{ "id": ["S01","S011","S012"], "split":":" ,"value": 0, "name": "瞬时流量", "unit": "Nm³/h" },

    3.1.6. 累计值配置说明:

    即获取当天、当月、当年、历史的累计结果 [day|month|year|total]

    若需显示累计值,则需在配置中添加 "cumulative" 字段配置: "cumulative":{"id":"cumulativeID","type":"day"}

    3.1.7. 设备在线/离线标识配置说明:

    在组件配置中添加 "equipmentStatus" 字段配置: "equipmentStatus":{"id":"updateStatusId","status":{"0":"离线","1":"在线"}}

    配置项 "itemData" / "statusData" 中子项配置:{"id":"updateStatusId","name":"吨汽耗电","value":"离线","cache":false}

    3.2. 显示板分页说明

    注:

    在每页显示板中可自定义行和列,不写默认为4行8列,text类型不支持。

    显示板目前仅且支持image与text两种类型

    具体每项组件配置详情请看显示板示例说明,此处只列举显示板分页方式

    3.2.1. 分页示例

    1. {
    2.   "Dashboard-1":{
    3.     "name":"Dashboard中文名称",//显示板分页名称
    4.     "dataType":"images",//显示板类型
    5.     "row":4,//行数
    6.     "col":8,//列数
    7.     "data":[  //组件数组
    8.       { //定义一个显示板组件
    9.         "type":"gauge",
    10.         "attribute": "sta_gauge",//显示板中定义一个压力仪表盘,当前显示板该图表的key,在当前显示板中必须唯一。
    11.         "name":"供气压力",
    12.         "unit":"Mpa",
    13.         "min":0,
    14.         "max":2,
    15.         "value":$Pressure,
    16.         "step":5,
    17.         "color":"#67c23a",
    18.         "xys":{
    19.           "pos":[0,2],
    20.           "len":[2,2]
    21.         }
    22.       }
    23.       ...
    24.     ]
    25.   },
    26.   "Dashboard-2":{
    27.     "name":"Dashboard中文名称",//显示板分页名称
    28.     "dataType":"text",//显示板类型
    29.     "data":[  //组件数组
    30.       {
    31.              "type":"textData",//图表的类型
    32.              "attribute": "grid_AirSupplyPres1",//标识符,用以获取图表更新数值,自定义,唯一
    33.              "name": "某站点用户访问来源",//label显示的图表名称
    34.              "itemData":[ //数据项包括 标识符(id),值(value),名称(name) 单位(unit) 状态码对应表(flag)
    35.                {"id":"zhijiefangwen","value":335, "name":"直接访问","unit":"单位","flag": {"0": "卸载", "1":"加载"}},
    36.                {"id":"youjianyingxiao","value":310, "name":"邮件营销","unit":"单位"},
    37.                {"id":"lianmengguanggao","value":234, "name":"联盟广告","unit":"单位"},
    38.                {"id":"shipinguanggao","value":135, "name":"视频广告","unit":"单位"},
    39.                {"id":"sousuoyinqing","value":1548, "name":"搜索引擎","unit":"单位"}
    40.              ]
    41.       }
    42.       ...
    43.     ]
    44.   }
    45. }

    3.3. 示例说明

    3.3.1. 组态图

    1. {
    2.   "type":"monitor",   //图表类型
    3.   "name":"标题",   //图表标题，设置则显示，不设置则无
    4.   "attribute": "sta_AirSupplyPres", //标识符,用以获取图表更新数值,自定义,唯一
    5.   "style": { // 背景图形式设置
    6.     "outer": {
    7.       "width": "90%",
    8.       "height": "94%",
    9.       "left": "10%",
    10.       "top": "6%"
    11.     },
    12.     "inner": {
    13.       "width": "90%",
    14.       "height": "100%",
    15.       "background-size": "100% 100%"
    16.     }
    17.   },
    18.   "background": "airCompressor.png",  //组态背景图，设备图名称,鉴于没有上传组态图附件的地方,只能以名称匹配存储好的静态图片文件
    19.   "monitorImages": {"id":"z","defImg":"airCompressor_stop.png","flagImage":{0:"airCompressor_stop.png",1:"airCompressor_start.png"}}, //组态图列表配置,在需要根据状态切换时配置。["airCompressor.png"]
    20.   "statusData":[
    21.     {
    22.       "id":"status_item_one",
    23.       "name":"运行状态",
    24.       "flagCode":"0",
    25.       "flagColor":{"0": "#bacbe1", "1":"green"},  //状态码颜色对应表
    26.       "flag": {"0": "未获取", "1":"已获取"},      //状态码对应表
    27.     },
    28.     {
    29.       "id":"status_item_two",
    30.       "name":"加载状态",
    31.       "flagCode":"0",
    32.       "flagColor":{"0": "#fa5555", "1":"green"},  //状态码颜色对应表
    33.       "flag": {"0": "卸载", "1":"加载"},          //状态码对应表
    34.     }
    35.   ],
    36.   "itemData":[
    37.     {
    38.       "id":"L1_2_3",
    39.       "name":"主机电流A",
    40.       "unit":"A",
    41.       "value":0,
    42.       "position": { //项放置的位置
    43.           "top": "12%",
    44.           "left": "17%",
    45.           "position": "absolute"
    46.       }
    47.     },
    48.     {
    49.       "id":"L1_2_4",
    50.       "type": "liquid",
    51.       "max": 100,
    52.       "min": 0,
    53.             "value": 0,
    54.       "position": {
    55.         "top": "68%",
    56.         "left": "0.5%",
    57.         "position": "absolute"
    58.       }
    59.     },
    60.     {
    61.       "id":"L1_2_5",
    62.       "type": "status",// 状态类型
    63.       "on": 1,
    64.             "off": 0,
    65.       "value": 0,
    66.       "position": {
    67.         "top": "80%",
    68.         "left": "0.5%",
    69.         "position": "absolute"
    70.       }
    71.     },
    72.     {
    73.       "id":"L1_2_5",
    74.       "type": "light", // 状态灯类型, 初始化默认灰色
    75.       "on": 1,  // green
    76.             "off": 0, // red 
    77.       "value": 0,
    78.       "position": {
    79.         "top": "80%",
    80.         "left": "0.5%",
    81.         "position": "absolute"
    82.       }
    83.     }
    84.   ],
    85.   "xys":{         //图表位置信息
    86.     "pos":[0,0],    //图表开始位置,[0,0]开始
    87.     "len":[2,5]     //所占大小([行,列]),[1,1]开始
    88.   },
    89. }

    组态图示例代码

    1. {
    2.   "type": "monitor",
    3.   "attribute": "monitorAttribute",
    4.   "style": {
    5.     "outer": {
    6.       "width": "90%",
    7.       "height": "94%",
    8.       "left": "10%",
    9.       "top": "6%"
    10.     },
    11.     "inner": {
    12.       "width": "90%",
    13.       "height": "100%",
    14.       "background-size": "100% 100%"
    15.     }
    16.   },
    17.   "background": "yitizhengqi.png",
    18.   "monitorImages": { "id": "Z", "defImg": "yitizhengqi.png", "flagImage": {  "0": "yitizhengqi.png", "1": "yitizhengqi.gif" } },
    19.   "statusData": [
    20.     {
    21.       "id": "Z",
    22.       "name": "运行状态",
    23.       "flagCode": 0,
    24.       "flagColor": { "0": "#bacbe1", "1": "green" },
    25.       "flag": { "0": "停机", "1": "开机" }
    26.     },
    27.     {
    28.       "id": "E09",
    29.       "name": "1#给水泵",
    30.       "flagCode": 0,
    31.       "flagColor": { "0": "#bacbe1", "1": "green" },
    32.       "flag": { "0": "停机", "1": "开机" }
    33.     }
    34.   ],
    35.   "itemData": [
    36.     {
    37.       "id":"L1_2_4",
    38.       "type": "liquid",
    39.       "max": 100,
    40.             "value": 0,
    41.       "position": {
    42.         "top": "68%",
    43.         "left": "0.5%",
    44.         "position": "absolute"
    45.       }
    46.     },
    47.     {
    48.       "id":"L1_2_5",
    49.       "type": "status",
    50.       "on": 1,
    51.             "off": 0,
    52.       "value": 0,
    53.       "position": {
    54.         "top": "80%",
    55.         "left": "0.5%",
    56.         "position": "absolute"
    57.       }
    58.     },
    59.     {
    60.       "id": "S07",
    61.       "name": "冷凝器排烟温度",
    62.       "unit": "℃",
    63.       "value": 0,
    64.       "position": {
    65.         "top": "10%",
    66.         "left": "95%",
    67.         "position": "absolute"
    68.       }
    69.     },
    70.     {
    71.       "id": "S22",
    72.       "name": "烟气含氧量",
    73.       "unit": "℃",
    74.       "value": 0,
    75.       "position": {
    76.         "top": "10%",
    77.         "left": "45%",
    78.         "position": "absolute"
    79.       }
    80.     },
    81.     {
    82.       "id": "S13",
    83.       "name": "炉膛温度",
    84.       "unit": "℃",
    85.       "value": 0,
    86.       "position": {
    87.         "top": "65%",
    88.         "left": "45%",
    89.         "position": "absolute"
    90.       }
    91.     },
    92.     {
    93.       "id": "S05",
    94.       "name": "锅炉水位",
    95.       "unit": "cm",
    96.       "value": 0,
    97.       "position": {
    98.         "top": "58%",
    99.         "left": "0%",
    100.         "position": "absolute"
    101.       }
    102.     },
    103.     {
    104.       "id": "S04",
    105.       "name": "蒸汽压力",
    106.       "unit": "MPa",
    107.       "value": 0,
    108.       "position": {
    109.         "top": "1%",
    110.         "left": "14%",
    111.         "position": "absolute"
    112.       }
    113.     },
    114.     {
    115.       "id": "S24",
    116.       "name": "加热PID输出比例",
    117.       "unit": "%",
    118.       "value": 0,
    119.       "position": {
    120.         "top": "45%",
    121.         "left": "65%",
    122.         "position": "absolute"
    123.       }
    124.     },
    125.     {
    126.       "id": "S06",
    127.       "name": "本体排烟温度",
    128.       "unit": "℃",
    129.       "value": 0,
    130.       "position": {
    131.         "top": "28%",
    132.         "left": "65%",
    133.         "position": "absolute"
    134.       }
    135.     },
    136.     {
    137.       "id": "S12",
    138.       "name": "节能器出水温度",
    139.       "unit": "℃",
    140.       "value": 0,
    141.       "position": {
    142.         "top": "75%",
    143.         "left": "95%",
    144.         "position": "absolute"
    145.       }
    146.     },
    147.     {
    148.       "id": "S08",
    149.       "name": "冷凝器进水温度",
    150.       "unit": "℃",
    151.       "value": 0,
    152.       "position": {
    153.         "top": "23%",
    154.         "left": "95%",
    155.         "position": "absolute"
    156.       }
    157.     },
    158.     {
    159.       "id": "S11",
    160.       "name": "节能器进水温度",
    161.       "unit": "℃",
    162.       "value": 0,
    163.       "position": {
    164.         "top": "62%",
    165.         "left": "95%",
    166.         "position": "absolute"
    167.       }
    168.     },
    169.     {
    170.       "id": "S10",
    171.       "name": "节能器排烟温度",
    172.       "unit": "℃",
    173.       "value": 0,
    174.       "position": {
    175.         "top": "49%",
    176.         "left": "95%",
    177.         "position": "absolute"
    178.       }
    179.     },
    180.     {
    181.       "id": "S09",
    182.       "name": "冷凝器出水温度",
    183.       "unit": "℃",
    184.       "value": 0,
    185.       "position": {
    186.         "top": "36%",
    187.         "left": "95%",
    188.         "position": "absolute"
    189.       }
    190.     }
    191.   ],
    192.   "xys": {
    193.     "pos": [ 0, 0 ],
    194.     "len": [ 9, 24]
    195.   }
    196. }

    组态图示例图 Image - 组态图示例图

    3.3.2. 曲线

    1. {
    2.   "type":"line",//图表的类型
    3.   "attribute": "line_AirSupplyPres1", //标识符,用以获取图表更新数值,自定义,唯一
    4.   "name": "曲线图",   //label显示的图表名称
    5.   "statistics":{"type":"hour","total":24},  //若是统计类曲线,添加此属性,type为统计类型[year|month|week|day|hour],total为多少条记录(整数)
    6.   "from":[马赛克id1,马赛克id2]
    7.   "lineColor":"#67c23a",
    8.   "legendData": ["邮件营销"],   //图例显示的名称,对应下面的series中的每一项
    9.   "xAxis":["周一","周二","周三","周四","周五","周六","周日"], //x轴显示的刻度名称,可变
    10.   "multiyAxis":true, //是否使用多个Y轴,默认为true
    11.   "max":100,//最大值,最值为配置坐标系方向轴的值。需要显示标线,此值必须配置。
    12.   "min":0,//最小值,最值为配置坐标系方向轴的值。需要显示标线,此值必须配置。
    13.   "series":[
    14.     {
    15.       "name":"邮件营销",  //当前曲线类别名称
    16.       "type":"line",     //曲线类型
    17.       "from":"马赛克id1",
    18.       "data" : [],      //当前曲线显示的数值,变量数值
    19.     },
    20.     {
    21.       "name":"邮件营销",  //当前曲线类别名称
    22.       "type":"line",    //曲线类型
    23.       "from":"马赛克id2",
    24.       "data" : [],      //当前曲线显示的数值,变量数值
    25.     }
    26.   ],
    27.   "markPointData":[ //可选
    28.     {"name" : "周五", "value" : 90, "xAxis": "周五", "yAxis": 90}
    29.   ],
    30.   "markLineData":[  //可选
    31.     {"type" : "average", "name": "平均值"},
    32.     {"type" : "min", "name": "最小值"}
    33.   ],
    34.   "xys":{       //图表位置信息
    35.     "pos":[2,4],  //图表开始位置,[0,0]开始
    36.     "len":[2,4]   //所占大小([行,列]),[1,1]开始
    37.   },
    38. }

    曲线示例代码

    1. {
    2.   "type": "line",
    3.   "attribute": "line-06",
    4.   "name": "冷凝器进(出)水温度(℃)",
    5.   "lineColor": ["#67c23a", "#4162ff"],
    6.   "statistics": {"type":"day","total":7},
    7.   "from": ["S08", "S09"],
    8.   "legendData": ["冷凝器进水温度", "冷凝器出水温度"],
    9.   "xAxis": ["2019-06-22 09:30:00", "2019-06-23 09:30:00", "2019-06-24 09:30:00", "2019-06-25 09:30:00", "2019-06-26 09:30:00", "2019-06-27 09:30:00", "2019-06-28 09:30:00"],
    10.   "series": [
    11.     {
    12.       "name": "冷凝器进水温度",
    13.       "type": "line",
    14.       "from": "S08",
    15.       "data": [75, 75, 75, 75, 75, 75, 75]
    16.     },
    17.     {
    18.       "name": "冷凝器出水温度",
    19.       "type": "line",
    20.       "from": "S09",
    21.       "data": [25, 25, 25, 25, 25, 25, 25]
    22.     }
    23.   ],
    24.   "xys": {
    25.     "pos": [0, 0],
    26.     "len": [8, 16]
    27.   }
    28. }

    曲线示例图 Image - 曲线示例图

    3.3.3. 表盘

    1. {
    2.   "type":"gauge",       //图表类型
    3.   "attribute": "sta_AirSupplyPres",//标识符,用以获取图表更新数值,自定义,唯一
    4.   "name": "供气压力",   //label显示的的名称
    5.   "from":"马赛克id"
    6.   "unit":"Mpa",   //数值单位
    7.   "min": 0,       //最小值
    8.   "max": 2,       //最大值
    9.   "value":0.35,   //当前的显示值,变量,动态显示的值
    10.   "steps":5,      //显示的分段数
    11.   "color": "#67c23a", //刻度标记的颜色值,可空;区间颜色:[[0.6,"#91c7ae"],[1.6,"#63869e"],[2,"#c23531"]],数值为区间终点值
    12.   "xys":{        //图表位置信息
    13.     "pos":[0,2],  //图表开始位置,[0,0]开始
    14.     "len":[2,2]   //所占大小([行,列]),[1,1]开始
    15.   },
    16. }

    表盘示例代码

    1. {
    2.   "type": "gauge",
    3.   "attribute": "gauge-01",
    4.   "name": "供气压力",
    5.   "from": "S01",
    6.   "unit": "Mpa",
    7.   "min": 0,
    8.   "max": 2,
    9.   "value": 0.35,
    10.   "steps": 5,
    11.   "color": [[0.6,"#3ec13e"],[1.6,"#127aed"],[2,"#fe013a"]],
    12.   "xys": {
    13.     "pos": [0, 0],
    14.     "len": [5, 5]
    15.   }
    16. }

    表盘示例图 Image - 表盘示例图

    3.3.4. 地图

    1. {
    2.   "type":"bdMap",   //图表的类型
    3.   "attribute": "sta_bdMap",//标识符,用以获取图表更新数值,自定义,唯一
    4.   "name": "设备地图分布", //label显示的图表名称
    5.   "centerPoint":{"long":"113.933782","lat":"22.582649"},//地图初始化的中心点经纬度
    6.   "mapPoint":[      //标注点的集合 每项包括 经纬度,信息框字段可选。
    7.     {"long":"113.933782","lat":"22.582649","infoWin":{"title":"智物联","imgPath":"/static/image/customer/test.png","desc":"智物联坐落在中国深圳市宝安区新安,是为工业物联网提供解决方案的公司"}}
    8.   ],
    9.   "xys":{         //图表位置信息
    10.     "pos":[0,4],    //图表开始位置,[0,0]开始
    11.     "len":[2,4]     //所占大小([行,列]),[1,1]开始
    12.   },
    13. }

    地图示例代码

    1. {
    2.   "type":"bdMap",
    3.   "attribute": "sta_bdMap",
    4.   "name": "设备地图分布",
    5.   "centerPoint":{"long":"113.933782","lat":"22.582649"},
    6.   "mapPoint":[
    7.     {"long":"113.933782","lat":"22.582649","infoWin":{"title":"智物联","imgPath":"/static/image/customer/test.png","desc":"工业物联网"}},
    8.     {"long":"113.833782","lat":"22.682649","infoWin":{"title":"智物联","imgPath":"/static/image/customer/test.png","desc":"工业物联网"}}
    9.   ],
    10.   "xys":{
    11.     "pos": [0,0], 
    12.     "len": [8,16] 
    13.   }
    14. }

    地图示例图 Image - 地图示例图

    3.3.5. 柱状图

    1. {
    2.   "type":"bar",   //图表的类型
    3.   "attribute": "bar_AirSupplyPres1",  //标识符,用以获取图表更新数值,自定义,唯一
    4.   "name": "某站点用户访问来源",       //label显示的图表名称
    5.   "statistics":{"type":"month","total":1},//统计属性
    6.   "from":["马赛克id1","马赛克id2"], 
    7.   "legendData": ["直接访问","间接访问"],  //图例显示的名称,对应下面的series中的每一项
    8.   "xAxis":["周一","周二","周三","周四","周五","周六","周日"],
    9.   "series":[
    10.     {         //柱形图的构成数据对象,变量
    11.       "name":"直接访问",
    12.       "from":"马赛克id1",
    13.       "data":[10, 52, 200, 334, 390, 330, 220]
    14.     },
    15.     {
    16.       "name":"间接访问",
    17.       "from":"马赛克id2",
    18.       "data":[8, 60, 150, 300, 360, 380, 290]
    19.     }
    20.   ],
    21.   "xys":{       //图表位置信息
    22.     "pos":[2,4],  //图表开始位置,[0,0]开始
    23.     "len":[1,2]   //所占大小([行,列]),[1,1]开始
    24.   },
    25. }

    柱状图示例代码

    1. {
    2.   "type": "bar",
    3.   "attribute": "bar_AirSupplyPres1",
    4.   "name": "上月/本月产汽量(T)",
    5.   "statistics":{"type":"month"},
    6.   "from": ["EQ_ProduceSteam_type", "EQ_ProduceSteam_type"],
    7.   "legendData": ["上月产汽量", "本月产汽量"],
    8.   "xAxis": [],
    9.   "series": [{
    10.           "name": "上月产汽量",
    11.           "from": "EQ_ProduceSteam_type",
    12.           "data": []
    13.       },
    14.       {
    15.           "name": "本月产汽量",
    16.           "from": "EQ_ProduceSteam_type",
    17.           "data": []
    18.       }
    19.   ],
    20.   "xys": {
    21.       "pos": [0, 0],
    22.       "len": [6, 18]
    23.   }
    24. }

    柱状图示例图 Image - 柱状图示例图

    3.3.6. 饼状图

    1. {
    2.   "type":"pie",     //图表的类型
    3.   "attribute": "pie_AirSupplyPres1",//标识符,用以获取图表更新数值,自定义,唯一
    4.   "name": "某站点用户访问来源",     //label显示的图表名称
    5.   "statistics":{"type":"month","total":1},//统计属性
    6.   "legendData": ["直接访问","邮件营销","联盟广告","视频广告","搜索引擎"],//图例显示的名称,对应下面的series中的每一项
    7.   "series":[
    8.     {
    9.       "data": [ //饼状图的构成数据,变量
    10.         {"value":335, "name":"直接访问"},   
    11.         {"value":310, "name":"邮件营销"},
    12.         {"value":234, "name":"联盟广告"},
    13.         {"value":135, "name":"视频广告"},
    14.         {"value":1548, "name":"搜索引擎"}
    15.       ]
    16.     }
    17.   ],
    18.   "xys":{         //图表位置信息
    19.     "pos":[0,0],    //图表开始位置,[0,0]开始
    20.     "len":[1,2]     //所占大小([行,列]),[1,1]开始
    21.   },
    22. }

    饼状图示例代码

    1. {
    2.   "type":"pie",
    3.   "attribute": "pie_attribute01",
    4.   "name": "设备地区分布图",
    5.   "cumulative": { "id": [
    6.     "EQ_OnePumpWorkingTime_taida",
    7.     "EQ_TwoPumpWorkingTime_taida",
    8.     "EQ_PowerConsumption_type",
    9.     "EQ_FuelConsumption_type",
    10.     "EQ_FeedWater_type",
    11.     "EQ_ProduceSteam_type",
    12.     "EQ_BurnerStartFrequency_taida",
    13.     "EQ_TotalBoilerStartUpTime_taida"
    14.   ],"type": "total" },
    15.   "from": [
    16.     "EQ_OnePumpWorkingTime_taida",
    17.     "EQ_TwoPumpWorkingTime_taida",
    18.     "EQ_PowerConsumption_type",
    19.     "EQ_FuelConsumption_type",
    20.     "EQ_FeedWater_type",
    21.     "EQ_ProduceSteam_type",
    22.     "EQ_BurnerStartFrequency_taida",
    23.     "EQ_TotalBoilerStartUpTime_taida"
    24.   ],
    25.   "legendData": ["华东","华南","华中","华北","东北","西北","西南","其他"],
    26.   "series":[
    27.     {
    28.       "data": [
    29.         {"from":"EQ_OnePumpWorkingTime_taida","value":0, "name":"华东"},
    30.         {"from":"EQ_TwoPumpWorkingTime_taida","value":0, "name":"华南"},
    31.         {"from":"EQ_PowerConsumption_type","value":0, "name":"华中"},
    32.         {"from":"EQ_FuelConsumption_type","value":0, "name":"华北"},
    33.         {"from":"EQ_FeedWater_type","value":0, "name":"东北"},
    34.         {"from":"EQ_ProduceSteam_type","value":0, "name":"西北"},
    35.         {"from":"EQ_BurnerStartFrequency_taida","value":0, "name":"西南"},
    36.         {"from":"EQ_TotalBoilerStartUpTime_taida","value":0, "name":"其他"}
    37.       ]
    38.     }
    39.   ],
    40.   "xys":{
    41.     "pos":[0,0],
    42.     "len":[5,5]
    43.   }
    44. }

    饼状图示例图 Image - 饼状图示例图

    3.3.7. 卡片

    1. {
    2.   "type":"card",    //图表类型
    3.   "attribute": "sta_card11",//标识符,用以获取图表更新数值,自定义,唯一
    4.   "fontColor":"#ffffff", //卡片字体颜色 ,需要则配置,不需要则不配置
    5.   "backgroundColor":"#5387ff",    // 卡片背景色,需要则配置,不需要则不配置
    6.   "cumulative":{"id":"electric"}  //对应itemData中项的id。
    7.   "itemData":{  //若是多个,则使用[{},{}],的形式
    8.     "id":"electric",
    9.     "name":"吨气耗燃料",
    10.     "unit":"T",
    11.     "value":"0",
    12.     "flag": {"0": "卸载", "1":"加载"}, //卡片显示状态文字类时使用,状态码对应表
    13.   },
    14.   "xys":{       //图表位置信息
    15.     "pos":[0,5],  //图表开始位置,[0,0]开始
    16.     "len":[1,1]   //所占大小([行,列]),[1,1]开始
    17.   },
    18. },

    卡片示例代码

    1. {
    2.   "type": "card",
    3.   "attribute": "sta_card01",
    4.   "itemData": [
    5.     {
    6.       "id": "Z",
    7.       "name": "锅炉运行状态",
    8.       "unit": "",
    9.       "value": "0",
    10.       "flag": { "0": "停机", "1": "开机" }
    11.     }
    12.   ],
    13.   "xys": {
    14.     "pos": [ 0, 0 ],
    15.     "len": [ 2, 3 ]
    16.   }
    17. }

    卡片示例图 Image - 卡片示例图

    3.3.8. 横向式卡片

    1. {
    2.   "type":"cardX",     //图表类型
    3.   "attribute": "sta_cardX", //标识符,用以获取图表更新数值,自定义,唯一
    4.   "fontColor":"#ffffff", //卡片字体颜色 ,需要则配置,不需要则不配置
    5.   "backgroundColor":"#5387ff", // 卡片背景色,需要则配置,不需要则不配置
    6.   "itemData":{          //若是多个,则使用[{},{}],的形式
    7.     "id":"electric",
    8.     "name":"吨气耗燃料",
    9.     "unit":"T",
    10.     "value":"0",
    11.     "flag": {"0": "卸载", "1":"加载"}, //卡片显示状态文字类时使用,状态码对应表
    12.   },
    13.   "xys":{       //图表位置信息
    14.     "pos":[0,5],  //图表开始位置,[0,0]开始
    15.     "len":[1,1]   //所占大小([行,列]),[1,1]开始
    16.   },
    17. },

    横向卡片示例代码

    1. {
    2.   "type": "cardX",
    3.   "attribute": "sta_cardX01",
    4.   "itemData": [
    5.     {
    6.       "id": "Z",
    7.       "name": "锅炉运行状态",
    8.       "unit": "",
    9.       "value": "0",
    10.       "flag": { "0": "停机", "1": "开机" }
    11.     }
    12.   ],
    13.   "xys": {
    14.     "pos": [ 0, 0 ],
    15.     "len": [ 2, 4 ]
    16.   }
    17. }

    横向卡片示例图 Image - 横向卡片示例图

    3.3.9. 雷达图

    1. {
    2.    "type":"radar",    //图表的类型
    3.    "attribute": "radar_deviceRadarMap", //标识符,用以获取图表更新数值,自定义,唯一
    4.    "name": "预算 vs 开销",  //label显示的图表名称
    5.    "legendData":["预算分配", "实际开销"],//图例显示的名称,对应下面的series中的每一项
    6.    "indicator": [   //雷达图的指示器,用来指定雷达图中的多个变量
    7.        { "name": "销售", "max": 6500},//name:显示的指示器名称,max:显示的指示器最大值
    8.        { "name": "管理", "max": 16000},
    9.        { "name": "信息技术", "max": 30000},
    10.        { "name": "客服", "max": 38000},
    11.        { "name": "研发", "max": 52000},
    12.        { "name": "市场", "max": 25000}
    13.      ],
    14.    "seriesData": [  //雷达图的数据值,用来指定雷达图中显示值
    15.         {"value" : [2300, 10000, 28000, 15000, 50000, 19000],"name" : "预算分配"}
    16.     ],
    17.     "xys":{
    18.       "pos":[ 0, 0],
    19.       "len":[ 5, 5]
    20.     }
    21. }

    雷达图示例代码

    1. {
    2.   "type":"radar", 
    3.   "attribute": "radar_deviceRadarMap",
    4.   "name": "设备状态映像指数",
    5.   "legendData":["设备状态映像指数"],
    6.   "indicator": [
    7.     { "name": "1#发电12线压", "max": 2000},
    8.     { "name": "1#转速", "max": 100},
    9.     { "name": "1#发电频率", "max": 100},
    10.     { "name": "1#市线压1-2", "max": 100},
    11.     { "name": "1#市电频率", "max": 100},
    12.     { "name": "1#电池电压", "max": 1000},
    13.     { "name": "1#D+(充电电压)", "max": 1000},
    14.     { "name": "1#油压", "max": 100},
    15.     { "name": "1#水温", "max": 100},
    16.     { "name": "1#燃油阀", "max": 1000}
    17.   ],
    18.   "seriesData": [
    19.     {"value" : [1500, 49.97, 49.94, 80.14, 90.06, 0, 391.41, 26.1, 27, 379.95],"name" : "设备状态映像指数"}
    20.   ],
    21.   "xys":{
    22.     "pos":[ 0, 0],
    23.     "len":[ 5, 5]
    24.   }
    25. }

    雷达图示例图 Image - 雷达图示例图

    3.3.10. 表格

    1. {
    2.   "type":"grid",      //图表的类型
    3.   "attribute": "grid_AirSupplyPres0", //标识符,用以获取图表更新数值,自定义,唯一
    4.   "name": "告警信息", //label显示的图表名称
    5.   "init":false;      //true 是否需要通过请求初始化数据
    6.   "url":"service",  // alarm  请求接口,目的是为了区分相同图表应该请求那里的数据进行填充。
    7.   "method":"http",  //数据更新的方式
    8.   "params":{"param1":"val1","param2":"val2"},
    9.   "gridTitle": ["名称","时间","操作"],//图例显示的名称,对应下面的series中的每一项
    10.   "gridData": [   //信息列表数据项
    11.     ["机器警告信息1","2018-05-24","xxxx"],
    12.     [{"link":"www.baidu.com","content":"机器告警信息1"},{"link":"www.baidu.com","content":"2018-05-24"},{"link":"www.baidu.com","content":"详情"}],
    13.   ],
    14.   "xys":{       //图表位置信息
    15.     "pos":[2,0],  //图表开始位置,[0,0]开始
    16.     "len":[2,4]   //所占大小([行,列]),[1,1]开始
    17.   },
    18. }

    表格示例代码

    1. {
    2.   "type": "grid",
    3.   "attribute": "grid_warning",
    4.   "name": "故障报警",
    5.   "params": { "name": "", "created": "" },
    6.   "gridTitle": ["名称", "时间"],
    7.   "gridData": [
    8.     ["探针水位极低报警","2019-06-28 12:00:00"],
    9.     ["超压控制器报警","2019-06-28 13:00:00"],
    10.     ["低水位报警","2019-06-28 14:00:00"],
    11.     ["高水位报警","2019-06-28 15:00:00"]
    12.   ],
    13.   "xys": {
    14.     "pos": [0, 0],
    15.     "len": [4, 5]
    16.   }
    17. }

    表格示例图 Image - 表格示例图

    3.3.11. 列表

    1. {
    2.   "type":"textData",                  //图表的类型
    3.   "attribute": "grid_AirSupplyPres1", //标识符,用以获取图表更新数值,自定义,唯一
    4.   "name": "某站点用户访问来源",         //label显示的图表名称
    5.   "itemData":[        //表格显示的数据项,包括 标识符(id),值(value),名称(name) "unit":"单位"  flag: 状态码对应表
    6.     {"id":"zhijiefangwen","value":335, "name":"直接访问","unit":"单位","flag": {"0": "卸载", "1":"加载"}},
    7.     {"id":"youjianyingxiao","value":310, "name":"邮件营销","unit":"单位"},
    8.     {"id":"lianmengguanggao","value":234, "name":"联盟广告","unit":"单位"},
    9.     {"id":"shipinguanggao","value":135, "name":"视频广告","unit":"单位"},
    10.     {"id":"sousuoyinqing","value":1548, "name":"搜索引擎","unit":"单位"}
    11.   ],
    12.   "xys":{        //图表位置信息
    13.     "pos":[0,5],   //图表开始位置,[0,0]开始
    14.     "len":[1,3]    //所占大小([行,列]),[1,1]开始
    15.   },
    16. }

    列表示例代码

    1. {
    2.   "type": "textData",
    3.   "attribute": "OperationParams0",
    4.   "name": "辅机参数",
    5.   "itemData": [
    6.     {
    7.       "id": "E14",
    8.       "value": "0",
    9.       "name": "1#泵输出",
    10.       "unit": "",
    11.       "flag": {  "0": "停止", "1": "运行" }
    12.     },
    13.     {
    14.       "id": "E09",
    15.       "value": "0",
    16.       "name": "1#泵运行反馈",
    17.       "unit": "",
    18.       "flag": { "0": "停止",  "1": "运行" }
    19.     },
    20.     {
    21.       "id": "S43",
    22.       "value": "0",
    23.       "name": "1#泵累计工作时间",
    24.       "unit": "H"
    25.     },
    26.     {
    27.       "id": "E15",
    28.       "value": "0",
    29.       "name": "2#泵输出",
    30.       "unit": "",
    31.       "flag": { "0": "停止", "1": "运行" }
    32.     },
    33.     {
    34.       "id": "E10",
    35.       "value": "0",
    36.       "name": "2#泵运行反馈",
    37.       "unit": "",
    38.       "flag": { "0": "停止", "1": "运行" }
    39.     },
    40.     {
    41.       "id": "S44",
    42.       "value": "0",
    43.       "name": "2#泵累计工作时间",
    44.       "unit": "H"
    45.     },
    46.     {
    47.       "id": "E20",
    48.       "value": "0",
    49.       "name": "冷凝泵输出",
    50.       "unit": "",
    51.       "flag": {  "0": "停止", "1": "运行" }
    52.     },
    53.     {
    54.       "id": "S23",
    55.       "value": "0",
    56.       "name": "变频器输出频率",
    57.       "unit": "Hz"
    58.     },
    59.     {
    60.       "id": "S76",
    61.       "value": "0",
    62.       "name": "给水(泵后)压力",
    63.       "unit": "MPa"
    64.     }
    65.   ],
    66.   "xys":{
    67.     "pos":[0,0],
    68.     "len":[3,10]
    69.   }
    70. }

    列表示例图 Image - 列表示例图

    3.3.12. 组参数列表

    1. {
    2.     "type": "crewCard",//图表的类型
    3.     "attribute": "crew_card",//标识符,用以获取图表更新数值,自定义,唯一
    4.     "name": "机组1",    //标题名称
    5.     "statusData": {
    6.         "id": "Z",
    7.         "name": "机组1状态",
    8.         "flagCode": "0",  //状态码
    9.         "flagColor": { "0": "#bacbe1", "1": "green" },  //状态码颜色对应表
    10.         "flag": { "0": "停止", "1": "运行" }  //状态码对应表
    11.     },
    12.     "itemData": [
    13.         { "id": "S10", "value": 0, "name": "主机电流B", "unit": "A" },
    14.         { "id": "S22", "value": 0, "name": "风机电流B", "unit": "A" },
    15.         { "id": "S20", "value": 0, "name": "前轴承温度", "unit": "℃" },
    16.         { "id": "S34", "value": 0, "name": "油分压差", "unit": "Mpa" },
    17.         { "id": "S11", "value": 0, "name": "主机电流C", "unit": "A" },
    18.         { "id": "S23", "value": 0, "name": "风机电流C", "unit": "A" },
    19.         { "id": "S24", "value": 0, "name": "电源电压", "unit": "V" }
    20.     ],
    21.     "xys": {            //图表位置信息
    22.         "pos": [1, 0],  //图表开始位置,[0,0]开始
    23.         "len": [2, 2]   //所占大小([行,列]),[1,1]开始
    24.     }
    25. }

    组参数列表示例代码

    1. {
    2.   "type": "crewCard",
    3.   "attribute": "crew_card",
    4.   "name": "机组1",
    5.   "statusData": {
    6.       "id": "Z",
    7.       "name": "机组1状态",
    8.       "flagCode": "0",
    9.       "flagColor": { "0": "#bacbe1", "1": "green" },
    10.       "flag": { "0": "停止", "1": "运行" }
    11.   },
    12.   "itemData": [
    13.       { "id": "S10", "value": 0, "name": "主机电流B", "unit": "A" },
    14.       { "id": "S22", "value": 0, "name": "风机电流B", "unit": "A" },
    15.       { "id": "S20", "value": 0, "name": "前轴承温度", "unit": "℃" },
    16.       { "id": "S34", "value": 0, "name": "油分压差", "unit": "Mpa" },
    17.       { "id": "S11", "value": 0, "name": "主机电流C", "unit": "A" },
    18.       { "id": "S23", "value": 0, "name": "风机电流C", "unit": "A" },
    19.       { "id": "S24", "value": 0, "name": "电源电压", "unit": "V" }
    20.   ],
    21.   "xys": {
    22.       "pos": [0, 0],
    23.       "len": [5, 4]
    24.   }
    25. }

    组参数列表示例图 Image - 组参数列表示例图

    3.3.13. 视频监控

    1. {
    2.     "type": "video",//图表的类型
    3.     "attribute": "video_ys7",//标识符,用以获取图表更新数值,自定义,唯一
    4.     "name": "机组1监控",//标题名称
    5.     "platform":"ys7",//平台 {"ys7":"萤石云"}
    6.     "videoSrc":{ //监控视频地址
    7.       "rtmp" : "rtmp://rtmp.open.ys7.com/openlive/1f06045ec1ea4f0fb2f5a32bea1aecec",
    8.       "http" : "http://hls.open.ys7.com/openlive/6887896824264f2482641888fa7813a6.m3u8"
    9.     },
    10.     "xys": {//图表位置信息
    11.         "pos": [1, 0],//图表开始位置,[0,0]开始
    12.         "len": [2, 2] //所占大小([行,列]),[1,1]开始
    13.     }
    14. }

    视频监控示例代码

    1. {
    2.   "type": "video",
    3.   "attribute": "video_ys7",
    4.   "name": "机组1监控",
    5.   "platform":"ys7",
    6.   "videoSrc":{
    7.     "rtmp" : "rtmp://rtmp.open.ys7.com/openlive/1f06045ec1ea4f0fb2f5a32bea1aecec",
    8.     "http" : "http://hls.open.ys7.com/openlive/6887896824264f2482641888fa7813a6.m3u8"
    9.   },
    10.   "xys": {
    11.       "pos": [0, 0],
    12.       "len": [4, 6]
    13.   }
    14. }

    视频监控示例图