优化界面

This commit is contained in:
GoEdgeLab
2021-01-24 14:41:43 +08:00
parent a1a3264d45
commit a9ea18ef3f
6 changed files with 41 additions and 6 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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">

View File

@@ -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;
}

View File

@@ -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()
} }
}) })