Merge branch 'master-dev' of http://git.hivekion.com:3000/xiaoguangbin/AnalysisSystemForRadionuclide_vue into master-dev
This commit is contained in:
xiaoguangbin
commit
ce20269bbe
|
|
@ -1,26 +1,26 @@
|
|||
<template>
|
||||
<div style="height: 100%;overflow: hidden;">
|
||||
<div style="height: 100%; overflow: hidden">
|
||||
<div class="group-header">
|
||||
<a-button class="group-add" @click="showModal">
|
||||
<img class="icon-add" src="@/assets/images/global/add.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Add Contact Group
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Add Contact Group </span>
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="group-content">
|
||||
<a-spin :spinning="spinning">
|
||||
<a-collapse :activeKey="activeKey" :bordered="false">
|
||||
<a-collapse-panel :key="item.id" :style="customStyle" v-for="item in contactGroups" >
|
||||
<a-collapse-panel :key="item.id" :style="customStyle" v-for="item in contactGroups">
|
||||
<template slot="header">
|
||||
{{ item.name }}
|
||||
<span class="header-sub">Create Date: {{ item.createTime }} , Number of people: {{ item.personNumber }}</span>
|
||||
<span class="header-sub"
|
||||
>Create Date: {{ item.createTime }} , Number of people: {{ item.personNumber }}</span
|
||||
>
|
||||
</template>
|
||||
<template slot="extra">
|
||||
<a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
|
||||
<img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
|
||||
</a-button>
|
||||
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click.stop="deleteGroup(item.id)">
|
||||
<a-button class="actions" style="margin-right: 15px" shape="circle" @click.stop="deleteGroup(item.id)">
|
||||
<img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
|
||||
</a-button>
|
||||
</template>
|
||||
|
|
@ -33,15 +33,25 @@
|
|||
:canSelect="false"
|
||||
:scroll="{ y: 200 }"
|
||||
>
|
||||
<template slot="name" slot-scope="{text}">
|
||||
<img src="@/assets/images/abnormalAlarm/user.png" alt=""><span style="margin-left: 8px;padding-top: 2px;">{{ text }}</span>
|
||||
<template slot="name" slot-scope="{ text }">
|
||||
<img src="@/assets/images/abnormalAlarm/user.png" alt="" /><span
|
||||
style="margin-left: 8px; padding-top: 2px"
|
||||
>{{ text }}</span
|
||||
>
|
||||
</template>
|
||||
<template slot="role" slot-scope="{record}">
|
||||
<span v-for="(role,index) in record.roles" :key="role.id">{{ role.roleName }}<i v-if="index!=record.roles.length-1">,</i></span>
|
||||
<template slot="role" slot-scope="{ record }">
|
||||
<span v-for="(role, index) in record.roles" :key="role.id"
|
||||
>{{ role.roleName }}<i v-if="index != record.roles.length - 1">,</i></span
|
||||
>
|
||||
</template>
|
||||
|
||||
<template slot="action" slot-scope="{record}">
|
||||
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteUser(item.id, record.id)">
|
||||
|
||||
<template slot="action" slot-scope="{ record }">
|
||||
<a-button
|
||||
class="actions"
|
||||
style="margin-right: 15px"
|
||||
shape="circle"
|
||||
@click="deleteUser(item.id, record.id)"
|
||||
>
|
||||
<img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
|
||||
</a-button>
|
||||
</template>
|
||||
|
|
@ -49,69 +59,71 @@
|
|||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-spin>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="page.currentPage"
|
||||
v-model="page.currentPage"
|
||||
:pageSize="page.pageSize"
|
||||
:page-size-options="page.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="page.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${page.currentPage} / ${Math.ceil(total / page.pageSize)}`"
|
||||
show-less-items
|
||||
:show-total="
|
||||
(total, range) => `Total ${total} items Page ${page.currentPage} / ${Math.ceil(total / page.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'"
|
||||
:width="845"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'"
|
||||
:width="845"
|
||||
:maskClosable="false"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
destroy-on-close
|
||||
>
|
||||
<!-- <a-spin :spinning="false"> -->
|
||||
<div class="group-assign">
|
||||
<a-transfer
|
||||
:dataSource="userList"
|
||||
:target-keys="targetKeys"
|
||||
:render="item => item.title"
|
||||
:operations="['Assign', 'Remove']"
|
||||
:titles="['All Users', 'Contact Group']"
|
||||
@change="handleChange"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<div class="group-assign">
|
||||
<a-transfer
|
||||
:dataSource="userList"
|
||||
:target-keys="targetKeys"
|
||||
:render="(item) => item.title"
|
||||
:operations="['Assign', 'Remove']"
|
||||
:titles="['All Users', 'Contact Group']"
|
||||
@change="handleChange"
|
||||
@search="handleSearch"
|
||||
>
|
||||
</a-transfer>
|
||||
<!-- 穿梭框右上方搜索 -->
|
||||
<div class="group-name">
|
||||
|
||||
<!-- <label>Group Name</label>
|
||||
<!-- 穿梭框右上方搜索 -->
|
||||
<div class="group-name">
|
||||
<!-- <label>Group Name</label>
|
||||
<a-input :value="groupName" placeholder="Basic usage" @change="setGroupName" /> -->
|
||||
<a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
|
||||
<a-form-item label="Group Name">
|
||||
<a-input
|
||||
v-decorator="['name', { rules: [{ required: true, message: 'The group name is mandatory' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 穿梭框右上方搜索结束 -->
|
||||
<a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
|
||||
<a-form-item label="Group Name">
|
||||
<a-input
|
||||
v-decorator="['name', { rules: [{ required: true, message: 'The group name is mandatory' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 穿梭框右上方搜索结束 -->
|
||||
</div>
|
||||
<!-- </a-spin> -->
|
||||
<template slot="footer">
|
||||
<slot name="custom-footer"></slot>
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="handleOk" >Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<slot name="custom-footer"></slot>
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="handleOk">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NAME',
|
||||
|
|
@ -119,7 +131,7 @@ const columns = [
|
|||
dataIndex: 'username',
|
||||
scopedSlots: {
|
||||
customRender: 'name',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'ROLE',
|
||||
|
|
@ -132,12 +144,12 @@ const columns = [
|
|||
{
|
||||
title: 'Phone',
|
||||
align: 'left',
|
||||
dataIndex: 'telephone'
|
||||
dataIndex: 'telephone',
|
||||
},
|
||||
{
|
||||
title: 'E-MAIL',
|
||||
align: 'left',
|
||||
dataIndex: 'email'
|
||||
dataIndex: 'email',
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
|
|
@ -146,31 +158,30 @@ const columns = [
|
|||
scopedSlots: {
|
||||
customRender: 'action',
|
||||
},
|
||||
}
|
||||
},
|
||||
]
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey:"",
|
||||
spinning:false,
|
||||
activeKey: '',
|
||||
spinning: false,
|
||||
page: {
|
||||
currentPage:1,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
total:0
|
||||
total: 0,
|
||||
},
|
||||
contactGroups:[],
|
||||
isAdd:true,
|
||||
contactGroups: [],
|
||||
isAdd: true,
|
||||
userList: [],
|
||||
groupList: [],
|
||||
columns,
|
||||
visible: false,
|
||||
customStyle:
|
||||
'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden',
|
||||
customStyle: 'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden',
|
||||
targetKeys: [],
|
||||
groupName: "",
|
||||
currGroupId: "",
|
||||
form: this.$form.createForm(this)
|
||||
groupName: '',
|
||||
currGroupId: '',
|
||||
form: this.$form.createForm(this),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -192,21 +203,21 @@ export default {
|
|||
this.spinning = true
|
||||
let params = {
|
||||
pageNo: this.page.currentPage,
|
||||
pageSize:this.page.pageSize
|
||||
pageSize: this.page.pageSize,
|
||||
}
|
||||
getAction("/alarmContactGroup/findPage", params).then(res => {
|
||||
getAction('/alarmContactGroup/findPage', params).then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.contactGroups = res.result.records
|
||||
this.activeKey = this.contactGroups[0].id
|
||||
this.page.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
editGroup(id) {
|
||||
getAction("/alarmContactGroup/findInfo", {id}).then(res => {
|
||||
getAction('/alarmContactGroup/findInfo', { id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.visible = true
|
||||
this.isAdd = false
|
||||
|
|
@ -214,26 +225,26 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue({
|
||||
name: res.result.name,
|
||||
});
|
||||
})
|
||||
})
|
||||
this.targetKeys = res.result.userIds
|
||||
this.currGroupId = res.result.id
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getAllUser() {
|
||||
getAction("sys/user/list").then(res => {
|
||||
getAction('sys/user/list').then((res) => {
|
||||
if (res.success) {
|
||||
this.userList = res.result.records.map(item => {
|
||||
this.userList = res.result.records.map((item) => {
|
||||
return {
|
||||
key: item.id,
|
||||
title:item.username
|
||||
title: item.username,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -241,23 +252,23 @@ export default {
|
|||
// this.groupName = e.target.value
|
||||
// },
|
||||
handleChange(targetKeys, direction, moveKeys) {
|
||||
console.log(targetKeys, direction, moveKeys);
|
||||
this.targetKeys= targetKeys;
|
||||
console.log(targetKeys, direction, moveKeys)
|
||||
this.targetKeys = targetKeys
|
||||
},
|
||||
handleOk() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (this.targetKeys.length>0) {
|
||||
if (this.targetKeys.length > 0) {
|
||||
if (this.isAdd) {
|
||||
this.createContactGroup(values.name)
|
||||
} else {
|
||||
this.updateContactGroup(values.name)
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("Please select User")
|
||||
this.$message.warning('Please select User')
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.visible = false
|
||||
|
|
@ -265,33 +276,33 @@ export default {
|
|||
updateContactGroup(name) {
|
||||
let params = {
|
||||
name,
|
||||
description: "",
|
||||
description: '',
|
||||
userIds: this.targetKeys,
|
||||
id:this.currGroupId
|
||||
id: this.currGroupId,
|
||||
}
|
||||
httpAction("/alarmContactGroup/update", params, "put").then(res => {
|
||||
httpAction('/alarmContactGroup/update', params, 'put').then((res) => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getAlarmGroup()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
createContactGroup(name) {
|
||||
let params = {
|
||||
name,
|
||||
description: "",
|
||||
userIds:this.targetKeys,
|
||||
description: '',
|
||||
userIds: this.targetKeys,
|
||||
}
|
||||
postAction("/alarmContactGroup/create", params).then(res => {
|
||||
postAction('/alarmContactGroup/create', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getAlarmGroup()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -300,50 +311,50 @@ export default {
|
|||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/alarmContactGroup/deleteById", {id}).then(res => {
|
||||
deleteAction('/alarmContactGroup/deleteById', { id }).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.$message.success('success')
|
||||
_this.getAlarmGroup()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
_this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
console.log('Cancel')
|
||||
},
|
||||
class: 'test',
|
||||
});
|
||||
})
|
||||
},
|
||||
deleteUser(id,userId) {
|
||||
deleteUser(id, userId) {
|
||||
let _this = this
|
||||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/alarmContactGroup/deleteUserById", {id,userId}).then(res => {
|
||||
deleteAction('/alarmContactGroup/deleteUserById', { id, userId }).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.$message.success('success')
|
||||
_this.getAlarmGroup()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
_this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
}
|
||||
});
|
||||
console.log('Cancel')
|
||||
},
|
||||
})
|
||||
},
|
||||
handleSearch(dir, value) {
|
||||
console.log('search:', dir, value);
|
||||
console.log('search:', dir, value)
|
||||
},
|
||||
showModal() {
|
||||
this.targetKeys = []
|
||||
this.groupName = ""
|
||||
this.groupName = ''
|
||||
this.form.setFieldsValue({
|
||||
name: "",
|
||||
});
|
||||
this.visible = true;
|
||||
name: '',
|
||||
})
|
||||
this.visible = true
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -357,7 +368,7 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
.group-header{
|
||||
.group-header {
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
|
|
@ -366,24 +377,24 @@ export default {
|
|||
align-items: center;
|
||||
padding: 0 10px;
|
||||
background: rgba(12, 235, 201, 0.05);
|
||||
.group-add{
|
||||
.group-add {
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
box-shadow: 0px 1px 1px 0px #000000
|
||||
box-shadow: 0px 1px 1px 0px #000000;
|
||||
}
|
||||
}
|
||||
.group-content{
|
||||
.group-content {
|
||||
height: calc(100% - 65px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
.ant-spin-nested-loading{
|
||||
.ant-spin-nested-loading {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
.header-sub{
|
||||
.header-sub {
|
||||
margin-left: 20px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 16px;
|
||||
|
|
@ -393,15 +404,15 @@ export default {
|
|||
// height: calc(100% - 30px);
|
||||
// overflow: auto;
|
||||
// }
|
||||
.actions{
|
||||
.actions {
|
||||
background: none;
|
||||
border: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.split-float:last-child{
|
||||
.split-float:last-child {
|
||||
display: none;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
|
|
@ -409,27 +420,27 @@ export default {
|
|||
}
|
||||
}
|
||||
::v-deep {
|
||||
.ant-collapse-header{
|
||||
.ant-collapse-header {
|
||||
height: 50px;
|
||||
background-color: rgba(13, 109, 118,0.2);
|
||||
background-color: rgba(13, 109, 118, 0.2);
|
||||
font-family: ArialMT;
|
||||
color: #fff !important;
|
||||
line-height: 50px !important;
|
||||
padding-left: 35px !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
.ant-collapse-content-box{
|
||||
.ant-collapse-content-box {
|
||||
padding: 15px !important;
|
||||
}
|
||||
.ant-modal-title{
|
||||
.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ant-form-item-label > label{
|
||||
.ant-form-item-label > label {
|
||||
font-family: ArialMT;
|
||||
color: #5b9cba;
|
||||
}
|
||||
}
|
||||
.group-assign{
|
||||
.group-assign {
|
||||
position: relative;
|
||||
width: 690px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -504,32 +515,32 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-header{
|
||||
.ant-transfer-list-header {
|
||||
position: relative;
|
||||
.ant-checkbox-wrapper{
|
||||
.ant-checkbox-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-content-item{
|
||||
.ant-transfer-list-content-item {
|
||||
position: relative;
|
||||
&::before{
|
||||
content: '';
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(~@/assets/images/abnormalAlarm/user.png) no-repeat;
|
||||
background: url(~@/assets/images/abnormalAlarm/user.png) no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.ant-checkbox-wrapper{
|
||||
.ant-checkbox-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-content-item-text{
|
||||
.ant-transfer-list-content-item-text {
|
||||
padding-left: 22px;
|
||||
}
|
||||
}
|
||||
|
|
@ -549,12 +560,12 @@ export default {
|
|||
user-select: none;
|
||||
}
|
||||
}
|
||||
.transfer-left-item{
|
||||
.transfer-left-item {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
&-checkBox{
|
||||
&-checkBox {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,26 +1,25 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="rules-header">
|
||||
<a-row type="flex" :gutter="10">
|
||||
<a-col flex="190px">
|
||||
<a-button class="rules-add" @click="handleAdd">
|
||||
<img class="icon-add" src="@/assets/images/global/add.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Create Alarm Rule
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Create Alarm Rule </span>
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Stations</span>
|
||||
<a-select style="width:180px"
|
||||
v-model="queryParams.station"
|
||||
mode="multiple"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.station"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
:maxTagCount="1"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="stationOptions"
|
||||
:options="stationOptions"
|
||||
@change="onStationChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -28,23 +27,20 @@
|
|||
</a-col>
|
||||
<a-col flex="294px">
|
||||
<span class="item-label">Sources</span>
|
||||
<DicSelect
|
||||
v-model="queryParams.source"
|
||||
placeholder="select..."
|
||||
dictCode="alarm_analyse_rule_source"
|
||||
/>
|
||||
<DicSelect v-model="queryParams.source" placeholder="select..." dictCode="alarm_analyse_rule_source" />
|
||||
</a-col>
|
||||
<a-col flex="275px">
|
||||
<span class="item-label">Nuclide</span>
|
||||
<a-select style="width:180px"
|
||||
v-model="queryParams.nuclide"
|
||||
mode="multiple"
|
||||
<a-select
|
||||
style="width: 180px"
|
||||
v-model="queryParams.nuclide"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
:maxTagCount="1"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="nuclideOptions"
|
||||
:options="nuclideOptions"
|
||||
@change="onNuclideChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -53,9 +49,7 @@
|
|||
<a-col>
|
||||
<a-button class="search-btn" @click="onSearch">
|
||||
<img class="icon-add" src="@/assets/images/global/search.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Search
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Search </span>
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -67,8 +61,8 @@
|
|||
<div class="monitor-list-item-title">
|
||||
<div class="monitor-list-item-title-name">{{ item.name }}</div>
|
||||
<div class="monitor-list-item-title-server">
|
||||
<span style="color: #5b9cba;">Qualifier：</span>
|
||||
<span style="color: #ade6ee;">{{ item.spectralQualifier.join("、") }}</span>
|
||||
<span style="color: #5b9cba">Qualifier：</span>
|
||||
<span style="color: #ade6ee">{{ item.spectralQualifier.join('、') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-list-item-content">
|
||||
|
|
@ -77,10 +71,10 @@
|
|||
<a-col :span="4" class="monitor-list-item-content-info-key">Source：</a-col>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
{{ item.source.join("、") }}
|
||||
{{ item.source.join('、') }}
|
||||
</template>
|
||||
<a-col :span="18" class="monitor-list-item-content-info-val">
|
||||
{{ item.source.join("、") }}
|
||||
<a-col :span="18" class="monitor-list-item-content-info-val">
|
||||
{{ item.source.join('、') }}
|
||||
</a-col>
|
||||
</a-tooltip>
|
||||
</a-row>
|
||||
|
|
@ -88,10 +82,10 @@
|
|||
<a-col :span="4" class="monitor-list-item-content-info-key">Stations：</a-col>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
{{ item.stations.join("、") }}
|
||||
{{ item.stations.join('、') }}
|
||||
</template>
|
||||
<a-col :span="18" class="monitor-list-item-content-info-val">
|
||||
{{ item.stations.join("、") }}
|
||||
<a-col :span="18" class="monitor-list-item-content-info-val">
|
||||
{{ item.stations.join('、') }}
|
||||
</a-col>
|
||||
</a-tooltip>
|
||||
</a-row>
|
||||
|
|
@ -99,99 +93,114 @@
|
|||
<a-col :span="4" class="monitor-list-item-content-info-key">Nuclides：</a-col>
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
{{ item.nuclides.join("、") }}
|
||||
{{ item.nuclides.join('、') }}
|
||||
</template>
|
||||
<a-col :span="18" class="monitor-list-item-content-info-val">
|
||||
{{ item.nuclides.join("、") }}
|
||||
<a-col :span="18" class="monitor-list-item-content-info-val">
|
||||
{{ item.nuclides.join('、') }}
|
||||
</a-col>
|
||||
</a-tooltip>
|
||||
</a-row>
|
||||
</div>
|
||||
<div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
|
||||
{{ item.enabled==1?"Enable":"Disabled" }}
|
||||
<div
|
||||
:class="[
|
||||
item.enabled == 1 ? 'monitor-list-item-content-enable' : 'monitor-list-item-content-disable',
|
||||
'monitor-list-item-content-btn',
|
||||
]"
|
||||
>
|
||||
{{ item.enabled == 1 ? 'Enable' : 'Disabled' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-list-item-footer">
|
||||
<div class="monitor-list-item-footer-group">
|
||||
<span style="color: #5b9cba;">Alarm Contact Group：</span>
|
||||
<span style="color: #ade6ee;">{{ item.groupName }}</span>
|
||||
<span style="color: #5b9cba">Alarm Contact Group：</span>
|
||||
<span style="color: #ade6ee">{{ item.groupName }}</span>
|
||||
</div>
|
||||
<div class="monitor-list-item-footer-actions">
|
||||
<span title="Edit" class="actions-edit" @click="editItem(item.id)"></span>
|
||||
<span title="Delete" class="actions-delete" @click="deleteItem(item.id)"></span>
|
||||
<span v-if="item.enabled==1" title="Enable" class="actions-enable" @click="changeItemStatus(item.id,item.enabled)">
|
||||
<span
|
||||
v-if="item.enabled == 1"
|
||||
title="Enable"
|
||||
class="actions-enable"
|
||||
@click="changeItemStatus(item.id, item.enabled)"
|
||||
>
|
||||
</span>
|
||||
<span v-if="item.enabled==0" title="Disabled" class="actions-disable" @click="changeItemStatus(item.id,item.enabled)">
|
||||
<span
|
||||
v-if="item.enabled == 0"
|
||||
title="Disabled"
|
||||
class="actions-disable"
|
||||
@click="changeItemStatus(item.id, item.enabled)"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
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
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add Rule' : 'Edit Rule'"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add Rule' : 'Edit Rule'"
|
||||
:width="800"
|
||||
v-model="visible"
|
||||
:maskClosable="false"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form
|
||||
:form="form"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input name!' }],
|
||||
initialVale: this.formVal.name
|
||||
}
|
||||
initialVale: this.formVal.name,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item label="Source">
|
||||
<dic-select
|
||||
type="checkbox"
|
||||
dictCode="alarm_analyse_rule_source"
|
||||
v-decorator="[
|
||||
'source',
|
||||
{
|
||||
'source',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.source
|
||||
}
|
||||
initialVale: this.formVal.source,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Station">
|
||||
<a-select
|
||||
class="form-select"
|
||||
mode="multiple"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
show-arrow
|
||||
:options="stationOptions"
|
||||
v-decorator="[
|
||||
'station',
|
||||
{
|
||||
'station',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select station' }],
|
||||
initialVale: this.formVal.station
|
||||
}
|
||||
initialVale: this.formVal.station,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -200,18 +209,18 @@
|
|||
<a-form-item label="Nuclide">
|
||||
<a-select
|
||||
class="form-select"
|
||||
mode="multiple"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="5"
|
||||
:maxTagCount="5"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
show-arrow
|
||||
:options="nuclideOptions"
|
||||
v-decorator="[
|
||||
'nuclide',
|
||||
{
|
||||
'nuclide',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select nuclide' }],
|
||||
initialVale: this.formVal.nuclide
|
||||
}
|
||||
initialVale: this.formVal.nuclide,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -222,11 +231,11 @@
|
|||
type="checkbox"
|
||||
dictCode="spectral_qualifier"
|
||||
v-decorator="[
|
||||
'qualifier',
|
||||
{
|
||||
'qualifier',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.qualifier
|
||||
}
|
||||
initialVale: this.formVal.qualifier,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
|
@ -236,11 +245,11 @@
|
|||
layout="vertical"
|
||||
dictCode="alarm_analyse_rule_condition"
|
||||
v-decorator="[
|
||||
'condition',
|
||||
{
|
||||
'condition',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.condition
|
||||
}
|
||||
initialVale: this.formVal.condition,
|
||||
},
|
||||
]"
|
||||
>
|
||||
</dic-select>
|
||||
|
|
@ -248,16 +257,16 @@
|
|||
<a-form-item label="Contact Group">
|
||||
<a-select
|
||||
class="form-select"
|
||||
:options="contactGroupOptions"
|
||||
show-arrow
|
||||
:options="contactGroupOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
placeholder="select..."
|
||||
placeholder="select..."
|
||||
v-decorator="[
|
||||
'contactGroup',
|
||||
{
|
||||
'contactGroup',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.contactGroup
|
||||
}
|
||||
initialVale: this.formVal.contactGroup,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -265,12 +274,12 @@
|
|||
</a-form-item>
|
||||
<a-form-item label="Remark">
|
||||
<a-input
|
||||
type="textarea"
|
||||
type="textarea"
|
||||
v-decorator="[
|
||||
'remark',
|
||||
{
|
||||
initialVale: this.formVal.remark
|
||||
}
|
||||
'remark',
|
||||
{
|
||||
initialVale: this.formVal.remark,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
|
@ -278,7 +287,7 @@
|
|||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
|
@ -287,7 +296,7 @@
|
|||
|
||||
<script>
|
||||
import { getAction, postAction, httpAction, deleteAction, putAction } from '@/api/manage'
|
||||
import DicSelect from '../../components/dicSelect.vue';
|
||||
import DicSelect from '../../components/dicSelect.vue'
|
||||
export default {
|
||||
components: {
|
||||
DicSelect,
|
||||
|
|
@ -300,21 +309,21 @@ export default {
|
|||
queryParams: {
|
||||
station: undefined,
|
||||
source: undefined,
|
||||
nuclide: undefined
|
||||
nuclide: undefined,
|
||||
},
|
||||
sourceOptions: [
|
||||
{
|
||||
label: "IDC",
|
||||
value: "idc"
|
||||
label: 'IDC',
|
||||
value: 'idc',
|
||||
},
|
||||
{
|
||||
label: "ARMD",
|
||||
value: "armd"
|
||||
}
|
||||
label: 'ARMD',
|
||||
value: 'armd',
|
||||
},
|
||||
],
|
||||
stationOptions: [],
|
||||
nuclideOptions: [],
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 9,
|
||||
pageSizeOptions: ['9', '18', '27'],
|
||||
|
|
@ -324,66 +333,66 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 18 },
|
||||
form: this.$form.createForm(this),
|
||||
contactGroupOptions: [],
|
||||
formVal: {
|
||||
name: "",
|
||||
name: '',
|
||||
source: null,
|
||||
station: undefined,
|
||||
nuclide: undefined,
|
||||
qualifier: null,
|
||||
condition: null,
|
||||
contactGroup: undefined,
|
||||
remark: ""
|
||||
remark: '',
|
||||
},
|
||||
monitorList: [],
|
||||
currId:"",
|
||||
currId: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getStationList();
|
||||
this.getNuclideList();
|
||||
this.getAlarmGroup();
|
||||
created() {
|
||||
this.getStationList()
|
||||
this.getNuclideList()
|
||||
this.getAlarmGroup()
|
||||
this.getAlarmRulesPage()
|
||||
},
|
||||
methods: {
|
||||
getStationList() {
|
||||
getAction("/webStatistics/findStationList",{menuName:""}).then(res => {
|
||||
getAction('/webStatistics/findStationList', { menuName: '' }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.length>0) {
|
||||
this.stationOptions = res.result.map(item => {
|
||||
if (res.result.length > 0) {
|
||||
this.stationOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item.stationCode,
|
||||
value: `${item.stationId}`
|
||||
value: `${item.stationId}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.stationOptions=[]
|
||||
this.stationOptions = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getNuclideList() {
|
||||
getAction("/sys/defaultNuclide/allName",{useType:2}).then(res => {
|
||||
getAction('/sys/defaultNuclide/allName', { useType: 2 }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.length>0) {
|
||||
this.nuclideOptions = res.result.map(item => {
|
||||
if (res.result.length > 0) {
|
||||
this.nuclideOptions = res.result.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item
|
||||
value: item,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.nuclideOptions=[]
|
||||
this.nuclideOptions = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -392,9 +401,7 @@ export default {
|
|||
this.visible = true
|
||||
},
|
||||
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
|
||||
},
|
||||
onStationChange(val) {
|
||||
this.queryParams.station = val
|
||||
|
|
@ -412,15 +419,15 @@ export default {
|
|||
pageSize: this.ipagination.pageSize,
|
||||
stations: this.queryParams.station,
|
||||
source: this.queryParams.source,
|
||||
nuclides: this.queryParams.nuclide
|
||||
nuclides: this.queryParams.nuclide,
|
||||
}
|
||||
getAction("/alarmAnalysisRule/findPage", params).then(res => {
|
||||
getAction('/alarmAnalysisRule/findPage', params).then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.monitorList = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -428,10 +435,10 @@ export default {
|
|||
this.ipagination.current = 1
|
||||
this.getAlarmRulesPage()
|
||||
},
|
||||
editItem(id) {
|
||||
editItem(id) {
|
||||
this.currId = id
|
||||
getAction("/alarmAnalysisRule/finInfo", { id }).then( res => {
|
||||
if (res.success) {
|
||||
getAction('/alarmAnalysisRule/finInfo', { id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -443,40 +450,40 @@ export default {
|
|||
qualifier: res.result.qualifierChecked.join(','),
|
||||
condition: res.result.conditionChecked.join(','),
|
||||
contactGroup: res.result.contactGroup,
|
||||
remark: res.result.remark
|
||||
});
|
||||
remark: res.result.remark,
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteItem(id) {
|
||||
},
|
||||
deleteItem(id) {
|
||||
let _this = this
|
||||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/alarmAnalysisRule/delete", {id:id}).then(res => {
|
||||
deleteAction('/alarmAnalysisRule/delete', { id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.$message.success('success')
|
||||
_this.getAlarmRulesPage()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
_this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
console.log('Cancel')
|
||||
},
|
||||
});
|
||||
},
|
||||
changeItemStatus(id, isEnabled) {
|
||||
putAction(`/alarmAnalysisRule/updateStatus?id=${id}&enabled=${isEnabled==1?0:1}`).then(res => {
|
||||
})
|
||||
},
|
||||
changeItemStatus(id, isEnabled) {
|
||||
putAction(`/alarmAnalysisRule/updateStatus?id=${id}&enabled=${isEnabled == 1 ? 0 : 1}`).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getAlarmRulesPage()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -493,54 +500,54 @@ export default {
|
|||
getAlarmGroup() {
|
||||
let params = {
|
||||
pageNo: 1,
|
||||
pageSize: 9999
|
||||
pageSize: 9999,
|
||||
}
|
||||
getAction("/alarmContactGroup/findPage", params).then(res => {
|
||||
getAction('/alarmContactGroup/findPage', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.contactGroupOptions = res.result.records.map(item => {
|
||||
this.contactGroupOptions = res.result.records.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
value: item.id,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
let params = {
|
||||
conditions:values.condition,
|
||||
name:values.name,
|
||||
remark:values.remark,
|
||||
stations:values.station.join(","),
|
||||
conditions: values.condition,
|
||||
name: values.name,
|
||||
remark: values.remark,
|
||||
stations: values.station.join(','),
|
||||
source: values.source,
|
||||
nuclides:values.nuclide.join(","),
|
||||
contactGroup:values.contactGroup,
|
||||
nuclides: values.nuclide.join(','),
|
||||
contactGroup: values.contactGroup,
|
||||
spectralQualifier: values.qualifier,
|
||||
}
|
||||
if (this.isAdd) {
|
||||
postAction("/alarmAnalysisRule/add", params).then(res => {
|
||||
postAction('/alarmAnalysisRule/add', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getAlarmRulesPage()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
httpAction("/alarmAnalysisRule/edit", {...params,id: this.currId}, "put").then(res => {
|
||||
httpAction('/alarmAnalysisRule/edit', { ...params, id: this.currId }, 'put').then((res) => {
|
||||
if (res.success) {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getAlarmRulesPage()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -556,13 +563,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-row-flex{
|
||||
.ant-row-flex {
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
.ant-select{
|
||||
.ant-select {
|
||||
width: 206px;
|
||||
}
|
||||
.form-select{
|
||||
.form-select {
|
||||
width: 100%;
|
||||
}
|
||||
.operators {
|
||||
|
|
@ -572,10 +579,10 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.rules-header{
|
||||
.rules-header {
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
|
|
@ -585,7 +592,7 @@ export default {
|
|||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
background: rgba(12, 235, 201, 0.05);
|
||||
.item-label{
|
||||
.item-label {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
|
|
@ -594,44 +601,44 @@ export default {
|
|||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.rules-add{
|
||||
.rules-add {
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.search-btn{
|
||||
.search-btn {
|
||||
margin-left: 10px;
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.rules-reset{
|
||||
.rules-reset {
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.rules-content{
|
||||
.rules-content {
|
||||
height: calc(100% - 65px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.ant-spin-nested-loading{
|
||||
.ant-spin-nested-loading {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.monitor-list{
|
||||
.monitor-list {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
&-item{
|
||||
&-item {
|
||||
width: 32.76%;
|
||||
height: 224px;
|
||||
// margin-top: 15px;
|
||||
|
|
@ -639,7 +646,7 @@ export default {
|
|||
border: solid 1px rgba(65, 111, 127, 0.5);
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
&-title{
|
||||
&-title {
|
||||
height: 50px;
|
||||
padding: 0 15px 0 20px;
|
||||
background-color: rgba(13, 109, 118, 0.2);
|
||||
|
|
@ -648,11 +655,11 @@ export default {
|
|||
justify-content: space-between;
|
||||
line-height: 50px;
|
||||
font-family: ArialMT;
|
||||
&-name{
|
||||
&-name {
|
||||
font-size: 16px;
|
||||
color: #00bded;
|
||||
}
|
||||
&-server{
|
||||
&-server {
|
||||
width: 55%;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
|
|
@ -661,18 +668,18 @@ export default {
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
&-content {
|
||||
padding: 15px 20px;
|
||||
&-info{
|
||||
&-info {
|
||||
font-family: ArialMT;
|
||||
font-size: 16px;
|
||||
color: #ade6ee;
|
||||
&-key{
|
||||
&-key {
|
||||
// display: inline-block;
|
||||
// width: 120px;
|
||||
// vertical-align: middle;
|
||||
}
|
||||
&-val{
|
||||
&-val {
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -680,19 +687,19 @@ export default {
|
|||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&-btn{
|
||||
&-btn {
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
&-enable{
|
||||
&-enable {
|
||||
background-color: #098839;
|
||||
}
|
||||
&-disable{
|
||||
&-disable {
|
||||
background-color: #8a8a8a;
|
||||
}
|
||||
}
|
||||
&-footer{
|
||||
&-footer {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
|
|
@ -701,48 +708,48 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-group{
|
||||
&-group {
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&-actions{
|
||||
&-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.actions-edit{
|
||||
.actions-edit {
|
||||
background: url(~@/assets/images/abnormalAlarm/edit.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: url(~@/assets/images/abnormalAlarm/edit-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.actions-delete{
|
||||
.actions-delete {
|
||||
background: url(~@/assets/images/abnormalAlarm/delete.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: url(~@/assets/images/abnormalAlarm/delete-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.actions-enable{
|
||||
.actions-enable {
|
||||
background: url(~@/assets/images/abnormalAlarm/enable.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: url(~@/assets/images/abnormalAlarm/enable-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.actions-disable{
|
||||
.actions-disable {
|
||||
background: url(~@/assets/images/abnormalAlarm/disable.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: url(~@/assets/images/abnormalAlarm/disable-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
@ -750,12 +757,12 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
&::after {
|
||||
content: '';
|
||||
width: 32.76%;
|
||||
}
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="search-bar">
|
||||
<a-row type="flex">
|
||||
<a-col flex="108px">
|
||||
<a-button class="search-btn" type="primary" @click="handleConfig">
|
||||
Config
|
||||
</a-button>
|
||||
<a-button class="search-btn" type="primary" @click="handleConfig"> Config </a-button>
|
||||
</a-col>
|
||||
<a-col flex="380px">
|
||||
<span class="item-label">Cacl date</span>
|
||||
<a-range-picker
|
||||
:value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
||||
@change="onRangeDateChange"
|
||||
@change="onRangeDateChange"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -27,59 +25,58 @@
|
|||
:canSelect="false"
|
||||
>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
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
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<a-modal
|
||||
title="Config"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
|
||||
<a-form-item label="Cycle">
|
||||
<a-input-number
|
||||
v-decorator="[
|
||||
'days',
|
||||
{
|
||||
rules: [
|
||||
{ required: true, message: 'Please input days!' },
|
||||
{ pattern: new RegExp('^[1-9]\\d*$'), message: 'Please input a positive integer!' },
|
||||
],
|
||||
initialVale: this.formVal.days
|
||||
}
|
||||
]"
|
||||
/>days
|
||||
</a-form-item>
|
||||
<a-form-item label="Index">
|
||||
<a-input-number
|
||||
v-decorator="[
|
||||
'index',
|
||||
{
|
||||
rules: [
|
||||
{ required: true, message: 'Please input index!' },
|
||||
{ pattern: new RegExp('^([1-9]|[1-9]\\d|100)$'),message: 'Please input an integer from 1 to 100!'},
|
||||
],
|
||||
initialVale: this.formVal.index
|
||||
}
|
||||
]"
|
||||
/>%
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-modal title="Config" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
|
||||
<a-form-item label="Cycle">
|
||||
<a-input-number
|
||||
v-decorator="[
|
||||
'days',
|
||||
{
|
||||
rules: [
|
||||
{ required: true, message: 'Please input days!' },
|
||||
{ pattern: new RegExp('^[1-9]\\d*$'), message: 'Please input a positive integer!' },
|
||||
],
|
||||
initialVale: this.formVal.days,
|
||||
},
|
||||
]"
|
||||
/>days
|
||||
</a-form-item>
|
||||
<a-form-item label="Index">
|
||||
<a-input-number
|
||||
v-decorator="[
|
||||
'index',
|
||||
{
|
||||
rules: [
|
||||
{ required: true, message: 'Please input index!' },
|
||||
{ pattern: new RegExp('^([1-9]|[1-9]\\d|100)$'), message: 'Please input an integer from 1 to 100!' },
|
||||
],
|
||||
initialVale: this.formVal.index,
|
||||
},
|
||||
]"
|
||||
/>%
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
|
@ -88,31 +85,35 @@
|
|||
|
||||
<script>
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import moment from 'moment';
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import moment from 'moment'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NUCLIDE',
|
||||
align: 'center',
|
||||
dataIndex: 'nuclide',
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'VALUE',
|
||||
align: 'center',
|
||||
dataIndex: 'val',
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'SOURCE TYPE',
|
||||
align: 'center',
|
||||
dataIndex: 'datasource',
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'CACL DATE',
|
||||
align: 'center',
|
||||
dataIndex: 'caclDate',
|
||||
},{
|
||||
},
|
||||
{
|
||||
title: 'CYCLE',
|
||||
align: 'center',
|
||||
dataIndex: 'cycle'
|
||||
}
|
||||
dataIndex: 'cycle',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -125,9 +126,9 @@ export default {
|
|||
loading: false,
|
||||
queryParams: {
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
},
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -137,63 +138,63 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
isAdd: true,
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
formVal: {
|
||||
days:"",
|
||||
index: "",
|
||||
days: '',
|
||||
index: '',
|
||||
},
|
||||
currId:""
|
||||
currId: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
created() {
|
||||
this.queryParams.startDate = this.getBeforeDate(1)
|
||||
},
|
||||
mounted () {
|
||||
this.getNuclideAvgList();
|
||||
mounted() {
|
||||
this.getNuclideAvgList()
|
||||
},
|
||||
methods: {
|
||||
// 获取n天前的日期
|
||||
getBeforeDate(n){
|
||||
var n = n;
|
||||
var d = new Date();
|
||||
var year = d.getFullYear();
|
||||
var mon=d.getMonth()+1;
|
||||
var day=d.getDate();
|
||||
if(day <= n){
|
||||
if(mon>1) {
|
||||
mon=mon-1;
|
||||
getBeforeDate(n) {
|
||||
var n = n
|
||||
var d = new Date()
|
||||
var year = d.getFullYear()
|
||||
var mon = d.getMonth() + 1
|
||||
var day = d.getDate()
|
||||
if (day <= n) {
|
||||
if (mon > 1) {
|
||||
mon = mon - 1
|
||||
} else {
|
||||
year = year-1;
|
||||
mon = 12;
|
||||
year = year - 1
|
||||
mon = 12
|
||||
}
|
||||
}
|
||||
d.setDate(d.getDate()-n);
|
||||
year = d.getFullYear();
|
||||
mon=d.getMonth()+1;
|
||||
day=d.getDate();
|
||||
var s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
|
||||
return s;
|
||||
d.setDate(d.getDate() - n)
|
||||
year = d.getFullYear()
|
||||
mon = d.getMonth() + 1
|
||||
day = d.getDate()
|
||||
var s = year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day)
|
||||
return s
|
||||
},
|
||||
moment,
|
||||
getNuclideAvgList() {
|
||||
this.loading = true
|
||||
let params = {
|
||||
startDate:this.queryParams.startDate,
|
||||
endDate:this.queryParams.endDate,
|
||||
startDate: this.queryParams.startDate,
|
||||
endDate: this.queryParams.endDate,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/nuclideAvg/findPage", params).then(res => {
|
||||
getAction('/nuclideAvg/findPage', params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -214,31 +215,31 @@ export default {
|
|||
},
|
||||
handleConfig() {
|
||||
this.visible = true
|
||||
getAction("/nuclideParam/findInfo").then(res => {
|
||||
getAction('/nuclideParam/findInfo').then((res) => {
|
||||
if (res.success) {
|
||||
this.currId = res.result.id
|
||||
this.form.setFieldsValue({
|
||||
days: res.result.days,
|
||||
index: res.result.index*100
|
||||
});
|
||||
index: res.result.index * 100,
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
let params = {
|
||||
id: this.currId,
|
||||
days: values.days,
|
||||
index:values.index/100
|
||||
index: values.index / 100,
|
||||
}
|
||||
httpAction("/nuclideParam/update", params, "put").then(res => {
|
||||
httpAction('/nuclideParam/update', params, 'put').then((res) => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
} else {
|
||||
this.$message.info(res.result.message)
|
||||
}
|
||||
|
|
@ -255,7 +256,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search-bar{
|
||||
.search-bar {
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
|
|
@ -263,16 +264,16 @@ export default {
|
|||
padding: 8px 10px;
|
||||
background: rgba(12, 235, 201, 0.05);
|
||||
}
|
||||
.ant-calendar-picker{
|
||||
.ant-calendar-picker {
|
||||
width: 270px;
|
||||
}
|
||||
.search-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/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;
|
||||
|
|
@ -281,7 +282,7 @@ export default {
|
|||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.analysis-main{
|
||||
.analysis-main {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
|
|
@ -289,7 +290,7 @@ export default {
|
|||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
|
|
@ -302,12 +303,12 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ant-input-number{
|
||||
.ant-input-number {
|
||||
width: 85%;
|
||||
margin-right: 10px;
|
||||
background-color: #03353f !important
|
||||
background-color: #03353f !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,31 +1,25 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="view-header">
|
||||
<div class="view-num">Alarms：<span>{{ alarmTotal }}</span></div>
|
||||
<div class="view-num">
|
||||
Alarms：<span>{{ alarmTotal }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<a-button class="view-btn" @click="onAdd">
|
||||
<img class="icon-add" src="@/assets/images/global/add.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Add
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Add </span>
|
||||
</a-button>
|
||||
<a-button class="view-btn" @click="onEdit">
|
||||
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Edit
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Edit </span>
|
||||
</a-button>
|
||||
<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>
|
||||
<span style="margin-left: 10px"> Delete </span>
|
||||
</a-button>
|
||||
<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
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Refresh </span>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,120 +36,121 @@
|
|||
@cancleRowClick="cancelRow"
|
||||
@rowDbclick="onRowDbclick"
|
||||
>
|
||||
<template slot="status" slot-scope="{record}">
|
||||
<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>
|
||||
<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 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 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 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 slot="disk" slot-scope="{ text, record }">
|
||||
<span :class="[record.diskRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
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
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add' : 'Edit'"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
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="Please select a database type"
|
||||
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 ip address!' }],
|
||||
initialVale: this.formVal.ipAddress
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<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>
|
||||
<a-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
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="Please select a database type"
|
||||
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 ip address!' }],
|
||||
initialVale: this.formVal.ipAddress,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<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>
|
||||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
|
@ -163,64 +158,73 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'name'
|
||||
},{
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'STATUS',
|
||||
align: 'center',
|
||||
dataIndex: 'online',
|
||||
scopedSlots: {
|
||||
customRender: 'status'
|
||||
}
|
||||
},{
|
||||
customRender: 'status',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'IP ADDRESS',
|
||||
align: 'center',
|
||||
dataIndex: 'ipAddress'
|
||||
},{
|
||||
dataIndex: 'ipAddress',
|
||||
},
|
||||
{
|
||||
title: 'DB TYPE',
|
||||
align: 'center',
|
||||
dataIndex: 'dataBaseType'
|
||||
},{
|
||||
dataIndex: 'dataBaseType',
|
||||
},
|
||||
{
|
||||
title: 'PROT',
|
||||
align: 'center',
|
||||
dataIndex: 'port'
|
||||
},{
|
||||
dataIndex: 'port',
|
||||
},
|
||||
{
|
||||
title: 'SLOW QUERY',
|
||||
align: 'center',
|
||||
dataIndex: 'slowQuery'
|
||||
},{
|
||||
dataIndex: 'slowQuery',
|
||||
},
|
||||
{
|
||||
title: 'ALARMS',
|
||||
align: 'center',
|
||||
dataIndex: 'alarms',
|
||||
scopedSlots: {
|
||||
customRender: 'alarms',
|
||||
}
|
||||
},{
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CPU UTILIZATION',
|
||||
align: 'center',
|
||||
dataIndex: 'cpuUutilzation',
|
||||
scopedSlots: {
|
||||
customRender: 'cpu',
|
||||
}
|
||||
},{
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'MEMORY USAGE',
|
||||
align: 'center',
|
||||
dataIndex: 'memoryUsage',
|
||||
scopedSlots: {
|
||||
customRender: 'memory',
|
||||
}
|
||||
},{
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'DISK USAGE',
|
||||
align: 'center',
|
||||
dataIndex: 'diskUsage',
|
||||
scopedSlots: {
|
||||
customRender: 'disk',
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
export default {
|
||||
|
|
@ -229,22 +233,22 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
loading: false,
|
||||
isAdd: true,
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
formVal: {
|
||||
username: "",
|
||||
password: "",
|
||||
name: "",
|
||||
username: '',
|
||||
password: '',
|
||||
name: '',
|
||||
type: undefined,
|
||||
port: "",
|
||||
ipAddress:""
|
||||
port: '',
|
||||
ipAddress: '',
|
||||
},
|
||||
currentId:"",
|
||||
currentId: '',
|
||||
columns,
|
||||
dataSource: [],
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -254,36 +258,36 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
alarmTotal() {
|
||||
let num= 0
|
||||
this.dataSource.forEach(item => {
|
||||
let num = 0
|
||||
this.dataSource.forEach((item) => {
|
||||
num = item.alarmRed ? num + item.alarms : num
|
||||
});
|
||||
})
|
||||
return num
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.getSysDatabase();
|
||||
mounted() {
|
||||
this.getSysDatabase()
|
||||
},
|
||||
methods: {
|
||||
getSysDatabase() {
|
||||
this.loading = true
|
||||
let params = {
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysDatabase/findPage", params).then(res => {
|
||||
getAction('/sysDatabase/findPage', params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -305,7 +309,7 @@ export default {
|
|||
if (this.currentId) {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
getAction("/sysDatabase/findInfo", {id:this.currentId}).then(res => {
|
||||
getAction('/sysDatabase/findInfo', { id: this.currentId }).then((res) => {
|
||||
if (res.success) {
|
||||
this.form.setFieldsValue({
|
||||
username: res.result.username,
|
||||
|
|
@ -313,14 +317,14 @@ export default {
|
|||
name: res.result.name,
|
||||
type: res.result.type,
|
||||
port: res.result.port,
|
||||
ipAddress: res.result.ipAddress
|
||||
});
|
||||
ipAddress: res.result.ipAddress,
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.info("Please select a piece of data")
|
||||
this.$message.info('Please select a piece of data')
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
|
|
@ -329,39 +333,39 @@ export default {
|
|||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/sysDatabase/deleteById", {id:_this.currentId}).then(res => {
|
||||
deleteAction('/sysDatabase/deleteById', { id: _this.currentId }).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
this.currentId=""
|
||||
_this.$message.success('success')
|
||||
this.currentId = ''
|
||||
_this.getSysDatabase()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
_this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
console.log('Cancel')
|
||||
},
|
||||
});
|
||||
})
|
||||
} else {
|
||||
this.$message.info("Please select a piece of data")
|
||||
this.$message.info('Please select a piece of data')
|
||||
}
|
||||
},
|
||||
selectRow(record) {
|
||||
this.currentId = record.id
|
||||
},
|
||||
cancelRow() {
|
||||
this.currentId = ""
|
||||
this.currentId = ''
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (this.isAdd) {
|
||||
postAction("/sysDatabase/create", values).then(res => {
|
||||
postAction('/sysDatabase/create', values).then((res) => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getSysDatabase()
|
||||
} else {
|
||||
this.$message.info(res.result.message)
|
||||
|
|
@ -370,13 +374,13 @@ export default {
|
|||
} else {
|
||||
let params = {
|
||||
id: this.currentId,
|
||||
...values
|
||||
...values,
|
||||
}
|
||||
httpAction("/sysDatabase/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.$message.success('success')
|
||||
this.getSysDatabase()
|
||||
} else {
|
||||
this.$message.info(res.result.message)
|
||||
|
|
@ -384,28 +388,28 @@ export default {
|
|||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
},
|
||||
onRowDbclick(record) {
|
||||
console.log(record);
|
||||
console.log(record)
|
||||
let query = {
|
||||
id:record.id
|
||||
id: record.id,
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/alarm/databaseMonitor/instances',
|
||||
query
|
||||
query,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.view-header{
|
||||
.view-header {
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
|
|
@ -421,58 +425,58 @@ export default {
|
|||
color: #ade6ee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
span {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 30px;
|
||||
color: #d31f1f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-btn{
|
||||
.view-btn {
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
margin-left: 20px;
|
||||
box-shadow: 0px 1px 1px 0px #000000;;
|
||||
box-shadow: 0px 1px 1px 0px #000000;
|
||||
}
|
||||
}
|
||||
.view-main{
|
||||
.view-main {
|
||||
height: calc(100% - 50px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
&-table{
|
||||
&-table {
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.status-on{
|
||||
.status-on {
|
||||
margin-left: 10px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #4bc048;
|
||||
}
|
||||
.status-off{
|
||||
.status-off {
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #868686;
|
||||
}
|
||||
.alarm-text{
|
||||
.alarm-text {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 22px;
|
||||
color: #ade6ee;
|
||||
}
|
||||
.isAlarm{
|
||||
.isAlarm {
|
||||
color: #ed2d2d;
|
||||
}
|
||||
.isRed{
|
||||
.isRed {
|
||||
color: #f02c2c;
|
||||
}
|
||||
/deep/.ant-table-tbody tr{
|
||||
/deep/.ant-table-tbody tr {
|
||||
height: 88px;
|
||||
}
|
||||
}
|
||||
|
|
@ -483,11 +487,11 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ant-input-number{
|
||||
.ant-input-number {
|
||||
width: 100%;
|
||||
background-color: #03353f !important
|
||||
background-color: #03353f !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,31 +1,25 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="view-header">
|
||||
<div class="view-num">Alarms：<span>{{ alarmTotal }}</span></div>
|
||||
<div class="view-num">
|
||||
Alarms：<span>{{ alarmTotal }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<a-button class="view-btn" @click="onAdd">
|
||||
<img class="icon-add" src="@/assets/images/global/add.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Add
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Add </span>
|
||||
</a-button>
|
||||
<a-button class="view-btn" @click="onEdit">
|
||||
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Edit
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Edit </span>
|
||||
</a-button>
|
||||
<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>
|
||||
<span style="margin-left: 10px"> Delete </span>
|
||||
</a-button>
|
||||
<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
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Refresh </span>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,149 +36,146 @@
|
|||
@cancleRowClick="cancelRow"
|
||||
@rowDbclick="onRowDbclick"
|
||||
>
|
||||
<template slot="status" slot-scope="{record}">
|
||||
<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>
|
||||
<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="enabled" slot-scope="{text}">
|
||||
<template slot="enabled" slot-scope="{ text }">
|
||||
<div>
|
||||
<img v-if="text==1" src="@/assets/images/abnormalAlarm/on.png" alt="">
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
|
||||
<img v-if="text == 1" src="@/assets/images/abnormalAlarm/on.png" alt="" />
|
||||
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
<template slot="today" slot-scope="{text}">
|
||||
<span class="alarm-text">{{ text?text:"--" }}</span>
|
||||
<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 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 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 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 slot="stoer" slot-scope="{ text, record }">
|
||||
<span :class="[record.cpuRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
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
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add' : 'Edit'"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input name!' }],
|
||||
initialVale: this.formVal.name
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Server Address">
|
||||
<a-input
|
||||
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="Email Type">
|
||||
<j-dict-select-tag
|
||||
placeholder="Please select an email type"
|
||||
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="Enable or not">
|
||||
<a-select
|
||||
allowClear
|
||||
v-decorator="[
|
||||
'enabled',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select a Station!' }],
|
||||
initialVale: this.formVal.enabled
|
||||
}
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
<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>
|
||||
<a-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input name!' }],
|
||||
initialVale: this.formVal.name,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Server Address">
|
||||
<a-input
|
||||
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="Email Type">
|
||||
<j-dict-select-tag
|
||||
placeholder="Please select an email type"
|
||||
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="Enable or not">
|
||||
<a-select
|
||||
allowClear
|
||||
v-decorator="[
|
||||
'enabled',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select a Station!' }],
|
||||
initialVale: this.formVal.enabled,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
<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>
|
||||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
|
@ -192,67 +183,75 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TableList from '../../components/tableList.vue';
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'name'
|
||||
},{
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'STATUS',
|
||||
align: 'center',
|
||||
dataIndex: 'online',
|
||||
scopedSlots: {
|
||||
customRender: 'status'
|
||||
}
|
||||
},{
|
||||
customRender: 'status',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'ENABLE',
|
||||
align: 'center',
|
||||
dataIndex: 'enabled',
|
||||
scopedSlots: {
|
||||
customRender: 'enabled'
|
||||
}
|
||||
},{
|
||||
customRender: 'enabled',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'E-MAIL',
|
||||
align: 'center',
|
||||
dataIndex: 'emailServerAddress'
|
||||
},{
|
||||
dataIndex: 'emailServerAddress',
|
||||
},
|
||||
{
|
||||
title: "TODAY'S TOTAL",
|
||||
align: 'center',
|
||||
dataIndex: 'today',
|
||||
scopedSlots: {
|
||||
customRender: 'today'
|
||||
}
|
||||
},{
|
||||
customRender: 'today',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "YESTERDAY'S TOTAL",
|
||||
align: 'center',
|
||||
dataIndex: 'yesterday',
|
||||
scopedSlots: {
|
||||
customRender: 'yesterday'
|
||||
}
|
||||
},{
|
||||
title: "WEEKLY TOTAL",
|
||||
customRender: 'yesterday',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'WEEKLY TOTAL',
|
||||
align: 'center',
|
||||
dataIndex: 'weekly',
|
||||
scopedSlots: {
|
||||
customRender: 'weekly'
|
||||
}
|
||||
},{
|
||||
customRender: 'weekly',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'ALARMS',
|
||||
align: 'center',
|
||||
dataIndex: 'alarms',
|
||||
scopedSlots: {
|
||||
customRender: 'alarms',
|
||||
}
|
||||
},{
|
||||
title: "STOER CAPACITY",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'STOER CAPACITY',
|
||||
align: 'center',
|
||||
dataIndex: 'stoerCapacity',
|
||||
scopedSlots: {
|
||||
customRender: 'stoer',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -265,18 +264,18 @@ export default {
|
|||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
formVal: {
|
||||
name: "",
|
||||
emailServerAddress: "",
|
||||
username: "",
|
||||
password: "",
|
||||
emilType: "",
|
||||
enabled: "",
|
||||
port: ""
|
||||
name: '',
|
||||
emailServerAddress: '',
|
||||
username: '',
|
||||
password: '',
|
||||
emilType: '',
|
||||
enabled: '',
|
||||
port: '',
|
||||
},
|
||||
currentId:"",
|
||||
currentId: '',
|
||||
columns,
|
||||
dataSource: [],
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -286,36 +285,36 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
alarmTotal() {
|
||||
let num= 0
|
||||
this.dataSource.forEach(item => {
|
||||
let num = 0
|
||||
this.dataSource.forEach((item) => {
|
||||
num = item.alarmRed ? num + item.alarms : num
|
||||
});
|
||||
})
|
||||
return num
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.getSysEmail();
|
||||
mounted() {
|
||||
this.getSysEmail()
|
||||
},
|
||||
methods: {
|
||||
getSysEmail() {
|
||||
this.loading = true
|
||||
let params = {
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysEmail/findPage", params).then(res => {
|
||||
this.loading=false
|
||||
getAction('/sysEmail/findPage', params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -337,7 +336,7 @@ export default {
|
|||
if (this.currentId) {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
getAction("/sysEmail/findInfo", {id:this.currentId}).then(res => {
|
||||
getAction('/sysEmail/findInfo', { id: this.currentId }).then((res) => {
|
||||
if (res.success) {
|
||||
this.form.setFieldsValue({
|
||||
name: res.result.name,
|
||||
|
|
@ -346,14 +345,14 @@ export default {
|
|||
password: res.result.password,
|
||||
emilType: res.result.emilType,
|
||||
enabled: res.result.enabled,
|
||||
port: res.result.port
|
||||
});
|
||||
port: res.result.port,
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.info("Please select a piece of data")
|
||||
this.$message.info('Please select a piece of data')
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
|
|
@ -362,40 +361,40 @@ export default {
|
|||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/sysEmail/deleteById", {id:_this.currentId}).then(res => {
|
||||
deleteAction('/sysEmail/deleteById', { id: _this.currentId }).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
this.currentId=""
|
||||
_this.$message.success('success')
|
||||
this.currentId = ''
|
||||
_this.getSysEmail()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
_this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
console.log('Cancel')
|
||||
},
|
||||
});
|
||||
})
|
||||
} else {
|
||||
this.$message.info("Please select a piece of data")
|
||||
this.$message.info('Please select a piece of data')
|
||||
}
|
||||
},
|
||||
selectRow(record) {
|
||||
this.currentId = record.id
|
||||
},
|
||||
cancelRow() {
|
||||
this.currentId = ""
|
||||
this.currentId = ''
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values);
|
||||
console.log('Received values of form: ', values)
|
||||
if (this.isAdd) {
|
||||
postAction("/sysEmail/create", values).then(res => {
|
||||
postAction('/sysEmail/create', values).then((res) => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getSysEmail()
|
||||
} else {
|
||||
this.$message.info(res.result.message)
|
||||
|
|
@ -404,13 +403,13 @@ export default {
|
|||
} else {
|
||||
let params = {
|
||||
id: this.currentId,
|
||||
...values
|
||||
...values,
|
||||
}
|
||||
httpAction("/sysEmail/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.$message.success('success')
|
||||
this.getSysEmail()
|
||||
} else {
|
||||
this.$message.info(res.result.message)
|
||||
|
|
@ -418,7 +417,7 @@ export default {
|
|||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.form.resetFields()
|
||||
|
|
@ -426,19 +425,19 @@ export default {
|
|||
},
|
||||
onRowDbclick(record) {
|
||||
let query = {
|
||||
emailId:record.id
|
||||
emailId: record.id,
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/alarm/emailMonitor/instances',
|
||||
query
|
||||
query,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.view-header{
|
||||
.view-header {
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
|
|
@ -454,58 +453,58 @@ export default {
|
|||
color: #ade6ee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
span {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 30px;
|
||||
color: #d31f1f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-btn{
|
||||
.view-btn {
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
margin-left: 20px;
|
||||
box-shadow: 0px 1px 1px 0px #000000;;
|
||||
box-shadow: 0px 1px 1px 0px #000000;
|
||||
}
|
||||
}
|
||||
.view-main{
|
||||
.view-main {
|
||||
height: calc(100% - 50px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
&-table{
|
||||
&-table {
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.status-on{
|
||||
.status-on {
|
||||
margin-left: 10px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #4bc048;
|
||||
}
|
||||
.status-off{
|
||||
.status-off {
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #868686;
|
||||
}
|
||||
.alarm-text{
|
||||
.alarm-text {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 22px;
|
||||
color: #ade6ee;
|
||||
}
|
||||
.isAlarm{
|
||||
.isAlarm {
|
||||
color: #ed2d2d;
|
||||
}
|
||||
.isRed{
|
||||
.isRed {
|
||||
color: #f02c2c;
|
||||
}
|
||||
/deep/.ant-table-tbody tr{
|
||||
/deep/.ant-table-tbody tr {
|
||||
height: 88px;
|
||||
}
|
||||
}
|
||||
|
|
@ -516,11 +515,11 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ant-input-number{
|
||||
.ant-input-number {
|
||||
width: 100%;
|
||||
background-color: #03353f !important
|
||||
background-color: #03353f !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -152,7 +152,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" :maskClosable="false" @cancel="onCancel">
|
||||
<div class="modal-content" id="common_cpu"></div>
|
||||
</a-modal>
|
||||
<CreateRules
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-modal title="Add Rule" :width="845" v-model="visible" @cancel="onCancel">
|
||||
<a-modal title="Add Rule" :width="845" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<a-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
|
||||
<a-row :gutter="[15, 0]">
|
||||
<a-col :span="12">
|
||||
|
|
|
|||
|
|
@ -156,7 +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" :maskClosable="false" @cancel="onCancel">
|
||||
<div class="modal-content" id="common"></div>
|
||||
</a-modal>
|
||||
<CreateRules
|
||||
|
|
|
|||
|
|
@ -1,31 +1,25 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="view-header">
|
||||
<div class="view-num">Alarms：<span>{{ alarmTotal }}</span></div>
|
||||
<div class="view-num">
|
||||
Alarms：<span>{{ alarmTotal }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<a-button class="view-btn" @click="onAdd">
|
||||
<img class="icon-add" src="@/assets/images/global/add.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Add
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Add </span>
|
||||
</a-button>
|
||||
<a-button class="view-btn" @click="onEdit">
|
||||
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Edit
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Edit </span>
|
||||
</a-button>
|
||||
<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>
|
||||
<span style="margin-left: 10px"> Delete </span>
|
||||
</a-button>
|
||||
<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
|
||||
</span>
|
||||
<span style="margin-left: 10px"> Refresh </span>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,74 +36,73 @@
|
|||
@cancleRowClick="cancelRow"
|
||||
@rowDbclick="onRowDbclick"
|
||||
>
|
||||
<template slot="status" slot-scope="{text,record}">
|
||||
<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>
|
||||
<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 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 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 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 slot="disk" slot-scope="{ text, record }">
|
||||
<span :class="[record.diskRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
<a-pagination
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
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
|
||||
:show-total="
|
||||
(total, range) =>
|
||||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||||
"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add' : 'Edit'"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<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 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 ip address!' }],
|
||||
initialVale: this.formVal.ipAddress
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<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 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 ip address!' }],
|
||||
initialVale: this.formVal.ipAddress,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
|
@ -118,51 +111,57 @@
|
|||
|
||||
<script>
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
const columns = [
|
||||
{
|
||||
title: 'NAME',
|
||||
align: 'center',
|
||||
dataIndex: 'name'
|
||||
},{
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'STATUS',
|
||||
align: 'center',
|
||||
dataIndex: 'serverInfo',
|
||||
scopedSlots: {
|
||||
customRender: 'status'
|
||||
}
|
||||
},{
|
||||
customRender: 'status',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'IP ADDRESS',
|
||||
align: 'center',
|
||||
dataIndex: 'ipAddress'
|
||||
},{
|
||||
dataIndex: 'ipAddress',
|
||||
},
|
||||
{
|
||||
title: 'ALARMS',
|
||||
align: 'center',
|
||||
dataIndex: 'alarms',
|
||||
scopedSlots: {
|
||||
customRender: 'alarms',
|
||||
}
|
||||
},{
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CPU UTILIZATION',
|
||||
align: 'center',
|
||||
dataIndex: 'cpuUutilzation',
|
||||
scopedSlots: {
|
||||
customRender: 'cpu',
|
||||
}
|
||||
},{
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'MEMORY USAGE',
|
||||
align: 'center',
|
||||
dataIndex: 'memoryUsage',
|
||||
scopedSlots: {
|
||||
customRender: 'memory',
|
||||
}
|
||||
},{
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'DISK USAGE',
|
||||
align: 'center',
|
||||
dataIndex: 'diskUsage',
|
||||
scopedSlots: {
|
||||
customRender: 'disk',
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
export default {
|
||||
|
|
@ -171,18 +170,18 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
loading: false,
|
||||
isAdd: true,
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
formVal: {
|
||||
name: "",
|
||||
ipAddress:""
|
||||
name: '',
|
||||
ipAddress: '',
|
||||
},
|
||||
currentId:"",
|
||||
currentId: '',
|
||||
columns,
|
||||
dataSource: [],
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -192,36 +191,36 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
alarmTotal() {
|
||||
let num= 0
|
||||
this.dataSource.forEach(item => {
|
||||
let num = 0
|
||||
this.dataSource.forEach((item) => {
|
||||
num = item.alarmRed ? num + item.alarms : num
|
||||
});
|
||||
})
|
||||
return num
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.getSysServer();
|
||||
mounted() {
|
||||
this.getSysServer()
|
||||
},
|
||||
methods: {
|
||||
getSysServer() {
|
||||
this.loading = true
|
||||
let params = {
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize
|
||||
pageSize: this.ipagination.pageSize,
|
||||
}
|
||||
getAction("/sysServer/findPage", params).then(res => {
|
||||
getAction('/sysServer/findPage', params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.ipagination.total = res.result.total
|
||||
this.dataSource = res.result.records
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -243,18 +242,18 @@ export default {
|
|||
if (this.currentId) {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
getAction("/sysServer/findInfo", {id:this.currentId}).then(res => {
|
||||
getAction('/sysServer/findInfo', { id: this.currentId }).then((res) => {
|
||||
if (res.success) {
|
||||
this.form.setFieldsValue({
|
||||
name: res.result.name,
|
||||
ipAddress: res.result.ipAddress
|
||||
});
|
||||
ipAddress: res.result.ipAddress,
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.info("Please select a piece of data")
|
||||
this.$message.info('Please select a piece of data')
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
|
|
@ -263,39 +262,39 @@ export default {
|
|||
this.$confirm({
|
||||
title: 'Are you sure to delete this item?',
|
||||
onOk() {
|
||||
deleteAction("/sysServer/deleteById", {id:_this.currentId}).then(res => {
|
||||
deleteAction('/sysServer/deleteById', { id: _this.currentId }).then((res) => {
|
||||
if (res.success) {
|
||||
_this.$message.success("success")
|
||||
_this.currentId = ""
|
||||
_this.$message.success('success')
|
||||
_this.currentId = ''
|
||||
_this.getSysServer()
|
||||
} else {
|
||||
_this.$message.warning("This operation fails. Contact your system administrator")
|
||||
_this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
console.log('Cancel')
|
||||
},
|
||||
});
|
||||
})
|
||||
} else {
|
||||
this.$message.info("Please select a piece of data")
|
||||
this.$message.info('Please select a piece of data')
|
||||
}
|
||||
},
|
||||
selectRow(record) {
|
||||
this.currentId = record.id
|
||||
},
|
||||
cancelRow() {
|
||||
this.currentId = ""
|
||||
this.currentId = ''
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (this.isAdd) {
|
||||
postAction("/sysServer/create", values).then(res => {
|
||||
postAction('/sysServer/create', values).then((res) => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getSysServer()
|
||||
} else {
|
||||
this.$message.info(res.result.message)
|
||||
|
|
@ -304,13 +303,13 @@ export default {
|
|||
} else {
|
||||
let params = {
|
||||
id: this.currentId,
|
||||
...values
|
||||
...values,
|
||||
}
|
||||
httpAction("/sysServer/update", params, "put").then(res => {
|
||||
httpAction('/sysServer/update', params, 'put').then((res) => {
|
||||
if (res.success) {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
this.$message.success("success")
|
||||
this.$message.success('success')
|
||||
this.getSysServer()
|
||||
} else {
|
||||
this.$message.info(res.result.message)
|
||||
|
|
@ -318,7 +317,7 @@ export default {
|
|||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.form.resetFields()
|
||||
|
|
@ -326,19 +325,19 @@ export default {
|
|||
},
|
||||
onRowDbclick(record) {
|
||||
let query = {
|
||||
serverId:record.id
|
||||
serverId: record.id,
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/alarm/serverMonitor/instances',
|
||||
query
|
||||
query,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.view-header{
|
||||
.view-header {
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
|
|
@ -354,58 +353,58 @@ export default {
|
|||
color: #ade6ee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
span {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 30px;
|
||||
color: #d31f1f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-btn{
|
||||
.view-btn {
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
margin-left: 20px;
|
||||
box-shadow: 0px 1px 1px 0px #000000;;
|
||||
box-shadow: 0px 1px 1px 0px #000000;
|
||||
}
|
||||
}
|
||||
.view-main{
|
||||
.view-main {
|
||||
height: calc(100% - 50px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 15px;
|
||||
&-table{
|
||||
&-table {
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ant-pagination{
|
||||
.ant-pagination {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.status-on{
|
||||
.status-on {
|
||||
margin-left: 10px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #4bc048;
|
||||
}
|
||||
.status-off{
|
||||
.status-off {
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #868686;
|
||||
}
|
||||
.alarm-text{
|
||||
.alarm-text {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 22px;
|
||||
color: #ade6ee;
|
||||
}
|
||||
.isAlarm{
|
||||
.isAlarm {
|
||||
color: #ed2d2d;
|
||||
}
|
||||
.isRed{
|
||||
.isRed {
|
||||
color: #f02c2c;
|
||||
}
|
||||
/deep/.ant-table-tbody tr{
|
||||
/deep/.ant-table-tbody tr {
|
||||
height: 88px;
|
||||
}
|
||||
}
|
||||
|
|
@ -416,7 +415,7 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="header">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div>
|
||||
|
|
@ -29,20 +29,14 @@
|
|||
</custom-table>
|
||||
</div>
|
||||
<!-- 列表结束 -->
|
||||
<a-modal
|
||||
title='Edit'
|
||||
:width="845"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
destroy-on-close
|
||||
>
|
||||
<a-modal title="Edit" :width="845" v-model="visible" :maskClosable="false" @ok="handleOk" destroy-on-close>
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="group-assign">
|
||||
<a-transfer
|
||||
:dataSource="dataList"
|
||||
:target-keys="targetKeys"
|
||||
show-search
|
||||
:render="item => item.title"
|
||||
:render="(item) => item.title"
|
||||
:operations="['Assign', 'Remove']"
|
||||
:titles="['Total Nuclides', 'User Nuclides']"
|
||||
@change="handleChange"
|
||||
|
|
@ -54,7 +48,7 @@
|
|||
<template slot="footer">
|
||||
<slot name="custom-footer"></slot>
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="handleOk" >Save</a-button>
|
||||
<a-button type="success" @click="handleOk">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
|
@ -70,32 +64,32 @@ const columns = [
|
|||
align: 'left',
|
||||
width: 170,
|
||||
scopedSlots: {
|
||||
customRender: 'index'
|
||||
customRender: 'index',
|
||||
},
|
||||
customHeaderCell: () => {
|
||||
return {
|
||||
style: {
|
||||
'padding-left': '60px !important'
|
||||
}
|
||||
'padding-left': '60px !important',
|
||||
},
|
||||
}
|
||||
},
|
||||
customCell: () => {
|
||||
return {
|
||||
style: {
|
||||
'padding-left': '60px !important'
|
||||
}
|
||||
'padding-left': '60px !important',
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'NUCLIDE NAME',
|
||||
align: 'left',
|
||||
dataIndex: 'nuclideName'
|
||||
dataIndex: 'nuclideName',
|
||||
},
|
||||
{
|
||||
title: 'CREATE TIME',
|
||||
align: 'left',
|
||||
dataIndex: 'createTime'
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
|
|
@ -106,7 +100,7 @@ export default {
|
|||
url: {
|
||||
list: '/sys/defaultNuclide/findPage',
|
||||
},
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -116,17 +110,17 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
loading: false,
|
||||
targetKeys: [],
|
||||
visible: false,
|
||||
dataList: [],
|
||||
spinning: false
|
||||
spinning: false,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getRulesList();
|
||||
mounted() {
|
||||
this.getRulesList()
|
||||
},
|
||||
methods: {
|
||||
getRulesList() {
|
||||
|
|
@ -134,23 +128,22 @@ export default {
|
|||
let params = {
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
useType: 2
|
||||
useType: 2,
|
||||
}
|
||||
getAction(this.url.list, params).then(res => {
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
this.ipagination.current = pagination.current
|
||||
this.ipagination.pageSize = pagination.pageSize
|
||||
this.getRulesList();
|
||||
this.getRulesList()
|
||||
},
|
||||
handleAdd() {
|
||||
this.visible = true
|
||||
|
|
@ -159,39 +152,39 @@ export default {
|
|||
this.getNuclideList()
|
||||
},
|
||||
getNuclideListAll() {
|
||||
getAction("/gardsNuclLib/allName").then(res => {
|
||||
getAction('/gardsNuclLib/allName').then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
if (res.result.length > 0) {
|
||||
this.dataList = res.result.map((item,index) => {
|
||||
this.dataList = res.result.map((item, index) => {
|
||||
return {
|
||||
key: item,
|
||||
title: item
|
||||
title: item,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.dataList = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getNuclideList() {
|
||||
getAction("/sys/defaultNuclide/allName",{useType:2}).then(res => {
|
||||
getAction('/sys/defaultNuclide/allName', { useType: 2 }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.length > 0) {
|
||||
this.targetKeys = res.result.map(item => item)
|
||||
this.targetKeys = res.result.map((item) => item)
|
||||
} else {
|
||||
this.targetKeys = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleChange(targetKeys, direction, moveKeys) {
|
||||
this.targetKeys= targetKeys;
|
||||
this.targetKeys = targetKeys
|
||||
},
|
||||
handleSearch(dir, value) {
|
||||
console.log('search:', dir, value)
|
||||
|
|
@ -199,15 +192,15 @@ export default {
|
|||
handleOk() {
|
||||
let params = {
|
||||
nuclideNames: this.targetKeys,
|
||||
useType: 2
|
||||
useType: 2,
|
||||
}
|
||||
getAction("/sys/defaultNuclide/add",params).then(res => {
|
||||
getAction('/sys/defaultNuclide/add', params).then((res) => {
|
||||
this.visible = false
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.getRulesList()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -219,7 +212,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header{
|
||||
.header {
|
||||
height: 54px;
|
||||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||
|
|
@ -236,7 +229,7 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
.group-assign{
|
||||
.group-assign {
|
||||
position: relative;
|
||||
width: 690px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -258,7 +251,7 @@ export default {
|
|||
left: 16px;
|
||||
}
|
||||
}
|
||||
&-body{
|
||||
&-body {
|
||||
height: calc(100% - 37px);
|
||||
}
|
||||
&-content {
|
||||
|
|
@ -268,14 +261,14 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
height: 411px;
|
||||
position: relative;
|
||||
// top: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ant-transfer-operation {
|
||||
.ant-btn {
|
||||
width: 92px;
|
||||
|
|
@ -314,27 +307,27 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-header{
|
||||
.ant-transfer-list-header {
|
||||
position: relative;
|
||||
.ant-checkbox-wrapper{
|
||||
.ant-checkbox-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-content-item{
|
||||
.ant-transfer-list-content-item {
|
||||
position: relative;
|
||||
.ant-checkbox-wrapper{
|
||||
.ant-checkbox-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-content-item-text{
|
||||
.ant-transfer-list-content-item-text {
|
||||
padding-left: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div style="height: 100%">
|
||||
<div class="header">
|
||||
<div>
|
||||
<span class="item-label">Nuclide Type</span>
|
||||
<a-select
|
||||
style="width: 180px;display: inline-block;"
|
||||
v-model="type"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
<a-select
|
||||
style="width: 180px; display: inline-block"
|
||||
v-model="type"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
placeholder="select..."
|
||||
placeholder="select..."
|
||||
@change="onTypeChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -43,23 +43,17 @@
|
|||
</custom-table>
|
||||
</div>
|
||||
<!-- 列表结束 -->
|
||||
<a-modal
|
||||
title='Edit'
|
||||
:width="845"
|
||||
v-model="visible"
|
||||
@ok="handleOk"
|
||||
destroy-on-close
|
||||
>
|
||||
<a-modal title="Edit" :width="845" v-model="visible" :maskClosable="false" @ok="handleOk" destroy-on-close>
|
||||
<a-spin :spinning="spinning">
|
||||
<div style="padding-left: 52px;margin-bottom: 20px;">
|
||||
<div style="padding-left: 52px; margin-bottom: 20px">
|
||||
<span class="item-label">Nuclide Type</span>
|
||||
<a-select
|
||||
style="width: 180px;display: inline-block;"
|
||||
v-model="currType"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
<a-select
|
||||
style="width: 180px; display: inline-block"
|
||||
v-model="currType"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
placeholder="select..."
|
||||
placeholder="select..."
|
||||
@change="onCurrTypeChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -70,7 +64,7 @@
|
|||
:dataSource="dataList"
|
||||
:target-keys="targetKeys"
|
||||
show-search
|
||||
:render="item => item.title"
|
||||
:render="(item) => item.title"
|
||||
:operations="['Assign', 'Remove']"
|
||||
:titles="['Total Nuclides', 'User Nuclides']"
|
||||
@change="handleChange"
|
||||
|
|
@ -82,7 +76,7 @@
|
|||
<template slot="footer">
|
||||
<slot name="custom-footer"></slot>
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="handleOk" >Save</a-button>
|
||||
<a-button type="success" @click="handleOk">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
|
@ -98,37 +92,37 @@ const columns = [
|
|||
align: 'left',
|
||||
width: 170,
|
||||
scopedSlots: {
|
||||
customRender: 'index'
|
||||
customRender: 'index',
|
||||
},
|
||||
customHeaderCell: () => {
|
||||
return {
|
||||
style: {
|
||||
'padding-left': '60px !important'
|
||||
}
|
||||
'padding-left': '60px !important',
|
||||
},
|
||||
}
|
||||
},
|
||||
customCell: () => {
|
||||
return {
|
||||
style: {
|
||||
'padding-left': '60px !important'
|
||||
}
|
||||
'padding-left': '60px !important',
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'NUCLIDE NAME',
|
||||
align: 'left',
|
||||
dataIndex: 'nuclideName'
|
||||
dataIndex: 'nuclideName',
|
||||
},
|
||||
{
|
||||
title: 'NUCLIDE TYPE',
|
||||
align: 'left',
|
||||
dataIndex: 'nuclideType'
|
||||
dataIndex: 'nuclideType',
|
||||
},
|
||||
{
|
||||
title: 'CREATE TIME',
|
||||
align: 'left',
|
||||
dataIndex: 'createTime'
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
|
|
@ -139,7 +133,7 @@ export default {
|
|||
url: {
|
||||
list: '/sys/defaultNuclide/findPage',
|
||||
},
|
||||
ipagination:{
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
|
|
@ -149,29 +143,29 @@ export default {
|
|||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
loading: false,
|
||||
typeOptions: [
|
||||
{
|
||||
label: "P",
|
||||
value: "P"
|
||||
label: 'P',
|
||||
value: 'P',
|
||||
},
|
||||
{
|
||||
label: "G",
|
||||
value: "G"
|
||||
}
|
||||
label: 'G',
|
||||
value: 'G',
|
||||
},
|
||||
],
|
||||
type: undefined,
|
||||
currType: "P",
|
||||
currType: 'P',
|
||||
targetKeys: [],
|
||||
visible: false,
|
||||
dataList: [],
|
||||
spinning: false
|
||||
spinning: false,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getAuroPeocessList();
|
||||
mounted() {
|
||||
this.getAuroPeocessList()
|
||||
},
|
||||
methods: {
|
||||
getAuroPeocessList() {
|
||||
|
|
@ -180,27 +174,26 @@ export default {
|
|||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
useType: 1,
|
||||
nuclideType: this.type || ""
|
||||
nuclideType: this.type || '',
|
||||
}
|
||||
getAction(this.url.list, params).then(res => {
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
this.ipagination.current = pagination.current
|
||||
this.ipagination.pageSize = pagination.pageSize
|
||||
this.getAuroPeocessList();
|
||||
this.getAuroPeocessList()
|
||||
},
|
||||
onTypeChange(val) {
|
||||
this.type = val
|
||||
this.getAuroPeocessList();
|
||||
this.getAuroPeocessList()
|
||||
},
|
||||
onCurrTypeChange(val) {
|
||||
this.currType = val
|
||||
|
|
@ -213,40 +206,40 @@ export default {
|
|||
this.getNuclideList()
|
||||
},
|
||||
getNuclideListAll() {
|
||||
getAction("/gardsNuclLib/allName").then(res => {
|
||||
getAction('/gardsNuclLib/allName').then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
if (res.result.length > 0) {
|
||||
this.dataList = res.result.map((item,index) => {
|
||||
this.dataList = res.result.map((item, index) => {
|
||||
return {
|
||||
key: item,
|
||||
title: item
|
||||
title: item,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.dataList = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getNuclideList() {
|
||||
getAction("/sys/defaultNuclide/allName",{useType:1,nuclideType: this.currType}).then(res => {
|
||||
getAction('/sys/defaultNuclide/allName', { useType: 1, nuclideType: this.currType }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.length > 0) {
|
||||
this.targetKeys = res.result.map(item => item)
|
||||
this.targetKeys = res.result.map((item) => item)
|
||||
} else {
|
||||
this.targetKeys = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleChange(targetKeys, direction, moveKeys) {
|
||||
console.log(targetKeys, direction, moveKeys);
|
||||
this.targetKeys= targetKeys;
|
||||
console.log(targetKeys, direction, moveKeys)
|
||||
this.targetKeys = targetKeys
|
||||
},
|
||||
handleSearch(dir, value) {
|
||||
console.log('search:', dir, value)
|
||||
|
|
@ -255,15 +248,15 @@ export default {
|
|||
let params = {
|
||||
nuclideNames: this.targetKeys,
|
||||
nuclideType: this.currType,
|
||||
useType: 1
|
||||
useType: 1,
|
||||
}
|
||||
getAction("/sys/defaultNuclide/add",params).then(res => {
|
||||
getAction('/sys/defaultNuclide/add', params).then((res) => {
|
||||
this.visible = false
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.getAuroPeocessList()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -275,7 +268,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header{
|
||||
.header {
|
||||
height: 54px;
|
||||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||
|
|
@ -286,7 +279,7 @@ export default {
|
|||
padding: 0 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.item-label{
|
||||
.item-label {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
|
|
@ -302,7 +295,7 @@ export default {
|
|||
width: 92px;
|
||||
}
|
||||
}
|
||||
.group-assign{
|
||||
.group-assign {
|
||||
position: relative;
|
||||
width: 690px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -324,7 +317,7 @@ export default {
|
|||
left: 16px;
|
||||
}
|
||||
}
|
||||
&-body{
|
||||
&-body {
|
||||
height: calc(100% - 37px);
|
||||
}
|
||||
&-content {
|
||||
|
|
@ -334,14 +327,14 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
height: 411px;
|
||||
position: relative;
|
||||
// top: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ant-transfer-operation {
|
||||
.ant-btn {
|
||||
width: 92px;
|
||||
|
|
@ -380,27 +373,27 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-header{
|
||||
.ant-transfer-list-header {
|
||||
position: relative;
|
||||
.ant-checkbox-wrapper{
|
||||
.ant-checkbox-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-content-item{
|
||||
.ant-transfer-list-content-item {
|
||||
position: relative;
|
||||
.ant-checkbox-wrapper{
|
||||
.ant-checkbox-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.ant-transfer-list-content-item-text{
|
||||
.ant-transfer-list-content-item-text {
|
||||
padding-left: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
/deep/.ant-modal-title {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user