Archived
优化数据看板图表排列
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user