github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: 调整 openresty 的状态样式

pull/158/head
zhengkunwang223 2023-02-22 15:38:49 +08:00 committed by zhengkunwang223
parent ee941b09c2
commit 1fa970fbc1
2 changed files with 58 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/views/website/website/nginx/index.vue
View File

@ -2,10 +2,10 @@
<LayoutContent :title="$t('nginx.nginxConfig')" :reload="true">
<template #buttons>
<el-button type="primary" :plain="activeName !== '1'" @click="changeTab('1')">
{{ $t('nginx.configResource') }}
{{ $t('nginx.status') }}
</el-button>
<el-button type="primary" :plain="activeName !== '2'" @click="changeTab('2')">
{{ $t('nginx.status') }}
{{ $t('nginx.configResource') }}
</el-button>
<el-button type="primary" :plain="activeName !== '3'" @click="changeTab('3')">
{{ $t('website.nginxPer') }}
@ -15,8 +15,8 @@
</el-button>
</template>
<template #main>
<Source v-if="activeName === '1'"></Source>
<Status v-if="activeName === '2'" :status="status" />
<Status v-if="activeName === '1'" :status="status" />
<Source v-if="activeName === '2'"></Source>
<NginxPer v-if="activeName === '3'" />
<ContainerLog v-if="activeName === '4'" ref="dialogContainerLogRef" />
</template>

64
frontend/src/views/website/website/nginx/status/index.vue
View File

@ -1,16 +1,49 @@
<template>
<el-row>
<el-col :span="12">
<el-descriptions :column="1" border>
<el-descriptions-item :width="100" :label="$t('nginx.connections')">
{{ data.active }}
<el-col :span="22" :offset="1">
<el-descriptions :column="4" direction="vertical">
<el-descriptions-item>
<template #label>
<span class="status-label">{{ $t('nginx.connections') }}</span>
</template>
<span class="status-count">{{ data.active }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<span class="status-label">{{ $t('nginx.accepts') }}</span>
</template>
<span class="status-count">{{ data.accepts }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<span class="status-label">{{ $t('nginx.handled') }}</span>
</template>
<span class="status-count">{{ data.handled }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<span class="status-label">{{ $t('nginx.requests') }}</span>
</template>
<span class="status-count">{{ data.requests }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<span class="status-label">{{ $t('nginx.reading') }}</span>
</template>
<span class="status-count">{{ data.reading }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<span class="status-label">{{ $t('nginx.writing') }}</span>
</template>
<span class="status-count">{{ data.writing }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<span class="status-label">{{ $t('nginx.waiting') }}</span>
</template>
<span class="status-count">{{ data.waiting }}</span>
</el-descriptions-item>
<el-descriptions-item :label="$t('nginx.accepts')">{{ data.accepts }}</el-descriptions-item>
<el-descriptions-item :label="$t('nginx.handled')">{{ data.handled }}</el-descriptions-item>
<el-descriptions-item :label="$t('nginx.requests')">{{ data.requests }}</el-descriptions-item>
<el-descriptions-item :label="$t('nginx.reading')">{{ data.reading }}</el-descriptions-item>
<el-descriptions-item :label="$t('nginx.writing')">{{ data.writing }}</el-descriptions-item>
<el-descriptions-item :label="$t('nginx.waiting')">{{ data.waiting }}</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
@ -50,3 +83,14 @@ onMounted(() => {
get();
});
</script>
<style lang="scss" scoped>
.status-count {
font-size: 24px;
}
.status-label {
font-size: 14px;
color: #646a73;
}
</style>