gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-17 19:24:44 +08:00
Code

fix: 监控界面时间控件居中显示 (#533)

Browse Source
This commit is contained in:
ssongliu 2023-04-07 16:42:09 +08:00 committed by GitHub
parent b6c4c4539f
commit 3b3fad7278
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/views/host/monitor/index.vue
View File

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