server 服务器模块，监控项页面接口调试
This commit is contained in:
任珮宇
parent
11d8d0bd4d
commit
b69d9d86fd
|
|
@ -2,131 +2,135 @@
|
|||
<div class="line-box">
|
||||
<BoxTitle :title="title">
|
||||
<template slot="other">
|
||||
<img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="">
|
||||
<img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="" />
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div style="width: 100%;height: calc(100% - 40px);" :id="layout"></div>
|
||||
<div style="width: 100%; height: calc(100% - 40px)" :id="layout"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
export default {
|
||||
props: ["title","layout","dataSource"],
|
||||
props: ['title', 'layout', 'dataSource', 'xData'],
|
||||
components: {
|
||||
BoxTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawLine()
|
||||
},0)
|
||||
})
|
||||
watch: {
|
||||
dataSource: {
|
||||
handler: function () {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawLine()
|
||||
}, 0)
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeSize() {
|
||||
this.$emit("zoom",this.title,this.option)
|
||||
this.$emit('zoom', this.title, this.option)
|
||||
},
|
||||
drawLine() {
|
||||
let myLine = echarts.init(document.getElementById(`${this.layout}`))
|
||||
let series = this.dataSource.map(item => {
|
||||
let series = this.dataSource.map((item) => {
|
||||
return {
|
||||
type: 'line',
|
||||
name: item.name,
|
||||
symbol: 'none',
|
||||
data: item.data
|
||||
data: item.data,
|
||||
}
|
||||
})
|
||||
this.option = {
|
||||
color: ["#00ff5a", "#0096ff", "#ffc600"],
|
||||
color: ['#00ff5a', '#0096ff', '#ffc600'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 35,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
icon: "roundRect",
|
||||
icon: 'roundRect',
|
||||
itemHeight: 12, // 图例icon高度
|
||||
itemWidth: 12, // 图例icon宽度
|
||||
top: 0,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: "#ade6ee",
|
||||
color: '#ade6ee',
|
||||
lineHeight: 12,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
},
|
||||
padding:[0,-2,-4,0],
|
||||
}
|
||||
padding: [0, -2, -4, 0],
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
formatter: (value,index)=>{
|
||||
if(index === 0) {
|
||||
return ' ' + value;
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
formatter: (value, index) => {
|
||||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if(index === this.xData.length -1) {
|
||||
return value + ' ';
|
||||
if (index === this.xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
data: this.xData || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show:true,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
color: 'rgba(115, 191, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series
|
||||
};
|
||||
series,
|
||||
}
|
||||
myLine.setOption(this.option)
|
||||
window.addEventListener("resize", function () {
|
||||
myLine.resize();
|
||||
window.addEventListener('resize', function () {
|
||||
myLine.resize()
|
||||
})
|
||||
},
|
||||
},
|
||||
|
|
@ -134,7 +138,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.line-box{
|
||||
.line-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="monitor-search">
|
||||
<a-row type="flex" :gutter="10">
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Server</span>
|
||||
<a-select style="width:180px"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.server"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
|
|
@ -19,7 +20,8 @@
|
|||
</a-col>
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Time</span>
|
||||
<a-select style="width:180px"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.timer"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
|
|
@ -43,101 +45,110 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="monitor-content">
|
||||
<a-row :gutter="[20,15]" style="height: 100%;">
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="CPU utilizatior"
|
||||
layout="line1"
|
||||
:dataSource="data1"
|
||||
:xData="data1.xData"
|
||||
:dataSource="data1.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="Memory Usage"
|
||||
layout="line2"
|
||||
:dataSource="data2"
|
||||
:xData="data2.xData"
|
||||
:dataSource="data2.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
<LineChart
|
||||
title="System Load"
|
||||
layout="line3"
|
||||
:dataSource="data3"
|
||||
:xData="data3.xData"
|
||||
:dataSource="data3.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="Disk Read/Write BPS (Byte/s)"
|
||||
layout="line4"
|
||||
:dataSource="data4"
|
||||
:xData="data4.xData"
|
||||
:dataSource="data4.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="Disk IOPS (Count/s)"
|
||||
layout="line5"
|
||||
:dataSource="data5"
|
||||
:xData="data5.xData"
|
||||
:dataSource="data5.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="Disk Usage/Lnode Usage"
|
||||
layout="line6"
|
||||
:dataSource="data6"
|
||||
:xData="data6.xData"
|
||||
:dataSource="data6.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="Public Bandwidth"
|
||||
layout="line7"
|
||||
:dataSource="data7"
|
||||
:xData="data7.xData"
|
||||
:dataSource="data7.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="Internal Network Bandwidth (bit/s)"
|
||||
layout="line8"
|
||||
:dataSource="data8"
|
||||
:xData="data8.xData"
|
||||
:dataSource="data8.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8" style="height: 34%;">
|
||||
<a-col :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
title="ECS Concurrent Connections (Count)"
|
||||
layout="line9"
|
||||
:dataSource="data9"
|
||||
:xData="data9.xData"
|
||||
:dataSource="data9.data"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
|
|
@ -145,12 +156,7 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="modalTitle"
|
||||
:width="1200"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-modal :title="modalTitle" :width="1200" v-model="visible" @cancel="onCancel">
|
||||
<div class="modal-content" id="common"></div>
|
||||
</a-modal>
|
||||
<CreateRules
|
||||
|
|
@ -165,122 +171,127 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import moment from 'moment'
|
||||
import * as echarts from 'echarts'
|
||||
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 LineChart from './lineChart.vue';
|
||||
import CreateRules from './createRules.vue';
|
||||
import LineChart from './lineChart.vue'
|
||||
import CreateRules from './createRules.vue'
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
LineChart,
|
||||
CreateRules
|
||||
CreateRules,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currId:"",
|
||||
currId: '',
|
||||
visible_rule: false,
|
||||
currLabel:"",
|
||||
currLabel: '',
|
||||
queryParams: {
|
||||
server: undefined,
|
||||
timer: 1,
|
||||
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: [],
|
||||
timerOptions: [
|
||||
{label: "1Hours",value: 1},
|
||||
{label: "2Hours",value: 2},
|
||||
{label: "3Hours",value: 3},
|
||||
{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]
|
||||
}
|
||||
{ label: '1Hours', value: 1 },
|
||||
{ label: '2Hours', value: 2 },
|
||||
{ label: '3Hours', value: 3 },
|
||||
{ label: 'user-defined', value: 0 },
|
||||
],
|
||||
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,
|
||||
modalTitle: "",
|
||||
myLine: null
|
||||
modalTitle: '',
|
||||
myLine: null,
|
||||
MonitorItem: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -290,9 +301,85 @@ export default {
|
|||
this.getServerList()
|
||||
},
|
||||
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) {
|
||||
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.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
|
|
@ -303,72 +390,74 @@ export default {
|
|||
this.visible_rule = false
|
||||
},
|
||||
handleOk(params) {
|
||||
postAction("/alarmRule/create", params).then(res => {
|
||||
postAction('/alarmRule/create', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.visible_rule = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
moment,
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
getServerList() {
|
||||
getAction("/sysServer/sourceList").then(res => {
|
||||
getAction('/sysServer/sourceList').then((res) => {
|
||||
if (res.success) {
|
||||
this.serverOptions = res.result.map(item => {
|
||||
this.serverOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
value: item.sourceId,
|
||||
}
|
||||
})
|
||||
this.currId = this.$route.query.serverId || res.result[0].sourceId
|
||||
if (this.$route.query.serverId) {
|
||||
let currOption = this.serverOptions.find(item => {
|
||||
let currOption = this.serverOptions.find((item) => {
|
||||
return item.value === this.$route.query.serverId
|
||||
})
|
||||
this.currLabel = currOption.label
|
||||
this.queryParams.server = {
|
||||
key: this.$route.query.serverId,
|
||||
label:this.currLabel
|
||||
label: this.currLabel,
|
||||
}
|
||||
} else {
|
||||
this.currLabel = res.result[0].sourceName
|
||||
this.queryParams.server = {
|
||||
key: res.result[0].sourceId,
|
||||
label:this.currLabel
|
||||
label: this.currLabel,
|
||||
}
|
||||
}
|
||||
this.getMonitorItemId()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onServerChange(val) {
|
||||
this.currId = val.key
|
||||
this.currLabel = val.label
|
||||
this.getMonitorItemId()
|
||||
},
|
||||
onTimeChange(val) {
|
||||
this.getBeforeHours(val)
|
||||
this.getMonitorData()
|
||||
},
|
||||
onRangeDateChange(date, dateString) {
|
||||
this.queryParams.timer = 0
|
||||
this.queryParams.startDate = dateString[0]
|
||||
this.queryParams.endDate = dateString[1]
|
||||
this.getMonitorData()
|
||||
},
|
||||
drawLine(option) {
|
||||
this.myLine = echarts.init(document.getElementById("common"))
|
||||
this.myLine = echarts.init(document.getElementById('common'))
|
||||
this.myLine.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.myLine.resize();
|
||||
window.addEventListener('resize', function () {
|
||||
this.myLine.resize()
|
||||
})
|
||||
},
|
||||
handelZoom(str,option) {
|
||||
handelZoom(str, option) {
|
||||
this.modalTitle = str
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -378,13 +467,13 @@ export default {
|
|||
onCancel() {
|
||||
this.visible = false
|
||||
this.myLine.clear()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-search{
|
||||
.monitor-search {
|
||||
height: 50px;
|
||||
border-top: 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;
|
||||
padding: 0 10px;
|
||||
background: rgba(12, 235, 201, 0.05);
|
||||
.ant-row-flex{
|
||||
.ant-row-flex {
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
/deep/ .ant-calendar-range-picker-separator{
|
||||
/deep/ .ant-calendar-range-picker-separator {
|
||||
color: white;
|
||||
}
|
||||
.item-label{
|
||||
.item-label {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
|
|
@ -408,18 +497,18 @@ export default {
|
|||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&-btns{
|
||||
&-ant{
|
||||
&-btns {
|
||||
&-ant {
|
||||
background: #1397a3;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.monitor-content{
|
||||
.monitor-content {
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
&-item{
|
||||
&-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// &-canvas{
|
||||
|
|
@ -428,13 +517,13 @@ export default {
|
|||
// }
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
/deep/.ant-modal-footer{
|
||||
/deep/.ant-modal-footer {
|
||||
display: none;
|
||||
}
|
||||
.modal-content{
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user