xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master-dev' of http://git.hivekion.com:3000/xiaoguangbin/AnalysisSystemForRadionuclide_vue into master-dev

Browse Source
This commit is contained in:
xiaoguangbin 2023-11-02 10:12:53 +08:00
commit ce20269bbe
12 changed files with 1407 additions and 1403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<div style="height: 100%;overflow: hidden;"> <div style="height: 100%; overflow: hidden">
<div class="group-header"> <div class="group-header">
<a-button class="group-add" @click="showModal"> <a-button class="group-add" @click="showModal">
<img class="icon-add" src="@/assets/images/global/add.png" alt="" /> <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Add Contact Group </span>
Add Contact Group
</span>
</a-button> </a-button>
</div> </div>
<div class="group-content"> <div class="group-content">
<a-spin :spinning="spinning"> <a-spin :spinning="spinning">
<a-collapse :activeKey="activeKey" :bordered="false"> <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"> <template slot="header">
{{ item.name }} {{ 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>
<template slot="extra"> <template slot="extra">
<a-button class="actions" shape="circle" @click.stop="editGroup(item.id)"> <a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
<img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" /> <img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
</a-button> </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="" /> <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
</a-button> </a-button>
</template> </template>
@ -33,15 +33,25 @@
:canSelect="false" :canSelect="false"
:scroll="{ y: 200 }" :scroll="{ y: 200 }"
> >
<template slot="name" slot-scope="{text}"> <template slot="name" slot-scope="{ text }">
<img src="@/assets/images/abnormalAlarm/user.png" alt=""><span style="margin-left: 8px;padding-top: 2px;">{{ text }}</span> <img src="@/assets/images/abnormalAlarm/user.png" alt="" /><span
style="margin-left: 8px; padding-top: 2px"
>{{ text }}</span
>
</template> </template>
<template slot="role" slot-scope="{record}"> <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> <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>
<template slot="action" slot-scope="{record}"> <template slot="action" slot-scope="{ record }">
<a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteUser(item.id, record.id)"> <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="" /> <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
</a-button> </a-button>
</template> </template>
@ -49,69 +59,71 @@
</a-collapse-panel> </a-collapse-panel>
</a-collapse> </a-collapse>
</a-spin> </a-spin>
<a-pagination <a-pagination
size="small" size="small"
v-model="page.currentPage" v-model="page.currentPage"
:pageSize="page.pageSize" :pageSize="page.pageSize"
:page-size-options="page.pageSizeOptions" :page-size-options="page.pageSizeOptions"
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="page.total" :total="page.total"
:show-total="(total, range) => `Total ${total} items　Page ${page.currentPage} / ${Math.ceil(total / page.pageSize)}`" :show-total="
show-less-items (total, range) => `Total ${total} items　Page ${page.currentPage} / ${Math.ceil(total / page.pageSize)}`
"
show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
<a-modal <a-modal
:title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'" :title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'"
:width="845" :width="845"
v-model="visible" :maskClosable="false"
@ok="handleOk" v-model="visible"
@ok="handleOk"
destroy-on-close destroy-on-close
> >
<!-- <a-spin :spinning="false"> --> <!-- <a-spin :spinning="false"> -->
<div class="group-assign"> <div class="group-assign">
<a-transfer <a-transfer
:dataSource="userList" :dataSource="userList"
:target-keys="targetKeys" :target-keys="targetKeys"
:render="item => item.title" :render="(item) => item.title"
:operations="['Assign', 'Remove']" :operations="['Assign', 'Remove']"
:titles="['All Users', 'Contact Group']" :titles="['All Users', 'Contact Group']"
@change="handleChange" @change="handleChange"
@search="handleSearch" @search="handleSearch"
> >
</a-transfer> </a-transfer>
<!-- 穿梭框右上方搜索 --> <!-- 穿梭框右上方搜索 -->
<div class="group-name"> <div class="group-name">
<!-- <label>Group Name</label>
<!-- <label>Group Name</label>
<a-input :value="groupName" placeholder="Basic usage" @change="setGroupName" /> --> <a-input :value="groupName" placeholder="Basic usage" @change="setGroupName" /> -->
<a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }"> <a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
<a-form-item label="Group Name"> <a-form-item label="Group Name">
<a-input <a-input
v-decorator="['name', { rules: [{ required: true, message: 'The group name is mandatory' }] }]" v-decorator="['name', { rules: [{ required: true, message: 'The group name is mandatory' }] }]"
/> />
</a-form-item> </a-form-item>
</a-form> </a-form>
</div>
<!-- 穿梭框右上方搜索结束 -->
</div> </div>
<!-- 穿梭框右上方搜索结束 -->
</div>
<!-- </a-spin> --> <!-- </a-spin> -->
<template slot="footer"> <template slot="footer">
<slot name="custom-footer"></slot> <slot name="custom-footer"></slot>
<a-space class="operators" :size="20"> <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-button type="warn" @click="onCancel">Cancel</a-button>
</a-space> </a-space>
</template> </template>
</a-modal> </a-modal>
</div> </div>
</template> </template>
<script> <script>
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [ const columns = [
{ {
title: 'NAME', title: 'NAME',
@ -119,7 +131,7 @@ const columns = [
dataIndex: 'username', dataIndex: 'username',
scopedSlots: { scopedSlots: {
customRender: 'name', customRender: 'name',
} },
}, },
{ {
title: 'ROLE', title: 'ROLE',
@ -132,12 +144,12 @@ const columns = [
{ {
title: 'Phone', title: 'Phone',
align: 'left', align: 'left',
dataIndex: 'telephone' dataIndex: 'telephone',
}, },
{ {
title: 'E-MAIL', title: 'E-MAIL',
align: 'left', align: 'left',
dataIndex: 'email' dataIndex: 'email',
}, },
{ {
title: '', title: '',
@ -146,31 +158,30 @@ const columns = [
scopedSlots: { scopedSlots: {
customRender: 'action', customRender: 'action',
}, },
} },
] ]
export default { export default {
data() { data() {
return { return {
activeKey:"", activeKey: '',
spinning:false, spinning: false,
page: { page: {
currentPage:1, currentPage: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
total:0 total: 0,
}, },
contactGroups:[], contactGroups: [],
isAdd:true, isAdd: true,
userList: [], userList: [],
groupList: [], groupList: [],
columns, columns,
visible: false, visible: false,
customStyle: customStyle: 'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden',
'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden',
targetKeys: [], targetKeys: [],
groupName: "", groupName: '',
currGroupId: "", currGroupId: '',
form: this.$form.createForm(this) form: this.$form.createForm(this),
} }
}, },
mounted() { mounted() {
@ -192,21 +203,21 @@ export default {
this.spinning = true this.spinning = true
let params = { let params = {
pageNo: this.page.currentPage, 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 this.spinning = false
if (res.success) { if (res.success) {
this.contactGroups = res.result.records this.contactGroups = res.result.records
this.activeKey = this.contactGroups[0].id this.activeKey = this.contactGroups[0].id
this.page.total = res.result.total this.page.total = res.result.total
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
editGroup(id) { editGroup(id) {
getAction("/alarmContactGroup/findInfo", {id}).then(res => { getAction('/alarmContactGroup/findInfo', { id }).then((res) => {
if (res.success) { if (res.success) {
this.visible = true this.visible = true
this.isAdd = false this.isAdd = false
@ -214,26 +225,26 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue({ this.form.setFieldsValue({
name: res.result.name, name: res.result.name,
}); })
}) })
this.targetKeys = res.result.userIds this.targetKeys = res.result.userIds
this.currGroupId = res.result.id this.currGroupId = res.result.id
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getAllUser() { getAllUser() {
getAction("sys/user/list").then(res => { getAction('sys/user/list').then((res) => {
if (res.success) { if (res.success) {
this.userList = res.result.records.map(item => { this.userList = res.result.records.map((item) => {
return { return {
key: item.id, key: item.id,
title:item.username title: item.username,
} }
}) })
} else { } 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 // this.groupName = e.target.value
// }, // },
handleChange(targetKeys, direction, moveKeys) { handleChange(targetKeys, direction, moveKeys) {
console.log(targetKeys, direction, moveKeys); console.log(targetKeys, direction, moveKeys)
this.targetKeys= targetKeys; this.targetKeys = targetKeys
}, },
handleOk() { handleOk() {
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
if (this.targetKeys.length>0) { if (this.targetKeys.length > 0) {
if (this.isAdd) { if (this.isAdd) {
this.createContactGroup(values.name) this.createContactGroup(values.name)
} else { } else {
this.updateContactGroup(values.name) this.updateContactGroup(values.name)
} }
} else { } else {
this.$message.warning("Please select User") this.$message.warning('Please select User')
} }
} }
}); })
}, },
onCancel() { onCancel() {
this.visible = false this.visible = false
@ -265,33 +276,33 @@ export default {
updateContactGroup(name) { updateContactGroup(name) {
let params = { let params = {
name, name,
description: "", description: '',
userIds: this.targetKeys, 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) { if (res.success) {
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getAlarmGroup() this.getAlarmGroup()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
createContactGroup(name) { createContactGroup(name) {
let params = { let params = {
name, name,
description: "", description: '',
userIds:this.targetKeys, userIds: this.targetKeys,
} }
postAction("/alarmContactGroup/create", params).then(res => { postAction('/alarmContactGroup/create', params).then((res) => {
if (res.success) { if (res.success) {
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getAlarmGroup() this.getAlarmGroup()
} else { } 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({ this.$confirm({
title: 'Are you sure to delete this item?', title: 'Are you sure to delete this item?',
onOk() { onOk() {
deleteAction("/alarmContactGroup/deleteById", {id}).then(res => { deleteAction('/alarmContactGroup/deleteById', { id }).then((res) => {
if (res.success) { if (res.success) {
_this.$message.success("success") _this.$message.success('success')
_this.getAlarmGroup() _this.getAlarmGroup()
} else { } else {
_this.$message.warning("This operation fails. Contact your system administrator") _this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onCancel() { onCancel() {
console.log('Cancel'); console.log('Cancel')
}, },
class: 'test', class: 'test',
}); })
}, },
deleteUser(id,userId) { deleteUser(id, userId) {
let _this = this let _this = this
this.$confirm({ this.$confirm({
title: 'Are you sure to delete this item?', title: 'Are you sure to delete this item?',
onOk() { onOk() {
deleteAction("/alarmContactGroup/deleteUserById", {id,userId}).then(res => { deleteAction('/alarmContactGroup/deleteUserById', { id, userId }).then((res) => {
if (res.success) { if (res.success) {
_this.$message.success("success") _this.$message.success('success')
_this.getAlarmGroup() _this.getAlarmGroup()
} else { } else {
_this.$message.warning("This operation fails. Contact your system administrator") _this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onCancel() { onCancel() {
console.log('Cancel'); console.log('Cancel')
} },
}); })
}, },
handleSearch(dir, value) { handleSearch(dir, value) {
console.log('search:', dir, value); console.log('search:', dir, value)
}, },
showModal() { showModal() {
this.targetKeys = [] this.targetKeys = []
this.groupName = "" this.groupName = ''
this.form.setFieldsValue({ this.form.setFieldsValue({
name: "", name: '',
}); })
this.visible = true; this.visible = true
}, },
}, },
} }
@ -357,7 +368,7 @@ export default {
width: 92px; width: 92px;
} }
} }
.group-header{ .group-header {
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 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; align-items: center;
padding: 0 10px; padding: 0 10px;
background: rgba(12, 235, 201, 0.05); background: rgba(12, 235, 201, 0.05);
.group-add{ .group-add {
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
box-shadow: 0px 1px 1px 0px #000000 box-shadow: 0px 1px 1px 0px #000000;
} }
} }
.group-content{ .group-content {
height: calc(100% - 65px); height: calc(100% - 65px);
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
.ant-spin-nested-loading{ .ant-spin-nested-loading {
width: 100%; width: 100%;
height: calc(100% - 30px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
} }
.header-sub{ .header-sub {
margin-left: 20px; margin-left: 20px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-size: 16px; font-size: 16px;
@ -393,15 +404,15 @@ export default {
// height: calc(100% - 30px); // height: calc(100% - 30px);
// overflow: auto; // overflow: auto;
// } // }
.actions{ .actions {
background: none; background: none;
border: none; border: none;
margin-left: 10px; margin-left: 10px;
} }
.split-float:last-child{ .split-float:last-child {
display: none; display: none;
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
@ -409,27 +420,27 @@ export default {
} }
} }
::v-deep { ::v-deep {
.ant-collapse-header{ .ant-collapse-header {
height: 50px; height: 50px;
background-color: rgba(13, 109, 118,0.2); background-color: rgba(13, 109, 118, 0.2);
font-family: ArialMT; font-family: ArialMT;
color: #fff !important; color: #fff !important;
line-height: 50px !important; line-height: 50px !important;
padding-left: 35px !important; padding-left: 35px !important;
font-size: 18px; font-size: 18px;
} }
.ant-collapse-content-box{ .ant-collapse-content-box {
padding: 15px !important; padding: 15px !important;
} }
.ant-modal-title{ .ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
.ant-form-item-label > label{ .ant-form-item-label > label {
font-family: ArialMT; font-family: ArialMT;
color: #5b9cba; color: #5b9cba;
} }
} }
.group-assign{ .group-assign {
position: relative; position: relative;
width: 690px; width: 690px;
margin: 0 auto; margin: 0 auto;
@ -504,32 +515,32 @@ export default {
} }
} }
} }
.ant-transfer-list-header{ .ant-transfer-list-header {
position: relative; position: relative;
.ant-checkbox-wrapper{ .ant-checkbox-wrapper {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
} }
.ant-transfer-list-content-item{ .ant-transfer-list-content-item {
position: relative; position: relative;
&::before{ &::before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: url(~@/assets/images/abnormalAlarm/user.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/user.png) no-repeat;
background-size: contain; background-size: contain;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.ant-checkbox-wrapper{ .ant-checkbox-wrapper {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
} }
.ant-transfer-list-content-item-text{ .ant-transfer-list-content-item-text {
padding-left: 22px; padding-left: 22px;
} }
} }
@ -549,12 +560,12 @@ export default {
user-select: none; user-select: none;
} }
} }
.transfer-left-item{ .transfer-left-item {
position: relative; position: relative;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
font-size: 14px; font-size: 14px;
&-checkBox{ &-checkBox {
float: right; float: right;
} }
} }

577
src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
View File

File diff suppressed because it is too large Load Diff

427
src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue
View File

@ -1,26 +1,25 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="rules-header"> <div class="rules-header">
<a-row type="flex" :gutter="10"> <a-row type="flex" :gutter="10">
<a-col flex="190px"> <a-col flex="190px">
<a-button class="rules-add" @click="handleAdd"> <a-button class="rules-add" @click="handleAdd">
<img class="icon-add" src="@/assets/images/global/add.png" alt="" /> <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Create Alarm Rule </span>
Create Alarm Rule
</span>
</a-button> </a-button>
</a-col> </a-col>
<a-col flex="265px"> <a-col flex="265px">
<span class="item-label">Stations</span> <span class="item-label">Stations</span>
<a-select style="width:180px" <a-select
v-model="queryParams.station" style="width: 180px"
mode="multiple" v-model="queryParams.station"
mode="multiple"
placeholder="select..." placeholder="select..."
:maxTagCount="1" :maxTagCount="1"
:filter-option="filterOption" :filter-option="filterOption"
show-arrow show-arrow
allowClear allowClear
:options="stationOptions" :options="stationOptions"
@change="onStationChange" @change="onStationChange"
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@ -28,23 +27,20 @@
</a-col> </a-col>
<a-col flex="294px"> <a-col flex="294px">
<span class="item-label">Sources</span> <span class="item-label">Sources</span>
<DicSelect <DicSelect v-model="queryParams.source" placeholder="select..." dictCode="alarm_analyse_rule_source" />
v-model="queryParams.source"
placeholder="select..."
dictCode="alarm_analyse_rule_source"
/>
</a-col> </a-col>
<a-col flex="275px"> <a-col flex="275px">
<span class="item-label">Nuclide</span> <span class="item-label">Nuclide</span>
<a-select style="width:180px" <a-select
v-model="queryParams.nuclide" style="width: 180px"
mode="multiple" v-model="queryParams.nuclide"
mode="multiple"
placeholder="select..." placeholder="select..."
:maxTagCount="1" :maxTagCount="1"
:filter-option="filterOption" :filter-option="filterOption"
show-arrow show-arrow
allowClear allowClear
:options="nuclideOptions" :options="nuclideOptions"
@change="onNuclideChange" @change="onNuclideChange"
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@ -53,9 +49,7 @@
<a-col> <a-col>
<a-button class="search-btn" @click="onSearch"> <a-button class="search-btn" @click="onSearch">
<img class="icon-add" src="@/assets/images/global/search.png" alt="" /> <img class="icon-add" src="@/assets/images/global/search.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Search </span>
Search
</span>
</a-button> </a-button>
</a-col> </a-col>
</a-row> </a-row>
@ -67,8 +61,8 @@
<div class="monitor-list-item-title"> <div class="monitor-list-item-title">
<div class="monitor-list-item-title-name">{{ item.name }}</div> <div class="monitor-list-item-title-name">{{ item.name }}</div>
<div class="monitor-list-item-title-server"> <div class="monitor-list-item-title-server">
<span style="color: #5b9cba;">Qualifier：</span> <span style="color: #5b9cba">Qualifier：</span>
<span style="color: #ade6ee;">{{ item.spectralQualifier.join("、") }}</span> <span style="color: #ade6ee">{{ item.spectralQualifier.join('、') }}</span>
</div> </div>
</div> </div>
<div class="monitor-list-item-content"> <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-col :span="4" class="monitor-list-item-content-info-key">Source：</a-col>
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ item.source.join("、") }} {{ item.source.join('、') }}
</template> </template>
<a-col :span="18" class="monitor-list-item-content-info-val"> <a-col :span="18" class="monitor-list-item-content-info-val">
{{ item.source.join("、") }} {{ item.source.join('、') }}
</a-col> </a-col>
</a-tooltip> </a-tooltip>
</a-row> </a-row>
@ -88,10 +82,10 @@
<a-col :span="4" class="monitor-list-item-content-info-key">Stations：</a-col> <a-col :span="4" class="monitor-list-item-content-info-key">Stations：</a-col>
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ item.stations.join("、") }} {{ item.stations.join('、') }}
</template> </template>
<a-col :span="18" class="monitor-list-item-content-info-val"> <a-col :span="18" class="monitor-list-item-content-info-val">
{{ item.stations.join("、") }} {{ item.stations.join('、') }}
</a-col> </a-col>
</a-tooltip> </a-tooltip>
</a-row> </a-row>
@ -99,99 +93,114 @@
<a-col :span="4" class="monitor-list-item-content-info-key">Nuclides：</a-col> <a-col :span="4" class="monitor-list-item-content-info-key">Nuclides：</a-col>
<a-tooltip> <a-tooltip>
<template slot="title"> <template slot="title">
{{ item.nuclides.join("、") }} {{ item.nuclides.join('、') }}
</template> </template>
<a-col :span="18" class="monitor-list-item-content-info-val"> <a-col :span="18" class="monitor-list-item-content-info-val">
{{ item.nuclides.join("、") }} {{ item.nuclides.join('、') }}
</a-col> </a-col>
</a-tooltip> </a-tooltip>
</a-row> </a-row>
</div> </div>
<div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']"> <div
{{ item.enabled==1?"Enable":"Disabled" }} :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> </div>
<div class="monitor-list-item-footer"> <div class="monitor-list-item-footer">
<div class="monitor-list-item-footer-group"> <div class="monitor-list-item-footer-group">
<span style="color: #5b9cba;">Alarm Contact Group：</span> <span style="color: #5b9cba">Alarm Contact Group：</span>
<span style="color: #ade6ee;">{{ item.groupName }}</span> <span style="color: #ade6ee">{{ item.groupName }}</span>
</div> </div>
<div class="monitor-list-item-footer-actions"> <div class="monitor-list-item-footer-actions">
<span title="Edit" class="actions-edit" @click="editItem(item.id)"></span> <span title="Edit" class="actions-edit" @click="editItem(item.id)"></span>
<span title="Delete" class="actions-delete" @click="deleteItem(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>
<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> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</a-spin> </a-spin>
<a-pagination <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
:page-size-options="ipagination.pageSizeOptions" :page-size-options="ipagination.pageSizeOptions"
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
show-less-items (total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
<a-modal <a-modal
:title="isAdd ? 'Add Rule' : 'Edit Rule'" :title="isAdd ? 'Add Rule' : 'Edit Rule'"
:width="800" :width="800"
v-model="visible" v-model="visible"
:maskClosable="false"
@cancel="onCancel" @cancel="onCancel"
> >
<a-form <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
:form="form"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item label="Name"> <a-form-item label="Name">
<a-input <a-input
v-decorator="[ v-decorator="[
'name', 'name',
{ {
rules: [{ required: true, message: 'Please input name!' }], rules: [{ required: true, message: 'Please input name!' }],
initialVale: this.formVal.name initialVale: this.formVal.name,
} },
]" ]"
/> />
</a-form-item> </a-form-item>
<a-form-item label="Source"> <a-form-item label="Source">
<dic-select <dic-select
type="checkbox" type="checkbox"
dictCode="alarm_analyse_rule_source" dictCode="alarm_analyse_rule_source"
v-decorator="[ v-decorator="[
'source', 'source',
{ {
rules: [{ required: true }], rules: [{ required: true }],
initialVale: this.formVal.source initialVale: this.formVal.source,
} },
]" ]"
/> />
</a-form-item> </a-form-item>
<a-form-item label="Station"> <a-form-item label="Station">
<a-select <a-select
class="form-select" class="form-select"
mode="multiple" mode="multiple"
placeholder="select..." placeholder="select..."
:filter-option="filterOption" :filter-option="filterOption"
show-arrow show-arrow
:options="stationOptions" :options="stationOptions"
v-decorator="[ v-decorator="[
'station', 'station',
{ {
rules: [{ required: true, message: 'Please select 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="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@ -200,18 +209,18 @@
<a-form-item label="Nuclide"> <a-form-item label="Nuclide">
<a-select <a-select
class="form-select" class="form-select"
mode="multiple" mode="multiple"
placeholder="select..." placeholder="select..."
:maxTagCount="5" :maxTagCount="5"
:filter-option="filterOption" :filter-option="filterOption"
show-arrow show-arrow
:options="nuclideOptions" :options="nuclideOptions"
v-decorator="[ v-decorator="[
'nuclide', 'nuclide',
{ {
rules: [{ required: true, message: 'Please select 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="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@ -222,11 +231,11 @@
type="checkbox" type="checkbox"
dictCode="spectral_qualifier" dictCode="spectral_qualifier"
v-decorator="[ v-decorator="[
'qualifier', 'qualifier',
{ {
rules: [{ required: true }], rules: [{ required: true }],
initialVale: this.formVal.qualifier initialVale: this.formVal.qualifier,
} },
]" ]"
/> />
</a-form-item> </a-form-item>
@ -236,11 +245,11 @@
layout="vertical" layout="vertical"
dictCode="alarm_analyse_rule_condition" dictCode="alarm_analyse_rule_condition"
v-decorator="[ v-decorator="[
'condition', 'condition',
{ {
rules: [{ required: true }], rules: [{ required: true }],
initialVale: this.formVal.condition initialVale: this.formVal.condition,
} },
]" ]"
> >
</dic-select> </dic-select>
@ -248,16 +257,16 @@
<a-form-item label="Contact Group"> <a-form-item label="Contact Group">
<a-select <a-select
class="form-select" class="form-select"
:options="contactGroupOptions" :options="contactGroupOptions"
show-arrow show-arrow
allowClear allowClear
placeholder="select..." placeholder="select..."
v-decorator="[ v-decorator="[
'contactGroup', 'contactGroup',
{ {
rules: [{ required: true }], rules: [{ required: true }],
initialVale: this.formVal.contactGroup initialVale: this.formVal.contactGroup,
} },
]" ]"
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@ -265,12 +274,12 @@
</a-form-item> </a-form-item>
<a-form-item label="Remark"> <a-form-item label="Remark">
<a-input <a-input
type="textarea" type="textarea"
v-decorator="[ v-decorator="[
'remark', 'remark',
{ {
initialVale: this.formVal.remark initialVale: this.formVal.remark,
} },
]" ]"
/> />
</a-form-item> </a-form-item>
@ -278,7 +287,7 @@
<template slot="footer"> <template slot="footer">
<a-space class="operators" :size="20"> <a-space class="operators" :size="20">
<a-button type="success" @click="onSave">Save</a-button> <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> </a-space>
</template> </template>
</a-modal> </a-modal>
@ -287,7 +296,7 @@
<script> <script>
import { getAction, postAction, httpAction, deleteAction, putAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction, putAction } from '@/api/manage'
import DicSelect from '../../components/dicSelect.vue'; import DicSelect from '../../components/dicSelect.vue'
export default { export default {
components: { components: {
DicSelect, DicSelect,
@ -300,21 +309,21 @@ export default {
queryParams: { queryParams: {
station: undefined, station: undefined,
source: undefined, source: undefined,
nuclide: undefined nuclide: undefined,
}, },
sourceOptions: [ sourceOptions: [
{ {
label: "IDC", label: 'IDC',
value: "idc" value: 'idc',
}, },
{ {
label: "ARMD", label: 'ARMD',
value: "armd" value: 'armd',
} },
], ],
stationOptions: [], stationOptions: [],
nuclideOptions: [], nuclideOptions: [],
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 9, pageSize: 9,
pageSizeOptions: ['9', '18', '27'], pageSizeOptions: ['9', '18', '27'],
@ -324,66 +333,66 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
form: this.$form.createForm(this), form: this.$form.createForm(this),
contactGroupOptions: [], contactGroupOptions: [],
formVal: { formVal: {
name: "", name: '',
source: null, source: null,
station: undefined, station: undefined,
nuclide: undefined, nuclide: undefined,
qualifier: null, qualifier: null,
condition: null, condition: null,
contactGroup: undefined, contactGroup: undefined,
remark: "" remark: '',
}, },
monitorList: [], monitorList: [],
currId:"", currId: '',
} }
}, },
created () { created() {
this.getStationList(); this.getStationList()
this.getNuclideList(); this.getNuclideList()
this.getAlarmGroup(); this.getAlarmGroup()
this.getAlarmRulesPage() this.getAlarmRulesPage()
}, },
methods: { methods: {
getStationList() { getStationList() {
getAction("/webStatistics/findStationList",{menuName:""}).then(res => { getAction('/webStatistics/findStationList', { menuName: '' }).then((res) => {
if (res.success) { if (res.success) {
if (res.result.length>0) { if (res.result.length > 0) {
this.stationOptions = res.result.map(item => { this.stationOptions = res.result.map((item) => {
return { return {
label: item.stationCode, label: item.stationCode,
value: `${item.stationId}` value: `${item.stationId}`,
} }
}) })
} else { } else {
this.stationOptions=[] this.stationOptions = []
} }
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getNuclideList() { getNuclideList() {
getAction("/sys/defaultNuclide/allName",{useType:2}).then(res => { getAction('/sys/defaultNuclide/allName', { useType: 2 }).then((res) => {
if (res.success) { if (res.success) {
if (res.result.length>0) { if (res.result.length > 0) {
this.nuclideOptions = res.result.map(item => { this.nuclideOptions = res.result.map((item) => {
return { return {
label: item, label: item,
value: item value: item,
} }
}) })
} else { } else {
this.nuclideOptions=[] this.nuclideOptions = []
} }
} else { } 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 this.visible = true
}, },
filterOption(input, option) { filterOption(input, option) {
return ( return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
}, },
onStationChange(val) { onStationChange(val) {
this.queryParams.station = val this.queryParams.station = val
@ -412,15 +419,15 @@ export default {
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
stations: this.queryParams.station, stations: this.queryParams.station,
source: this.queryParams.source, 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 this.spinning = false
if (res.success) { if (res.success) {
this.monitorList = res.result.records this.monitorList = res.result.records
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
} else { } 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.ipagination.current = 1
this.getAlarmRulesPage() this.getAlarmRulesPage()
}, },
editItem(id) { editItem(id) {
this.currId = id this.currId = id
getAction("/alarmAnalysisRule/finInfo", { id }).then( res => { getAction('/alarmAnalysisRule/finInfo', { id }).then((res) => {
if (res.success) { if (res.success) {
this.isAdd = false this.isAdd = false
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
@ -443,40 +450,40 @@ export default {
qualifier: res.result.qualifierChecked.join(','), qualifier: res.result.qualifierChecked.join(','),
condition: res.result.conditionChecked.join(','), condition: res.result.conditionChecked.join(','),
contactGroup: res.result.contactGroup, contactGroup: res.result.contactGroup,
remark: res.result.remark remark: res.result.remark,
}); })
}) })
} else { } 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 let _this = this
this.$confirm({ this.$confirm({
title: 'Are you sure to delete this item?', title: 'Are you sure to delete this item?',
onOk() { onOk() {
deleteAction("/alarmAnalysisRule/delete", {id:id}).then(res => { deleteAction('/alarmAnalysisRule/delete', { id: id }).then((res) => {
if (res.success) { if (res.success) {
_this.$message.success("success") _this.$message.success('success')
_this.getAlarmRulesPage() _this.getAlarmRulesPage()
} else { } else {
_this.$message.warning("This operation fails. Contact your system administrator") _this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onCancel() { onCancel() {
console.log('Cancel'); console.log('Cancel')
}, },
}); })
}, },
changeItemStatus(id, isEnabled) { changeItemStatus(id, isEnabled) {
putAction(`/alarmAnalysisRule/updateStatus?id=${id}&enabled=${isEnabled==1?0:1}`).then(res => { putAction(`/alarmAnalysisRule/updateStatus?id=${id}&enabled=${isEnabled == 1 ? 0 : 1}`).then((res) => {
if (res.success) { if (res.success) {
this.$message.success("success") this.$message.success('success')
this.getAlarmRulesPage() this.getAlarmRulesPage()
} else { } 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() { getAlarmGroup() {
let params = { let params = {
pageNo: 1, pageNo: 1,
pageSize: 9999 pageSize: 9999,
} }
getAction("/alarmContactGroup/findPage", params).then(res => { getAction('/alarmContactGroup/findPage', params).then((res) => {
if (res.success) { if (res.success) {
this.contactGroupOptions = res.result.records.map(item => { this.contactGroupOptions = res.result.records.map((item) => {
return { return {
label: item.name, label: item.name,
value: item.id value: item.id,
} }
}) })
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onSave() { onSave() {
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
let params = { let params = {
conditions:values.condition, conditions: values.condition,
name:values.name, name: values.name,
remark:values.remark, remark: values.remark,
stations:values.station.join(","), stations: values.station.join(','),
source: values.source, source: values.source,
nuclides:values.nuclide.join(","), nuclides: values.nuclide.join(','),
contactGroup:values.contactGroup, contactGroup: values.contactGroup,
spectralQualifier: values.qualifier, spectralQualifier: values.qualifier,
} }
if (this.isAdd) { if (this.isAdd) {
postAction("/alarmAnalysisRule/add", params).then(res => { postAction('/alarmAnalysisRule/add', params).then((res) => {
if (res.success) { if (res.success) {
this.visible = false this.visible = false
this.form.resetFields() this.form.resetFields()
this.$message.success("success") this.$message.success('success')
this.getAlarmRulesPage() this.getAlarmRulesPage()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
} else { } else {
httpAction("/alarmAnalysisRule/edit", {...params,id: this.currId}, "put").then(res => { httpAction('/alarmAnalysisRule/edit', { ...params, id: this.currId }, 'put').then((res) => {
if (res.success) { if (res.success) {
this.visible = false this.visible = false
this.form.resetFields() this.form.resetFields()
this.$message.success("success") this.$message.success('success')
this.getAlarmRulesPage() this.getAlarmRulesPage()
} else { } 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ant-row-flex{ .ant-row-flex {
flex-flow: nowrap; flex-flow: nowrap;
} }
.ant-select{ .ant-select {
width: 206px; width: 206px;
} }
.form-select{ .form-select {
width: 100%; width: 100%;
} }
.operators { .operators {
@ -572,10 +579,10 @@ export default {
width: 92px; width: 92px;
} }
} }
/deep/.ant-modal-title{ /deep/.ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
.rules-header{ .rules-header {
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 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; justify-content: space-between;
padding: 0 10px; padding: 0 10px;
background: rgba(12, 235, 201, 0.05); background: rgba(12, 235, 201, 0.05);
.item-label{ .item-label {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
font-family: ArialMT; font-family: ArialMT;
@ -594,44 +601,44 @@ export default {
height: 32px; height: 32px;
margin-right: 10px; margin-right: 10px;
} }
.rules-add{ .rules-add {
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
} }
.search-btn{ .search-btn {
margin-left: 10px; margin-left: 10px;
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
} }
.rules-reset{ .rules-reset {
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
float: right; float: right;
} }
} }
.rules-content{ .rules-content {
height: calc(100% - 65px); height: calc(100% - 65px);
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.ant-spin-nested-loading{ .ant-spin-nested-loading {
width: 100%; width: 100%;
height: calc(100% - 40px); height: calc(100% - 40px);
} }
.monitor-list{ .monitor-list {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-wrap:wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-content: flex-start; align-content: flex-start;
&-item{ &-item {
width: 32.76%; width: 32.76%;
height: 224px; height: 224px;
// margin-top: 15px; // margin-top: 15px;
@ -639,7 +646,7 @@ export default {
border: solid 1px rgba(65, 111, 127, 0.5); border: solid 1px rgba(65, 111, 127, 0.5);
position: relative; position: relative;
margin-top: 15px; margin-top: 15px;
&-title{ &-title {
height: 50px; height: 50px;
padding: 0 15px 0 20px; padding: 0 15px 0 20px;
background-color: rgba(13, 109, 118, 0.2); background-color: rgba(13, 109, 118, 0.2);
@ -648,11 +655,11 @@ export default {
justify-content: space-between; justify-content: space-between;
line-height: 50px; line-height: 50px;
font-family: ArialMT; font-family: ArialMT;
&-name{ &-name {
font-size: 16px; font-size: 16px;
color: #00bded; color: #00bded;
} }
&-server{ &-server {
width: 55%; width: 55%;
font-size: 14px; font-size: 14px;
text-align: right; text-align: right;
@ -661,18 +668,18 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
} }
&-content{ &-content {
padding: 15px 20px; padding: 15px 20px;
&-info{ &-info {
font-family: ArialMT; font-family: ArialMT;
font-size: 16px; font-size: 16px;
color: #ade6ee; color: #ade6ee;
&-key{ &-key {
// display: inline-block; // display: inline-block;
// width: 120px; // width: 120px;
// vertical-align: middle; // vertical-align: middle;
} }
&-val{ &-val {
margin-left: 5px; margin-left: 5px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -680,19 +687,19 @@ export default {
vertical-align: middle; vertical-align: middle;
} }
} }
&-btn{ &-btn {
margin-top: 10px; margin-top: 10px;
display: inline-block; display: inline-block;
padding: 3px 10px; padding: 3px 10px;
} }
&-enable{ &-enable {
background-color: #098839; background-color: #098839;
} }
&-disable{ &-disable {
background-color: #8a8a8a; background-color: #8a8a8a;
} }
} }
&-footer{ &-footer {
width: 100%; width: 100%;
height: 32px; height: 32px;
position: absolute; position: absolute;
@ -701,48 +708,48 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&-group{ &-group {
font-family: ArialMT; font-family: ArialMT;
font-size: 14px; font-size: 14px;
} }
&-actions{ &-actions {
display: flex; display: flex;
align-items: center; align-items: center;
span{ span {
display: inline-block; display: inline-block;
width: 26px; width: 26px;
height: 26px; height: 26px;
margin-left: 5px; margin-left: 5px;
cursor: pointer; cursor: pointer;
} }
.actions-edit{ .actions-edit {
background: url(~@/assets/images/abnormalAlarm/edit.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/edit.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
&:hover{ &:hover {
background: url(~@/assets/images/abnormalAlarm/edit-active.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/edit-active.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.actions-delete{ .actions-delete {
background: url(~@/assets/images/abnormalAlarm/delete.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/delete.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
&:hover{ &:hover {
background: url(~@/assets/images/abnormalAlarm/delete-active.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/delete-active.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.actions-enable{ .actions-enable {
background: url(~@/assets/images/abnormalAlarm/enable.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/enable.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
&:hover{ &:hover {
background: url(~@/assets/images/abnormalAlarm/enable-active.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/enable-active.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.actions-disable{ .actions-disable {
background: url(~@/assets/images/abnormalAlarm/disable.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/disable.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
&:hover{ &:hover {
background: url(~@/assets/images/abnormalAlarm/disable-active.png) no-repeat; background: url(~@/assets/images/abnormalAlarm/disable-active.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -750,12 +757,12 @@ export default {
} }
} }
} }
&::after{ &::after {
content: ''; content: '';
width: 32.76%; width: 32.76%;
} }
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;

205
src/views/abnormalAlarm/analysisMonitor/avgNuclide/index.vue
View File

@ -1,17 +1,15 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="search-bar"> <div class="search-bar">
<a-row type="flex"> <a-row type="flex">
<a-col flex="108px"> <a-col flex="108px">
<a-button class="search-btn" type="primary" @click="handleConfig"> <a-button class="search-btn" type="primary" @click="handleConfig"> Config </a-button>
Config
</a-button>
</a-col> </a-col>
<a-col flex="380px"> <a-col flex="380px">
<span class="item-label">Cacl date</span> <span class="item-label">Cacl date</span>
<a-range-picker <a-range-picker
:value="[moment(queryParams.startDate), moment(queryParams.endDate)]" :value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
@change="onRangeDateChange" @change="onRangeDateChange"
/> />
</a-col> </a-col>
</a-row> </a-row>
@ -27,59 +25,58 @@
:canSelect="false" :canSelect="false"
> >
</TableList> </TableList>
<a-pagination <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
:page-size-options="ipagination.pageSizeOptions" :page-size-options="ipagination.pageSizeOptions"
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
show-less-items (total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
<a-modal <a-modal title="Config" v-model="visible" :maskClosable="false" @cancel="onCancel">
title="Config" <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
v-model="visible" <a-form-item label="Cycle">
@cancel="onCancel" <a-input-number
> v-decorator="[
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }"> 'days',
<a-form-item label="Cycle"> {
<a-input-number rules: [
v-decorator="[ { required: true, message: 'Please input days!' },
'days', { pattern: new RegExp('^[1-9]\\d*$'), message: 'Please input a positive integer!' },
{ ],
rules: [ initialVale: this.formVal.days,
{ required: true, message: 'Please input days!' }, },
{ pattern: new RegExp('^[1-9]\\d*$'), message: 'Please input a positive integer!' }, ]"
], />days
initialVale: this.formVal.days </a-form-item>
} <a-form-item label="Index">
]" <a-input-number
/>days v-decorator="[
</a-form-item> 'index',
<a-form-item label="Index"> {
<a-input-number rules: [
v-decorator="[ { required: true, message: 'Please input index!' },
'index', { pattern: new RegExp('^([1-9]|[1-9]\\d|100)$'), message: 'Please input an integer from 1 to 100!' },
{ ],
rules: [ initialVale: this.formVal.index,
{ 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-form-item>
</a-form>
<template slot="footer"> <template slot="footer">
<a-space class="operators" :size="20"> <a-space class="operators" :size="20">
<a-button type="success" @click="onSave">Save</a-button> <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> </a-space>
</template> </template>
</a-modal> </a-modal>
@ -88,31 +85,35 @@
<script> <script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import moment from 'moment'; import moment from 'moment'
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [ const columns = [
{ {
title: 'NUCLIDE', title: 'NUCLIDE',
align: 'center', align: 'center',
dataIndex: 'nuclide', dataIndex: 'nuclide',
},{ },
{
title: 'VALUE', title: 'VALUE',
align: 'center', align: 'center',
dataIndex: 'val', dataIndex: 'val',
},{ },
{
title: 'SOURCE TYPE', title: 'SOURCE TYPE',
align: 'center', align: 'center',
dataIndex: 'datasource', dataIndex: 'datasource',
},{ },
{
title: 'CACL DATE', title: 'CACL DATE',
align: 'center', align: 'center',
dataIndex: 'caclDate', dataIndex: 'caclDate',
},{ },
{
title: 'CYCLE', title: 'CYCLE',
align: 'center', align: 'center',
dataIndex: 'cycle' dataIndex: 'cycle',
} },
] ]
export default { export default {
components: { components: {
@ -125,9 +126,9 @@ export default {
loading: false, loading: false,
queryParams: { queryParams: {
startDate: dateFormat(new Date(), 'yyyy-MM-dd'), 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, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -137,63 +138,63 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
isAdd: true, isAdd: true,
visible: false, visible: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
formVal: { formVal: {
days:"", days: '',
index: "", index: '',
}, },
currId:"" currId: '',
} }
}, },
created () { created() {
this.queryParams.startDate = this.getBeforeDate(1) this.queryParams.startDate = this.getBeforeDate(1)
}, },
mounted () { mounted() {
this.getNuclideAvgList(); this.getNuclideAvgList()
}, },
methods: { methods: {
// 获取n天前的日期 // 获取n天前的日期
getBeforeDate(n){ getBeforeDate(n) {
var n = n; var n = n
var d = new Date(); var d = new Date()
var year = d.getFullYear(); var year = d.getFullYear()
var mon=d.getMonth()+1; var mon = d.getMonth() + 1
var day=d.getDate(); var day = d.getDate()
if(day <= n){ if (day <= n) {
if(mon>1) { if (mon > 1) {
mon=mon-1; mon = mon - 1
} else { } else {
year = year-1; year = year - 1
mon = 12; mon = 12
} }
} }
d.setDate(d.getDate()-n); d.setDate(d.getDate() - n)
year = d.getFullYear(); year = d.getFullYear()
mon=d.getMonth()+1; mon = d.getMonth() + 1
day=d.getDate(); day = d.getDate()
var s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day); var s = year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day)
return s; return s
}, },
moment, moment,
getNuclideAvgList() { getNuclideAvgList() {
this.loading = true this.loading = true
let params = { let params = {
startDate:this.queryParams.startDate, startDate: this.queryParams.startDate,
endDate:this.queryParams.endDate, endDate: this.queryParams.endDate,
pageNo: this.ipagination.current, 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 this.loading = false
if (res.success) { if (res.success) {
this.dataSource = res.result.records this.dataSource = res.result.records
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
} else { } 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() { handleConfig() {
this.visible = true this.visible = true
getAction("/nuclideParam/findInfo").then(res => { getAction('/nuclideParam/findInfo').then((res) => {
if (res.success) { if (res.success) {
this.currId = res.result.id this.currId = res.result.id
this.form.setFieldsValue({ this.form.setFieldsValue({
days: res.result.days, days: res.result.days,
index: res.result.index*100 index: res.result.index * 100,
}); })
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onSave() { onSave() {
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
let params = { let params = {
id: this.currId, id: this.currId,
days: values.days, 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) { if (res.success) {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
} else { } else {
this.$message.info(res.result.message) this.$message.info(res.result.message)
} }
@ -255,7 +256,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.search-bar{ .search-bar {
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 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; padding: 8px 10px;
background: rgba(12, 235, 201, 0.05); background: rgba(12, 235, 201, 0.05);
} }
.ant-calendar-picker{ .ant-calendar-picker {
width: 270px; width: 270px;
} }
.search-btn { .search-btn {
margin-bottom: 10px; margin-bottom: 10px;
} }
/deep/ .ant-calendar-range-picker-separator{ /deep/ .ant-calendar-range-picker-separator {
color: white; color: white;
} }
.item-label{ .item-label {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
font-family: ArialMT; font-family: ArialMT;
@ -281,7 +282,7 @@ export default {
height: 32px; height: 32px;
margin-right: 10px; margin-right: 10px;
} }
.analysis-main{ .analysis-main {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
overflow: hidden; overflow: hidden;
@ -289,7 +290,7 @@ export default {
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
@ -302,12 +303,12 @@ export default {
width: 92px; width: 92px;
} }
} }
/deep/.ant-modal-title{ /deep/.ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
.ant-input-number{ .ant-input-number {
width: 85%; width: 85%;
margin-right: 10px; margin-right: 10px;
background-color: #03353f !important background-color: #03353f !important;
} }
</style> </style>

378
src/views/abnormalAlarm/databaseMonitor/overview/index.vue
View File

@ -1,31 +1,25 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="view-header"> <div class="view-header">
<div class="view-num">Alarms：<span>{{ alarmTotal }}</span></div> <div class="view-num">
Alarms：<span>{{ alarmTotal }}</span>
</div>
<div> <div>
<a-button class="view-btn" @click="onAdd"> <a-button class="view-btn" @click="onAdd">
<img class="icon-add" src="@/assets/images/global/add.png" alt="" /> <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Add </span>
Add
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="onEdit"> <a-button class="view-btn" @click="onEdit">
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" /> <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Edit </span>
Edit
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="onDelete"> <a-button class="view-btn" @click="onDelete">
<img class="icon-add" src="@/assets/images/global/delete.png" alt="" /> <img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Delete </span>
Delete
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="getSysDatabase"> <a-button class="view-btn" @click="getSysDatabase">
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" /> <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Refresh </span>
Refresh
</span>
</a-button> </a-button>
</div> </div>
</div> </div>
@ -42,120 +36,121 @@
@cancleRowClick="cancelRow" @cancleRowClick="cancelRow"
@rowDbclick="onRowDbclick" @rowDbclick="onRowDbclick"
> >
<template slot="status" slot-scope="{record}"> <template slot="status" slot-scope="{ record }">
<div> <div>
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt=""> <img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="" />
<img v-else src="@/assets/images/abnormalAlarm/off.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> <span :class="[record.online ? 'status-on' : 'status-off']">{{
record.online ? 'Connecting' : 'Disconnect'
}}</span>
</div> </div>
</template> </template>
<template slot="alarms" slot-scope="{text,record}"> <template slot="alarms" slot-scope="{ text, record }">
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span> <span :class="[record.alarmRed ? 'isAlarm' : '', 'alarm-text']">{{ text }}</span>
</template> </template>
<template slot="cpu" slot-scope="{text,record}"> <template slot="cpu" slot-scope="{ text, record }">
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span> <span :class="[record.cpuRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
</template> </template>
<template slot="memory" slot-scope="{text,record}"> <template slot="memory" slot-scope="{ text, record }">
<span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span> <span :class="[record.memoryRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
</template> </template>
<template slot="disk" slot-scope="{text,record}"> <template slot="disk" slot-scope="{ text, record }">
<span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span> <span :class="[record.diskRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
</template> </template>
</TableList> </TableList>
</div> </div>
<a-pagination <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
:page-size-options="ipagination.pageSizeOptions" :page-size-options="ipagination.pageSizeOptions"
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
show-less-items (total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
<a-modal <a-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :maskClosable="false" @cancel="onCancel">
:title="isAdd ? 'Add' : 'Edit'" <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
v-model="visible" <a-form-item label="Name">
@cancel="onCancel" <a-input
> v-decorator="[
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"> 'name',
<a-form-item label="Name"> {
<a-input rules: [{ required: true, message: 'Please input name!' }],
v-decorator="[ initialVale: this.formVal.name,
'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"
</a-form-item> dict-code="database_type"
<a-form-item label="DB Type"> v-decorator="[
<j-dict-select-tag 'type',
placeholder="Please select a database type" {
dict-code="database_type" rules: [{ required: true, message: 'Please select a DB Type!' }],
v-decorator="[ initialVale: this.formVal.type,
'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="[
</a-form-item> 'port',
<a-form-item label="DB Port"> {
<a-input-number rules: [{ required: true, message: 'Please input port!' }],
v-decorator="[ initialVale: this.formVal.port,
'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="[
</a-form-item> 'ipAddress',
<a-form-item label="Ip Address"> {
<a-input rules: [{ required: true, message: 'Please input ip address!' }],
v-decorator="[ initialVale: this.formVal.ipAddress,
'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="[
</a-form-item> 'username',
<a-form-item label="DB Username"> {
<a-input rules: [{ required: true, message: 'Please input username!' }],
v-decorator="[ initialVale: this.formVal.username,
'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="[
</a-form-item> 'password',
<a-form-item label="DB Password"> {
<a-input rules: [{ required: true, message: 'Please input DB Password!' }],
v-decorator="[ initialVale: this.formVal.password,
'password', },
{ ]"
rules: [{ required: true, message: 'Please input DB Password!' }], />
initialVale: this.formVal.password </a-form-item>
} </a-form>
]"
/>
</a-form-item>
</a-form>
<template slot="footer"> <template slot="footer">
<a-space class="operators" :size="20"> <a-space class="operators" :size="20">
<a-button type="success" @click="onSave">Save</a-button> <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> </a-space>
</template> </template>
</a-modal> </a-modal>
@ -163,64 +158,73 @@
</template> </template>
<script> <script>
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [ const columns = [
{ {
title: 'NAME', title: 'NAME',
align: 'center', align: 'center',
dataIndex: 'name' dataIndex: 'name',
},{ },
{
title: 'STATUS', title: 'STATUS',
align: 'center', align: 'center',
dataIndex: 'online', dataIndex: 'online',
scopedSlots: { scopedSlots: {
customRender: 'status' customRender: 'status',
} },
},{ },
{
title: 'IP ADDRESS', title: 'IP ADDRESS',
align: 'center', align: 'center',
dataIndex: 'ipAddress' dataIndex: 'ipAddress',
},{ },
{
title: 'DB TYPE', title: 'DB TYPE',
align: 'center', align: 'center',
dataIndex: 'dataBaseType' dataIndex: 'dataBaseType',
},{ },
{
title: 'PROT', title: 'PROT',
align: 'center', align: 'center',
dataIndex: 'port' dataIndex: 'port',
},{ },
{
title: 'SLOW QUERY', title: 'SLOW QUERY',
align: 'center', align: 'center',
dataIndex: 'slowQuery' dataIndex: 'slowQuery',
},{ },
{
title: 'ALARMS', title: 'ALARMS',
align: 'center', align: 'center',
dataIndex: 'alarms', dataIndex: 'alarms',
scopedSlots: { scopedSlots: {
customRender: 'alarms', customRender: 'alarms',
} },
},{ },
{
title: 'CPU UTILIZATION', title: 'CPU UTILIZATION',
align: 'center', align: 'center',
dataIndex: 'cpuUutilzation', dataIndex: 'cpuUutilzation',
scopedSlots: { scopedSlots: {
customRender: 'cpu', customRender: 'cpu',
} },
},{ },
{
title: 'MEMORY USAGE', title: 'MEMORY USAGE',
align: 'center', align: 'center',
dataIndex: 'memoryUsage', dataIndex: 'memoryUsage',
scopedSlots: { scopedSlots: {
customRender: 'memory', customRender: 'memory',
} },
},{ },
{
title: 'DISK USAGE', title: 'DISK USAGE',
align: 'center', align: 'center',
dataIndex: 'diskUsage', dataIndex: 'diskUsage',
scopedSlots: { scopedSlots: {
customRender: 'disk', customRender: 'disk',
} },
}, },
] ]
export default { export default {
@ -229,22 +233,22 @@ export default {
}, },
data() { data() {
return { return {
loading:false, loading: false,
isAdd: true, isAdd: true,
visible: false, visible: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
formVal: { formVal: {
username: "", username: '',
password: "", password: '',
name: "", name: '',
type: undefined, type: undefined,
port: "", port: '',
ipAddress:"" ipAddress: '',
}, },
currentId:"", currentId: '',
columns, columns,
dataSource: [], dataSource: [],
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -254,36 +258,36 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
} }
}, },
computed: { computed: {
alarmTotal() { alarmTotal() {
let num= 0 let num = 0
this.dataSource.forEach(item => { this.dataSource.forEach((item) => {
num = item.alarmRed ? num + item.alarms : num num = item.alarmRed ? num + item.alarms : num
}); })
return num return num
} },
}, },
mounted () { mounted() {
this.getSysDatabase(); this.getSysDatabase()
}, },
methods: { methods: {
getSysDatabase() { getSysDatabase() {
this.loading = true this.loading = true
let params = { let params = {
pageNo: this.ipagination.current, 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 this.loading = false
if (res.success) { if (res.success) {
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
this.dataSource = res.result.records this.dataSource = res.result.records
} else { } 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) { if (this.currentId) {
this.isAdd = false this.isAdd = false
this.visible = true this.visible = true
getAction("/sysDatabase/findInfo", {id:this.currentId}).then(res => { getAction('/sysDatabase/findInfo', { id: this.currentId }).then((res) => {
if (res.success) { if (res.success) {
this.form.setFieldsValue({ this.form.setFieldsValue({
username: res.result.username, username: res.result.username,
@ -313,14 +317,14 @@ export default {
name: res.result.name, name: res.result.name,
type: res.result.type, type: res.result.type,
port: res.result.port, port: res.result.port,
ipAddress: res.result.ipAddress ipAddress: res.result.ipAddress,
}); })
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
} else { } else {
this.$message.info("Please select a piece of data") this.$message.info('Please select a piece of data')
} }
}, },
onDelete() { onDelete() {
@ -329,39 +333,39 @@ export default {
this.$confirm({ this.$confirm({
title: 'Are you sure to delete this item?', title: 'Are you sure to delete this item?',
onOk() { onOk() {
deleteAction("/sysDatabase/deleteById", {id:_this.currentId}).then(res => { deleteAction('/sysDatabase/deleteById', { id: _this.currentId }).then((res) => {
if (res.success) { if (res.success) {
_this.$message.success("success") _this.$message.success('success')
this.currentId="" this.currentId = ''
_this.getSysDatabase() _this.getSysDatabase()
} else { } else {
_this.$message.warning("This operation fails. Contact your system administrator") _this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onCancel() { onCancel() {
console.log('Cancel'); console.log('Cancel')
}, },
}); })
} else { } else {
this.$message.info("Please select a piece of data") this.$message.info('Please select a piece of data')
} }
}, },
selectRow(record) { selectRow(record) {
this.currentId = record.id this.currentId = record.id
}, },
cancelRow() { cancelRow() {
this.currentId = "" this.currentId = ''
}, },
onSave() { onSave() {
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
if (this.isAdd) { if (this.isAdd) {
postAction("/sysDatabase/create", values).then(res => { postAction('/sysDatabase/create', values).then((res) => {
if (res.success) { if (res.success) {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getSysDatabase() this.getSysDatabase()
} else { } else {
this.$message.info(res.result.message) this.$message.info(res.result.message)
@ -370,13 +374,13 @@ export default {
} else { } else {
let params = { let params = {
id: this.currentId, id: this.currentId,
...values ...values,
} }
httpAction("/sysDatabase/update", params, "put").then(res => { httpAction('/sysDatabase/update', params, 'put').then((res) => {
if (res.success) { if (res.success) {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getSysDatabase() this.getSysDatabase()
} else { } else {
this.$message.info(res.result.message) this.$message.info(res.result.message)
@ -384,28 +388,28 @@ export default {
}) })
} }
} }
}); })
}, },
onCancel() { onCancel() {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
}, },
onRowDbclick(record) { onRowDbclick(record) {
console.log(record); console.log(record)
let query = { let query = {
id:record.id id: record.id,
} }
this.$router.push({ this.$router.push({
path: '/alarm/databaseMonitor/instances', path: '/alarm/databaseMonitor/instances',
query query,
}) })
} },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.view-header{ .view-header {
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 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; color: #ade6ee;
display: flex; display: flex;
align-items: center; align-items: center;
span{ span {
font-family: MicrogrammaD-MediExte; font-family: MicrogrammaD-MediExte;
font-size: 30px; font-size: 30px;
color: #d31f1f; color: #d31f1f;
} }
} }
.view-btn{ .view-btn {
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
margin-left: 20px; 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); height: calc(100% - 50px);
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-top: 15px; padding-top: 15px;
&-table{ &-table {
height: calc(100% - 30px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
} }
.status-on{ .status-on {
margin-left: 10px; margin-left: 10px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #4bc048; color: #4bc048;
} }
.status-off{ .status-off {
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #868686; color: #868686;
} }
.alarm-text{ .alarm-text {
font-family: MicrogrammaD-MediExte; font-family: MicrogrammaD-MediExte;
font-size: 22px; font-size: 22px;
color: #ade6ee; color: #ade6ee;
} }
.isAlarm{ .isAlarm {
color: #ed2d2d; color: #ed2d2d;
} }
.isRed{ .isRed {
color: #f02c2c; color: #f02c2c;
} }
/deep/.ant-table-tbody tr{ /deep/.ant-table-tbody tr {
height: 88px; height: 88px;
} }
} }
@ -483,11 +487,11 @@ export default {
width: 92px; width: 92px;
} }
} }
/deep/.ant-modal-title{ /deep/.ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
.ant-input-number{ .ant-input-number {
width: 100%; width: 100%;
background-color: #03353f !important background-color: #03353f !important;
} }
</style> </style>

437
src/views/abnormalAlarm/emailMonitor/overview/index.vue
View File

@ -1,31 +1,25 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="view-header"> <div class="view-header">
<div class="view-num">Alarms：<span>{{ alarmTotal }}</span></div> <div class="view-num">
Alarms：<span>{{ alarmTotal }}</span>
</div>
<div> <div>
<a-button class="view-btn" @click="onAdd"> <a-button class="view-btn" @click="onAdd">
<img class="icon-add" src="@/assets/images/global/add.png" alt="" /> <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Add </span>
Add
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="onEdit"> <a-button class="view-btn" @click="onEdit">
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" /> <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Edit </span>
Edit
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="onDelete"> <a-button class="view-btn" @click="onDelete">
<img class="icon-add" src="@/assets/images/global/delete.png" alt="" /> <img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Delete </span>
Delete
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="getSysEmail"> <a-button class="view-btn" @click="getSysEmail">
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" /> <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Refresh </span>
Refresh
</span>
</a-button> </a-button>
</div> </div>
</div> </div>
@ -42,149 +36,146 @@
@cancleRowClick="cancelRow" @cancleRowClick="cancelRow"
@rowDbclick="onRowDbclick" @rowDbclick="onRowDbclick"
> >
<template slot="status" slot-scope="{record}"> <template slot="status" slot-scope="{ record }">
<div> <div>
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt=""> <img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="" />
<img v-else src="@/assets/images/abnormalAlarm/off.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> <span :class="[record.online ? 'status-on' : 'status-off']">{{
record.online ? 'Connecting' : 'Disconnect'
}}</span>
</div> </div>
</template> </template>
<template slot="enabled" slot-scope="{text}"> <template slot="enabled" slot-scope="{ text }">
<div> <div>
<img v-if="text==1" src="@/assets/images/abnormalAlarm/on.png" alt=""> <img v-if="text == 1" src="@/assets/images/abnormalAlarm/on.png" alt="" />
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt=""> <img v-else src="@/assets/images/abnormalAlarm/off.png" alt="" />
</div> </div>
</template> </template>
<template slot="today" slot-scope="{text}"> <template slot="today" slot-scope="{ text }">
<span class="alarm-text">{{ text?text:"--" }}</span> <span class="alarm-text">{{ text ? text : '--' }}</span>
</template> </template>
<template slot="yesterday" slot-scope="{text}"> <template slot="yesterday" slot-scope="{ text }">
<span class="alarm-text">{{ text?text:"--" }}</span> <span class="alarm-text">{{ text ? text : '--' }}</span>
</template> </template>
<template slot="weekly" slot-scope="{text}"> <template slot="weekly" slot-scope="{ text }">
<span class="alarm-text">{{ text?text:"--" }}</span> <span class="alarm-text">{{ text ? text : '--' }}</span>
</template> </template>
<template slot="alarms" slot-scope="{text,record}"> <template slot="alarms" slot-scope="{ text, record }">
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span> <span :class="[record.alarmRed ? 'isAlarm' : '', 'alarm-text']">{{ text }}</span>
</template> </template>
<template slot="stoer" slot-scope="{text,record}"> <template slot="stoer" slot-scope="{ text, record }">
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span> <span :class="[record.cpuRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
</template> </template>
</TableList> </TableList>
</div> </div>
<a-pagination <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
:page-size-options="ipagination.pageSizeOptions" :page-size-options="ipagination.pageSizeOptions"
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
show-less-items (total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
<a-modal <a-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :maskClosable="false" @cancel="onCancel">
:title="isAdd ? 'Add' : 'Edit'" <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
v-model="visible" <a-form-item label="Name">
@cancel="onCancel" <a-input
> v-decorator="[
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"> 'name',
<a-form-item label="Name"> {
<a-input rules: [{ required: true, message: 'Please input name!' }],
v-decorator="[ initialVale: this.formVal.name,
'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="[
</a-form-item> 'emailServerAddress',
<a-form-item label="Server Address"> {
<a-input rules: [{ required: true, message: 'Please input email server address!' }],
v-decorator="[ initialVale: this.formVal.emailServerAddress,
'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="[
</a-form-item> 'username',
<a-form-item label="Email Address"> {
<a-input rules: [{ required: true, message: 'Please input email address!' }],
v-decorator="[ initialVale: this.formVal.username,
'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="[
</a-form-item> 'password',
<a-form-item label="Password"> {
<a-input rules: [{ required: true, message: 'Please input password!' }],
v-decorator="[ initialVale: this.formVal.password,
'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"
</a-form-item> dict-code="email_type"
<a-form-item label="Email Type"> v-decorator="[
<j-dict-select-tag 'emilType',
placeholder="Please select an email type" {
dict-code="email_type" rules: [{ required: true, message: 'Please input your name!' }],
v-decorator="[ initialVale: this.formVal.emilType,
'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
</a-form-item> v-decorator="[
<a-form-item label="Enable or not"> 'enabled',
<a-select {
allowClear rules: [{ required: true, message: 'Please select a Station!' }],
v-decorator="[ initialVale: this.formVal.enabled,
'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>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> </a-form-item>
<a-select-option :value="1"> <a-form-item label="Port">
Enable <a-input-number
</a-select-option> v-decorator="[
<a-select-option :value="0"> 'port',
Disabled {
</a-select-option> rules: [{ required: true, message: 'Please input port!' }],
</a-select> initialVale: this.formVal.port,
</a-form-item> },
<a-form-item label="Port"> ]"
<a-input-number />
v-decorator="[ </a-form-item>
'port', </a-form>
{
rules: [{ required: true, message: 'Please input port!' }],
initialVale: this.formVal.port
}
]"
/>
</a-form-item>
</a-form>
<template slot="footer"> <template slot="footer">
<a-space class="operators" :size="20"> <a-space class="operators" :size="20">
<a-button type="success" @click="onSave">Save</a-button> <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> </a-space>
</template> </template>
</a-modal> </a-modal>
@ -192,67 +183,75 @@
</template> </template>
<script> <script>
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [ const columns = [
{ {
title: 'NAME', title: 'NAME',
align: 'center', align: 'center',
dataIndex: 'name' dataIndex: 'name',
},{ },
{
title: 'STATUS', title: 'STATUS',
align: 'center', align: 'center',
dataIndex: 'online', dataIndex: 'online',
scopedSlots: { scopedSlots: {
customRender: 'status' customRender: 'status',
} },
},{ },
{
title: 'ENABLE', title: 'ENABLE',
align: 'center', align: 'center',
dataIndex: 'enabled', dataIndex: 'enabled',
scopedSlots: { scopedSlots: {
customRender: 'enabled' customRender: 'enabled',
} },
},{ },
{
title: 'E-MAIL', title: 'E-MAIL',
align: 'center', align: 'center',
dataIndex: 'emailServerAddress' dataIndex: 'emailServerAddress',
},{ },
{
title: "TODAY'S TOTAL", title: "TODAY'S TOTAL",
align: 'center', align: 'center',
dataIndex: 'today', dataIndex: 'today',
scopedSlots: { scopedSlots: {
customRender: 'today' customRender: 'today',
} },
},{ },
{
title: "YESTERDAY'S TOTAL", title: "YESTERDAY'S TOTAL",
align: 'center', align: 'center',
dataIndex: 'yesterday', dataIndex: 'yesterday',
scopedSlots: { scopedSlots: {
customRender: 'yesterday' customRender: 'yesterday',
} },
},{ },
title: "WEEKLY TOTAL", {
title: 'WEEKLY TOTAL',
align: 'center', align: 'center',
dataIndex: 'weekly', dataIndex: 'weekly',
scopedSlots: { scopedSlots: {
customRender: 'weekly' customRender: 'weekly',
} },
},{ },
{
title: 'ALARMS', title: 'ALARMS',
align: 'center', align: 'center',
dataIndex: 'alarms', dataIndex: 'alarms',
scopedSlots: { scopedSlots: {
customRender: 'alarms', customRender: 'alarms',
} },
},{ },
title: "STOER CAPACITY", {
title: 'STOER CAPACITY',
align: 'center', align: 'center',
dataIndex: 'stoerCapacity', dataIndex: 'stoerCapacity',
scopedSlots: { scopedSlots: {
customRender: 'stoer', customRender: 'stoer',
} },
} },
] ]
export default { export default {
components: { components: {
@ -265,18 +264,18 @@ export default {
visible: false, visible: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
formVal: { formVal: {
name: "", name: '',
emailServerAddress: "", emailServerAddress: '',
username: "", username: '',
password: "", password: '',
emilType: "", emilType: '',
enabled: "", enabled: '',
port: "" port: '',
}, },
currentId:"", currentId: '',
columns, columns,
dataSource: [], dataSource: [],
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -286,36 +285,36 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
} }
}, },
computed: { computed: {
alarmTotal() { alarmTotal() {
let num= 0 let num = 0
this.dataSource.forEach(item => { this.dataSource.forEach((item) => {
num = item.alarmRed ? num + item.alarms : num num = item.alarmRed ? num + item.alarms : num
}); })
return num return num
} },
}, },
mounted () { mounted() {
this.getSysEmail(); this.getSysEmail()
}, },
methods: { methods: {
getSysEmail() { getSysEmail() {
this.loading = true this.loading = true
let params = { let params = {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize pageSize: this.ipagination.pageSize,
} }
getAction("/sysEmail/findPage", params).then(res => { getAction('/sysEmail/findPage', params).then((res) => {
this.loading=false this.loading = false
if (res.success) { if (res.success) {
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
this.dataSource = res.result.records this.dataSource = res.result.records
} else { } 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) { if (this.currentId) {
this.isAdd = false this.isAdd = false
this.visible = true this.visible = true
getAction("/sysEmail/findInfo", {id:this.currentId}).then(res => { getAction('/sysEmail/findInfo', { id: this.currentId }).then((res) => {
if (res.success) { if (res.success) {
this.form.setFieldsValue({ this.form.setFieldsValue({
name: res.result.name, name: res.result.name,
@ -346,14 +345,14 @@ export default {
password: res.result.password, password: res.result.password,
emilType: res.result.emilType, emilType: res.result.emilType,
enabled: res.result.enabled, enabled: res.result.enabled,
port: res.result.port port: res.result.port,
}); })
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
} else { } else {
this.$message.info("Please select a piece of data") this.$message.info('Please select a piece of data')
} }
}, },
onDelete() { onDelete() {
@ -362,40 +361,40 @@ export default {
this.$confirm({ this.$confirm({
title: 'Are you sure to delete this item?', title: 'Are you sure to delete this item?',
onOk() { onOk() {
deleteAction("/sysEmail/deleteById", {id:_this.currentId}).then(res => { deleteAction('/sysEmail/deleteById', { id: _this.currentId }).then((res) => {
if (res.success) { if (res.success) {
_this.$message.success("success") _this.$message.success('success')
this.currentId="" this.currentId = ''
_this.getSysEmail() _this.getSysEmail()
} else { } else {
_this.$message.warning("This operation fails. Contact your system administrator") _this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onCancel() { onCancel() {
console.log('Cancel'); console.log('Cancel')
}, },
}); })
} else { } else {
this.$message.info("Please select a piece of data") this.$message.info('Please select a piece of data')
} }
}, },
selectRow(record) { selectRow(record) {
this.currentId = record.id this.currentId = record.id
}, },
cancelRow() { cancelRow() {
this.currentId = "" this.currentId = ''
}, },
onSave() { onSave() {
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values)
if (this.isAdd) { if (this.isAdd) {
postAction("/sysEmail/create", values).then(res => { postAction('/sysEmail/create', values).then((res) => {
if (res.success) { if (res.success) {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getSysEmail() this.getSysEmail()
} else { } else {
this.$message.info(res.result.message) this.$message.info(res.result.message)
@ -404,13 +403,13 @@ export default {
} else { } else {
let params = { let params = {
id: this.currentId, id: this.currentId,
...values ...values,
} }
httpAction("/sysEmail/update", params, "put").then(res => { httpAction('/sysEmail/update', params, 'put').then((res) => {
if (res.success) { if (res.success) {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getSysEmail() this.getSysEmail()
} else { } else {
this.$message.info(res.result.message) this.$message.info(res.result.message)
@ -418,7 +417,7 @@ export default {
}) })
} }
} }
}); })
}, },
onCancel() { onCancel() {
this.form.resetFields() this.form.resetFields()
@ -426,19 +425,19 @@ export default {
}, },
onRowDbclick(record) { onRowDbclick(record) {
let query = { let query = {
emailId:record.id emailId: record.id,
} }
this.$router.push({ this.$router.push({
path: '/alarm/emailMonitor/instances', path: '/alarm/emailMonitor/instances',
query query,
}) })
} },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.view-header{ .view-header {
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 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; color: #ade6ee;
display: flex; display: flex;
align-items: center; align-items: center;
span{ span {
font-family: MicrogrammaD-MediExte; font-family: MicrogrammaD-MediExte;
font-size: 30px; font-size: 30px;
color: #d31f1f; color: #d31f1f;
} }
} }
.view-btn{ .view-btn {
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
margin-left: 20px; 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); height: calc(100% - 50px);
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-top: 15px; padding-top: 15px;
&-table{ &-table {
height: calc(100% - 30px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
} }
.status-on{ .status-on {
margin-left: 10px; margin-left: 10px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #4bc048; color: #4bc048;
} }
.status-off{ .status-off {
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #868686; color: #868686;
} }
.alarm-text{ .alarm-text {
font-family: MicrogrammaD-MediExte; font-family: MicrogrammaD-MediExte;
font-size: 22px; font-size: 22px;
color: #ade6ee; color: #ade6ee;
} }
.isAlarm{ .isAlarm {
color: #ed2d2d; color: #ed2d2d;
} }
.isRed{ .isRed {
color: #f02c2c; color: #f02c2c;
} }
/deep/.ant-table-tbody tr{ /deep/.ant-table-tbody tr {
height: 88px; height: 88px;
} }
} }
@ -516,11 +515,11 @@ export default {
width: 92px; width: 92px;
} }
} }
/deep/.ant-modal-title{ /deep/.ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
.ant-input-number{ .ant-input-number {
width: 100%; width: 100%;
background-color: #03353f !important background-color: #03353f !important;
} }
</style> </style>

2
src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
View File

@ -152,7 +152,7 @@
</a-col> </a-col>
</a-row> </a-row>
</div> </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> <div class="modal-content" id="common_cpu"></div>
</a-modal> </a-modal>
<CreateRules <CreateRules

2
src/views/abnormalAlarm/serverMonitor/instances/createRules.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <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-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
<a-row :gutter="[15, 0]"> <a-row :gutter="[15, 0]">
<a-col :span="12"> <a-col :span="12">

2
src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
View File

@ -156,7 +156,7 @@
</a-col> </a-col>
</a-row> </a-row>
</div> </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> <div class="modal-content" id="common"></div>
</a-modal> </a-modal>
<CreateRules <CreateRules

255
src/views/abnormalAlarm/serverMonitor/overview/index.vue
View File

@ -1,31 +1,25 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="view-header"> <div class="view-header">
<div class="view-num">Alarms：<span>{{ alarmTotal }}</span></div> <div class="view-num">
Alarms：<span>{{ alarmTotal }}</span>
</div>
<div> <div>
<a-button class="view-btn" @click="onAdd"> <a-button class="view-btn" @click="onAdd">
<img class="icon-add" src="@/assets/images/global/add.png" alt="" /> <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Add </span>
Add
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="onEdit"> <a-button class="view-btn" @click="onEdit">
<img class="icon-add" src="@/assets/images/global/edit.png" alt="" /> <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Edit </span>
Edit
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="onDelete"> <a-button class="view-btn" @click="onDelete">
<img class="icon-add" src="@/assets/images/global/delete.png" alt="" /> <img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Delete </span>
Delete
</span>
</a-button> </a-button>
<a-button class="view-btn" @click="getSysServer"> <a-button class="view-btn" @click="getSysServer">
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" /> <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
<span style="margin-left: 10px;"> <span style="margin-left: 10px"> Refresh </span>
Refresh
</span>
</a-button> </a-button>
</div> </div>
</div> </div>
@ -42,74 +36,73 @@
@cancleRowClick="cancelRow" @cancleRowClick="cancelRow"
@rowDbclick="onRowDbclick" @rowDbclick="onRowDbclick"
> >
<template slot="status" slot-scope="{text,record}"> <template slot="status" slot-scope="{ text, record }">
<div> <div>
<img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt=""> <img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="" />
<img v-else src="@/assets/images/abnormalAlarm/off.png" alt=""> <img v-else src="@/assets/images/abnormalAlarm/off.png" alt="" />
<span :class="[record.online?'status-on':'status-off']">{{ text }}</span> <span :class="[record.online ? 'status-on' : 'status-off']">{{ text }}</span>
</div> </div>
</template> </template>
<template slot="alarms" slot-scope="{text,record}"> <template slot="alarms" slot-scope="{ text, record }">
<span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span> <span :class="[record.alarmRed ? 'isAlarm' : '', 'alarm-text']">{{ text }}</span>
</template> </template>
<template slot="cpu" slot-scope="{text,record}"> <template slot="cpu" slot-scope="{ text, record }">
<span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span> <span :class="[record.cpuRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
</template> </template>
<template slot="memory" slot-scope="{text,record}"> <template slot="memory" slot-scope="{ text, record }">
<span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span> <span :class="[record.memoryRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
</template> </template>
<template slot="disk" slot-scope="{text,record}"> <template slot="disk" slot-scope="{ text, record }">
<span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span> <span :class="[record.diskRed ? 'isRed' : '', 'alarm-text']">{{ text ? text : '--' }}</span>
</template> </template>
</TableList> </TableList>
</div> </div>
<a-pagination <a-pagination
size="small" size="small"
v-model="ipagination.current" v-model="ipagination.current"
:pageSize="ipagination.pageSize" :pageSize="ipagination.pageSize"
:page-size-options="ipagination.pageSizeOptions" :page-size-options="ipagination.pageSizeOptions"
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
show-less-items (total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
/> />
</div> </div>
<a-modal <a-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :maskClosable="false" @cancel="onCancel">
:title="isAdd ? 'Add' : 'Edit'" <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
v-model="visible" <a-form-item label="Name">
@cancel="onCancel" <a-input
> v-decorator="[
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }"> 'name',
<a-form-item label="Name"> {
<a-input rules: [{ required: true, message: 'Please input name!' }],
v-decorator="[ initialVale: this.formVal.name,
'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="[
</a-form-item> 'ipAddress',
<a-form-item label="Ip Address"> {
<a-input rules: [{ required: true, message: 'Please input ip address!' }],
v-decorator="[ initialVale: this.formVal.ipAddress,
'ipAddress', },
{ ]"
rules: [{ required: true, message: 'Please input ip address!' }], />
initialVale: this.formVal.ipAddress </a-form-item>
} </a-form>
]"
/>
</a-form-item>
</a-form>
<template slot="footer"> <template slot="footer">
<a-space class="operators" :size="20"> <a-space class="operators" :size="20">
<a-button type="success" @click="onSave">Save</a-button> <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> </a-space>
</template> </template>
</a-modal> </a-modal>
@ -118,51 +111,57 @@
<script> <script>
import TableList from '../../components/tableList.vue' import TableList from '../../components/tableList.vue'
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [ const columns = [
{ {
title: 'NAME', title: 'NAME',
align: 'center', align: 'center',
dataIndex: 'name' dataIndex: 'name',
},{ },
{
title: 'STATUS', title: 'STATUS',
align: 'center', align: 'center',
dataIndex: 'serverInfo', dataIndex: 'serverInfo',
scopedSlots: { scopedSlots: {
customRender: 'status' customRender: 'status',
} },
},{ },
{
title: 'IP ADDRESS', title: 'IP ADDRESS',
align: 'center', align: 'center',
dataIndex: 'ipAddress' dataIndex: 'ipAddress',
},{ },
{
title: 'ALARMS', title: 'ALARMS',
align: 'center', align: 'center',
dataIndex: 'alarms', dataIndex: 'alarms',
scopedSlots: { scopedSlots: {
customRender: 'alarms', customRender: 'alarms',
} },
},{ },
{
title: 'CPU UTILIZATION', title: 'CPU UTILIZATION',
align: 'center', align: 'center',
dataIndex: 'cpuUutilzation', dataIndex: 'cpuUutilzation',
scopedSlots: { scopedSlots: {
customRender: 'cpu', customRender: 'cpu',
} },
},{ },
{
title: 'MEMORY USAGE', title: 'MEMORY USAGE',
align: 'center', align: 'center',
dataIndex: 'memoryUsage', dataIndex: 'memoryUsage',
scopedSlots: { scopedSlots: {
customRender: 'memory', customRender: 'memory',
} },
},{ },
{
title: 'DISK USAGE', title: 'DISK USAGE',
align: 'center', align: 'center',
dataIndex: 'diskUsage', dataIndex: 'diskUsage',
scopedSlots: { scopedSlots: {
customRender: 'disk', customRender: 'disk',
} },
}, },
] ]
export default { export default {
@ -171,18 +170,18 @@ export default {
}, },
data() { data() {
return { return {
loading:false, loading: false,
isAdd: true, isAdd: true,
visible: false, visible: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
formVal: { formVal: {
name: "", name: '',
ipAddress:"" ipAddress: '',
}, },
currentId:"", currentId: '',
columns, columns,
dataSource: [], dataSource: [],
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -192,36 +191,36 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
} }
}, },
computed: { computed: {
alarmTotal() { alarmTotal() {
let num= 0 let num = 0
this.dataSource.forEach(item => { this.dataSource.forEach((item) => {
num = item.alarmRed ? num + item.alarms : num num = item.alarmRed ? num + item.alarms : num
}); })
return num return num
} },
}, },
mounted () { mounted() {
this.getSysServer(); this.getSysServer()
}, },
methods: { methods: {
getSysServer() { getSysServer() {
this.loading = true this.loading = true
let params = { let params = {
pageNo: this.ipagination.current, 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 this.loading = false
if (res.success) { if (res.success) {
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
this.dataSource = res.result.records this.dataSource = res.result.records
} else { } 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) { if (this.currentId) {
this.isAdd = false this.isAdd = false
this.visible = true this.visible = true
getAction("/sysServer/findInfo", {id:this.currentId}).then(res => { getAction('/sysServer/findInfo', { id: this.currentId }).then((res) => {
if (res.success) { if (res.success) {
this.form.setFieldsValue({ this.form.setFieldsValue({
name: res.result.name, name: res.result.name,
ipAddress: res.result.ipAddress ipAddress: res.result.ipAddress,
}); })
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
} else { } else {
this.$message.info("Please select a piece of data") this.$message.info('Please select a piece of data')
} }
}, },
onDelete() { onDelete() {
@ -263,39 +262,39 @@ export default {
this.$confirm({ this.$confirm({
title: 'Are you sure to delete this item?', title: 'Are you sure to delete this item?',
onOk() { onOk() {
deleteAction("/sysServer/deleteById", {id:_this.currentId}).then(res => { deleteAction('/sysServer/deleteById', { id: _this.currentId }).then((res) => {
if (res.success) { if (res.success) {
_this.$message.success("success") _this.$message.success('success')
_this.currentId = "" _this.currentId = ''
_this.getSysServer() _this.getSysServer()
} else { } else {
_this.$message.warning("This operation fails. Contact your system administrator") _this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
onCancel() { onCancel() {
console.log('Cancel'); console.log('Cancel')
}, },
}); })
} else { } else {
this.$message.info("Please select a piece of data") this.$message.info('Please select a piece of data')
} }
}, },
selectRow(record) { selectRow(record) {
this.currentId = record.id this.currentId = record.id
}, },
cancelRow() { cancelRow() {
this.currentId = "" this.currentId = ''
}, },
onSave() { onSave() {
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
if (this.isAdd) { if (this.isAdd) {
postAction("/sysServer/create", values).then(res => { postAction('/sysServer/create', values).then((res) => {
if (res.success) { if (res.success) {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getSysServer() this.getSysServer()
} else { } else {
this.$message.info(res.result.message) this.$message.info(res.result.message)
@ -304,13 +303,13 @@ export default {
} else { } else {
let params = { let params = {
id: this.currentId, id: this.currentId,
...values ...values,
} }
httpAction("/sysServer/update", params, "put").then(res => { httpAction('/sysServer/update', params, 'put').then((res) => {
if (res.success) { if (res.success) {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
this.$message.success("success") this.$message.success('success')
this.getSysServer() this.getSysServer()
} else { } else {
this.$message.info(res.result.message) this.$message.info(res.result.message)
@ -318,7 +317,7 @@ export default {
}) })
} }
} }
}); })
}, },
onCancel() { onCancel() {
this.form.resetFields() this.form.resetFields()
@ -326,19 +325,19 @@ export default {
}, },
onRowDbclick(record) { onRowDbclick(record) {
let query = { let query = {
serverId:record.id serverId: record.id,
} }
this.$router.push({ this.$router.push({
path: '/alarm/serverMonitor/instances', path: '/alarm/serverMonitor/instances',
query query,
}) })
} },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.view-header{ .view-header {
height: 50px; height: 50px;
border-top: 1px solid rgba(13, 235, 201, 0.3); border-top: 1px solid rgba(13, 235, 201, 0.3);
border-bottom: 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; color: #ade6ee;
display: flex; display: flex;
align-items: center; align-items: center;
span{ span {
font-family: MicrogrammaD-MediExte; font-family: MicrogrammaD-MediExte;
font-size: 30px; font-size: 30px;
color: #d31f1f; color: #d31f1f;
} }
} }
.view-btn{ .view-btn {
background-color: #1397a3; background-color: #1397a3;
font-family: ArialMT; font-family: ArialMT;
color: #ffffff; color: #ffffff;
border: none; border: none;
margin-left: 20px; 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); height: calc(100% - 50px);
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-top: 15px; padding-top: 15px;
&-table{ &-table {
height: calc(100% - 30px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
} }
.ant-pagination{ .ant-pagination {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
} }
.status-on{ .status-on {
margin-left: 10px; margin-left: 10px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #4bc048; color: #4bc048;
} }
.status-off{ .status-off {
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #868686; color: #868686;
} }
.alarm-text{ .alarm-text {
font-family: MicrogrammaD-MediExte; font-family: MicrogrammaD-MediExte;
font-size: 22px; font-size: 22px;
color: #ade6ee; color: #ade6ee;
} }
.isAlarm{ .isAlarm {
color: #ed2d2d; color: #ed2d2d;
} }
.isRed{ .isRed {
color: #f02c2c; color: #f02c2c;
} }
/deep/.ant-table-tbody tr{ /deep/.ant-table-tbody tr {
height: 88px; height: 88px;
} }
} }
@ -416,7 +415,7 @@ export default {
width: 92px; width: 92px;
} }
} }
/deep/.ant-modal-title{ /deep/.ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
</style> </style>

99
src/views/system/DefaultNuclide/AlarmRule.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="header"> <div class="header">
<a-button type="primary" @click="handleAdd"> <a-button type="primary" @click="handleAdd">
<img src="@/assets/images/global/add.png" alt="" /> <img src="@/assets/images/global/add.png" alt="" />
Edit Edit
</a-button> </a-button>
</div> </div>
<!-- 列表 --> <!-- 列表 -->
<div> <div>
@ -29,20 +29,14 @@
</custom-table> </custom-table>
</div> </div>
<!-- 列表结束 --> <!-- 列表结束 -->
<a-modal <a-modal title="Edit" :width="845" v-model="visible" :maskClosable="false" @ok="handleOk" destroy-on-close>
title='Edit'
:width="845"
v-model="visible"
@ok="handleOk"
destroy-on-close
>
<a-spin :spinning="spinning"> <a-spin :spinning="spinning">
<div class="group-assign"> <div class="group-assign">
<a-transfer <a-transfer
:dataSource="dataList" :dataSource="dataList"
:target-keys="targetKeys" :target-keys="targetKeys"
show-search show-search
:render="item => item.title" :render="(item) => item.title"
:operations="['Assign', 'Remove']" :operations="['Assign', 'Remove']"
:titles="['Total Nuclides', 'User Nuclides']" :titles="['Total Nuclides', 'User Nuclides']"
@change="handleChange" @change="handleChange"
@ -54,7 +48,7 @@
<template slot="footer"> <template slot="footer">
<slot name="custom-footer"></slot> <slot name="custom-footer"></slot>
<a-space class="operators" :size="20"> <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-button type="warn" @click="onCancel">Cancel</a-button>
</a-space> </a-space>
</template> </template>
@ -70,32 +64,32 @@ const columns = [
align: 'left', align: 'left',
width: 170, width: 170,
scopedSlots: { scopedSlots: {
customRender: 'index' customRender: 'index',
}, },
customHeaderCell: () => { customHeaderCell: () => {
return { return {
style: { style: {
'padding-left': '60px !important' 'padding-left': '60px !important',
} },
} }
}, },
customCell: () => { customCell: () => {
return { return {
style: { style: {
'padding-left': '60px !important' 'padding-left': '60px !important',
} },
} }
} },
}, },
{ {
title: 'NUCLIDE NAME', title: 'NUCLIDE NAME',
align: 'left', align: 'left',
dataIndex: 'nuclideName' dataIndex: 'nuclideName',
}, },
{ {
title: 'CREATE TIME', title: 'CREATE TIME',
align: 'left', align: 'left',
dataIndex: 'createTime' dataIndex: 'createTime',
}, },
] ]
export default { export default {
@ -106,7 +100,7 @@ export default {
url: { url: {
list: '/sys/defaultNuclide/findPage', list: '/sys/defaultNuclide/findPage',
}, },
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -116,17 +110,17 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
loading: false, loading: false,
targetKeys: [], targetKeys: [],
visible: false, visible: false,
dataList: [], dataList: [],
spinning: false spinning: false,
} }
}, },
mounted () { mounted() {
this.getRulesList(); this.getRulesList()
}, },
methods: { methods: {
getRulesList() { getRulesList() {
@ -134,23 +128,22 @@ export default {
let params = { let params = {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize, 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 this.loading = false
if (res.success) { if (res.success) {
this.dataSource = res.result.records this.dataSource = res.result.records
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
} else { } 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) { handleTableChange(pagination, filters, sorter) {
this.ipagination.current = pagination.current this.ipagination.current = pagination.current
this.ipagination.pageSize = pagination.pageSize this.ipagination.pageSize = pagination.pageSize
this.getRulesList(); this.getRulesList()
}, },
handleAdd() { handleAdd() {
this.visible = true this.visible = true
@ -159,39 +152,39 @@ export default {
this.getNuclideList() this.getNuclideList()
}, },
getNuclideListAll() { getNuclideListAll() {
getAction("/gardsNuclLib/allName").then(res => { getAction('/gardsNuclLib/allName').then((res) => {
this.spinning = false this.spinning = false
if (res.success) { if (res.success) {
if (res.result.length > 0) { if (res.result.length > 0) {
this.dataList = res.result.map((item,index) => { this.dataList = res.result.map((item, index) => {
return { return {
key: item, key: item,
title: item title: item,
} }
}) })
} else { } else {
this.dataList = [] this.dataList = []
} }
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getNuclideList() { getNuclideList() {
getAction("/sys/defaultNuclide/allName",{useType:2}).then(res => { getAction('/sys/defaultNuclide/allName', { useType: 2 }).then((res) => {
if (res.success) { if (res.success) {
if (res.result.length > 0) { if (res.result.length > 0) {
this.targetKeys = res.result.map(item => item) this.targetKeys = res.result.map((item) => item)
} else { } else {
this.targetKeys = [] this.targetKeys = []
} }
} else { } 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) { handleChange(targetKeys, direction, moveKeys) {
this.targetKeys= targetKeys; this.targetKeys = targetKeys
}, },
handleSearch(dir, value) { handleSearch(dir, value) {
console.log('search:', dir, value) console.log('search:', dir, value)
@ -199,15 +192,15 @@ export default {
handleOk() { handleOk() {
let params = { let params = {
nuclideNames: this.targetKeys, nuclideNames: this.targetKeys,
useType: 2 useType: 2,
} }
getAction("/sys/defaultNuclide/add",params).then(res => { getAction('/sys/defaultNuclide/add', params).then((res) => {
this.visible = false this.visible = false
if (res.success) { if (res.success) {
this.$message.success(res.message) this.$message.success(res.message)
this.getRulesList() this.getRulesList()
} else { } 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.header{ .header {
height: 54px; height: 54px;
border-top: 1px solid rgba(12, 235, 201, 0.3); border-top: 1px solid rgba(12, 235, 201, 0.3);
border-bottom: 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; width: 92px;
} }
} }
.group-assign{ .group-assign {
position: relative; position: relative;
width: 690px; width: 690px;
margin: 0 auto; margin: 0 auto;
@ -258,7 +251,7 @@ export default {
left: 16px; left: 16px;
} }
} }
&-body{ &-body {
height: calc(100% - 37px); height: calc(100% - 37px);
} }
&-content { &-content {
@ -268,14 +261,14 @@ export default {
} }
} }
} }
&:last-child { &:last-child {
height: 411px; height: 411px;
position: relative; position: relative;
// top: 35px; // top: 35px;
} }
} }
.ant-transfer-operation { .ant-transfer-operation {
.ant-btn { .ant-btn {
width: 92px; width: 92px;
@ -314,27 +307,27 @@ export default {
} }
} }
} }
.ant-transfer-list-header{ .ant-transfer-list-header {
position: relative; position: relative;
.ant-checkbox-wrapper{ .ant-checkbox-wrapper {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
} }
.ant-transfer-list-content-item{ .ant-transfer-list-content-item {
position: relative; position: relative;
.ant-checkbox-wrapper{ .ant-checkbox-wrapper {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
} }
.ant-transfer-list-content-item-text{ .ant-transfer-list-content-item-text {
padding-left: 22px; padding-left: 22px;
} }
} }
} }
} }
/deep/.ant-modal-title{ /deep/.ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
</style> </style>

139
src/views/system/DefaultNuclide/AutoProcess.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<div class="header"> <div class="header">
<div> <div>
<span class="item-label">Nuclide Type</span> <span class="item-label">Nuclide Type</span>
<a-select <a-select
style="width: 180px;display: inline-block;" style="width: 180px; display: inline-block"
v-model="type" v-model="type"
:options="typeOptions" :options="typeOptions"
show-arrow show-arrow
allowClear allowClear
placeholder="select..." placeholder="select..."
@change="onTypeChange" @change="onTypeChange"
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@ -43,23 +43,17 @@
</custom-table> </custom-table>
</div> </div>
<!-- 列表结束 --> <!-- 列表结束 -->
<a-modal <a-modal title="Edit" :width="845" v-model="visible" :maskClosable="false" @ok="handleOk" destroy-on-close>
title='Edit'
:width="845"
v-model="visible"
@ok="handleOk"
destroy-on-close
>
<a-spin :spinning="spinning"> <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> <span class="item-label">Nuclide Type</span>
<a-select <a-select
style="width: 180px;display: inline-block;" style="width: 180px; display: inline-block"
v-model="currType" v-model="currType"
:options="typeOptions" :options="typeOptions"
show-arrow show-arrow
allowClear allowClear
placeholder="select..." placeholder="select..."
@change="onCurrTypeChange" @change="onCurrTypeChange"
> >
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@ -70,7 +64,7 @@
:dataSource="dataList" :dataSource="dataList"
:target-keys="targetKeys" :target-keys="targetKeys"
show-search show-search
:render="item => item.title" :render="(item) => item.title"
:operations="['Assign', 'Remove']" :operations="['Assign', 'Remove']"
:titles="['Total Nuclides', 'User Nuclides']" :titles="['Total Nuclides', 'User Nuclides']"
@change="handleChange" @change="handleChange"
@ -82,7 +76,7 @@
<template slot="footer"> <template slot="footer">
<slot name="custom-footer"></slot> <slot name="custom-footer"></slot>
<a-space class="operators" :size="20"> <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-button type="warn" @click="onCancel">Cancel</a-button>
</a-space> </a-space>
</template> </template>
@ -98,37 +92,37 @@ const columns = [
align: 'left', align: 'left',
width: 170, width: 170,
scopedSlots: { scopedSlots: {
customRender: 'index' customRender: 'index',
}, },
customHeaderCell: () => { customHeaderCell: () => {
return { return {
style: { style: {
'padding-left': '60px !important' 'padding-left': '60px !important',
} },
} }
}, },
customCell: () => { customCell: () => {
return { return {
style: { style: {
'padding-left': '60px !important' 'padding-left': '60px !important',
} },
} }
} },
}, },
{ {
title: 'NUCLIDE NAME', title: 'NUCLIDE NAME',
align: 'left', align: 'left',
dataIndex: 'nuclideName' dataIndex: 'nuclideName',
}, },
{ {
title: 'NUCLIDE TYPE', title: 'NUCLIDE TYPE',
align: 'left', align: 'left',
dataIndex: 'nuclideType' dataIndex: 'nuclideType',
}, },
{ {
title: 'CREATE TIME', title: 'CREATE TIME',
align: 'left', align: 'left',
dataIndex: 'createTime' dataIndex: 'createTime',
}, },
] ]
export default { export default {
@ -139,7 +133,7 @@ export default {
url: { url: {
list: '/sys/defaultNuclide/findPage', list: '/sys/defaultNuclide/findPage',
}, },
ipagination:{ ipagination: {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
pageSizeOptions: ['10', '20', '30'], pageSizeOptions: ['10', '20', '30'],
@ -149,29 +143,29 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
loading: false, loading: false,
typeOptions: [ typeOptions: [
{ {
label: "P", label: 'P',
value: "P" value: 'P',
}, },
{ {
label: "G", label: 'G',
value: "G" value: 'G',
} },
], ],
type: undefined, type: undefined,
currType: "P", currType: 'P',
targetKeys: [], targetKeys: [],
visible: false, visible: false,
dataList: [], dataList: [],
spinning: false spinning: false,
} }
}, },
mounted () { mounted() {
this.getAuroPeocessList(); this.getAuroPeocessList()
}, },
methods: { methods: {
getAuroPeocessList() { getAuroPeocessList() {
@ -180,27 +174,26 @@ export default {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
useType: 1, 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 this.loading = false
if (res.success) { if (res.success) {
this.dataSource = res.result.records this.dataSource = res.result.records
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
} else { } 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) { handleTableChange(pagination, filters, sorter) {
this.ipagination.current = pagination.current this.ipagination.current = pagination.current
this.ipagination.pageSize = pagination.pageSize this.ipagination.pageSize = pagination.pageSize
this.getAuroPeocessList(); this.getAuroPeocessList()
}, },
onTypeChange(val) { onTypeChange(val) {
this.type = val this.type = val
this.getAuroPeocessList(); this.getAuroPeocessList()
}, },
onCurrTypeChange(val) { onCurrTypeChange(val) {
this.currType = val this.currType = val
@ -213,40 +206,40 @@ export default {
this.getNuclideList() this.getNuclideList()
}, },
getNuclideListAll() { getNuclideListAll() {
getAction("/gardsNuclLib/allName").then(res => { getAction('/gardsNuclLib/allName').then((res) => {
this.spinning = false this.spinning = false
if (res.success) { if (res.success) {
if (res.result.length > 0) { if (res.result.length > 0) {
this.dataList = res.result.map((item,index) => { this.dataList = res.result.map((item, index) => {
return { return {
key: item, key: item,
title: item title: item,
} }
}) })
} else { } else {
this.dataList = [] this.dataList = []
} }
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getNuclideList() { 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.success) {
if (res.result.length > 0) { if (res.result.length > 0) {
this.targetKeys = res.result.map(item => item) this.targetKeys = res.result.map((item) => item)
} else { } else {
this.targetKeys = [] this.targetKeys = []
} }
} else { } 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) { handleChange(targetKeys, direction, moveKeys) {
console.log(targetKeys, direction, moveKeys); console.log(targetKeys, direction, moveKeys)
this.targetKeys= targetKeys; this.targetKeys = targetKeys
}, },
handleSearch(dir, value) { handleSearch(dir, value) {
console.log('search:', dir, value) console.log('search:', dir, value)
@ -255,15 +248,15 @@ export default {
let params = { let params = {
nuclideNames: this.targetKeys, nuclideNames: this.targetKeys,
nuclideType: this.currType, nuclideType: this.currType,
useType: 1 useType: 1,
} }
getAction("/sys/defaultNuclide/add",params).then(res => { getAction('/sys/defaultNuclide/add', params).then((res) => {
this.visible = false this.visible = false
if (res.success) { if (res.success) {
this.$message.success(res.message) this.$message.success(res.message)
this.getAuroPeocessList() this.getAuroPeocessList()
} else { } 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.header{ .header {
height: 54px; height: 54px;
border-top: 1px solid rgba(12, 235, 201, 0.3); border-top: 1px solid rgba(12, 235, 201, 0.3);
border-bottom: 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; padding: 0 10px;
margin-bottom: 18px; margin-bottom: 18px;
} }
.item-label{ .item-label {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
font-family: ArialMT; font-family: ArialMT;
@ -302,7 +295,7 @@ export default {
width: 92px; width: 92px;
} }
} }
.group-assign{ .group-assign {
position: relative; position: relative;
width: 690px; width: 690px;
margin: 0 auto; margin: 0 auto;
@ -324,7 +317,7 @@ export default {
left: 16px; left: 16px;
} }
} }
&-body{ &-body {
height: calc(100% - 37px); height: calc(100% - 37px);
} }
&-content { &-content {
@ -334,14 +327,14 @@ export default {
} }
} }
} }
&:last-child { &:last-child {
height: 411px; height: 411px;
position: relative; position: relative;
// top: 35px; // top: 35px;
} }
} }
.ant-transfer-operation { .ant-transfer-operation {
.ant-btn { .ant-btn {
width: 92px; width: 92px;
@ -380,27 +373,27 @@ export default {
} }
} }
} }
.ant-transfer-list-header{ .ant-transfer-list-header {
position: relative; position: relative;
.ant-checkbox-wrapper{ .ant-checkbox-wrapper {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
} }
.ant-transfer-list-content-item{ .ant-transfer-list-content-item {
position: relative; position: relative;
.ant-checkbox-wrapper{ .ant-checkbox-wrapper {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
} }
.ant-transfer-list-content-item-text{ .ant-transfer-list-content-item-text {
padding-left: 22px; padding-left: 22px;
} }
} }
} }
} }
/deep/.ant-modal-title{ /deep/.ant-modal-title {
letter-spacing: 1px; letter-spacing: 1px;
} }
</style> </style>