xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature-Alarm-renpy' of http://git.hivekion.com:3000/xiaoguangbin/AnalysisSystemForRadionuclide_vue into master-dev

Browse Source
This commit is contained in:
orgin 2023-10-07 08:47:50 +08:00
commit b4c027a9cd
6 changed files with 1764 additions and 1273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

679
src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
View File

File diff suppressed because it is too large Load Diff

1193
src/views/abnormalAlarm/serverMonitor/instances/details.vue
View File

File diff suppressed because it is too large Load Diff

86
src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
View File

@ -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: {
dataSource: {
handler: function () {
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.drawLine() this.drawLine()
},0) }, 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%;
} }

349
src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
View File

@ -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: [ data1: {
xData: [],
data: [],
},
data2: {
xData: [],
data: [],
},
data3: {
xData: [],
data: [],
},
data4: {
xData: [],
data: [
{ {
name: "CPU Total", name: 'Disk BPS Read',
data: [150, 230, 224, 218, 135, 147, 260] data: [15, 23, 22, 28, 35, 47, 26],
}
],
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", name: 'Disk BPS Write',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
},
{
name: "Load 15m",
data: [5, 23, 12, 48, 15, 27, 56]
}, },
], ],
data4: [ },
data5: {
xData: [],
data: [
{ {
name: "Disk BPS Read", name: 'Disk IOPS Read',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "Disk BPS Write", name: 'Disk IOPS Write',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
} },
], ],
data5: [ },
data6: {
xData: [],
data: [
{ {
name: "Disk IOPS Read", name: 'Disk Usage Utilization',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "Disk IOPS Write", name: 'Lnode Utilization',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
} },
], ],
data6: [ },
data7: {
xData: [],
data: [
{ {
name: "Disk Usage Utilization", name: 'VPC PublicIP Lnterner in Rate',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "Lnode Utilization", name: 'VPC PublicIP Lnterner Out Rate',
data: [25, 13, 32, 18, 45, 27, 36] data: [25, 13, 32, 18, 45, 27, 36],
} },
], ],
data7: [ },
data8: {
xData: [],
data: [
{ {
name: "VPC PublicIP Lnterner in Rate", name: 'Intranet in Rete',
data: [15, 23, 22, 28, 35, 47, 26] data: [15, 23, 22, 28, 35, 47, 26],
}, },
{ {
name: "VPC PublicIP Lnterner Out Rate", name: 'Intranet Out Rete',
data: [25, 13, 32, 18, 45, 27, 36] 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: [ },
data9: {
xData: [],
data: [
{ {
name: "Intranet Out Rete", name: 'Intranet Out Rete',
data: [15, 23, 22, 28, 35, 47, 26] 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;
} }

575
src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
View File

@ -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) => {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] if (index === 0) {
return ' ' + value
} }
if (index === xData.length - 1) {
return value + ' '
}
return value
},
},
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: [ 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',
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)" },
]),
},
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
} }
] 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: 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: [ 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',
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)" },
]),
},
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
} }
] 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: 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;