From bfce9ffc94fa9e378012fe167341dd67d48949ff Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Fri, 3 Feb 2023 14:43:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A6=82=E8=A7=88=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=20chart=20=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/card-with-header/index.vue |  3 +-
 frontend/src/routers/router.ts                |  2 +-
 frontend/src/views/database/mysql/index.vue   |  2 +-
 frontend/src/views/database/redis/index.vue   |  1 -
 frontend/src/views/home/index.vue             | 59 +++++++++++++++----
 frontend/src/views/setting/about/index.vue    |  4 +-
 6 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/card-with-header/index.vue b/frontend/src/components/card-with-header/index.vue
index af07565d6..eb7c87319 100644
--- a/frontend/src/components/card-with-header/index.vue
+++ b/frontend/src/components/card-with-header/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-card>
+        <el-card :style="{ height: height }">
             <el-divider direction="vertical" />
             <span style="font-size: 16px; font-weight: 700">{{ header }}</span>
             <div style="margin-top: 20px"><slot name="body" /></div>
@@ -12,6 +12,7 @@
 defineOptions({ name: 'CardWithHeader' });
 defineProps({
     header: String,
+    height: String,
 });
 </script>
 
diff --git a/frontend/src/routers/router.ts b/frontend/src/routers/router.ts
index 2a5de3ac6..e1952a1b3 100644
--- a/frontend/src/routers/router.ts
+++ b/frontend/src/routers/router.ts
@@ -4,7 +4,7 @@ import { Layout } from '@/routers/constant';
 const modules = import.meta.globEager('./modules/*.ts');
 
 const homeRouter: RouteRecordRaw = {
-    path: '/home',
+    path: '/',
     component: Layout,
     redirect: '/home/index',
     meta: {
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 11820ffb4..ee8bbce98 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent :title="'Mysql ' + $t('menu.database')" :class="{ mask: mysqlStatus != 'Running' }">
+        <LayoutContent :title="'Mysql ' + $t('menu.database')">
             <template #app>
                 <AppStatus
                     :app-key="'mysql'"
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 71b253447..061e14860 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -1,7 +1,6 @@
 <template>
     <div v-loading="loading">
         <AppStatus
-            :class="{ mask: redisStatus != 'Running' }"
             :app-key="'redis'"
             style="margin-top: 20px"
             @before="onBefore"
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 4ccab56bc..a5592f883 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -10,7 +10,7 @@
         />
         <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="16">
-                <CardWithHeader :header="$t('home.overview')">
+                <CardWithHeader :header="$t('home.overview')" height="150px">
                     <template #body>
                         <el-form label-position="top" label-width="100px">
                             <el-row :gutter="20">
@@ -50,12 +50,12 @@
                         </el-form>
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px">
+                <CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="280px">
                     <template #body>
                         <Status ref="statuRef" />
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px">
+                <CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px" height="450px">
                     <template #body>
                         <el-radio-group
                             style="float: right; margin-left: 5px"
@@ -119,7 +119,7 @@
                 </CardWithHeader>
             </el-col>
             <el-col :span="8">
-                <CardWithHeader :header="$t('home.systemInfo')">
+                <CardWithHeader :header="$t('home.systemInfo')" height="370px">
                     <template #body>
                         <el-form style="margin-left: 10px">
                             <el-form-item style="margin-top: 15px" :label="$t('home.hostname')">
@@ -140,7 +140,7 @@
                     </template>
                 </CardWithHeader>
 
-                <CardWithHeader :header="$t('home.app')" style="margin-top: 20px">
+                <CardWithHeader :header="$t('home.app')" style="margin-top: 20px" height="532px">
                     <template #body>
                         <App ref="appRef" />
                     </template>
@@ -401,9 +401,17 @@ const loadData = async () => {
         let ioReadYDatas = {
             name: i18n.global.t('monitor.read'),
             type: 'line',
-            smooth: true,
             areaStyle: {
-                color: '#ebdee3',
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(27, 143, 60, 1)',
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(27, 143, 60, 0)',
+                    },
+                ]),
             },
             data: ioReadBytes.value,
             showSymbol: false,
@@ -411,9 +419,17 @@ const loadData = async () => {
         let ioWriteYDatas = {
             name: i18n.global.t('monitor.write'),
             type: 'line',
-            smooth: true,
             areaStyle: {
-                color: '#ebdee3',
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(0, 94, 235, 1)',
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(0, 94, 235, 0)',
+                    },
+                ]),
             },
             data: ioWriteBytes.value,
             showSymbol: false,
@@ -430,9 +446,17 @@ const loadData = async () => {
         let netTxYDatas = {
             name: i18n.global.t('monitor.up'),
             type: 'line',
-            smooth: true,
             areaStyle: {
-                color: '#ebdee3',
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(0, 94, 235, .5)',
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(0, 94, 235, 0)',
+                    },
+                ]),
             },
             data: netBytesRecvs.value,
             showSymbol: false,
@@ -440,9 +464,17 @@ const loadData = async () => {
         let netRxYDatas = {
             name: i18n.global.t('monitor.down'),
             type: 'line',
-            smooth: true,
             areaStyle: {
-                color: '#ebdee3',
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgba(27, 143, 60, .5)',
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(27, 143, 60, 0)',
+                    },
+                ]),
             },
             data: netBytesSents.value,
             showSymbol: false,
@@ -491,6 +523,7 @@ function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: an
         xAxis: { data: xDatas, boundaryGap: false },
         yAxis: { name: '( ' + formatStr + ' )' },
         series: yDatas,
+        dataZoom: [{ startValue: xDatas[0] }],
     };
     itemChart?.setOption(option, true);
 }
diff --git a/frontend/src/views/setting/about/index.vue b/frontend/src/views/setting/about/index.vue
index 4ccfd4345..e1a14be90 100644
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@@ -59,7 +59,7 @@
 
 <script lang="ts" setup>
 import LayoutContent from '@/layout/layout-content.vue';
-import { getSettingInfo, loadUpgradeInfoByOSS, upgrade } from '@/api/modules/setting';
+import { getSettingInfo, loadUpgradeInfo, upgrade } from '@/api/modules/setting';
 import { onMounted, ref } from 'vue';
 import MdEditor from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
@@ -96,7 +96,7 @@ const handleClose = () => {
 };
 
 const onLoadUpgradeInfo = async () => {
-    const res = await loadUpgradeInfoByOSS();
+    const res = await loadUpgradeInfo();
     if (!res.data) {
         ElMessage.success(i18n.global.t('setting.noUpgrade'));
         return;