From f4292bad10aa7ccf362869d994fa8599ad547d3a Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Fri, 28 Jul 2023 15:20:44 +0800
Subject: [PATCH] =?UTF-8?q?server=20=20DB=20=20email=E4=B8=89=E4=B8=AA?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E7=9A=84overview=20=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../abnormalAlarm/components/tableList.vue    |   5 +-
 .../databaseMonitor/overview/index.vue        | 199 +++++++++++----
 .../emailMonitor/overview/index.vue           | 227 ++++++++++++++----
 .../serverMonitor/overview/index.vue          | 127 +++++++---
 4 files changed, 432 insertions(+), 126 deletions(-)

diff --git a/src/views/abnormalAlarm/components/tableList.vue b/src/views/abnormalAlarm/components/tableList.vue
index 6958d0a..3913ad9 100644
--- a/src/views/abnormalAlarm/components/tableList.vue
+++ b/src/views/abnormalAlarm/components/tableList.vue
@@ -87,7 +87,10 @@ export default {
                 this.innerSelectedRowKeys = [key]
               }
             }
-          }
+          },
+          dblclick: () => {
+            this.$emit("rowDbclick",record)
+          },
         }
       }
     },
diff --git a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
index 72c37d6..3632eec 100644
--- a/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/overview/index.vue
@@ -12,16 +12,16 @@
         <a-button class="view-btn" @click="onEdit">
           <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
           <span style="margin-left: 10px;">
-            edit
+            Edit
           </span>
         </a-button>
-        <a-button class="view-btn">
+        <a-button class="view-btn" @click="onDelete">
           <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">
+        <a-button class="view-btn" @click="getSysDatabase">
           <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
           <span style="margin-left: 10px;">
             Refresh
@@ -30,34 +30,37 @@
       </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>
+      <div class="view-main-table">
+        <TableList
+          size="middle"
+          rowKey="id"
+          :columns="columns"
+          :list="dataSource"
+          :pagination="false"
+          @rowClick="onRowClick"
+          @rowDbclick="onRowDbclick"
+        >
+          <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>
+      </div>
       <a-pagination 
         size="small"
         v-model="ipagination.current" 
@@ -77,15 +80,73 @@
       v-model="visible" 
       @cancel="onCancel"
     >
-    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
+    <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
+      <a-form-item label="DB Username">
+        <a-input
+          v-decorator="[
+            'username', 
+            { 
+              rules: [{ required: true, message: 'Please input username!' }],
+              initialVale: this.formVal.username
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="DB Password">
+        <a-input
+          v-decorator="[
+            'password', 
+            { 
+              rules: [{ required: true, message: 'Please input DB Password!' }],
+              initialVale: this.formVal.password
+            }
+          ]"
+        />
+      </a-form-item>
       <a-form-item label="Name">
         <a-input
-          v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
+          v-decorator="[
+            'name', 
+            { 
+              rules: [{ required: true, message: 'Please input name!' }],
+              initialVale: this.formVal.name
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="DB Type">
+        <j-dict-select-tag 
+          placeholder="请选择数据库类型" 
+          dict-code="database_type"
+          v-decorator="[
+            'type', 
+            { 
+              rules: [{ required: true, message: 'Please select a DB Type!' }],
+              initialVale: this.formVal.type
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="DB Port">
+        <a-input-number
+          v-decorator="[
+            'port', 
+            {
+              rules: [{ required: true, message: 'Please input port!' }],
+              initialVale: this.formVal.port
+            }
+          ]"
         />
       </a-form-item>
       <a-form-item label="Ip Address">
         <a-input
-          v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
+          v-decorator="[
+            'ipAddress', 
+            { 
+              rules: [{ required: true, message: 'Please input ip address!' }],
+              initialVale: this.formVal.ipAddress
+            }
+          ]"
         />
       </a-form-item>
     </a-form>
