优化数据看板图表排列

This commit is contained in:
GoEdgeLab
2023-10-30 11:30:51 +08:00
parent ccb2735eb8
commit 9038fa0b61
10 changed files with 130 additions and 53 deletions
+15
View File
@@ -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;
}
}
+12
View File
@@ -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
+20 -16
View File
@@ -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> &nbsp;
@@ -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>