analysis monitor 模块 alarm rules 页面搭建
This commit is contained in:
parent
c2b4318c56
commit
1e25c77ca3
|
|
@ -7,7 +7,7 @@
|
|||
<a-button class="rules-add" @click="handleAdd">
|
||||
<img class="icon-add" src="@/assets/images/global/add.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Create Alert Rule
|
||||
Create Alarm Rule
|
||||
</span>
|
||||
</a-button>
|
||||
</a-col>
|
||||
|
|
@ -750,11 +750,11 @@ export default {
|
|||
.item-label{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
color: #ade6ee;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
font-family: ArialMT;
|
||||
color: #ade6ee;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.rules-add{
|
||||
background-color: #1397a3;
|
||||
|
|
|
|||
|
|
@ -10,11 +10,35 @@
|
|||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:canSelect="false"
|
||||
:selectRowClick="rowClick"
|
||||
>
|
||||
<template slot="info" slot-scope="{ record}">
|
||||
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
|
||||
<template slot="station" slot-scope="{ text }">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template slot="title">
|
||||
{{ text.join("/") }}
|
||||
</template>
|
||||
{{ text.join("/") }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template slot="dataSource" slot-scope="{ text }">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template slot="title">
|
||||
{{ text.join("/") }}
|
||||
</template>
|
||||
{{ text.join("/") }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template slot="info" slot-scope="{ text, record }">
|
||||
<a-popover placement="bottomLeft" overlayClassName="qqqqq">
|
||||
<template slot="content">
|
||||
<a-table
|
||||
:columns="columns_info"
|
||||
:dataSource="record.nuclideList"
|
||||
:pagination="false"
|
||||
></a-table>
|
||||
</template>
|
||||
{{ text }}
|
||||
</a-popover>
|
||||
</template>
|
||||
</TableList>
|
||||
<a-pagination
|
||||
|
|
@ -166,22 +190,30 @@ const columns = [{
|
|||
title: 'STATION',
|
||||
align: 'left',
|
||||
dataIndex: 'station',
|
||||
width: 250,
|
||||
},{
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
scopedSlots: {
|
||||
customRender: 'station',
|
||||
}
|
||||
},{
|
||||
title: 'COLLECTION START',
|
||||
align: 'left',
|
||||
dataIndex: 'station',
|
||||
width: 250,
|
||||
dataIndex: 'collectionStartTime',
|
||||
width: 200,
|
||||
},{
|
||||
title: 'ALARM TIME',
|
||||
align: 'left',
|
||||
dataIndex: 'alarmTime',
|
||||
width: 250,
|
||||
dataIndex: 'alarmStartDate',
|
||||
width: 200,
|
||||
},{
|
||||
title: 'DATA SOURCES ',
|
||||
align: 'left',
|
||||
dataIndex: 'dataSources',
|
||||
width: 250,
|
||||
dataIndex: 'dataSource',
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
scopedSlots: {
|
||||
customRender: 'dataSource',
|
||||
}
|
||||
},{
|
||||
title: 'ALARM INFO',
|
||||
align: 'left',
|
||||
|
|
@ -191,6 +223,32 @@ const columns = [{
|
|||
}
|
||||
}
|
||||
]
|
||||
const columns_info = [{
|
||||
title: 'NUCLIDE',
|
||||
align: 'left',
|
||||
dataIndex: 'nuclide'
|
||||
},{
|
||||
title: 'THRESHOLD ',
|
||||
align: 'left',
|
||||
dataIndex: 'threshold'
|
||||
},{
|
||||
title: 'ARMDARR',
|
||||
align: 'left',
|
||||
dataIndex: 'ARMDARR'
|
||||
},{
|
||||
title: 'ARMDRRR',
|
||||
align: 'left',
|
||||
dataIndex: 'ARMDRRR'
|
||||
},{
|
||||
title: 'IDCARR',
|
||||
align: 'left',
|
||||
dataIndex: 'IDCARR'
|
||||
},{
|
||||
title: 'IDCRRR',
|
||||
align: 'left',
|
||||
dataIndex: 'IDCRRR'
|
||||
}
|
||||
]
|
||||
const columns_acq = [{
|
||||
title: 'NUCLIDE',
|
||||
align: 'center',
|
||||
|
|
@ -223,7 +281,33 @@ export default {
|
|||
stationOptions: [],
|
||||
paramsArg: {},
|
||||
columns,
|
||||
dataSource: [],
|
||||
columns_info,
|
||||
dataSource: [
|
||||
{
|
||||
name: "ARP01、ARP02测试报警规则名称",
|
||||
station: [ "ARP01", "ARP02","ARP01","ARP01","ARP01","ARP01","ARP01","ARP01" ],
|
||||
collectionStartTime: "2023-07-25 16:27:03",
|
||||
alarmStartDate: "2023-07-25 16:27:03",
|
||||
alarmInfo: "Ce141核素首次出现；Ce141、Cs134、Cs137核素浓度高于历史平均值",
|
||||
nuclideList: [
|
||||
{ nuclide: "Cs132", threshold: 1.3, ARMDARR: 2.2, ARMDRRR: null, IDCARR: null, IDCRRR: null },
|
||||
{ nuclide: "Cs132", threshold: 1.3, ARMDARR: 2.2, ARMDRRR: null, IDCARR: 2.2, IDCRRR: null }
|
||||
],
|
||||
dataSource: [ "ARMDARR", "IDCARR","ARMDARR","ARMDARR" ]
|
||||
},
|
||||
{
|
||||
name: "UPS02测试报警规则名称",
|
||||
station: [ "UPS02" ],
|
||||
collectionStartTime: "2023-07-25 16:37:03",
|
||||
alarmStartDate: "2023-07-25 16:27:03",
|
||||
alarmInfo: "Pb210、Pb212核素浓度高于历史平均值",
|
||||
nuclideList: [
|
||||
{ nuclide: "Pb210", threshold: 1.3, ARMDARR: 2.2, ARMDRRR: 3.21393, IDCARR: -0.34512, IDCRRR: null },
|
||||
{ nuclide: "Pb212", threshold: 1.3, ARMDARR: 2.2, ARMDRRR: -3.2323, IDCARR: 2.2, IDCRRR: null }
|
||||
],
|
||||
dataSource: [ "ARMDARR", "ARMDRRR" ]
|
||||
}
|
||||
],
|
||||
loading: false,
|
||||
ipagination:{
|
||||
current: 1,
|
||||
|
|
@ -265,6 +349,7 @@ export default {
|
|||
})
|
||||
},
|
||||
handleSearch({ startDate, endDate, stations, sources }) {
|
||||
console.log(startDate, endDate, stations, sources);
|
||||
this.paramsArg = {
|
||||
startDate,
|
||||
endDate,
|
||||
|
|
@ -273,6 +358,9 @@ export default {
|
|||
}
|
||||
// this.getServerAlarmHistory({ startDate, endDate, names })
|
||||
},
|
||||
rowClick(record) {
|
||||
this.isDetail = true
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
|
|
@ -371,4 +459,24 @@ export default {
|
|||
color: #ade6ee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.qqqqq{
|
||||
.ant-popover-arrow{
|
||||
border-left-color: #1993cc !important;
|
||||
border-top-color: #1993cc !important;
|
||||
}
|
||||
.ant-popover-inner-content{
|
||||
padding: 0;
|
||||
}
|
||||
.ant-table-thead > tr th{
|
||||
background-color: #1993cc !important;
|
||||
}
|
||||
.ant-table-tbody tr{
|
||||
background-color: #084a5b;
|
||||
}
|
||||
.ant-table-tbody tr:nth-child(2n){
|
||||
background-color: rgba(13, 113, 139, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
597
src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue
Normal file
597
src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue
Normal file
|
|
@ -0,0 +1,597 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div class="rules-header">
|
||||
<a-row type="flex" :gutter="10">
|
||||
<a-col flex="190px">
|
||||
<a-button class="rules-add" @click="handleAdd">
|
||||
<img class="icon-add" src="@/assets/images/global/add.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Create Alarm Rule
|
||||
</span>
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Station</span>
|
||||
<a-select style="width:180px"
|
||||
v-model="queryParams.station"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
:options="stationOptions"
|
||||
@change="onStationChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col flex="310px">
|
||||
<span class="item-label">Data Sources</span>
|
||||
<a-select style="width:180px"
|
||||
v-model="queryParams.source"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
:options="sourceOptions"
|
||||
@change="onSourceChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col flex="265px">
|
||||
<span class="item-label">Nuclide</span>
|
||||
<a-select style="width:180px"
|
||||
v-model="queryParams.nuclide"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="1"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
:options="nuclideOptions"
|
||||
@change="onNuclideChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-button class="search-btn" @click="onSearch">
|
||||
<img class="icon-add" src="@/assets/images/global/search.png" alt="" />
|
||||
<span style="margin-left: 10px;">
|
||||
Search
|
||||
</span>
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="rules-content">
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="monitor-list">
|
||||
<div class="monitor-list-item">
|
||||
<div class="monitor-list-item-title">
|
||||
<div class="monitor-list-item-title-name">asdfsd</div>
|
||||
<div class="monitor-list-item-title-server">
|
||||
<span style="color: #5b9cba;">Qualifier：</span>
|
||||
<span style="color: #ade6ee;">FULL</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-list-item-content">
|
||||
<div class="monitor-list-item-content-info">
|
||||
<div>
|
||||
Source：
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
asdfasdfas
|
||||
</template>
|
||||
<span>asdfasdfas</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
Stations：
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
asdfasdfas
|
||||
</template>
|
||||
<span>asdfasdfas</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
Nuclides：
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
asdfasdfas
|
||||
</template>
|
||||
<span>asdfasdfas</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[1==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
|
||||
{{ 1==1?"Enable":"Disabled" }}
|
||||
</div>
|
||||
<!-- <div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
|
||||
{{ item.enabled==1?"Enable":"Disabled" }}
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="monitor-list-item-footer">
|
||||
<div class="monitor-list-item-footer-group">
|
||||
<span style="color: #5b9cba;">Alarm Contact Group：</span>
|
||||
<span style="color: #ade6ee;">sadfasdfa</span>
|
||||
</div>
|
||||
<div class="monitor-list-item-footer-actions">
|
||||
<span title="Edit" class="actions-edit" @click="editItem()"></span>
|
||||
<span title="Delete" class="actions-delete" @click="deleteItem()"></span>
|
||||
<span v-if="1==1" title="Enable" class="actions-enable" @click="changeItemStatus()">
|
||||
</span>
|
||||
<span v-if="1==0" title="Disabled" class="actions-disable" @click="changeItemStatus()">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <j-multi-select-tag type="checkbox" dictCode="spectral_qualifier" /> -->
|
||||
</div>
|
||||
</a-spin>
|
||||
<a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
:page-size-options="ipagination.pageSizeOptions"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:total="ipagination.total"
|
||||
:show-total="(total, range) => `Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
|
||||
show-less-items
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="isAdd ? 'Add Rule' : 'Edit Rule'"
|
||||
:width="845"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form
|
||||
:form="form"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item label="Name">
|
||||
<a-input
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please input name!' }],
|
||||
initialVale: this.formVal.name
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Analyse Source">
|
||||
<j-multi-select-tag
|
||||
type="checkbox"
|
||||
dictCode="alarm_analyse_rule_source"
|
||||
v-decorator="[
|
||||
'source',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.source
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Station">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
:options="stationOptions"
|
||||
v-decorator="[
|
||||
'station',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select station' }],
|
||||
initialVale: this.formVal.station
|
||||
}
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Nuclide">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
:maxTagCount="5"
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
:options="nuclideOptions"
|
||||
v-decorator="[
|
||||
'nuclide',
|
||||
{
|
||||
rules: [{ required: true, message: 'Please select nuclide' }],
|
||||
initialVale: this.formVal.nuclide
|
||||
}
|
||||
]"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Spectral Qualifier">
|
||||
<j-multi-select-tag
|
||||
type="checkbox"
|
||||
dictCode="spectral_qualifier"
|
||||
v-decorator="[
|
||||
'qualifier',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.qualifier
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Condition">
|
||||
<a-checkbox-group
|
||||
v-decorator="[
|
||||
'condition',
|
||||
{
|
||||
rules: [{ required: true }],
|
||||
initialVale: this.formVal.condition
|
||||
}
|
||||
]"
|
||||
>
|
||||
<a-row v-for="(item, key) in dictOptions" :key="key" >
|
||||
<a-checkbox :value="item.value">{{ item.text || item.label }}</a-checkbox>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="Remark">
|
||||
<a-input
|
||||
type="textarea"
|
||||
v-decorator="[
|
||||
'remark',
|
||||
{
|
||||
initialVale: this.formVal.desc
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajaxGetDictItems } from '@/api/api'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isAdd: true,
|
||||
visible: false,
|
||||
spinning: false,
|
||||
queryParams: {
|
||||
station: undefined,
|
||||
source: undefined,
|
||||
buclide: undefined
|
||||
},
|
||||
sourceOptions: [
|
||||
{
|
||||
label: "IDC",
|
||||
value: "idc"
|
||||
},
|
||||
{
|
||||
label: "ARMD",
|
||||
value: "armd"
|
||||
}
|
||||
],
|
||||
stationOptions: [],
|
||||
nuclideOptions: [],
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 9,
|
||||
pageSizeOptions: ['9', '18', '27'],
|
||||
showTotal: (total, range) => {
|
||||
const { current, pageSize } = this.ipagination
|
||||
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
form: this.$form.createForm(this),
|
||||
dictOptions: [],
|
||||
formVal: {
|
||||
name: "",
|
||||
source: [],
|
||||
station: [],
|
||||
nuclide: [],
|
||||
qualifier: [],
|
||||
condition: [],
|
||||
desc: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getCondition();
|
||||
this.getStationList();
|
||||
},
|
||||
methods: {
|
||||
getStationList() {
|
||||
getAction("/webStatistics/findStationList",{menuName:""}).then(res => {
|
||||
if (res.success) {
|
||||
if (res.result.length>0) {
|
||||
this.stationOptions = res.result.map(item => {
|
||||
return {
|
||||
label: item.stationCode,
|
||||
value: item.stationId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.stationOptions=[]
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAdd() {
|
||||
this.isAdd = true
|
||||
this.visible = true
|
||||
},
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
},
|
||||
onStationChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onSourceChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onNuclideChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onSearch() {
|
||||
// this.getAlarmRulesPage()
|
||||
},
|
||||
editItem(id) { },
|
||||
deleteItem(id) { },
|
||||
changeItemStatus(id, isEnabled) { },
|
||||
handlePageChange(page, pageSize) {
|
||||
this.ipagination.current = page
|
||||
this.ipagination.pageSize = pageSize
|
||||
// this.getAlarmRulesPage()
|
||||
},
|
||||
handleSizeChange(current, size) {
|
||||
this.ipagination.current = current
|
||||
this.ipagination.pageSize = size
|
||||
// this.getAlarmRulesPage()
|
||||
},
|
||||
getCondition() {
|
||||
//根据字典Code, 初始化字典数组
|
||||
ajaxGetDictItems("alarm_analyse_rule_condition", null).then((res) => {
|
||||
if (res.success) {
|
||||
this.dictOptions = res.result;
|
||||
}
|
||||
})
|
||||
},
|
||||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
console.log('Received values of form: ', values);
|
||||
if (!err) {
|
||||
this.visible = false
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-row-flex{
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
.operators {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
.ant-btn {
|
||||
width: 92px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-modal-title{
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.rules-header{
|
||||
height: 50px;
|
||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||
margin: 0 0 0px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
background: rgba(12, 235, 201, 0.05);
|
||||
.item-label{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
color: #ade6ee;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.rules-add{
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.search-btn{
|
||||
margin-left: 10px;
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.rules-reset{
|
||||
background-color: #1397a3;
|
||||
font-family: ArialMT;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.rules-content{
|
||||
height: calc(100% - 65px);
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.ant-spin-nested-loading{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.monitor-list{
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
&-item{
|
||||
width: 32.76%;
|
||||
height: 224px;
|
||||
// margin-top: 15px;
|
||||
background-color: rgba(2, 40, 43, 0.5);
|
||||
border: solid 1px rgba(65, 111, 127, 0.5);
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
&-title{
|
||||
height: 50px;
|
||||
padding: 0 15px 0 20px;
|
||||
background-color: rgba(13, 109, 118, 0.2);
|
||||
border-bottom: solid 1px rgba(65, 111, 127, 0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 50px;
|
||||
font-family: ArialMT;
|
||||
&-name{
|
||||
font-size: 16px;
|
||||
color: #00bded;
|
||||
}
|
||||
&-server{
|
||||
width: 55%;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
padding: 15px 20px;
|
||||
&-info{
|
||||
font-family: ArialMT;
|
||||
font-size: 16px;
|
||||
color: #ade6ee;
|
||||
// span{
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
&-btn{
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
&-enable{
|
||||
background-color: #098839;
|
||||
}
|
||||
&-disable{
|
||||
background-color: #8a8a8a;
|
||||
}
|
||||
}
|
||||
&-footer{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-group{
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
}
|
||||
&-actions{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.actions-edit{
|
||||
background: url(~@/assets/images/abnormalAlarm/edit.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
background: url(~@/assets/images/abnormalAlarm/edit-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.actions-delete{
|
||||
background: url(~@/assets/images/abnormalAlarm/delete.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
background: url(~@/assets/images/abnormalAlarm/delete-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.actions-enable{
|
||||
background: url(~@/assets/images/abnormalAlarm/enable.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
background: url(~@/assets/images/abnormalAlarm/enable-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.actions-disable{
|
||||
background: url(~@/assets/images/abnormalAlarm/disable.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
&:hover{
|
||||
background: url(~@/assets/images/abnormalAlarm/disable-active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
width: 32.76%;
|
||||
}
|
||||
}
|
||||
.ant-pagination{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col flex="310px" v-if="type ==='analysisMonitor'">
|
||||
<a-form-model-item label="Data Sources ">
|
||||
<a-form-model-item label="Data Sources">
|
||||
<a-select style="width:180px"
|
||||
:value="queryParams.sources"
|
||||
mode="multiple"
|
||||
|
|
|
|||
|
|
@ -356,7 +356,6 @@ export default {
|
|||
onSave() {
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values);
|
||||
if (this.isAdd) {
|
||||
postAction("/sysDatabase/create", values).then(res => {
|
||||
if (res.success) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user