1
This commit is contained in:
193
src/views/sys-tools/monitor.vue
Normal file
193
src/views/sys-tools/monitor.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicLayout>
|
||||
<template #wrapper>
|
||||
<el-row :gutter="10" class="mb10">
|
||||
<el-col :sm="24" :md="8">
|
||||
<el-card v-if="info.cpu" class="box-card" shadow="always" :body-style="{paddingTop:'0 !important'}">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-row :gutter="10">
|
||||
<el-col :sm="24" :md="8">
|
||||
<el-tag
|
||||
type="success"
|
||||
effect="dark"
|
||||
>
|
||||
Runing
|
||||
</el-tag>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="8" class="" style="line-height:28px;text-align:center;">
|
||||
{{ info.location }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="monitor" style="padding-top:0px;">
|
||||
<div class="monitor-content">
|
||||
<el-row :gutter="10">
|
||||
<el-col :sm="24" :md="12">
|
||||
<Cell label="系统" :value="info.os.goOs" border />
|
||||
<Cell label="内存" :value="`${info.mem.used}MB/${info.mem.total}MB`" border />
|
||||
<Cell label="交换" :value="`${info.swap.used}/${info.swap.total}`" border />
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="12">
|
||||
<Cell label="时间" :value="info.os.time" border />
|
||||
<Cell label="在线" :value="`${info.bootTime}小时`" border />
|
||||
<Cell label="硬盘" :value="`${info.disk.used}GB/${info.disk.total}GB`" border />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :sm="12" :md="12" class="line">
|
||||
<el-row>
|
||||
<el-col span="12" :sm="8" :md="8" xs="12">
|
||||
下载<i class="el-icon-caret-bottom" />
|
||||
</el-col>
|
||||
<el-col span="12" :sm="16" :md="16" xs="12" class="line-value">
|
||||
{{ info.net.in }}KB
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :sm="12" :md="12" class="line">
|
||||
<el-row border>
|
||||
<el-col span="12" :sm="6" :md="8">
|
||||
上传<i class="el-icon-caret-top" />
|
||||
</el-col>
|
||||
<el-col span="12" :sm="6" :md="16" class="line-value">
|
||||
{{ info.net.out }}KB
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="monitor-progress">
|
||||
<el-col :sm="24" :md="4">
|
||||
CPU
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="20">
|
||||
<el-progress :color="customColors" :text-inside="true" :stroke-width="24" :percentage="info.cpu.percent" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="monitor-progress">
|
||||
<el-col :sm="24" :md="4">
|
||||
RAM
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="20">
|
||||
<el-progress :color="customColors" :text-inside="true" :stroke-width="24" :percentage="info.mem.percent" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="monitor-progress">
|
||||
<el-col :sm="24" :md="4">
|
||||
硬盘
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="20">
|
||||
<el-progress :color="customColors" :text-inside="true" :stroke-width="24" :percentage="info.disk.percent" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-progress :color="$store.state.settings.theme" type="circle" :percentage="info.cpu.Percent" /> -->
|
||||
</div>
|
||||
<!-- <div class="monitor-footer">
|
||||
|
||||
<Cell label="CPU主频" :value="info.cpu.cpuInfo[0].modelName.split('@ ')[1]" border />
|
||||
<Cell label="核心数" :value="`${info.cpu.cpuInfo[0].cores}`" />
|
||||
</div> -->
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- <el-card v-if="info.os" class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>go运行环境</span>
|
||||
</div>
|
||||
<div class="monitor">
|
||||
<Cell label="GO 版本" :value="info.os.version" border />
|
||||
<Cell label="Goroutine" :value="`${info.os.numGoroutine}`" border />
|
||||
<Cell label="项目地址" :value="info.os.projectDir" />
|
||||
</div>
|
||||
</el-card> -->
|
||||
|
||||
<el-card v-if="info.os" class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>服务器信息</span>
|
||||
</div>
|
||||
<div class="monitor">
|
||||
<Cell label="主机名称" :value="info.os.hostName" border />
|
||||
<Cell label="操作系统" :value="info.os.goOs" border />
|
||||
<Cell label="服务器IP" :value="info.os.ip" border />
|
||||
<Cell label="系统架构" :value="info.os.arch" border />
|
||||
<Cell label="CPU" :value="info.cpu.cpuInfo[0].modelName" border />
|
||||
<Cell label="当前时间" :value="info.os.time" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</el-row></template>
|
||||
</BasicLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '@/components/Cell/index'
|
||||
import {
|
||||
getServer
|
||||
} from '@/api/monitor/server'
|
||||
export default {
|
||||
name: 'Monitor',
|
||||
components: {
|
||||
Cell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
customColors: [
|
||||
{ color: '#13ce66', percentage: 20 },
|
||||
{ color: '#1890ff', percentage: 40 },
|
||||
{ color: '#e6a23c', percentage: 60 },
|
||||
{ color: '#1989fa', percentage: 80 },
|
||||
{ color: '#F56C6C', percentage: 100 }
|
||||
],
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getServerInfo()
|
||||
this.timer = setInterval(() => {
|
||||
this.getServerInfo()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
},
|
||||
methods: {
|
||||
getServerInfo() {
|
||||
getServer().then(ret => {
|
||||
if (ret.code === 200) {
|
||||
this.info = ret
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.line{
|
||||
line-height: 49px;
|
||||
font-size: 14px ;
|
||||
padding-left: 5px !important;
|
||||
padding-right: 5px !important;
|
||||
border-bottom: 1px solid #e6ebf5;
|
||||
.line-value{
|
||||
text-align: right;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
.monitor {
|
||||
.monitor-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.monitor-progress{
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user