From 1e25c77ca39bf60d5840629c92566bc0301b5f74 Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Thu, 3 Aug 2023 17:58:50 +0800
Subject: [PATCH] =?UTF-8?q?analysis=20monitor=20=E6=A8=A1=E5=9D=97=20alarm?=
 =?UTF-8?q?=20rules=20=E9=A1=B5=E9=9D=A2=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../alarmCenter/alarmRules/index.vue          |  12 +-
 .../analysisMonitor/alarmHistory/index.vue    | 134 +++-
 .../analysisMonitor/alarmRules/index.vue      | 597 ++++++++++++++++++
 .../abnormalAlarm/components/searchBar.vue    |   2 +-
 .../databaseMonitor/overview/index.vue        |   1 -
 5 files changed, 725 insertions(+), 21 deletions(-)
 create mode 100644 src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue

diff --git a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
index 5ef2ace..3e100e0 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
@@ -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;
diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
index 46dd640..fb2febf 100644
--- a/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue b/src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue
new file mode 100644
index 0000000..88116cc
--- /dev/null
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/components/searchBar.vue b/src/views/abnormalAlarm/components/searchBar.vue
index 6360281..1749ab0 100644
--- a/src/views/abnormalAlarm/components/searchBar.vue
+++ b/src/views/abnormalAlarm/components/searchBar.vue
@@ -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" 
diff --git a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
index 7dcbd66..7ae40f5 100644
--- a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
@@ -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) {