916 lines
27 KiB
Vue
916 lines
27 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"
|
||
@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.label)
|
||
} else {
|
||
this.form.sourceId = {}
|
||
this.form.itemId = undefined
|
||
}
|
||
},
|
||
getItems(val) {
|
||
getAction("/alarmRule/getItems", {sourceName: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", { sourceName: res.result.sourceName }).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> |