前言
承接前文Flask AppBuilder 用于物聯(lián)網(wǎng)應用服務器原型設計所述饭望，除了基礎的最小化設計之外，要做的事情很多：
- 太多國外組件坦胶，需要兼容國內的圖形庫和第三方認證惊窖；
- Dashboard即儀表盤設計，即JS/CSS客制化哀蘑；
- 使用率的圖示诚卸，需要替換Google Chart，重新定義ChartView绘迁；
- API的集成合溺，重新定義REST API的架構；
- 權限的表達缀台、申請和授權棠赛，需要更新ER圖；
- 與設備云API的整合膛腐；
- hash替代id使用睛约；
- 從sqlite3到MySQL/Maria/Redis的整合。
UI是應用層迭代的重要部分
F.A.B內建的圖表繪制API來自Google哲身，但是國內用戶用不了辩涝。商用的Highchart更好，但是需要許可證勘天。阿里云的可視化組件依然需要交費怔揩，所以我準備選用百度開源的EChart捉邢。
如果要采用EChart替換Google Chart API，則需要改動到F.A.B的底層ChartView商膊，在不熟悉F.A.B的情況下伏伐，比較浪費時間。所以我采用替換CSS/JS文件的方式來實現(xiàn)翘狱。
更新私有靜態(tài)資源文件
更新后的工程數(shù)結構如下：
C:.
+---app
| +---static
| | \---css
| +---templates
| | \---appbuilder
| \---translations
| \---pt
| \---LC_MESSAGES
\---babel
在 templates 路徑下增加一個epicbase.html秘案。
> dir app\templates\ /b
404.html
appbuilder
dashboard.html
epicbase.html
gauge_device.html
index.html
messages.html
testpage.html
epicbase.html內容如下：
{% extends 'appbuilder/baselayout.html' %}
{% block head_css %}
{{ super() }}
<link href="{{url_for('static',filename='css/epic.css')}}" rel="stylesheet">
{% endblock %}
{% block head_js %}
{{ super() }}
<!--<script src="{{url_for('static',filename='js/your_js_file.js')}}"></script>-->
{% endblock %}
{% block tail_js %}
{{ super() }}
<!--<script src="{{url_for('static',filename='js/your_js_file.js')}}"></script>-->
{% endblock %}
部分代碼被注釋，是因為不想產生沒有必要的404錯誤潦匈。該文件中已經(jīng)增加了自己的css文件阱高，百度EChart的JS/CSS可以嵌入到這些位置中。其中EChart如果太大茬缩，則可以放置在頁面底部的位置加載赤惊。
接下來不夠就是按照EChart Demo一個個地把數(shù)據(jù)API對接到JS庫就可以顯示出來了。
想來想去凰锡，關于門鎖不過就是每天的開關次數(shù)之類的柱狀圖未舟。而對于設備供應商來說，顯示的是庫存和激活數(shù)量的餅圖掂为，以及與銷售有關的著色地圖裕膀。仔細推敲一下，或許還可以分析一下單臺設備的電壓和電壓報警勇哗，以及錯誤報警的統(tǒng)計分析昼扛，用于產品維護等。
與可視化編輯器整合
前文IoT數(shù)據(jù)可視化工具中提到了Freeboard欲诺。這是一個很棒的設計抄谐，可惜Freeboard支持的可視化類型太少，如果整合EChart扰法，則可以實現(xiàn)一個比較完美的設計：自由蛹含、開源、可視化編程塞颁、多種類型圖表浦箱。
