This commit is contained in:
2021-04-30 14:03:36 +08:00
31 changed files with 258 additions and 73 deletions

View File

@@ -99,6 +99,9 @@ export default {
var chartDom = this.$refs.chart;
var myChart = echarts.init(chartDom);
myChart.setOption(this.options);
window.addEventListener("resize",function(){
myChart.resize();
})
},
};
</script>

View File

@@ -4,63 +4,188 @@
<Auth auth="sysMachine:query">
<a-row :gutter="24">
<a-col :md="12" :sm="24">
<a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="系统信息">
<a-card
:bordered="false"
:loading="loading"
style="margin-bottom: 20px"
title="系统信息"
>
<template>
<a-descriptions bordered>
<a-descriptions-item :span="3" label="主机名称:">{{ machineBaseInfo.hostName }}</a-descriptions-item>
<a-descriptions-item :span="3" label="操作系统:">{{ machineBaseInfo.systemOs }}</a-descriptions-item>
<a-descriptions-item :span="3" label="系统架构:">{{ machineBaseInfo.osArchitecture }}</a-descriptions-item>
<a-descriptions-item
:span="3"
label="运行框架:"
>{{ machineBaseInfo.frameworkDescription }}</a-descriptions-item>
<a-descriptions-item label="CPU核数:">{{ machineBaseInfo.processorCount }}</a-descriptions-item>
<a-descriptions-item :span="3" label="主机名称:">{{
machineBaseInfo.hostName
}}</a-descriptions-item>
<a-descriptions-item :span="3" label="操作系统:">{{
machineBaseInfo.systemOs
}}</a-descriptions-item>
<a-descriptions-item :span="3" label="系统架构:">{{
machineBaseInfo.osArchitecture
}}</a-descriptions-item>
<a-descriptions-item :span="3" label="运行框架:">{{
machineBaseInfo.frameworkDescription
}}</a-descriptions-item>
<a-descriptions-item :span="3" label="运行时间:">{{
machineUseInfo.runTime
}}</a-descriptions-item>
</a-descriptions>
</template>
</a-card>
</a-col>
<a-col :md="12" :sm="24">
<a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="网络信息">
<a-card
:bordered="false"
:loading="loading"
style="margin-bottom: 20px"
title="网络信息"
>
<template>
<a-descriptions bordered>
<a-descriptions-item
:span="3"
label="外网信息:"
style="ant-descriptions-item-label ant-descriptions-item-colon"
>{{ machineBaseInfo.wanIp }}</a-descriptions-item>
<a-descriptions-item :span="3" label="IPv4地址">{{ machineBaseInfo.lanIp }}</a-descriptions-item>
<a-descriptions-item :span="3" label="网卡MAC">{{ machineBaseInfo.ipMac }}</a-descriptions-item>
<a-descriptions-item
:span="3"
label="流量统计:"
>{{ machineNetworkInfo.sendAndReceived }}</a-descriptions-item>
<a-descriptions-item label="网络速度::">{{ machineNetworkInfo.networkSpeed }}</a-descriptions-item>
>{{ machineBaseInfo.wanIp }}</a-descriptions-item
>
<a-descriptions-item :span="3" label="IPv4地址">{{
machineBaseInfo.lanIp
}}</a-descriptions-item>
<a-descriptions-item :span="3" label="网卡MAC">{{
machineBaseInfo.ipMac
}}</a-descriptions-item>
<a-descriptions-item :span="3" label="流量统计:">{{
machineNetworkInfo.sendAndReceived
}}</a-descriptions-item>
<a-descriptions-item label="网络速度::">{{
machineNetworkInfo.networkSpeed
}}</a-descriptions-item>
</a-descriptions>
</template>
</a-card>
</a-col>
</a-row>
<a-card :bordered="false" :loading="loading" title="其他信息">
<a-row :gutter="24">
<a-col :md="12" :sm="24">
<a-card
:bordered="false"
style="margin-bottom: 20px;height:340px"
:loading="loading"
:title="Cputitle">
<template>
<a-descriptions bordered>
<a-descriptions-item :span="3" label="运行时间:">{{ machineUseInfo.runTime }}</a-descriptions-item>
<a-descriptions-item :span="3" label="CPU使用率">{{ machineUseInfo.cpuRate }}</a-descriptions-item>
<a-descriptions-item :span="3" label="总内存:">{{ machineUseInfo.totalRam }}</a-descriptions-item>
<a-descriptions-item :span="2" label="内存使用率:">{{ machineUseInfo.ramRate }}</a-descriptions-item>
</a-descriptions>
<p>CPU使用率为:</p>
<div class="Ramcpu" ref="cpuchart"></div>
</template>
</a-card>
</a-col>
<a-col :md="12" :sm="24">
<a-card
:bordered="false"
:loading="loading"
style="margin-bottom: 20px;height:340px"
:title="Ramtitle"
>
<template>
<p>内存使用率为:</p>
<div
class="Ramcpu"
ref="Ramchart"></div>
</template>
</a-card>
</a-col>
</a-row>
<!-- <a-card :bordered="false" :loading="loading" title="其他信息">
<template>
<a-descriptions bordered>
<a-descriptions-item :span="3" label="CPU使用率">
{{machineUseInfo.cpuRate}}
</a-descriptions-item>
<a-descriptions-item :span="3" label="总内存:">{{
machineUseInfo.totalRam
}}</a-descriptions-item>
<a-descriptions-item :span="2" label="内存使用率:" >{{
machineUseInfo.ramRate
}}</a-descriptions-item>
</a-descriptions>
</template>
</a-card> -->
</Auth>
</container>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
loading: false,
machineBaseInfo: [],
machineUseInfo: [],
Cputitle:'',
Ramtitle:'',
machineNetworkInfo: [],
Cpuoption : {
color:'#96cff0',
animation:false,
xAxis: {
type: 'category',
boundaryGap: false,
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
yAxis: {
max: 100,
type: 'value',
axisLine:{
show:true
},
axisLabel:{
show:false,
}
},
series: [{
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
type: 'line',
areaStyle: {},
smooth:true,
showSymbol: false,
hoverAnimation: false,
}]
},
Ramoption : {
animation:false,
color:'#dab7b7',
xAxis: {
type: 'category',
boundaryGap: false,
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
yAxis: {
max: 100,
type: 'value',
axisLine:{
show:true
},
axisLabel:{
show:false,
}
},
series: [{
center:['50%','50%'],
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
type: 'line',
areaStyle: {},
smooth:true,
showSymbol: false,
hoverAnimation: false,
}]
}
};
},
created() {
@@ -76,12 +201,36 @@ export default {
this.machineBaseInfo = MachineBase;
this.machineUseInfo = MachineUseInfo;
this.machineNetworkInfo = MachineNetwork;
this.Cputitle = "核心数:"+MachineBase.processorCount
this.Ramtitle = "总内存:"+MachineUseInfo.totalRam
this.Cpuoption.series[0].data.shift();
this.Cpuoption.series[0].data.push(this.machineUseInfo.cpuRate)
this.Ramoption.series[0].data.shift();
this.Ramoption.series[0].data.push(this.machineUseInfo.ramRate)
this.loading = false;
});
},
refreshData() {
this.onLoadCodes();
this.CpuLine();
this.RamLine();
},
CpuLine(){
var chartDom = this.$refs.cpuchart;
var myChart1 = echarts.init(chartDom);
myChart1.setOption(this.Cpuoption);
window.addEventListener("resize",function(){
myChart1.resize();
})
},
RamLine(){
var chartDom = this.$refs.Ramchart;
var myChart = echarts.init(chartDom);
myChart.setOption(this.Ramoption);
window.addEventListener("resize",function(){
myChart.resize();
})
}
},
mounted() {
this.timer = setInterval(this.refreshData, 3000);
@@ -90,4 +239,12 @@ export default {
clearInterval(this.timer);
},
};
</script>
</script>
<style scoped>
.Ramcpu{
Height:300px;
width:120%;
left:-10%;
top:-35px;
}
</style>

View File

@@ -25,7 +25,7 @@
</a-form-model-item>
<a-form-model-item label="生日">
<a-date-picker
@change="(date) => form.birthday = date ? $moment(date).format('YYYY-MM-DD') : undefined"
@change="(date) => form.birthday = date ? $moment(date).format('YYYY-MM-DD') : null"
class="w-100-p"
placeholder="请选择生日"
v-model="form.birthday"