From a21189673aabae74111f79522f2eb7173939dfbe Mon Sep 17 00:00:00 2001
From: kylinhao <wanghao6@kylinos.cn>
Date: Tue, 12 Apr 2022 09:52:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E9=97=A8=E6=9C=BA=E5=99=A8=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E6=8E=A5=E5=8F=A3=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           |  13 +-
 package.json                                |   5 +-
 pkg/app/server/controller/batchmanager.go   |  17 +-
 pkg/app/server/controller/machinemanager.go |  11 +-
 vue/components/KyTable/index.vue            |  10 +-
 vue/components/SmallTable/index.vue         |   4 +-
 vue/components/kyTerminal/Xterm.js          |  20 ++
 vue/components/kyTerminal/index.vue         | 173 +++++++++++
 vue/components/kyTerminal/index1.vue        |  55 ++++
 vue/main.js                                 |   3 +-
 vue/request/batch.js                        |   4 +-
 vue/request/cluster.js                      |  64 +++-
 vue/router/index.js                         |  47 ++-
 vue/styles/index.scss                       |  70 ++++-
 vue/views/Cluster/Cluster.vue               |  44 +--
 vue/views/Cluster/detail/base.vue           | 127 ++++++++
 vue/views/Cluster/detail/index.vue          | 313 +++-----------------
 vue/views/Cluster/detail/index1.vue         | 292 ++++++++++++++++++
 vue/views/Cluster/detail/network.vue        |  45 +++
 vue/views/Cluster/detail/rpm.vue            |  29 ++
 vue/views/Cluster/detail/service.vue        | 260 ++++++++++++++++
 vue/views/Cluster/detail/user.vue           | 167 +++++++++++
 vue/views/Home/Home.vue                     |   3 +-
 vue/views/Log/Log.vue                       |  22 +-
 vue/views/Overview/Overview.vue             |   4 +-
 vue/views/Overview/charts/dept.vue          |   6 +-
 vue/views/RoleManager/RoleMan.vue           |  19 +-
 vue/views/UserInfo.vue                      |  15 +-
 vue/views/UserManager/UserMan.vue           |  10 +-
 29 files changed, 1458 insertions(+), 394 deletions(-)
 create mode 100644 vue/components/kyTerminal/Xterm.js
 create mode 100644 vue/components/kyTerminal/index.vue
 create mode 100644 vue/components/kyTerminal/index1.vue
 create mode 100644 vue/views/Cluster/detail/base.vue
 create mode 100644 vue/views/Cluster/detail/index1.vue
 create mode 100644 vue/views/Cluster/detail/network.vue
 create mode 100644 vue/views/Cluster/detail/rpm.vue
 create mode 100644 vue/views/Cluster/detail/service.vue
 create mode 100644 vue/views/Cluster/detail/user.vue

diff --git a/package-lock.json b/package-lock.json
index e2dfedd6..5fee6cfa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5747,8 +5747,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -12404,6 +12403,16 @@
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
       "dev": true
     },
+    "xterm": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.18.0.tgz",
+      "integrity": "sha512-JQoc1S0dti6SQfI0bK1AZvGnAxH4MVw45ZPFSO6FHTInAiau3Ix77fSxNx3mX4eh9OL4AYa8+4C8f5UvnSfppQ=="
+    },
+    "xterm-addon-fit": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz",
+      "integrity": "sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ=="
+    },
     "xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
diff --git a/package.json b/package.json
index 4cb0e382..d3371d9c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "element-ui": "^2.15.6",
     "file-saver": "^2.0.5",
     "js-cookie": "^3.0.1",
+    "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "requestjs": "^1.0.3",
     "vue": "^2.5.2",
@@ -24,7 +25,9 @@
     "vue-router": "^3.0.1",
     "vuejs": "^3.0.1",
     "vuex": "^3.6.2",
