From 1708b74f1b3d7f37feb4ab250a48193d339d2f6f Mon Sep 17 00:00:00 2001
From: gongzijian <gongzijian@analysys.com.cn>
Date: Thu, 25 Apr 2019 10:22:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=9B=91=E6=8E=A7=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 escheduler-ui/src/js/conf/home/index.js       |   1 +
 .../datasource/pages/list/_source/list.vue    |   1 -
 .../monitor/pages/servers/_source/gauge.vue   |  62 +++++
 .../pages/servers/_source/gaugeOption.js      | 234 +++++++++---------
 .../monitor/pages/servers/_source/list.vue    |  81 ------
 .../pages/servers/_source/zookeeperList.vue   | 125 ++++++++++
 .../pages/monitor/pages/servers/alert.vue     |   2 +-
 .../pages/monitor/pages/servers/master.vue    | 179 ++++----------
 .../pages/monitor/pages/servers/mysql.vue     |  71 ++++--
 .../pages/monitor/pages/servers/servers.scss  | 103 ++++++--
 .../pages/monitor/pages/servers/worker.vue    | 177 ++++---------
 .../pages/monitor/pages/servers/zookeeper.vue |  20 +-
 .../_source/taskRecordList/_source/list.vue   |   2 -
 .../definition/pages/list/_source/list.vue    |   1 -
 .../pages/definition/timing/_source/list.vue  |   1 -
 .../instance/pages/list/_source/list.vue      |   1 -
 .../projects/pages/list/_source/list.vue      |   1 -
 .../pages/taskInstance/_source/list.vue       |   1 -
 .../pages/file/pages/list/_source/list.vue    |   1 -
 .../pages/udf/pages/function/_source/list.vue |   1 -
 .../pages/udf/pages/resource/_source/list.vue |   1 -
 .../security/pages/queue/_source/list.vue     |   1 -
 .../security/pages/tenement/_source/list.vue  |   2 +-
 .../security/pages/users/_source/list.vue     |   1 -
 .../pages/warningGroups/_source/list.vue      |   1 -
 .../pages/workerGroups/_source/list.vue       |   1 -
 .../pages/user/pages/account/_source/info.vue |   1 -
 .../user/pages/password/_source/info.vue      |   1 -
 .../pages/user/pages/token/_source/list.vue   |   1 -
 escheduler-ui/src/js/conf/home/store/index.js |   4 +-
 .../src/js/conf/home/store/monitor/actions.js |  57 +++++
 .../src/js/conf/home/store/monitor/getters.js |  19 ++
 .../src/js/conf/home/store/monitor/index.js   |  30 +++
 .../js/conf/home/store/monitor/mutations.js   |  19 ++
 .../src/js/conf/home/store/monitor/state.js   |  18 ++
 35 files changed, 703 insertions(+), 519 deletions(-)
 create mode 100644 escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gauge.vue
 delete mode 100644 escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/list.vue
 create mode 100644 escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
 create mode 100644 escheduler-ui/src/js/conf/home/store/monitor/actions.js
 create mode 100644 escheduler-ui/src/js/conf/home/store/monitor/getters.js
 create mode 100644 escheduler-ui/src/js/conf/home/store/monitor/index.js
 create mode 100644 escheduler-ui/src/js/conf/home/store/monitor/mutations.js
 create mode 100644 escheduler-ui/src/js/conf/home/store/monitor/state.js

diff --git a/escheduler-ui/src/js/conf/home/index.js b/escheduler-ui/src/js/conf/home/index.js
index 1ba4b3a80..6099fb58a 100644
--- a/escheduler-ui/src/js/conf/home/index.js
+++ b/escheduler-ui/src/js/conf/home/index.js
@@ -25,6 +25,7 @@ import store from './store'
 import i18n from '@/module/i18n'
 import { sync } from 'vuex-router-sync'
 import Chart from '~/@analysys/ana-charts'
+import '@/module/filter/formatDate'
 import themeData from '@/module/echarts/themeData.json'
 import Permissions from '@/module/permissions'
 import '~/@analysys/ans-ui/lib/ans-ui.min.css'
