优化数据看板图表排列

web/public/js/components/common/chart-columns-grid.js

@@ -0,0 +1,80 @@
+Vue.component("chart-columns-grid", {
+	props: [],
+	mounted: function () {
+		this.columns = this.calculateColumns()
+
+		let that = this
+		window.addEventListener("resize", function () {
+			that.columns = that.calculateColumns()
+		})
+	},
+	updated: function () {
+		let totalElements = this.$el.getElementsByClassName("column").length
+		if (totalElements == this.totalElements) {
+			return
+		}
+		this.totalElements = totalElements
+		this.calculateColumns()
+	},
+	data: function () {
+		return {
+			columns: "four",
+			totalElements: 0
+		}
+	},
+	methods: {
+		calculateColumns: function () {
+			let w = window.innerWidth
+			let columns = Math.floor(w / 500)
+			if (columns == 0) {
+				columns = 1
+			}
+
+			let columnElements = this.$el.getElementsByClassName("column")
+			if (columnElements.length == 0) {
+				return "one"
+			}
+			let maxColumns = columnElements.length
+			if (columns > maxColumns) {
+				columns = maxColumns
+			}
+
+			// 添加右侧边框
+			for (let index = 0; index < columnElements.length; index++) {
+				let el = columnElements[index]
+				el.className = el.className.replace("with-border", "")
+				if (index % columns == columns - 1 || index == columnElements.length - 1 /** 最后一个 **/) {
+					el.className += " with-border"
+				}
+			}
+
+			switch (columns) {
+				case 1:
+					return "one"
+				case 2:
+					return "two"
+				case 3:
+					return "three"
+				case 4:
+					return "four"
+				case 5:
+					return "five"
+				case 6:
+					return "six"
+				case 7:
+					return "seven"
+				case 8:
+					return "eight"
+				case 9:
+					return "nine"
+				case 10:
+					return "ten"
+				default:
+					return "ten"
+			}
+		}
+	},
+	template: `<div :class="'ui ' + columns + ' columns grid chart-grid'">
+	<slot></slot>
+</div>`
+})

web/public/js/components/server/metric-charts.js

@@ -1,6 +1,6 @@
 // 指标图表
 Vue.component("metric-chart", {
-	props: ["v-chart", "v-stats", "v-item"],
+	props: ["v-chart", "v-stats", "v-item", "v-column" /** in column? **/],
 	mounted: function () {
 		this.load()
 	},
@@ -414,7 +414,7 @@ Vue.component("metric-chart", {
 			return time
 		}
 	},
-	template: `<div style="float: left" :style="{'width': width}">
+	template: `<div style="float: left" :style="{'width': this.vColumn ?  '' : width}" :class="{'ui column':this.vColumn}">
 	<h4>{{chart.name}} <span>（{{valueTypeName}}）</span></h4>
 	<div class="ui divider"></div>
 	<div style="height: 14em; padding-bottom: 1em; " :id="chartId" :class="{'scroll-box': chart.type == 'table'}"></div>

web/views/@default/@grids.less

@@ -47,4 +47,19 @@
 			display: inline;
 		}
 	}
+}
+
+.grid.chart-grid {
+	margin-top: 1em!important;
+	margin-left: 0.4em !important;
+
+	.column {
+		margin-bottom: 1em;
+		border: 1px rgba(0, 0, 0, .1) solid;
+		border-right: 0;
+	}
+
+	.column.with-border {
+		border-right: 1px rgba(0, 0, 0, .1) solid;
+	}
 }

web/views/@default/@layout.css

