913 lines
28 KiB
Vue
913 lines
28 KiB
Vue
<template>
|
||
<div style="height: 100%">
|
||
<div class="rules-header">
|
||
<div>
|
||
<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="300px">
|
||
<span class="item-label">Rule Status</span>
|
||
<a-select
|
||
style="width: 180px; display: inline-block"
|
||
v-model="queryParams.station"
|
||
:options="stateOptions"
|
||
show-arrow
|
||
allowClear
|
||
placeholder="select..."
|
||
@change="onStateChange"
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-col>
|
||
<a-col flex="300px">
|
||
<span class="item-label">Source Type</span>
|
||
<a-select
|
||
style="width: 180px; display: inline-block"
|
||
v-model="queryParams.type"
|
||
:options="typeOptions"
|
||
show-arrow
|
||
allowClear
|
||
placeholder="select..."
|
||
@change="onTypeChange"
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-col>
|
||
<a-col flex="255px">
|
||
<span class="item-label">Source</span>
|
||
<a-select
|
||
style="width: 180px; display: inline-block"
|
||
v-model="queryParams.name"
|
||
:options="nameOptions"
|
||
show-arrow
|
||
allowClear
|
||
placeholder="select..."
|
||
@change="onNameChange"
|
||
>
|
||
<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>
|
||
<!-- <a-button class="rules-reset" @click="resetQuery" style="display:none">
|
||
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||
<span style="margin-left: 10px;">
|
||
Refresh
|
||
</span>
|
||
</a-button> -->
|
||
</div>
|
||
<div class="rules-content">
|
||
<a-spin :spinning="spinning">
|
||
<div class="monitor-list">
|
||
<div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
|
||
<div class="monitor-list-item-title">
|
||
<div class="monitor-list-item-title-name">{{ item.name }}</div>
|
||
<div class="monitor-list-item-title-server">
|
||
<span style="color: #5b9cba">{{ item.sourceType }}：</span>
|
||
<a-tooltip>
|
||
<template slot="title">
|
||
{{ item.sourceName }}
|
||
</template>
|
||
<span style="color: #ade6ee">{{ item.sourceName }}</span>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="monitor-list-item-content">
|
||
<div class="monitor-list-item-content-info">
|
||
{{ JSON.parse(item.operator).name }} {{ JSON.parse(item.operator).operator }}
|
||
{{ JSON.parse(item.operator).threshold }}{{ JSON.parse(item.operator).units }}
|
||
</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">{{ item.groupName }}</span>
|
||
</div>
|
||
<div class="monitor-list-item-footer-actions">
|
||
<span title="Edit" class="actions-edit" @click="editItem(item.id)"></span>
|
||
<span title="Delete" class="actions-delete" @click="deleteItem(item.id)"></span>
|
||
<span
|
||
v-if="item.enabled == 1"
|
||
title="Enable"
|
||
class="actions-enable"
|
||
@click="changeItemStatus(item.id, item.enabled)"
|
||
>
|
||
</span>
|
||
<span
|
||
v-if="item.enabled == 0"
|
||
title="Disabled"
|
||
class="actions-disable"
|
||
@click="changeItemStatus(item.id, item.enabled)"
|
||
>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-spin>
|
||
<a-pagination
|
||
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"
|
||
:maskClosable="false"
|
||
@cancel="onCancel"
|
||
>
|
||
<a-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
|
||
<a-row :gutter="[15, 0]">
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
|
||
<a-select
|
||
v-model="form.sourceType"
|
||
:options="typeOptions"
|
||
show-arrow
|
||
allowClear
|
||
placeholder="select..."
|
||
@change="onSourceTypeChange"
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="sourceId" label="Source" prop="sourceId">
|
||
<a-select
|
||
v-model="form.sourceId"
|
||
:options="sourceOptions"
|
||
show-arrow
|
||
allowClear
|
||
labelInValue
|
||
placeholder="select..."
|
||
@change="onSourceChange"
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="[15, 0]">
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
|
||
<a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="monitorItem" label="Monitor Item" prop="itemId">
|
||
<a-select
|
||
v-model="form.itemId"
|
||
:options="itemOptions"
|
||
show-arrow
|
||
allowClear
|
||
labelInValue
|
||
placeholder="select..."
|
||
@change="onItemChange"
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="[15, 0]">
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
|
||
<a-select
|
||
v-model="form.operator"
|
||
:options="operatorOptions"
|
||
show-arrow
|
||
allowClear
|
||
placeholder="select..."
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="threshold" label="Threshold" prop="threshold">
|
||
<a-input v-model="form.threshold" :suffix="units" placeholder="Pleace enter the threshold value" />
|
||
</a-form-model-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="[15, 0]">
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
|
||
<a-select
|
||
v-model="form.silenceCycle"
|
||
:options="silenceCyclerOptions"
|
||
show-arrow
|
||
allowClear
|
||
placeholder="select..."
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-model-item ref="contactGroup" label="Contact Group" prop="contactId">
|
||
<a-select
|
||
v-model="form.contactId"
|
||
:options="contactGroupOptions"
|
||
show-arrow
|
||
allowClear
|
||
placeholder="select..."
|
||
>
|
||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||
</a-select>
|
||
</a-form-model-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form-model>
|
||
<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 { getAction, postAction, httpAction, deleteAction, putAction } from '@/api/manage'
|
||
import BoxTitle from '../../components/boxTitle.vue'
|
||
export default {
|
||
components: {
|
||
BoxTitle,
|
||
VNodes: {
|
||
functional: true,
|
||
render: (h, ctx) => ctx.props.vnodes,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
spinning: false,
|
||
isAdd: true,
|
||
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,
|
||
},
|
||
visible: false,
|
||
queryParams: {
|
||
station: undefined,
|
||
type: undefined,
|
||
name: undefined,
|
||
},
|
||
stateOptions: [
|
||
{
|
||
label: 'Disabled',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: 'Enable',
|
||
value: '1',
|
||
},
|
||
],
|
||
typeOptions: [
|
||
{
|
||
label: 'Server',
|
||
value: 'Server',
|
||
},
|
||
{
|
||
label: 'Database',
|
||
value: 'Database',
|
||
},
|
||
{
|
||
label: 'E-MAIL',
|
||
value: 'Email',
|
||
},
|
||
],
|
||
nameOptions: [],
|
||
monitorList: [],
|
||
// 表单
|
||
form: {
|
||
sourceType: undefined,
|
||
sourceId: undefined,
|
||
name: '',
|
||
itemId: undefined,
|
||
operator: undefined,
|
||
threshold: '',
|
||
silenceCycle: undefined,
|
||
contactId: undefined,
|
||
},
|
||
currId: '',
|
||
units: '',
|
||
sourceOptions: [],
|
||
operatorOptions: [
|
||
{
|
||
label: '>',
|
||
value: '>',
|
||
},
|
||
{
|
||
label: '<',
|
||
value: '<',
|
||
},
|
||
{
|
||
label: '>=',
|
||
value: '>=',
|
||
},
|
||
{
|
||
label: '<=',
|
||
value: '<=',
|
||
},
|
||
{
|
||
label: '==',
|
||
value: '==',
|
||
},
|
||
],
|
||
itemOptions: [],
|
||
silenceCyclerOptions: [
|
||
{
|
||
label: '5 minutes',
|
||
value: 300,
|
||
},
|
||
{
|
||
label: '15 minutes',
|
||
value: 900,
|
||
},
|
||
{
|
||
label: '30 minutes',
|
||
value: 1800,
|
||
},
|
||
{
|
||
label: '60 minutes',
|
||
value: 3600,
|
||
},
|
||
{
|
||
label: '3 hours',
|
||
value: 10800,
|
||
},
|
||
{
|
||
label: '6 hours',
|
||
value: 21600,
|
||
},
|
||
{
|
||
label: '12 hours',
|
||
value: 43200,
|
||
},
|
||
{
|
||
label: '24 hours',
|
||
value: 86400,
|
||
},
|
||
],
|
||
contactGroupOptions: [],
|
||
rules: {
|
||
sourceType: [{ required: true, message: 'Please select a sourceType', trigger: 'change' }],
|
||
sourceId: [{ required: true, message: 'Please select a source', trigger: 'change' }],
|
||
name: [{ required: true, message: 'Please input alarmRule name' }],
|
||
itemId: [{ required: true, message: 'Please select a monitorItem', trigger: 'change' }],
|
||
operator: [{ required: true, message: 'Please select a logicSymbol', trigger: 'change' }],
|
||
threshold: [{ required: true, message: 'Please input threshold' }],
|
||
silenceCycle: [{ required: true, message: 'Please select a silenceCycle', trigger: 'change' }],
|
||
contactId: [{ required: true, message: 'Please select a contactGroup', trigger: 'change' }],
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getAlarmRulesPage()
|
||
this.getAlarmGroup()
|
||
},
|
||
methods: {
|
||
getAlarmSources(val) {
|
||
getAction('/alarmRule/getSources', { souceType: val }).then((res) => {
|
||
if (res.success) {
|
||
this.nameOptions = res.result.map((item) => {
|
||
return {
|
||
label: item.sourceName,
|
||
value: item.sourceId,
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
getSourcesOptions(val) {
|
||
getAction('/alarmRule/getSources', { souceType: val }).then((res) => {
|
||
if (res.success) {
|
||
this.sourceOptions = res.result.map((item) => {
|
||
return {
|
||
label: item.sourceName,
|
||
value: item.sourceId,
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
getAlarmRulesPage() {
|
||
this.spinning = true
|
||
let params = {
|
||
pageNo: this.ipagination.current,
|
||
pageSize: this.ipagination.pageSize,
|
||
enabled: this.queryParams.station,
|
||
sourceType: this.queryParams.type,
|
||
sourceId: this.queryParams.name,
|
||
}
|
||
getAction('/alarmRule/findPage', params).then((res) => {
|
||
this.spinning = false
|
||
if (res.success) {
|
||
this.monitorList = res.result.records
|
||
this.ipagination.total = res.result.total
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
onSearch() {
|
||
this.ipagination.current = 1
|
||
this.getAlarmRulesPage()
|
||
},
|
||
resetQuery() {
|
||
this.queryParams = {
|
||
station: undefined,
|
||
type: undefined,
|
||
name: undefined,
|
||
}
|
||
},
|
||
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()
|
||
},
|
||
onTypeChange(val) {
|
||
this.queryParams.type = val
|
||
if (val) {
|
||
this.getAlarmSources(val)
|
||
} else {
|
||
this.nameOptions = []
|
||
}
|
||
},
|
||
onStateChange(val) {
|
||
this.queryParams.station = val
|
||
},
|
||
onNameChange(val) {
|
||
this.queryParams.name = val
|
||
},
|
||
getUid() {
|
||
return (Math.random() + new Date().getTime()).toString(32).slice(0, 8)
|
||
},
|
||
handleAdd() {
|
||
this.isAdd = true
|
||
this.visible = true
|
||
},
|
||
onSourceTypeChange(val) {
|
||
this.form.sourceType = val
|
||
this.form.sourceId = undefined
|
||
this.form.itemId = undefined
|
||
if (val) {
|
||
this.getSourcesOptions(val)
|
||
} else {
|
||
this.sourceOptions = []
|
||
}
|
||
},
|
||
onSourceChange(val, option) {
|
||
if (val) {
|
||
this.form.sourceId = val
|
||
this.getItems(val.key)
|
||
} else {
|
||
this.form.sourceId = {}
|
||
this.form.itemId = undefined
|
||
}
|
||
},
|
||
getItems(val) {
|
||
getAction('/alarmRule/getItems', { sourceId: val }).then((res) => {
|
||
if (res.success) {
|
||
this.itemOptions = res.result.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.itemId,
|
||
units: item.units,
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
onItemChange(val, option) {
|
||
this.form.itemId = val
|
||
this.units = option.data.props.units
|
||
},
|
||
getAlarmGroup() {
|
||
let params = {
|
||
pageNo: 1,
|
||
pageSize: 9999,
|
||
}
|
||
getAction('/alarmContactGroup/findPage', params).then((res) => {
|
||
if (res.success) {
|
||
this.contactGroupOptions = res.result.records.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id,
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
onSave() {
|
||
this.$refs.al_ruleForm.validate((valid) => {
|
||
if (valid) {
|
||
let params = {
|
||
silenceCycle: this.form.silenceCycle,
|
||
contactId: this.form.contactId,
|
||
sourceId: this.form.sourceId.key,
|
||
sourceType: this.form.sourceType,
|
||
itemId: this.form.itemId.key,
|
||
rule: {
|
||
name: this.form.itemId.label,
|
||
operator: this.form.operator,
|
||
threshold: this.form.threshold,
|
||
units: this.units,
|
||
},
|
||
name: this.form.name,
|
||
id: this.isAdd ? '' : this.currId,
|
||
}
|
||
if (this.isAdd) {
|
||
postAction('/alarmRule/create', params).then((res) => {
|
||
if (res.success) {
|
||
this.visible = false
|
||
this.$message.success('success')
|
||
this.getAlarmRulesPage()
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
} else {
|
||
httpAction('/alarmRule/update', params, 'put').then((res) => {
|
||
if (res.success) {
|
||
this.visible = false
|
||
this.$message.success('success')
|
||
this.getAlarmRulesPage()
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onCancel() {
|
||
this.resetForm()
|
||
this.visible = false
|
||
},
|
||
editItem(id) {
|
||
getAction('/alarmRule/findInfo', { alarmRuleId: id }).then(async (res) => {
|
||
if (res.success) {
|
||
this.isAdd = false
|
||
this.form.sourceType = res.result.sourceType
|
||
this.form.sourceId = {
|
||
key: res.result.sourceId || '',
|
||
label: res.result.sourceName || '',
|
||
}
|
||
this.form.name = res.result.name
|
||
this.form.itemId = {
|
||
key: res.result.itemId,
|
||
label: JSON.parse(res.result.operator).name,
|
||
}
|
||
this.form.operator = JSON.parse(res.result.operator).operator
|
||
this.form.threshold = JSON.parse(res.result.operator).threshold
|
||
this.units = JSON.parse(res.result.operator).units
|
||
this.form.silenceCycle = res.result.silenceCycle
|
||
this.form.contactId = res.result.contactId
|
||
this.currId = res.result.id
|
||
this.visible = true
|
||
getAction('/alarmRule/getSources', { souceType: res.result.sourceType })
|
||
.then((res) => {
|
||
if (res.success) {
|
||
this.sourceOptions = res.result.map((item) => {
|
||
return {
|
||
label: item.sourceName,
|
||
value: item.sourceId,
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
})
|
||
getAction('/alarmRule/getItems', { sourceId: res.result.sourceId })
|
||
.then((res) => {
|
||
if (res.success) {
|
||
this.itemOptions = res.result.map((item) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.itemId,
|
||
units: item.units,
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
})
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
deleteItem(id) {
|
||
let _this = this
|
||
this.$confirm({
|
||
title: 'Are you sure to delete this item?',
|
||
onOk() {
|
||
deleteAction('/alarmRule/deleteById', { alarmRuleId: id }).then((res) => {
|
||
if (res.success) {
|
||
_this.$message.success('success')
|
||
_this.getAlarmRulesPage()
|
||
} else {
|
||
_this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
onCancel() {
|
||
console.log('Cancel')
|
||
},
|
||
})
|
||
},
|
||
changeItemStatus(id, isEnabled) {
|
||
putAction(`/alarmRule/updateStatus?alarmRuleId=${id}&enabled=${isEnabled == 1 ? 0 : 1}`).then((res) => {
|
||
if (res.success) {
|
||
this.$message.success('success')
|
||
this.getAlarmRulesPage()
|
||
} else {
|
||
this.$message.warning('This operation fails. Contact your system administrator')
|
||
}
|
||
})
|
||
},
|
||
resetForm() {
|
||
this.$refs.al_ruleForm.resetFields()
|
||
this.form = {
|
||
sourceType: undefined,
|
||
sourceId: undefined,
|
||
name: '',
|
||
itemId: undefined,
|
||
operator: undefined,
|
||
threshold: '',
|
||
silenceCycle: undefined,
|
||
contactId: undefined,
|
||
}
|
||
this.sourceOptions = []
|
||
this.itemOptions = []
|
||
this.units = ''
|
||
},
|
||
},
|
||
}
|
||
</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;
|
||
}
|
||
.ant-select {
|
||
.ant-select-arrow-icon {
|
||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
}
|
||
&-open {
|
||
.ant-select-arrow-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
.ant-select-dropdown-content {
|
||
position: relative;
|
||
background: #03353f;
|
||
}
|
||
.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;
|
||
}
|
||
&-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> |