輕鬆可視化實現設備監控大屏效果

前言

前期團隊一直在搭建與雲端服務器對接的事情，近期終於落地，數據採集中心實現了服務端與可視化編輯器的融合，整個案例中腳本就兩百行左右，基本經過可視化平臺配置完成，體現咱們平臺的高效性。今天經過本案例講解下服務端接口搭建、服務端與可視化編輯器是如何配合使用的。

看板效果圖

可視化端實現的交互效果分別有三點：一、報警滾動展現，二、表格翻頁顯示，三、設備故障三角形動畫

設備數據上報阿里雲

如上圖設置好，設備參數就會以隊列的形式上報阿里雲平臺

服務端接口搭建

前期準備，服務端上傳設備到阿里雲端，完成後，咱們打開上圖阿里雲平臺具體要對接的產品數據，按下列驟訂閱消息

按以上設置保存後消息訂閱完成
數據上報後，如何把數據從阿里雲拉取下來呢，請看下圖

經過上圖對接好阿里雲上的信息後，數據就接入到咱們的平臺，在函數體內根據本身實際業務需求作相應處理後，就能夠輸出到可視化平臺了，以上數據接口已所有搭建完成
注：圖中的name即咱們要綁定的字段名，value爲綁定位置接收到的數據

數據集準備

新建數據集，對接好相應字段，肯定後從新打開，點擊數據測試，就能夠看到接口過來的數據

可視化端實現過程

改變了以往html+css的方式，ui設計師直接在頁面中設計、拖拉組件方式就能夠很快完成
1、簡單數據展現實現過程
設計圖標樣式，定義須要動態改變的參數

在頂部須要的位置引入圖標

或者點擊參數後的按鈕，按以下步驟處理

2、拖拉組件實現過程

以上這麼多組件都是怎麼定義的呢？咱們這邊以echarts爲例，講下實現過程

在渲染元素中，定義好echarts須要的option，按下列代碼用參數替換option中的項

var fontResize=data.a('fontResize');
if(fontResize){
    option.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//字體
    option.title.textStyle.fontSize=data.a('titleFontsize')\*gv.getZoom();//標題字體大小
    option.xAxis\[0\].axisLabel.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//XY軸字體大小
    option.yAxis\[0\].axisLabel.textStyle.fontSize=data.a('allFontSize')\*gv.getZoom();//XY軸字體大小
    cache.htmlChart.clear();//清空緩存從新加載
    cache.htmlChart.setOption(option);
}複製代碼

引入自定義組件，設置圖表參數

綁定前面定義好的數據集、字段

因數據接口的數據是單條輸出，因此咱們要在插入前事件中接管數據，放入本身的容器中，定義好圖表須要的數據格式後再返回，代碼實現以下：

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
        }
    ]
}複製代碼

看板中的其餘模塊大同小異，按上述步驟熟練後均可以快速實現，就再也不重複描述，有興趣同窗能夠動手試一試哦！

本文做者：馮聖龍

原文連接

本文爲雲棲社區原創內容，未經容許不得轉載。