@@ -151,6 +151,18 @@ body.expanded .right-box {
 .grid.counter-chart .column:hover a {
   display: inline;
 }
+.grid.chart-grid {
+  margin-top: 1em!important;
+  margin-left: 0.4em !important;
+}
+.grid.chart-grid .column {
+  margin-bottom: 1em;
+  border: 1px rgba(0, 0, 0, 0.1) solid;
+  border-right: 0;
+}
+.grid.chart-grid .column.with-border {
+  border-right: 1px rgba(0, 0, 0, 0.1) solid;
+}
 /** 通用 **/
 * {
   scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

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

@@ -96,28 +96,32 @@
 
 <div class="ui divider" v-show="!isLoading"></div>
 
-<div class="ui menu tabular" v-show="!isLoading">
-    <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
-    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
-</div>
+<chart-columns-grid>
+    <div class="ui column">
+        <div class="ui menu tabular" v-show="!isLoading">
+            <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
+            <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
+        </div>
 
-<!-- 按小时统计 -->
-<div class="chart-box" id="hourly-traffic-chart-box" v-show="trafficTab == 'hourly'"></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>
+        <!-- 按日统计 -->
+        <div class="chart-box" id="daily-traffic-chart-box" v-show="trafficTab == 'daily'"></div>
+    </div>
 
-<!-- 域名排行 -->
-<h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
-<div class="chart-box" id="top-domains-chart"></div>
+    <div class="ui column">
+        <!-- 域名排行 -->
+        <h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
+        <div class="chart-box" id="top-domains-chart"></div>
+    </div>
 
-<!-- 指标 -->
-<div class="ui divider" v-if="metricCharts.length > 0"></div>
-<metric-board>
+    <!-- 指标 -->
     <metric-chart v-for="chart in metricCharts"
                   :key="chart.id"
                   :v-chart="chart.chart"
                   :v-stats="chart.stats"
-                  :v-item="chart.item">
+                  :v-item="chart.item"
+                  :v-column="true">
     </metric-chart>
-</metric-board>
+</chart-columns-grid>

web/views/@default/servers/metrics/charts/chart.html

@@ -22,13 +22,6 @@
             {{chart.typeName}}
         </td>
     </tr>
-    <tr>
-        <td>宽度</td>
-        <td>
-            <span v-if="chart.widthDiv == 0">100%</span>
-            <span v-else>1/{{chart.widthDiv}}</span>
-        </td>
-    </tr>
     <tr>
         <td>对象数限制</td>
         <td>

web/views/@default/servers/metrics/charts/createPopup.html

@@ -21,17 +21,6 @@
                 <p class="comment" v-if="typeDefinition != null"><i class="icon" :class="typeDefinition.icon"></i> {{typeDefinition.description}}</p>
             </td>
         </tr>
-        <tr>
-            <td>宽度</td>
-            <td>
-                <select class="ui dropdown auto-width" name="widthDiv">
-                    <option value="0">100%</option>
-                    <option value="2">1/2</option>
-                    <option value="3">1/3</option>
-                    <option value="4">1/4</option>
-                </select>
-            </td>
-        </tr>
         <tr>
             <td colspan="2"><more-options-indicator></more-options-indicator></td>
         </tr>

web/views/@default/servers/metrics/charts/index.html

@@ -12,7 +12,6 @@
         <tr>
             <th>图表名称</th>
             <th>类型</th>
-            <th>宽度</th>
             <th class="two wide">状态</th>
             <th class="two op">操作</th>
         </tr>
@@ -20,10 +19,6 @@
     <tr v-for="chart in charts">
         <td>{{chart.name}}</td>
         <td>{{chart.typeName}}</td>
-        <td>
-            <span v-if="chart.widthDiv > 0">1/{{chart.widthDiv}}</span>
-            <span v-else>1</span>
-        </td>
         <td><label-on :v-is-on="chart.isOn"></label-on></td>
         <td>
             <a :href="Tea.url('.chart', {chartId: chart.id})">详情</a> &nbsp;

web/views/@default/servers/metrics/charts/update.html

@@ -22,17 +22,6 @@
                 <p class="comment" v-if="typeDefinition != null"><i class="icon" :class="typeDefinition.icon"></i> {{typeDefinition.description}}</p>
             </td>
         </tr>
-        <tr>
-            <td>宽度</td>
-            <td>
-                <select class="ui dropdown auto-width" name="widthDiv" v-model="chart.widthDiv">
-                    <option value="0">100%</option>
-                    <option value="2">1/2</option>
-                    <option value="3">1/3</option>
-                    <option value="4">1/4</option>
-                </select>
-            </td>
-        </tr>
         <tr>
             <td>是否启用</td>
             <td><checkbox name="isOn" value="1" v-model="chart.isOn"></checkbox></td>