mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-18 23:10:25 +08:00
优化界面
This commit is contained in:
@@ -138,7 +138,7 @@ Vue.component("datetime-input", {
|
|||||||
<input type="hidden" :name="vName" :value="timestamp"/>
|
<input type="hidden" :name="vName" :value="timestamp"/>
|
||||||
<div class="ui fields inline" style="padding: 0; margin:0">
|
<div class="ui fields inline" style="padding: 0; margin:0">
|
||||||
<div class="ui field" :class="{error: hasDayError}">
|
<div class="ui field" :class="{error: hasDayError}">
|
||||||
<input type="text" v-model="day" placeholder="YYYY-mm-dd" style="width:8em" maxlength="10" @input="change"/>
|
<input type="text" v-model="day" placeholder="YYYY-MM-DD" style="width:8em" maxlength="10" @input="change"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui field" :class="{error: hasHourError}"><input type="text" v-model="hour" maxlength="2" style="width:4em" placeholder="时" @input="change"/></div>
|
<div class="ui field" :class="{error: hasHourError}"><input type="text" v-model="hour" maxlength="2" style="width:4em" placeholder="时" @input="change"/></div>
|
||||||
<div class="ui field">:</div>
|
<div class="ui field">:</div>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
width: 8em;
|
width: 8em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 7.5em;
|
top: 7.5em;
|
||||||
bottom: 0.5em;
|
bottom: 2.4em;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
border-right: 1px #ddd solid;
|
border-right: 1px #ddd solid;
|
||||||
@@ -77,6 +77,9 @@
|
|||||||
.right-box.without-tabbar {
|
.right-box.without-tabbar {
|
||||||
top: 3em;
|
top: 3em;
|
||||||
}
|
}
|
||||||
|
.main.without-footer .left-box {
|
||||||
|
bottom: 0.2em;
|
||||||
|
}
|
||||||
/** 通用 **/
|
/** 通用 **/
|
||||||
.clear {
|
.clear {
|
||||||
clear: both;
|
clear: both;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -75,7 +75,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧主操作栏 -->
|
<!-- 右侧主操作栏 -->
|
||||||
<div class="main" :class="{'without-menu':teaSubMenus.menus == null || teaSubMenus.menus.length == 0 || (teaSubMenus.menus.length == 1 && teaSubMenus.menus[0].alwaysActive), 'without-secondary-menu':teaSubMenus.alwaysMenu == null || teaSubMenus.alwaysMenu.items.length <= 1}" v-cloak="">
|
<div class="main" :class="{'without-menu':teaSubMenus.menus == null || teaSubMenus.menus.length == 0 || (teaSubMenus.menus.length == 1 && teaSubMenus.menus[0].alwaysActive), 'without-secondary-menu':teaSubMenus.alwaysMenu == null || teaSubMenus.alwaysMenu.items.length <= 1, 'without-footer':!teaShowOpenSourceInfo}" v-cloak="">
|
||||||
<!-- 操作菜单 -->
|
<!-- 操作菜单 -->
|
||||||
<div class="ui top menu tabular tab-menu small" v-if="teaTabbar.length > 0">
|
<div class="ui top menu tabular tab-menu small" v-if="teaTabbar.length > 0">
|
||||||
<a class="item" v-for="item in teaTabbar" :class="{'active':item.active,right:item.right}" :href="item.url">
|
<a class="item" v-for="item in teaTabbar" :class="{'active':item.active,right:item.right}" :href="item.url">
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
width: 8em;
|
width: 8em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 7.5em;
|
top: 7.5em;
|
||||||
bottom: 0.5em;
|
bottom: 2.4em;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
border-right: 1px #ddd solid;
|
border-right: 1px #ddd solid;
|
||||||
@@ -102,3 +102,9 @@
|
|||||||
.right-box.without-tabbar {
|
.right-box.without-tabbar {
|
||||||
top: 3em;
|
top: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// main
|
||||||
|
.main.without-footer .left-box {
|
||||||
|
bottom: 0.2em;
|
||||||
|
}
|
||||||
@@ -4,12 +4,24 @@ Tea.context(function () {
|
|||||||
|
|
||||||
this.$delay(function () {
|
this.$delay(function () {
|
||||||
this.reloadHourlyTrafficChart()
|
this.reloadHourlyTrafficChart()
|
||||||
|
|
||||||
|
let that = this
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
if (that.trafficTab == "hourly") {
|
||||||
|
that.resizeHourlyTrafficChart()
|
||||||
|
}
|
||||||
|
if (that.trafficTab == "daily") {
|
||||||
|
that.resizeDailyTrafficChart()
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.selectTrafficTab = function (tab) {
|
this.selectTrafficTab = function (tab) {
|
||||||
this.trafficTab = tab
|
this.trafficTab = tab
|
||||||
if (tab == "hourly") {
|
if (tab == "hourly") {
|
||||||
|
this.$delay(function () {
|
||||||
|
this.reloadHourlyTrafficChart()
|
||||||
|
})
|
||||||
} else if (tab == "daily") {
|
} else if (tab == "daily") {
|
||||||
this.$delay(function () {
|
this.$delay(function () {
|
||||||
this.reloadDailyTrafficChart()
|
this.reloadDailyTrafficChart()
|
||||||
@@ -17,6 +29,12 @@ Tea.context(function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.resizeHourlyTrafficChart = function () {
|
||||||
|
let chartBox = document.getElementById("hourly-traffic-chart-box")
|
||||||
|
let chart = echarts.init(chartBox)
|
||||||
|
chart.resize()
|
||||||
|
}
|
||||||
|
|
||||||
this.reloadHourlyTrafficChart = function () {
|
this.reloadHourlyTrafficChart = function () {
|
||||||
let chartBox = document.getElementById("hourly-traffic-chart-box")
|
let chartBox = document.getElementById("hourly-traffic-chart-box")
|
||||||
let chart = echarts.init(chartBox)
|
let chart = echarts.init(chartBox)
|
||||||
@@ -58,6 +76,13 @@ Tea.context(function () {
|
|||||||
animation: false
|
animation: false
|
||||||
}
|
}
|
||||||
chart.setOption(option)
|
chart.setOption(option)
|
||||||
|
chart.resize()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.resizeDailyTrafficChart = function () {
|
||||||
|
let chartBox = document.getElementById("daily-traffic-chart-box")
|
||||||
|
let chart = echarts.init(chartBox)
|
||||||
|
chart.resize()
|
||||||
}
|
}
|
||||||
|
|
||||||
this.reloadDailyTrafficChart = function () {
|
this.reloadDailyTrafficChart = function () {
|
||||||
@@ -101,5 +126,6 @@ Tea.context(function () {
|
|||||||
animation: false
|
animation: false
|
||||||
}
|
}
|
||||||
chart.setOption(option)
|
chart.setOption(option)
|
||||||
|
chart.resize()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user