From 52b2beae09cc6b7956cc5aeaeb5bbdd307298b4d Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Thu, 27 Jul 2023 18:28:52 +0800
Subject: [PATCH] =?UTF-8?q?server=20db=20emain=20=E4=B8=89=E4=B8=AA?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97overview=E9=A1=B5=E9=9D=A2=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/abnormalAlarm/off.png       | Bin 0 -> 1403 bytes
 src/assets/images/abnormalAlarm/on.png        | Bin 0 -> 1257 bytes
 .../alarmCenter/alarmHistory/index.vue        |   2 +-
 .../alarmCenter/alarmRules/index.vue          |   2 +-
 .../abnormalAlarm/components/tableList.vue    | 121 ++++++
 .../databaseMonitor/overview/index.vue        | 352 +++++++++++++++++-
 .../emailMonitor/overview/index.vue           | 351 ++++++++++++++++-
 .../serverMonitor/overview/index.vue          | 344 ++++++++++++++++-
 8 files changed, 1150 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/images/abnormalAlarm/off.png
 create mode 100644 src/assets/images/abnormalAlarm/on.png
 create mode 100644 src/views/abnormalAlarm/components/tableList.vue

diff --git a/src/assets/images/abnormalAlarm/off.png b/src/assets/images/abnormalAlarm/off.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fd77c8fa77dcccea062ff503856a085e215ab2d
GIT binary patch
literal 1403
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+n3Xd_B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!WpKsVXIz(~Q|QqR!L
z#Kg=%N5ROz$Uxt~RNv4@*U-$$z{JYXTmcG{fVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr62to{@q^cxGNo
zetEGbSc9*xm1kaYNn&1ds;7&s63_^}%*+%kOD88c6AKp;S2qK5Lqk^=M{^S=7gJL+
zGe;9gBO?=Ym|mCs<kH;Kyb_q+6og(=oO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nYi6z
zgws5z-W1$!F~+G^ALtl;P|PC5G)xGXd_YWix&?CJDL*w2nB0qi>3X?`{6Pi=#&@1B
zjv*DdN+#Q`mU0wnyMJ|pf(A>cLWHZd@I$tP$IRlGy64`CxWUQkIqMJS={qbUB9r75
zrFe>FCoEih<VT={=fYMoC8@{HXBD^IbPc!tptCvsS#9~ZGm@&4PaY6C-)XW?$UpU+
z`Nz3GoVN6fNB14$@6`D?`G>=gPWMUaM#qaQ52cwUd^CSF_v9CqZ@+EN?^Qb$l&rH)
zIj{Y&qSw+(rnYR&j8%K(_}UM9SN&Zf&9Y>5N7dfG9JB0yM!){rX-(x?b#>Ley2DZ3
zIy0sk%k{G#Ob}Rn@r1$6w`DKNb|<BGA7$!vVd`4skag*rhsvi;Hvf{_4hju7bJVuo
zdRg+I#42$0)eSLv3s-5?*v-#7@bL$u?Ve}#y+@O7<ZaI|o2?<%?KH=0>4UHHbic-}
zu@L2aSP;>({IaIm?6azd$B!w^KEmO9+2!D=r<-onX^055?TmRh>7ab~8w0`DU!~rb
zMd!@kKgUPy==%+v@*97aXuP}mKzqK({@&xsCQ`f`yDMz?w%^XZ(&GE0<kQbRg}d(D
zia8<{sBmvnL$`RZ+r#g_&vTvL7`4`5{`rRm77>?&o}^xi{u$;M_x9My6sFyG{~b=-
zy!TSK#wt&jPMJ>A82+<Qi$p!vc%40Y^x=`}M{PfRzI5n*oc=?#SU-jP|7F+ztP%|J
W=MP0Q#Br_#6^EX#elF{r5}E*tnhos$

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/on.png b/src/assets/images/abnormalAlarm/on.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb1201055ceda258bddb09c9a324984780faba31
GIT binary patch
literal 1257
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`k|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+n3Xd_B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!WpKsVXIz(~Q|QqR!L
z#Kg=%N5ROz$Uxt~RNv4@*U-$$z{JYXTmcG{fVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr62to{@q^cxGNo
zetEGbSc9*xm1kaYNn&1ds;7&s63_^}%*+%kOAA*=M@vg*S2qK5Lqk^=OD9uH7fS<U
zLpL*Hb7vDnm|mCs<kH;Kyb_q+6og(EoO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nYi8J
zh|@f%-W1$!al)xrALtl;P|PC5G)xGXd_YWix&?CJDL*w2nB0qi>6-PyvOop~#u!f*
z$B>F!Et3y=F&hfBso!>esU2b)A#f$DmVITw+I~fiMeL692PZG!=;Hb%(e*%SUt>`C
zL2t(`dtdstbjAKZ>E|SsA@k#g!AbLzY3ZSl*ZIZyG>dNFIHr1?>G}g1o88^Y={78V
z2b6CxO-_iIF-hk9+@?hnlic^Qm~ye_@8D8<(h^(T)Lj3xXGQJhiwQRUXZBe-x~^h-
z`Yg^XKm5I!>860F!;e*_acjSjo#ba1sV%tj;3k*GSiJ@I%%}Nx``Ugk{O@^nuB7d^
zryG}EtZBA+6|>;Y^fK1?Ypqj#rzZdQTXD)-`k=kh>CLxA!__{EMpboi#vS1PYp|(n
ziv3q9&-SOL8xH6TO|TTIYvtacxjn0U2FHp0cW%Wfu%;*6wdITto0i&~BBX9Q_eAZy
zFTUDbC$~SkF@Ghu)B}kxOtv>C&z*ks<!@=rjf|@v2<&N)|G+v=#hiUd>;B#^>IWE>
X-^gm1qPZjvRQPzh`njxgN@xNA^gOnv

literal 0
HcmV?d00001

diff --git a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
index 47fc4ef..16c7cba 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
@@ -263,7 +263,7 @@ export default {
     },
     handleSizeChange(current, size) {
       this.ipagination.current = current
-      this.page.pageSize = size
+      this.ipagination.pageSize = size
       this.getAlarmLogTable()
     },
     handleTabChange(key) {
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
index 86533b8..c9e1263 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div  style="height: 100%;">
+  <div style="height: 100%;">
     <div class="rules-header">
       <div>
         <a-row type="flex" :gutter="10">
diff --git a/src/views/abnormalAlarm/components/tableList.vue b/src/views/abnormalAlarm/components/tableList.vue
new file mode 100644
index 0000000..6958d0a
--- /dev/null
+++ b/src/views/abnormalAlarm/components/tableList.vue
@@ -0,0 +1,121 @@
+<template>
+  <a-table
+   class="custom-table"
+    v-bind="$attrs"
+    :data-source="list"
+    :columns="columns"
+    :size="size"
+    :row-key="rowKey"
+    :loading="loading"
+    :pagination="pagination"
+    :customRow="customRow"
+    :rowClassName="() => canSelect? 'custom-table-row': ''"
+    @change="handleTableChange"
+  >
+    <!-- 处理 scopedSlots -->
+    <template v-for="slotName of scopedSlotsKeys" :slot="slotName" slot-scope="text, record, index">
+      <slot :name="slotName" :text="text" :record="record" :index="index"></slot>
+    </template>
+  </a-table>
+</template>
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'middle'
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    loading: {
+      type: Boolean
+    },
+    pagination: {
+      type: [Object, Boolean]
+    },
+    selectedRowKeys: {
+      type: Array
+    },
+    selectionRows: {
+      type: Array
+    },
+    canSelect: {
+      type: Boolean,
+      default: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+        innerSelectedRowKeys: [],
+        innerSelectedRows: []
+    }
+  },
+  methods: {
+    // 实现单击选中/反选功能
+    customRow(record) {
+      const key = record[this.rowKey]
+      return {
+        class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
+        on: {
+          click: () => {
+            this.$emit("rowClick",record)
+            if(!this.canSelect) {
+              return
+            }
+            if (this.innerSelectedRowKeys.includes(key)) {
+               const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
+               this.innerSelectedRowKeys.splice(findIndex, 1)
+            } else {
+              if(this.multiple) {
+                this.innerSelectedRowKeys.push(key)
+              }
+              else {
+                this.innerSelectedRowKeys = [key]
+              }
+            }
+          }
+        }
+      }
+    },
+    handleTableChange(pagination, filters, sorter) {
+      this.$emit('change', pagination, filters, sorter)
+    }
+  },
+  watch: {
+    selectedRowKeys (val) {
+        this.innerSelectedRowKeys = val
+    },
+    innerSelectedRowKeys () {
+      this.$emit('update:selectedRowKeys', this.innerSelectedRowKeys)
+      this.innerSelectedRows = this.innerSelectedRowKeys.map((key) => {
+        return this.list.find(item => item[this.rowKey] === key)
+      })
+      this.$emit('update:selectionRows', this.innerSelectedRows)
+    }
+  },
+  computed: {
+    scopedSlotsKeys() {
+      return Object.keys(this.$scopedSlots)
+    }
+  }
+}
+</script>
+<style lang="less">
+.custom-table-row {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
index 2ad3e74..72c37d6 100644
--- a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
@@ -1,15 +1,353 @@
 <template>
-  <div>
-    overView
+  <div style="height: 100%;">
+    <div class="view-header">
+      <div class="view-num">Alarm：<span>{{ alarmTotal }}</span></div>
+      <div>
+        <a-button class="view-btn" @click="onAdd">
+          <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
+          <span style="margin-left: 10px;">
+            Add
+          </span>
+        </a-button>
+        <a-button class="view-btn" @click="onEdit">
+          <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
+          <span style="margin-left: 10px;">
+            edit
+          </span>
+        </a-button>
+        <a-button class="view-btn">
+          <img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
+          <span style="margin-left: 10px;">
+            Delete
+          </span>
+        </a-button>
+        <a-button class="view-btn">
+          <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
+          <span style="margin-left: 10px;">
+            Refresh
+          </span>
+        </a-button>
+      </div>
+    </div>
+    <div class="view-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="false"
+        @rowClick="onRowClick"
+      >
+        <template slot="status" slot-scope="{record}">
+          <div>
+            <img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
+            <img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
+            <span :class="[record.online?'status-on':'status-off']">{{ record.online?"Connecting":"Disconnect" }}</span>
+          </div>
+        </template>
+        <template slot="alarms" slot-scope="{text,record}">
+          <span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
+        </template>
+        <template slot="cpu" slot-scope="{text,record}">
+          <span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
+        </template>
+        <template slot="memory" slot-scope="{text,record}">
+          <span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
+        </template>
+        <template slot="disk" slot-scope="{text,record}">
+          <span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
+        </template>
+      </TableList>
+      <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' : 'Edit'" 
+      v-model="visible" 
+      @cancel="onCancel"
+    >
+    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
+      <a-form-item label="Name">
+        <a-input
+          v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
+        />
+      </a-form-item>
+      <a-form-item label="Ip Address">
+        <a-input
+          v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
+        />
+      </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>
-  export default {
-    
-  }
+import TableList from '../../components/tableList.vue';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+const columns = [
+  {
+    title: 'NAME',
+    align: 'left',
+    dataIndex: 'name'
+  },{
+    title: 'STATUS',
+    align: 'left',
+    dataIndex: 'online',
+    scopedSlots: {
+      customRender: 'status'
+    }
+  },{
+    title: 'IP ADDRESS',
+    align: 'left',
+    dataIndex: 'ipAddress'
+  },{
+    title: 'PROT',
+    align: 'left',
+    dataIndex: 'port'
+  },{
+    title: 'SLOW QUERY',
+    align: 'left',
+    dataIndex: 'slowQuery' 
+  },{
+    title: 'ALARMS',
+    align: 'left',
+    dataIndex: 'alarms',
+    scopedSlots: {
+      customRender: 'alarms',
+    }
+  },{
+    title: 'CPU UUTILZATION',
+    align: 'left',
+    dataIndex: 'cpuUutilzation',
+    scopedSlots: {
+      customRender: 'cpu',
+    }
+  },{
+    title: 'MEMORY USAGE',
+    align: 'left',
+    dataIndex: 'memoryUsage',
+    scopedSlots: {
+      customRender: 'memory',
+    }
+  },{
+    title: 'DISK USAGE',
+    align: 'left',
+    dataIndex: 'diskUsage',
+    scopedSlots: {
+      customRender: 'disk',
+    }
+  },
+]
+export default {
+  components: {
+    TableList,
+  },
+  data() {
+    return {
+      isAdd: true,
+      visible: false,
+      form: this.$form.createForm(this),
+      formVal: {
+        name: "",
+        ipAddress:""
+      },
+      currentId:"",
+      columns,
+      dataSource: [],
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+    }
+  },
+  computed: {
+    alarmTotal() {
+      let num= 0
+      this.dataSource.forEach(item => {
+        num = item.alarmRed ? num + item.alarms : num
+      });
+      return num
+    }
+  },
+  mounted () {
+    this.getSysDatabase();
+  },
+  methods: {
+    getSysDatabase() {
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize
+      }
+      getAction("/sysDatabase/findPage", params).then(res => {
+        if (res.success) {
+          this.ipagination.total = res.result.total
+          this.dataSource = res.result.records
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getSysDatabase()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.getSysDatabase()
+    },
+    onAdd() {
+      this.visible = true
+    },
+    onEdit() {
+      this.visible = true
+    },
+    onRowClick(record) {
+      this.currentId = record.id
+    },
+    onSave() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values);
+          // this.visible = false
+          if (this.isAdd) {
+            postAction("/sysServer/create", values).then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getSysServer()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          } else {
+            let params = {
+              id: this.currentId,
+              ...values
+            }
+            httpAction("/sysServer/update", params, "put").then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getSysServer()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          }
+        }
+      });
+    },
+    onCancel() {
+      this.visible = false
+    }
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="less" scoped>
+.view-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);
+  .view-num {
+    font-family: ArialMT;
+    font-size: 18px;
+    color: #ade6ee;
+    display: flex;
+    align-items: center;
+    span{
+      font-family: MicrogrammaD-MediExte;
+      font-size: 30px;
+      color: #d31f1f;
+    } 
+  }
+  .view-btn{
+    background-color: #1397a3;
+    font-family: ArialMT;
+	  color: #ffffff;
+    border: none;
+    margin-left: 20px;
+    box-shadow: 0px 1px 1px 0px #000000;;
+  }
+}
+.view-main{
+  height: calc(100% - 65px);
+  margin-left: 20px;
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  .ant-pagination{
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+  }
+  .status-on{
+    margin-left: 10px;
+    font-family: MicrosoftYaHei;
+    color: #4bc048;
+  }
+  .status-off{
+    font-family: MicrosoftYaHei;
+    color: #868686;
+  }
+  .alarm-text{
+    font-family: MicrogrammaD-MediExte;
+    font-size: 22px;
+    color: #ade6ee;
+  }
+  .isAlarm{
+    color: #ed2d2d;
+  }
+  .isRed{
+    color: #f02c2c;
+  }
+  /deep/.ant-table-tbody tr{
+    height: 88px;
+  }
+}
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/emailMonitor/overview/index.vue b/src/views/abnormalAlarm/emailMonitor/overview/index.vue
index 2ad3e74..139bf24 100644
--- a/src/views/abnormalAlarm/emailMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/overview/index.vue
@@ -1,15 +1,354 @@
 <template>
-  <div>
-    overView
+  <div style="height: 100%;">
+    <div class="view-header">
+      <div class="view-num">Alarm：<span>{{ alarmTotal }}</span></div>
+      <div>
+        <a-button class="view-btn" @click="onAdd">
+          <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
+          <span style="margin-left: 10px;">
+            Add
+          </span>
+        </a-button>
+        <a-button class="view-btn" @click="onEdit">
+          <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
+          <span style="margin-left: 10px;">
+            edit
+          </span>
+        </a-button>
+        <a-button class="view-btn">
+          <img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
+          <span style="margin-left: 10px;">
+            Delete
+          </span>
+        </a-button>
+        <a-button class="view-btn">
+          <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
+          <span style="margin-left: 10px;">
+            Refresh
+          </span>
+        </a-button>
+      </div>
+    </div>
+    <div class="view-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="false"
+      >
+        <template slot="status" slot-scope="{record}">
+          <div>
+            <img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
+            <img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
+            <span :class="[record.online?'status-on':'status-off']">{{ record.online?"Connecting":"Disconnect" }}</span>
+          </div>
+        </template>
+        <template slot="today" slot-scope="{text}">
+          <span class="alarm-text">{{ text?text:"--" }}</span>
+        </template>
+        <template slot="yesterday" slot-scope="{text}">
+          <span class="alarm-text">{{ text?text:"--" }}</span>
+        </template>
+        <template slot="weekly" slot-scope="{text}">
+          <span class="alarm-text">{{ text?text:"--" }}</span>
+        </template>
+        <template slot="alarms" slot-scope="{text,record}">
+          <span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
+        </template>
+        <template slot="stoer" slot-scope="{text,record}">
+          <span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
+        </template>
+      </TableList>
+      <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' : 'Edit'" 
+      v-model="visible" 
+      @cancel="onCancel"
+    >
+    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
+      <a-form-item label="Name">
+        <a-input
+          v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
+        />
+      </a-form-item>
+      <a-form-item label="Ip Address">
+        <a-input
+          v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
+        />
+      </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>
-  export default {
-    
+import TableList from '../../components/tableList.vue';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+const columns = [
+  {
+    title: 'NAME',
+    align: 'left',
+    dataIndex: 'name'
+  },{
+    title: 'STATUS',
+    align: 'left',
+    dataIndex: 'online',
+    scopedSlots: {
+      customRender: 'status'
+    }
+  },{
+    title: 'E-MAIL',
+    align: 'left',
+    dataIndex: 'emailServerAddress'
+  },{
+    title: "TODAY'S TOTAL",
+    align: 'left',
+    dataIndex: 'today',
+    scopedSlots: {
+      customRender: 'today'
+    }
+  },{
+    title: "YESTERDAY'S TOTAL",
+    align: 'left',
+    dataIndex: 'yesterday',
+    scopedSlots: {
+      customRender: 'yesterday'
+    }
+  },{
+    title: "WEEKLY TOTAL",
+    align: 'left',
+    dataIndex: 'weekly',
+    scopedSlots: {
+      customRender: 'weekly'
+    }
+  },{
+    title: 'ALARMS',
+    align: 'left',
+    dataIndex: 'alarms',
+    scopedSlots: {
+      customRender: 'alarms',
+    }
+  },{
+    title: "STOER CAPACITY",
+    align: 'left',
+    dataIndex: 'stoerCapacity',
+    scopedSlots: {
+      customRender: 'stoer',
+    }
   }
+]
+export default {
+  components: {
+    TableList,
+  },
+  data() {
+    return {
+      isAdd: true,
+      visible: false,
+      form: this.$form.createForm(this),
+      formVal: {
+        name: "",
+        ipAddress:""
+      },
+      currentId:"",
+      columns,
+      dataSource: [],
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+    }
+  },
+  computed: {
+    alarmTotal() {
+      let num= 0
+      this.dataSource.forEach(item => {
+        num = item.alarmRed ? num + item.alarms : num
+      });
+      return num
+    }
+  },
+  mounted () {
+    this.getSysEmail();
+  },
+  methods: {
+    getSysEmail() {
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize
+      }
+      getAction("/sysEmail/findPage", params).then(res => {
+        if (res.success) {
+          this.ipagination.total = res.result.total
+          this.dataSource = res.result.records
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getSysEmail()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.getSysEmail()
+    },
+    onAdd() {
+      this.visible = true
+    },
+    onEdit() {
+      this.visible = true
+    },
+    onRowClick(record) {
+      this.currentId = record.id
+    },
+    onSave() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values);
+          // this.visible = false
+          if (this.isAdd) {
+            postAction("/sysServer/create", values).then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getSysServer()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          } else {
+            let params = {
+              id: this.currentId,
+              ...values
+            }
+            httpAction("/sysServer/update", params, "put").then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getSysServer()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          }
+        }
+      });
+    },
+    onCancel() {
+      this.visible = false
+    }
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="less" scoped>
+.view-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);
+  .view-num {
+    font-family: ArialMT;
+    font-size: 18px;
+    color: #ade6ee;
+    display: flex;
+    align-items: center;
+    span{
+      font-family: MicrogrammaD-MediExte;
+      font-size: 30px;
+      color: #d31f1f;
+    } 
+  }
+  .view-btn{
+    background-color: #1397a3;
+    font-family: ArialMT;
+	  color: #ffffff;
+    border: none;
+    margin-left: 20px;
+    box-shadow: 0px 1px 1px 0px #000000;;
+  }
+}
+.view-main{
+  height: calc(100% - 65px);
+  margin-left: 20px;
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  .ant-pagination{
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+  }
+  .status-on{
+    margin-left: 10px;
+    font-family: MicrosoftYaHei;
+    color: #4bc048;
+  }
+  .status-off{
+    font-family: MicrosoftYaHei;
+    color: #868686;
+  }
+  .alarm-text{
+    font-family: MicrogrammaD-MediExte;
+    font-size: 22px;
+    color: #ade6ee;
+  }
+  .isAlarm{
+    color: #ed2d2d;
+  }
+  .isRed{
+    color: #f02c2c;
+  }
+  /deep/.ant-table-tbody tr{
+    height: 88px;
+  }
+}
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/overview/index.vue b/src/views/abnormalAlarm/serverMonitor/overview/index.vue
index 2ad3e74..7e3fdfa 100644
--- a/src/views/abnormalAlarm/serverMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/serverMonitor/overview/index.vue
@@ -1,15 +1,345 @@
 <template>
-  <div>
-    overView
+  <div style="height: 100%;">
+    <div class="view-header">
+      <div class="view-num">Alarm：<span>{{ alarmTotal }}</span></div>
+      <div>
+        <a-button class="view-btn" @click="onAdd">
+          <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
+          <span style="margin-left: 10px;">
+            Add
+          </span>
+        </a-button>
+        <a-button class="view-btn" @click="onEdit">
+          <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
+          <span style="margin-left: 10px;">
+            edit
+          </span>
+        </a-button>
+        <a-button class="view-btn">
+          <img class="icon-add" src="@/assets/images/global/delete.png" alt="" />
+          <span style="margin-left: 10px;">
+            Delete
+          </span>
+        </a-button>
+        <a-button class="view-btn">
+          <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
+          <span style="margin-left: 10px;">
+            Refresh
+          </span>
+        </a-button>
+      </div>
+    </div>
+    <div class="view-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="false"
+        @rowClick="onRowClick"
+      >
+        <template slot="status" slot-scope="{text,record}">
+          <div>
+            <img v-if="record.online" src="@/assets/images/abnormalAlarm/on.png" alt="">
+            <img v-else src="@/assets/images/abnormalAlarm/off.png" alt="">
+            <span :class="[record.online?'status-on':'status-off']">{{ text }}</span>
+          </div>
+        </template>
+        <template slot="alarms" slot-scope="{text,record}">
+          <span :class="[record.alarmRed?'isAlarm':'','alarm-text']">{{ text }}</span>
+        </template>
+        <template slot="cpu" slot-scope="{text,record}">
+          <span :class="[record.cpuRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
+        </template>
+        <template slot="memory" slot-scope="{text,record}">
+          <span :class="[record.memoryRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
+        </template>
+        <template slot="disk" slot-scope="{text,record}">
+          <span :class="[record.diskRed?'isRed':'','alarm-text']">{{ text?text:"--" }}</span>
+        </template>
+      </TableList>
+      <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' : 'Edit'" 
+      v-model="visible" 
+      @cancel="onCancel"
+    >
+    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
+      <a-form-item label="Name">
+        <a-input
+          v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
+        />
+      </a-form-item>
+      <a-form-item label="Ip Address">
+        <a-input
+          v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
+        />
+      </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>
-  export default {
-    
-  }
+import TableList from '../../components/tableList.vue';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+const columns = [
+  {
+    title: 'NAME',
+    align: 'left',
+    dataIndex: 'name'
+  },{
+    title: 'STATUS',
+    align: 'left',
+    dataIndex: 'serverInfo',
+    scopedSlots: {
+      customRender: 'status'
+    }
+  },{
+    title: 'IP ADDRESS',
+    align: 'left',
+    dataIndex: 'ipAddress'
+  },{
+    title: 'ALARMS',
+    align: 'left',
+    dataIndex: 'alarms',
+    scopedSlots: {
+      customRender: 'alarms',
+    }
+  },{
+    title: 'CPU UUTILZATION',
+    align: 'left',
+    dataIndex: 'cpuUutilzation',
+    scopedSlots: {
+      customRender: 'cpu',
+    }
+  },{
+    title: 'MEMORY USAGE',
+    align: 'left',
+    dataIndex: 'memoryUsage',
+    scopedSlots: {
+      customRender: 'memory',
+    }
+  },{
+    title: 'DISK USAGE',
+    align: 'left',
+    dataIndex: 'diskUsage',
+    scopedSlots: {
+      customRender: 'disk',
+    }
+  },
+]
+export default {
+  components: {
+    TableList,
+  },
+  data() {
+    return {
+      isAdd: true,
+      visible: false,
+      form: this.$form.createForm(this),
+      formVal: {
+        name: "",
+        ipAddress:""
+      },
+      currentId:"",
+      columns,
+      dataSource: [],
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+    }
+  },
+  computed: {
+    alarmTotal() {
+      let num= 0
+      this.dataSource.forEach(item => {
+        num = item.alarmRed ? num + item.alarms : num
+      });
+      return num
+    }
+  },
+  mounted () {
+    this.getSysServer();
+  },
+  methods: {
+    getSysServer() {
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize
+      }
+      getAction("/sysServer/findPage", params).then(res => {
+        if (res.success) {
+          this.ipagination.total = res.result.total
+          this.dataSource = res.result.records
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getSysServer()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.getSysServer()
+    },
+    onAdd() {
+      this.visible = true
+    },
+    onEdit() {
+      this.visible = true
+    },
+    onRowClick(record) {
+      this.currentId = record.id
+    },
+    onSave() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values);
+          // this.visible = false
+          if (this.isAdd) {
+            postAction("/sysServer/create", values).then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getSysServer()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          } else {
+            let params = {
+              id: this.currentId,
+              ...values
+            }
+            httpAction("/sysServer/update", params, "put").then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getSysServer()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          }
+        }
+      });
+    },
+    onCancel() {
+      this.visible = false
+    }
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="less" scoped>
+.view-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);
+  .view-num {
+    font-family: ArialMT;
+    font-size: 18px;
+    color: #ade6ee;
+    display: flex;
+    align-items: center;
+    span{
+      font-family: MicrogrammaD-MediExte;
+      font-size: 30px;
+      color: #d31f1f;
+    } 
+  }
+  .view-btn{
+    background-color: #1397a3;
+    font-family: ArialMT;
+	  color: #ffffff;
+    border: none;
+    margin-left: 20px;
+    box-shadow: 0px 1px 1px 0px #000000;;
+  }
+}
+.view-main{
+  height: calc(100% - 65px);
+  margin-left: 20px;
+  position: relative;
+  overflow: hidden;
+  padding-top: 15px;
+  .ant-pagination{
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+  }
+  .status-on{
+    margin-left: 10px;
+    font-family: MicrosoftYaHei;
+    color: #4bc048;
+  }
+  .status-off{
+    font-family: MicrosoftYaHei;
+    color: #868686;
+  }
+  .alarm-text{
+    font-family: MicrogrammaD-MediExte;
+    font-size: 22px;
+    color: #ade6ee;
+  }
+  .isAlarm{
+    color: #ed2d2d;
+  }
+  .isRed{
+    color: #f02c2c;
+  }
+  /deep/.ant-table-tbody tr{
+    height: 88px;
+  }
+}
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
 </style>
\ No newline at end of file