server db emain 三个模块overview页面创建开发

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) {

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>

src/views/abnormalAlarm/databaseMonitor/overview/index.vue

@@ -1,15 +1,353 @@
 <template>
+  <div style="height: 100%;">
+    <div class="view-header">
+      <div class="view-num">Alarm：<span>{{ alarmTotal }}</span></div>
       <div>
-    overView
+        <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>

src/views/abnormalAlarm/emailMonitor/overview/index.vue

@@ -1,15 +1,354 @@
 <template>
+  <div style="height: 100%;">
+    <div class="view-header">
+      <div class="view-num">Alarm：<span>{{ alarmTotal }}</span></div>
       <div>
-    overView
+        <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>

src/views/abnormalAlarm/serverMonitor/overview/index.vue

@@ -1,15 +1,345 @@
 <template>
+  <div style="height: 100%;">
+    <div class="view-header">
+      <div class="view-num">Alarm：<span>{{ alarmTotal }}</span></div>
       <div>
-    overView
+        <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>