数据库 instances 模块创建，及monitor和tablespase也面开发
server instances - cpu页面修改
This commit is contained in:
parent
c012736d87
commit
bd886ba220
113
src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
Normal file
113
src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
<template>
|
||||||
|
<div style="width: 100%; height: 100%;">
|
||||||
|
<BoxTitle :title="title"></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", "color", "dataSource"],
|
||||||
|
components: {
|
||||||
|
BoxTitle,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.drawChart()
|
||||||
|
},0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawChart() {
|
||||||
|
let myLine = echarts.init(document.getElementById(`${this.layout}`))
|
||||||
|
this.option = {
|
||||||
|
color:this.color,
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: 15,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)",
|
||||||
|
formatter: (value,index)=>{
|
||||||
|
if(index === 0) {
|
||||||
|
return ' ' + value;
|
||||||
|
}
|
||||||
|
if(index === this.xData.length -1) {
|
||||||
|
return value + ' ';
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: this.xData
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show:true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.5)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
lineStyle: {
|
||||||
|
width: 0.8
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: this.color[0] },
|
||||||
|
{ offset: 1, color: this.color[1] },
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: this.dataSource
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myLine.setOption(this.option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myLine.resize();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
<template>
|
||||||
|
<div class="monitor-search">
|
||||||
|
<a-row type="flex" :gutter="10">
|
||||||
|
<a-col flex="335px">
|
||||||
|
<span class="item-label">Database name</span>
|
||||||
|
<a-select style="width:180px"
|
||||||
|
v-model="queryParams.name"
|
||||||
|
placeholder="select..."
|
||||||
|
:filter-option="filterOption"
|
||||||
|
show-arrow
|
||||||
|
:options="DbOptions"
|
||||||
|
@change="onDbChange"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
:show-time="true"
|
||||||
|
: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">
|
||||||
|
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||||
|
<span style="margin-left: 10px;">
|
||||||
|
Refresh
|
||||||
|
</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||||
|
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
name: undefined,
|
||||||
|
timer: "1h",
|
||||||
|
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||||
|
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
||||||
|
},
|
||||||
|
DbOptions: [],
|
||||||
|
timerOptions: [
|
||||||
|
{label: "1Hours",value: "1h"},
|
||||||
|
{label: "2Hours",value: "2h"},
|
||||||
|
{label: "3Hours",value: "3h"},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.getDbList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
moment,
|
||||||
|
filterOption(input, option) {
|
||||||
|
return (
|
||||||
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
|
);
|
||||||
|
},
|
||||||
|
getDbList() {
|
||||||
|
getAction("/sysDatabase/sourceList").then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.DbOptions = res.result.map(item => {
|
||||||
|
return {
|
||||||
|
label: item.sourceName,
|
||||||
|
value: item.sourceId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.warning("This operation fails. Contact your system administrator")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onDbChange(val) {
|
||||||
|
console.log(val);
|
||||||
|
},
|
||||||
|
onTimeChange(val) {
|
||||||
|
console.log(val);
|
||||||
|
},
|
||||||
|
onRangeDateChange(date, dateString) {
|
||||||
|
this.queryParams.startDate = dateString[0]
|
||||||
|
this.queryParams.endDate = dateString[1]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,15 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div style="height: 100%;">
|
||||||
instances
|
<a-card :bordered="false" style="height:100%;margin-left: 20px;">
|
||||||
|
<a-tabs default-active-key="tableSpace" @change="handleTabChange">
|
||||||
|
<a-tab-pane key="monitor" tab="MONITOR">
|
||||||
|
<Monitor></Monitor>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="tableSpace" tab="TABLESPACE">
|
||||||
|
<TableSpace></TableSpace>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import TableSpace from './tableSpace.vue';
|
||||||
|
import Monitor from './monitor.vue';
|
||||||
}
|
export default {
|
||||||
|
components: {
|
||||||
|
Monitor,
|
||||||
|
TableSpace,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleTabChange(key) {
|
||||||
|
console.log(key);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="less" scoped>
|
||||||
|
@import "~@/assets/less/TabMenu.less";
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
299
src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
Normal file
299
src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
Normal file
|
|
@ -0,0 +1,299 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%;">
|
||||||
|
<ConditionBox></ConditionBox>
|
||||||
|
<div class="monitor-content">
|
||||||
|
<a-row :gutter="10" style="height: auto">
|
||||||
|
<a-col :span="12" style="height: 240px" v-for="(el,i) in chartData" :key="i">
|
||||||
|
<div class="monitor-content-item">
|
||||||
|
<AreaChart
|
||||||
|
:title="el.title"
|
||||||
|
:layout="`area${i}`"
|
||||||
|
:color="el.color"
|
||||||
|
:dataSource="el.data"
|
||||||
|
>
|
||||||
|
</AreaChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<div style="height: auto;margin-top: 15px;padding-right: 10px;">
|
||||||
|
<BoxTitle title="Connect List"></BoxTitle>
|
||||||
|
<a-row :gutter="20" style="height: auto;margin-top: 15px;">
|
||||||
|
<a-col :span="8" v-for="(el,i) in mailData" :key="i">
|
||||||
|
<div class="monitor-content-item-child">
|
||||||
|
<StackedAreaChart
|
||||||
|
:layout="`stackedArea${i}`"
|
||||||
|
:dataSource="el.data"
|
||||||
|
:legendData="el.legends"
|
||||||
|
>
|
||||||
|
</StackedAreaChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div style="height: auto;margin-top: 15px;padding-right: 10px;">
|
||||||
|
<BoxTitle title="Process List"></BoxTitle>
|
||||||
|
<a-row :gutter="20" style="height: auto;margin-top: 15px;">
|
||||||
|
<a-col :span="8" v-for="(el,i) in mailData" :key="i">
|
||||||
|
<div class="monitor-content-item-child">
|
||||||
|
<StackedAreaChart
|
||||||
|
:layout="`stackedArea${i+3}`"
|
||||||
|
:dataSource="el.data"
|
||||||
|
:legendData="el.legends"
|
||||||
|
>
|
||||||
|
</StackedAreaChart>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import BoxTitle from '../../components/boxTitle.vue';
|
||||||
|
import ConditionBox from './conditionBox.vue';
|
||||||
|
import AreaChart from './areaChart.vue';
|
||||||
|
import StackedAreaChart from './stackedAreaChart.vue';
|
||||||
|
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
BoxTitle,
|
||||||
|
ConditionBox,
|
||||||
|
AreaChart,
|
||||||
|
StackedAreaChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
data:[5, 23, 12, 48, 15, 27, 56],
|
||||||
|
chartData: [
|
||||||
|
{
|
||||||
|
title: "Database memory state(Total memory)",
|
||||||
|
color:["rgba(38, 180, 246,1)","rgba(38, 180, 246,0.2)"],
|
||||||
|
data:[5, 23, 12, 48, 15, 27, 56]
|
||||||
|
},{
|
||||||
|
title: "Database user status(Logins per second)",
|
||||||
|
color:["rgba(214, 238, 80,1)","rgba(214, 238, 80,0.2)"],
|
||||||
|
data:[5, 23, 12, 48, 15, 27, 56]
|
||||||
|
},{
|
||||||
|
title: "Database connection number",
|
||||||
|
color:["#ec8929"],
|
||||||
|
color:["rgba(236, 137, 41,1)","rgba(236, 137, 41,0.2)"],
|
||||||
|
data:[5, 23, 12, 48, 15, 27, 56]
|
||||||
|
},{
|
||||||
|
title: "Database connection response time",
|
||||||
|
color:["rgba(84, 95, 213,1)","rgba(84, 95, 213,0.2)"],
|
||||||
|
data:[5, 23, 12, 48, 15, 27, 56]
|
||||||
|
},{
|
||||||
|
title: "Remaining space of the databasce log file",
|
||||||
|
color:["rgba(1, 238, 206,1)","rgba(1, 238, 206,0.2)"],
|
||||||
|
data:[5, 23, 12, 48, 15, 27, 56]
|
||||||
|
},{
|
||||||
|
title: "Database file size",
|
||||||
|
color:["rgba(237, 190, 61,1)","rgba(237, 190, 61,0.2)"],
|
||||||
|
data:[5, 23, 12, 48, 15, 27, 56]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
mailData: [
|
||||||
|
{
|
||||||
|
legends: [
|
||||||
|
{
|
||||||
|
connections: "Max Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Max Used Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Aborted Clients",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Aborted Connects",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Threads Connected",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "New Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'Email1',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},{
|
||||||
|
name: 'Email2',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},{
|
||||||
|
name: 'Email3',
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},{
|
||||||
|
name: 'Email4',
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},{
|
||||||
|
name: 'Email5',
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
legends: [
|
||||||
|
{
|
||||||
|
connections: "Max Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Max Used Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Aborted Clients",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Aborted Connects",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Threads Connected",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "New Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data:[
|
||||||
|
{
|
||||||
|
name: 'Email1',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},{
|
||||||
|
name: 'Email2',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},{
|
||||||
|
name: 'Email3',
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},{
|
||||||
|
name: 'Email4',
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},{
|
||||||
|
name: 'Email5',
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
legends: [
|
||||||
|
{
|
||||||
|
connections: "Max Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Max Used Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Aborted Clients",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Aborted Connects",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "Threads Connected",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},{
|
||||||
|
connections: "New Connections",
|
||||||
|
now: "151.0",
|
||||||
|
min: "151.0",
|
||||||
|
max: "151.0",
|
||||||
|
avg: "151.0"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
data:[
|
||||||
|
{
|
||||||
|
name: 'Email1',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},{
|
||||||
|
name: 'Email2',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},{
|
||||||
|
name: 'Email3',
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},{
|
||||||
|
name: 'Email4',
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},{
|
||||||
|
name: 'Email5',
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.monitor-content{
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
&-item{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 5px 10px 5px 0;
|
||||||
|
}
|
||||||
|
&-item-child{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,166 @@
|
||||||
|
<template>
|
||||||
|
<div style="width: 100%; height: auto">
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-header">
|
||||||
|
<a-row type="flex">
|
||||||
|
<a-col flex="180px">Connections</a-col>
|
||||||
|
<a-col flex="70px">Now</a-col>
|
||||||
|
<a-col flex="70px">Min</a-col>
|
||||||
|
<a-col flex="70px">Max</a-col>
|
||||||
|
<a-col flex="70px">Avg</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div class="legend-list">
|
||||||
|
<a-row type="flex" style="height: 20px;padding: 0 10px;" v-for="(item,i) in legendData" :key="i">
|
||||||
|
<a-col flex="180px" class="legend-list-auto"><span class="legend-list-auto-icon" :style="`background:${color[i]}`"></span>{{ item.connections }}</a-col>
|
||||||
|
<a-col flex="70px">{{ item.now }}</a-col>
|
||||||
|
<a-col flex="70px">{{ item.min }}</a-col>
|
||||||
|
<a-col flex="70px">{{ item.max }}</a-col>
|
||||||
|
<a-col flex="70px">{{ item.avg }}</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 190px" :id="layout"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
props: ["layout", "dataSource", "legendData"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {},
|
||||||
|
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
color:["#a94a3e","#ebbe5e","#269510","#26b4b9","#4e6abf","#893fa3"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.drawChart()
|
||||||
|
},0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawChart() {
|
||||||
|
let myLine = echarts.init(document.getElementById(`${this.layout}`))
|
||||||
|
let series = this.dataSource.map(item => {
|
||||||
|
return {
|
||||||
|
type: 'line',
|
||||||
|
name: item.name,
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
data: item.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.option = {
|
||||||
|
color:this.color,
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: 15,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)",
|
||||||
|
formatter: (value,index)=>{
|
||||||
|
if(index === 0) {
|
||||||
|
return ' ' + value;
|
||||||
|
}
|
||||||
|
if(index === this.xData.length -1) {
|
||||||
|
return value + ' ';
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
data: this.xData
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(115, 191, 255, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show:true,
|
||||||
|
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>
|
||||||
|
.legend{
|
||||||
|
width: 100%;
|
||||||
|
&-header{
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
background: #126b82;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
&-list{
|
||||||
|
width: 100%;
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #ade6ee;
|
||||||
|
&-auto{
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
&-icon{
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-row-flex:nth-child(even){
|
||||||
|
background: #073337;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
151
src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue
Normal file
151
src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%;">
|
||||||
|
<ConditionBox></ConditionBox>
|
||||||
|
<div class="tableSpace-main">
|
||||||
|
<TableList
|
||||||
|
size="middle"
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:list="dataSource"
|
||||||
|
:loading="loading"
|
||||||
|
:pagination="false"
|
||||||
|
:canSelect="false"
|
||||||
|
>
|
||||||
|
<template slot="space" slot-scope="{ text,record}">
|
||||||
|
<!-- <a-progress :percent="text" :strokeWidth="16" /> -->
|
||||||
|
{{ text }}%
|
||||||
|
</template>
|
||||||
|
</TableList>
|
||||||
|
<a-pagination
|
||||||
|
size="small"
|
||||||
|
v-model="ipagination.current"
|
||||||
|
:pageSize="ipagination.pageSize"
|
||||||
|
:page-size-options="ipagination.pageSizeOptions"
|
||||||
|
show-size-changer
|
||||||
|
show-quick-jumper
|
||||||
|
:total="ipagination.total"
|
||||||
|
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||||
|
show-less-items
|
||||||
|
@change="handlePageChange"
|
||||||
|
@showSizeChange="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ConditionBox from './conditionBox.vue';
|
||||||
|
import TableList from '../../components/tableList.vue';
|
||||||
|
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||||
|
const columns = [{
|
||||||
|
title: 'DATABASE',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'dataBase',
|
||||||
|
width: 200,
|
||||||
|
},{
|
||||||
|
title: 'TABLE NAME',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'tableName',
|
||||||
|
width: 200,
|
||||||
|
},{
|
||||||
|
title: 'TABLE ROWS',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'tableRows',
|
||||||
|
width: 200,
|
||||||
|
},{
|
||||||
|
title: 'TABLE SPACE',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'tableSpace',
|
||||||
|
scopedSlots: {
|
||||||
|
customRender: 'space',
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
title: 'DATA SIZE(MB)',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'dataSize',
|
||||||
|
width: 200,
|
||||||
|
},{
|
||||||
|
title: 'INDEX SIZE(MB)',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'indexSize',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ConditionBox,
|
||||||
|
TableList
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
dataSource: [
|
||||||
|
{
|
||||||
|
dataBase: "Energy spectrum",
|
||||||
|
tableName: "table",
|
||||||
|
tableRows: 8368,
|
||||||
|
tableSpace: 68,
|
||||||
|
dataSize: 321,
|
||||||
|
indexSize: 0.0,
|
||||||
|
},{
|
||||||
|
dataBase: "Energy spectrum",
|
||||||
|
tableName: "table",
|
||||||
|
tableRows: 8368,
|
||||||
|
tableSpace: 68,
|
||||||
|
dataSize: 321,
|
||||||
|
indexSize: 0.0,
|
||||||
|
},{
|
||||||
|
dataBase: "Energy spectrum",
|
||||||
|
tableName: "table",
|
||||||
|
tableRows: 8368,
|
||||||
|
tableSpace: 68,
|
||||||
|
dataSize: 321,
|
||||||
|
indexSize: 0.0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
loading: false,
|
||||||
|
ipagination:{
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
showTotal: (total, range) => {
|
||||||
|
const { current, pageSize } = this.ipagination
|
||||||
|
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
|
||||||
|
},
|
||||||
|
showQuickJumper: true,
|
||||||
|
showSizeChanger: true,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePageChange(page, pageSize) {
|
||||||
|
this.ipagination.current = page
|
||||||
|
this.ipagination.pageSize = pageSize
|
||||||
|
this.getDbAlarmHistory(this.paramsArg)
|
||||||
|
},
|
||||||
|
handleSizeChange(current, size) {
|
||||||
|
this.ipagination.current = current
|
||||||
|
this.ipagination.pageSize = size
|
||||||
|
this.getDbAlarmHistory(this.paramsArg)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.tableSpace-main{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ant-pagination{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -291,12 +291,11 @@ export default {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
opacity: 1,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "#0096ff" },
|
{ offset: 0, color: "#0096ff" },
|
||||||
{ offset: 1, color: "rgba(0, 150, 255,0.2)" },
|
{ offset: 1, color: "rgba(0, 150, 255,0.2)" },
|
||||||
]),
|
])
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: [5, 23, 12, 48, 15, 27, 56]
|
data: [5, 23, 12, 48, 15, 27, 56]
|
||||||
}
|
}
|
||||||
|
|
@ -392,12 +391,11 @@ export default {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
opacity: 1,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "#f1e852" },
|
{ offset: 0, color: "#f1e852" },
|
||||||
{ offset: 1, color: "rgba(241, 232, 82,0.2)" },
|
{ offset: 1, color: "rgba(241, 232, 82,0.2)" },
|
||||||
]),
|
])
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: [5, 23, 12, 48, 15, 27, 56]
|
data: [5, 23, 12, 48, 15, 27, 56]
|
||||||
}
|
}
|
||||||
|
|
@ -476,12 +474,11 @@ export default {
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
itemStyle:{ normal:{color:"#00a8ff"}},
|
itemStyle:{ normal:{color:"#00a8ff"}},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
opacity: 1,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "#00a8ff" },
|
{ offset: 0, color: "#00a8ff" },
|
||||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||||
]),
|
])
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: [150, 230, 224, 218, 135, 147, 260],
|
data: [150, 230, 224, 218, 135, 147, 260],
|
||||||
},
|
},
|
||||||
|
|
@ -491,12 +488,11 @@ export default {
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
itemStyle:{ normal:{color:"#73b54b"}},
|
itemStyle:{ normal:{color:"#73b54b"}},
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
opacity: 1,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: "#73b54b" },
|
{ offset: 0, color: "#73b54b" },
|
||||||
{ offset: 1, color: "rgba(255,255,255,0)" },
|
{ offset: 1, color: "rgba(255,255,255,0)" },
|
||||||
]),
|
]),
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user