alarm 模块db monitor 新增tablespace 页面，table 页面调整
This commit is contained in:
parent
de6e7ef96e
commit
7f13f3d51e
|
|
@ -1,10 +1,13 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<a-card :bordered="false" style="height:100%;margin-left: 20px;">
|
||||
<div style="height: 100%">
|
||||
<a-card :bordered="false" style="height: 100%; margin-left: 20px">
|
||||
<a-tabs default-active-key="monitor" @change="handleTabChange">
|
||||
<a-tab-pane key="monitor" tab="MONITOR">
|
||||
<Monitor></Monitor>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="table" tab="TABLE">
|
||||
<Table></Table>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="tableSpace" tab="TABLESPACE">
|
||||
<TableSpace></TableSpace>
|
||||
</a-tab-pane>
|
||||
|
|
@ -14,22 +17,23 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TableSpace from './tableSpace.vue';
|
||||
import Monitor from './monitor.vue';
|
||||
import Table from './table.vue'
|
||||
import TableSpace from './tableSpace.vue'
|
||||
import Monitor from './monitor.vue'
|
||||
export default {
|
||||
components: {
|
||||
Monitor,
|
||||
Table,
|
||||
TableSpace,
|
||||
},
|
||||
methods: {
|
||||
handleTabChange(key) {
|
||||
console.log(key);
|
||||
console.log(key)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/TabMenu.less";
|
||||
|
||||
@import '~@/assets/less/TabMenu.less';
|
||||
</style>
|
||||
282
src/views/abnormalAlarm/databaseMonitor/instances/table.vue
Normal file
282
src/views/abnormalAlarm/databaseMonitor/instances/table.vue
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
<div class="monitor-search">
|
||||
<a-row type="flex" :gutter="10">
|
||||
<a-col flex="305px">
|
||||
<span class="item-label">DataSource</span>
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="name"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="DbOptions"
|
||||
@change="onDbChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col flex="335px">
|
||||
<span class="item-label">DB Name</span>
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="dbName"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="dbNameOptions"
|
||||
@change="ondbNameChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</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>
|
||||
|
||||
<div class="tableSpace-main">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:canSelect="false"
|
||||
:scroll="{ y: 900 }"
|
||||
>
|
||||
<!-- <template slot="space" slot-scope="{ text }">
|
||||
<div class="space">
|
||||
<div :class="['space-bar', `space-bar-${text > 80 ? 'r' : text > 50 ? 'y' : 'g'}`]">
|
||||
<div
|
||||
:class="['space-bar-progress', `space-bar-progress-${text > 80 ? 'r' : text > 50 ? 'y' : 'g'}`]"
|
||||
:style="{ width: `${2.6 * text}px` }"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="space-text"
|
||||
:style="{ color: text > 80 ? 'red' : text > 50 ? 'yellow' : '', 'margin-left': '30px' }"
|
||||
>
|
||||
{{ text.toFixed(3) }}%
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
</TableList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'TABLE NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'tableName',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: 'TABLE ROWS',
|
||||
align: 'center',
|
||||
dataIndex: 'numRow',
|
||||
width: 200,
|
||||
},
|
||||
// {
|
||||
// title: 'TABLE SPACE',
|
||||
// align: 'center',
|
||||
// dataIndex: 'used',
|
||||
// // 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: {
|
||||
TableList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
name: undefined,
|
||||
dbName: undefined,
|
||||
DbOptions: [],
|
||||
dbNameOptions: [],
|
||||
currId: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
name(newValue, oldValue) {
|
||||
this.currId = newValue
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getDbList()
|
||||
},
|
||||
methods: {
|
||||
filterOption(input, option) {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
getDbList() {
|
||||
getAction('/sysDatabase/sourceList').then((res) => {
|
||||
if (res.success) {
|
||||
this.name = this.$route.query.id || res.result[0].sourceId
|
||||
this.getDbNameList()
|
||||
this.DbOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getDbNameList() {
|
||||
let params = {
|
||||
sourceId: this.name,
|
||||
}
|
||||
getAction('/sysDatabase/dbNames', params).then((res) => {
|
||||
if (res.success) {
|
||||
console.log(res)
|
||||
this.dbNameOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onDbChange(val) {
|
||||
this.name = val
|
||||
this.dbName = undefined
|
||||
this.dataSource = []
|
||||
this.getDbNameList()
|
||||
},
|
||||
ondbNameChange(val) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: this.name,
|
||||
dbName: val,
|
||||
}
|
||||
getAction('/sysDatabase/dbInfo', params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.dataSource = res.result
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</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%);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.space {
|
||||
width: 350px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&-bar {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
&-progress {
|
||||
height: 100%;
|
||||
}
|
||||
&-progress-g {
|
||||
background: url(~@/assets/images/abnormalAlarm/green.png) repeat;
|
||||
}
|
||||
&-progress-y {
|
||||
background: url(~@/assets/images/abnormalAlarm/yellow.png) repeat;
|
||||
}
|
||||
&-progress-r {
|
||||
background: url(~@/assets/images/abnormalAlarm/red.png) repeat;
|
||||
}
|
||||
}
|
||||
&-bar-g {
|
||||
background: url(~@/assets/images/abnormalAlarm/green-bg.png) repeat;
|
||||
}
|
||||
&-bar-y {
|
||||
background: url(~@/assets/images/abnormalAlarm/yellow-bg.png) repeat;
|
||||
}
|
||||
&-bar-r {
|
||||
background: url(~@/assets/images/abnormalAlarm/red-bg.png) repeat;
|
||||
}
|
||||
&-text {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,20 +17,6 @@
|
|||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col flex="335px">
|
||||
<span class="item-label">DB Name</span>
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="dbName"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="dbNameOptions"
|
||||
@change="ondbNameChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="monitor-search-btns">
|
||||
<a-button class="monitor-search-btns-ant">
|
||||
|
|
@ -63,7 +49,7 @@
|
|||
class="space-text"
|
||||
:style="{ color: text > 80 ? 'red' : text > 50 ? 'yellow' : '', 'margin-left': '30px' }"
|
||||
>
|
||||
{{ text.toFixed(3) }}%
|
||||
{{ text }}%
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -74,40 +60,40 @@
|
|||
|
||||
<script>
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import { getAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'TABLE NAME',
|
||||
title: 'SPACE NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'tableName',
|
||||
dataIndex: 'spaceName',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: 'TABLE ROWS',
|
||||
title: 'TOTAL(MB)',
|
||||
align: 'center',
|
||||
dataIndex: 'numRow',
|
||||
dataIndex: 'total',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: 'TABLE SPACE',
|
||||
title: 'FREE(MB)',
|
||||
align: 'center',
|
||||
dataIndex: 'free',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: 'USAGE(MB)',
|
||||
align: 'center',
|
||||
dataIndex: 'usage',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: 'USED',
|
||||
align: 'center',
|
||||
dataIndex: 'used',
|
||||
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: {
|
||||
|
|
@ -119,9 +105,7 @@ export default {
|
|||
dataSource: [],
|
||||
loading: false,
|
||||
name: undefined,
|
||||
dbName: undefined,
|
||||
DbOptions: [],
|
||||
dbNameOptions: [],
|
||||
currId: '',
|
||||
}
|
||||
},
|
||||
|
|
@ -157,15 +141,10 @@ export default {
|
|||
let params = {
|
||||
sourceId: this.name,
|
||||
}
|
||||
getAction('/sysDatabase/dbNames', params).then((res) => {
|
||||
getAction('/sysDatabase/spaceInfo', params).then((res) => {
|
||||
if (res.success) {
|
||||
console.log(res)
|
||||
this.dbNameOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
}
|
||||
})
|
||||
this.dataSource = res.result
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
|
|
@ -173,25 +152,8 @@ export default {
|
|||
},
|
||||
onDbChange(val) {
|
||||
this.name = val
|
||||
this.dbName = undefined
|
||||
this.dataSource = []
|
||||
this.getDbNameList()
|
||||
},
|
||||
ondbNameChange(val) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
sourceId: this.name,
|
||||
dbName: val,
|
||||
}
|
||||
getAction('/sysDatabase/dbInfo', params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.dataSource = res.result
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user