整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eXt-UI是什么？
NeXt UI 工具包是一個基于 HTML5/JavaScript 的網絡 Web 應用程序工具包。它提供了一個以網絡為中心的拓撲 UI 組件，具有高性能和豐富的功能。NeXt 可以顯示大型復雜網絡拓撲、聚合網絡節點、流量/路徑/隧道/組可視化，它包括不同的布局算法、地圖疊加和預設的用戶友好交互。
---轉載自NeXt-UI的GItHub地址簡介https://github.com/NeXt-UI/next-bower
雖然NeXt-UI已經停止更新了，但是思科仍然在官網上花了很大篇幅展示這個模塊，這也正是我們要學習這個模塊的理由.
好了，話不多說，開始正文部分吧。
首先我們需要在cisco網頁上down下NeXt-UI的文件包 https://d1nmyq4gcgsfi5.cloudfront.net/fileMedia/025dc509-8f2a-474a-b6d8-75e73ecbd6ac/NeXt_trial.zip
文件的架構大概就是上面的那個類型，然后我們開始構建拓撲所需要的文件
一、新建一個index.html文件***/NEXTUI/js/next/css/next.css 這一塊地址可以寫相對路徑也可以寫絕對路徑
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="***/NEXTUI/js/next/css/next.css">
<script type="text/javascript" src="***/NEXTUI/js/next/js/next.js"></script>
</head>
<body>
這是一個新的NeXt-UI文件
</body>
</html>
二、更改app.js的配置，這個是調用data.js的文件，一般無需更改
(function(nx){
// instantiate NeXt app
var app=new nx.ui.Application();
// configuration object for next
var topologyConfig={
// special configuration for nodes
"nodeConfig": {
"label": "model.name",
"iconType": "router"
},
// special configuration for links
"linkConfig": {
"linkType": "curve",
},
// if true, the nodes' icons are shown, otherwise a user sees a dot instead
"showIcon": true,
// automatically compute the position of nodes
"dataProcessor": "force",
"width": 1920,
"height": 1080,
};
// instantiate Topology class
var topology=new nx.graphic.Topology(topologyConfig);
// load topology data from app/data.js
topology.data(topologyData);
// bind the topology object to the app
topology.attach(app);
// app must run inside a specific container. In our case this is the one with id="topology-container"
app.container(document.getElementById("topology-container"));
})(nx);
三、更改data.js的路徑，這邊就是寫的設備的一些信息，主要分為三個部分nodes、links、nodeSet
ndoes:代表某一個設備，里面的內容都是設備的相關信息。
links：代表哪幾個設備相關聯，分為source和target
nodeSet；代表哪幾個設備為一個分組。一個分組可以在頁面展示為一個設備，需要時可以展開
配置如下
var topologyData={
nodes: [
{
"id": 0,
"name": "New York",
"mgmt_ip": "1.1.1.1",
"icon": "switch"
},
{
"id": 1,
"name": "Los Angeles",
"mgmt_ip": "1.1.1.2",
"icon": "router"
},
{
"id": 2,
"name": "Houston",
"mgmt_ip": "1.1.1.3"
},
{
"id": 3,
"name": "Beijing",
"mgmt_ip": "1.1.1.4"
}
],
links: [
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 3
},
{
"source": 3,
"target": 2
}
],
nodeSet: [
{
"id": 4,
"nodes": [1,2]
}
],
};
現在我們只需要打開index.html文件即可看到網絡拓撲圖了
后面我們可以講一下如何使用nornir+NeXt-UI來自動繪制拓撲
撲社3月30日報道 （文：竇悅怡）
據統計，2013年全球將有10億手機瀏覽器支持HTML5，同時HTML Web開發者數量將達到200萬。毫無疑問，HTML5將成為未來5-10年內，移動互聯網領域的主宰者。
同時，據IDC的調查報告統計，截至2012年5月，有79%的移動開發商已經決定要在其應有程序中整合HTML5技術。
拓撲社了解到，2014年Html5技術以跨平臺應用，融合視頻等技術優勢，逐漸顯現其未來web開發的趨勢。
而且，HTML5自身的多設備跨平臺特點也有利于品牌的傳播，用戶可以通過Html5頁面應用生成器，以移動展示作為切入點，幫助用戶像操作PPT一樣展示自己的創意，用戶通過PC端制作，在線使用模板，便可利用圖文、音樂、動畫和視頻等多種形式制作個性化微場景，然后進行分享。
因此，一些基于H5移動營銷的創業型公司應運而生，易企秀便是其中之一。易企秀是一個社會化營銷服務平臺。2018年1月，易企秀完成B+輪6400萬元融資，由東方富海領投，易企秀老股東寬帶資本、中網創投、金慧豐繼續跟投，B輪總計1.24億元。
近期，拓撲社采訪到了易企秀的創始人黃金，與他聊聊H5社會化營銷這件事，以及易企秀的閉環生態布局背后的思考。
“外界對易企秀的定義有的是H5制作公司，有的是營銷公司，您怎么看這種爭議？”采訪的開始，拓撲社給黃金拋出這樣的問題。
黃金很坦誠地告訴拓撲社，H5與營銷是兩個概念，兩種分類，不過兩者很難界定開來。H5最初只是代表一種語言，現在已經發展成一種展現形式；而營銷是一個很寬泛的概念，無論是CRM營銷，還是制作物料，以廣告形式展現推廣內容，這些都是營銷，在這種情況下兩者就存在交集了。
“這樣一來，很難界定易企秀到底是H5制作公司還是營銷公司，但是我們最初的想法就是，先確定誰是易企秀的用戶，他們最痛的點是什么，我們就為他們解決問題?，F在易企秀的用戶定義的很清楚，就是中小企業。”
拓撲社了解到，在過去，企業專注于產品生產，在對外傳播渠道上是缺少能力的，而現在就不同了，微信類社交產品的發展，為企業營銷提供了自我營銷成長的土壤。
在這樣的環境下，如果企業自己不提高對外營銷能力，將市場營銷的命脈托付于第三方服務公司，弱肉強食的商業環境下，這將會是這家公司的災難。
但是，對于中小企業而言，要想做一個在線宣傳資料，需要很多專業的美工、設計師一起配合，同時整個制作包含域名、備案、上傳，復雜等環節，操作繁雜，成本高，效率低。
針對這些問題，易企秀以H5技術為切入點，為中小企業提供包含場景制作、展示互動、數據收集、客戶管理、二次營銷的閉環營銷服務。
其實，最初易企秀從H5制作起家，逐漸向企業內容創意平臺，拓展到后端廣告渠道，推送廣告等業務，再通過后臺的SaaS系統收集用戶數據，沉淀數據庫，分析用戶的行為，進行二次營銷，達成一個閉環的營銷服務模式。
黃金表示，一切業務布局的邏輯都是圍繞用戶的需求進行拓展。一切圍繞用戶痛點來展開，先滿足痛點，產品功能可用。再改進使用體驗，讓用戶使用起來簡單。最后滿足用戶的視覺享受，讓這個產品看起來很高大上。
“用戶需要什么，我們恰好能夠提供這些服務，進而可以拓展相關業務；如果我們提供的服務，不是用戶所需要的，這就得不償失了，就會與用戶產生隔斷，始終跨越不過去。”
在產品布局上，易企秀采用的是一種雙邊模式，具體來說就是，基于易企秀SaaS模式編輯器系統，一邊接入易企秀商城，商城里會對接各種素材模板，這些模板會有大量的素材供應商、模板設計師提供。
另一邊接入的是企業端用戶，用戶既可以選擇適合自己宣傳模式的模板，也可以根據自己的需求，選擇合適的模板素材，在易企秀的編輯平臺進行編輯。
據悉，在商城的素材供應商選擇方面，易企秀都是選擇各個領域的領先平臺。例如，易企秀與方正、漢儀、騰祥、天音在線、松巴音樂、視覺中國、高品圖像、蚊子動漫等十幾家涵蓋字體、圖片、音樂等全品類設計素材廠商。
黃金告訴拓撲社，易企秀會專門設有素材審核人員，對素材供應商提供的素材依據標準進行審查，也會對為用戶提供服務的過程進行監控。
而素材選擇的標準主要有三點，第一，簡單易用。用戶拿到模板后容易上手使用。第二，創新性。供應商提供的素材必須有創新性，不能與庫的素材有雷同。第三，要保證素材的版權。
在具體的服務流程上，黃金戲稱是“建推管再”，打造閉環營銷模式。首先，易企秀通過H5幫助用戶在線制作宣傳素材，以微信朋友圈的形式病毒式推廣，加強企業與消費者的互動性。其次，用戶通過易企秀提供的付費流量（包涵朋友圈廣告、本地朋友圈廣告、公眾號廣告等社交類平臺流量），增加H5曝光量。
再次，易企秀把H5傳播后獲取的數據收集到自己的管理系統，進行數據沉淀，再用數據化的技術手段對其進行監控、分析，以表單的形式反饋給用戶，指導他們進行二次投放，進而形成一個閉環模式。
這樣，易企秀不僅為用戶提供大量的案例、模板，設計器支持自由的拖拽，用戶可輕松上手，實現自己的營銷創意。
用戶還可自定義場景中的動態效果，注重交互體驗。場景應用推廣方面，他們提供了社會化分享渠道及效果追蹤，讓中小企業去自己發現哪些渠道效果好、哪些場景效果好，從而改善營銷設計方案。
黃金坦言，目前易企秀只是完成了一個小閉環，初步建立一個小生態園，未來會在產品里加入更多的技術手段，使其編輯系統更加智能化、模版眾包化、服務輕量化。未來會開放編輯器能力，提供API接口，讓更多行業伙伴使用易企秀的編輯能力為用戶服務。
在盈利模式上，易企秀主要有三方面盈利來源，對于B端采取免費+增值服務的模式，高級會員，易企秀會提供培訓、審核，CDN加速等增值服務。
對于供應商端，易企秀在產業鏈上游對接大量的正版素材源，包括字體、圖片、音樂等，企業可以按需購買。
在產業鏈下游對接名片天下等印刷廠制作宣傳材料，為其進行流量推廣，易企秀收取服務費。此外在線上也可以幫助企業擴大推廣范圍，提供精準的數據分析，精準營銷等服務。
據悉，易企秀目前已有3000多萬的企業用戶，累計設計師（秀客）10萬名，供應商幾十家，平臺營收能力已經進入快速增長期。
日常項目建設和實施過程中，經常會遇到類似數據可視化的實現場景。對于數據可視化已經從簡單的統計圖表展現，擴展到類似監控大屏，拓撲圖，流程編排圖，集成架構圖等方面的呈現。而這些往往不是簡單的使用圖表就能夠解決的。
因此今天總結下對于數據可視化和圖形繪制方面的工具整理。
推薦首先閱讀知乎的關于有哪些可視化工具推薦的回答，內容已經相當全面了
https://www.zhihu.com/question/19929609
要注意的是當前主流的仍然是基于javasrcirpt開發的圖表庫，對于偏重的flex不應該作為選擇的基礎。下面對一些選擇的思路做些簡單的說明。
首先可選的主流圖表庫包括了百度的Echart，Highchart，D3.js這三個。
這三個可視化圖表庫的使用客戶也相當多，能夠應對的常見可視化場景也足夠。對于百度的Echart又推出有新的V4.0版本，雖然支撐的圖表擴展沒有大的變化，但是在性能上有明顯改進。當然從支持的圖表類型種類和開放性來談，最強大的還是D3.js，但是前面兩種已經能夠基本滿足實際的圖表層面使用的需要。
對于百度Echart，對里面的關系圖做了詳細分析后，實際上沒有找到用來做網絡拓撲圖的工具，系統集成關系圖的組件。當然百度Echart里面有的關系圖，?；鶊D，地圖，熱力圖遷徙圖，矩陣圖，日歷圖，樹圖等功能已經足夠強大。
采用百度Echart也很容易自己來實現類似監控大屏這種前端應用。
對于網絡關系圖，在可視化里面常見的一種類型，其中主流的應該是Gephi，Gephi是一款開源免費跨平臺基于JVM的復雜網絡分析軟件, 其主要用于各種網絡和復雜系統，動態和分層圖的交互可視化與探測開源工具。其次是R語言中的iGraph和networkD3包，功能也足夠強大。還有就是基于python語言實現的networkx，是專門進行網絡可視化呈現的一個小工具。
Gephi地址和例子參考：https://gephi.org/
對于商用的圖表和可視化工具當然是Tableau，據Gartner魔力象限，2014年的測評，tableau可執行速度最快，整體市場表現也在前列。在Tableau官方網站可以免費下載到桌面試用版進行試用。
如果僅僅是提供常用的畫圖API接口，自己完全根據需要繪制SVG渲染圖，對于這種場景你仍然可以選擇Echart和Highcharts來實現，在官方網站也有制作SVG渲染圖的例子。
當然還有一類即經常用于網管類，日志類監控分析的前端圖表展示軟件，在ELK日志分析系統 Logstash+ElasticSearch+Kibana4里面會使用Kibana4進行前端圖表展現。
Grafana是另外一個基于JavaScript的前端展示工具，Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world。對于Grafana支持Graphite, Elasticsearch, Prometheus, InfluxDB, OpenTSDB and KairosDB各種數據采集源。
對于Grafana當前和類似InfluxDB時序數據庫結合的很緊密，可以很容易是基于時序數據的可視化圖表展示，包括當前在Kurbernetes里面用的很多的Prometheus監控方案，仍然是基于時序數據庫和Grafana來實現資源性能監控。
Grafana的官方地址：https://grafana.com/
最后說下Processing，功能相當強大，但是要有一定的開發基礎和學習門檻，Processing 在 2001 年誕生于麻省理工學院（MIT）的媒體實驗室，主創者為 Ben Fry 和 Casey Reas，當然還有來自 Carnegie Mellon、洛杉磯的加利福尼亞大學以及邁阿密大學等的貢獻。
具體例子可以參考：https://processing.org/examples/
數據可視化和圖表僅僅是前端呈現的工具，對于數據可視化最重要的還是首先要搞清楚你當前有哪些數據，數據本身的結構和數據間關系是如何的？其次搞清楚數據呈現的場景和模式，其次才是呈現問題。
對于ESB服務總線，特別是涉及到兩級架構集成的時候，采用類似拓撲圖的可視化思路來進行集成架構和部署架構圖的可視化是一個可選的方案?；谕負鋱D可視化為關鍵字搜索，搜索到兩個可視化工具軟件，雖然都是付費軟件，但是對于拓撲圖，部署架構，集成關系圖等方面的展示能力還是相當強。
TWaver工具：http://www.servasoft.com/
TWaver關注于數據的圖形展示，它是面向開發人員的，需要進行二次開發。
TWaver的圖形組件庫中提供了拓撲組件、地圖組件、設備圖組件，以及表格、樹圖、屬性表、圖表等豐富的通用圖形界面組件，為電信運營支撐系統（OSS）的開發提供“一站式”的組件產品和解決方案，是快速設計、開發和部署OSS的利器。
可以看到TWaver本身的功能相對強大，完全可以勝任復雜的資源拓撲圖的設計，但是如果僅僅用于拓撲圖展示的話有點大材小用。
對于TWaver，實際上可以看到對于數據中心資源和資產的全三維可視化建模是另外一個做的相當好的地方。這個軟件可以實現數據中心內所有設備對象的虛擬仿真，以完全3D模式構建整個數據中心環境，并將數據中心內的監控子系統，如視頻、動環、門禁等，納入到可視化機房管理平臺中來，實時分析查看監控信息。 軟件采用B/S架構，無需安裝任何插件即可在瀏覽器中流暢漫游數據中心三維場景,實現數據中心級、機房級、機柜級、設備級和端口級管理和監控。
類似下圖：
Qunee工具：http://qunee.com/
Qunee是一套基于HTML5的網絡圖組件。其使用HTML5 Canvas技術，繪制清新、流暢的網絡圖，可用于社交網絡圖、拓撲圖、流程圖、地圖等需求， JS組件封裝，藏繁瑣于簡潔，輕松構建優雅的互聯網應用與企業應用，讓數據的在線可視化變得容易。
在網站上有詳細的例子可以參考，可以看到Qunee相對來說輕量些，用于實現一些簡單的網絡拓撲，集成架構圖展示完全可以滿足去。
類似上圖，可以很方便的通過Qunee提供的可視化設計工具實現。
基于這些可視化拓撲設計工具，結合ESB服務總線集成實際的集成場景來說，初步考慮可以應用的點包括如下。
1. 實現兩級架構的拓撲圖效果展示和接口服務集成監控。
布局原來一直太強調結合地圖進行展示，實際上效果并不一定太好。這里可以直接自己定義布局模式，初步想法就是中心為集團，四邊方框來線上各個省或子公司。形成完整的兩級集團展示效果。這種展示方式也方便直接線上到大屏上去。
2. 對于當前ESB平臺本身的資源和服務狀態監控可視化
這套可視化工具很容易實現這點，我們只需要先可視化的設計出部署架構布局，然后再將實際對數據庫，應用中間件資源，包括服務運行的各種狀態信息，異常信息直接顯示到整體部署邏輯架構圖上即可。這樣可以更加可視化的監控到資源當前的運行狀態和異常發生情況。
3. 服務集成架構展示
在最早我們做自研ESB產品的時候，采用Flash實現了一個集成架構的展示效果，但是整體效果并不是很好。而通過這套可視化工具，可以用來實現這種集成架構的效果展示。同時可以展示出兩級架構的集成效果。即可以分層展開效果。
集成架構不需要提前進行設計，而是需要在后臺提取了集成關系后，自動進行拓撲生成和自動化布局。集成架構中的連線可以用來表示當前系統間的接口服務連通性和接口服務調用流量等信息。但是上圖實際上離我們需要的集成架構圖可視化設計仍然有具體，具體見后面集成架構圖設計部分的一些思考。
4. 端到端流程監控可視化設計
基于服務間的集成關系和調用先后順序來實現端到端的流程監控，這個我在博客前面多次提到，也一直在尋找比較好的前端設計工具來做。比如對我們已有的流程平臺流程建模工具前端進行適度改進來支持等。
對于這類需求也可以用前面提到的工具來實現，先進行端到端監控流程圖的設計，然后在進行運行展示。其中最主要的還是在運行態的各類信息，比如運行狀態，數量，是否有異常等是否很容易疊加到已有的設計圖上。只要能夠解決這個問題，那么就能夠很好的應用到端到端流程監控的可視化設計中。
對于集成架構圖的繪制一直是我關注的一個點，也看了類似百度Echart，D3和HighChart等，基本都沒有發現適合用來做類似集成架構圖繪制的工具。同時集成架構圖往往都不是自動繪制，而需要提前進行集成架構的圖形布局設計，布局好后才能夠用JS去繪制。
因此更多我們需要的是一個JS繪圖工具庫，能夠匯總線條，矩陣，圓等基礎圖形形狀即可。我們可以看下一個簡單的集成架構圖，經過設計排版后布局可能如下：
對于這類圖可以看到實際上各類可視化圖表庫并不太容易實現。原來我們采用過Flash來進行集成架構圖的繪制，但是Flash相對偏重不太合適。因此還是需要找一個JS繪圖庫來實現這種簡單的集成架構圖的繪制工作。
基于這個思路我們在網上找了下比較好的一些JS繪制工具庫。
jsPlumb開源流程圖繪制工具庫
那么如果你應該使用它取決于你想用jsPlumb做什么。該框架適用于必須繪制圖表的Web應用程序，例如類似于Visio的應用程序或工作流程設計器等。由于圖表項目和連接的所有參數都是非常精細可控的，因此您可以繪制您可以想到的任何類型的圖表。
該開源庫的GitHub地址為：https://github.com/wangduanduan/jsplumb-chinese-tutorial
在該地址也有詳細的中文使用教程，根據教程的一些截圖可以看到，該工具庫很適合用來繪制我們上面的集成架構圖，因為這種圖本身也就是形狀和線條的一些簡單組合，而且來拖拽功能都不需要。
當然基于該工具庫，我們也可以用來實現更加復雜的集成架構圖，即將兩個業務系統間的所有關鍵集成接口全部以連線的方式表示出來。這種集成架構圖也是無法自動生成，需要首先進行整體部版設計，然后再通過jsPlumb工具庫進行繪制即可。
如果要連接多條線條，需要整個節點作為source或者target， 并且將錨點設置成Continuous，那么錨點就會隨著節點的位置改變而改變自己的位置。這個功能特性可以很方便我進行多線條設置。
注意在這個網址，https://jsplumbtoolkit.com/community/doc/anchors.html， 這個工具庫是存在License費用的，因此如果這個工具庫用于商業用途，按道理會涉及到License的購買問題。
一篇關于該工具庫的使用參考：https://www.cnblogs.com/xcj26/p/9870734.html
另外一個用該工具庫實現的流程設計器和表單設計器： http://formdesign.leipi.org/
付費JS繪制工具庫：GoJS
GoJS是一套基于JavaScript的付費圖形繪制工具庫，地址：https://gojs.net/latest/index.html
這套工具庫有免費版本，也有收費版本，收費版本比jsPlumb工具庫來說就強大了很多，特別是動態Port圖和動態分組圖，這兩個用來繪制我們集成架構圖，應用架構圖等都相當有用。
所有Demo演示地址參考：https://gojs.net/latest/samples/regrouping.html
JointJS工具庫
這個也是常用的繪圖工具庫，地址在：https://www.jointjs.com/
這個庫官方介紹的例子都感覺比較重，而實際其它搜索到的一些使用介紹來看，用于簡單從集成架構圖，流程圖類繪制還是沒有太大問題的?；具€是標準的新建畫板，畫布，然后進行各種圖形的定義和繪制。
jointJS是一個基于svg的圖形化工具庫，在畫布上畫出支持拖動的svg圖形，而且可以導出JSON，也能通過JSON配置導入直接生成圖形。由于這個工具庫是基于SVG的，因此也不太推薦使用。
一篇使用參考：https://segmentfault.com/a/1190000015972176
Quick V 是一套數據可視化大屏展示方案。在大數據時代，Quick V 將數據全面、直觀地呈現在用戶眼前，幫助管理者在面臨業務復雜度的急劇變化時，即刻擁有海量有序的決策支持信息，滿足會議展覽、業務監控、風險預警、地理信息分析等多種業務的展示需求。
參考：http://www.uileader.com/quickui_display.html
大家可以先看下上面這個大屏可視化效果，感覺整體還是做的相當不錯。這個工具本身商用收費，比較好的就是對于我們常見的大屏監控已經固化為各種模板，基本都可以直接使用。
基于百度Echart自己實現可配置的監控大屏
在前面我也談到，實際上對于監控大屏實現，當前我們完全可以采用百度Echart來定制實現，而這篇文章主要想談下如何對監控大屏可視化做到靈活可配置。
首先我們看到監控大屏可視化，實際上跟我們前面談到的自定義報表相當類似，其核心仍然是單面板設計，多面板組合。基于這個思路我們逐一展開進行描述。
在講自定義報表的時候，我們單面板設計數據集和實際的數據呈現是耦合在一起的，而實際上更好的思路是數據集和數據呈現進行分離?；谶@個思路，逐一展開講關鍵功能點實現。
數據集設計
數據源定義，對于數據源定義，最好也進行獨立，一個報表前端呈現本身也可能涉及到多個數據源。數據集設計，即返回一個二維的數據集合，可以有多列。我們需要通過配置的方式來實現，即首先選擇數據源，然后自定義Sql語句，然后返回具體的數據集對象。在sql過程中我們可以對字段標題名稱等進行轉義。
更加解耦的方法是數據集可以直接選擇具體的WS服務，由服務返回一個二維的數據集對象。這種方式可以進一步實現報表平臺和底層數據庫的解耦。
單面板設計
單面板設計簡單來說就是將前端的呈現方式，究竟是折線圖，餅圖還是雷達圖等，和后端的數據集進行綁定。在這個過程中重點是要確認具體的圖表呈現的一些關鍵配置，包括X，Y軸顯示，圖表名稱，圖例是否顯示等關鍵配置，都需要在單面板設計的是配置完成。
單面板設計完成后，最好提供預覽功能按鈕，可以馬上體驗到單面板展示的效果。
大屏設計
對于大屏設計，實際上里面有幾個關鍵點，首先就是大屏展示需要有一個CSS模板，這個模板決定了所有的單面板圖表的配色風格，包括具體的底色，前端的色系選擇等。選擇模板就是確保最終的大屏展示各個單面板風格能夠完全保持一致。
大屏版面設計，仍然采用標準的Grid布局模式即可，可以看到所有的大屏展示基本都采用Grid布局模式。每個單面板你唯一要確定的就是橫向跨幾行，縱向跨幾列即可。類似上面的圖，我們采用4*4Grid進行布局，中間的地圖展示則是橫向跨3行，縱向跨兩列。
大屏整體的展示動態刷新能力
在以上設計完成后，我們整個大屏展示效果也就出來了。在該大屏設計中我們沒有考慮動態查詢功能。但是大屏監控仍然需要動態進行刷新。因此在設計大屏的時候需要具備動態刷新能力，為了考慮后續具備一定的擴展性，我們需要能夠將關鍵的一些變量參數傳遞到圖表展示中。
最關鍵的參數就是當前時間，當前的時間需要能夠傳遞到每一個數據集Sql中，方便我們根據時間進行數據過濾。同時對于大屏我們需要配置定時刷新頻率，基于該頻率對展示內容進行動態刷新。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
