mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-15 10:14:44 +08:00
fix: 监控界面时间控件居中显示 (#533)
This commit is contained in:
parent
b6c4c4539f
commit
3b3fad7278
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user