server DB email三个模块的overview 功能联调
This commit is contained in:
parent
52b2beae09
commit
f4292bad10
|
|
@ -87,7 +87,10 @@ export default {
|
|||
this.innerSelectedRowKeys = [key]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dblclick: () => {
|
||||
this.$emit("rowDbclick",record)
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@
|
|||
<a-button class="view-btn" @click="onEdit">
|
||||
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
edit
|
||||
Edit
|
||||
</span>
|
||||
</a-button>
|
||||
<a-button class="view-btn">
|
||||
<a-button class="view-btn" @click="onDelete">
|
||||
<img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Delete
|
||||
</span>
|
||||
</a-button>
|
||||
<a-button class="view-btn">
|
||||
<a-button class="view-btn" @click="getSysDatabase">
|
||||
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Refresh
|
||||
|
|
@ -30,34 +30,37 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="view-main">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="false"
|
||||
@rowClick="onRowClick"
|
||||
>
|
||||
<template slot="status" slot-scope="{record}">
|
||||
<div>
|
||||
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
|
||||
<span :class="[record.online?'status-on':'status-off']">{{ record.online?"Connecting":"Disconnect" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="alarms" slot-scope="{text,record}">
|
||||
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
|
||||
</template>
|
||||
<template slot="cpu" slot-scope="{text,record}">
|
||||
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="memory" slot-scope="{text,record}">
|
||||
<span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="disk" slot-scope="{text,record}">
|
||||
<span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
<div class="view-main-table">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="false"
|
||||
@rowClick="onRowClick"
|
||||
@rowDbclick="onRowDbclick"
|
||||
>
|
||||
<template slot="status" slot-scope="{record}">
|
||||
<div>
|
||||
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
|
||||
<span :class="[record.online?'status-on':'status-off']">{{ record.online?"Connecting":"Disconnect" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="alarms" slot-scope="{text,record}">
|
||||
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
|
||||
</template>
|
||||
<template slot="cpu" slot-scope="{text,record}">
|
||||
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="memory" slot-scope="{text,record}">
|
||||
<span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="disk" slot-scope="{text,record}">
|
||||
<span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
|
|
@ -77,15 +80,73 @@
|
|||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
|
||||
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="DB Username">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'username',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input username!' }],
|
||||
initialVale: this.formVal.username
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="DB Password">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'password',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input DB Password!' }],
|
||||
initialVale: this.formVal.password
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input name!' }],
|
||||
initialVale: this.formVal.name
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="DB Type">
|
||||
<j-dict-select-tag
|
||||
placeholder="请选择数据库类型"
|
||||
dict-code="database_type"
|
||||
v-decorator="[
|
||||
'type',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select a DB Type!' }],
|
||||
initialVale: this.formVal.type
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="DB Port">
|
||||
<a-input-number
|
||||
v-decorator="[
|
||||
'port',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input port!' }],
|
||||
initialVale: this.formVal.port
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Ip Address">
|
||||
<a-input
|
||||
v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
|
||||
v-decorator="[
|
||||
'ipAddress',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input ip address!' }],
|
||||
initialVale: this.formVal.ipAddress
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
|
@ -134,7 +195,7 @@ const columns = [
|
|||
customRender: 'alarms',
|
||||
}
|
||||
},{
|
||||
title: 'CPU UUTILZATION',
|
||||
title: 'CPU UTILIZATION',
|
||||
align: 'left',
|
||||
dataIndex: 'cpuUutilzation',
|
||||
scopedSlots: {
|
||||
|
|
@ -166,7 +227,11 @@ export default {
|
|||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
formVal: {
|
||||
username: "",
|
||||
password: "",
|
||||
name: "",
|
||||
type: undefined,
|
||||
port: "",
|
||||
ipAddress:""
|
||||
},
|
||||
currentId:"",
|
||||
|
|
@ -224,10 +289,45 @@ export default {
|
|||
this.getSysDatabase()
|
||||
},
|
||||
onAdd() {
|
||||
this.isAdd = true
|
||||
this.visible = true
|
||||
},
|
||||
onEdit() {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
getAction("/sysDatabase/findInfo", {id:this.currentId}).then(res => {
|
||||
if (res.success) {
|
||||
this.form.setFieldsValue({
|
||||
username: res.result.username,
|
||||
password: res.result.password,
|
||||
name: res.result.name,
|
||||
type: res.result.type,
|
||||
port: res.result.port,
|
||||
ipAddress: res.result.ipAddress
|
||||
});
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onDelete() {
|
||||
let _this = this
|
||||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/sysDatabase/deleteById", {id:_this.currentId}).then(res => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.getSysDatabase()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
onRowClick(record) {
|
||||
this.currentId = record.id
|
||||
|
|
@ -236,15 +336,15 @@ export default {
|
|||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values);
|
||||
// this.visible = false
|
||||
if (this.isAdd) {
|
||||
postAction("/sysServer/create", values).then(res => {
|
||||
postAction("/sysDatabase/create", values).then(res => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getSysServer()
|
||||
this.getSysDatabase()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.info(res.result.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
|
|
@ -252,13 +352,14 @@ export default {
|
|||
id: this.currentId,
|
||||
...values
|
||||
}
|
||||
httpAction("/sysServer/update", params, "put").then(res => {
|
||||
httpAction("/sysDatabase/update", params, "put").then(res => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getSysServer()
|
||||
this.getSysDatabase()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.info(res.result.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -266,7 +367,11 @@ export default {
|
|||
});
|
||||
},
|
||||
onCancel() {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
},
|
||||
onRowDbclick() {
|
||||
this.$router.push("/alarm/databaseMonitor/instances")
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -305,11 +410,15 @@ export default {
|
|||
}
|
||||
}
|
||||
.view-main{
|
||||
height: calc(100% - 65px);
|
||||
height: calc(100% - 50px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
&-table{
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -350,4 +459,8 @@ export default {
|
|||
/deep/.ant-modal-title{
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ant-input-number{
|
||||
width: 100%;
|
||||
background-color: #03353f !important
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,16 +12,16 @@
|
|||
<a-button class="view-btn" @click="onEdit">
|
||||
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
edit
|
||||
Edit
|
||||
</span>
|
||||
</a-button>
|
||||
<a-button class="view-btn">
|
||||
<a-button class="view-btn" @click="onDelete">
|
||||
<img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Delete
|
||||
</span>
|
||||
</a-button>
|
||||
<a-button class="view-btn">
|
||||
<a-button class="view-btn" @click="getSysEmail">
|
||||
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Refresh
|
||||
|
|
@ -30,36 +30,40 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="view-main">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="false"
|
||||
>
|
||||
<template slot="status" slot-scope="{record}">
|
||||
<div>
|
||||
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
|
||||
<span :class="[record.online?'status-on':'status-off']">{{ record.online?"Connecting":"Disconnect" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="today" slot-scope="{text}">
|
||||
<span class="alarm-text">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="yesterday" slot-scope="{text}">
|
||||
<span class="alarm-text">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="weekly" slot-scope="{text}">
|
||||
<span class="alarm-text">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="alarms" slot-scope="{text,record}">
|
||||
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
|
||||
</template>
|
||||
<template slot="stoer" slot-scope="{text,record}">
|
||||
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
<div class="view-main-table">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="false"
|
||||
@rowClick="onRowClick"
|
||||
@rowDbclick="onRowDbclick"
|
||||
>
|
||||
<template slot="status" slot-scope="{record}">
|
||||
<div>
|
||||
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
|
||||
<span :class="[record.online?'status-on':'status-off']">{{ record.online?"Connecting":"Disconnect" }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="today" slot-scope="{text}">
|
||||
<span class="alarm-text">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="yesterday" slot-scope="{text}">
|
||||
<span class="alarm-text">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="weekly" slot-scope="{text}">
|
||||
<span class="alarm-text">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="alarms" slot-scope="{text,record}">
|
||||
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
|
||||
</template>
|
||||
<template slot="stoer" slot-scope="{text,record}">
|
||||
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
|
|
@ -79,15 +83,91 @@
|
|||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
|
||||
<a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input name!' }],
|
||||
initialVale: this.formVal.name
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Ip Address">
|
||||
<a-form-item label="Email Servier Address">
|
||||
<a-input
|
||||
v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
|
||||
v-decorator="[
|
||||
'emailServerAddress',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input email server address!' }],
|
||||
initialVale: this.formVal.emailServerAddress
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Email Address">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'username',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input email address!' }],
|
||||
initialVale: this.formVal.username
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Password">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'password',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input password!' }],
|
||||
initialVale: this.formVal.password
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Emil Type">
|
||||
<j-dict-select-tag
|
||||
placeholder="请选择邮箱类型"
|
||||
dict-code="email_type"
|
||||
v-decorator="[
|
||||
'emilType',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input your name!' }],
|
||||
initialVale: this.formVal.emilType
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Station">
|
||||
<a-select
|
||||
v-decorator="[
|
||||
'enabled',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select a Station!' }],
|
||||
initialVale: this.formVal.enabled
|
||||
}
|
||||
]"
|
||||
>
|
||||
<a-select-option value="1">
|
||||
Enable
|
||||
</a-select-option>
|
||||
<a-select-option value="0">
|
||||
Disabled
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Port">
|
||||
<a-input-number
|
||||
v-decorator="[
|
||||
'port',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input port!' }],
|
||||
initialVale: this.formVal.port
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
|
@ -168,7 +248,12 @@ export default {
|
|||
form: this.$form.createForm(this),
|
||||
formVal: {
|
||||
name: "",
|
||||
ipAddress:""
|
||||
emailServerAddress: "",
|
||||
username: "",
|
||||
password: "",
|
||||
emilType: "",
|
||||
enabled: "",
|
||||
port: ""
|
||||
},
|
||||
currentId:"",
|
||||
columns,
|
||||
|
|
@ -225,27 +310,64 @@ export default {
|
|||
this.getSysEmail()
|
||||
},
|
||||
onAdd() {
|
||||
this.isAdd = true
|
||||
this.visible = true
|
||||
},
|
||||
onEdit() {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
getAction("/sysEmail/findInfo", {id:this.currentId}).then(res => {
|
||||
if (res.success) {
|
||||
this.form.setFieldsValue({
|
||||
name: res.result.username,
|
||||
emailServerAddress: res.result.emailServerAddress,
|
||||
username: res.result.username,
|
||||
password: res.result.password,
|
||||
emilType: res.result.emilType,
|
||||
enabled: res.result.enabled,
|
||||
port: res.result.port
|
||||
});
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onDelete() {
|
||||
let _this = this
|
||||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/sysEmail/deleteById", {id:_this.currentId}).then(res => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.getSysEmail()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
onRowClick(record) {
|
||||
console.log(record);
|
||||
this.currentId = record.id
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values);
|
||||
// this.visible = false
|
||||
if (this.isAdd) {
|
||||
postAction("/sysServer/create", values).then(res => {
|
||||
postAction("/sysEmail/create", values).then(res => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getSysServer()
|
||||
this.getSysEmail()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.info(res.result.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
|
|
@ -253,13 +375,14 @@ export default {
|
|||
id: this.currentId,
|
||||
...values
|
||||
}
|
||||
httpAction("/sysServer/update", params, "put").then(res => {
|
||||
httpAction("/sysEmail/update", params, "put").then(res => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getSysServer()
|
||||
this.getSysEmail()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.info(res.result.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -267,7 +390,11 @@ export default {
|
|||
});
|
||||
},
|
||||
onCancel() {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
},
|
||||
onRowDbclick() {
|
||||
this.$router.push("/alarm/emailMonitor/instances")
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -306,11 +433,15 @@ export default {
|
|||
}
|
||||
}
|
||||
.view-main{
|
||||
height: calc(100% - 65px);
|
||||
height: calc(100% - 50px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
&-table{
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -351,4 +482,8 @@ export default {
|
|||
/deep/.ant-modal-title{
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ant-input-number{
|
||||
width: 100%;
|
||||
background-color: #03353f !important
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,16 +12,16 @@
|
|||
<a-button class="view-btn" @click="onEdit">
|
||||
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
edit
|
||||
Edit
|
||||
</span>
|
||||
</a-button>
|
||||
<a-button class="view-btn">
|
||||
<a-button class="view-btn" @click="onDelete">
|
||||
<img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Delete
|
||||
</span>
|
||||
</a-button>
|
||||
<a-button class="view-btn">
|
||||
<a-button class="view-btn" @click="getSysServer">
|
||||
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Refresh
|
||||
|
|
@ -30,34 +30,37 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="view-main">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="false"
|
||||
@rowClick="onRowClick"
|
||||
>
|
||||
<template slot="status" slot-scope="{text,record}">
|
||||
<div>
|
||||
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
|
||||
<span :class="[record.online?'status-on':'status-off']">{{ text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="alarms" slot-scope="{text,record}">
|
||||
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
|
||||
</template>
|
||||
<template slot="cpu" slot-scope="{text,record}">
|
||||
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="memory" slot-scope="{text,record}">
|
||||
<span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="disk" slot-scope="{text,record}">
|
||||
<span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
<div class="view-main-table">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:pagination="false"
|
||||
@rowClick="onRowClick"
|
||||
@rowDbclick="onRowDbclick"
|
||||
>
|
||||
<template slot="status" slot-scope="{text,record}">
|
||||
<div>
|
||||
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
|
||||
<span :class="[record.online?'status-on':'status-off']">{{ text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="alarms" slot-scope="{text,record}">
|
||||
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
|
||||
</template>
|
||||
<template slot="cpu" slot-scope="{text,record}">
|
||||
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="memory" slot-scope="{text,record}">
|
||||
<span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
<template slot="disk" slot-scope="{text,record}">
|
||||
<span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
|
|
@ -80,12 +83,24 @@
|
|||
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input name!' }],
|
||||
initialVale: this.formVal.name
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Ip Address">
|
||||
<a-input
|
||||
v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
|
||||
v-decorator="[
|
||||
'ipAddress',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input ip address!' }],
|
||||
initialVale: this.formVal.ipAddress
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
|
@ -126,7 +141,7 @@ const columns = [
|
|||
customRender: 'alarms',
|
||||
}
|
||||
},{
|
||||
title: 'CPU UUTILZATION',
|
||||
title: 'CPU UTILIZATION',
|
||||
align: 'left',
|
||||
dataIndex: 'cpuUutilzation',
|
||||
scopedSlots: {
|
||||
|
|
@ -216,10 +231,41 @@ export default {
|
|||
this.getSysServer()
|
||||
},
|
||||
onAdd() {
|
||||
this.isAdd = true
|
||||
this.visible = true
|
||||
},
|
||||
onEdit() {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
getAction("/sysServer/findInfo", {id:this.currentId}).then(res => {
|
||||
if (res.success) {
|
||||
this.form.setFieldsValue({
|
||||
name: res.result.name,
|
||||
ipAddress: res.result.ipAddress
|
||||
});
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onDelete() {
|
||||
let _this = this
|
||||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/sysServer/deleteById", {id:_this.currentId}).then(res => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.getSysServer()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
},
|
||||
onRowClick(record) {
|
||||
this.currentId = record.id
|
||||
|
|
@ -228,10 +274,10 @@ export default {
|
|||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values);
|
||||
// this.visible = false
|
||||
if (this.isAdd) {
|
||||
postAction("/sysServer/create", values).then(res => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getSysServer()
|
||||
|
|
@ -246,6 +292,7 @@ export default {
|
|||
}
|
||||
httpAction("/sysServer/update", params, "put").then(res => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.getSysServer()
|
||||
|
|
@ -258,7 +305,11 @@ export default {
|
|||
});
|
||||
},
|
||||
onCancel() {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
},
|
||||
onRowDbclick() {
|
||||
this.$router.push("/alarm/serverMonitor/instances")
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -297,11 +348,15 @@ export default {
|
|||
}
|
||||
}
|
||||
.view-main{
|
||||
height: calc(100% - 65px);
|
||||
height: calc(100% - 50px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
&-table{
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user