-    "xlsx": "^0.17.5"
+    "xlsx": "^0.17.5",
+    "xterm": "^4.18.0",
+    "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/pkg/app/server/controller/batchmanager.go b/pkg/app/server/controller/batchmanager.go
index 7ccb3f8c..bbaf8c5c 100644
--- a/pkg/app/server/controller/batchmanager.go
+++ b/pkg/app/server/controller/batchmanager.go
@@ -247,22 +247,13 @@ type BatchId struct {
 }
 
 func Batchmachineinfo(c *gin.Context) {
-	j, err := ioutil.ReadAll(c.Request.Body)
-	if err != nil {
-		response.Response(c, http.StatusUnprocessableEntity,
-			422,
-			nil,
-			err.Error())
-		return
-	}
-	var batchid BatchId
-	err = json.Unmarshal(j, &batchid)
-	logger.Info("%+v", batchid)
-	if err != nil {
+	batchid := &BatchId{}
+	if c.ShouldBind(batchid) != nil {
+
 		response.Response(c, http.StatusUnprocessableEntity,
 			422,
 			nil,
-			err.Error())
+			"parameter error")
 		return
 	}
 
diff --git a/pkg/app/server/controller/machinemanager.go b/pkg/app/server/controller/machinemanager.go
index 3798b651..8d1094c7 100644
--- a/pkg/app/server/controller/machinemanager.go
+++ b/pkg/app/server/controller/machinemanager.go
@@ -247,10 +247,9 @@ func Deletedepartdata(c *gin.Context) {
 }
 
 type Depart struct {
-	Page       int  `form:"page"`
-	Size       int  `form:"size"`
-	ID         int  `form:"DepartId"`
-	ShowSelect bool `form:"ShowSelect"`
+	Page int `form:"page"`
+	Size int `form:"size"`
+	ID   int `form:"DepartId"`
 }
 
 func MachineInfo(c *gin.Context) {
@@ -262,8 +261,8 @@ func MachineInfo(c *gin.Context) {
 			"parameter error")
 		return
 	}
-
-	a := ReturnID(depart.ID)
+	var a []int
+	ReturnSpecifiedDepart(depart.ID, &a)
 	a = append(a, depart.ID)
 	machinelist := make([]model.Res, 0)
 	for _, value := range a {
diff --git a/vue/components/KyTable/index.vue b/vue/components/KyTable/index.vue
index 6096164d..0a5f48d2 100644
--- a/vue/components/KyTable/index.vue
+++ b/vue/components/KyTable/index.vue
@@ -9,7 +9,7 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-02-22 16:43:19
-  LastEditTime: 2022-04-07 11:13:23
+  LastEditTime: 2022-04-08 17:33:00
   Description: 'Components Table'
  -->
 <template>
@@ -204,10 +204,11 @@ export default {
   height: 96%;
   .header {
     width: 100%;
-    padding: 5px 0;
+    height: 8%;
     border-radius: 6px 6px 0 0;
     background: linear-gradient(to right,rgb(11, 35, 117) 0%, rgb(96, 122, 207) 100%,);
     .header_content {
+      height: 100%;
       margin: 0 10px;
       display: flex;
       justify-content: space-between;
@@ -221,12 +222,13 @@ export default {
     }
   }
   .content {
-    height: 92%;
+    height: 89%;
+    overflow-y: auto;
   }
   .el-table {
     border: 1px solid #ebeef5;
     .line-color {
-      background-color: #f2f7ff;
+      background-color: #fff;
     }
     th, td {
       text-align: center;
diff --git a/vue/components/SmallTable/index.vue b/vue/components/SmallTable/index.vue
index fdb98785..2b0cc9ab 100644
--- a/vue/components/SmallTable/index.vue
+++ b/vue/components/SmallTable/index.vue
@@ -9,7 +9,7 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-02-25 16:33:45
-  LastEditTime: 2022-03-25 09:37:10
+  LastEditTime: 2022-04-11 14:19:43
   Description: provide agent log manager of pilotgo
  -->
 <template>
@@ -36,7 +36,7 @@ export default {
     height: {
       type: Number,
       default: function() {
-        return 0
+        return 900;
       }
     }
   },
diff --git a/vue/components/kyTerminal/Xterm.js b/vue/components/kyTerminal/Xterm.js
new file mode 100644
index 00000000..8cf713d0
--- /dev/null
+++ b/vue/components/kyTerminal/Xterm.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+ * PilotGo is licensed under the Mulan PSL v2.
+ * You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *     http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ * @Author: zhaozhenfang
+ * @Date: 2022-04-07 15:57:12
+ * @LastEditTime: 2022-04-07 15:57:26
+ */
+import { Terminal } from 'xterm'
+import * as fit from 'xterm/lib/addons/fit/fit'
+import * as attach from 'xterm/lib/addons/attach/attach'
+Terminal.applyAddon(fit)
+Terminal.applyAddon(attach)
+ 
+export default Terminal
\ No newline at end of file
diff --git a/vue/components/kyTerminal/index.vue b/vue/components/kyTerminal/index.vue
new file mode 100644
index 00000000..d5404d66
--- /dev/null
+++ b/vue/components/kyTerminal/index.vue
@@ -0,0 +1,173 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-04-07 16:55:41
+  LastEditTime: 2022-04-08 16:26:33
+ -->
+<template>
+  <div class="terminal-cantainer">
+    <div ref="terminal" style="width: 100%; height: 100%; display: block"></div>
+  </div>
+</template>
+
+<script>
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import 'xterm/css/xterm.css'
+import { debounce } from 'lodash'
+
+const packStdin = data =>
+  JSON.stringify({
+    Op: 'stdin',
+    Data: data
+  })
+
+const packResize = (col, row) =>
+  JSON.stringify({
+    Op: 'resize',
+    Cols: col,
+    Rows: row
+  })
+export default {
+  name: 'Terminal',
+  data() {
+    return {
+      initText: '连接中...',
+      first: true,
+      term: null,
+      fitAddon: null,
+      ws: null,
+      socketUrl:'ws://localhost:8081',
+      option: {
+        lineHeight: 1.2,
+        cursorBlink: true,
+        cursorStyle: 'underline',
+        fontSize: 12,
+        fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
+        theme: {
+          background: '#181d28'
+        },
+        cols: 10 // 初始化的时候不要设置fit，设置col为较小值（最小为可展示initText初始文字即可）方便屏幕缩放
+      }
+    }
+  },
+  computed: {
+    isWsOpen() {
+      return this.ws && this.ws.readyState === 1
+    }
+  },
+  mounted() {
+    this.term = this.initTerm()
+    this.initSocket()
+
+    this.onTerminalResize()
+    this.onTerminalKeyPress()
+
+    setTimeout(() => {
+      this.fitAddon.fit()
+    }, 60) 
+  },
+  beforeDestroy() {
+    this.removeResizeListener()
+    this.term && this.term.dispose()
+  },
+  methods: {
+    initTerm() {
+      const term = new Terminal(this.option)
+      this.fitAddon = new FitAddon()
+      term.loadAddon(this.fitAddon)
+      term.open(this.$refs.terminal)
+      term.write(this.initText)
+      // this.fitAddon.fit() // 初始化的时候不要使用fit
+      return term
+    },
+    onTerminalKeyPress() {
+      this.term.onData(data => {
+        this.isWsOpen && this.ws.send(packStdin(data))
+      })
+    },
+
+    // resize 相关
+    resizeRemoteTerminal() {
+      const { cols, rows } = this.term
+      console.warn('cols, rows', cols, rows)
+      // 调整后端终端大小 使后端与前端终端大小一致
+      this.isWsOpen && this.ws.send(packResize(cols, rows))
+    },
+    onResize: debounce(function () {
+      this.fitAddon.fit()
+    }, 500),
+    onTerminalResize() {
+      window.addEventListener('resize', this.onResize)
+      this.term.onResize(this.resizeRemoteTerminal)
+    },
+    removeResizeListener() {
+      window.removeEventListener('resize', this.onResize)
+    },
+
+    // socket
+    initSocket() {
+      this.ws = new WebSocket(this.socketUrl)
+      this.openSocket()
+      this.closeSocket()
+      this.errorSocket()
+      this.messageSocket()
+    },
+    // 打开连接
+    openSocket() {
+      this.ws.onopen = () => {
+        console.log('打开连接')
+      }
+    },
+    // 关闭连接
+    closeSocket() {
+      this.ws.onclose = () => {
+        console.log('关闭连接')
+      }
+    },
+    // 连接错误
+    errorSocket() {
+      this.ws.onerror = () => {
+        this.$message.error('websoket连接失败，请刷新！')
+      }
+    },
+    // 接收消息
+    messageSocket() {
+      this.ws.onmessage = res => {
+        const data = JSON.parse(res.data)
+        const term = this.term
+        console.warn('data', data)
+        // 第一次连接成功将 initText 清空
+        if (this.first) {
+          this.first = false
+          term.reset()
+          term.element && term.focus()
+          this.resizeRemoteTerminal()
+        }
+        term.write(data.Data)
+      }
+    }
+  }
+}
+//
+</script>
+<style lang="scss">
+.terminal-cantainer {
+  height: 100%;
+  border-radius: 4px;
+  background: rgb(24, 29, 40);
+  padding: 12px;
+  color: rgb(255, 255, 255);
+  .xterm-scroll-area::-webkit-scrollbar-thumb {
+    background-color: #b7c4d1; /* 滚动条的背景颜色 */
+  }
+}
+</style>
+
diff --git a/vue/components/kyTerminal/index1.vue b/vue/components/kyTerminal/index1.vue
new file mode 100644
index 00000000..2443498f
--- /dev/null
+++ b/vue/components/kyTerminal/index1.vue
@@ -0,0 +1,55 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-04-07 15:56:26
+  LastEditTime: 2022-04-07 16:37:41
+ -->
+<template>
+    <div class="console" id="terminal"></div>
+</template>
+<script>
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+export default {
+  name: 'Console',
+  data () {
+    return {
+      term: null,
+      terminalSocket: null
+    }
+  },
+  methods: {
+    runRealTerminal () {
+      console.log('webSocket is finished')
+    },
+    errorRealTerminal () {
+      console.log('error')
+    },
+    closeRealTerminal () {
+      console.log('close')
+    }
+  },
+  mounted () {
+    let terminalContainer = document.getElementById('terminal')
+    this.term = new Terminal()
+    const fitAddon = new FitAddon();
+    this.term.loadAddon(fitAddon);
+    this.term.open(terminalContainer)
+    this.term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
+    this.term.onData((val) => { this.term.write(val); });
+    this.term._initialized = true
+	  fitAddon.fit();
+  },
+  beforeDestroy () {
+    // this.terminalSocket.close()
+    // this.term.destroy()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/vue/main.js b/vue/main.js
index 1b6b5abe..02d87e9d 100644
--- a/vue/main.js
+++ b/vue/main.js
@@ -9,7 +9,7 @@
  * See the Mulan PSL v2 for more details.
  * @Author: zhaozhenfang
  * @Date: 2022-02-12 16:12:15
- * @LastEditTime: 2022-03-21 14:54:51
+ * @LastEditTime: 2022-04-07 15:51:42
  */
 import Vue from 'vue'
 import App from './App'
@@ -19,6 +19,7 @@ import axios from 'axios'
 import ElementUI from 'element-ui';  //导入element ui
 import 'element-ui/lib/theme-chalk/index.css';
 import * as echarts from 'echarts'; //echarts 5.0 导入方式
+import 'xterm/css/xterm.css'; // 引入terminal终端样式
 import './permission';
 import './styles/index.scss'
 import './iconfont/iconfont.css'
diff --git a/vue/request/batch.js b/vue/request/batch.js
index 16858c82..c8d8bdc5 100644
--- a/vue/request/batch.js
+++ b/vue/request/batch.js
@@ -9,7 +9,7 @@
  * See the Mulan PSL v2 for more details.
  * @Author: zhaozhenfang
  * @Date: 2022-02-25 16:33:46
- * @LastEditTime: 2022-02-28 14:43:33
+ * @LastEditTime: 2022-04-08 16:32:34
  * @Description: provide agent log manager of pilotgo
  */
 import { request } from './request'
@@ -33,7 +33,7 @@ export function getBatches(data) {
 export function getBatchDetail(data) {
   return request({
     url: '/batchmanager/batchmachineinfo',
-    method: 'post',
+    method: 'get',
     data
   })
 }
diff --git a/vue/request/cluster.js b/vue/request/cluster.js
index 75e2bf83..68ed697d 100644
--- a/vue/request/cluster.js
+++ b/vue/request/cluster.js
@@ -9,7 +9,7 @@
  * See the Mulan PSL v2 for more details.
  * @Author: zhaozhenfang
  * @Date: 2022-02-25 16:33:46
- * @LastEditTime: 2022-03-25 10:49:48
+ * @LastEditTime: 2022-04-11 17:11:42
  * @Description: provide agent log manager of pilotgo
  */
 import { request } from './request'
@@ -126,6 +126,15 @@ export function getDeviceInfo(data) {
   })
 }
 
+// 获取机器基本信息
+export function getBasicInfo(data) {
+  return request({
+    url: 'api/os_basic',
+    method: 'get',
+    params: data
+  })
+}
+
 // 获取OS
 export function getOS(data) {
   return request({
@@ -184,8 +193,8 @@ export function getserviceList(data) {
 export function serviceStart(data) {
   return request({
     url: 'agent/service_start',
-    method: 'get',
-    params: data
+    method: 'post',
+    data
   })
 }
 
@@ -193,8 +202,17 @@ export function serviceStart(data) {
 export function serviceStop(data) {
   return request({
     url: 'agent/service_stop',
-    method: 'get',
-    params: data
+    method: 'post',
+    data
+  })
+}
+
+// 重启一项服务
+export function serviceRestart(data) {
+  return request({
+    url: 'agent/service_restart',
+    method: 'post',
+    data
   })
 }
 
@@ -223,4 +241,40 @@ export function getDisk(data) {
     method: 'get',
     params: data
   })
+}
+
+// 获取网络信息io
+export function getNetwork(data) {
+  return request({
+    url: 'api/net_io',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获取网络信息nic
+export function getNetNic(data) {
+  return request({
+    url: 'api/net_nic',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获取网络信息tcp
+export function getNetTcp(data) {
+  return request({
+    url: 'api/net_tcp',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获取网络信息udp
+export function getNetUdp(data) {
+  return request({
+    url: 'api/net_udp',
+    method: 'get',
+    params: data
+  })
 }
\ No newline at end of file
diff --git a/vue/router/index.js b/vue/router/index.js
index 54503393..51f35eb7 100644
--- a/vue/router/index.js
+++ b/vue/router/index.js
@@ -52,20 +52,20 @@ export const routes = [
                 { name: '防火墙配置'}], 
             }
           },
-          {
-            path: '/prometheus',
-            name: 'Prometheus',
-            component: _import('Prometheus/index'),
-            meta: {
-              header_title: "性能监控", 
-              panel: "cluster", 
-              breadcrumb: [
-                  { name: '机器管理', path: '/cluster' },
-                  { name: '性能监控'}
-              ],
-              icon_class: ''
-            }
-          },
+          // {
+          //   path: '/prometheus',
+          //   name: 'Prometheus',
+          //   component: _import('Prometheus/index'),
+          //   meta: {
+          //     header_title: "性能监控", 
+          //     panel: "cluster", 
+          //     breadcrumb: [
+          //         { name: '机器管理', path: '/cluster' },
+          //         { name: '性能监控'}
+          //     ],
+          //     icon_class: ''
+          //   }
+          // },
           {
             path: '/cluster:detail',
             name: 'MacDetail',
@@ -82,6 +82,12 @@ export const routes = [
           },
         ]
       },
+      {
+        path: '/prometheus',
+        name: 'Prometheus',
+        component: _import('Prometheus/index'),
+        meta: { title: 'prometheus', header_title: "性能监控", panel: "prometheus", icon_class: 'el-icon-s-marketing' }
+      },
       {
         path: '/batch',
         component:  _import('Batch/Batch'),
@@ -103,19 +109,6 @@ export const routes = [
         },
         ]
       }, 
-          
-      /*{
-        path: '/plug_in',
-        name: 'PlugIn',
-        component:  _import('Plug-in/Plug-in'),
-        meta: { title: 'plug_in', header_title: "插件管理", panel: "plug_in", icon_class: 'el-icon-document' }
-      }, 
-      {
-        path: '/cockpit',
-        name: 'Cockpit',
-        component: Cockpit
-        //icon_class: 'el-icon-setting'
-      },*/
       {
         path: '/usermanager',
         name: 'UserManager',
diff --git a/vue/styles/index.scss b/vue/styles/index.scss
index 88f14167..f9024e75 100644
--- a/vue/styles/index.scss
+++ b/vue/styles/index.scss
@@ -296,7 +296,9 @@ a {
     }
   }
 }
-
+.el-checkbox__inner {
+  border: 1px solid rgba(82, 108, 193,.6);
+}
 .el-table__expand-icon {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
@@ -306,6 +308,11 @@ a {
     height: 25px;
   }
 }
+.el-table td.el-table__cell, 
+.el-table th.el-table__cell.is-leaf {
+  // border: 1px solid red;
+  border-bottom: 1px solid rgb(236, 239, 248);
+}
 .el-table__expand-icon .el-icon-arrow-right:before {
   content: "\e6d9";
   border: 1px solid #ccc;
@@ -393,6 +400,13 @@ a {
   font-size: 16px;
 }
 
+.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
+  color:rgb(11, 35, 117)
+}
+.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
+  color:rgb(241, 139, 14);
+}
+
 .flex {
   display: flex;
   flex-flow: wrap;
@@ -426,4 +440,58 @@ a {
       font-weight: 100;
     }
   }
+}
+
+.el-tabs__nav {
+  width: 100%;
+}
+.el-tabs--border-card>.el-tabs__header {
+  background-color: rgba(11, 35, 117,.9);
+  border-bottom: 1px solid #FFF;
+  border-radius: 10px;
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item {
+  width: 16.7%;
+  text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+  color: #fff;
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+  color: #FFF;
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:hover {
+  color: rgba(11, 35, 117,.9);
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+  color: rgba(11, 35, 117,.9);
+  border-radius: 10px 10px 0 0;
+  width: 17.1%;
+  background-color: #FFF;
+  border-right-color: #FFF; 
+  border-left-color: #FFF;
+}
+.el-tabs--border-card>.el-tabs__content {
+  height: 94%;
+  width: 100%;
+  overflow-y: auto;
+}
+
+
+.el-descriptions .is-bordered {
+  table-layout: fixed;
+}
+.el-descriptions__body {
+  color: #000;
+  text-align: center;
+}
+.el-descriptions .is-bordered .el-descriptions-item__cell {
+  text-align: center;
+  border: 2px solid #EBEEF5;
+}
+.el-descriptions-item__label.is-bordered-label {
+  color: rgba(0, 0, 0, .7);
+  width: 14%;
+  white-space: normal;
+  word-break: break-word;
 }
\ No newline at end of file
diff --git a/vue/views/Cluster/Cluster.vue b/vue/views/Cluster/Cluster.vue
index efe93d9b..fe801550 100644
--- a/vue/views/Cluster/Cluster.vue
+++ b/vue/views/Cluster/Cluster.vue
@@ -9,7 +9,7 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-02-25 16:33:46
-  LastEditTime: 2022-04-07 14:50:40
+  LastEditTime: 2022-04-11 17:29:41
   Description: provide agent log manager of pilotgo
  -->
 <template>
@@ -34,16 +34,15 @@
           <auth-button name="create_batch"  @click="handleAddBatch" :disabled="$refs.table && $refs.table.selectRow.rows.length == 0"> 创建批次 </auth-button>
           <el-dropdown trigger="click">
             <el-button class="kylin-item-button">
-              批量配置<i class="el-icon-arrow-down el-icon--right"></i>
+              批量配置<em class="el-icon-arrow-down el-icon--right"></em>
             </el-button>
             <el-dropdown-menu slot="dropdown">
               <auth-drop @click.native="handleChange" name="rpm_install"> 变更部门 </auth-drop>
               <auth-drop @click.native="handleIssue" name="rpm_install"> rpm下发 </auth-drop>
               <auth-drop @click.native="handleUnInstall" name="rpm_uninstall"> rpm卸载 </auth-drop>
-              <!-- <auth-drop @click.native="handleFireWall" name="rpm_uninstall"> 防火墙配置 </auth-drop> -->
             </el-dropdown-menu>
           </el-dropdown>
-          <el-popconfirm title="确定删除所选项目吗？" @confirm="handleDelete">
+          <el-popconfirm title="确定删除所选项目吗?" @confirm="handleDelete">
             <auth-button name="cluster_delete"  slot="reference" v-show="!isBatch" :disabled="$refs.table && $refs.table.selectRow.rows.length == 0"> 删除 </auth-button>
           </el-popconfirm>
         </template>
@@ -55,45 +54,25 @@
               </router-link>
             </template>
           </el-table-column>
-          <el-table-column prop="departname" label="部门"> 
-            <!-- <template slot-scope="scope">
-              {{scope.row.departname}}
-              <span v-if="showChange" title="变更部门" class="el-icon-edit-outline deptchange" @click="handleChange(scope.row)"></span>
-            </template> -->
+          <el-table-column prop="departname" label="部门">
           </el-table-column>
           <el-table-column prop="cpu" label="cpu" width="220"> 
           </el-table-column>
           <el-table-column label="状态">
             <template slot-scope="scope">
-              <span v-if="scope.row.state == 1">在线</span>
-              <span v-if="scope.row.state == 2">离线</span>
-              <span v-if="scope.row.state == 3">未分配</span>
+              <span class="statusSpan" style="background: rgb(16, 197, 91);" v-if="scope.row.state == 1">在线</span>
+              <span class="statusSpan" style="background: gray;" v-if="scope.row.state == 2">离线</span>
+              <span class="statusSpan" style="background: rgb(73, 99, 183);" v-if="scope.row.state == 3">未分配</span>
             </template>
           </el-table-column>
            <el-table-column prop="systeminfo" label="系统信息"> 
           </el-table-column>
-          <!-- <el-table-column label="防火墙配置">
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                @click="handleFireWall(scope.row.ip)">
-                <em class="el-icon-setting"></em>
-              </el-button>
-            </template>
-          </el-table-column> -->
           <el-table-column label="操作">
             <template slot-scope="scope">
               <el-button size="mini" type="primary" plain 
                 @click="handleProme(scope.row.ip)">               
                 监控
               </el-button>
-              <!-- <el-button size="mini" type="primary" plain 
-                @click="handleFireWall(scope.row.ip)">
-                防火墙
-              </el-button> -->
-              <!-- <el-button size="mini" type="primary" plain 
-                @click="handleChange(scope.row)"> 
-                变更部门 </el-button> -->
             </template>
           </el-table-column>
         </template>
@@ -267,9 +246,8 @@ export default {
 
 <style scoped lang="scss">
 .cluster {
-  height: 94%;
+  height: 95%;
   display: flex;
-  margin-top: 10px;
   .dept {
     height: 100%;
     width: 20%;
@@ -279,6 +257,12 @@ export default {
     width: 78%;
     height: 100%;
     float: right;
+    .statusSpan {
+      display: inline-block;
+      width: 70%; 
+      color: #fff;
+      border-radius:10px;
+    }
     .deptchange {
       cursor: pointer;
     }
diff --git a/vue/views/Cluster/detail/base.vue b/vue/views/Cluster/detail/base.vue
new file mode 100644
index 00000000..452031ed
--- /dev/null
+++ b/vue/views/Cluster/detail/base.vue
@@ -0,0 +1,127 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-04-08 11:34:55
+  LastEditTime: 2022-04-11 17:43:11
+ -->
+<template>
+ <div class="content" style="width:96%; padding-top:20px; margin: 0 auto">
+   <el-descriptions :column="2" size="medium" border>
+    <el-descriptions-item label="机器IP">{{ basic.IP }}</el-descriptions-item>
+    <el-descriptions-item label="所属部门">{{ basic.dept }}</el-descriptions-item>
+    <el-descriptions-item label="监控状态">{{ basic.status }}</el-descriptions-item>
+    <el-descriptions-item label="系统版本">{{ basic.macPlatform }}</el-descriptions-item>
+    <el-descriptions-item label="架构">{{ basic.mackernel }}</el-descriptions-item>
+    <el-descriptions-item label="cpu">{{ basic.macCPU }}</el-descriptions-item>
+    <el-descriptions-item label="内存">{{basic.macMEM}}</el-descriptions-item>
+    <el-descriptions-item label="内核版本">{{basic.osVersion}}</el-descriptions-item>
+    <el-descriptions-item :label="item.device" :span="2" v-for="item in diskData" :key="item.$index">
+      <span class="diskMount">{{"挂载点: "+item.path+"("+item.total+")"}}</span>
+      <p class="progress">
+        <span :style="{width: item.usedPercent}">{{item.usedPercent}}</span>
+      </p>
+    </el-descriptions-item>
+   </el-descriptions>
+ </div>
+</template>
+<script>
+import { getBasicInfo, getCpu, getOS, getMemory,getDisk } from '@/request/cluster';
+export default {
+  name: "BaseInfo",
+  data() {
+    return {
+      params: {},
+      diskData: [
+      {
+        "device": "/dev/dm-0",
+        "fileSystem": "/dev/dm-0(挂载点：/)",
+        "fstype": "xfs",
+        "path": "/",
+        "total": "64G",
+        "used": "45G",
+        "usedPercent": "71%"
+      },
+      {
+        "device": "/dev/sda1",
+        "fileSystem": "/dev/sda1(挂载点：/boot)",
+        "fstype": "xfs",
+        "path": "/boot",
+        "total": "0G",
+        "used": "0G",
+        "usedPercent": "20%"
+      }
+    ],
+      basic: {
+        IP: '127.0.0.1',
+        dept: '麒麟',
+        manager: 'root',
+        status: '在线',
+        IP: '192.168.160.128',
+        macPlatform: 'Kylin',
+        mackernel: 'x86_64',
+        macCPU: '4 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz',
+        macMEM: '2957640',
+        osVersion: '4.19.90-24.4.v2101.ky10.x86_64'
+      },
+    }
+  },
+  mounted() {
+    let obj = this.params = {uuid:this.$route.params.detail};
+    getBasicInfo(obj).then(res => {
+      this.basic.IP = res.data.data.IP;
+      this.basic.dept = res.data.data.depart;
+      this.basic.status = res.data.data.state === 1? '在线': res.data.data.state === 2? '离线':'未分配';
+    })
+     getOS(obj).then((res) => {
+      let result = res.data.data.os_info;
+      this.basic.macPlatform = result.Platform;
+      this.basic.mackernel = result.KernelArch;
+    })
+    
+    getCpu(obj).then((res) => {
+      this.basic.macCPU = res.data.data.CPU_info.CpuNum + '核 ' + res.data.data.CPU_info.ModelName;
+    })
+    getMemory(obj).then((res) => {
+      let memTotal = 0;
+      memTotal = res.data.data.memory_info.MemTotal / 1024 / 1024;
+      this.basic.macMEM = memTotal.toFixed(2) + 'G';
+    })
+    getDisk(obj).then((res) => {
+      this.diskData = res.data.data.disk_use;
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.content {
+  .diskMount {
+    display: inline-block;
+    width:16%;
+    text-align: right;
+  }
+  .progress {
+    display: inline-block;
+    width:74%; 
+    margin-left: 2%;
+    border: 1px solid rgba(11, 35, 117,.5);  
+    background: #fff; 
+    border-radius: 10px; 
+    text-align:left;
+    span {
+      display: inline-block;
+      background: rgba(11, 35, 117,.6);
+      text-align:center;
+      color: #fff;
+      border: 1px solid #fff;
+      border-radius: 10px;
+    }
+  }
+}
+</style>
diff --git a/vue/views/Cluster/detail/index.vue b/vue/views/Cluster/detail/index.vue
index ea975d23..a82ccd2e 100644
--- a/vue/views/Cluster/detail/index.vue
+++ b/vue/views/Cluster/detail/index.vue
@@ -8,285 +8,70 @@
   EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
-  Date: 2022-02-25 16:33:46
-  LastEditTime: 2022-04-07 13:24:36
-  Description: provide agent log manager of pilotgo
+  Date: 2022-04-08 11:34:22
+  LastEditTime: 2022-04-11 17:31:41
  -->
 <template>
- <div class="chartContent">
-    <div class="left">
-      <h4>基本信息</h4>
-      <div class="basic">
-        <el-descriptions :column="2" size="medium" border>
-          <el-descriptions-item label="平台">{{ basic.macPlatform }}</el-descriptions-item>
-          <el-descriptions-item label="架构">{{ basic.mackernel }}</el-descriptions-item>
-          <el-descriptions-item label="cpu">{{ basic.macCPU }}</el-descriptions-item>
-          <el-descriptions-item label="内存" :span="2">{{basic.macMEM}}</el-descriptions-item>
-        </el-descriptions>
-      </div>
-      <div id="diskChar" :style="{width:'90%',height:'90%'}"></div>
-    </div>
-    <div class="right">
-      <div class="user">
-        <h4>用户信息</h4>
-        <small-table
-          ref="userTab"
-          :data="userData"
-          :height="tHight"
-        >
-          <template v-slot:content>
-            <el-table-column
-              prop="Username"
-              label="用户">
-            </el-table-column>
-            <!-- <el-table-column
-              prop="currUser"
-              label="当前用户">
-            </el-table-column> -->
-            <el-table-column
-              prop="Description"
-              label="备注">
-            </el-table-column>
-          </template>
-        </small-table>
-      </div>
-      <div class="service">
-        <h4>服务信息</h4>
-        <small-table
-          ref="userTab"
-          :data="serviceData"
-          :height="tHight"
-        >
-          <template v-slot:content>
-            <el-table-column
-              prop="Name"
-              label="名称">
-            </el-table-column>
-            <el-table-column
-              prop="Active"
-              label="状态">
-            </el-table-column>
-            <el-table-column label="操作">
-              <template slot-scope="scope">
-                <el-button v-if="scope.row.Active == 'inactive'" size="mini" type="primary" plain 
-                  @click="handleStart(scope.$index,scope.row)"> 
-                  启动 </el-button>
-                  <el-button v-if="scope.row.Active == 'active'" size="mini" type="primary" plain 
-                  @click="handleStop()"> 
-                  关闭 </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </small-table>
-      </div>
-      <div class="kernel">
-        <h4>内核信息</h4>
-        <small-table
-          ref="userTab"
-          :data="kernelData"
-          :height="tHight"
-        >
-          <template v-slot:content>
-            <el-table-column
-              label="内核">
-              <template slot-scope="scope">
-                {{ Object.keys(scope.row)[0] }}  
-              </template> 
-            </el-table-column>
-            <el-table-column
-              label="个数">
-              <template slot-scope="scope">
-                {{ Object.values(scope.row)[0] }}  
-              </template> 
-            </el-table-column>
-            <el-table-column label="操作">
-              <template slot-scope="scope">
-                <el-button size="mini" type="primary" plain 
-                  @click="handleChange(scope.row)"> 
-                  编辑 </el-button>
-              </template>
-            </el-table-column>
-          </template>
-        </small-table>
-      </div>
-    </div>
+ <div class="content">
+   <el-tabs type="border-card" class="tabs panel">
+    <el-tab-pane>
+      <span slot="label"> 机器信息</span>
+      <base-info></base-info>
+    </el-tab-pane>
+    <el-tab-pane>
+      <span slot="label"> 用户信息</span>
+      <user-info></user-info>
+    </el-tab-pane>
+    <el-tab-pane>
+      <span slot="label"> 服务信息</span>
+      <service-info></service-info>
+    </el-tab-pane>
+    <el-tab-pane>
+      <span slot="label"> 网络信息</span>
+      <network-info></network-info>
+    </el-tab-pane>
+    <el-tab-pane>
+      <span slot="label"> 软件包信息</span>
+      <rpm-info></rpm-info>
+    </el-tab-pane>
+    <el-tab-pane>
+      <span slot="label"> 防火墙信息</span>
+      <firewall-info></firewall-info>
+    </el-tab-pane>
+  </el-tabs>
  </div>
 </template>
 <script>
-import { getCpu, getOS, getMemory, getUser, getAllUser, 
-        getserviceList, getSyskernel, getDisk, serviceStart, 
-        serviceStop, changeSyskernel } from '@/request/cluster';
-import SmallTable from "@/components/SmallTable";
+import BaseInfo from './base.vue'
+import UserInfo from './user.vue'
+import ServiceInfo from './service.vue'
+import NetworkInfo from './network.vue'
+import RpmInfo from './rpm.vue'
+import FirewallInfo from '../../Firewall/Firewall.vue'
 export default {
-   /* 某一台机器的详情，左右分布
-      左：上 描述列表，下 饼图
-      右：上 用户表，中 service,表 下 内核表
-   */
+  name: "Detail",
   components: {
-    SmallTable,
-  },
-  props: {
-    ip: {
-      type: String,
-      default: '0.0.0.0'
-    } 
+    BaseInfo,
+    UserInfo,
+    ServiceInfo,
+    NetworkInfo,
+    RpmInfo,
+    FirewallInfo,
   },
   data() {
     return {
-      userName: '',
-      tHight: 200,
-      params: {},
-      basic: {
-        macPlatform: '',
-        mackernel: '',
-        macCPU: '',
-        macMEM: ''
-      },
-      userData: [],
-      serviceData: [],
-      kernelData: [],
-      diskData: [],
     }
-  },
-  mounted() {
-    this.userName = this.$store.getters.userName;
-    let obj = this.params = {uuid:this.$route.params.detail};
-     getOS(obj).then((res) => {
-      let result = res.data.data.os_info;
-      this.basic.macPlatform = result.Platform;
-      this.basic.mackernel = result.KernelArch;
-    })
-    
-    getCpu(obj).then((res) => {
-      this.basic.macCPU = res.data.data.CPU_info.CpuNum + '核';
-    })
-    getMemory(obj).then((res) => {
-      let memTotal = 0;
-      memTotal = res.data.data.memory_info.MemTotal / 1024 / 1024;
-      this.basic.macMEM = memTotal.toFixed(2) + 'G';
-    })
-    getAllUser(obj).then((res) => {
-      this.userData = res.data.data.user_all;
-    })
-    getserviceList(obj).then((res) => {
-      this.serviceData = res.data.data.service_list;
-    })
-    getSyskernel(obj).then((res) => {
-      this.kernelData = res.data.data.sysctl_info;
-    })
-    getDisk(obj).then((res) => {
-      let disk = [];
-      disk = res.data.data.disk_use;
-      disk.filter((item) => {
-        return item.usedPercent > 0;
-      }).forEach(item => {
-        this.diskData.push({value: item.usedPercent.toFixed(2),name: item.device})
-      });;
-      this.diskEchart(this.diskData);
-    })
-  },
-  methods: {
-    diskEchart(disks) {
-      let diskChart = this.$echarts.init(document.getElementById('diskChar'))
-      let option = {
-        title: {					         	
-                text: '磁盘信息',                
-                textStyle:{					//---主标题内容样式	
-                	color:'#000'
-                },
-                x: 'center',
-                y: '16%',
-        },
-        series: [{
-                    name: '磁盘信息',
-                    type: 'pie',
-                    radius: '55%',
-                    data: disks
-                  }]};
-      diskChart.setOption(option);
-    },
-    handleStart(index,row) {
-      serviceStart({...this.params,userName:this.userName}).then(res => {
-        if(res.data.code === 200) {
-          this.serviceData[index].Active = 'active';
-          this.$message.success(res.data.msg);
-        } else {
-           this.$message.error(res.data.msg);
-        }
-      })
-    },
-    handleStop(index,row) {
-      serviceStop({...this.params,userName:this.userName}).then(res => {
-        if(res.data.code === 200) {
-          this.serviceData[index].Active = 'inactive';
-          this.$message.success(res.data.msg);
-        } else {
-           this.$message.error(res.data.msg);
-        }
-      })
-    },
-    handleChange(row) {
-      this.$prompt('输入内核数量', '修改内核', {
-       confirmButtonText: '确定',
-       cancelButtonText: '取消',
-       }).then(({value}) => {
-         let name = Object.keys(row)[0];
-         let params = {
-           args:name + '=' + value, 
-           uuid: this.$route.params.uuid, 
-           userName: this.userName
-          }
-         changeSyskernel(params).then(res => {
-           if(res.data.code === 200) {
-            this.kernelData[index] = {name : value};
-            this.$message.success(res.data.msg);
-           } else {
-            this.$message.error(res.data.msg);
-           }
-         })
-       }) 
-      
-    }
-
-
-  },
-
-
+  }
 }
 </script>
 <style scoped lang="scss">
-.chartContent {
+.content {
   width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  h4 {
-    margin: 10px;
-    width: 100%;
-    text-align: center;
-  }
-  .left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    .basic {
-      margin-bottom: 20px;
-      width: 90%;
-    }
-  }
-  .right {
-    flex: 2;  
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    div {
-      width: 100%;
-    };
+  height: 96%;
+  .tabs {
+    width: 98%;
+    height: 100%;
+    margin: 0 auto;
   }
 }
-
 </style>
diff --git a/vue/views/Cluster/detail/index1.vue b/vue/views/Cluster/detail/index1.vue
new file mode 100644
index 00000000..ea975d23
--- /dev/null
+++ b/vue/views/Cluster/detail/index1.vue
@@ -0,0 +1,292 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-02-25 16:33:46
+  LastEditTime: 2022-04-07 13:24:36
+  Description: provide agent log manager of pilotgo
+ -->
+<template>
+ <div class="chartContent">
+    <div class="left">
+      <h4>基本信息</h4>
+      <div class="basic">
+        <el-descriptions :column="2" size="medium" border>
+          <el-descriptions-item label="平台">{{ basic.macPlatform }}</el-descriptions-item>
+          <el-descriptions-item label="架构">{{ basic.mackernel }}</el-descriptions-item>
+          <el-descriptions-item label="cpu">{{ basic.macCPU }}</el-descriptions-item>
+          <el-descriptions-item label="内存" :span="2">{{basic.macMEM}}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div id="diskChar" :style="{width:'90%',height:'90%'}"></div>
+    </div>
+    <div class="right">
+      <div class="user">
+        <h4>用户信息</h4>
+        <small-table
+          ref="userTab"
+          :data="userData"
+          :height="tHight"
+        >
+          <template v-slot:content>
+            <el-table-column
+              prop="Username"
+              label="用户">
+            </el-table-column>
+            <!-- <el-table-column
+              prop="currUser"
+              label="当前用户">
+            </el-table-column> -->
+            <el-table-column
+              prop="Description"
+              label="备注">
+            </el-table-column>
+          </template>
+        </small-table>
+      </div>
+      <div class="service">
+        <h4>服务信息</h4>
+        <small-table
+          ref="userTab"
+          :data="serviceData"
+          :height="tHight"
+        >
+          <template v-slot:content>
+            <el-table-column
+              prop="Name"
+              label="名称">
+            </el-table-column>
+            <el-table-column
+              prop="Active"
+              label="状态">
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button v-if="scope.row.Active == 'inactive'" size="mini" type="primary" plain 
+                  @click="handleStart(scope.$index,scope.row)"> 
+                  启动 </el-button>
+                  <el-button v-if="scope.row.Active == 'active'" size="mini" type="primary" plain 
+                  @click="handleStop()"> 
+                  关闭 </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </small-table>
+      </div>
+      <div class="kernel">
+        <h4>内核信息</h4>
+        <small-table
+          ref="userTab"
+          :data="kernelData"
+          :height="tHight"
+        >
+          <template v-slot:content>
+            <el-table-column
+              label="内核">
+              <template slot-scope="scope">
+                {{ Object.keys(scope.row)[0] }}  
+              </template> 
+            </el-table-column>
+            <el-table-column
+              label="个数">
+              <template slot-scope="scope">
+                {{ Object.values(scope.row)[0] }}  
+              </template> 
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button size="mini" type="primary" plain 
+                  @click="handleChange(scope.row)"> 
+                  编辑 </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </small-table>
+      </div>
+    </div>
+ </div>
+</template>
+<script>
+import { getCpu, getOS, getMemory, getUser, getAllUser, 
+        getserviceList, getSyskernel, getDisk, serviceStart, 
+        serviceStop, changeSyskernel } from '@/request/cluster';
+import SmallTable from "@/components/SmallTable";
+export default {
+   /* 某一台机器的详情，左右分布
+      左：上 描述列表，下 饼图
+      右：上 用户表，中 service,表 下 内核表
+   */
+  components: {
+    SmallTable,
+  },
+  props: {
+    ip: {
+      type: String,
+      default: '0.0.0.0'
+    } 
+  },
+  data() {
+    return {
+      userName: '',
+      tHight: 200,
+      params: {},
+      basic: {
+        macPlatform: '',
+        mackernel: '',
+        macCPU: '',
+        macMEM: ''
+      },
+      userData: [],
+      serviceData: [],
+      kernelData: [],
+      diskData: [],
+    }
+  },
+  mounted() {
+    this.userName = this.$store.getters.userName;
+    let obj = this.params = {uuid:this.$route.params.detail};
+     getOS(obj).then((res) => {
+      let result = res.data.data.os_info;
+      this.basic.macPlatform = result.Platform;
+      this.basic.mackernel = result.KernelArch;
+    })
+    
+    getCpu(obj).then((res) => {
+      this.basic.macCPU = res.data.data.CPU_info.CpuNum + '核';
+    })
+    getMemory(obj).then((res) => {
+      let memTotal = 0;
+      memTotal = res.data.data.memory_info.MemTotal / 1024 / 1024;
+      this.basic.macMEM = memTotal.toFixed(2) + 'G';
+    })
+    getAllUser(obj).then((res) => {
+      this.userData = res.data.data.user_all;
+    })
+    getserviceList(obj).then((res) => {
+      this.serviceData = res.data.data.service_list;
+    })
+    getSyskernel(obj).then((res) => {
+      this.kernelData = res.data.data.sysctl_info;
+    })
+    getDisk(obj).then((res) => {
+      let disk = [];
+      disk = res.data.data.disk_use;
+      disk.filter((item) => {
+        return item.usedPercent > 0;
+      }).forEach(item => {
+        this.diskData.push({value: item.usedPercent.toFixed(2),name: item.device})
+      });;
+      this.diskEchart(this.diskData);
+    })
+  },
+  methods: {
+    diskEchart(disks) {
+      let diskChart = this.$echarts.init(document.getElementById('diskChar'))
+      let option = {
+        title: {					         	
+                text: '磁盘信息',                
+                textStyle:{					//---主标题内容样式	
+                	color:'#000'
+                },
+                x: 'center',
+                y: '16%',
+        },
+        series: [{
+                    name: '磁盘信息',
+                    type: 'pie',
+                    radius: '55%',
+                    data: disks
+                  }]};
+      diskChart.setOption(option);
+    },
+    handleStart(index,row) {
+      serviceStart({...this.params,userName:this.userName}).then(res => {
+        if(res.data.code === 200) {
+          this.serviceData[index].Active = 'active';
+          this.$message.success(res.data.msg);
+        } else {
+           this.$message.error(res.data.msg);
+        }
+      })
+    },
+    handleStop(index,row) {
+      serviceStop({...this.params,userName:this.userName}).then(res => {
+        if(res.data.code === 200) {
+          this.serviceData[index].Active = 'inactive';
+          this.$message.success(res.data.msg);
+        } else {
+           this.$message.error(res.data.msg);
+        }
+      })
+    },
+    handleChange(row) {
+      this.$prompt('输入内核数量', '修改内核', {
+       confirmButtonText: '确定',
+       cancelButtonText: '取消',
+       }).then(({value}) => {
+         let name = Object.keys(row)[0];
+         let params = {
+           args:name + '=' + value, 
+           uuid: this.$route.params.uuid, 
+           userName: this.userName
+          }
+         changeSyskernel(params).then(res => {
+           if(res.data.code === 200) {
+            this.kernelData[index] = {name : value};
+            this.$message.success(res.data.msg);
+           } else {
+            this.$message.error(res.data.msg);
+           }
+         })
+       }) 
+      
+    }
+
+
+  },
+
+
+}
+</script>
+<style scoped lang="scss">
+.chartContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  h4 {
+    margin: 10px;
+    width: 100%;
+    text-align: center;
+  }
+  .left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .basic {
+      margin-bottom: 20px;
+      width: 90%;
+    }
+  }
+  .right {
+    flex: 2;  
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    div {
+      width: 100%;
+    };
+  }
+}
+
+</style>
diff --git a/vue/views/Cluster/detail/network.vue b/vue/views/Cluster/detail/network.vue
new file mode 100644
index 00000000..580bd7ee
--- /dev/null
+++ b/vue/views/Cluster/detail/network.vue
@@ -0,0 +1,45 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-04-11 13:07:46
+  LastEditTime: 2022-04-11 16:39:14
+ -->
+<template>
+ <div>
+   haskd
+ </div>
+</template>
+<script>
+import { getNetwork, getNetNic, getNetTcp, getNetUdp } from '@/request/cluster';
+export default {
+  name: "NetworkInfo",
+  data() {
+    return {
+      netData: [],
+    }
+  },
+  mounted() {
+    getNetwork({uuid:this.$route.params.detail}).then(res => {
+      this.netData = res.data.data.net_io;
+    })
+    getNetNic({uuid:this.$route.params.detail}).then(res =>{
+      
+    })
+    getNetTcp({uuid:this.$route.params.detail}).then(res =>{
+      
+    })
+    getNetUdp({uuid:this.$route.params.detail}).then(res =>{
+      
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>
\ No newline at end of file
diff --git a/vue/views/Cluster/detail/rpm.vue b/vue/views/Cluster/detail/rpm.vue
new file mode 100644
index 00000000..e23fcc14
--- /dev/null
+++ b/vue/views/Cluster/detail/rpm.vue
@@ -0,0 +1,29 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-04-11 13:09:12
+  LastEditTime: 2022-04-11 16:22:14
+ -->
+<template>
+ <div>
+   haskd
+ </div>
+</template>
+<script>
+export default {
+  name: "RpmInfo",
+  data() {
+    return {
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>
\ No newline at end of file
diff --git a/vue/views/Cluster/detail/service.vue b/vue/views/Cluster/detail/service.vue
new file mode 100644
index 00000000..643419a7
--- /dev/null
+++ b/vue/views/Cluster/detail/service.vue
@@ -0,0 +1,260 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-04-11 12:47:34
+  LastEditTime: 2022-04-11 17:44:33
+ -->
+<template>
+ <div class="content" style="width:96%; padding-top:20px; margin: 0 auto">
+   <el-descriptions :column="3" size="medium" border>
+     <el-descriptions-item labelStyle="width:20%;background:rgb(109, 123, 172);color: #FFF;font-size:15px; font-weight:bold;" contentStyle="background:rgb(109, 123, 172);color: #FFF;font-weight:bold; font-size:15px;" label="服务名">状态</el-descriptions-item>
+     <el-descriptions-item labelStyle="width:20%;background:rgb(109, 123, 172);color: #FFF;font-size:15px; font-weight:bold;" contentStyle="background:rgb(109, 123, 172);color: #FFF;font-weight:bold; font-size:15px;" label="服务名">状态</el-descriptions-item>
+     <el-descriptions-item labelStyle="width:20%;background:rgb(109, 123, 172);color: #FFF;font-size:15px; font-weight:bold;" contentStyle="background:rgb(109, 123, 172);color: #FFF;font-weight:bold; font-size:15px;" label="服务名">状态</el-descriptions-item>
+    <el-descriptions-item 
+      v-for="item in serviceData" 
+      :key="item.$index" 
+      :label="item.Name">  
+      <span class="statusBtn">{{ item.Active === 'active'? '正在运行': '已停止' }}</span><br/><br/>
+        <el-button class="smallBtn" size="mini" plain type="primary" @click="handleStart(item.Name)">启动</el-button>
+        <el-button class="smallBtn" size="mini" plain type="primary" @click="handleStop(item.Name)">停止</el-button>
+        <el-button class="smallBtn" size="mini" plain type="primary" @click="handleRestart(item.Name)">重启</el-button>
+    </el-descriptions-item>
+   </el-descriptions>
+ </div>
+</template>
+<script>
+import { getserviceList,serviceStart, serviceStop, serviceRestart } from '@/request/cluster';
+export default {
+  name: "ServiceInfo",
+  data() {
+    return {
+      serviceData: [
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-block-8:3.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-cdrom.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2did-ata\\x2dVMware_Virtual_SATA_CDRW_Drive_01000000000000000001.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2did-dm\\x2dname\\x2dklas\\x2droot.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2did-dm\\x2dname\\x2dklas\\x2dswap.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2did-dm\\x2duuid\\x2dLVM\\x2d7xxzeEXx4pYZGobYEfVfDLo94GpvRW1Do9O9Aopt7HBqBeX36lYS8c5gdWYNnTEf.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2did-dm\\x2duuid\\x2dLVM\\x2d7xxzeEXx4pYZGobYEfVfDLo94GpvRW1DQxrJ3cZcwYaWM21OZeaAzAcdEp380BQY.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2did-lvm\\x2dpv\\x2duuid\\x2d0f1bNE\\x2dtMeE\\x2d0dId\\x2dGqIC\\x2d2iw1\\x2duudL\\x2drsnHGQ.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2did-lvm\\x2dpv\\x2duuid\\x2dsmpxkP\\x2dObgV\\x2dwEo1\\x2dUcj8\\x2d5JPC\\x2dzL2y\\x2dNv81Ul.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpartuuid-c2e6d7a8\\x2d01.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpartuuid-c2e6d7a8\\x2d02.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpartuuid-c2e6d7a8\\x2d03.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpath-pci\\x2d0000:00:10.0\\x2dscsi\\x2d0:0:0:0.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpath-pci\\x2d0000:00:10.0\\x2dscsi\\x2d0:0:0:0\\x2dpart1.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpath-pci\\x2d0000:00:10.0\\x2dscsi\\x2d0:0:0:0\\x2dpart2.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpath-pci\\x2d0000:00:10.0\\x2dscsi\\x2d0:0:0:0\\x2dpart3.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2dpath-pci\\x2d0000:02:05.0\\x2data\\x2d2.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2duuid-020f054b\\x2d172b\\x2d49ac\\x2da4a9\\x2d86546a953365.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2duuid-3f250f7e\\x2d202b\\x2d4b1a\\x2da40b\\x2d32772238f5ac.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-disk-by\\x2duuid-d5246dd2\\x2dc66f\\x2d4109\\x2da968\\x2d805b44e7ca72.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-dm\\x2d0.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-dm\\x2d1.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-klas-root.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-klas-swap.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-mapper-klas\\x2droot.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-mapper-klas\\x2dswap.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-rfkill.device",
+        "SUB": "plugged"
+      },
+      {
+        "Active": "active",
+        "LOAD": "loaded",
+        "Name": "dev-sda.device",
+        "SUB": "plugged"
+      }],
+      userName: ''
+    }
+  },
+  mounted() {
+    this.userName = this.$store.getters.userName;
+    getserviceList({uuid:this.$route.params.detail}).then((res) => {
+      this.serviceData = res.data.data.service_list;
+    })
+  },
+  methods: {
+    handleStart(sericeName) {
+      serviceStart({uuid:this.$route.params.detail, userName:this.userName, service: sericeName}).then(res => {
+        if(res.data.code === 200) {
+          this.$message.success(res.data.msg);
+        } else {
+           this.$message.error(res.data.msg);
+        }
+      })
+    },
+    handleStop(sericeName) {
+      serviceStop({uuid:this.$route.params.detail,userName:this.userName, service: sericeName}).then(res => {
+        if(res.data.code === 200) {
+          this.$message.success(res.data.msg);
+        } else {
+           this.$message.error(res.data.msg);
+        }
+      })
+    },
+    handleRestart(sericeName) {
+      serviceRestart({uuid:this.$route.params.detail,userName:this.userName, service: sericeName}).then(res => {
+        if(res.data.code === 200) {
+          this.$message.success(res.data.msg);
+        } else {
+           this.$message.error(res.data.msg);
+        }
+      })
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.statusBtn {
+  display: inline-block;
+  width:70px; 
+  font-size: 12px;
+  border-radius:11px; 
+  background: rgb(109, 123, 172);
+  color:#fff;
+}
+.smallBtn {
+  padding: 6px;
+  margin-left: 1%;
+}
+</style>
diff --git a/vue/views/Cluster/detail/user.vue b/vue/views/Cluster/detail/user.vue
new file mode 100644
index 00000000..983a5e93
--- /dev/null
+++ b/vue/views/Cluster/detail/user.vue
@@ -0,0 +1,167 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-04-11 12:47:07
+  LastEditTime: 2022-04-11 17:41:30
+ -->
+<template>
+ <div class="content" style="width:96%; padding-top:20px; margin: 0 auto">
+   <el-descriptions :column="4" size="medium" border>
+     <el-descriptions-item labelStyle="background:rgb(109, 123, 172);color: #FFF;font-size:15px; font-weight:bold;" contentStyle="background:rgb(109, 123, 172);color: #FFF;font-weight:bold; font-size:15px" label="用户名">描述</el-descriptions-item>
+     <el-descriptions-item labelStyle="background:rgb(109, 123, 172);color: #FFF;font-size:15px; font-weight:bold;" contentStyle="background:rgb(109, 123, 172);color: #FFF;font-weight:bold; font-size:15px" label="用户名">描述</el-descriptions-item>
+     <el-descriptions-item labelStyle="background:rgb(109, 123, 172);color: #FFF;font-size:15px; font-weight:bold;" contentStyle="background:rgb(109, 123, 172);color: #FFF;font-weight:bold; font-size:15px" label="用户名">描述</el-descriptions-item>
+     <el-descriptions-item labelStyle="background:rgb(109, 123, 172);color: #FFF;font-size:15px; font-weight:bold;" contentStyle="background:rgb(109, 123, 172);color: #FFF;font-weight:bold; font-size:15px" label="用户名">描述</el-descriptions-item>
+    <el-descriptions-item 
+      v-for="item in userData" 
+      :key="item.UserId" 
+      :label="item.Username">
+      {{ item.Description }}
+    </el-descriptions-item>
+   </el-descriptions>
+ </div>
+</template>
+<script>
+import {  getUser, getAllUser } from '@/request/cluster';
+export default {
+  name: "UserInfo",
+  data() {
+    return {
+      userData: [
+      {
+        "Description": "root",
+        "GroupId": "0",
+        "HomeDir": "/root",
+        "ShellType": "/bin/bash",
+        "UserId": "0",
+        "Username": "root"
+      },
+      {
+        "Description": "bin",
+        "GroupId": "1",
+        "HomeDir": "/bin",
+        "ShellType": "/sbin/nologin",
+        "UserId": "1",
+        "Username": "bin"
+      },
+      {
+        "Description": "daemon",
+        "GroupId": "2",
+        "HomeDir": "/sbin",
+        "ShellType": "/sbin/nologin",
+        "UserId": "2",
+        "Username": "daemon"
+      },
+      {
+        "Description": "adm",
+        "GroupId": "4",
+        "HomeDir": "/var/adm",
+        "ShellType": "/sbin/nologin",
+        "UserId": "3",
+        "Username": "adm"
+      },
+      {
+        "Description": "lp",
+        "GroupId": "7",
+        "HomeDir": "/var/spool/lpd",
+        "ShellType": "/sbin/nologin",
+        "UserId": "4",
+        "Username": "lp"
+      },
+      {
+        "Description": "sync",
+        "GroupId": "0",
+        "HomeDir": "/sbin",
+        "ShellType": "/bin/sync",
+        "UserId": "5",
+        "Username": "sync"
+      },
+      {
+        "Description": "shutdown",
+        "GroupId": "0",
+        "HomeDir": "/sbin",
+        "ShellType": "/sbin/shutdown",
+        "UserId": "6",
+        "Username": "shutdown"
+      },
+      {
+        "Description": "halt",
+        "GroupId": "0",
+        "HomeDir": "/sbin",
+        "ShellType": "/sbin/halt",
+        "UserId": "7",
+        "Username": "halt"
+      },
+      {
+        "Description": "mail",
+        "GroupId": "12",
+        "HomeDir": "/var/spool/mail",
+        "ShellType": "/sbin/nologin",
+        "UserId": "8",
+        "Username": "mail"
+      },
+      {
+        "Description": "operator",
+        "GroupId": "0",
+        "HomeDir": "/root",
+        "ShellType": "/sbin/nologin",
+        "UserId": "11",
+        "Username": "operator"
+      },
+      {
+        "Description": "games",
+        "GroupId": "100",
+        "HomeDir": "/usr/games",
+        "ShellType": "/sbin/nologin",
+        "UserId": "12",
+        "Username": "games"
+      },
+      {
+        "Description": "FTP User",
+        "GroupId": "50",
+        "HomeDir": "/var/ftp",
+        "ShellType": "/sbin/nologin",
+        "UserId": "14",
+        "Username": "ftp"
+      },
+      {
+        "Description": "Kernel Overflow User",
+        "GroupId": "65534",
+        "HomeDir": "/",
+        "ShellType": "/sbin/nologin",
+        "UserId": "65534",
+        "Username": "nobody"
+      },
+      {
+        "Description": "Privilege-separated SSH",
+        "GroupId": "74",
+        "HomeDir": "/var/empty/sshd",
+        "ShellType": "/sbin/nologin",
+        "UserId": "74",
+        "Username": "sshd"
+      },
+      {
+        "Description": "Unbound DNS resolver",
+        "GroupId": "994",
+        "HomeDir": "/etc/unbound",
+        "ShellType": "/sbin/nologin",
+        "UserId": "999",
+        "Username": "unbound"
+      }],
+    }
+  },
+  mounted() {
+    getAllUser({uuid:this.$route.params.detail}).then((res) => {
+      this.userData = res.data.data.user_all;
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>
diff --git a/vue/views/Home/Home.vue b/vue/views/Home/Home.vue
index 06204502..a8ce2dee 100644
--- a/vue/views/Home/Home.vue
+++ b/vue/views/Home/Home.vue
@@ -9,7 +9,7 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-02-25 16:33:46
-  LastEditTime: 2022-04-07 10:26:51
+  LastEditTime: 2022-04-11 14:41:16
   Description: provide agent log manager of pilotgo
  -->
 <template>
@@ -138,6 +138,7 @@ export default {
   position: relative;
   height: calc(100%);
   width: calc(100%);
+  overflow: hidden;
   .el-header {
     padding-left: 0;
     border-radius: 6px;
diff --git a/vue/views/Log/Log.vue b/vue/views/Log/Log.vue
index a9454f92..0d6901b5 100644
--- a/vue/views/Log/Log.vue
+++ b/vue/views/Log/Log.vue
@@ -9,11 +9,11 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-02-25 16:33:45
-  LastEditTime: 2022-03-25 11:43:11
+  LastEditTime: 2022-04-08 16:43:02
   Description: provide agent log manager of pilotgo
  -->
 <template>
- <div style="width: 100%">
+ <div style="width: 100%;height:100%">
    <ky-table
         class="cluster-table"
         ref="table"
@@ -24,6 +24,7 @@
           <div>日志列表</div>
         </template>
         <template v-slot:table_action>
+          <el-button @click="handleConsole">console</el-button>
           <el-popconfirm 
           title="确定删除此日志？"
           cancel-button-type="default"
@@ -46,8 +47,7 @@
                 text-inside
                 :stroke-width="strokeW"
                 :format="format"
-                :percentage="(scope.row.status.split(',')[2] === '1.00' || scope.row.status.split(',')[2] === '0.00') ? 100 : 
-                    scope.row.status.split(',')[2] * 100 " 
+                :percentage="(scope.row.status.split(',')[2] === '1.00' || scope.row.status.split(',')[2] === '0.00') ? 100 : scope.row.status.split(',')[2] * 100 " 
                 :status="scope.row.status.split(',')[2] === '0.00' ? 'exception' : 
                     scope.row.status.split(',')[2] === '1.00' ? 'success' : 'warning' ">
               </el-progress>
@@ -78,11 +78,13 @@
         width="560px"
       >
         <log-detail v-if="type === 'detail'" :log="log" @click="handleClose"></log-detail>
+        <ky-terminal v-if="type === 'console'" @click="handleClose"></ky-terminal>
       </el-dialog>
  </div>
 </template>
 <script>
 import kyTable from "@/components/KyTable";
+import KyTerminal from "@/components/KyTerminal";
 import LogDetail from "./form/detail.vue"
 import { getLogs, deleteLog } from "@/request/log";
 export default {
@@ -90,6 +92,7 @@ export default {
   components: {
     kyTable,
     LogDetail,
+    KyTerminal,
   },
   data() {
     return {
@@ -126,6 +129,11 @@ export default {
       this.type = "detail";
       this.log = row;
     },
+    handleConsole() {
+      this.display = true;
+      this.title = "控制台";
+      this.type = "console";
+    },
     handleDelete() {
       deleteLog({ids: this.$refs.table.selectRow.ids}).then(res => {
         if(res.status === 200) {
@@ -162,9 +170,5 @@ export default {
 }
 </script>
 <style scoped>
-.cluster-table {
-  width: 100%;
-  height: 96%;
-  overflow: auto;
-}
+
 </style>
diff --git a/vue/views/Overview/Overview.vue b/vue/views/Overview/Overview.vue
index 203e2642..9d18f5b2 100644
--- a/vue/views/Overview/Overview.vue
+++ b/vue/views/Overview/Overview.vue
@@ -9,7 +9,7 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-03-16 11:17:06
-  LastEditTime: 2022-03-24 17:58:49
+  LastEditTime: 2022-04-08 11:30:01
  -->
 <template>
  <div class="content flex">
@@ -138,7 +138,7 @@ export default {
       return `离线:${percentage}`;
     },
     macFree(percentage) {
-      return `空闲:${percentage}`;
+      return `未分配:${percentage}`;
     },
   },
   filters: {
diff --git a/vue/views/Overview/charts/dept.vue b/vue/views/Overview/charts/dept.vue
index caf1682e..e6a6b70f 100644
--- a/vue/views/Overview/charts/dept.vue
+++ b/vue/views/Overview/charts/dept.vue
@@ -9,7 +9,7 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-03-22 18:26:25
-  LastEditTime: 2022-03-24 17:33:56
+  LastEditTime: 2022-04-08 11:30:49
  -->
 <template>
   <div id="dept" style="width:100%;height:100%">
@@ -43,7 +43,7 @@ export default {
         },
         legend: {
           show: true,
-          data: ["在线","离线","空闲"]
+          data: ["在线","离线","未分配"]
         },
         xAxis: {
           type: 'category',
@@ -85,7 +85,7 @@ export default {
             },
           },
           {
-            name: '空闲',
+            name: '未分配',
             data: this.free,
             type: 'bar',
             itemStyle: {
diff --git a/vue/views/RoleManager/RoleMan.vue b/vue/views/RoleManager/RoleMan.vue
index ce0fc340..a462e8aa 100644
--- a/vue/views/RoleManager/RoleMan.vue
+++ b/vue/views/RoleManager/RoleMan.vue
@@ -9,12 +9,11 @@
   See the Mulan PSL v2 for more details.
   Author: zhaozhenfang
   Date: 2022-01-19 17:30:12
-  LastEditTime: 2022-04-06 16:26:39
+  LastEditTime: 2022-04-08 16:40:28
  -->
 <template>
-  <div>
+  <div style="width: 100%; height: 100%" class="panel">
     <ky-table
-      class="panel"
       :getData="getRoles"
       :searchData="searchData"
       ref="table"
@@ -26,24 +25,24 @@
         <el-button  @click="handleCreate"> 添加 </el-button>
       </template>
       <template v-slot:table>
-        <el-table-column prop="id" label="编号">
+        <el-table-column prop="id" label="编号" width="120">
         </el-table-column>
         <el-table-column  prop="role" label="角色名">
         </el-table-column>
-        <el-table-column  prop="username" label="平台自带">
+        <el-table-column  prop="username" label="平台自带"  width="120">
           <template slot-scope="scope">
             {{ [0,1,2].includes(scope.row.type)  ? "是" : "否"}}
           </template>
         </el-table-column>
         <el-table-column  prop="description" label="描述">
         </el-table-column>
-        <el-table-column label="权限">
+        <el-table-column label="权限" width="120">
           <template slot-scope="scope">
             <el-button v-if="[3,1,2].includes(scope.row.id)" class="editBtn"  type="primary" plain size="mini" @click="handleOpen(scope.row)">查看</el-button>
             <el-button v-if="![3,1,2].includes(scope.row.id)" class="editBtn"  type="primary" plain size="mini" @click="handleChange(scope.row)">变更</el-button>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="120">
+        <el-table-column label="操作" width="200">
           <template slot-scope="scope">
             <el-button :disabled="[3,1,2].includes(scope.row.id)" class="editBtn"  type="primary" plain size="mini" @click="handleEdit(scope.row)">编辑</el-button>
             <el-popconfirm 
@@ -165,9 +164,6 @@ export default {
 </script>
 
 <style scoped>
-.search-form{
-  margin-bottom: 12px;
-}
 .el-table .warning-row {
   background: oldlace;
 }
@@ -175,7 +171,4 @@ export default {
 .el-table .success-row {
   background: #f0f9eb;
 }
-.editBtn {
-  padding: 10px;
-}
 </style>
diff --git a/vue/views/UserInfo.vue b/vue/views/UserInfo.vue
index b6bf2945..a604a3bc 100644
--- a/vue/views/UserInfo.vue
+++ b/vue/views/UserInfo.vue
@@ -1,3 +1,16 @@
+<!-- 
+  Copyright (c) KylinSoft Co., Ltd.2021-2022. All rights reserved.
+  PilotGo is licensed under the Mulan PSL v2.
+  You can use this software accodring to the terms and conditions of the Mulan PSL v2.
+  You may obtain a copy of Mulan PSL v2 at:
+      http://license.coscl.org.cn/MulanPSL2
+  THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, 
+  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  See the Mulan PSL v2 for more details.
+  Author: zhaozhenfang
+  Date: 2022-01-17 09:41:31
+  LastEditTime: 2022-04-11 13:08:16
+ -->
 <template>
  <div>
    haskd
@@ -12,5 +25,5 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 </style>
diff --git a/vue/views/UserManager/UserMan.vue b/vue/views/UserManager/UserMan.vue
index d0691641..8312a7f3 100644
--- a/vue/views/UserManager/UserMan.vue
+++ b/vue/views/UserManager/UserMan.vue
@@ -1,10 +1,9 @@
 <template>
-  <div v-loading="loading" style="height:100%">
+  <div v-loading="loading" class="panel" style="height:100%">
     <ky-table
       :getData="getUsers"
       ref="table"
       id="exportTab"
-      class="panel"
     >
       <template v-slot:table_search>
         <el-input placeholder="请输入邮箱名进行搜索..." prefix-icon="el-icon-search"
@@ -132,7 +131,7 @@ export default {
     searchUser() {
       searchUser({'email':this.emailInput}).then((res) => {
         if(res.data.code === 200) {
-          this.$refs.table.handleLoadSearch(res.data.data.data);
+          this.$refs.table.handleLoadSearch(res.data.data);
         }
       })
     },
@@ -209,7 +208,7 @@ export default {
 
 <style scoped>
 .search-form{
-  margin-bottom: 12px;
+  /* margin-bottom: 12px; */
 }
 .el-table .warning-row {
   background: oldlace;
@@ -218,7 +217,4 @@ export default {
 .el-table .success-row {
   background: #f0f9eb;
 }
-.editBtn {
-  padding: 10px;
-}
 </style>
-- 
Gitee