zishuo/1Panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 概览界面监控 chart 样式修改

Browse Source
This commit is contained in:
ssongliu
2023-02-03 14:43:33 +08:00
parent 37dd3d859f
commit bfce9ffc94
6 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/card-with-header/index.vue
View File

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

2
frontend/src/routers/router.ts
View File

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

2
frontend/src/views/database/mysql/index.vue
View File

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

1
frontend/src/views/database/redis/index.vue
View File

@@ -1,7 +1,6 @@
<template>
<div v-loading="loading">
<AppStatus
:class="{ mask: redisStatus != 'Running' }"
:app-key="'redis'"
style="margin-top: 20px"
@before="onBefore"

59
frontend/src/views/home/index.vue
View File

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

4
frontend/src/views/setting/about/index.vue
View File

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