595 lines
16 KiB
Vue
595 lines
16 KiB
Vue
<template>
|
||
<a-card :bordered="false">
|
||
<div style="height:85px;background: #e6e9f1;padding: 10px;">
|
||
<a-row :gutter="6">
|
||
<a-col :span="6">
|
||
<div class="gutter-box">
|
||
<a-row>
|
||
<a-cel :span="1" style="display: inline-block;width: 64px;">
|
||
<img src="~@/assets/img/serverName.png" />
|
||
</a-cel>
|
||
<a-cel :span="2" style="display: inline-block;width: 106px; padding-left: 10px;">
|
||
<span class="infoTitle">服务器名称：</span>
|
||
</a-cel>
|
||
<a-cel :span="21" style="display: inline-block;position: relative;">
|
||
<div class="infoName">{{ serverInfoForm.hostName }}</div>
|
||
</a-cel>
|
||
</a-row>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="1">
|
||
<div class="splitLine"></div>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<div class="gutter-box">
|
||
<a-row>
|
||
<a-cel :span="1" style="display: inline-block;width: 64px;">
|
||
<img src="~@/assets/img/serverSystem.png" />
|
||
</a-cel>
|
||
<a-cel :span="2" style="display: inline-block;width: 90px; padding-left: 10px;">
|
||
<span class="infoTitle">操作系统：</span>
|
||
</a-cel>
|
||
<a-cel :span="21" style="display: inline-block;position: relative;">
|
||
<div class="infoName">{{ serverInfoForm.osName }}</div>
|
||
</a-cel>
|
||
</a-row>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="1">
|
||
<div class="splitLine"></div>
|
||
</a-col>
|
||
<a-col :span="5">
|
||
<div class="gutter-box">
|
||
<a-row>
|
||
<a-cel :span="1" style="display: inline-block;width: 64px;">
|
||
<img src="~@/assets/img/serverIP.png" />
|
||
</a-cel>
|
||
<a-cel :span="2" style="display: inline-block;width: 90px; padding-left: 10px;">
|
||
<span class="infoTitle">服务器IP：</span>
|
||
</a-cel>
|
||
<a-cel :span="21" style="display: inline-block;position: relative;">
|
||
<div class="infoName">{{ serverInfoForm.ipAddress }}</div>
|
||
</a-cel>
|
||
</a-row>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="1">
|
||
<div class="splitLine"></div>
|
||
</a-col>
|
||
<a-col :span="4">
|
||
<div class="gutter-box">
|
||
<a-row>
|
||
<a-cel :span="1" style="display: inline-block;width: 64px;">
|
||
<img src="~@/assets/img/serverOrg.png" />
|
||
</a-cel>
|
||
<a-cel :span="2" style="display: inline-block;width: 90px; padding-left: 10px;">
|
||
<span class="infoTitle">系统架构：</span>
|
||
</a-cel>
|
||
<a-cel :span="21" style="display: inline-block;position: relative;">
|
||
<div class="infoName">{{ serverInfoForm.architecture }}</div>
|
||
</a-cel>
|
||
</a-row>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<a-row :gutter="20">
|
||
<a-col :md="16" :sm="1" style="height:calc(50vh - 133px);">
|
||
<div class="linese"></div>
|
||
<div class="echartsTitle" style="position: relative">
|
||
<div class="ecicon"></div>CPU
|
||
<div class="subinfo">
|
||
<span class="subTitle">核心数：</span>
|
||
<span class="clore1">{{ cpuInfo.cpuCoreCount }}</span>
|
||
<span class="subTitle">当前应用使用率：</span>
|
||
<span class="clore2">{{ cpuInfo.userCpuUsage }}%</span>
|
||
<span class="subTitle">系统使用率：</span>
|
||
<span class="clore3">{{ cpuInfo.systemCpuUsage }}%</span>
|
||
<span class="subTitle">当前空闲率：</span>
|
||
<span class="clore4">{{ cpuInfo.idleCpuUsage }}%</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance"
|
||
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||
<div class="linese"></div>
|
||
</a-col>
|
||
<a-col :md="8" :sm="2" style="height:calc(50vh - 133px);">
|
||
<div class="linese"></div>
|
||
<div class="echartsTitle">
|
||
<div class="ecicon"></div>磁盘
|
||
</div>
|
||
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"
|
||
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); ">
|
||
<a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="diskInfo"
|
||
:pagination="false" :scroll="{ y: 'calc(50vh - 246px)' }">
|
||
</a-table>
|
||
</div>
|
||
<div class="linese"></div>
|
||
</a-col>
|
||
<a-col :md="12" :sm="3" style="height:calc(50vh - 193px);">
|
||
<div class="linese"></div>
|
||
<div class="echartsTitle" style="position: relative">
|
||
<div class="ecicon"></div>内存
|
||
<div class="subinfo">
|
||
<span class="subTitle">总内存：</span>
|
||
<span class="clore5">{{ memoryInfo.totalMemory }}</span>
|
||
<span class="subTitle">已用内存：</span>
|
||
<span class="clore6">{{ memoryInfo.usedMemory }}% </span>
|
||
<span class="subTitle">剩余内存：</span>
|
||
<span class="clore7">{{ memoryInfo.freeMemory }}%</span>
|
||
<span class="subTitle">使用率：</span>
|
||
<span class="clore8">{{ memoryInfo.memoryUsage }}%</span>
|
||
</div>
|
||
</div>
|
||
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage"
|
||
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||
<div class="linese"></div>
|
||
</a-col>
|
||
<a-col :md="12" :sm="4" style="height:calc(50vh - 193px);">
|
||
<div class="linese"></div>
|
||
<div class="echartsTitle" style="position: relative">
|
||
<div class="ecicon"></div>JVM
|
||
<div class="subinfo">
|
||
<span class="subTitle">总内存：</span>
|
||
<span class="clore5">{{ jvmInfo.jvmTotalMemory }}</span>
|
||
<span class="subTitle">已用内存：</span>
|
||
<span class="clore6">{{ jvmInfo.jvmUsedMemory }}% </span>
|
||
<span class="subTitle">剩余内存：</span>
|
||
<span class="clore7">{{ jvmInfo.jvmFreeMemory }}%</span>
|
||
<span class="subTitle">使用率：</span>
|
||
<span class="clore8">{{ jvmInfo.jvmMemoryUsage }}%</span>
|
||
</div>
|
||
</div>
|
||
<div id="typeStorage" class="typeStorage" ref="typeStorage"
|
||
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||
<div class="linese"></div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { serverInfo, fillCpuInfo, fillMemoryInfo, fillJvmInfo, fillDiskInfo } from '@/api/analysis'
|
||
export default {
|
||
name: 'Analysis',
|
||
components: {},
|
||
data() {
|
||
return {
|
||
myTimer: null,
|
||
serverInfoForm: {
|
||
osName: null,
|
||
hostName: null,
|
||
ipAddress: null,
|
||
architecture: null
|
||
},
|
||
cpuInfo: {
|
||
cpuCoreCount: null,
|
||
userCpuUsage: null,
|
||
systemCpuUsage: null,
|
||
idleCpuUsage: null,
|
||
chartDate: {
|
||
xData: [],
|
||
y1Data: [],
|
||
y2Data: []
|
||
}
|
||
},
|
||
memoryInfo: {
|
||
totalMemory: null,
|
||
usedMemory: null,
|
||
freeMemory: null,
|
||
memoryUsage: null,
|
||
chartDate: {
|
||
xData: [],
|
||
yData: [],
|
||
}
|
||
},
|
||
jvmInfo: {
|
||
jvmTotalMemory: null,
|
||
jvmUsedMemory: null,
|
||
jvmFreeMemory: null,
|
||
jvmMemoryUsage: null,
|
||
chartDate: {
|
||
xData: [],
|
||
yData: [],
|
||
}
|
||
},
|
||
diskInfo: [],
|
||
columns: [
|
||
{
|
||
title: '序号',
|
||
width: 70,
|
||
customRender: (text, record, index) => `${index + 1}`,
|
||
},
|
||
{
|
||
title: '磁盘地址',
|
||
align: "center",
|
||
dataIndex: 'name',
|
||
},
|
||
{
|
||
title: '总大小(M)',
|
||
align: "center",
|
||
dataIndex: 'totalSize',
|
||
},
|
||
{
|
||
title: '已使用(M)',
|
||
align: "center",
|
||
dataIndex: 'used',
|
||
},
|
||
{
|
||
title: '挂载地',
|
||
align: "center",
|
||
dataIndex: 'mount',
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
destroyed: function () { // 离开页面生命周期函数
|
||
clearInterval(this.myTimer);
|
||
},
|
||
created() {
|
||
this.getServerInfo()
|
||
this.getFillDiskInfo()
|
||
this.myTimer = setInterval(() => {
|
||
this.getFillCpuInfo()
|
||
this.getFillMemoryInfo()
|
||
this.getFillJvmInfo()
|
||
}, 3000)
|
||
},
|
||
methods: {
|
||
getServerInfo() {
|
||
serverInfo().then(res => {
|
||
if (res.code == 200) {
|
||
this.serverInfoForm = {
|
||
osName: res.result.osName,
|
||
hostName: res.result.hostName,
|
||
ipAddress: res.result.ipAddress,
|
||
architecture: res.result.architecture
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getFillDiskInfo() {
|
||
fillDiskInfo().then(res => {
|
||
if (res.code == 200) {
|
||
this.diskInfo = res.result
|
||
}
|
||
})
|
||
},
|
||
getFillCpuInfo() {
|
||
fillCpuInfo().then(res => {
|
||
if (res.code == 200) {
|
||
let date = new Date(res.timestamp);
|
||
let hours = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
let xlable = hours + ':' + minutes
|
||
this.cpuInfo.cpuCoreCount = res.result.cpuCoreCount
|
||
this.userCpuUsage = res.result.userCpuUsage
|
||
this.systemCpuUsage = res.result.systemCpuUsage
|
||
this.idleCpuUsage = res.result.idleCpuUsage
|
||
this.cpuInfo.chartDate.xData.push(xlable)
|
||
this.cpuInfo.chartDate.y1Data.push(res.result.userCpuUsage)
|
||
this.cpuInfo.chartDate.y2Data.push(res.result.systemCpuUsage)
|
||
// 初始化图
|
||
this.initCPUChart()
|
||
}
|
||
})
|
||
},
|
||
initCPUChart() {
|
||
var myChart = this.$echarts.init(this.$refs.cleaningVariance);
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['当前应用使用率', '系统使用率']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.cpuInfo.chartDate.xData
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '当前应用使用率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
areaStyle: {
|
||
color: '#407BF3',
|
||
opacity: 0.2
|
||
},
|
||
lineStyle: {
|
||
color: '#407BF3' //改变折线颜色
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: this.cpuInfo.chartDate.y1Data
|
||
},
|
||
{
|
||
name: '系统使用率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
areaStyle: {
|
||
color: '#D8971A',
|
||
opacity: 0.2
|
||
},
|
||
lineStyle: {
|
||
color: '#D8971A' //改变折线颜色
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: this.cpuInfo.chartDate.y2Data
|
||
},
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
getFillMemoryInfo() {
|
||
fillMemoryInfo().then(res => {
|
||
if (res.code == 200) {
|
||
let date = new Date(res.timestamp);
|
||
let hours = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
let xlable = hours + ':' + minutes
|
||
this.memoryInfo.totalMemory = res.result.totalMemory
|
||
this.memoryInfo.usedMemory = res.result.usedMemory
|
||
this.memoryInfo.freeMemory = res.result.freeMemory
|
||
this.memoryInfo.memoryUsage = res.result.memoryUsage
|
||
|
||
this.memoryInfo.chartDate.xData.push(xlable)
|
||
this.memoryInfo.chartDate.yData.push(res.result.usedMemory)
|
||
// 初始化图
|
||
this.initMemoryChart()
|
||
}
|
||
})
|
||
},
|
||
initMemoryChart() {
|
||
var myChart = this.$echarts.init(this.$refs.catalogingStorage);
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.memoryInfo.chartDate.xData
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: 'line',
|
||
stack: 'Total',
|
||
areaStyle: {
|
||
color: '#138B4E',
|
||
opacity: 0.2
|
||
},
|
||
lineStyle: {
|
||
color: '#138B4E' //改变折线颜色
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: this.memoryInfo.chartDate.yData
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
getFillJvmInfo() {
|
||
fillJvmInfo().then(res => {
|
||
if (res.code == 200) {
|
||
let date = new Date(res.timestamp);
|
||
let hours = date.getHours();
|
||
let minutes = date.getMinutes();
|
||
let xlable = hours + ':' + minutes
|
||
this.jvmInfo.jvmTotalMemory = res.result.jvmTotalMemory
|
||
this.jvmInfo.jvmUsedMemory = res.result.jvmUsedMemory
|
||
this.jvmInfo.jvmFreeMemory = res.result.jvmFreeMemory
|
||
this.jvmInfojvmMemoryUsage = res.result.jvmMemoryUsage
|
||
this.jvmInfo.chartDate.xData.push(xlable)
|
||
this.jvmInfo.chartDate.yData.push(res.result.jvmUsedMemory)
|
||
// 初始化图
|
||
this.initJvmChart()
|
||
}
|
||
})
|
||
},
|
||
initJvmChart() {
|
||
var myChart = this.$echarts.init(this.$refs.typeStorage);
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.jvmInfo.chartDate.xData
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: 'line',
|
||
stack: 'Total',
|
||
areaStyle: {
|
||
color: '#23B0CE',
|
||
opacity: 0.2
|
||
},
|
||
lineStyle: {
|
||
color: '#23B0CE' //改变折线颜色
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: this.jvmInfo.chartDate.yData
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.gutter-box {
|
||
padding: 0 0 0 20px;
|
||
height: 64px;
|
||
}
|
||
|
||
.splitLine {
|
||
width: 1px;
|
||
height: 36px;
|
||
background: #9098A9;
|
||
margin: 14px auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.infomo {
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
width: calc(100% - 74px);
|
||
}
|
||
|
||
.infoTitle {
|
||
font-family: REEJI-ZhenyanGB2.0;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #1964C6;
|
||
}
|
||
|
||
.infoName {
|
||
position: absolute;
|
||
top: -16px;
|
||
width: 200px;
|
||
font-family: REEJI-ZhenyanGB2.0;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #363F56;
|
||
overflow: hidden;
|
||
/* 超出部分隐藏 */
|
||
white-space: nowrap;
|
||
/* 文本不换行 */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分显示省略号 */
|
||
}
|
||
|
||
.subinfo {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 14px;
|
||
}
|
||
|
||
.subTitle {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #363F56;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.clore1 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #D25C23;
|
||
}
|
||
|
||
.clore2 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #0BBAC5;
|
||
}
|
||
|
||
.clore3 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #2E3DFF;
|
||
}
|
||
|
||
.clore4 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #05AE54;
|
||
}
|
||
|
||
.clore5 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #23E2CE;
|
||
}
|
||
|
||
.clore6 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #D38E15;
|
||
}
|
||
|
||
.clore7 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #10ABFC;
|
||
}
|
||
|
||
.clore8 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #129754;
|
||
}
|
||
</style> |