@@ -134,7 +195,7 @@ const columns = [
       customRender: 'alarms',
     }
   },{
-    title: 'CPU UUTILZATION',
+    title: 'CPU UTILIZATION',
     align: 'left',
     dataIndex: 'cpuUutilzation',
     scopedSlots: {
@@ -166,7 +227,11 @@ export default {
       visible: false,
       form: this.$form.createForm(this),
       formVal: {
+        username: "",
+        password: "",
         name: "",
+        type: undefined,
+        port: "",
         ipAddress:""
       },
       currentId:"",
@@ -224,10 +289,45 @@ export default {
       this.getSysDatabase()
     },
     onAdd() {
+      this.isAdd = true
       this.visible = true
     },
     onEdit() {
+      this.isAdd = false
       this.visible = true
+      getAction("/sysDatabase/findInfo", {id:this.currentId}).then(res => {
+        if (res.success) {
+          this.form.setFieldsValue({
+            username: res.result.username,
+            password: res.result.password,
+            name: res.result.name,
+            type: res.result.type,
+            port: res.result.port,
+            ipAddress: res.result.ipAddress
+          });
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onDelete() {
+      let _this = this
+      this.$confirm({
+        title: 'Are you sure to delete this item?',
+        onOk() {
+          deleteAction("/sysDatabase/deleteById", {id:_this.currentId}).then(res => {
+            if (res.success) {
+              _this.$message.success("success")
+              _this.getSysDatabase()
+            } else {
+              _this.$message.warning("This operation fails. Contact your system administrator")
+            }
+          })
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
     },
     onRowClick(record) {
       this.currentId = record.id
@@ -236,15 +336,15 @@ export default {
       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 => {
+            postAction("/sysDatabase/create", values).then(res => {
               if (res.success) {
+                this.form.resetFields()
                 this.visible = false
                 this.$message.success("success")
-                this.getSysServer()
+                this.getSysDatabase()
               } else {
-                this.$message.warning("This operation fails. Contact your system administrator")
+                this.$message.info(res.result.message)
               }
             })
           } else {
@@ -252,13 +352,14 @@ export default {
               id: this.currentId,
               ...values
             }
-            httpAction("/sysServer/update", params, "put").then(res => {
+            httpAction("/sysDatabase/update", params, "put").then(res => {
               if (res.success) {
+                this.form.resetFields()
                 this.visible = false
                 this.$message.success("success")
-                this.getSysServer()
+                this.getSysDatabase()
               } else {
-                this.$message.warning("This operation fails. Contact your system administrator")
+                this.$message.info(res.result.message)
               }
             })
           }
@@ -266,7 +367,11 @@ export default {
       });
     },
     onCancel() {
+      this.form.resetFields()
       this.visible = false
+    },
+    onRowDbclick() {
+      this.$router.push("/alarm/databaseMonitor/instances")
     }
   },
 }
@@ -305,11 +410,15 @@ export default {
   }
 }
 .view-main{
-  height: calc(100% - 65px);
+  height: calc(100% - 50px);
   margin-left: 20px;
   position: relative;
   overflow: hidden;
   padding-top: 15px;
+  &-table{
+    height: calc(100% - 30px);
+    overflow: auto;
+  }
   .ant-pagination{
     position: absolute;
     left: 50%;
@@ -350,4 +459,8 @@ export default {
 /deep/.ant-modal-title{
   letter-spacing: 1px;
 }
+.ant-input-number{
+  width: 100%;
+  background-color: #03353f !important
+}
 </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 139bf24..9627410 100644
--- a/src/views/abnormalAlarm/emailMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/overview/index.vue
@@ -12,16 +12,16 @@
         <a-button class="view-btn" @click="onEdit">
           <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
           <span style="margin-left: 10px;">
-            edit
+            Edit
           </span>
         </a-button>
-        <a-button class="view-btn">
+        <a-button class="view-btn" @click="onDelete">
           <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">
+        <a-button class="view-btn" @click="getSysEmail">
           <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
           <span style="margin-left: 10px;">
             Refresh
@@ -30,36 +30,40 @@
       </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>
+      <div class="view-main-table">
+        <TableList
+          size="middle"
+          rowKey="id"
+          :columns="columns"
+          :list="dataSource"
+          :pagination="false"
+          @rowClick="onRowClick"
+          @rowDbclick="onRowDbclick"
+        >
+          <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>
+      </div>
       <a-pagination 
         size="small"
         v-model="ipagination.current" 
@@ -79,15 +83,91 @@
       v-model="visible" 
       @cancel="onCancel"
     >
-    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
+    <a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
       <a-form-item label="Name">
         <a-input
-          v-decorator="['name', { rules: [{ required: true, message: 'Please input your name!' }] }]"
+          v-decorator="[
+            'name', 
+            { 
+              rules: [{ required: true, message: 'Please input name!' }],
+              initialVale: this.formVal.name
+            }
+          ]"
         />
       </a-form-item>
-      <a-form-item label="Ip Address">
+      <a-form-item label="Email Servier Address">
         <a-input
-          v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
+          v-decorator="[
+            'emailServerAddress', 
+            { 
+              rules: [{ required: true, message: 'Please input email server address!' }],
+              initialVale: this.formVal.emailServerAddress
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="Email Address">
+        <a-input
+          v-decorator="[
+            'username', 
+            { 
+              rules: [{ required: true, message: 'Please input email address!' }],
+              initialVale: this.formVal.username
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="Password">
+        <a-input
+          v-decorator="[
+            'password', 
+            { 
+              rules: [{ required: true, message: 'Please input password!' }],
+              initialVale: this.formVal.password
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="Emil Type">
+        <j-dict-select-tag
+          placeholder="请选择邮箱类型" 
+          dict-code="email_type"
+          v-decorator="[
+            'emilType', 
+            { 
+              rules: [{ required: true, message: 'Please input your name!' }],
+              initialVale: this.formVal.emilType
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="Station">
+        <a-select 
+          v-decorator="[
+            'enabled', 
+            { 
+              rules: [{ required: true, message: 'Please select a Station!' }],
+              initialVale: this.formVal.enabled
+            }
+          ]"
+        >
+          <a-select-option value="1">
+            Enable
+          </a-select-option>
+          <a-select-option value="0">
+            Disabled
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="Port">
+        <a-input-number
+          v-decorator="[
+            'port', 
+            { 
+              rules: [{ required: true, message: 'Please input port!' }],
+              initialVale: this.formVal.port
+            }
+          ]"
         />
       </a-form-item>
     </a-form>
@@ -168,7 +248,12 @@ export default {
       form: this.$form.createForm(this),
       formVal: {
         name: "",
-        ipAddress:""
+        emailServerAddress: "",
+        username: "",
+        password: "",
+        emilType: "",
+        enabled: "",
+        port: ""
       },
       currentId:"",
       columns,
@@ -225,27 +310,64 @@ export default {
       this.getSysEmail()
     },
     onAdd() {
+      this.isAdd = true
       this.visible = true
     },
     onEdit() {
+      this.isAdd = false
       this.visible = true
+      getAction("/sysEmail/findInfo", {id:this.currentId}).then(res => {
+        if (res.success) {
+          this.form.setFieldsValue({
+            name: res.result.username,
+            emailServerAddress: res.result.emailServerAddress,
+            username: res.result.username,
+            password: res.result.password,
+            emilType: res.result.emilType,
+            enabled: res.result.enabled,
+            port: res.result.port
+          });
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onDelete() {
+      let _this = this
+      this.$confirm({
+        title: 'Are you sure to delete this item?',
+        onOk() {
+          deleteAction("/sysEmail/deleteById", {id:_this.currentId}).then(res => {
+            if (res.success) {
+              _this.$message.success("success")
+              _this.getSysEmail()
+            } else {
+              _this.$message.warning("This operation fails. Contact your system administrator")
+            }
+          })
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
     },
     onRowClick(record) {
+      console.log(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 => {
+            postAction("/sysEmail/create", values).then(res => {
               if (res.success) {
+                this.form.resetFields()
                 this.visible = false
                 this.$message.success("success")
-                this.getSysServer()
+                this.getSysEmail()
               } else {
-                this.$message.warning("This operation fails. Contact your system administrator")
+                this.$message.info(res.result.message)
               }
             })
           } else {
@@ -253,13 +375,14 @@ export default {
               id: this.currentId,
               ...values
             }
-            httpAction("/sysServer/update", params, "put").then(res => {
+            httpAction("/sysEmail/update", params, "put").then(res => {
               if (res.success) {
+                this.form.resetFields()
                 this.visible = false
                 this.$message.success("success")
-                this.getSysServer()
+                this.getSysEmail()
               } else {
-                this.$message.warning("This operation fails. Contact your system administrator")
+                this.$message.info(res.result.message)
               }
             })
           }
@@ -267,7 +390,11 @@ export default {
       });
     },
     onCancel() {
+      this.form.resetFields()
       this.visible = false
+    },
+    onRowDbclick() {
+      this.$router.push("/alarm/emailMonitor/instances")
     }
   },
 }
@@ -306,11 +433,15 @@ export default {
   }
 }
 .view-main{
-  height: calc(100% - 65px);
+  height: calc(100% - 50px);
   margin-left: 20px;
   position: relative;
   overflow: hidden;
   padding-top: 15px;
+  &-table{
+    height: calc(100% - 30px);
+    overflow: auto;
+  }
   .ant-pagination{
     position: absolute;
     left: 50%;
@@ -351,4 +482,8 @@ export default {
 /deep/.ant-modal-title{
   letter-spacing: 1px;
 }
+.ant-input-number{
+  width: 100%;
+  background-color: #03353f !important
+}
 </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 7e3fdfa..18c2f1b 100644
--- a/src/views/abnormalAlarm/serverMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/serverMonitor/overview/index.vue
@@ -12,16 +12,16 @@
         <a-button class="view-btn" @click="onEdit">
           <img class="icon-add" src="@/assets/images/global/edit.png" alt="" />
           <span style="margin-left: 10px;">
-            edit
+            Edit
           </span>
         </a-button>
-        <a-button class="view-btn">
+        <a-button class="view-btn" @click="onDelete">
           <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">
+        <a-button class="view-btn" @click="getSysServer">
           <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
           <span style="margin-left: 10px;">
             Refresh
@@ -30,34 +30,37 @@
       </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>
+      <div class="view-main-table">
+        <TableList
+          size="middle"
+          rowKey="id"
+          :columns="columns"
+          :list="dataSource"
+          :pagination="false"
+          @rowClick="onRowClick"
+          @rowDbclick="onRowDbclick"
+        >
+          <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>
+      </div>
       <a-pagination 
         size="small"
         v-model="ipagination.current" 
@@ -80,12 +83,24 @@
     <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!' }] }]"
+          v-decorator="[
+            'name', 
+            { 
+              rules: [{ required: true, message: 'Please input name!' }],
+              initialVale: this.formVal.name
+            }
+          ]"
         />
       </a-form-item>
       <a-form-item label="Ip Address">
         <a-input
-          v-decorator="['ipAddress', { rules: [{ required: true, message: 'Please input your ipAddress!' }] }]"
+          v-decorator="[
+            'ipAddress', 
+            { 
+              rules: [{ required: true, message: 'Please input ip address!' }],
+              initialVale: this.formVal.ipAddress
+            }
+          ]"
         />
       </a-form-item>
     </a-form>
@@ -126,7 +141,7 @@ const columns = [
       customRender: 'alarms',
     }
   },{
-    title: 'CPU UUTILZATION',
+    title: 'CPU UTILIZATION',
     align: 'left',
     dataIndex: 'cpuUutilzation',
     scopedSlots: {
@@ -216,10 +231,41 @@ export default {
       this.getSysServer()
     },
     onAdd() {
+      this.isAdd = true
       this.visible = true
     },
     onEdit() {
+      this.isAdd = false
       this.visible = true
+      getAction("/sysServer/findInfo", {id:this.currentId}).then(res => {
+        if (res.success) {
+          this.form.setFieldsValue({
+            name: res.result.name,
+            ipAddress: res.result.ipAddress
+          });
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onDelete() {
+      let _this = this
+      this.$confirm({
+        title: 'Are you sure to delete this item?',
+        onOk() {
+          deleteAction("/sysServer/deleteById", {id:_this.currentId}).then(res => {
+            if (res.success) {
+              _this.$message.success("success")
+              _this.getSysServer()
+            } else {
+              _this.$message.warning("This operation fails. Contact your system administrator")
+            }
+          })
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
     },
     onRowClick(record) {
       this.currentId = record.id
@@ -228,10 +274,10 @@ export default {
       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.form.resetFields()
                 this.visible = false
                 this.$message.success("success")
                 this.getSysServer()
@@ -246,6 +292,7 @@ export default {
             }
             httpAction("/sysServer/update", params, "put").then(res => {
               if (res.success) {
+                this.form.resetFields()
                 this.visible = false
                 this.$message.success("success")
                 this.getSysServer()
@@ -258,7 +305,11 @@ export default {
       });
     },
     onCancel() {
+      this.form.resetFields()
       this.visible = false
+    },
+    onRowDbclick() {
+      this.$router.push("/alarm/serverMonitor/instances")
     }
   },
 }
@@ -297,11 +348,15 @@ export default {
   }
 }
 .view-main{
-  height: calc(100% - 65px);
+  height: calc(100% - 50px);
   margin-left: 20px;
   position: relative;
   overflow: hidden;
   padding-top: 15px;
+  &-table{
+    height: calc(100% - 30px);
+    overflow: auto;
+  }
   .ant-pagination{
     position: absolute;
     left: 50%;