instances 模块 监控页面开发
This commit is contained in:
parent
72e3776fa2
commit
c419bc3031
BIN
src/assets/images/abnormalAlarm/big.png
Normal file
BIN
src/assets/images/abnormalAlarm/big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -6,6 +6,9 @@
|
||||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="other">
|
||||||
|
<slot name="other"></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -45,5 +48,12 @@
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
.other{
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="height: 100%;">
|
<div style="height: 100%;">
|
||||||
<a-card :bordered="false" style="height:100%;margin-left: 20px;">
|
<a-card :bordered="false" style="height:100%;margin-left: 20px;">
|
||||||
<a-tabs default-active-key="serviceProcess" @change="handleTabChange">
|
<a-tabs default-active-key="monitor" @change="handleTabChange">
|
||||||
<a-tab-pane key="detais" tab="DETAILS">
|
<a-tab-pane key="detais" tab="DETAILS">
|
||||||
<Details></Details>
|
<Details></Details>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
|
|
|
||||||
123
src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
Normal file
123
src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
<template>
|
||||||
|
<div class="line-box">
|
||||||
|
<BoxTitle :title="title">
|
||||||
|
<template slot="other">
|
||||||
|
<img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="">
|
||||||
|
</template>
|
||||||
|
</BoxTitle>
|
||||||
|
<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';
|
||||||
|
export default {
|
||||||
|
props: ["title","layout","dataSource"],
|
||||||
|
components: {
|
||||||
|
BoxTitle,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.drawLine()
|
||||||
|
},0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeSize() {
|
||||||
|
this.$emit("zoom",this.title,this.option)
|
||||||
|
},
|
||||||
|
drawLine() {
|
||||||
|
let myLine = echarts.init(document.getElementById(`${this.layout}`))
|
||||||
|
let series = this.dataSource.map(item => {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
name: item.name,
|
||||||
|
symbol: 'none',
|
||||||
|
data: item.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.option = {
|
||||||
|
color:["#00ff5a","#0096ff","#ffc600"],
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: 35,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: "roundRect",
|
||||||
|
itemHeight: 12, // 图例icon高度
|
||||||
|
itemWidth: 12, // 图例icon宽度
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: "#ade6ee",
|
||||||
|
lineHeight: 12,
|
||||||
|
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
padding:[0,-2,-4,0],
|
||||||
|
}
|
||||||
|
// itemStyle
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)"
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.5)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series
|
||||||
|
};
|
||||||
|
myLine.setOption(this.option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myLine.resize();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.line-box{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,15 +1,384 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div style="height: 100%;">
|
||||||
monitor
|
<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"
|
||||||
|
v-model="queryParams.server"
|
||||||
|
placeholder="select..."
|
||||||
|
:filter-option="filterOption"
|
||||||
|
show-arrow
|
||||||
|
:options="serverOptions"
|
||||||
|
@change="onServerChange"
|
||||||
|
>
|
||||||
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
|
</a-select>
|
||||||
|
</a-col>
|
||||||
|
<a-col flex="265px">
|
||||||
|
<span class="item-label">Time</span>
|
||||||
|
<a-select style="width:180px"
|
||||||
|
v-model="queryParams.timer"
|
||||||
|
placeholder="select..."
|
||||||
|
show-arrow
|
||||||
|
:options="timerOptions"
|
||||||
|
@change="onTimeChange"
|
||||||
|
>
|
||||||
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
|
</a-select>
|
||||||
|
</a-col>
|
||||||
|
<a-col flex="265px">
|
||||||
|
<a-range-picker
|
||||||
|
dropdownClassName="asd"
|
||||||
|
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||||
|
@change="onRangeDateChange"
|
||||||
|
/>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<div class="monitor-search-btns">
|
||||||
|
<a-button class="monitor-search-btns-ant">Create Alert RULES</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="monitor-content">
|
||||||
|
<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"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="Memory Usage"
|
||||||
|
layout="line2"
|
||||||
|
:dataSource="data2"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="System Load"
|
||||||
|
layout="line3"
|
||||||
|
:dataSource="data3"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="Disk Read/Write BPS (Byte/s)"
|
||||||
|
layout="line4"
|
||||||
|
:dataSource="data4"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="Disk IOPS (Count/s)"
|
||||||
|
layout="line5"
|
||||||
|
:dataSource="data5"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="Disk Usage/Lnode Usage"
|
||||||
|
layout="line6"
|
||||||
|
:dataSource="data6"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="Public Bandwidth"
|
||||||
|
layout="line7"
|
||||||
|
:dataSource="data7"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="Lnternal Network Bandwidth (bit/s)"
|
||||||
|
layout="line8"
|
||||||
|
:dataSource="data8"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" style="height: 34%;">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<LineChart
|
||||||
|
title="ECS Concurrent Connections (Count)"
|
||||||
|
layout="line9"
|
||||||
|
:dataSource="data9"
|
||||||
|
@zoom="handelZoom"
|
||||||
|
>
|
||||||
|
</LineChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<a-modal
|
||||||
|
:title="modalTitle"
|
||||||
|
:width="1000"
|
||||||
|
v-model="visible"
|
||||||
|
@cancel="onCancel"
|
||||||
|
>
|
||||||
|
<div class="modal-content" id="common"></div>
|
||||||
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||||
|
import BoxTitle from '../../components/boxTitle.vue';
|
||||||
|
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||||
|
import LineChart from './lineChart.vue';
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
BoxTitle,
|
||||||
|
LineChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
server: undefined,
|
||||||
|
timer: "1h",
|
||||||
|
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||||
|
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
||||||
|
},
|
||||||
|
serverOptions: [],
|
||||||
|
timerOptions: [
|
||||||
|
{label: "1Hours",value: "1h"},
|
||||||
|
{label: "2Hours",value: "2h"},
|
||||||
|
{label: "3Hours",value: "3h"},
|
||||||
|
],
|
||||||
|
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: "Lntranet in Rete",
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Lntranet Out Rete",
|
||||||
|
data: [25, 13, 32, 18, 45, 27, 36]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
data9: [
|
||||||
|
{
|
||||||
|
name: "Lntranet Out Rete",
|
||||||
|
data: [15, 23, 22, 28, 35, 47, 26]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
visible: false,
|
||||||
|
modalTitle: "",
|
||||||
|
myLine: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
// this.drawLine()
|
||||||
|
},0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
moment,
|
||||||
|
filterOption(input, option) {
|
||||||
|
return (
|
||||||
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
|
);
|
||||||
|
},
|
||||||
|
getServerList() {
|
||||||
|
getAction("/sysServer/sourceList").then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.serverOptions = res.result.map(item => {
|
||||||
|
return {
|
||||||
|
label: item.sourceName,
|
||||||
|
value: item.sourceId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.warning("This operation fails. Contact your system administrator")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onServerChange(val) {
|
||||||
|
console.log(val);
|
||||||
|
},
|
||||||
|
onTimeChange(val) {
|
||||||
|
console.log(val);
|
||||||
|
},
|
||||||
|
onRangeDateChange(date, dateString) {
|
||||||
|
this.queryParams.startDate = dateString[0]
|
||||||
|
this.queryParams.endDate = dateString[1]
|
||||||
|
},
|
||||||
|
drawLine(option) {
|
||||||
|
this.myLine = echarts.init(document.getElementById("common"))
|
||||||
|
this.myLine.setOption(option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
this.myLine.resize();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handelZoom(str,option) {
|
||||||
|
this.modalTitle = str
|
||||||
|
this.visible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawLine(option)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.visible = false
|
||||||
|
this.myLine.clear()
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="less" scoped>
|
||||||
|
.monitor-search{
|
||||||
|
height: 50px;
|
||||||
|
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
|
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 10px;
|
||||||
|
background: rgba(12, 235, 201, 0.05);
|
||||||
|
.ant-row-flex{
|
||||||
|
flex-flow: nowrap;
|
||||||
|
}
|
||||||
|
/deep/ .ant-calendar-range-picker-separator{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.item-label{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: ArialMT;
|
||||||
|
color: #ade6ee;
|
||||||
|
line-height: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
&-btns{
|
||||||
|
&-ant{
|
||||||
|
background: #1397a3;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.monitor-content{
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
&-item{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// &-canvas{
|
||||||
|
// width: 100%;
|
||||||
|
// height: calc(100% - 40px);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/.ant-modal-title{
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
/deep/.ant-modal-footer{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal-content{
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user