mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-13 17:24:44 +08:00
feat: 优化页面兼容移动端问题 (#1320)
#### What this PR does / why we need it? #### Summary of your change #### Please indicate you've done the following: - [ ] Made sure tests are passing and test coverage is added if needed. - [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/). - [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
This commit is contained in:
wangdan-fit2cloud
GitHub
parent
e9bdca5279
commit
0275716ff5
@ -13,6 +13,11 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flx-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
|
||||
@ -65,4 +65,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.database-status {
|
||||
.title {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
.content {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.el-col-xs-24 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,8 +43,8 @@
|
||||
</el-radio-group>
|
||||
<el-row style="margin-top: 20px" v-if="confShowType === 'base'">
|
||||
<el-col :span="1"><br /></el-col>
|
||||
<el-col :span="10">
|
||||
<el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="150px">
|
||||
<el-col :xs="24" :sm="24" :md="15" :lg="12" :xl="10">
|
||||
<el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="120px">
|
||||
<el-form-item :label="$t('container.mirrors')" prop="mirrors">
|
||||
<div style="width: 100%" v-if="form.mirrors">
|
||||
<el-input
|
||||
|
||||
@ -123,194 +123,198 @@
|
||||
</el-row>
|
||||
</template>
|
||||
<template #main>
|
||||
<el-row :gutter="20" v-show="hasRecords">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<ul class="infinite-list" style="overflow: auto">
|
||||
<li
|
||||
v-for="(item, index) in records"
|
||||
:key="index"
|
||||
@click="forDetail(item)"
|
||||
class="infinite-list-item"
|
||||
>
|
||||
<el-icon v-if="item.status === 'Success'"><Select /></el-icon>
|
||||
<el-icon v-if="item.status === 'Waiting'"><Loading /></el-icon>
|
||||
<el-icon v-if="item.status === 'Failed'"><CloseBold /></el-icon>
|
||||
<span v-if="item.id === currentRecord.id" style="color: red">
|
||||
{{ dateFormat(0, 0, item.startTime) }}
|
||||
</span>
|
||||
<span v-else>{{ dateFormat(0, 0, item.startTime) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="margin-top: 10px; font-size: 12px; float: right">
|
||||
<el-pagination
|
||||
:page-size="searchInfo.pageSize"
|
||||
:current-page="searchInfo.page"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:pager-count="5"
|
||||
:page-sizes="[6, 8, 10, 12, 14]"
|
||||
small
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="searchInfo.recordTotal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form label-position="top" :v-key="refresh">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item class="descriptionWide" v-if="isBackup()">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.target') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ dialogData.rowData!.targetDir }}</span>
|
||||
<el-button
|
||||
v-if="currentRecord?.status === 'Success'"
|
||||
type="primary"
|
||||
style="margin-left: 10px"
|
||||
link
|
||||
icon="Download"
|
||||
@click="onDownload(currentRecord, dialogData.rowData!.targetDirID)"
|
||||
<div style="overflow: auto">
|
||||
<el-row :gutter="20" v-show="hasRecords" style="min-width: 900px">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<ul class="infinite-list" style="overflow: auto">
|
||||
<li
|
||||
v-for="(item, index) in records"
|
||||
:key="index"
|
||||
@click="forDetail(item)"
|
||||
class="infinite-list-item"
|
||||
>
|
||||
{{ $t('file.download') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="dialogData.rowData!.type === 'website'">
|
||||
<el-icon v-if="item.status === 'Success'"><Select /></el-icon>
|
||||
<el-icon v-if="item.status === 'Waiting'"><Loading /></el-icon>
|
||||
<el-icon v-if="item.status === 'Failed'"><CloseBold /></el-icon>
|
||||
<span v-if="item.id === currentRecord.id" style="color: red">
|
||||
{{ dateFormat(0, 0, item.startTime) }}
|
||||
</span>
|
||||
<span v-else>{{ dateFormat(0, 0, item.startTime) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="margin-top: 10px; font-size: 12px; float: right">
|
||||
<el-pagination
|
||||
:page-size="searchInfo.pageSize"
|
||||
:current-page="searchInfo.page"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
:pager-count="5"
|
||||
:page-sizes="[6, 8, 10, 12, 14]"
|
||||
small
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="searchInfo.recordTotal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form label-position="top" :v-key="refresh">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item class="descriptionWide" v-if="isBackup()">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.target') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ dialogData.rowData!.targetDir }}</span>
|
||||
<el-button
|
||||
v-if="currentRecord?.status === 'Success'"
|
||||
type="primary"
|
||||
style="margin-left: 10px"
|
||||
link
|
||||
icon="Download"
|
||||
@click="onDownload(currentRecord, dialogData.rowData!.targetDirID)"
|
||||
>
|
||||
{{ $t('file.download') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="dialogData.rowData!.type === 'website'">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.website') }}</span>
|
||||
</template>
|
||||
<span v-if="dialogData.rowData!.website !== 'all'" class="status-count">
|
||||
{{ dialogData.rowData!.website }}
|
||||
</span>
|
||||
<span v-else class="status-count">
|
||||
{{ $t('commons.table.all') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="dialogData.rowData!.type === 'database'">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.database') }}</span>
|
||||
</template>
|
||||
<span v-if="dialogData.rowData!.dbName !== 'all'" class="status-count">
|
||||
{{ dialogData.rowData!.dbName }}
|
||||
</span>
|
||||
<span v-else class="status-count">
|
||||
{{ $t('commons.table.all') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="dialogData.rowData!.type === 'directory'">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.directory') }}</span>
|
||||
</template>
|
||||
<span v-if="dialogData.rowData!.sourceDir.length <= 12" class="status-count">
|
||||
{{ dialogData.rowData!.sourceDir }}
|
||||
</span>
|
||||
<div v-else>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
trigger="hover"
|
||||
width="250"
|
||||
:content="dialogData.rowData!.sourceDir"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="status-count">
|
||||
{{ dialogData.rowData!.sourceDir.substring(0, 12) }}...
|
||||
</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="isBackup()">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.retainCopies') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ dialogData.rowData!.retainCopies }}</span>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-form-item
|
||||
class="description"
|
||||
v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'directory'"
|
||||
>
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.website') }}</span>
|
||||
<span class="status-label">{{ $t('cronjob.exclusionRules') }}</span>
|
||||
</template>
|
||||
<span v-if="dialogData.rowData!.website !== 'all'" class="status-count">
|
||||
{{ dialogData.rowData!.website }}
|
||||
</span>
|
||||
<span v-else class="status-count">
|
||||
{{ $t('commons.table.all') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="dialogData.rowData!.type === 'database'">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.database') }}</span>
|
||||
</template>
|
||||
<span v-if="dialogData.rowData!.dbName !== 'all'" class="status-count">
|
||||
{{ dialogData.rowData!.dbName }}
|
||||
</span>
|
||||
<span v-else class="status-count">
|
||||
{{ $t('commons.table.all') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="dialogData.rowData!.type === 'directory'">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.directory') }}</span>
|
||||
</template>
|
||||
<span v-if="dialogData.rowData!.sourceDir.length <= 12" class="status-count">
|
||||
{{ dialogData.rowData!.sourceDir }}
|
||||
<span v-if="dialogData.rowData!.exclusionRules.length <= 12" class="status-count">
|
||||
{{ dialogData.rowData!.exclusionRules }}
|
||||
</span>
|
||||
<div v-else>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
trigger="hover"
|
||||
width="250"
|
||||
:content="dialogData.rowData!.sourceDir"
|
||||
:content="dialogData.rowData!.exclusionRules"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="status-count">
|
||||
{{ dialogData.rowData!.sourceDir.substring(0, 12) }}...
|
||||
{{ dialogData.rowData!.exclusionRules.substring(0, 12) }}...
|
||||
</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="description" v-if="isBackup()">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.retainCopies') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ dialogData.rowData!.retainCopies }}</span>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-form-item
|
||||
class="description"
|
||||
v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'directory'"
|
||||
>
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('cronjob.exclusionRules') }}</span>
|
||||
</template>
|
||||
<span v-if="dialogData.rowData!.exclusionRules.length <= 12" class="status-count">
|
||||
{{ dialogData.rowData!.exclusionRules }}
|
||||
</span>
|
||||
<div v-else>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
trigger="hover"
|
||||
width="250"
|
||||
:content="dialogData.rowData!.exclusionRules"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="status-count">
|
||||
{{ dialogData.rowData!.exclusionRules.substring(0, 12) }}...
|
||||
</span>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item class="descriptionWide">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('commons.search.timeStart') }}</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item class="descriptionWide">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('commons.search.timeStart') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ dateFormat(0, 0, currentRecord?.startTime) }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('commons.table.interval') }}</span>
|
||||
</template>
|
||||
<span class="status-count" v-if="currentRecord?.interval! <= 1000">
|
||||
{{ currentRecord?.interval }} ms
|
||||
</span>
|
||||
<span class="status-count" v-if="currentRecord?.interval! > 1000">
|
||||
{{ currentRecord?.interval! / 1000 }} s
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('commons.table.status') }}</span>
|
||||
</template>
|
||||
<el-tooltip v-if="currentRecord?.status === 'Failed'" placement="top">
|
||||
<template #content>
|
||||
<div style="width: 300px; word-break: break-all">
|
||||
{{ currentRecord?.message }}
|
||||
</div>
|
||||
<span class="status-count">
|
||||
{{ dateFormat(0, 0, currentRecord?.startTime) }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('commons.table.interval') }}</span>
|
||||
</template>
|
||||
<el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
|
||||
</el-tooltip>
|
||||
<el-tag type="success" v-if="currentRecord?.status === 'Success'">
|
||||
{{ $t('commons.table.statusSuccess') }}
|
||||
</el-tag>
|
||||
<el-tag type="info" v-if="currentRecord?.status === 'Waiting'">
|
||||
{{ $t('commons.table.statusWaiting') }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row v-if="currentRecord?.records">
|
||||
<span>{{ $t('commons.table.records') }}</span>
|
||||
<codemirror
|
||||
ref="mymirror"
|
||||
:autofocus="true"
|
||||
:placeholder="$t('cronjob.noLogs')"
|
||||
:indent-with-tab="true"
|
||||
:tabSize="4"
|
||||
style="height: calc(100vh - 484px); width: 100%; margin-top: 5px"
|
||||
:lineWrapping="true"
|
||||
:matchBrackets="true"
|
||||
theme="cobalt"
|
||||
:styleActiveLine="true"
|
||||
:extensions="extensions"
|
||||
v-model="currentRecordDetail"
|
||||
:disabled="true"
|
||||
/>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span class="status-count" v-if="currentRecord?.interval! <= 1000">
|
||||
{{ currentRecord?.interval }} ms
|
||||
</span>
|
||||
<span class="status-count" v-if="currentRecord?.interval! > 1000">
|
||||
{{ currentRecord?.interval! / 1000 }} s
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item class="description">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('commons.table.status') }}</span>
|
||||
</template>
|
||||
<el-tooltip v-if="currentRecord?.status === 'Failed'" placement="top">
|
||||
<template #content>
|
||||
<div style="width: 300px; word-break: break-all">
|
||||
{{ currentRecord?.message }}
|
||||
</div>
|
||||
</template>
|
||||
<el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
|
||||
</el-tooltip>
|
||||
<el-tag type="success" v-if="currentRecord?.status === 'Success'">
|
||||
{{ $t('commons.table.statusSuccess') }}
|
||||
</el-tag>
|
||||
<el-tag type="info" v-if="currentRecord?.status === 'Waiting'">
|
||||
{{ $t('commons.table.statusWaiting') }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row v-if="currentRecord?.records">
|
||||
<span>{{ $t('commons.table.records') }}</span>
|
||||
<codemirror
|
||||
ref="mymirror"
|
||||
:autofocus="true"
|
||||
:placeholder="$t('cronjob.noLogs')"
|
||||
:indent-with-tab="true"
|
||||
:tabSize="4"
|
||||
style="height: calc(100vh - 484px); width: 100%; margin-top: 5px"
|
||||
:lineWrapping="true"
|
||||
:matchBrackets="true"
|
||||
theme="cobalt"
|
||||
:styleActiveLine="true"
|
||||
:extensions="extensions"
|
||||
v-model="currentRecordDetail"
|
||||
:disabled="true"
|
||||
/>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="app-warn" v-show="!hasRecords">
|
||||
<div>
|
||||
<span>{{ $t('cronjob.noRecord') }}</span>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-if="persistenceShow">
|
||||
<el-row :gutter="20" style="margin-top: 5px" class="row-box">
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card class="el-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
@ -36,7 +36,7 @@
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card class="el-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
|
||||
@ -1,108 +1,131 @@
|
||||
<template>
|
||||
<div v-if="statusShow">
|
||||
<div v-if="statusShow" class="database-status">
|
||||
<el-form label-position="top">
|
||||
<span class="title">{{ $t('database.baseParam') }}</span>
|
||||
<el-divider class="devider" />
|
||||
<el-row type="flex" style="margin-left: 50px" justify="center">
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">uptime_in_days</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.uptime_in_days }}</span>
|
||||
<span class="input-help">{{ $t('database.uptimeInDays') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">tcp_port</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.tcp_port }}</span>
|
||||
<span class="input-help">{{ $t('database.tcpPort') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">connected_clients</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.connected_clients }}</span>
|
||||
<span class="input-help">{{ $t('database.connectedClients') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%"></el-form-item>
|
||||
<el-row class="content">
|
||||
<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">uptime_in_days</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.uptime_in_days }}</span>
|
||||
<span class="input-help">{{ $t('database.uptimeInDays') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">tcp_port</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.tcp_port }}</span>
|
||||
<span class="input-help">{{ $t('database.tcpPort') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">connected_clients</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.connected_clients }}</span>
|
||||
<span class="input-help">{{ $t('database.connectedClients') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<span class="title">{{ $t('database.performanceParam') }}</span>
|
||||
<el-divider class="devider" />
|
||||
<el-row type="flex" style="margin-left: 50px" justify="center">
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">used_memory_rss</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.used_memory_rss }}</span>
|
||||
<span class="input-help">{{ $t('database.usedMemoryRss') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">used_memory</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.used_memory }}</span>
|
||||
<span class="input-help">{{ $t('database.usedMemory') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">mem_fragmentation_ratio</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.mem_fragmentation_ratio }}</span>
|
||||
<span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">total_connections_received</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.total_connections_received }}</span>
|
||||
<span class="input-help">{{ $t('database.totalConnectionsReceived') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">total_commands_processed</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.total_commands_processed }}</span>
|
||||
<span class="input-help">{{ $t('database.totalCommandsProcessed') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">instantaneous_ops_per_sec</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.instantaneous_ops_per_sec }}</span>
|
||||
<span class="input-help">{{ $t('database.instantaneousOpsPerSec') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">keyspace_hits</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.keyspace_hits }}</span>
|
||||
<span class="input-help">{{ $t('database.keyspaceHits') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">keyspace_misses</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.keyspace_misses }}</span>
|
||||
<span class="input-help">{{ $t('database.keyspaceMisses') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">hit</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.hit }}</span>
|
||||
<span class="input-help">{{ $t('database.hit') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">latest_fork_usec</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.latest_fork_usec }}</span>
|
||||
<span class="input-help">{{ $t('database.latestForkUsec') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%"></el-form-item>
|
||||
<el-form-item style="width: 25%"></el-form-item>
|
||||
<el-row class="content">
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">used_memory_rss</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.used_memory_rss }}</span>
|
||||
<span class="input-help">{{ $t('database.usedMemoryRss') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">used_memory</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.used_memory }}</span>
|
||||
<span class="input-help">{{ $t('database.usedMemory') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">mem_fragmentation_ratio</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.mem_fragmentation_ratio }}</span>
|
||||
<span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">total_connections_received</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.total_connections_received }}</span>
|
||||
<span class="input-help">{{ $t('database.totalConnectionsReceived') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">total_commands_processed</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.total_commands_processed }}</span>
|
||||
<span class="input-help">{{ $t('database.totalCommandsProcessed') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">instantaneous_ops_per_sec</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.instantaneous_ops_per_sec }}</span>
|
||||
<span class="input-help">{{ $t('database.instantaneousOpsPerSec') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">keyspace_hits</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.keyspace_hits }}</span>
|
||||
<span class="input-help">{{ $t('database.keyspaceHits') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">keyspace_misses</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.keyspace_misses }}</span>
|
||||
<span class="input-help">{{ $t('database.keyspaceMisses') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">hit</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.hit }}</span>
|
||||
<span class="input-help">{{ $t('database.hit') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span class="status-label">latest_fork_usec</span>
|
||||
</template>
|
||||
<span class="status-count">{{ redisStatus.latest_fork_usec }}</span>
|
||||
<span class="input-help">{{ $t('database.latestForkUsec') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -169,16 +192,21 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.devider {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
border-top: 1px var(--el-border-color) var(--el-border-style);
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-left: 50px;
|
||||
.database-status {
|
||||
.devider {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
border-top: 1px var(--el-border-color) var(--el-border-style);
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.content {
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,17 +6,20 @@
|
||||
<el-col :span="24">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<span class="title">{{ $t('monitor.avgLoad') }}</span>
|
||||
<el-date-picker
|
||||
@change="search('load')"
|
||||
v-model="timeRangeLoad"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="float: right; margin-top: -5px; width: 360px"
|
||||
></el-date-picker>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<span class="title">{{ $t('monitor.avgLoad') }}</span>
|
||||
<el-date-picker
|
||||
@change="search('load')"
|
||||
v-model="timeRangeLoad"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="max-width: 360px; width: 100%"
|
||||
:size="mobile ? 'small' : 'default'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<div id="loadLoadChart" class="chart"></div>
|
||||
</el-card>
|
||||
@ -26,17 +29,20 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<span class="title">CPU</span>
|
||||
<el-date-picker
|
||||
@change="search('cpu')"
|
||||
v-model="timeRangeCpu"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="float: right; margin-top: -5px; width: 360px"
|
||||
></el-date-picker>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<span class="title">CPU</span>
|
||||
<el-date-picker
|
||||
@change="search('cpu')"
|
||||
v-model="timeRangeCpu"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="max-width: 360px; width: 100%"
|
||||
:size="mobile ? 'small' : 'default'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<div id="loadCPUChart" class="chart"></div>
|
||||
</el-card>
|
||||
@ -44,17 +50,20 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<span class="title">{{ $t('monitor.memory') }}</span>
|
||||
<el-date-picker
|
||||
@change="search('memory')"
|
||||
v-model="timeRangeMemory"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="float: right; margin-top: -5px; width: 360px"
|
||||
></el-date-picker>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<span class="title">{{ $t('monitor.memory') }}</span>
|
||||
<el-date-picker
|
||||
@change="search('memory')"
|
||||
v-model="timeRangeMemory"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="max-width: 360px; width: 100%"
|
||||
:size="mobile ? 'small' : 'default'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<div id="loadMemoryChart" class="chart"></div>
|
||||
</el-card>
|
||||
@ -64,17 +73,20 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<span class="title">{{ $t('monitor.disk') }} IO</span>
|
||||
<el-date-picker
|
||||
@change="search('io')"
|
||||
v-model="timeRangeIO"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="float: right; margin-top: -5px; width: 360px"
|
||||
></el-date-picker>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<span class="title">{{ $t('monitor.disk') }} IO</span>
|
||||
<el-date-picker
|
||||
@change="search('io')"
|
||||
v-model="timeRangeIO"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="max-width: 360px; width: 100%"
|
||||
:size="mobile ? 'small' : 'default'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<div id="loadIOChart" class="chart"></div>
|
||||
</el-card>
|
||||
@ -82,34 +94,43 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card style="overflow: inherit">
|
||||
<template #header>
|
||||
<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>
|
||||
<div v-for="item in netOptions" :key="item">
|
||||
<el-option v-if="item === 'all'" :label="$t('commons.table.all')" :value="item" />
|
||||
<el-option v-else :label="item" :value="item" />
|
||||
</div>
|
||||
</el-select>
|
||||
<template #reference>
|
||||
<span class="networkOption" v-if="networkChoose === 'all'">
|
||||
{{ $t('commons.table.all') }}
|
||||
</span>
|
||||
<span v-else class="networkOption">
|
||||
{{ networkChoose }}
|
||||
</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-date-picker
|
||||
@change="search('network')"
|
||||
v-model="timeRangeNetwork"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="float: right; margin-top: -5px; width: 360px"
|
||||
></el-date-picker>
|
||||
<div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
|
||||
<div>
|
||||
<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>
|
||||
<div v-for="item in netOptions" :key="item">
|
||||
<el-option
|
||||
v-if="item === 'all'"
|
||||
:label="$t('commons.table.all')"
|
||||
:value="item"
|
||||
/>
|
||||
<el-option v-else :label="item" :value="item" />
|
||||
</div>
|
||||
</el-select>
|
||||
<template #reference>
|
||||
<span class="networkOption" v-if="networkChoose === 'all'">
|
||||
{{ $t('commons.table.all') }}
|
||||
</span>
|
||||
<span v-else class="networkOption">
|
||||
{{ networkChoose }}
|
||||
</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-date-picker
|
||||
@change="search('network')"
|
||||
v-model="timeRangeNetwork"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('commons.search.timeRange')"
|
||||
:start-placeholder="$t('commons.search.timeStart')"
|
||||
:end-placeholder="$t('commons.search.timeEnd')"
|
||||
:shortcuts="shortcuts"
|
||||
style="max-width: 360px; width: 100%"
|
||||
:size="mobile ? 'small' : 'default'"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<div id="loadNetworkChart" class="chart"></div>
|
||||
</el-card>
|
||||
@ -119,13 +140,20 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { loadMonitor, getNetworkOptions } from '@/api/modules/monitor';
|
||||
import { Monitor } from '@/api/interface/monitor';
|
||||
import { dateFormatWithoutYear } from '@/utils/util';
|
||||
import i18n from '@/lang';
|
||||
import MonitorRouter from '@/views/host/monitor/index.vue';
|
||||
import { GlobalStore } from '@/store';
|
||||
|
||||
const globalStore = GlobalStore();
|
||||
|
||||
const mobile = computed(() => {
|
||||
return globalStore.isMobile();
|
||||
});
|
||||
|
||||
const zoomStart = ref();
|
||||
const monitorBase = ref();
|
||||
|
||||
@ -15,39 +15,44 @@
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<TableSetting @search="search()" />
|
||||
<div class="search-button">
|
||||
<el-input
|
||||
v-model="searchIP"
|
||||
clearable
|
||||
@clear="search()"
|
||||
suffix-icon="Search"
|
||||
@keyup.enter="search()"
|
||||
@change="search()"
|
||||
:placeholder="$t('commons.button.search') + ' ip'"
|
||||
></el-input>
|
||||
<div class="flx-align-center">
|
||||
<div class="search-button">
|
||||
<el-input
|
||||
v-model="searchIP"
|
||||
clearable
|
||||
@clear="search()"
|
||||
suffix-icon="Search"
|
||||
@keyup.enter="search()"
|
||||
@change="search()"
|
||||
:placeholder="$t('commons.button.search') + ' ip'"
|
||||
></el-input>
|
||||
</div>
|
||||
<TableSetting @search="search()" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template #search>
|
||||
<el-select v-model="searchStatus" @change="search()" clearable>
|
||||
<template #prefix>{{ $t('commons.table.status') }}</template>
|
||||
<el-option :label="$t('commons.table.all')" value=""></el-option>
|
||||
<el-option :label="$t('commons.status.success')" value="Success"></el-option>
|
||||
<el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" plain @click="onClean()" style="margin-left: 10px">
|
||||
{{ $t('logs.deleteLogs') }}
|
||||
</el-button>
|
||||
<div class="flx-align-center">
|
||||
<el-select v-model="searchStatus" @change="search()" clearable>
|
||||
<template #prefix>{{ $t('commons.table.status') }}</template>
|
||||
<el-option :label="$t('commons.table.all')" value=""></el-option>
|
||||
<el-option :label="$t('commons.status.success')" value="Success"></el-option>
|
||||
<el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" plain @click="onClean()" style="margin-left: 10px">
|
||||
{{ $t('logs.deleteLogs') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
|
||||
<el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" />
|
||||
<el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" />
|
||||
<el-table-column :label="$t('logs.loginIP')" prop="ip" />
|
||||
<el-table-column :label="$t('logs.loginAddress')" prop="address" />
|
||||
<el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
|
||||
<el-table-column min-width="40" :label="$t('logs.loginStatus')" prop="status">
|
||||
<el-table-column :label="$t('logs.loginStatus')" prop="status">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.status === 'Success'">
|
||||
<el-tag type="success">{{ $t('commons.status.success') }}</el-tag>
|
||||
|
||||
@ -145,9 +145,9 @@ onMounted(() => {
|
||||
font-size: 40px;
|
||||
font-family: pingFangSC-Regular;
|
||||
font-weight: 600;
|
||||
// @media only screen and (max-width: 1440px) {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1110px) {
|
||||
margin-bottom: 20px;
|
||||
@ -170,6 +170,9 @@ onMounted(() => {
|
||||
@media only screen and (max-width: 1110px) {
|
||||
margin: 60px auto 0;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -100,9 +100,9 @@ onMounted(() => {
|
||||
font-size: 40px;
|
||||
font-family: pingFangSC-Regular;
|
||||
font-weight: 600;
|
||||
// @media only screen and (max-width: 1440px) {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1110px) {
|
||||
margin-bottom: 20px;
|
||||
@ -125,6 +125,10 @@ onMounted(() => {
|
||||
@media only screen and (max-width: 1110px) {
|
||||
margin: 60px auto 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user