Merge branch 'feature-Alarm-renpy' of http://git.hivekion.com:3000/xiaoguangbin/AnalysisSystemForRadionuclide_vue into master-dev
This commit is contained in:
orgin
commit
b4c027a9cd
|
|
@ -11,6 +11,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/data-set": "^0.11.4",
|
"@antv/data-set": "^0.11.4",
|
||||||
|
"@antv/g2plot": "^2.4.23",
|
||||||
"@jeecg/antd-online-mini": "3.4.3-beta2",
|
"@jeecg/antd-online-mini": "3.4.3-beta2",
|
||||||
"@tinymce/tinymce-vue": "2.1.0",
|
"@tinymce/tinymce-vue": "2.1.0",
|
||||||
"@toast-ui/editor": "^2.1.2",
|
"@toast-ui/editor": "^2.1.2",
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -2,131 +2,135 @@
|
||||||
<div class="line-box">
|
<div class="line-box">
|
||||||
<BoxTitle :title="title">
|
<BoxTitle :title="title">
|
||||||
<template slot="other">
|
<template slot="other">
|
||||||
<img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="">
|
<img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="" />
|
||||||
</template>
|
</template>
|
||||||
</BoxTitle>
|
</BoxTitle>
|
||||||
<div style="width: 100%;height: calc(100% - 40px);" :id="layout"></div>
|
<div style="width: 100%; height: calc(100% - 40px)" :id="layout"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import BoxTitle from '../../components/boxTitle.vue';
|
import BoxTitle from '../../components/boxTitle.vue'
|
||||||
export default {
|
export default {
|
||||||
props: ["title","layout","dataSource"],
|
props: ['title', 'layout', 'dataSource', 'xData'],
|
||||||
components: {
|
components: {
|
||||||
BoxTitle,
|
BoxTitle,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
option: {},
|
option: {},
|
||||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
watch: {
|
||||||
this.$nextTick(() => {
|
dataSource: {
|
||||||
setTimeout(() => {
|
handler: function () {
|
||||||
this.drawLine()
|
this.$nextTick(() => {
|
||||||
},0)
|
setTimeout(() => {
|
||||||
})
|
this.drawLine()
|
||||||
|
}, 0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeSize() {
|
changeSize() {
|
||||||
this.$emit("zoom",this.title,this.option)
|
this.$emit('zoom', this.title, this.option)
|
||||||
},
|
},
|
||||||
drawLine() {
|
drawLine() {
|
||||||
let myLine = echarts.init(document.getElementById(`${this.layout}`))
|
let myLine = echarts.init(document.getElementById(`${this.layout}`))
|
||||||
let series = this.dataSource.map(item => {
|
let series = this.dataSource.map((item) => {
|
||||||
return {
|
return {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
name: item.name,
|
name: item.name,
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
data: item.data
|
data: item.data,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.option = {
|
this.option = {
|
||||||
color: ["#00ff5a", "#0096ff", "#ffc600"],
|
color: ['#00ff5a', '#0096ff', '#ffc600'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
top: 35,
|
top: 35,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
icon: "roundRect",
|
icon: 'roundRect',
|
||||||
itemHeight: 12, // 图例icon高度
|
itemHeight: 12, // 图例icon高度
|
||||||
itemWidth: 12, // 图例icon宽度
|
itemWidth: 12, // 图例icon宽度
|
||||||
top: 0,
|
top: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ade6ee",
|
color: '#ade6ee',
|
||||||
lineHeight: 12,
|
lineHeight: 12,
|
||||||
rich: {
|
rich: {
|
||||||
a: {
|
a: {
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
padding:[0,-2,-4,0],
|
padding: [0, -2, -4, 0],
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show:false
|
show: false,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(115, 191, 255, 0.2)"
|
color: 'rgba(115, 191, 255, 0.2)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(115, 191, 255, 0.2)"
|
color: 'rgba(115, 191, 255, 0.2)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(173, 230, 238, 1)",
|
color: 'rgba(173, 230, 238, 1)',
|
||||||
formatter: (value,index)=>{
|
formatter: (value, index) => {
|
||||||
if(index === 0) {
|
if (index === 0) {
|
||||||
return ' ' + value;
|
return ' ' + value
|
||||||
}
|
}
|
||||||
if(index === this.xData.length -1) {
|
if (index === this.xData.length - 1) {
|
||||||
return value + ' ';
|
return value + ' '
|
||||||
}
|
}
|
||||||
return value
|
return value
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: this.xData
|
data: this.xData || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(115, 191, 255, 0.2)"
|
color: 'rgba(115, 191, 255, 0.2)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show:true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(115, 191, 255, 0.5)"
|
color: 'rgba(115, 191, 255, 0.5)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(173, 230, 238, 1)"
|
color: 'rgba(173, 230, 238, 1)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series
|
series,
|
||||||
};
|
}
|
||||||
myLine.setOption(this.option)
|
myLine.setOption(this.option)
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener('resize', function () {
|
||||||
myLine.resize();
|
myLine.resize()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -134,7 +138,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.line-box{
|
.line-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="height: 100%;">
|
<div style="height: 100%">
|
||||||
<div class="monitor-search">
|
<div class="monitor-search">
|
||||||
<a-row type="flex" :gutter="10">
|
<a-row type="flex" :gutter="10">
|
||||||
<a-col flex="265px">
|
<a-col flex="265px">
|
||||||
<span class="item-label">Server</span>
|
<span class="item-label">Server</span>
|
||||||
<a-select style="width:180px"
|
<a-select
|
||||||
|
style="width: 180px"
|
||||||
v-model="queryParams.server"
|
v-model="queryParams.server"
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
:filter-option="filterOption"
|
:filter-option="filterOption"
|
||||||
|
|
@ -19,7 +20,8 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col flex="265px">
|
<a-col flex="265px">
|
||||||
<span class="item-label">Time</span>
|
<span class="item-label">Time</span>
|
||||||
<a-select style="width:180px"
|
<a-select
|
||||||
|
style="width: 180px"
|
||||||
v-model="queryParams.timer"
|
v-model="queryParams.timer"
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
show-arrow
|
show-arrow
|
||||||
|
|
@ -43,101 +45,110 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="monitor-content">
|
<div class="monitor-content">
|
||||||
<a-row :gutter="[20,15]" style="height: 100%;">
|
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="CPU utilizatior"
|
title="CPU utilizatior"
|
||||||
layout="line1"
|
layout="line1"
|
||||||
:dataSource="data1"
|
:xData="data1.xData"
|
||||||
|
:dataSource="data1.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="Memory Usage"
|
title="Memory Usage"
|
||||||
layout="line2"
|
layout="line2"
|
||||||
:dataSource="data2"
|
:xData="data2.xData"
|
||||||
|
:dataSource="data2.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="System Load"
|
title="System Load"
|
||||||
layout="line3"
|
layout="line3"
|
||||||
:dataSource="data3"
|
:xData="data3.xData"
|
||||||
|
:dataSource="data3.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="Disk Read/Write BPS (Byte/s)"
|
title="Disk Read/Write BPS (Byte/s)"
|
||||||
layout="line4"
|
layout="line4"
|
||||||
:dataSource="data4"
|
:xData="data4.xData"
|
||||||
|
:dataSource="data4.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="Disk IOPS (Count/s)"
|
title="Disk IOPS (Count/s)"
|
||||||
layout="line5"
|
layout="line5"
|
||||||
:dataSource="data5"
|
:xData="data5.xData"
|
||||||
|
:dataSource="data5.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="Disk Usage/Lnode Usage"
|
title="Disk Usage/Lnode Usage"
|
||||||
layout="line6"
|
layout="line6"
|
||||||
:dataSource="data6"
|
:xData="data6.xData"
|
||||||
|
:dataSource="data6.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="Public Bandwidth"
|
title="Public Bandwidth"
|
||||||
layout="line7"
|
layout="line7"
|
||||||
:dataSource="data7"
|
:xData="data7.xData"
|
||||||
|
:dataSource="data7.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="Internal Network Bandwidth (bit/s)"
|
title="Internal Network Bandwidth (bit/s)"
|
||||||
layout="line8"
|
layout="line8"
|
||||||
:dataSource="data8"
|
:xData="data8.xData"
|
||||||
|
:dataSource="data8.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="height: 34%;">
|
<a-col :span="8" style="height: 34%">
|
||||||
<div class="monitor-content-item">
|
<div class="monitor-content-item">
|
||||||
<LineChart
|
<LineChart
|
||||||
title="ECS Concurrent Connections (Count)"
|
title="ECS Concurrent Connections (Count)"
|
||||||
layout="line9"
|
layout="line9"
|
||||||
:dataSource="data9"
|
:xData="data9.xData"
|
||||||
|
:dataSource="data9.data"
|
||||||
@zoom="handelZoom"
|
@zoom="handelZoom"
|
||||||
>
|
>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
|
|
@ -145,12 +156,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
<a-modal
|
<a-modal :title="modalTitle" :width="1200" v-model="visible" @cancel="onCancel">
|
||||||
:title="modalTitle"
|
|
||||||
:width="1200"
|
|
||||||
v-model="visible"
|
|
||||||
@cancel="onCancel"
|
|
||||||
>
|
|
||||||
<div class="modal-content" id="common"></div>
|
<div class="modal-content" id="common"></div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<CreateRules
|
<CreateRules
|
||||||
|
|
@ -165,122 +171,127 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import moment from 'moment';
|
import moment from 'moment'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||||
import BoxTitle from '../../components/boxTitle.vue';
|
import BoxTitle from '../../components/boxTitle.vue'
|
||||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||||
import LineChart from './lineChart.vue';
|
import LineChart from './lineChart.vue'
|
||||||
import CreateRules from './createRules.vue';
|
import CreateRules from './createRules.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BoxTitle,
|
BoxTitle,
|
||||||
LineChart,
|
LineChart,
|
||||||
CreateRules
|
CreateRules,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currId:"",
|
currId: '',
|
||||||
visible_rule: false,
|
visible_rule: false,
|
||||||
currLabel:"",
|
currLabel: '',
|
||||||
queryParams: {
|
queryParams: {
|
||||||
server: undefined,
|
server: undefined,
|
||||||
timer: 1,
|
timer: 1,
|
||||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||||
},
|
},
|
||||||
serverOptions: [],
|
serverOptions: [],
|
||||||
timerOptions: [
|
timerOptions: [
|
||||||
{label: "1Hours",value: 1},
|
{ label: '1Hours', value: 1 },
|
||||||
{label: "2Hours",value: 2},
|
{ label: '2Hours', value: 2 },
|
||||||
{label: "3Hours",value: 3},
|
{ label: '3Hours', value: 3 },
|
||||||
{label: "user-defined",value: 0},
|
{ label: 'user-defined', value: 0 },
|
||||||
],
|
|
||||||
data1: [
|
|
||||||
{
|
|
||||||
name: "CPU Total",
|
|
||||||
data: [150, 230, 224, 218, 135, 147, 260]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data2: [
|
|
||||||
{
|
|
||||||
name: "Memory Used Utilization",
|
|
||||||
data: [150, 230, 224, 218, 135, 147, 260]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data3: [
|
|
||||||
{
|
|
||||||
name: "Load 1m",
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Load 5m",
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Load 15m",
|
|
||||||
data: [5, 23, 12, 48, 15, 27, 56]
|
|
||||||
},
|
|
||||||
],
|
|
||||||
data4: [
|
|
||||||
{
|
|
||||||
name: "Disk BPS Read",
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Disk BPS Write",
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data5: [
|
|
||||||
{
|
|
||||||
name: "Disk IOPS Read",
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Disk IOPS Write",
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data6: [
|
|
||||||
{
|
|
||||||
name: "Disk Usage Utilization",
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Lnode Utilization",
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data7: [
|
|
||||||
{
|
|
||||||
name: "VPC PublicIP Lnterner in Rate",
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "VPC PublicIP Lnterner Out Rate",
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data8: [
|
|
||||||
{
|
|
||||||
name: "Intranet in Rete",
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Intranet Out Rete",
|
|
||||||
data: [25, 13, 32, 18, 45, 27, 36]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data9: [
|
|
||||||
{
|
|
||||||
name: "Intranet Out Rete",
|
|
||||||
data: [15, 23, 22, 28, 35, 47, 26]
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
|
data1: {
|
||||||
|
xData: [],
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
data2: {
|
||||||
|
xData: [],
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
data3: {
|
||||||
|
xData: [],
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
data4: {
|
||||||
|
xData: [],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'Disk BPS Read',
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Disk BPS Write',
|
||||||
|
data: [25, 13, 32, 18, 45, 27, 36],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
data5: {
|
||||||
|
xData: [],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'Disk IOPS Read',
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Disk IOPS Write',
|
||||||
|
data: [25, 13, 32, 18, 45, 27, 36],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
data6: {
|
||||||
|
xData: [],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'Disk Usage Utilization',
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Lnode Utilization',
|
||||||
|
data: [25, 13, 32, 18, 45, 27, 36],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
data7: {
|
||||||
|
xData: [],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'VPC PublicIP Lnterner in Rate',
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'VPC PublicIP Lnterner Out Rate',
|
||||||
|
data: [25, 13, 32, 18, 45, 27, 36],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
data8: {
|
||||||
|
xData: [],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'Intranet in Rete',
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Intranet Out Rete',
|
||||||
|
data: [25, 13, 32, 18, 45, 27, 36],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
data9: {
|
||||||
|
xData: [],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'Intranet Out Rete',
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
visible: false,
|
visible: false,
|
||||||
modalTitle: "",
|
modalTitle: '',
|
||||||
myLine: null
|
myLine: null,
|
||||||
|
MonitorItem: {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -290,9 +301,85 @@ export default {
|
||||||
this.getServerList()
|
this.getServerList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 获取所有监控项的itemId
|
||||||
|
getMonitorItemId() {
|
||||||
|
let params = {
|
||||||
|
sourceId: this.currId,
|
||||||
|
}
|
||||||
|
getAction('/alarmItem/alarmItems', params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.MonitorItem = res.result
|
||||||
|
this.getMonitorData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取监控项的数据
|
||||||
|
getMonitorData() {
|
||||||
|
for (const key in this.MonitorItem) {
|
||||||
|
if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
|
||||||
|
const element = this.MonitorItem[key]
|
||||||
|
let params = {
|
||||||
|
itemId: element,
|
||||||
|
itemType: 0,
|
||||||
|
start: this.queryParams.startDate,
|
||||||
|
end: this.queryParams.endDate,
|
||||||
|
}
|
||||||
|
if (key === 'cpuUtilization') {
|
||||||
|
this.getMonitorItemData(params).then((res) => {
|
||||||
|
this.data1.xData = res.xData
|
||||||
|
this.data1.data = [
|
||||||
|
{
|
||||||
|
name: res.name,
|
||||||
|
data: res.data,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
} else if (key === 'memoryUtilization') {
|
||||||
|
this.getMonitorItemData(params).then((res) => {
|
||||||
|
this.data2.xData = res.xData
|
||||||
|
this.data2.data = [
|
||||||
|
{
|
||||||
|
name: res.name,
|
||||||
|
data: res.data,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
} else if (key === 'load') {
|
||||||
|
this.getMonitorItemData(params).then((res) => {
|
||||||
|
this.data3.xData = res.xData
|
||||||
|
this.data3.data = [
|
||||||
|
{
|
||||||
|
name: res.name,
|
||||||
|
data: res.data,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getMonitorItemData(params) {
|
||||||
|
return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
|
||||||
|
// return res
|
||||||
|
if (res.success) {
|
||||||
|
let name = res.result.name
|
||||||
|
let xData = res.result.list.map((item) => {
|
||||||
|
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||||
|
})
|
||||||
|
let data = res.result.list.map((item) => {
|
||||||
|
return Number((item.value * 100).toFixed(2))
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
xData,
|
||||||
|
data,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
getBeforeHours(num) {
|
getBeforeHours(num) {
|
||||||
let currentTime = moment()
|
let currentTime = moment()
|
||||||
let oneHourAgo = moment().subtract(num, 'hours');
|
let oneHourAgo = moment().subtract(num, 'hours')
|
||||||
this.queryParams.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
|
this.queryParams.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
|
||||||
this.queryParams.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
|
this.queryParams.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
|
||||||
},
|
},
|
||||||
|
|
@ -303,72 +390,74 @@ export default {
|
||||||
this.visible_rule = false
|
this.visible_rule = false
|
||||||
},
|
},
|
||||||
handleOk(params) {
|
handleOk(params) {
|
||||||
postAction("/alarmRule/create", params).then(res => {
|
postAction('/alarmRule/create', params).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.visible_rule = false
|
this.visible_rule = false
|
||||||
this.$message.success("success")
|
this.$message.success('success')
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning("This operation fails. Contact your system administrator")
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
moment,
|
moment,
|
||||||
filterOption(input, option) {
|
filterOption(input, option) {
|
||||||
return (
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
getServerList() {
|
getServerList() {
|
||||||
getAction("/sysServer/sourceList").then(res => {
|
getAction('/sysServer/sourceList').then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.serverOptions = res.result.map(item => {
|
this.serverOptions = res.result.map((item) => {
|
||||||
return {
|
return {
|
||||||
label: item.sourceName,
|
label: item.sourceName,
|
||||||
value: item.sourceId
|
value: item.sourceId,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.currId = this.$route.query.serverId || res.result[0].sourceId
|
this.currId = this.$route.query.serverId || res.result[0].sourceId
|
||||||
if (this.$route.query.serverId) {
|
if (this.$route.query.serverId) {
|
||||||
let currOption = this.serverOptions.find(item => {
|
let currOption = this.serverOptions.find((item) => {
|
||||||
return item.value === this.$route.query.serverId
|
return item.value === this.$route.query.serverId
|
||||||
})
|
})
|
||||||
this.currLabel = currOption.label
|
this.currLabel = currOption.label
|
||||||
this.queryParams.server = {
|
this.queryParams.server = {
|
||||||
key: this.$route.query.serverId,
|
key: this.$route.query.serverId,
|
||||||
label:this.currLabel
|
label: this.currLabel,
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.currLabel = res.result[0].sourceName
|
this.currLabel = res.result[0].sourceName
|
||||||
this.queryParams.server = {
|
this.queryParams.server = {
|
||||||
key: res.result[0].sourceId,
|
key: res.result[0].sourceId,
|
||||||
label:this.currLabel
|
label: this.currLabel,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.getMonitorItemId()
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning("This operation fails. Contact your system administrator")
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onServerChange(val) {
|
onServerChange(val) {
|
||||||
this.currId = val.key
|
this.currId = val.key
|
||||||
this.currLabel = val.label
|
this.currLabel = val.label
|
||||||
|
this.getMonitorItemId()
|
||||||
},
|
},
|
||||||
onTimeChange(val) {
|
onTimeChange(val) {
|
||||||
this.getBeforeHours(val)
|
this.getBeforeHours(val)
|
||||||
|
this.getMonitorData()
|
||||||
},
|
},
|
||||||
onRangeDateChange(date, dateString) {
|
onRangeDateChange(date, dateString) {
|
||||||
this.queryParams.timer = 0
|
this.queryParams.timer = 0
|
||||||
this.queryParams.startDate = dateString[0]
|
this.queryParams.startDate = dateString[0]
|
||||||
this.queryParams.endDate = dateString[1]
|
this.queryParams.endDate = dateString[1]
|
||||||
|
this.getMonitorData()
|
||||||
},
|
},
|
||||||
drawLine(option) {
|
drawLine(option) {
|
||||||
this.myLine = echarts.init(document.getElementById("common"))
|
this.myLine = echarts.init(document.getElementById('common'))
|
||||||
this.myLine.setOption(option)
|
this.myLine.setOption(option)
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener('resize', function () {
|
||||||
this.myLine.resize();
|
this.myLine.resize()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handelZoom(str,option) {
|
handelZoom(str, option) {
|
||||||
this.modalTitle = str
|
this.modalTitle = str
|
||||||
this.visible = true
|
this.visible = true
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -378,13 +467,13 @@ export default {
|
||||||
onCancel() {
|
onCancel() {
|
||||||
this.visible = false
|
this.visible = false
|
||||||
this.myLine.clear()
|
this.myLine.clear()
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.monitor-search{
|
.monitor-search {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
|
|
@ -393,13 +482,13 @@ export default {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
background: rgba(12, 235, 201, 0.05);
|
background: rgba(12, 235, 201, 0.05);
|
||||||
.ant-row-flex{
|
.ant-row-flex {
|
||||||
flex-flow: nowrap;
|
flex-flow: nowrap;
|
||||||
}
|
}
|
||||||
/deep/ .ant-calendar-range-picker-separator{
|
/deep/ .ant-calendar-range-picker-separator {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.item-label{
|
.item-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: ArialMT;
|
font-family: ArialMT;
|
||||||
|
|
@ -408,18 +497,18 @@ export default {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
&-btns{
|
&-btns {
|
||||||
&-ant{
|
&-ant {
|
||||||
background: #1397a3;
|
background: #1397a3;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.monitor-content{
|
.monitor-content {
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
&-item{
|
&-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// &-canvas{
|
// &-canvas{
|
||||||
|
|
@ -428,13 +517,13 @@ export default {
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/deep/.ant-modal-title{
|
/deep/.ant-modal-title {
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
/deep/.ant-modal-footer{
|
/deep/.ant-modal-footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.modal-content{
|
.modal-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="height: 100%;">
|
<div style="height: 100%">
|
||||||
<div class="service-search">
|
<div class="service-search">
|
||||||
<a-row type="flex" :gutter="10">
|
<a-row type="flex" :gutter="10">
|
||||||
<a-col flex="265px">
|
<a-col flex="265px">
|
||||||
<span class="item-label">Server</span>
|
<span class="item-label">Server</span>
|
||||||
<a-select style="width:180px"
|
<a-select
|
||||||
|
style="width: 180px"
|
||||||
v-model="queryParams.server"
|
v-model="queryParams.server"
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
:filter-option="filterOption"
|
:filter-option="filterOption"
|
||||||
|
|
@ -18,7 +19,8 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col flex="265px">
|
<a-col flex="265px">
|
||||||
<span class="item-label">Time</span>
|
<span class="item-label">Time</span>
|
||||||
<a-select style="width:180px"
|
<a-select
|
||||||
|
style="width: 180px"
|
||||||
v-model="queryParams.timer"
|
v-model="queryParams.timer"
|
||||||
placeholder="select..."
|
placeholder="select..."
|
||||||
show-arrow
|
show-arrow
|
||||||
|
|
@ -32,14 +34,22 @@
|
||||||
<a-col flex="265px">
|
<a-col flex="265px">
|
||||||
<a-range-picker
|
<a-range-picker
|
||||||
:show-time="true"
|
:show-time="true"
|
||||||
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
:value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||||
@change="onRangeDateChange"
|
@change="onRangeDateChange"
|
||||||
/>
|
/>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<div class="service-search-btns">
|
<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
|
||||||
<a-button :class="['service-search-btns-ant', type=='memory'?'service-search-btns-active':'']" @click="handleMemory">Memory</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>
|
</div>
|
||||||
<div class="service-content">
|
<div class="service-content">
|
||||||
|
|
@ -47,7 +57,7 @@
|
||||||
<BoxTitle title="Top-ranked processes in the last hour">
|
<BoxTitle title="Top-ranked processes in the last hour">
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<ul class="legend-list">
|
<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>
|
<div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -60,27 +70,27 @@
|
||||||
<a-row :gutter="20">
|
<a-row :gutter="20">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<BoxTitle title="Process CPU usage(%)">
|
<BoxTitle title="Process CPU usage(%)">
|
||||||
<template slot="right">
|
<!-- <template slot="right">
|
||||||
<ul class="legend-list">
|
<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>
|
<div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template> -->
|
||||||
</BoxTitle>
|
</BoxTitle>
|
||||||
<div class="service-content-center-item" id="processCpu"></div>
|
<div class="service-content-center-item" id="processCpu"></div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<BoxTitle title="Process memory usage(%)">
|
<BoxTitle title="Process memory usage(%)">
|
||||||
<template slot="right">
|
<!-- <template slot="right">
|
||||||
<ul class="legend-list">
|
<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>
|
<div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template> -->
|
||||||
</BoxTitle>
|
</BoxTitle>
|
||||||
<div class="service-content-center-item" id="menbry"></div>
|
<div class="service-content-center-item" id="menbry"></div>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
@ -88,7 +98,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="service-content-table">
|
<div class="service-content-table">
|
||||||
<BoxTitle title="Service"></BoxTitle>
|
<BoxTitle title="Service"></BoxTitle>
|
||||||
<div style="padding-top: 15px;">
|
<div style="padding-top: 10px">
|
||||||
<TableList
|
<TableList
|
||||||
size="middle"
|
size="middle"
|
||||||
rowKey="id"
|
rowKey="id"
|
||||||
|
|
@ -107,7 +117,10 @@
|
||||||
show-size-changer
|
show-size-changer
|
||||||
show-quick-jumper
|
show-quick-jumper
|
||||||
:total="ipagination.total"
|
:total="ipagination.total"
|
||||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
:show-total="
|
||||||
|
(total, range) =>
|
||||||
|
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||||
|
"
|
||||||
show-less-items
|
show-less-items
|
||||||
@change="handlePageChange"
|
@change="handlePageChange"
|
||||||
@showSizeChange="handleSizeChange"
|
@showSizeChange="handleSizeChange"
|
||||||
|
|
@ -119,93 +132,105 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import moment from 'moment';
|
import moment from 'moment'
|
||||||
import BoxTitle from '../../components/boxTitle.vue';
|
import BoxTitle from '../../components/boxTitle.vue'
|
||||||
import TableList from '../../components/tableList.vue';
|
import TableList from '../../components/tableList.vue'
|
||||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
const columns = [{
|
const columns = [
|
||||||
|
{
|
||||||
title: 'STATUS',
|
title: 'STATUS',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'status',
|
dataIndex: 'status',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title: 'SERVICE NAME',
|
title: 'SERVICE NAME',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title: 'ASSOCIATED PROCESS',
|
title: 'ASSOCIATED PROCESS',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'process',
|
dataIndex: 'process',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title: 'CPU(%)',
|
title: 'CPU(%)',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'cpu',
|
dataIndex: 'cpu',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title: 'MENORY',
|
title: 'MENORY',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'menory',
|
dataIndex: 'menory',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title: 'INSTANCE',
|
title: 'INSTANCE',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'instance',
|
dataIndex: 'instance',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title: 'THREAD COUNT',
|
title: 'THREAD COUNT',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'threadCount',
|
dataIndex: 'threadCount',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title: 'PROCESSING COUNT',
|
title: 'PROCESSING COUNT',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
dataIndex: 'processongCount',
|
dataIndex: 'processongCount',
|
||||||
// width: 250,
|
// width: 250,
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BoxTitle,
|
BoxTitle,
|
||||||
TableList
|
TableList,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
type: "cpu",
|
type: 'cpu',
|
||||||
queryParams: {
|
queryParams: {
|
||||||
server: undefined,
|
server: undefined,
|
||||||
timer: "1h",
|
timer: 1,
|
||||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||||
},
|
},
|
||||||
serverOptions: [],
|
serverOptions: [],
|
||||||
timerOptions: [
|
timerOptions: [
|
||||||
{label: "1Hours",value: "1h"},
|
{ label: '1Hours', value: 1 },
|
||||||
{label: "2Hours",value: "2h"},
|
{ label: '2Hours', value: 2 },
|
||||||
{label: "3Hours",value: "3h"},
|
{ label: '3Hours', value: 3 },
|
||||||
],
|
],
|
||||||
ranked: {
|
ranked: {
|
||||||
content: null,
|
content: null,
|
||||||
legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"],
|
legend: [],
|
||||||
color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954']
|
color: ['#2d5cd3', '#f4ff7d', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
|
||||||
},
|
},
|
||||||
processCpu: {
|
processCpu: {
|
||||||
content: null,
|
content: null,
|
||||||
legend: ["mysqld.exe","svchost.exe"],
|
legend: ['mysqld.exe', 'svchost.exe'],
|
||||||
color: ['#e5ae2d','#00a8ff']
|
color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
|
||||||
|
xData: [],
|
||||||
|
data: [],
|
||||||
},
|
},
|
||||||
processMenbry: {
|
processMenbry: {
|
||||||
content: null,
|
content: null,
|
||||||
legend: ["mysqld.exe","svchost.exe"],
|
legend: ['mysqld.exe', 'svchost.exe'],
|
||||||
color: ['#9ed24d','#00a8ff']
|
color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
|
||||||
|
xData: [],
|
||||||
|
data: [],
|
||||||
},
|
},
|
||||||
columns,
|
columns,
|
||||||
loading: false,
|
loading: false,
|
||||||
dataSource: [],
|
dataSource: [],
|
||||||
ipagination:{
|
ipagination: {
|
||||||
current: 1,
|
current: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageSizeOptions: ['10', '20', '30'],
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
|
@ -215,342 +240,382 @@ export default {
|
||||||
},
|
},
|
||||||
showQuickJumper: true,
|
showQuickJumper: true,
|
||||||
showSizeChanger: 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.getServerList()
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {}, 0)
|
||||||
this.drawRanked()
|
|
||||||
this.drawProcesCpu()
|
|
||||||
this.drawProcesMenbry()
|
|
||||||
},0)
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
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,
|
moment,
|
||||||
onRangeDateChange(date, dateString) {
|
onRangeDateChange(date, dateString) {
|
||||||
this.queryParams.startDate = dateString[0]
|
this.queryParams.startDate = dateString[0]
|
||||||
this.queryParams.endDate = dateString[1]
|
this.queryParams.endDate = dateString[1]
|
||||||
|
this.getRankProcesses()
|
||||||
},
|
},
|
||||||
filterOption(input, option) {
|
filterOption(input, option) {
|
||||||
return (
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
getServerList() {
|
getServerList() {
|
||||||
getAction("/sysServer/sourceList").then(res => {
|
getAction('/sysServer/sourceList').then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.serverOptions = res.result.map(item => {
|
this.serverOptions = res.result.map((item) => {
|
||||||
return {
|
return {
|
||||||
label: item.sourceName,
|
label: item.sourceName,
|
||||||
value: item.sourceId
|
value: item.hostId,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId
|
let serverId = this.$route.query.serverId
|
||||||
|
this.queryParams.server = '10483'
|
||||||
|
// this.serverOptions.find((item) => item.sourceId === serverId).hostId || res.result[0].hostId
|
||||||
|
this.getRankProcesses()
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning("This operation fails. Contact your system administrator")
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onServerChange(val) {
|
onServerChange(val) {
|
||||||
console.log(val);
|
this.queryParams.server = val
|
||||||
|
this.getRankProcesses()
|
||||||
},
|
},
|
||||||
onTimeChange(val) {
|
onTimeChange(val) {
|
||||||
console.log(val);
|
this.getBeforeHours(val)
|
||||||
|
this.getRankProcesses()
|
||||||
},
|
},
|
||||||
handleCpu() {
|
handleCpu() {
|
||||||
this.type = "cpu"
|
this.type = 'cpu'
|
||||||
|
this.ranked.content.clear()
|
||||||
|
this.drawRanked()
|
||||||
},
|
},
|
||||||
handleMemory() {
|
handleMemory() {
|
||||||
this.type = "memory"
|
this.type = 'memory'
|
||||||
|
this.ranked.content.clear()
|
||||||
|
this.drawRanked()
|
||||||
},
|
},
|
||||||
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 = {
|
let option = {
|
||||||
color: this.ranked.color,
|
color: this.ranked.color,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 25,
|
left: 25,
|
||||||
right: 0,
|
right: 0,
|
||||||
top: 15,
|
top: 15,
|
||||||
bottom: 10,
|
bottom: 10,
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show:false
|
show: false,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(64, 105, 121, 0.5)"
|
color: 'rgba(64, 105, 121, 0.5)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
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: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: "CPU utilization",
|
name: `${this.type == 'cpu' ? 'CPU' : 'Memory'} utilization`,
|
||||||
nameLocation: "middle",
|
nameLocation: 'middle',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#5b9cba",
|
color: '#5b9cba',
|
||||||
fontFamily: "ArialMT",
|
fontFamily: 'ArialMT',
|
||||||
fontSize: 14
|
fontSize: 14,
|
||||||
},
|
},
|
||||||
nameGap: 35,
|
nameGap: 35,
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(64, 105, 121, 0.5)"
|
color: 'rgba(64, 105, 121, 0.5)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(173, 230, 238, 1)"
|
color: 'rgba(173, 230, 238, 1)',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [],
|
||||||
{
|
}
|
||||||
name: 'Baidu',
|
if (this.type === 'cpu') {
|
||||||
|
option.series = this.rankData.cpu_Data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
stack: 'cpu',
|
||||||
stack: 'Search Engine',
|
data: item.data,
|
||||||
// emphasis: {
|
}
|
||||||
// focus: 'series'
|
})
|
||||||
// },
|
} else {
|
||||||
data: [20, 32, 71, 34, 90, 30,92]
|
option.series = this.rankData.memory_Data.map((item) => {
|
||||||
},
|
return {
|
||||||
{
|
name: item.name,
|
||||||
name: 'Google',
|
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
stack: 'Search Engine',
|
stack: 'memory',
|
||||||
// emphasis: {
|
data: item.data,
|
||||||
// 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]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
this.ranked.content.setOption(option)
|
this.ranked.content.setOption(option)
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener('resize', function () {
|
||||||
this.ranked.content.resize();
|
this.ranked.content.resize()
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
drawProcesCpu() {
|
drawProcesCpu() {
|
||||||
this.processCpu.content = echarts.init(document.getElementById("processCpu"))
|
this.processCpu.content = echarts.init(document.getElementById('processCpu'))
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
top: 15,
|
top: 15,
|
||||||
bottom: 10,
|
bottom: 10,
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show:false
|
show: false,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(64, 105, 121, 0.5)"
|
color: 'rgba(64, 105, 121, 0.5)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(173, 230, 238, 1)",
|
color: 'rgba(173, 230, 238, 1)',
|
||||||
formatter: (value,index)=>{
|
formatter: (value, index) => {
|
||||||
if(index === 0) {
|
if (index === 0) {
|
||||||
return ' ' + value;
|
return ' ' + value
|
||||||
}
|
}
|
||||||
if(index === this.xData.length -1) {
|
if (index === this.processCpu.xData.length - 1) {
|
||||||
return value + ' ';
|
return value + ' '
|
||||||
}
|
}
|
||||||
return value
|
return value
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: this.xData
|
data: this.processCpu.xData,
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(64, 105, 121, 0.5)"
|
color: 'rgba(64, 105, 121, 0.5)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(173, 230, 238, 1)"
|
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],
|
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
type: 'line',
|
series: [],
|
||||||
name: 'Eml',
|
}
|
||||||
symbol: 'none',
|
option.series = this.processCpu.data.map((item, index) => {
|
||||||
itemStyle:{ normal:{color:"#ffbf2e"}},
|
return {
|
||||||
areaStyle: {
|
type: 'line',
|
||||||
normal: {
|
name: item.name,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
symbol: 'none',
|
||||||
{ offset: 0, color: "#ffbf2e" },
|
itemStyle: { normal: { color: this.processCpu.color[index] } },
|
||||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
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)
|
this.processCpu.content.setOption(option)
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener('resize', function () {
|
||||||
this.processCpu.content.resize();
|
this.processCpu.content.resize()
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
drawProcesMenbry() {
|
drawProcesMenbry() {
|
||||||
this.processMenbry.content = echarts.init(document.getElementById("menbry"))
|
this.processMenbry.content = echarts.init(document.getElementById('menbry'))
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
top: 15,
|
top: 15,
|
||||||
bottom: 10,
|
bottom: 10,
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show:false
|
show: false,
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(64, 105, 121, 0.5)"
|
color: 'rgba(64, 105, 121, 0.5)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(173, 230, 238, 1)",
|
color: 'rgba(173, 230, 238, 1)',
|
||||||
formatter: (value,index)=>{
|
formatter: (value, index) => {
|
||||||
if(index === 0) {
|
if (index === 0) {
|
||||||
return ' ' + value;
|
return ' ' + value
|
||||||
}
|
}
|
||||||
if(index === this.xData.length -1) {
|
if (index === this.processMenbry.xData.length - 1) {
|
||||||
return value + ' ';
|
return value + ' '
|
||||||
}
|
}
|
||||||
return value
|
return value
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: this.xData
|
data: this.processMenbry.xData,
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "rgba(64, 105, 121, 0.5)"
|
color: 'rgba(64, 105, 121, 0.5)',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "rgba(173, 230, 238, 1)"
|
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],
|
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
type: 'line',
|
series: [],
|
||||||
name: 'Eml',
|
}
|
||||||
symbol: 'none',
|
option.series = this.processMenbry.data.map((item, index) => {
|
||||||
itemStyle:{ normal:{color:"#ffbf2e"}},
|
return {
|
||||||
areaStyle: {
|
type: 'line',
|
||||||
normal: {
|
name: item.name,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
symbol: 'none',
|
||||||
{ offset: 0, color: "#ffbf2e" },
|
itemStyle: { normal: { color: this.processCpu.color[index] } },
|
||||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
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)
|
this.processMenbry.content.setOption(option)
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener('resize', function () {
|
||||||
this.processMenbry.content.resize();
|
this.processMenbry.content.resize()
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
handlePageChange(page, pageSize) {
|
handlePageChange(page, pageSize) {
|
||||||
this.ipagination.current = page
|
this.ipagination.current = page
|
||||||
|
|
@ -562,13 +627,13 @@ export default {
|
||||||
this.ipagination.pageSize = size
|
this.ipagination.pageSize = size
|
||||||
// this.getServerAlarmHistory(this.paramsArg)
|
// this.getServerAlarmHistory(this.paramsArg)
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.service-search{
|
.service-search {
|
||||||
height: 50px;
|
height: 45px;
|
||||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -576,10 +641,10 @@ export default {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
background: rgba(12, 235, 201, 0.05);
|
background: rgba(12, 235, 201, 0.05);
|
||||||
.ant-row-flex{
|
.ant-row-flex {
|
||||||
flex-flow: nowrap;
|
flex-flow: nowrap;
|
||||||
}
|
}
|
||||||
.item-label{
|
.item-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: ArialMT;
|
font-family: ArialMT;
|
||||||
|
|
@ -588,53 +653,53 @@ export default {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
&-btns{
|
&-btns {
|
||||||
&-ant{
|
&-ant {
|
||||||
background: #406979;
|
background: #406979;
|
||||||
border: none;
|
border: none;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
&-active{
|
&-active {
|
||||||
background: #1397a3;
|
background: #1397a3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.service-content{
|
.service-content {
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
&-ranked{
|
&-ranked {
|
||||||
height: 210px;
|
height: 210px;
|
||||||
&-box{
|
&-box {
|
||||||
height: 170px;
|
height: 170px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-center{
|
&-center {
|
||||||
height: 210px;
|
height: 210px;
|
||||||
&-item{
|
&-item {
|
||||||
height: 170px;
|
height: 170px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-table{
|
&-table {
|
||||||
height: calc(100% - 420px);
|
height: calc(100% - 415px);
|
||||||
position: relative;
|
position: relative;
|
||||||
.ant-pagination{
|
.ant-pagination {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.legend-list{
|
.legend-list {
|
||||||
list-style:none;
|
list-style: none;
|
||||||
li{
|
li {
|
||||||
float: left;
|
float: left;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
font-family: MicrosoftYaHei;
|
font-family: MicrosoftYaHei;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #ade6ee;
|
color: #ade6ee;
|
||||||
.li-icon{
|
.li-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user