diff --git a/escheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
index 7436d9da6..b32aeeb6b 100644
--- a/escheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
@@ -90,7 +90,6 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import { findComponentDownward } from '@/module/util/'
   import mTooltipsJSON from '@/module/components/tooltipsJSON/tooltipsJSON'
 
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gauge.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gauge.vue
new file mode 100644
index 000000000..e8fea7580
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gauge.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="gauge-model">
+    <div class="gauge-echart">
+      <div :id="id" style="height: 380px;"></div>
+    </div>
+    <div class="text-1" style="margin-top: -104px;">
+      {{name}}
+    </div>
+  </div>
+</template>
+<script>
+  import gaugeOption from './gaugeOption'
+
+  export default {
+    name: 'gauge',
+    data () {
+      return {}
+    },
+    props: {
+      id: String,
+      name: String,
+      value: Number
+    },
+    methods: {},
+    created () {
+    },
+    mounted () {
+      const gauge = echarts.init(document.getElementById(this.id)) // eslint-disable-line
+      gauge.setOption(gaugeOption(this.value), true)
+    },
+    components: {}
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .gauge-model {
+    width: 100%;
+    height: 360px;
+    overflow: hidden;
+    margin:  0 auto;
+    .gauge-echart {
+      width: 350px;
+      margin:  auto;
+      margin-bottom: -80px;
+    }
+    .text-1 {
+      width: 100%;
+      margin: 0 auto;
+      font-size: 32px;
+      text-align: center;
+    }
+    .value-p {
+      height: 254px;
+      line-height: 254px;
+      text-align: center;
+      >b {
+        font-size: 100px;
+        color: #333;
+      }
+    }
+  }
+</style>
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js
index 003ce4969..c672769d1 100644
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js
@@ -1,121 +1,123 @@
-export default {
-  series: [
-    {
-      type: 'gauge',
-      center: ['50%', '45%'], // 仪表位置
-      radius: '80%', // 仪表大小
-      startAngle: 200, // 开始角度
-      endAngle: -20, // 结束角度
-      axisLine: {
-        show: false,
-        lineStyle: { // 属性lineStyle控制线条样式
-          color: [
-            [ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
-              offset: 1,
-              color: '#E75F25' // 50% 处的颜色
-            }, {
-              offset: 0.8,
-              color: '#D9452C' // 40% 处的颜色
-            }], false) ], // 100% 处的颜色
-            [ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
-              offset: 1,
-              color: '#FFC539' // 70% 处的颜色
-            }, {
-              offset: 0.8,
-              color: '#FE951E' // 66% 处的颜色
-            }, {
-              offset: 0,
-              color: '#E75F25' // 50% 处的颜色
-            }], false) ],
-            [ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // eslint-disable-line
-              offset: 1,
-              color: '#C7DD6B' // 90% 处的颜色
-            }, {
-              offset: 0.8,
-              color: '#FEEC49' // 86% 处的颜色
-            }, {
-              offset: 0,
-              color: '#FFC539' // 70% 处的颜色
-            }], false) ],
-            [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { // eslint-disable-line
-              offset: 0.2,
-              color: '#1CAD52' // 92% 处的颜色
-            }, {
-              offset: 0,
-              color: '#C7DD6B' // 90% 处的颜色
-            }], false) ]
-          ],
-          width: 10
-        }
-      },
-      splitLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        show: false
-      },
-      pointer: { // 指针样式
-        length: '45%'
-      },
-      detail: {
-        show: false
-      }
-    },
-    {
-      type: 'gauge',
-      center: ['50%', '45%'], // 默认全局居中
-      radius: '70%',
-      startAngle: 200,
-      endAngle: -20,
-      axisLine: {
-        show: true,
-        lineStyle: { // 属性lineStyle控制线条样式
-          color: [ // 表盘颜色
-            [ 0.5, '#DA462C' ], // 0-50%处的颜色
-            [ 0.7, '#FF9618' ], // 51%-70%处的颜色
-            [ 0.9, '#FFED44' ], // 70%-90%处的颜色
-            [ 1, '#20AE51' ]// 90%-100%处的颜色
-          ],
-          width: 30// 表盘宽度
-        }
-      },
-      splitLine: { // 分割线样式（及10、20等长线样式）
-        length: 30,
-        lineStyle: { // 属性lineStyle控制线条样式
-          width: 2
-        }
-      },
-      axisTick: { // 刻度线样式（及短线样式）
-        length: 20
-      },
-      axisLabel: { // 文字样式（及“10”、“20”等文字样式）
-        color: 'black',
-        distance: 5 // 文字离表盘的距离
-      },
-      detail: {
-        formatter: '{score|{value}%}',
-        offsetCenter: [0, '50%'],
-        backgroundColor: '#2D8BF0',
-        height: 30,
-        rich: {
-          score: {
-            color: 'white',
-            fontFamily: '微软雅黑',
-            fontSize: 32
+export default function (value) {
+  return {
+    series: [
+      {
+        type: 'gauge',
+        center: ['50%', '45%'], // 仪表位置
+        radius: '80%', // 仪表大小
+        startAngle: 200, // 开始角度
+        endAngle: -20, // 结束角度
+        axisLine: {
+          show: false,
+          lineStyle: { // 属性lineStyle控制线条样式
+            color: [
+              [ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
+                offset: 1,
+                color: '#E75F25' // 50% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#D9452C' // 40% 处的颜色
+              }], false) ], // 100% 处的颜色
+              [ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
+                offset: 1,
+                color: '#FFC539' // 70% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#FE951E' // 66% 处的颜色
+              }, {
+                offset: 0,
+                color: '#E75F25' // 50% 处的颜色
+              }], false) ],
+              [ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // eslint-disable-line
+                offset: 1,
+                color: '#C7DD6B' // 90% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#FEEC49' // 86% 处的颜色
+              }, {
+                offset: 0,
+                color: '#FFC539' // 70% 处的颜色
+              }], false) ],
+              [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { // eslint-disable-line
+                offset: 0.2,
+                color: '#1CAD52' // 92% 处的颜色
+              }, {
+                offset: 0,
+                color: '#C7DD6B' // 90% 处的颜色
+              }], false) ]
+            ],
+            width: 10
           }
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: false
+        },
+        pointer: { // 指针样式
+          length: '45%'
+        },
+        detail: {
+          show: false
         }
       },
