server 模块，details页面cpu利用率接口调试
server 模块，服务和进程页面，cpu 和 memory 接口调试，数据渲染
This commit is contained in:
任珮宇
parent
eb03d28eea
commit
4f73b1b5b2
|
|
@ -320,9 +320,15 @@
|
|||
<BoxTitle title="CPU utilization">
|
||||
<template slot="right">
|
||||
<div class="right-title">
|
||||
<div class="right-title-item">average value:<i>32%</i></div>
|
||||
<div class="right-title-item">minimum value:<i>32%</i></div>
|
||||
<div class="right-title-item">Maximum value:<i>32%</i></div>
|
||||
<div class="right-title-item">
|
||||
average value:<i>{{ cpuData.avg }}%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
minimum value:<i>{{ cpuData.min }}%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
Maximum value:<i>{{ cpuData.max }}%</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
|
|
@ -414,6 +420,7 @@ import BoxTitle from '../../components/boxTitle.vue'
|
|||
import infiniteScroll from 'vue-infinite-scroll'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import * as echarts from 'echarts'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
export default {
|
||||
directives: { infiniteScroll },
|
||||
components: {
|
||||
|
|
@ -443,9 +450,12 @@ export default {
|
|||
guageCpu: null,
|
||||
guageMemory: null,
|
||||
guageLoads: null,
|
||||
areaCpu: null,
|
||||
currId: '',
|
||||
detailInfo: {},
|
||||
currItemId: '',
|
||||
// cpu
|
||||
areaCpu: null,
|
||||
cpuData: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -458,11 +468,14 @@ export default {
|
|||
if (this.$route.query.serverId) {
|
||||
this.currId = this.$route.query.serverId
|
||||
this.currIndex = this.dataSource.findIndex((item) => item.hostId === this.currId)
|
||||
this.currItemId = this.dataSource.find((item) => item.hostId === this.currId).cpuUsedItemId
|
||||
} else {
|
||||
this.currId = this.dataSource[0].hostId
|
||||
this.currItemId = this.dataSource[0].cpuUsedItemId
|
||||
this.currIndex = 0
|
||||
}
|
||||
this.getBasiclnfo(this.currId)
|
||||
this.getCpuUtilizationData()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
|
|
@ -480,7 +493,6 @@ export default {
|
|||
setTimeout(() => {
|
||||
this.drawTimeline()
|
||||
this.drawGuageLoads()
|
||||
this.drawAreaCpu()
|
||||
}, 0)
|
||||
})
|
||||
},
|
||||
|
|
@ -499,6 +511,30 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
//CPU utilization
|
||||
getCpuUtilizationData() {
|
||||
let params = {
|
||||
// itemId: this.currItemId,
|
||||
itemId: '37550',
|
||||
itemType: 0,
|
||||
start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`,
|
||||
end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
}
|
||||
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
|
||||
const arr = res.result.map((x) => x.value)
|
||||
this.cpuData.max = Math.max(...arr) * 100
|
||||
this.cpuData.min = Math.min(...arr) * 100
|
||||
let sum = arr.reduce((tatal, num) => tatal + num, 0)
|
||||
this.cpuData.avg = (sum / arr.length).toFixed(2) * 100
|
||||
this.cpuData.xData = res.result.map((item) => {
|
||||
return dateFormat(new Date(item.date), 'hh:mm')
|
||||
})
|
||||
this.cpuData.yData = res.result.map((item) => {
|
||||
return item.value * 100
|
||||
})
|
||||
this.drawAreaCpu()
|
||||
})
|
||||
},
|
||||
getSysServer(callBack) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
|
|
@ -1010,7 +1046,7 @@ export default {
|
|||
axisLabel: {
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
data: date,
|
||||
data: this.cpuData.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
|
@ -1042,7 +1078,7 @@ export default {
|
|||
color: '#10b3d6',
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
data: this.cpuData.yData,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="service-search">
|
||||
<a-row type="flex" :gutter="10">
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Server</span>
|
||||
<a-select style="width:180px"
|
||||
v-model="queryParams.server"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.server"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="serverOptions"
|
||||
:options="serverOptions"
|
||||
@change="onServerChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -18,12 +19,13 @@
|
|||
</a-col>
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Time</span>
|
||||
<a-select style="width:180px"
|
||||
v-model="queryParams.timer"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.timer"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="timerOptions"
|
||||
:options="timerOptions"
|
||||
@change="onTimeChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -32,14 +34,22 @@
|
|||
<a-col flex="265px">
|
||||
<a-range-picker
|
||||
:show-time="true"
|
||||
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||
@change="onRangeDateChange"
|
||||
:value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||
@change="onRangeDateChange"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="service-search-btns">
|
||||
<a-button :class="['service-search-btns-ant', type=='cpu'?'service-search-btns-active':'']" @click="handleCpu">CPU</a-button>
|
||||
<a-button :class="['service-search-btns-ant', type=='memory'?'service-search-btns-active':'']" @click="handleMemory">Memory</a-button>
|
||||
<a-button
|
||||
:class="['service-search-btns-ant', type == 'cpu' ? 'service-search-btns-active' : '']"
|
||||
@click="handleCpu"
|
||||
>CPU</a-button
|
||||
>
|
||||
<a-button
|
||||
:class="['service-search-btns-ant', type == 'memory' ? 'service-search-btns-active' : '']"
|
||||
@click="handleMemory"
|
||||
>Memory</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
|
|
@ -47,7 +57,7 @@
|
|||
<BoxTitle title="Top-ranked processes in the last hour">
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item,index) in ranked.legend" :key="index">
|
||||
<li v-for="(item, index) in ranked.legend" :key="index">
|
||||
<div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
|
||||
{{ item }}
|
||||
</li>
|
||||
|
|
@ -60,27 +70,27 @@
|
|||
<a-row :gutter="20">
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Process CPU usage(%)">
|
||||
<template slot="right">
|
||||
<!-- <template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item,index) in processCpu.legend" :key="index">
|
||||
<li v-for="(item, index) in processCpu.legend" :key="index">
|
||||
<div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</template> -->
|
||||
</BoxTitle>
|
||||
<div class="service-content-center-item" id="processCpu"></div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Process memory usage(%)">
|
||||
<template slot="right">
|
||||
<!-- <template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item,index) in processMenbry.legend" :key="index">
|
||||
<li v-for="(item, index) in processMenbry.legend" :key="index">
|
||||
<div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</template> -->
|
||||
</BoxTitle>
|
||||
<div class="service-content-center-item" id="menbry"></div>
|
||||
</a-col>
|
||||
|
|
@ -88,7 +98,7 @@
|
|||
</div>
|
||||
<div class="service-content-table">
|
||||
<BoxTitle title="Service"></BoxTitle>
|
||||
<div style="padding-top: 15px;">
|
||||
<div style="padding-top: 10px">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
|
|
@ -99,16 +109,19 @@
|
|||
:canSelect="false"
|
||||
>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
|
|
@ -119,93 +132,105 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import moment from 'moment'
|
||||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import * as echarts from 'echarts'
|
||||
const columns = [{
|
||||
const columns = [
|
||||
{
|
||||
title: 'STATUS',
|
||||
align: 'left',
|
||||
dataIndex: 'status',
|
||||
// width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'SERVICE NAME',
|
||||
align: 'left',
|
||||
dataIndex: 'name',
|
||||
// width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'ASSOCIATED PROCESS',
|
||||
align: 'left',
|
||||
dataIndex: 'process',
|
||||
// width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'CPU(%)',
|
||||
align: 'left',
|
||||
dataIndex: 'cpu',
|
||||
// width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'MENORY',
|
||||
align: 'left',
|
||||
dataIndex: 'menory',
|
||||
// width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'INSTANCE',
|
||||
align: 'left',
|
||||
dataIndex: 'instance',
|
||||
// width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'THREAD COUNT',
|
||||
align: 'left',
|
||||
dataIndex: 'threadCount',
|
||||
// width: 250,
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'PROCESSING COUNT',
|
||||
align: 'left',
|
||||
dataIndex: 'processongCount',
|
||||
// width: 250,
|
||||
}
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
TableList
|
||||
TableList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: "cpu",
|
||||
type: 'cpu',
|
||||
queryParams: {
|
||||
server: undefined,
|
||||
timer: "1h",
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
||||
timer: 1,
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
},
|
||||
serverOptions: [],
|
||||
timerOptions: [
|
||||
{label: "1Hours",value: "1h"},
|
||||
{label: "2Hours",value: "2h"},
|
||||
{label: "3Hours",value: "3h"},
|
||||
{ label: '1Hours', value: 1 },
|
||||
{ label: '2Hours', value: 2 },
|
||||
{ label: '3Hours', value: 3 },
|
||||
],
|
||||
ranked: {
|
||||
content: null,
|
||||
legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"],
|
||||
color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954']
|
||||
legend: [],
|
||||
color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
|
||||
},
|
||||
processCpu: {
|
||||
content: null,
|
||||
legend: ["mysqld.exe","svchost.exe"],
|
||||
color: ['#e5ae2d','#00a8ff']
|
||||
legend: ['mysqld.exe', 'svchost.exe'],
|
||||
color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
|
||||
xData: [],
|
||||
data: [],
|
||||
},
|
||||
processMenbry: {
|
||||
content: null,
|
||||
legend: ["mysqld.exe","svchost.exe"],
|
||||
color: ['#9ed24d','#00a8ff']
|
||||
legend: ['mysqld.exe', 'svchost.exe'],
|
||||
color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
|
||||
xData: [],
|
||||
data: [],
|
||||
},
|
||||
columns,
|
||||
loading: false,
|
||||
dataSource: [],
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -215,342 +240,380 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
rankData: {},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
created() {
|
||||
this.getBeforeHours(1)
|
||||
},
|
||||
mounted() {
|
||||
this.getServerList()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawRanked()
|
||||
this.drawProcesCpu()
|
||||
this.drawProcesMenbry()
|
||||
},0)
|
||||
setTimeout(() => {}, 0)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// Top-ranked processes in the last hour
|
||||
getRankProcesses() {
|
||||
this.ranked.content && this.ranked.content.clear()
|
||||
this.processCpu.content && this.processCpu.content.clear()
|
||||
this.processMenbry.content && this.processMenbry.content.clear()
|
||||
let params = {
|
||||
hostId: this.queryParams.server || '10483',
|
||||
pageName: 'serviceAndProcess',
|
||||
start: this.queryParams.startDate,
|
||||
end: this.queryParams.endDate,
|
||||
}
|
||||
getAction('/systemMonitor/queryHostDetails', params).then((res) => {
|
||||
this.list = res.result
|
||||
this.listData = {
|
||||
list: this.num === 0 ? this.list.cpu : this.list.memory,
|
||||
type: this.num === 0 ? 'CPU' : '内存',
|
||||
}
|
||||
|
||||
let cpu_xData = res.result.cpu[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
let cpu_Data = res.result.cpu.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
|
||||
}
|
||||
})
|
||||
let cpu_legend = res.result.cpu.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
let memory_xData = res.result.memory[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
let memory_Data = res.result.memory.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
|
||||
}
|
||||
})
|
||||
let memory_legend = res.result.memory.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
|
||||
this.rankData = {
|
||||
type: this.type === 'cpu' ? 'CPU' : 'Memory',
|
||||
cpu_xData,
|
||||
cpu_Data,
|
||||
memory_xData,
|
||||
memory_Data,
|
||||
}
|
||||
this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend
|
||||
this.processCpu.xData = cpu_xData
|
||||
// this.processCpu.data = res.result.cpu.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// data: item.list.map((el) => el.value),
|
||||
// }
|
||||
// })
|
||||
this.processCpu.data = cpu_Data
|
||||
this.processMenbry.xData = memory_xData
|
||||
// this.processMenbry.data = res.result.memory.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// data: item.list.map((el) => el.value),
|
||||
// }
|
||||
// })
|
||||
this.processMenbry.data = memory_Data
|
||||
this.drawRanked()
|
||||
this.drawProcesCpu()
|
||||
this.drawProcesMenbry()
|
||||
})
|
||||
},
|
||||
getBeforeHours(num) {
|
||||
let currentTime = moment()
|
||||
let oneHourAgo = moment().subtract(num, 'hours')
|
||||
this.queryParams.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
|
||||
this.queryParams.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
|
||||
console.log(this.queryParams)
|
||||
},
|
||||
moment,
|
||||
onRangeDateChange(date, dateString) {
|
||||
this.queryParams.startDate = dateString[0]
|
||||
this.queryParams.endDate = dateString[1]
|
||||
this.getRankProcesses()
|
||||
},
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
getServerList() {
|
||||
getAction("/sysServer/sourceList").then(res => {
|
||||
getAction('/sysServer/sourceList').then((res) => {
|
||||
if (res.success) {
|
||||
this.serverOptions = res.result.map(item => {
|
||||
this.serverOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
value: item.hostId,
|
||||
}
|
||||
})
|
||||
this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId
|
||||
this.queryParams.server = this.$route.query.serverId || res.result[0].hostId
|
||||
this.getRankProcesses()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onServerChange(val) {
|
||||
console.log(val);
|
||||
this.queryParams.server = val
|
||||
this.getRankProcesses()
|
||||
},
|
||||
onTimeChange(val) {
|
||||
console.log(val);
|
||||
this.getBeforeHours(val)
|
||||
this.getRankProcesses()
|
||||
},
|
||||
handleCpu() {
|
||||
this.type = "cpu"
|
||||
this.type = 'cpu'
|
||||
this.ranked.content.clear()
|
||||
this.drawRanked()
|
||||
},
|
||||
handleMemory() {
|
||||
this.type = "memory"
|
||||
this.type = 'memory'
|
||||
this.ranked.content.clear()
|
||||
this.drawRanked()
|
||||
},
|
||||
drawRanked() {
|
||||
this.ranked.content = echarts.init(document.getElementById("ranked"))
|
||||
this.ranked.content = echarts.init(document.getElementById('ranked'))
|
||||
let xData = this.type === 'cpu' ? this.rankData.cpu_xData : this.rankData.memory_xData
|
||||
let option = {
|
||||
color: this.ranked.color,
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
top: 15,
|
||||
bottom: 10,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
},
|
||||
},
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
data: xData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: "CPU utilization",
|
||||
nameLocation: "middle",
|
||||
name: `${this.type == 'cpu' ? 'CPU' : 'Memory'} utilization`,
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: {
|
||||
color: "#5b9cba",
|
||||
fontFamily: "ArialMT",
|
||||
fontSize: 14
|
||||
color: '#5b9cba',
|
||||
fontFamily: 'ArialMT',
|
||||
fontSize: 14,
|
||||
},
|
||||
nameGap: 35,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Baidu',
|
||||
series: [],
|
||||
}
|
||||
if (this.type === 'cpu') {
|
||||
option.series = this.rankData.cpu_Data.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [20, 32, 71, 34, 90, 30,92]
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
stack: 'cpu',
|
||||
data: item.data,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
option.series = this.rankData.memory_Data.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [12, 25, 46, 34, 29, 23,64]
|
||||
},
|
||||
{
|
||||
name: 'Bing',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [60, 72, 71, 74, 90, 13,43]
|
||||
},
|
||||
{
|
||||
name: 'Others',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [62, 82, 91, 84, 19, 11, 55]
|
||||
},
|
||||
{
|
||||
name: 'adf',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [20, 32, 71, 34, 90, 30,92]
|
||||
},
|
||||
]
|
||||
};
|
||||
stack: 'memory',
|
||||
data: item.data,
|
||||
}
|
||||
})
|
||||
}
|
||||
this.ranked.content.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.ranked.content.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
this.ranked.content.resize()
|
||||
})
|
||||
},
|
||||
drawProcesCpu() {
|
||||
this.processCpu.content = echarts.init(document.getElementById("processCpu"))
|
||||
this.processCpu.content = echarts.init(document.getElementById('processCpu'))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 15,
|
||||
bottom: 10,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
formatter: (value,index)=>{
|
||||
if(index === 0) {
|
||||
return ' ' + value;
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if(index === this.xData.length -1) {
|
||||
return value + ' ';
|
||||
if (index === this.processCpu.xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
data: this.processCpu.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Email',
|
||||
symbol: 'none',
|
||||
itemStyle:{ normal:{color:"#00a8ff"}},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#00a8ff" },
|
||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Eml',
|
||||
symbol: 'none',
|
||||
itemStyle:{ normal:{color:"#ffbf2e"}},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#ffbf2e" },
|
||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
series: [],
|
||||
}
|
||||
option.series = this.processCpu.data.map((item, index) => {
|
||||
return {
|
||||
type: 'line',
|
||||
name: item.name,
|
||||
symbol: 'none',
|
||||
itemStyle: { normal: { color: this.processCpu.color[index] } },
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.processCpu.color[index] },
|
||||
{ offset: 1, color: 'rgba(255,255,255,0)' },
|
||||
]),
|
||||
},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
data: item.data,
|
||||
}
|
||||
})
|
||||
this.processCpu.content.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.processCpu.content.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
this.processCpu.content.resize()
|
||||
})
|
||||
},
|
||||
drawProcesMenbry() {
|
||||
this.processMenbry.content = echarts.init(document.getElementById("menbry"))
|
||||
this.processMenbry.content = echarts.init(document.getElementById('menbry'))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 15,
|
||||
bottom: 10,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
formatter: (value,index)=>{
|
||||
if(index === 0) {
|
||||
return ' ' + value;
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if(index === this.xData.length -1) {
|
||||
return value + ' ';
|
||||
if (index === this.processMenbry.xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
data: this.processMenbry.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(64, 105, 121, 0.5)"
|
||||
}
|
||||
color: 'rgba(64, 105, 121, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Email',
|
||||
symbol: 'none',
|
||||
itemStyle:{ normal:{color:"#00a8ff"}},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#00a8ff" },
|
||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'Eml',
|
||||
symbol: 'none',
|
||||
itemStyle:{ normal:{color:"#ffbf2e"}},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#ffbf2e" },
|
||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
series: [],
|
||||
}
|
||||
option.series = this.processMenbry.data.map((item, index) => {
|
||||
return {
|
||||
type: 'line',
|
||||
name: item.name,
|
||||
symbol: 'none',
|
||||
itemStyle: { normal: { color: this.processCpu.color[index] } },
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.processCpu.color[index] },
|
||||
{ offset: 1, color: 'rgba(255,255,255,0)' },
|
||||
]),
|
||||
},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
data: item.data,
|
||||
}
|
||||
})
|
||||
this.processMenbry.content.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.processMenbry.content.resize();
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
this.processMenbry.content.resize()
|
||||
})
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
|
|
@ -562,13 +625,13 @@ export default {
|
|||
this.ipagination.pageSize = size
|
||||
// this.getServerAlarmHistory(this.paramsArg)
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.service-search{
|
||||
height: 50px;
|
||||
.service-search {
|
||||
height: 45px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
display: flex;
|
||||
|
|
@ -576,10 +639,10 @@ export default {
|
|||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
background: rgba(12, 235, 201, 0.05);
|
||||
.ant-row-flex{
|
||||
.ant-row-flex {
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
.item-label{
|
||||
.item-label {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
|
|
@ -588,53 +651,53 @@ export default {
|
|||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&-btns{
|
||||
&-ant{
|
||||
&-btns {
|
||||
&-ant {
|
||||
background: #406979;
|
||||
border: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
&-active{
|
||||
&-active {
|
||||
background: #1397a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.service-content{
|
||||
.service-content {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
&-ranked{
|
||||
&-ranked {
|
||||
height: 210px;
|
||||
&-box{
|
||||
&-box {
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
&-center{
|
||||
&-center {
|
||||
height: 210px;
|
||||
&-item{
|
||||
&-item {
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
&-table{
|
||||
height: calc(100% - 420px);
|
||||
&-table {
|
||||
height: calc(100% - 415px);
|
||||
position: relative;
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.legend-list{
|
||||
list-style:none;
|
||||
li{
|
||||
.legend-list {
|
||||
list-style: none;
|
||||
li {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: normal;
|
||||
color: #ade6ee;
|
||||
.li-icon{
|
||||
.li-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user