实现Dashboard

web/views/@default/dashboard/index.css

@@ -0,0 +1,22 @@
+.grid {
+  margin-top: 2em !important;
+  margin-left: 2em !important;
+}
+.grid .column {
+  margin-bottom: 2em;
+  border-right: 1px #eee solid;
+}
+.grid .column div.value {
+  margin-top: 1.5em;
+}
+.grid .column div.value span {
+  font-size: 2em;
+  margin-right: 0.2em;
+}
+.grid .column.no-border {
+  border-right: 0;
+}
+.chart-box {
+  height: 20em;
+}
+/*# sourceMappingURL=index.css.map */

web/views/@default/dashboard/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAKF;EACC,YAAA","file":"index.css"}

web/views/@default/dashboard/index.html

@@ -1,2 +1,52 @@
 {$layout}
 
+
+{$var "header"}
+<!-- echart -->
+<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
+{$end}
+
+<div class="ui three columns grid">
+    <div class="ui column">
+        <h4>当前集群数</h4>
+        <div class="value"><span>{{dashboard.countNodeClusters}}</span>个</div>
+    </div>
+
+    <div class="ui column">
+        <h4>当前边缘节点数</h4>
+        <div class="value"><span>{{dashboard.countNodes}}</span>个</div>
+    </div>
+
+    <div class="ui column no-border">
+        <h4>当前API节点数</h4>
+        <div class="value"><span>{{dashboard.countAPINodes}}</span>个</div>
+    </div>
+
+    <div class="ui column">
+        <h4>当前用户数</h4>
+        <div class="value"><span>{{dashboard.countUsers}}</span>个</div>
+    </div>
+
+    <div class="ui column">
+        <h4>当前服务数</h4>
+        <div class="value"><span>{{dashboard.countServers}}</span>个</div>
+    </div>
+
+    <div class="ui column no-border">
+        <h4>今日总流量</h4>
+        <div class="value"><span>{{todayTraffic}}</span>{{todayTrafficUnit}}</div>
+    </div>
+</div>
+
+<div class="ui divider"></div>
+
+<div class="ui menu tabular">
+    <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势（GB）</a>
+    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势（GB）</a>
+</div>
+
+<!-- 按小时统计 -->
+<div class="chart-box" id="hourly-traffic-chart-box" v-show="trafficTab == 'hourly'"></div>
+
+<!-- 按日统计 -->
+<div class="chart-box" id="daily-traffic-chart-box" v-show="trafficTab == 'daily'"></div>

web/views/@default/dashboard/index.js

@@ -0,0 +1,105 @@
+Tea.context(function () {
+    this.trafficTab = "hourly"
+
+
+    this.$delay(function () {
+        this.reloadHourlyTrafficChart()
+    })
+
+    this.selectTrafficTab = function (tab) {
+        this.trafficTab = tab
+        if (tab == "hourly") {
+
+        } else if (tab == "daily") {
+            this.$delay(function () {
+                this.reloadDailyTrafficChart()
+            })
+        }
+    }
+
+    this.reloadHourlyTrafficChart = function () {
+        let chartBox = document.getElementById("hourly-traffic-chart-box")
+        let chart = echarts.init(chartBox)
+        let option = {
+            xAxis: {
+                data: this.hourlyTrafficStats.map(function (v) {
+                    return v.hour;
+                })
+            },
+            yAxis: {},
+            tooltip: {
+                show: true,
+                trigger: "item",
+                formatter: "{c} GB"
+            },
+            grid: {
+                left: 40,
+                top: 10,
+                right: 20
+            },
+            series: [
+                {
+                    name: "流量",
+                    type: "line",
+                    data: this.hourlyTrafficStats.map(function (v) {
+                        return v.count;
+                    }),
+                    itemStyle: {
+                        color: "#9DD3E8"
+                    },
+                    lineStyle: {
+                        color: "#9DD3E8"
+                    },
+                    areaStyle: {
+                        color: "#9DD3E8"
+                    }
+                }
+            ],
+            animation: false
+        }
+        chart.setOption(option)
+    }
+
+    this.reloadDailyTrafficChart = function () {
+        let chartBox = document.getElementById("daily-traffic-chart-box")
+        let chart = echarts.init(chartBox)
+        let option = {
+            xAxis: {
+                data: this.dailyTrafficStats.map(function (v) {
+                    return v.day;
+                })
+            },
+            yAxis: {},
+            tooltip: {
+                show: true,
+                trigger: "item",
+                formatter: "{c} GB"
+            },
+            grid: {
+                left: 40,
+                top: 10,
+                right: 20
+            },
+            series: [
+                {
+                    name: "流量",
+                    type: "line",
+                    data: this.dailyTrafficStats.map(function (v) {
+                        return v.count;
+                    }),
+                    itemStyle: {
+                        color: "#9DD3E8"
+                    },
+                    lineStyle: {
+                        color: "#9DD3E8"
+                    },
+                    areaStyle: {
+                        color: "#9DD3E8"
+                    }
+                }
+            ],
+            animation: false
+        }
+        chart.setOption(option)
+    }
+})

web/views/@default/dashboard/index.less

@@ -0,0 +1,27 @@
+.grid {
+	margin-top: 2em !important;
+	margin-left: 2em !important;
+
+	.column {
+		margin-bottom: 2em;
+		border-right: 1px #eee solid;
+
+		div.value {
+			margin-top: 1.5em;
+
+			span {
+				font-size: 2em;
+				margin-right: 0.2em;
+			}
+		}
+	}
+
+	.column.no-border {
+		border-right: 0;
+	}
+}
+
+
+.chart-box {
+	height: 20em;
+}