-      data: [{
-        value: 70,
-        label: {
-          textStyle: {
-            fontSize: 12
+      {
+        type: 'gauge',
+        center: ['50%', '45%'], // 默认全局居中
+        radius: '70%',
+        startAngle: 200,
+        endAngle: -20,
+        axisLine: {
+          show: true,
+          lineStyle: { // 属性lineStyle控制线条样式
+            color: [ // 表盘颜色
+              [ 0.5, '#DA462C' ], // 0-50%处的颜色
+              [ 0.7, '#FF9618' ], // 51%-70%处的颜色
+              [ 0.9, '#FFED44' ], // 70%-90%处的颜色
+              [ 1, '#20AE51' ]// 90%-100%处的颜色
+            ],
+            width: 30// 表盘宽度
           }
-        }
-      }]
-    }
-  ]
+        },
+        splitLine: { // 分割线样式（及10、20等长线样式）
+          length: 30,
+          lineStyle: { // 属性lineStyle控制线条样式
+            width: 2
+          }
+        },
+        axisTick: { // 刻度线样式（及短线样式）
+          length: 20
+        },
+        axisLabel: { // 文字样式（及“10”、“20”等文字样式）
+          color: 'black',
+          distance: 5 // 文字离表盘的距离
+        },
+        detail: {
+          formatter: '{score|{value}%}',
+          offsetCenter: [0, '50%'],
+          backgroundColor: '#2D8BF0',
+          height: 30,
+          rich: {
+            score: {
+              color: 'white',
+              fontFamily: '微软雅黑',
+              fontSize: 32
+            }
+          }
+        },
+        data: [{
+          value: value || 0,
+          label: {
+            textStyle: {
+              fontSize: 12
+            }
+          }
+        }]
+      }
+    ]
+  }
 }
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/list.vue
deleted file mode 100644
index 55649f1ee..000000000
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/list.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div class="list-model">
-    <div class="table-box">
-      <table>
-        <tr>
-          <th>
-            <span>{{$t('#')}}</span>
-          </th>
-          <th>
-            <span>node</span>
-          </th>
-          <th>
-            <span>ip</span>
-          </th>
-          <th>
-            <span>模式</span>
-          </th>
-          <th>
-            <span>连接数</span>
-          </th>
-          <th>
-            <span>watch数</span>
-          </th>
-          <th>
-            <span>数据量</span>
-          </th>
-          <th>
-            <span>Sent/Received</span>
-          </th>
-          <th>
-            <span>节点自检状态</span>
-          </th>
-        </tr>
-        <tr v-for="(item, $index) in list" :key="$index">
-          <td>
-            <span>{{$index + 1}}</span>
-          </td>
-          <td>
-            <span>
-              <a href="javascript:" class="links">task1</a>
-            </span>
-          </td>
-          <td><span>192.11.1.1</span></td>
-          <td>
-            <span>2222</span>
-          </td>
-          <td>
-            <span>3333</span>
-          </td>
-          <td>
-            <span>4444</span>
-          </td>
-          <td><span>5555</span></td>
-          <td>
-            <span>6666</span>
-          </td>
-          <td>
-            <span>7777</span>
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
-</template>
-<script>
-  import '@/module/filter/formatDate'
-
-  export default {
-    name: 'tenement-list',
-    data () {
-      return {
-        list: []
-      }
-    },
-    props: {
-      list: Array
-    },
-    methods: {
-    }
-  }
-</script>
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
new file mode 100644
index 000000000..c8fb2648b
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="list-model zookeeper-list">
+    <div class="table-box">
+      <table>
+        <tr>
+          <th>
+            <span>{{$t('#')}}</span>
+          </th>
+          <th>
+            <span>host</span>
+          </th>
+          <th>
+            <span>连接数</span>
+          </th>
+          <th>
+            <span>watches数量</span>
+          </th>
+          <th>
+            <span>发送量</span>
+          </th>
+          <th>
+            <span>接收量</span>
+          </th>
+          <th>
+            <span>leader/follower</span>
+          </th>
+          <th>
+            <span>最低延时</span>
+          </th>
+          <th>
+            <span>平均延时</span>
+          </th>
+          <th>
+            <span>最大延时</span>
+          </th>
+          <th>
+            <span>节点数</span>
+          </th>
+          <th>
+            <span>当前查询时间戳</span>
+          </th>
+          <th style="text-align: center">
+            <span>节点自检状态</span>
+          </th>
+        </tr>
+        <tr v-for="(item, $index) in list" :key="$index">
+          <td>
+            <span>{{$index + 1}}</span>
+          </td>
+          <td>
+            <span>
+              <a href="javascript:" class="links">{{item.hostname}}</a>
+            </span>
+          </td>
+          <td><span>{{item.connections}}</span></td>
+          <td>
+            <span>{{item.watches}}</span>
+          </td>
+          <td>
+            <span>{{item.sent}}</span>
+          </td>
+          <td>
+            <span>{{item.received}}</span>
+          </td>
+          <td><span>{{item.mode}}</span></td>
+          <td>
+            <span>{{item.minLatency}}</span>
+          </td>
+          <td>
+            <span>{{item.avgLatency}}</span>
+          </td>
+          <td>
+            <span>{{item.maxLatency}}</span>
+          </td>
+          <td>
+            <span>{{item.nodeCount}}</span>
+          </td>
+          <td>
+            <span>{{item.date | formatDate}}</span>
+          </td>
+          <td>
+            <span class="state">
+              <i class="iconfont success" v-if="item.state">&#xe607;</i>
+              <i class="iconfont error" v-else>&#xe626;</i>
+            </span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'zookeeper-list',
+    data () {
+      return {
+        list: []
+      }
+    },
+    props: {
+      list: Array
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .zookeeper-list {
+    .state {
+      text-align: center;
+      display: block;
+      >i {
+        font-size: 18px;
+      }
+      .success {
+        color: #33cc00;
+      }
+      .error {
+        color: #ff0000;
+      }
+    }
+  }
+</style>
+
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/alert.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/alert.vue
index e00e47e02..dd1881e9b 100644
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/alert.vue
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/alert.vue
@@ -13,7 +13,7 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import mList from './_source/list'
+  import mList from './_source/zookeeperList'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
index d807b4d7f..619f4932c 100644
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
@@ -2,171 +2,90 @@
   <m-list-construction :title="'Master管理'">
     <template slot="content">
       <div class="servers-wrapper">
-        <div class="row">
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>Cpu详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a1" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
+        <div class="row-box" v-for="(item,$index) in masterList">
+          <div class="row-title">
+            <div class="left">
+              <span class="sp">IP: {{item.host}}</span>
+              <span class="sp">端口: {{item.port}}</span>
+              <span class="sp">zk注册目录: {{item.zkDirectory}}</span>
             </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a2" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
+            <div class="right">
+              <span class="sp">创建时间: {{item.createTime | formatDate}}</span>
+              <span class="sp">最后心跳时间: {{item.lastHeartbeatTime | formatDate}}</span>
             </div>
           </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="value-p">
-                <b style="color: #0098e1;">12</b>
-              </div>
-              <div class="text-1">
-                cpu
-              </div>
+          <div class="row-cont">
+            <div class="col-md-4">
+              <m-gauge
+                      :value="(item.resInfo.cpuUsage * 100).toFixed(2)"
+                      :name="'cpuUsage'"
+                      :id="'gauge-cpu-' + item.id">
+              </m-gauge>
             </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>Cpu详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a3" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
+            <div class="col-md-4">
+              <m-gauge
+                      :value="(item.resInfo.memoryUsage * 100).toFixed(2)"
+                      :name="'memoryUsage'"
+                      :id="'gauge-memory-' + item.id">
+              </m-gauge>
             </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a4" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="value-p">
-                <b style="color: #7a56b8;">72</b>
-              </div>
-              <div class="text-1">
-                cpu
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>Cpu详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a5" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a6" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="value-p">
-                <b style="color: #e84d80;">44</b>
-              </div>
-              <div class="text-1">
-                cpu
+            <div class="col-md-4">
+              <div class="text-num-model">
+                <div class="value-p">
+                  <b :style="{color:color[$index]}">{{item.resInfo.loadAverage}}</b>
+                </div>
+                <div class="text-1">
+                  loadAverage
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <m-spin :is-spin="isLoading"></m-spin>
     </template>
   </m-list-construction>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
-  import mList from './_source/list'
+  import mGauge from './_source/gauge'
+  import mList from './_source/zookeeperList'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
-  import gaugeOption from './_source/gaugeOption'
+  import themeData from '@/module/echarts/themeData.json'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
 
   export default {
     name: 'servers-master',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
-        totalPage: null,
-        searchVal: '',
         isLoading: false,
-        masterList: []
+        masterList: [],
+        color: themeData.color
       }
     },
     props: {},
     methods: {
-      ...mapActions('security', ['getProcessMasterList'])
+      ...mapActions('monitor', ['getMasterData'])
     },
     watch: {},
     created () {
-
-
     },
     mounted () {
-      let b = {}
-      let a = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']
-      a.forEach((v, i) => {
-        b[v] = echarts.init(document.getElementById(v)) // eslint-disable-line
-        b[v].setOption(gaugeOption, true)
+      this.isLoading = true
+      this.getMasterData().then(res => {
+        this.masterList = _.map(res, (v, i) => {
+          return _.assign(v, {
+            resInfo: JSON.parse(v.resInfo)
+          })
+        })
+        this.isLoading = false
+      }).catch(() => {
+        this.isLoading = false
       })
     },
-    components: { mList, mListConstruction, mSpin, mNoData }
+    components: { mList, mListConstruction, mSpin, mNoData, mGauge }
   }
 </script>
 <style lang="scss" rel="stylesheet/scss">
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue
index 749cd7120..933264d73 100644
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue
@@ -1,77 +1,112 @@
 <template>
   <m-list-construction :title="'Mysql管理'">
     <template slot="content">
-      <div class="servers-wrapper">
-        <div class="row">
-          <div class="col-md-4">
-            <div class="gridb-model">
+      <div class="servers-wrapper mysql-model">
+        <div class="row" v-for="(item,$index) in mysqlList">
+          <div class="col-md-2">
+            <div class="text-num-model text">
               <div class="title">
                 <span>正常与否</span>
               </div>
               <div class="value-p">
-                <b style="color: #0098e1;">78</b>
+                <span class="state">
+                  <i class="iconfont success" v-if="item.state">&#xe607;</i>
+                  <i class="iconfont error" v-else>&#xe626;</i>
+                </span>
               </div>
               <div class="text-1">
                 正常与否
               </div>
             </div>
           </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
+          <div class="col-md-3">
+            <div class="text-num-model text">
               <div class="title">
                 <span>最大连接数</span>
               </div>
               <div class="value-p">
-                <b style="color: #ffcf3d;">55</b>
+                <b :style="{color:color[0]}">{{item.maxConnections}}</b>
               </div>
               <div class="text-1">
                 最大连接数
               </div>
             </div>
           </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
+          <div class="col-md-3">
+            <div class="text-num-model text">
               <div class="title">
                 <span>当前活跃连接</span>
               </div>
               <div class="value-p">
-                <b style="color: #f07d7d;">32</b>
+                <b :style="{color:color[8]}">{{item.threadsConnections}}</b>
               </div>
               <div class="text-1">
                 当前活跃连接
               </div>
             </div>
           </div>
+          <div class="col-md-2">
+            <div class="text-num-model text">
+              <div class="title">
+                <span>最大连接数</span>
+              </div>
+              <div class="value-p">
+                <b :style="{color:color[2]}">{{item.maxUsedConnections}}</b>
+              </div>
+              <div class="text-1">
+                最大连接数
+              </div>
+            </div>
+          </div>
+          <div class="col-md-2">
+            <div class="text-num-model text">
+              <div class="title">
+                <span>线程运行连接</span>
+              </div>
+              <div class="value-p">
+                <b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
+              </div>
+              <div class="text-1">
+                线程运行连接
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+      <m-spin :is-spin="isLoading" ></m-spin>
     </template>
   </m-list-construction>
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import mList from './_source/list'
+  import mList from './_source/zookeeperList'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
+  import themeData from '@/module/echarts/themeData.json'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
 
   export default {
     name: 'servers-mysql',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
-        totalPage: null,
-        searchVal: '',
         isLoading: false,
-        masterList: []
+        mysqlList: [],
+        color: themeData.color
       }
     },
     props: {},
     methods: {
-      ...mapActions('security', ['getProcessMasterList'])
+      ...mapActions('monitor', ['getDatabaseData'])
     },
     watch: {},
     created () {
+      this.isLoading = true
+      this.getDatabaseData().then(res => {
+        this.mysqlList = res
+        this.isLoading = false
+      }).catch(() => {
+        this.isLoading = false
+      })
     },
     mounted () {
     },
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/servers.scss b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/servers.scss
index 7dfe4b7be..a80046a81 100644
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/servers.scss
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/servers.scss
@@ -1,23 +1,10 @@
 .servers-wrapper {
   padding: 16px;
-  >.row {
-    margin-bottom: 20px;
-  }
-  .gridb-model {
+  .gauge-model {
     width: 100%;
     height: 360px;
     overflow: hidden;
-    border: 1px solid #E8E8E8;
     margin:  0 auto;
-    >.title {
-      height: 36px;
-      line-height: 36px;
-      background: #F9F9F9;
-      border-bottom: 1px solid #E8E8E8;
-      span {
-        padding-left: 8px;
-      }
-    }
     .gauge-echart {
       width: 350px;
       margin:  auto;
@@ -29,16 +16,96 @@
       font-size: 32px;
       text-align: center;
     }
+  }
+  .text-num-model {
+    &.text {
+      width: 100%;
+      height: 380px;
+      overflow: hidden;
+      border: 1px solid #E8E8E8;
+      margin:  0 auto;
+      margin-bottom: 16px;
+      >.title {
+        height: 36px;
+        line-height: 36px;
+        background: #F9F9F9;
+        border-bottom: 1px solid #E8E8E8;
+        padding-left: 10px;
+      }
+    }
     .value-p {
-      height: 254px;
-      line-height: 254px;
+      height: 276px;
+      line-height: 276px;
       text-align: center;
       >b {
-        font-size: 140px;
+        font-size: 100px;
         color: #333;
       }
     }
+    .text-1 {
+      width: 100%;
+      margin: 0 auto;
+      font-size: 32px;
+      text-align: center;
+    }
+  }
+  &.mysql-model {
+    .text-num-model {
+      height: 260px;
+      .text-1 {
+        font-size: 20px;
+      }
+      .value-p {
+        height: 160px;
+        line-height: 160px;
+        >b {
+          font-size: 80px;
+        }
+        >.state {
+          >i {
+            font-size: 50px;
+          }
+          .success {
+            color: #33cc00;
+          }
+          .error {
+            color: #ff0000;
+          }
+        }
+      }
+    }
+  }
+  .row-box {
+    width: 100%;
+    height: 380px;
+    overflow: hidden;
+    border: 1px solid #E8E8E8;
+    margin:  0 auto;
+    margin-bottom: 16px;
+    .row-title {
+      height: 36px;
+      line-height: 36px;
+      background: #F9F9F9;
+      border-bottom: 1px solid #E8E8E8;
+      position: relative;
+      span {
+        font-size: 12px;
+        color: #444;
+        &.sp {
+          margin-right: 10px;
+        }
+      }
+      .left {
+        position: absolute;
+        left: 10px;
+        top: 0;
+      }
+      .right {
+        position: absolute;
+        right: 10px;
+        top: 0;
+      }
+    }
   }
-
 }
 
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
index 526d1565d..f6a77c1b1 100644
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
@@ -2,170 +2,91 @@
   <m-list-construction :title="'Worker管理'">
     <template slot="content">
       <div class="servers-wrapper">
-        <div class="row">
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>Cpu详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a1" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a2" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
+        <div class="row-box" v-for="(item,$index) in workerList">
+          <div class="row-title">
+            <div class="left">
+              <span class="sp">IP: {{item.host}}</span>
+              <span class="sp">端口: {{item.port}}</span>
+              <span class="sp">zk注册目录: {{item.zkDirectory}}</span>
             </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="value-p">
-                <b style="color: #0098e1;">83</b>
-              </div>
-              <div class="text-1">
-                cpu
-              </div>
+            <div class="right">
+              <span class="sp">创建时间: {{item.createTime | formatDate}}</span>
+              <span class="sp">最后心跳时间: {{item.lastHeartbeatTime | formatDate}}</span>
             </div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>Cpu详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a3" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
+          <div class="row-cont">
+            <div class="col-md-4">
+              <m-gauge
+                      :value="(item.resInfo.cpuUsage * 100).toFixed(2)"
+                      :name="'cpuUsage'"
+                      :id="'gauge-cpu-' + item.id">
+              </m-gauge>
             </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a4" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
+            <div class="col-md-4">
+              <m-gauge
+                      :value="(item.resInfo.memoryUsage * 100).toFixed(2)"
+                      :name="'memoryUsage'"
+                      :id="'gauge-memory-' + item.id">
+              </m-gauge>
             </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="value-p">
-                <b  style="color: #7281c2;">18</b>
-              </div>
-              <div class="text-1">
-                cpu
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>Cpu详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a5" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="gauge-echart">
-                <div id="a6" style="height: 380px;"></div>
-              </div>
-              <div class="text-1" style="margin-top: -126px">
-                cpu
-              </div>
-            </div>
-          </div>
-          <div class="col-md-4">
-            <div class="gridb-model">
-              <div class="title">
-                <span>内存详细信息</span>
-              </div>
-              <div class="value-p">
-                <b  style="color: #f2ac6f;">15</b>
-              </div>
-              <div class="text-1">
-                cpu
+            <div class="col-md-4">
+              <div class="text-num-model">
+                <div class="value-p">
+                  <b :style="{color:color[$index]}">{{item.resInfo.loadAverage}}</b>
+                </div>
+                <div class="text-1">
+                  loadAverage
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <m-spin :is-spin="isLoading"></m-spin>
     </template>
   </m-list-construction>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
-  import mList from './_source/list'
+  import mGauge from './_source/gauge'
+  import mList from './_source/zookeeperList'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
-  import gaugeOption from './_source/gaugeOption'
+  import themeData from '@/module/echarts/themeData.json'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
 
   export default {
     name: 'servers-worker',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
-        totalPage: null,
-        searchVal: '',
         isLoading: false,
-        masterList: []
+        workerList: [],
+        color: themeData.color
       }
     },
     props: {},
     methods: {
-      ...mapActions('security', ['getProcessMasterList'])
+      ...mapActions('monitor', ['getWorkerData'])
     },
     watch: {},
     created () {
 
     },
     mounted () {
-      let b = {}
-      let a = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']
-      a.forEach((v, i) => {
-        b[v] = echarts.init(document.getElementById(v)) // eslint-disable-line
-        b[v].setOption(gaugeOption, true)
+      this.isLoading = true
+      this.getWorkerData().then(res => {
+        this.workerList = _.map(res, (v, i) => {
+          return _.assign(v, {
+            resInfo: JSON.parse(v.resInfo)
+          })
+        })
+        this.isLoading = false
+      }).catch(() => {
+        this.isLoading = true
       })
     },
-    components: { mList, mListConstruction, mSpin, mNoData }
+    components: { mList, mListConstruction, mSpin, mNoData, mGauge }
   }
 </script>
 <style lang="scss" rel="stylesheet/scss">
diff --git a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/zookeeper.vue b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/zookeeper.vue
index c226f95d9..14c2f1f1b 100644
--- a/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/zookeeper.vue
+++ b/escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/zookeeper.vue
@@ -13,7 +13,7 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import mList from './_source/list'
+  import mList from './_source/zookeeperList'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -22,24 +22,30 @@
     name: 'servers-zookeeper',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
-        totalPage: null,
-        searchVal: '',
         isLoading: false,
         zookeeperList: []
       }
     },
     props: {},
     methods: {
-      ...mapActions('security', ['getProcessMasterList'])
+      ...mapActions('monitor', ['getZookeeperData'])
     },
     watch: {},
     created () {
-      this.zookeeperList = [{ id: 1 }, { id: 1 }, { id: 1 }, { id: 1 }]
+      this.isLoading = true
+      this.getZookeeperData().then(res => {
+        this.zookeeperList = res
+        this.isLoading = false
+      }).catch(() => {
+        this.isLoading = false
+      })
     },
     mounted () {
+
     },
     components: { mList, mListConstruction, mSpin, mNoData }
   }
 </script>
