From f763fed00b47ef6b375a9e3da50a5954d3688263 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Sat, 12 Feb 2022 16:14:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E6=9C=BA=E5=99=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A8=A1=E5=9D=97=EF=BC=8C=E9=83=A8=E9=97=A8=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E6=A0=91=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/components/KyTable/index.vue      |  12 +-
 vue/components/KyTree/index.vue       | 195 +++++++++++++++++
 vue/main.js                           |   1 -
 vue/request/batch.js                  |  40 ++++
 vue/request/cluster.js                |  61 +++++-
 vue/router/index.js                   |   2 +-
 vue/views/Cluster/Cluster.vue         | 288 ++++++--------------------
 vue/views/Cluster/detail/index.vue    | 118 ++++++++++-
 vue/views/Cluster/form/batchForm.vue  |  68 ++++++
 vue/views/Cluster/form/updateForm.vue |  56 +++--
 vue/views/Firewall/Firewall.vue       |   3 +
 11 files changed, 580 insertions(+), 264 deletions(-)
 create mode 100644 vue/components/KyTree/index.vue
 create mode 100644 vue/request/batch.js
 create mode 100644 vue/views/Cluster/form/batchForm.vue

diff --git a/vue/components/KyTable/index.vue b/vue/components/KyTable/index.vue
index f779605d..49a6879c 100644
--- a/vue/components/KyTable/index.vue
+++ b/vue/components/KyTable/index.vue
@@ -42,6 +42,12 @@ export default {
     getData: {
       type: Function,
     },
+    searchData: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
   },
   data() {
     return {
@@ -66,7 +72,7 @@ export default {
   methods: {
     loadData(data) {
       this.loading = true;
-      this.getData({ ...data }).then((response) => {
+      this.getData({ ...data, ...this.searchData }).then((response) => {
         const res = response.data;
         if (res.code === 200) {
           this.total = res.total;
@@ -87,10 +93,10 @@ export default {
     },
     handleSelectionChange(selection, row) {
         // 1.判断是否已经存在已选中行
-        const index = this.selectRow.ids.indexOf(row.ID);
+        const index = this.selectRow.ids.indexOf(row.ID || row.machineuuid);
         // 2.若是不在就放入选中数组中，在就删掉
         if (index < 0) {
-          this.selectRow.ids.push(row.ID);
+          this.selectRow.ids.push(row.ID || row.machineuuid);
           this.selectRow.rows.push(row);
         } else {
           this.selectRow.ids.splice(index, 1);
diff --git a/vue/components/KyTree/index.vue b/vue/components/KyTree/index.vue
new file mode 100644
index 00000000..b7c88a79
--- /dev/null
+++ b/vue/components/KyTree/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="ky-tree">
+    <div class="content">
+      <el-tree
+       class="treeitems"
+       empty-text="暂无数据"
+       node-key="id"
+       :props="defaultProps"
+       :load="loadNode"
+       lazy
+       :render-after-expand="isRender"
+       @node-click="handleNodeClick"
+       ref="multipleTree"
+      >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <em @click.stop="() => append(node,data)" class="el-icon-plus"></em>
+          <em v-if="data.id !== 1" @click.stop="() => remove(node,data)" class="el-icon-delete"></em>
+          <em @click.stop="() => rename(node,data)" class="el-icon-edit"></em>
+        </span>
+      </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+<script>
+import { addDepart, deleteDepart, updateDepart } from "@/request/cluster";
+export default {
+  props: {
+    getData: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      isRender: false,
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        isLeaf: 'isLeaf',
+        id: 'id'
+      },
+    };
+  },
+  methods: {
+    loadNode(node, resolve){
+     if (node.level === 0) {
+       this.loadFirstNode(resolve);
+     }
+     else if(node.level >= 1){
+       this.loadChildrenNode(node,resolve);
+     }
+     else{
+       return resolve([])
+     }
+   },
+    // 加载根
+    async loadFirstNode(resolve) {
+      let res = await this.getData({'DepartID': 1});
+      if(res.status === 200) {
+        let data = res.data.data;
+        let rootNode = [{
+          id: data.id,
+          label: data.label,
+          pid: data.pid
+        }]
+        return resolve(rootNode);
+      } else {
+        this.$message({
+          type: 'error',
+          message: '数据请求失败'
+        });
+      }
+    },
+    // 加载子树
+    async loadChildrenNode(node,resolve) {
+      let deptId = node.key;
+      let res = await this.getData({'DepartID': deptId});
+      if(res.status === 200) {
+        if(node.childNodes.length == 0) {
+          node.isLeaf = true;
+        }
+        let children = res.data.data.children == null ? [] : res.data.data.children
+        return resolve(children);
+      } else {
+        this.$message({
+          type: 'error',
+          message: '数据请求失败'
+        });
+      }
+    },
+    // 追加节点
+    append(node,data) {
+      this.$prompt('输入节点名字', '新建节点', {
+       confirmButtonText: '确定',
+       cancelButtonText: '取消',
+       }).then(({value}) => {
+         addDepart({'PID':data.id,'ParentDepart':data.label,'Depart':value}).then((data)=>{
+           this.$message({
+             type: 'success',
+             message: '新建成功'
+           }); 
+          node.loaded = false;
+          node.expand();
+         })
+         .catch(()=>{
+           this.$message({
+             type: 'info',
+             message: '新建失败'
+           }); 
+         })
+       }).catch(() => {}); 
+    },
+    // 修改节点名
+    rename(node,data) {
+      this.$prompt('输入节点名字', '编辑节点', {
+       confirmButtonText: '确定',
+       cancelButtonText: '取消',
+       }).then(({ value }) => {
+         updateDepart({'DepartID': data.id, 'DepartName': value}).then((data)=>{
+           this.$message({
+             type: 'success',
+             message: '修改成功'
+           }); 
+          node.parent.loaded = false;
+          node.parent.expand();
+         })
+         .catch(()=>{
+           this.$message({
+             type: 'info',
+             message: '修改失败'
+           }); 
+         })
+       }).catch(() => {}); 
+   },
+   // 删除节点
+   remove(node,data) {
+     this.$confirm('确定删除该节点？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteDepart({'DepartID':data.id}).then((data)=>{
+           this.$message({
+             type: 'success',
+             message: '删除成功'
+           }); 
+          node.parent.loaded = false;
+          node.parent.expand();
+         })
+         .catch(()=>{
+           this.$message({
+             type: 'info',
+             message: '删除失败'
+           }); 
+         })
+       }).catch(() => {}); 
+   },
+   //拖拽==>拖拽时判定目标节点能否被放置  draggable属性最后做
+   allowDrop(draggingNode, dropNode, type){
+     //参数：被拖拽节点，要拖拽到的位置
+     //因为根目录是我本地写死的，不能有同级，所以我设置凡是拖拽到的level===1都存放到根节点的下面；
+     if(dropNode.level===1){
+       return type == 'inner';
+     }
+     else {
+       return true;
+     }
+   },
+   //拖拽==>判断节点能否被拖拽
+   allowDrag(draggingNode){
+    //第一级节点不允许拖拽
+     return draggingNode.level !== 1;
+   },
+    handleNodeClick(node,data) {
+      // 获取当前分支与上级分支的数据
+      this.$emit("nodeClick",node);
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.ky-tree {
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/vue/main.js b/vue/main.js
index e97350d5..cbf263d0 100644
--- a/vue/main.js
+++ b/vue/main.js
@@ -7,7 +7,6 @@ import ElementUI from 'element-ui';  //导入element ui
 import 'element-ui/lib/theme-chalk/index.css';
 import * as echarts from 'echarts'; //echarts 5.0 导入方式
 import './permission';
-
 import './styles/index.scss'
 
 
diff --git a/vue/request/batch.js b/vue/request/batch.js
new file mode 100644
index 00000000..075b3281
--- /dev/null
+++ b/vue/request/batch.js
@@ -0,0 +1,40 @@
+import { request } from './request'
+// 创建批次
+export function createBatch(data) {
+  return request({
+    url: '/user/login',
+    method: 'post',
+    data
+  })
+}
+// 获取批次
+export function getBatch() {
+  return request({
+    url: '/user/info',
+    method: 'get'
+  })
+}
+// 删除批次
+export function deleteBatch(data) {
+  return request({
+    url: '/user/searchAll',
+    method: 'post',
+    params: data
+  })
+}
+// 编辑批次
+export function updateBatch(data) {
+  return request({
+    url: '/user/register',
+    method: 'post',
+    data
+  })
+}
+// 批次详情
+export function batchDetail(data) {
+  return request({
+    url: '/batch/detail',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file
diff --git a/vue/request/cluster.js b/vue/request/cluster.js
index b5f0ac11..d6131057 100644
--- a/vue/request/cluster.js
+++ b/vue/request/cluster.js
@@ -1,28 +1,60 @@
 import { request } from './request'
 
 // 请求组织树接口
-
+export function getDeparts(data) {
+  return request({
+    url: 'machinemanager/departinfo',
+    method: 'get',
+    params: data
+  })
+}
+// 点击获取当前子节点接口
+export function getChildNode(data) {
+  return request({
+    url: 'machinemanager/depart',
+    method: 'get',
+    params: data
+  })
+}
 // 添加节点
-
+export function addDepart(data) {
+  return request({
+    url: 'machinemanager/adddepart',
+    method: 'post',
+    params: data
+  })
+}
 // 编辑节点
-
+export function updateDepart(data) {
+  return request({
+    url: 'machinemanager/updatedepart',
+    method: 'get',
+    params: data
+  })
+}
 // 删除节点
-
+export function deleteDepart(data) {
+  return request({
+    url: 'machinemanager/t',
+    method: 'get',
+    params: data
+  })
+}
 // 拖拽节点
 
 // 点击部门刷新列表接口
 export function getClusters(data) {
     return request({
-      url: '/hosts',
+      url: 'machinemanager/machineinfo',
       method: 'get',
-      data
+      params: data
     })
   }
 
 // 添加ip接口
 export function insertIp(data) {
   return request({
-    url: '/hosts',
+    url: '/machinemanager/addmachine',
     method: 'post',
     data
   })
@@ -38,8 +70,17 @@ export function updateIp({ip, ...data}) {
 // 删除ip接口
 export function deleteIp(data) {
   return request({
-    url: '/hosts',
-    method: 'delete',
-    data
+    url: '/machinemanager/deletemachinedata',
+    method: 'post',
+    params: data
+  })
+}
+
+// 根据ip获取机器信息
+export function getDeviceInfo(data) {
+  return request({
+    url: 'machinemanager/deviceinfo',
+    method: 'get',
+    params: data
   })
 }
\ No newline at end of file
diff --git a/vue/router/index.js b/vue/router/index.js
index be38d43a..e973d27c 100644
--- a/vue/router/index.js
+++ b/vue/router/index.js
@@ -44,7 +44,7 @@ export const routes = [
         meta: { title: 'cluster', header_title: "机器管理", panel: "cluster", icon_class: 'el-icon-s-platform' }
       },
       {
-        path: '/cluster/ip',
+        path: ':id',
         name: 'cluter_detail',
         component:  _import('Cluster/detail/index'),
       },
diff --git a/vue/views/Cluster/Cluster.vue b/vue/views/Cluster/Cluster.vue
index 4bfa9217..cfeebf12 100644
--- a/vue/views/Cluster/Cluster.vue
+++ b/vue/views/Cluster/Cluster.vue
@@ -1,42 +1,20 @@
 <template>
   <div class="cluster">
     <div class="dept">
-      <el-tree
-       class="treeitems"
-       :data="data"
-       node-key="id"
-       :props="defaultProps"
-       :load="loadNode"
-       lazy
-       :default-expanded-keys="[0]"
-       @node-click="handleNodeClick"
-       draggable
-       ref="tree"
-     >
-     <span class="custom-tree-node" slot-scope="{ node, data }">
-       <span>{{ node.label }}</span>
-       <span>
-         <em @click="() => append(node,data)" class="el-icon-plus"></em>
-         <em v-if="data.id !== 0" @click="() => remove(node,data)" class="el-icon-delete"></em>
-         <em v-if="data.id !== 0" @click="() => rename(node,data)" class="el-icon-edit"></em>
-       </span>
-     </span>
-    </el-tree>
-
+      <ky-tree :getData="getChildNode" ref="tree" @nodeClick="handleSelectDept"></ky-tree>
     </div>
     <div class="info">
       <div class="cluster-title">
         <span class="cluster-title__text">主机列表</span>
         <div class="cluster-title__operate">
-          <el-button size="mini" @click="handleAddIp"
-            >添加IP</el-button>
-            <el-button size="mini" @click="handleUpdateIp"
-            >编辑IP</el-button>
-          <el-popconfirm
-            title="确定删除所选项目吗？"
-            @confirm="handleDeleteItems"
-          >
-            <el-button size="mini" slot="reference">删除</el-button>
+          <el-button size="mini" @click="handleAddIp"> 注册 </el-button>
+          <el-button size="mini" @click="handleAddBatch"> 创建批次 </el-button>
+          <el-button size="mini" 
+           @click="handleUpdateIp" 
+           :disabled="$refs.table && $refs.table.selectRow.rows.length == 0"
+           > 编辑 </el-button>
+          <el-popconfirm title="确定删除所选项目吗？" @confirm="handleDelete">
+            <el-button size="mini" slot="reference" :disabled="$refs.table && $refs.table.selectRow.rows.length == 0"> 删除 </el-button>
           </el-popconfirm>
         </div>
       </div>
@@ -44,16 +22,14 @@
         class="cluster-table"
         ref="table"
         :getData="getClusters"
+        :searchData="searchData"
       >
         <template v-slot:table>
           <el-table-column label="IP" width="90">
             <template slot-scope="scope">
-              <router-link
-                :to="$route.path + scope.row.id + `?ip=${scope.row.ip}`"
-                @click.native="handleSelectIp(scope.row)"
-              >
+              <a @click.stop="handleSelectIp(scope.row.ip)">
                 {{ scope.row.ip }}
-              </router-link>
+              </a>
             </template>
           </el-table-column>
           <el-table-column prop="system_cpu" label="cpu" width="90"> 
@@ -71,21 +47,10 @@
               <el-button
                 size="mini"
                 @click="handleFireWall(scope.row.ip)">
-                <i class="el-icon-edit-outline"></i>
+                <em class="el-icon-edit-outline"></em>
               </el-button>
             </template>
           </el-table-column>
-          <!-- <el-table-column label="类型" width="150">
-            <template slot-scope="scope">
-              <span v-if="scope.row.machine_type == 0">虚拟机</span>
-              <span v-else>物理机</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="system_version" label="系统版本" width="150">
-          </el-table-column>
-          <el-table-column prop="arch" label="架构" width="150"> </el-table-column>
-          <el-table-column prop="installation_time" label="安装时间">
-          </el-table-column> -->
         </template>
       </ky-table>
     </div>
@@ -93,220 +58,97 @@
     <el-dialog 
       :title="title"
       :before-close="handleClose" 
-      :visible.sync="addIPDialogVisible" 
+      :visible.sync="display" 
       width="560px"
     >
      <add-form v-if="type === 'create'" @click="handleClose"></add-form>
-     <update-form v-if="type === 'update'" @click="handleClose"></update-form>   
+     <update-form v-if="type === 'update'" :ip='ip' @click="handleClose"></update-form>   
+     <batch-form v-if="type === 'batch'" @click="handleClose"></batch-form>   
+     <device-detail v-if="type === 'disk'" :ip='ip'> </device-detail>   
     </el-dialog>
   </div>
 </template>
 
 <script>
 import kyTable from "@/components/KyTable";
+import kyTree from "@/components/KyTree";
 import AddForm from "./form/addForm";
 import UpdateForm from "./form/updateForm";
-import { getClusters, deleteIp } from "@/request/cluster";
+import BatchForm from "./form/batchForm";
+import DeviceDetail from "./detail/index";
+import { getClusters, deleteIp, getChildNode } from "@/request/cluster";
 export default {
   name: "Cluster",
   components: {
     AddForm,
     UpdateForm,
+    BatchForm,
+    DeviceDetail,
     kyTable,
+    kyTree,
   },
   data() {  
     return {
       title: '',
       type: '',
-      dirIdSuff: 0,
-      editDirId: 0,
-      addIPDialogVisible: false,
-      delHostDialogVisible: false,
-      multipleSelection: [],
-      deleteIPList: [],
-      cockpitUrl: "",
-      filterText: '',
-      data: [{
-        id:0,
-        label: '中国',     
-      }],
-      children: [{
-        id:1,
-        label: '北京',
-        children: [{
-          id:11,
-          label: '通州'
-        }]
+      ip: '',
+      display: false,
+      disabled: false,
+      searchData: {
+        DepartId: 1
       },
-      {  
-        id:2,
-        label: '上海',
-        leaf: true,
-      },
-      {  
-        id:3,
-        label: '山西',
-        children:[{
-          id: 13,
-          label: '太原'
-        },{
-          id: 14,
-          label: '阳泉'
-        }]
-      },{
-        id:4,
-        label: '黑龙江',
-        children: [{
-          id:12,
-          label: '哈尔滨'
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-        isLeaf: 'leaf'
-        },
     };
   },
-  mounted() {
-    // 加载部门节点的接口数据
-
-  },
   methods: {
     getClusters,
+    getChildNode,
+    handleClose() {
+      this.display = false;
+      this.title = "";
+      this.type = "";
+    },
     handleAddIp() {
-      this.addIPDialogVisible = true;
-      this.title = "添加IP";
+      this.display = true;
+      this.title = "注册IP";
       this.type = "create"; 
     },
     handleUpdateIp() {
-      this.addIPDialogVisible = true;
+      this.display = true;
       this.title = "编辑IP";
       this.type = "update"; 
+      this.ip = this.$refs.table.selectRow.rows[0].ip;
     },
-    handleClose() {
-      this.addIPDialogVisible = false;
-      this.title = "";
-      this.type = "";
-    }, 
-    append(node,data) {
-      this.$prompt('输入节点名字', '新建节点', {
-       confirmButtonText: '确定',
-       cancelButtonText: '取消',
-       }).then(({ value }) => {
-         this.$message({
-             type: 'success',
-             message: '新建成功'
-           });
-         /* http().then((data)=>{
-           this.$message({
-             type: 'success',
-             message: '新建成功'
-           }); 
-           this.partialRefresh(node)
-         })
-         //请求失败
-         .catch(()=>{
-           this.$message({
-             type: 'info',
-             message: '新建失败'
-           }); 
-         }) */
-       }).catch(() => {}); 
-   },
-   
-   refreshNode(){
-     // 封装请求整个树结构数据
-   },
-   //懒加载
-   loadNode(node, resolve){
-     if (node.level === 0) {
-       return resolve(this.data);
-     }
-     else if(node.level === 1){
-       return resolve(this.children)
-     }
-     else{
-       return resolve([])
-     }
-   },
-   rename(node,data) {
-      this.$prompt('输入节点名字', '编辑节点', {
-       confirmButtonText: '确定',
-       cancelButtonText: '取消',
-       }).then(({ value }) => {
-         this.$message({
-             type: 'success',
-             message: '修改成功'
-           });
-         /* http().then((data)=>{
-           this.$message({
-             type: 'success',
-             message: '修改成功'
-           }); 
-           this.partialRefresh(node)
-         })
-         //请求失败
-         .catch(()=>{
-           this.$message({
-             type: 'info',
-             message: '修改失败'
-           }); 
-         }) */
-       }).catch(() => {}); 
-   },
-   remove(node,data) {
-     this.$confirm('确定删除该节点？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          });
-        }).catch(() => {});
-   },
-   //拖拽==>拖拽时判定目标节点能否被放置
-   allowDrop(draggingNode, dropNode, type){
-     //参数：被拖拽节点，要拖拽到的位置
-     //因为根目录是我本地写死的，不能有同级，所以我设置凡是拖拽到的level===1都存放到根节点的下面；
-     if(dropNode.level===1){
-       return type == 'inner';
-     }
-     else {
-       return true;
-     }
-   },
-   //拖拽==>判断节点能否被拖拽
-   allowDrag(draggingNode){
-    //第一级节点不允许拖拽
-     return draggingNode.level !== 1;
-   },
-    handleNodeClick(node,data) {
-      // 获取当前分支与上级分支的数据
-      console.log(node,data);
+    handleAddBatch() {
+      this.display = true;
+      this.title = "创建批次";
+      this.type = "batch"; 
     },
-    // 删除主机界面
-    handleDeleteItems() {
-      let _this = this;
-      let ids = [];
-      for (let i of _this.multipleSelection) {
-        ids.push(i.id);
-      }
-      deleteIp({ id: ids }).then((res) => {
-        if (res.data.status === "success") {
+    handleDelete() {
+      console.log(this.$refs.table.selectRow.rows)
+      let ids = this.$refs.table.selectRow.rows[0];
+      deleteIp({ uuid: ids }).then((res) => {
+        if (res.data.code === 200) {
           this.$refs.table.handleSearch();
           this.$message.success("删除成功");
         }
       });
     },
-    handleSelectIp(row) {
-      this.$store.commit("SET_SELECTIP", row.ip);
+    handleSelectDept(data) {
+      if(data) {
+        this.searchData.DepartId = data.id;
+        this.$refs.table.handleSearch();
+      }
+    },
+    handleSelectIp(ip) {
+      this.display = true;
+      this.title = "磁盘使用";
+      this.type = "disk"; 
+      this.ip = ip;
+      // this.$store.commit("SET_SELECTIP", row.ip);
     },
     handleFireWall(ip) {
       this.$router.push({
-        name: 'FireWall',
+        name: 'Firewall',
         query: { ip: ip }
       })
     }
@@ -320,14 +162,6 @@ export default {
   .dept {
     width: 36%;
     display: inline-block;
-    .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-  }
   }
   .info {
     width: 60%;
diff --git a/vue/views/Cluster/detail/index.vue b/vue/views/Cluster/detail/index.vue
index 02acc867..fd1088f0 100644
--- a/vue/views/Cluster/detail/index.vue
+++ b/vue/views/Cluster/detail/index.vue
@@ -1,14 +1,128 @@
 <template>
  <div>
-   机器echarts详情页
+   <div id="diskChar" :style="{width:'480px',height:'460px'}"></div>
  </div>
 </template>
 <script>
+import { getDeviceInfo } from '@/request/cluster'
 export default {
-  name: "UserInfo",
+   /* 某一台机器的详情，左右分布
+      左：柱状图，磁盘信息，占用多少空闲多少
+      右：暂定
+   */
+  props: {
+    ip: {
+      type: String
+    } 
+  },
   data() {
     return {
     }
+  },
+  mounted() {
+    this.drawEchart();
+  },
+  methods: {
+    drawEchart() {
+      let myChart = this.$echarts.init(document.getElementById('diskChar'))
+      let option = {
+        title: {
+            text: '',
+            top: 0,
+            left: 10
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c}%"
+        },
+        toolbox: {
+            show : true,
+            top:0,
+            right:0,
+            feature : {
+                mark : {show: false},
+                magicType : {show: false, type: ['line', 'bar']},
+                saveAsImage : {show: true}
+            }
+        },
+        grid: {
+          top: 60,
+          right: 30,
+          bottom: 30,
+          left: 60
+        },
+        legend: {
+          top: 0,
+          left: 'center',
+          data: ['占用','空闲']
+        },
+        calculable: true,
+        xAxis: [
+          {
+            name: '磁盘',
+            nameGap: 6,
+            type: 'category',
+            data: ['C','D','E','F'],
+            axisLabel:{					//---坐标轴 标签
+              show:true,					//---是否显示
+              inside:false,				//---是否朝内
+              rotate:0,					//---旋转角度	
+              margin: 10,					//---刻度标签与轴线之间的距离
+              color:'#000',
+              fontSize: '16'				//---默认取轴线的颜色
+            },
+          }
+        ],
+        yAxis : [
+          {
+            type: 'value',
+            name: '比例%',
+            axisLine: {
+              show: true,
+            },
+            axisLabel: {
+              show:true,
+              showMinLabel:true,
+              showMaxLabel:true,
+              formatter: function (value) {
+                  return value;
+              }
+            }
+          },
+          {
+            type: 'value',
+            name: "",
+            axisLabel: {
+                show:false,
+            }
+          }
+        ],
+        series: [
+            {
+              name:'占用',
+              type:'bar',
+              yAxisIndex: 0,
+              data: [20,30,10,78],
+            },
+            {
+              name:'空闲',
+              type:'bar',
+              yAxisIndex: 1,
+              data:[18,78,28,65],
+            }
+        ]
+    };
+      // 通过ip获取磁盘信息
+      /* getDeviceInfo({'ip': this.ip}).then((res) => {
+        if(res.code == 200) {
+          // 设置option中数据的信息
+          option.series[0].data = res.data.data[0];
+          option.series[1].data = res.data.data[1];
+        }
+        myChart.setOption(option);
+      }) */
+      myChart.setOption(option);
+    }
   }
 }
 </script>
diff --git a/vue/views/Cluster/form/batchForm.vue b/vue/views/Cluster/form/batchForm.vue
new file mode 100644
index 00000000..6e3b426d
--- /dev/null
+++ b/vue/views/Cluster/form/batchForm.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-form
+        :model="form"
+        :rules="rules"
+        ref="form"
+        label-width="100px"
+      >
+        <el-form-item label="批次名称:" prop="batchName">
+          <el-input
+            class="ipInput"
+            type="text"
+            size="medium"
+            v-model="form.batchName"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm()">确 定</el-button>
+      </div>
+  </div>
+</template>
+
+<script>
+import {  createBatch  } from "@/request/batch";
+export default {
+  data() {
+    return {
+      form: {
+        batchName: "",
+      },
+      rules: {
+        batchName: [{ 
+          required: true, 
+          message: "请填写批次名称", 
+          trigger: "blur" }]
+      },
+    }
+  },
+  methods: {
+    handleCancel() {
+      this.$refs.form.resetFields();
+      this.$emit("click");
+    },
+    handleConfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          createBatch(this.form)
+            .then((res) => {
+              if (res.data.status === "success") {
+                this.$emit("click");
+                this.$refs.form.resetFields();
+              } else {
+                this.$message.error(res.data.error);
+              }
+            })
+            .catch((res) => {
+              this.$message.error("创建失败，请检查输入内容");
+            });
+        }
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/vue/views/Cluster/form/updateForm.vue b/vue/views/Cluster/form/updateForm.vue
index 1c26bc0d..0075cdfd 100644
--- a/vue/views/Cluster/form/updateForm.vue
+++ b/vue/views/Cluster/form/updateForm.vue
@@ -13,10 +13,18 @@
             size="medium"
             v-model="form.ip"
             autocomplete="off"
+            disabled="disabled"
           ></el-input>
         </el-form-item>
-
-        <el-form-item label="repo配置" prop="repo">
+        <el-form-item label="内核" prop="kernel">
+          <el-input
+            class="ipInput"
+            controls-position="right"
+            v-model="form.kernel"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="repo" prop="repo">
           <el-select v-model="form.repoId">
             <el-option
               v-for="item in repos"
@@ -27,14 +35,6 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="内核参数" prop="kernel">
-          <el-input
-            class="ipInput"
-            controls-position="right"
-            v-model="form.kernel"
-            autocomplete="off"
-          ></el-input>
-        </el-form-item>
         <el-form-item label="服务" prop="service">
          <el-select v-model="form.service">
             <el-option
@@ -56,8 +56,12 @@
 
 <script>
 import {  updateIp  } from "@/request/cluster";
-import { checkIP } from "@/rules/check";
 export default {
+  props: {
+    ip: {
+      type: String
+    } 
+  },
   data() {
     return {
       form: {
@@ -67,28 +71,40 @@ export default {
         service: "",
       },
       rules: {
-        ip: [{ required: true, validator: checkIP, trigger: "change", message: "请输入正确的IP地址"}],
-        kernel: [{ required: true, trigger: "blur", message:"修改后需要重启生效" }],
-      }
+        ip: [{ 
+          required: true, 
+          message: "请输入IP",
+          trigger: "blur"
+        }],
+        kernel: [{ 
+          required: true, 
+          trigger: "blur", 
+          message:"修改后需要重启生效" 
+        }],
+      },
+      disabled: true,
+      repos: [],
+      service: [],
     }
   },
-  mounted() {},
+  mounted() {
+    this.form.ip = this.ip;
+  },
   methods: {
     handleCancel() {
       this.$refs.form.resetFields();
       this.$emit("click");
     },
     handleSubmitForm() {
-      let _this = this;
       this.$refs.form.validate((valid) => {
         if (valid) {
-          updateIp({ip: _this.form.ip, data: _this.form})
+          updateIp({ip: this.form.ip, data: this.form})
             .then((res) => {
               if (res.data.status === "success") {
-                _this.$emit("click");
-                _this.$refs.form.resetFields();
+                this.$emit("click");
+                this.$refs.form.resetFields();
               } else {
-                _this.$message.error(res.data.error);
+                this.$message.error(res.data.error);
               }
             })
             .catch((res) => {
diff --git a/vue/views/Firewall/Firewall.vue b/vue/views/Firewall/Firewall.vue
index c6be513d..dfe097b6 100644
--- a/vue/views/Firewall/Firewall.vue
+++ b/vue/views/Firewall/Firewall.vue
@@ -229,6 +229,9 @@ export default {
       ],
     };
   },
+  mounted() {
+    this.firewallForm.ip = this.$route.query.ip || '';
+  },
   methods: {
     handleClick() {
       this.$refs.firewallForm.validate((valid)=>{
-- 
Gitee