code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-17 16:36:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页图表

Browse Source
This commit is contained in:
kerwincui
2022-07-30 14:03:07 +08:00
parent 86e4ce4191
commit 67f8f66254
1 changed files with 59 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
vue/src/views/index.vue
View File

@@ -106,11 +106,11 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="isAdmin" style="background-color:#fafafa;margin:10px 10px 60px 10px;"> <el-row :gutter="80" v-if="isAdmin" style="background-color:#fafafa;margin:10px 10px 60px 10px;padding:20px 0;">
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" style="padding:20px;"> <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" style="">
<h3 style="font-weight:bold">Mqtt 统计指标</h3> <h3 style="font-weight:bold">Mqtt 统计指标</h3>
<el-row :gutter="20" class="panel-group"> <el-row :gutter="20" class="panel-group">
<el-col :span="24" class="card-panel-col"> <el-col :span="24" class="card-panel-col" style="margin-bottom:17px;">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-orange"> <div class="card-panel-icon-wrapper icon-orange">
<svg-icon icon-class="guide" class-name="card-panel-icon" /> <svg-icon icon-class="guide" class-name="card-panel-icon" />
@@ -123,7 +123,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="24" class="card-panel-col"> <el-col :span="24" class="card-panel-col" style="margin-bottom:18px;">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-green"> <div class="card-panel-icon-wrapper icon-green">
<svg-icon icon-class="receiver" class-name="card-panel-icon" /> <svg-icon icon-class="receiver" class-name="card-panel-icon" />
@@ -136,7 +136,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="24" class="card-panel-col"> <el-col :span="24" class="card-panel-col" style="margin-bottom:17px;">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-orange"> <div class="card-panel-icon-wrapper icon-orange">
<svg-icon icon-class="authenticate" class-name="card-panel-icon" /> <svg-icon icon-class="authenticate" class-name="card-panel-icon" />
@@ -149,7 +149,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="24" class="card-panel-col"> <el-col :span="24" class="card-panel-col" style="margin-bottom:18px;">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-green"> <div class="card-panel-icon-wrapper icon-green">
<svg-icon icon-class="connect" class-name="card-panel-icon" /> <svg-icon icon-class="connect" class-name="card-panel-icon" />
@@ -162,7 +162,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="24" class="card-panel-col"> <el-col :span="24" class="card-panel-col" style="margin-bottom:17px;">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-orange"> <div class="card-panel-icon-wrapper icon-orange">
<svg-icon icon-class="subscribe1" class-name="card-panel-icon" /> <svg-icon icon-class="subscribe1" class-name="card-panel-icon" />
@@ -175,7 +175,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="24" class="card-panel-col"> <el-col :span="24" class="card-panel-col" style="margin-bottom:17px;">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-green"> <div class="card-panel-icon-wrapper icon-green">
<svg-icon icon-class="message" class-name="card-panel-icon" /> <svg-icon icon-class="message" class-name="card-panel-icon" />
@@ -190,76 +190,28 @@
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="padding:20px 50px;"> <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="">
<div ref="statsChart" style="height:310px;margin:20px 0 40px 0;"></div> <div ref="statsChart" style="height:275px;margin:20px 0 40px 0;"></div>
<el-row style="padding-left:20px;"> <el-table :data="tableData" border stripe size="mini" :show-header="false" style="width: 100%;margin-bottom:40px;">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-table-column prop="server" label="服务器信息" width="82">
<table class="description"> </el-table-column>
<tr> <el-table-column prop="serverContent" label="详情" min-width="100">
<td><strong>服务器名称： </strong></td> </el-table-column>
<td>{{server.sys.computerName}}</td> <el-table-column prop="java" label="JAVA虚拟机" width="82">
</tr> </el-table-column>
<tr> <el-table-column prop="javaContent" label="详情" min-width="100">
<td><strong>服务器IP： </strong></td> </el-table-column>
<td>{{server.sys.computerIp}}</td> </el-table>
</tr>
<tr>
<td><strong>操作系统： </strong></td>
<td>{{server.sys.osName}}</td>
</tr>
<tr>
<td><strong>系统架构： </strong></td>
<td>{{server.sys.osArch}}</td>
</tr>
<tr>
<td><strong>CPU核心： </strong></td>
<td>{{server.cpu.cpuNum}}</td>
</tr>
<tr>
<td><strong>总内存： </strong></td>
<td>{{server.mem.total}}</td>
</tr>
</table>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" style="">
<table class="description">
<tr>
<td><strong>Java名称： </strong></td>
<td>{{server.jvm.name}}</td>
</tr>
<tr>
<td><strong>启动时间： </strong></td>
<td>{{server.jvm.startTime}}</td>
</tr>
<tr>
<td><strong>Java版本： </strong></td>
<td>{{server.jvm.version}}</td>
</tr>
<tr>
<td><strong>运行时长： </strong></td>
<td>{{server.jvm.runTime}}</td>
</tr>
<tr>
<td><strong>占用内存： </strong></td>
<td>{{server.jvm.used}}</td>
</tr>
<tr>
<td><strong>JVM总内存： </strong></td>
<td>{{server.jvm.total}}</td>
</tr>
</table>
</el-col>
</el-row>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" style="padding:20px;">
<div style="padding:20px;"> <div style="padding:20px;">
<div ref="pieCpu" style="height:161px;margin-bottom:-20px;"></div> <div ref="pieCpu" style="height:161px;border-bottom:1px solid #ddd;"></div>
</div> </div>
<div style="padding:20px;"> <div style="padding:20px;">
<div ref="pieMemery" style="height:161px;margin-bottom:-20px;"></div> <div ref="pieMemery" style="height:161px;border-bottom:1px solid #ddd;"></div>
</div> </div>
<div style="padding:20px;"> <div style="padding:20px;">
<div ref="pieDisk" style="height:161px;margin-bottom:-20px;"></div> <div ref="pieDisk" style="height:161px;"></div>
</div> </div>
</el-col> </el-col>
@@ -426,7 +378,8 @@ export default {
mem: { mem: {
total: 2 total: 2
} }
} },
tableData: []
}; };
}, },
created() { created() {
@@ -513,6 +466,37 @@ export default {
getServer() { getServer() {
getServer().then(response => { getServer().then(response => {
this.server = response.data; this.server = response.data;
this.tableData = [{
server: '服务器名',
serverContent: this.server.sys.computerName,
java: 'Java名称',
javaContent: this.server.jvm.name
}, {
server: '服务器IP',
serverContent: this.server.sys.computerIp,
java: '启动时间',
javaContent: this.server.jvm.startTime
}, {
server: '操作系统',
serverContent: this.server.sys.osName,
java: 'Java版本',
javaContent: this.server.jvm.version
}, {
server: '系统架构',
serverContent: this.server.sys.osArch,
java: '运行时长',
javaContent: this.server.jvm.runTime
}, {
server: 'CPU核心',
serverContent: this.server.cpu.cpuNum,
java: '占用内存',
javaContent: this.server.jvm.used
}, {
server: '内存大小',
serverContent: this.server.mem.total,
java: 'JVM总内存',
javaContent: this.server.jvm.total
}, ]
this.$nextTick(() => { this.$nextTick(() => {
this.drawPieCpu(); this.drawPieCpu();
this.drawPieMemery(); this.drawPieMemery();
@@ -991,12 +975,13 @@ export default {
}] }]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
} },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.phone { .phone {
height: 729px; height: 729px;
width: 370px; width: 370px;