From 3b3fad72788d3b2b0cc527bfe1f33ace69115e4e Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 7 Apr 2023 16:42:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=9B=91=E6=8E=A7=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=8E=A7=E4=BB=B6=E5=B1=85=E4=B8=AD=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=20(#533)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/host/monitor/index.vue | 38 ++++++++++++++---------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/host/monitor/index.vue b/frontend/src/views/host/monitor/index.vue
index 64ce9f9e4..6a3b8d681 100644
--- a/frontend/src/views/host/monitor/index.vue
+++ b/frontend/src/views/host/monitor/index.vue
@@ -12,7 +12,7 @@
             <el-col :span="24">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span style="font-size: 16px; font-weight: 500">{{ $t('monitor.avgLoad') }}</span>
+                        <span class="title">{{ $t('monitor.avgLoad') }}</span>
                         <el-date-picker
                             @change="search('load')"
                             v-model="timeRangeLoad"
@@ -21,10 +21,10 @@
                             :start-placeholder="$t('commons.search.timeStart')"
                             :end-placeholder="$t('commons.search.timeEnd')"
                             :shortcuts="shortcuts"
-                            style="float: right; width: 360px"
+                            style="float: right; margin-top: -5px; width: 360px"
                         ></el-date-picker>
                     </template>
-                    <div id="loadLoadChart" style="width: 100%; height: 400px"></div>
+                    <div id="loadLoadChart" class="chart"></div>
                 </el-card>
             </el-col>
         </el-row>
@@ -32,7 +32,7 @@
             <el-col :span="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span style="font-size: 16px; font-weight: 500">CPU</span>
+                        <span class="title">CPU</span>
                         <el-date-picker
                             @change="search('cpu')"
                             v-model="timeRangeCpu"
@@ -41,16 +41,16 @@
                             :start-placeholder="$t('commons.search.timeStart')"
                             :end-placeholder="$t('commons.search.timeEnd')"
                             :shortcuts="shortcuts"
-                            style="float: right; width: 360px"
+                            style="float: right; margin-top: -5px; width: 360px"
                         ></el-date-picker>
                     </template>
-                    <div id="loadCPUChart" style="width: 100%; height: 400px"></div>
+                    <div id="loadCPUChart" class="chart"></div>
                 </el-card>
             </el-col>
             <el-col :span="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span style="font-size: 16px; font-weight: 500">{{ $t('monitor.memory') }}</span>
+                        <span class="title">{{ $t('monitor.memory') }}</span>
                         <el-date-picker
                             @change="search('memory')"
                             v-model="timeRangeMemory"
@@ -59,10 +59,10 @@
                             :start-placeholder="$t('commons.search.timeStart')"
                             :end-placeholder="$t('commons.search.timeEnd')"
                             :shortcuts="shortcuts"
-                            style="float: right; width: 360px"
+                            style="float: right; margin-top: -5px; width: 360px"
                         ></el-date-picker>
                     </template>
-                    <div id="loadMemoryChart" style="width: 100%; height: 400px"></div>
+                    <div id="loadMemoryChart" class="chart"></div>
                 </el-card>
             </el-col>
         </el-row>
@@ -70,7 +70,7 @@
             <el-col :span="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span style="font-size: 16px; font-weight: 500">{{ $t('monitor.disk') }} IO</span>
+                        <span class="title">{{ $t('monitor.disk') }} IO</span>
                         <el-date-picker
                             @change="search('io')"
                             v-model="timeRangeIO"
@@ -79,16 +79,16 @@
                             :start-placeholder="$t('commons.search.timeStart')"
                             :end-placeholder="$t('commons.search.timeEnd')"
                             :shortcuts="shortcuts"
-                            style="float: right; width: 360px"
+                            style="float: right; margin-top: -5px; width: 360px"
                         ></el-date-picker>
                     </template>
-                    <div id="loadIOChart" style="width: 100%; height: 400px"></div>
+                    <div id="loadIOChart" class="chart"></div>
                 </el-card>
             </el-col>
             <el-col :span="12">
                 <el-card style="overflow: inherit">
                     <template #header>
-                        <span style="font-size: 16px; font-weight: 500">{{ $t('monitor.network') }} IO:</span>
+                        <span class="title">{{ $t('monitor.network') }} IO:</span>
                         <el-popover placement="bottom" :width="200" trigger="click">
                             <el-select @change="search('network')" v-model="networkChoose">
                                 <template #prefix>{{ $t('monitor.networkCard') }}</template>
@@ -114,10 +114,10 @@
                             :start-placeholder="$t('commons.search.timeStart')"
                             :end-placeholder="$t('commons.search.timeEnd')"
                             :shortcuts="shortcuts"
-                            style="float: right; width: 360px"
+                            style="float: right; margin-top: -5px; width: 360px"
                         ></el-date-picker>
                     </template>
-                    <div id="loadNetworkChart" style="width: 100%; height: 400px"></div>
+                    <div id="loadNetworkChart" class="chart"></div>
                 </el-card>
             </el-col>
         </el-row>
@@ -664,4 +664,12 @@ onBeforeUnmount(() => {
     cursor: pointer;
     color: var(--el-color-primary);
 }
+.title {
+    font-size: 16px;
+    font-weight: 500;
+}
+.chart {
+    width: 100%;
+    height: 400px;
+}
 </style>