Easily visualized device monitoring effect of large screen

preface

In the early stage, the team has been building the connection with the cloud server, and recently it has finally been implemented. The data acquisition center has realized the integration of the server and the visual editor. In the whole case, there are about 200 lines of scripts, which are basically completed through the configuration of the visual platform, reflecting the high efficiency of our platform. Today, through this case, we will explain how the server interface is built and how the server and visual editor are used together.

Kanban renderings

The interactive effects realized by the visual end are divided into three parts: 1, alarm rolling display, 2, table page turning display, 3, equipment failure triangle animation

Report device data to Aliyun

As shown in the figure above, device parameters will be reported to Ali Cloud platform in the form of queues

The server interface is set up

In the preliminary preparation, the server uploads the device to Ali cloud. After completion, we open the product data to be connected to Ali cloud platform in the figure above and subscribe to the sudden message as follows

After saving according to the above Settings, how to pull down the data from Ali Cloud after the message subscription is completed and the data is reported? Please see the following figure

Good ali cloud above docking passing information, data access to our platform, in the function body according to the actual needs of the business accordingly after processing, can output to the visualization platform, all the above data interface have been set up complete note: figure in the name that we want to bind the field name, the value for binding location to receive data

Data set preparation

Create a new data set, connect the corresponding field, confirm and open it again, click Data Test, you can see the data from the interface

Visual side implementation process

Changed the past HTML + CSS way, UI designers directly in the page design, drag components can be quickly completed a simple data display implementation process design icon style, define the parameters that need to change dynamically

Introduce ICONS at the top where you want them

Or click the button next to the parameter and proceed as follows

Drag the component implementation process

How are all these components defined? Let’s take Echarts as an example to talk about the implementation process

In the render element, define the options required by Echarts and replace the items in options with parameters as follows

var fontResize=data.a('fontResize');
if(fontResize){
    option.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom(); / / font option. Title. TextStyle. FontSize = data. (a.'titleFontsize')\*gv.getZoom(); / / title font size option. The xAxis \ [0 \] axisLabel. TextStyle. FontSize = data. A ('allFontSize')\*gv.getZoom(); / / XY font size option. YAxis \ [0 \] axisLabel. TextStyle. FontSize = data. A ('allFontSize')\*gv.getZoom(); Cache.htmlchart.clear (); / / clear the cache to reload the cache. HtmlChart. SetOption (option). }Copy the code

Introduce custom components to set chart parameters

Bind previously defined datasets and fields

Since the data of the data interface is a single output, we need to take over the data in the event before insertion, put it into our own container, define the data format required by the chart and then return it. The code is as follows:

function(data){
    for(var item in data){
        if(item == '40005'){
            pm_xAxis.push(util.formatDate(new Date(data[item].time), 'mm:ss'));
            pm_series0.push(data[item].value);    
        }else if(item == '40010'){ pm_series1.push(data[item].value); }}if(pm_xAxis.length>8){
        pm_xAxis.shift();
        pm_series0.shift();
        pm_series1.shift();
    }
    return[{"name": "PM2.5"."type": "line"."symbol": "none"."data": pm_series0,
            "smooth": false
        },
        {
            "name": "PM10"."type": "line"."symbol": "none"."data": pm_series1,
            "smooth": false}}]Copy the code

Kanban in other modules are similar, according to the above steps can be achieved quickly after proficiency, no longer repeated description, interested students can start to try oh!

Author: Feng Shenglong

The original link

This article is the original content of the cloud habitat community, shall not be reproduced without permission.