Skip to content

Commit

Permalink
fix🐛: fix monitor macos env error
Browse files Browse the repository at this point in the history
  • Loading branch information
@wenjianzhang
wenjianzhang committed Feb 12, 2022
1 parent 79313b8 commit 69020af
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 109 deletions.
8 changes: 5 additions & 3 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %> - go-admin</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.css" rel="stylesheet">
<title>
<%= webpackConfig.name %> - go-admin
</title>
<meta name="keywords" content="go-admin,gin,权限管理系统,gin-admin,gin-vue-admin,go">
<meta name="description" content="基于Gin + Vue + Element UI的前后端分离权限管理系统，初始化极度简单，只需要配置文件中，修改数据库连接，系统启动后会自动初始化数据库信息以及必须的基础数据">
<meta name="description"
content="基于Gin + Vue + Element UI的前后端分离权限管理系统，初始化极度简单，只需要配置文件中，修改数据库连接，系统启动后会自动初始化数据库信息以及必须的基础数据">
<style>
html,
body,
Expand Down
237 changes: 132 additions & 105 deletions src/views/sys-tools/monitor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,131 +4,146 @@
<template #wrapper>
<el-row :gutter="10" class="mb10">
<el-col :sm="24" :md="8">
<el-card v-if="info.cpu" class="box-card">
<el-card v-if="info.cpu" class="box-card" shadow="always" :body-style="{paddingTop:'0 !important'}">
<div slot="header" class="clearfix">
<span>CPU使用率</span>
<el-row :gutter="10">
<el-col :sm="24" :md="8">
<el-tag
type="success"
effect="dark"
>
{{ info.location }}
</el-tag>
</el-col>
<el-col :sm="24" :md="8" class="" style="line-height:28px;text-align:center;">
Aliyun
</el-col>
</el-row>
</div>
<div class="monitor">
<div class="monitor-header">
<el-progress :color="$store.state.settings.theme" type="circle" :percentage="info.cpu.Percent" />
<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-col :sm="6" :md="6">
下载<i class="el-icon-caret-bottom" />
</el-col>
<el-col :sm="18" :md="18" class="line-value">
{{ info.net.in }}KB
</el-col>
</el-col>
<el-col :sm="12" :md="12" class="line">
<el-col :sm="6" :md="6">
上传<i class="el-icon-caret-top" />
</el-col>
<el-col :sm="18" :md="18" class="line-value">
{{ info.net.out }}KB
</el-col>
</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">
<!-- <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-col :sm="24" :md="8">
<el-card v-if="info.mem" class="box-card">
<div slot="header" class="clearfix">
<span>内存使用率</span>
</div>
<div class="monitor">
<div class="monitor-header">
<el-progress :color="$store.state.settings.theme" type="circle" :percentage="info.mem.usage" />
</div>
<div class="monitor-footer">
<Cell label="总内存" :value="info.mem.total+'G'" border />
<Cell label="已用内存" :value="info.mem.used+'G'" />
</div>
</div>
</el-card>
</el-col>
<el-col :sm="24" :md="8">
<el-card v-if="info.disk" class="box-card">
<div slot="header" class="clearfix">
<span>磁盘信息</span>
</div>
<div class="monitor">
<div class="monitor-header">
<el-progress :color="$store.state.settings.theme" type="circle" :percentage=" Number(( (info.disk.total-info.disk.free) / info.disk.total * 100).toFixed(2))" />
</div>
<div class="monitor-footer">
<Cell label="总磁盘" :value="info.disk.total+'G'" border />
<Cell label="已用磁盘" :value="info.disk.total-info.disk.free+'G'" />
</div>
</div> -->
</div>
</el-card>
</el-col>
</el-row>

<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-card>
<div slot="header">
<span>磁盘状态</span>
</div>
<div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;">
<thead>
<tr>
<th class="is-leaf"><div class="cell">盘符路径</div></th>
<th class="is-leaf"><div class="cell">文件系统</div></th>
<th class="is-leaf"><div class="cell">总大小</div></th>
<!-- <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> -->

<th class="is-leaf"><div class="cell">可用大小</div></th>
<th class="is-leaf"><div class="cell">已用大小</div></th>
<th class="is-leaf"><div class="cell">已用百分比</div></th>
</tr>
</thead>
<tbody v-if="info.diskList">
<tr v-for="(forList,index) in info.diskList" :key="index">
<td><div class="cell">{{ forList.path }}</div></td>
<td><div class="cell">{{ forList.fstype }}</div></td>
<td><div class="cell">{{ forList.total }}M</div></td>
<td><div class="cell">{{ forList.free }}M</div></td>
<td><div class="cell">{{ forList.used }}M</div></td>
<td><div class="cell" :class="{'text-danger': forList.usedPercent > 80}">{{ forList.usedPercent }}%</div></td>
</tr>
</tbody>
</table>
</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>

</template>
</el-row></template>
</BasicLayout>
</div>
</template>

<script>
import Cell from '@/components/Cell/index'
import { getServer } from '@/api/monitor/server'
import {
getServer
} from '@/api/monitor/server'
export default {
name: 'Monitor',
components: {
Cell
},
data() {
return {
info: {}
info: {},
customColors: [
{ color: '#13ce66', percentage: 20 },
{ color: '#1890ff', percentage: 40 },
{ color: '#e6a23c', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#F56C6C', percentage: 100 }
]
}
},
created() {
this.getServerInfo()
setInterval(() => {
this.getServerInfo()
}, 5000)
},
methods: {
getServerInfo() {
Expand All @@ -143,14 +158,26 @@ export default {
</script>

<style lang="scss" scoped>
.monitor{
.monitor-header{
display: flex;
justify-content: center;
align-items: center;
}
.line{
line-height: 49px;
font-size: 14px ;
padding-left: 0px !important;
padding-right: 0px !important;
.line-value{
text-align: right;
color: #969799;
}
}
.monitor {
.monitor-header {
display: flex;
justify-content: center;
align-items: center;
}
.el-card__body{
padding: 20px 20px 0 20px!important;
.monitor-progress{
padding-top: 15px;
}
}
</style>
2 changes: 1 addition & 1 deletion vue.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ module.exports = {
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
Expand Down

0 comments on commit 69020af

Please sign in to comment.