+<style lang="scss" rel="stylesheet/scss">
+  @import "./servers";
+</style>
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
index 76fcf4b77..6ca5a1acf 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
@@ -67,8 +67,6 @@
   </div>
 </template>
 <script>
-  import '@/module/filter/formatDate'
-
   export default {
     name: 'list',
     data () {
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index 6aa2c68a7..583e840bb 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -72,7 +72,6 @@
   import mStart from './start'
   import mTiming from './timing'
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import { publishStatus } from '@/conf/home/pages/dag/_source/config'
 
   export default {
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
index 221145916..7a3ab1309 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
@@ -116,7 +116,6 @@
 <script>
   import _ from 'lodash'
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import mSpin from '@/module/components/spin/spin'
   import mTiming from '../../pages/list/_source/timing'
   import mNoData from '@/module/components/noData/noData'
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
index 47c7a7daf..9d3a7dcf4 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@@ -250,7 +250,6 @@
 <script>
   import _ from 'lodash'
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import { tasksState, runningType } from '@/conf/home/pages/dag/_source/config'
 
   export default {
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
index 22df0cb29..890c25b80 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
@@ -82,7 +82,6 @@
   </div>
 </template>
 <script>
-  import '@/module/filter/formatDate'
   import { mapActions, mapMutations } from 'vuex'
   import localStore from '@/module/util/localStorage'
   import { findComponentDownward } from '@/module/util/'
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
index e5e77a554..9f4bb5703 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
@@ -77,7 +77,6 @@
   </div>
 </template>
 <script>
-  import '@/module/filter/formatDate'
   import Permissions from '@/module/permissions'
   import mLog from '@/conf/home/pages/dag/_source/formModel/log'
   import { tasksState } from '@/conf/home/pages/dag/_source/config'
diff --git a/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
index 118a4090b..40c03ff7a 100644
--- a/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
@@ -107,7 +107,6 @@
   import _ from 'lodash'
   import mRename from './rename'
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import { filtTypeArr } from '../../_source/common'
   import { bytesToSize } from '@/module/util/util'
   import { downloadFile } from '@/module/download'
diff --git a/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
index 5325db732..8d96ede35 100644
--- a/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
@@ -102,7 +102,6 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import mCreateUdf from './createUdf'
 
   export default {
diff --git a/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
index c696936c7..672f8b522 100644
--- a/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
@@ -101,7 +101,6 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import mRename from './rename'
   import { downloadFile } from '@/module/download'
   import { bytesToSize } from '@/module/util/util'
diff --git a/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
index 994d79f87..9e5e951c7 100644
--- a/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
@@ -79,7 +79,6 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
 
   export default {
     name: 'tenement-list',
diff --git a/escheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
index 42f8b64ce..f6b1f4701 100644
--- a/escheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
@@ -85,7 +85,7 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
+  
 
   export default {
     name: 'tenement-list',
diff --git a/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
index 028b2166d..125a3dfd9 100644
--- a/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
@@ -98,7 +98,6 @@
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import mTransfer from '@/module/components/transfer/transfer'
 
   export default {
diff --git a/escheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
index b8c95be92..64fc5543d 100644
--- a/escheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
@@ -71,7 +71,6 @@
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import mTransfer from '@/module/components/transfer/transfer'
 
   export default {
diff --git a/escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
index b30f7a86c..a6fd4ef4e 100644
--- a/escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
@@ -65,7 +65,6 @@
   // import _ from 'lodash'
   // import i18n from '@/module/i18n'
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
 
   export default {
     name: 'user-list',
diff --git a/escheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue b/escheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue
index 73e921425..a6b096134 100644
--- a/escheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue
+++ b/escheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue
@@ -58,7 +58,6 @@
 </template>
 <script>
   import { mapState, mapMutations } from 'vuex'
-  import '@/module/filter/formatDate'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
   import mCreateUser from '@/conf/home/pages/security/pages/users/_source/createUser'
 
diff --git a/escheduler-ui/src/js/conf/home/pages/user/pages/password/_source/info.vue b/escheduler-ui/src/js/conf/home/pages/user/pages/password/_source/info.vue
index e0d5ddf98..641d2d132 100644
--- a/escheduler-ui/src/js/conf/home/pages/user/pages/password/_source/info.vue
+++ b/escheduler-ui/src/js/conf/home/pages/user/pages/password/_source/info.vue
@@ -39,7 +39,6 @@
 <script>
   import i18n from '@/module/i18n'
   import { mapState, mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
 
   export default {
diff --git a/escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/list.vue
index ed2f9648c..9d0bed953 100644
--- a/escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/list.vue
@@ -71,7 +71,6 @@
 </template>
 <script>
   import { mapActions } from 'vuex'
-  import '@/module/filter/formatDate'
 
   export default {
     name: 'token-list',
diff --git a/escheduler-ui/src/js/conf/home/store/index.js b/escheduler-ui/src/js/conf/home/store/index.js
index 3cec71b1e..edfd7a98b 100644
--- a/escheduler-ui/src/js/conf/home/store/index.js
+++ b/escheduler-ui/src/js/conf/home/store/index.js
@@ -22,6 +22,7 @@ import resource from './resource'
 import security from './security'
 import datasource from './datasource'
 import user from './user'
+import monitor from './monitor'
 
 export default new Vuex.Store({
   modules: {
@@ -30,6 +31,7 @@ export default new Vuex.Store({
     resource,
     security,
     datasource,
-    user
+    user,
+    monitor
   }
 })
diff --git a/escheduler-ui/src/js/conf/home/store/monitor/actions.js b/escheduler-ui/src/js/conf/home/store/monitor/actions.js
new file mode 100644
index 000000000..1b2e2b847
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/store/monitor/actions.js
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import io from '@/module/io'
+
+export default {
+  getMasterData ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get(`monitor/master/list`, payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
+  getWorkerData ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get(`monitor/worker/list`, payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
+  getDatabaseData ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get(`monitor/database`, payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
+  getZookeeperData ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get(`monitor/zookeeper/list`, payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  }
+}
diff --git a/escheduler-ui/src/js/conf/home/store/monitor/getters.js b/escheduler-ui/src/js/conf/home/store/monitor/getters.js
new file mode 100644
index 000000000..e84c864c3
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/store/monitor/getters.js
@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+}
diff --git a/escheduler-ui/src/js/conf/home/store/monitor/index.js b/escheduler-ui/src/js/conf/home/store/monitor/index.js
new file mode 100644
index 000000000..24abd1cca
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/store/monitor/index.js
@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import actions from './actions'
+import getters from './getters'
+import mutations from './mutations'
+import state from './state'
+
+export default {
+  strict: true,
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}
diff --git a/escheduler-ui/src/js/conf/home/store/monitor/mutations.js b/escheduler-ui/src/js/conf/home/store/monitor/mutations.js
new file mode 100644
index 000000000..e84c864c3
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/store/monitor/mutations.js
@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+}
diff --git a/escheduler-ui/src/js/conf/home/store/monitor/state.js b/escheduler-ui/src/js/conf/home/store/monitor/state.js
new file mode 100644
index 000000000..4213c7dd0
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/store/monitor/state.js
@@ -0,0 +1,18 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+}
-- 
GitLab