Merge remote-tracking branch 'origin/develop' into develop

10 files changed, 862 insertions, 67 deletions

diff --git a/nezha-admin/src/main/java/com/nis/modules/node/controller/NodeInfoController.java b/nezha-admin/src/main/java/com/nis/modules/node/controller/NodeInfoController.java
index 75e19ea2..67908b14 100644
--- a/nezha-admin/src/main/java/com/nis/modules/node/controller/NodeInfoController.java
+++ b/nezha-admin/src/main/java/com/nis/modules/node/controller/NodeInfoController.java
@@ -6,13 +6,16 @@ import com.nis.common.utils.PageUtils;
 import com.nis.common.utils.R;
 import com.nis.common.utils.RCode;
 import com.nis.modules.node.entity.AvailCabinetEntity;
+import com.nis.modules.node.entity.NodeGroupRelEntity;
 import com.nis.modules.node.entity.NodeInfoEntity;
 import com.nis.modules.node.service.NodeInfoService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
+import org.apache.commons.collections.CollectionUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
@@ -116,4 +119,15 @@ public class NodeInfoController {
         return R.ok(map);
     }
 
+
+    /**
+     * 根据节点UUID 查询所属节点组集合
+     * @param uuid
+     * @return
+     */
+    @GetMapping("/getGroupsById")
+    public R getGroupsById(Long uuid){
+        ValidateUtils.is(uuid).notNull(RCode.NODE_UUID_ISNULL);
+        return R.ok(nodeInfoService.getGroupsById(uuid));
+    }
 }
diff --git a/nezha-admin/src/main/java/com/nis/modules/node/entity/NodeInfoEntity.java b/nezha-admin/src/main/java/com/nis/modules/node/entity/NodeInfoEntity.java
index 91778624..d55baa2b 100644
--- a/nezha-admin/src/main/java/com/nis/modules/node/entity/NodeInfoEntity.java
+++ b/nezha-admin/src/main/java/com/nis/modules/node/entity/NodeInfoEntity.java
@@ -120,7 +120,19 @@ public class NodeInfoEntity implements Serializable {
     private String tagName;
 
 
+    /**
+     * 节点组IDS 节点添加/修改选择节点组
+     */
+    @TableField(exist = false)
+    private List<Long> groupIds;
 
+    public List<Long> getGroupIds() {
+        return groupIds;
+    }
+
+    public void setGroupIds(List<Long> groupIds) {
+        this.groupIds = groupIds;
+    }
 
     public Long getId() {
         return id;
diff --git a/nezha-admin/src/main/java/com/nis/modules/node/service/NodeInfoService.java b/nezha-admin/src/main/java/com/nis/modules/node/service/NodeInfoService.java
index eb8a14d4..1c0f5e02 100644
--- a/nezha-admin/src/main/java/com/nis/modules/node/service/NodeInfoService.java
+++ b/nezha-admin/src/main/java/com/nis/modules/node/service/NodeInfoService.java
@@ -4,6 +4,8 @@ import com.baomidou.mybatisplus.extension.service.IService;
 import com.nis.common.utils.PageUtils;
 import com.nis.common.utils.R;
 import com.nis.modules.node.entity.AvailCabinetEntity;
+import com.nis.modules.node.entity.NodeGroupInfoEntity;
+import com.nis.modules.node.entity.NodeGroupRelEntity;
 import com.nis.modules.node.entity.NodeInfoEntity;
 
 import java.util.List;
@@ -44,5 +46,12 @@ public interface NodeInfoService extends IService<NodeInfoEntity> {
     public void getTagName(List<NodeInfoEntity> nodeInfoEntities);
 
 	PageUtils querySelectableNodeBySystemId(Map<String, Object> params);
+
+    /**
+     * 根据节点UUID 获取所属节点组集合
+     * @param uuid
+     * @return
+     */
+    List<NodeGroupRelEntity> getGroupsById(Long uuid);
 }
 
diff --git a/nezha-admin/src/main/java/com/nis/modules/node/service/impl/NodeInfoServiceImpl.java b/nezha-admin/src/main/java/com/nis/modules/node/service/impl/NodeInfoServiceImpl.java
index 283a8058..6e9c1020 100644
--- a/nezha-admin/src/main/java/com/nis/modules/node/service/impl/NodeInfoServiceImpl.java
+++ b/nezha-admin/src/main/java/com/nis/modules/node/service/impl/NodeInfoServiceImpl.java
@@ -10,16 +10,14 @@ import com.nis.modules.node.dao.NodeGroupRelDao;
 import com.nis.modules.node.dao.NodeInfoDao;
 import com.nis.modules.node.dao.NodeRoomDao;
 import com.nis.modules.node.entity.*;
-import com.nis.modules.node.service.NodeCabinetService;
-import com.nis.modules.node.service.NodeGroupInfoService;
-import com.nis.modules.node.service.NodeInfoService;
-import com.nis.modules.node.service.SystemNodeRelService;
+import com.nis.modules.node.service.*;
 import com.nis.modules.node.util.IpCovert;
 import com.nis.modules.sys.entity.SysDictEntity;
 import com.nis.modules.sys.entity.SystemInfoEntity;
 import com.nis.modules.sys.service.SysDictService;
 import com.nis.modules.sys.shiro.ShiroUtils;
 import com.sun.org.apache.xalan.internal.lib.NodeInfo;
+import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang.ArrayUtils;
 import org.apache.commons.lang.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -60,6 +58,9 @@ public class NodeInfoServiceImpl extends ServiceImpl<NodeInfoDao, NodeInfoEntity
     @Autowired
     private NodeCabinetService nodeCabinetService;
 
+    @Autowired
+    private NodeGroupRelService nodeGroupRelService;
+
     @Override
     public PageUtils queryPage(Map<String, Object> params) {
 
@@ -328,16 +329,30 @@ public class NodeInfoServiceImpl extends ServiceImpl<NodeInfoDao, NodeInfoEntity
             this.checkTypeAndTag(nodeInfoEntity);
 
             //3. IP地址转换 IP整数
+            Date now = new Date();
+            Long systemId = ShiroUtils.getCurrSystemId();
             nodeInfoEntity.setIpLong(IpCovert.ipToLong(nodeInfoEntity.getIp()));
             if (nodeInfoEntity.getPassword() != null && StringUtils.isNotBlank(nodeInfoEntity.getPassword())) {
                 //4. 密码加密 base64
                 nodeInfoEntity.setPassword(Base64.getEncoder().encodeToString(nodeInfoEntity.getPassword().getBytes()));
             }
-            nodeInfoEntity.setOperator(ShiroUtils.getCurrSystemId());
-            nodeInfoEntity.setOpTime(new Date());
+            nodeInfoEntity.setOperator(systemId);
+            nodeInfoEntity.setOpTime(now);
 
             //5. 入库
             nodeInfoDao.save(nodeInfoEntity);
+
+            //6.判断是否选择节点组
+            if(CollectionUtils.isNotEmpty(nodeInfoEntity.getGroupIds())){
+                List<NodeGroupRelEntity> list = new ArrayList<>();
+                for (Long groupId : nodeInfoEntity.getGroupIds()) {
+                    list.add(new NodeGroupRelEntity(groupId, nodeInfoEntity.getUuid(), systemId, now));
+                }
+                // 在此处添加
+                if (list != null && list.size() > 0) {
+                    nodeGroupRelService.saveBatch(list);
+                }
+            }
         } else {
             throw new NZException(RCode.NODE_NAME_DUPLICATE);// 名称重复
         }
@@ -450,16 +465,31 @@ public class NodeInfoServiceImpl extends ServiceImpl<NodeInfoDao, NodeInfoEntity
             this.checkTypeAndTag(nodeInfoEntity);
 
             //3 IP地址转换 IP整数
+            Date now = new Date();
+            Long systemId = ShiroUtils.getCurrSystemId();
             nodeInfoEntity.setIpLong(IpCovert.ipToLong(nodeInfoEntity.getIp()));
             //4. 密码加密 base64
             if (nodeInfoEntity.getPassword() != null && StringUtils.isNotBlank(nodeInfoEntity.getPassword())) {
                 nodeInfoEntity.setPassword(Base64.getEncoder().encodeToString(nodeInfoEntity.getPassword().getBytes()));
             }
-            nodeInfoEntity.setOperator(ShiroUtils.getCurrSystemId());
-            nodeInfoEntity.setOpTime(new Date());
+            nodeInfoEntity.setOperator(systemId);
+            nodeInfoEntity.setOpTime(now);
 
             //5. 入库
             update(nodeInfoEntity, new UpdateWrapper<NodeInfoEntity>().eq("uuid", nodeInfoEntity.getUuid()));
+            //6.判断是否给节点指定节点组
+            if(CollectionUtils.isNotEmpty(nodeInfoEntity.getGroupIds())){
+                // 先删除
+                nodeGroupRelService.remove(new QueryWrapper<NodeGroupRelEntity>().eq("uuid", nodeInfoEntity.getUuid()));
+                // 再添加
+                List<NodeGroupRelEntity> list = new ArrayList<>();
+                for (Long groupId : nodeInfoEntity.getGroupIds()) {
+                    list.add(new NodeGroupRelEntity(groupId, nodeInfoEntity.getUuid(), systemId, now));
+                }
+                if (list != null && list.size() > 0) {
+                    nodeGroupRelService.saveBatch(list);
+                }
+            }
         } else {
             throw new NZException(RCode.NODE_NAME_DUPLICATE);// 名称重复
         }
@@ -673,4 +703,15 @@ public class NodeInfoServiceImpl extends ServiceImpl<NodeInfoDao, NodeInfoEntity
         page.setRecords(queryNodeBySystemId);
         return new PageUtils(page);
     }
+
+    /**
+     * 根据节点UUID 获取所属节点组集合
+     * @param uuid
+     * @return
+     */
+    @Override
+    public List<NodeGroupRelEntity> getGroupsById(Long uuid) {
+        List<NodeGroupRelEntity> list = nodeGroupRelService.list(new QueryWrapper<NodeGroupRelEntity>().eq("uuid", uuid));
+        return list;
+    }
 }
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/statics/css/main.css b/nezha-admin/src/main/resources/statics/css/main.css
index 726104b6..879f2d2b 100644
--- a/nezha-admin/src/main/resources/statics/css/main.css
+++ b/nezha-admin/src/main/resources/statics/css/main.css
@@ -246,6 +246,7 @@ tbody > tr > th {font-weight: normal; }
 .mytree-box {
 	overflow: hidden;
 	margin-left: 12px !important;
+	display: none;
 }
 
 .tools .form-group {
diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js b/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js
index 934ea73a..972f1bc3 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/node/nodeGroup.js
@@ -92,7 +92,6 @@ let groupTree = Vue.component('groupTree', {
         },
         // 鼠标划过展示功能按钮
         addHoverDom: function (treeId, treeNode) {
-            //var node = this.node;
             var parent = this.$parent;
             var sObj = $("#" + treeNode.tId + "_span");
             if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0 || treeNode.allowSub == 0) { // 可以让不可添加的按钮隐藏
@@ -210,7 +209,7 @@ var nameCheck = function (value, nodeGroup) {
 }
 
 var vue = new Vue({
-    el: "#app",
+    el: "#nodeGroupApp",
     data: this.data,
     validations: {
         nodeGroup: {
@@ -255,6 +254,7 @@ var vue = new Vue({
                     parentGroup: null
                 };
                 vue.nodeGroup.parentGroup = node;
+                vue.$set(vue.nodeGroup.parentGroup,"name",node.nodeTitle);
             }
             vue.count = 1;
             this.open("<@spring.message 'common.add'/>");
@@ -342,7 +342,7 @@ var vue = new Vue({
         },
         open: function (title) {
             layer.open({
-                area: ['50%', '100%'],
+                area: ['550px', '100%'],
                 shade: 0,
                 title: title,
                 type: 1,
diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js b/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js
index 8cd9e22d..d8b130f5 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/node/nodeInfo.js
@@ -71,6 +71,241 @@ $(function () {
 
 });
 
+var groupTree1 = Vue.component('groupTree1', {
+    template: "#treeTemplate",
+    props: {
+        znodes: { // 只包含用于生成树形结构的节点组列表
+            type: Array
+        },
+        selectedNodeId: "",
+        node: null     // 代表节点信息 包含业务系统和包含的节点组
+    },
+    data() {
+        return {
+            selectedNode: {},
+            setting: {
+                view: {
+                    addHoverDom: this.addHoverDom,
+                    removeHoverDom: this.removeHoverDom,
+                    showIcon: false,
+                    nameIsHTML: true // 名称支持Html标签转换
+                },
+                edit: {
+                    enable: true,
+                    removeTitle: "<@spring.message 'common.delete'/>",
+                    renameTitle: "<@spring.message 'common.edit'/>"
+                },
+                data: {
+                    simpleData: {
+                        enable: true,
+                        idKey: "id",
+                        pIdKey: "pid",
+                        rootPId: 0
+                    },
+                    key:{
+                        title:"nodeTitle" // 因为name 拼接了带有html的字段 所以默认的title 会展示html标签
+                    }
+                },
+                check: {
+                    enable: true,
+                    checkStyle: "checkbox",
+                    nocheckInherit: true,
+                    chkboxType: {"Y": "", "N": ""}
+                },
+                callback:{
+                    beforeRemove: this.beforeRemove,         // 删除callback
+                    beforeCheck: this.beforeCheck,           // 修改callback
+                    beforeEditName: this.beforeEditName,     // 点击编辑时触发，用来判断该节点是否能编辑
+                    onCheck: this.zTreeOnCheck               // 选中时触发
+                }
+            }
+        };
+    },
+    methods: {
+        // 初始化ztree
+        init() {
+            // 获取当前的集合
+            this.znodes.forEach(item => {
+                this.$set(item,"nodeTitle",item.name);
+                if(item.allowAss == 1){ // 证明是叶子节点
+                    var count = "";
+                    $.ajax({
+                        type: "GET",
+                        url: baseURL + "nodegroup/getNodeCount?id="+item.id,
+                        async: false,
+                        dataType: "json",
+                        success: function (r) {
+                            count = r.data;
+                        }
+                    });
+                    this.$set(item,"name",item.name + "     <font color='gray'>("+ count +")</font>");
+                }
+            });
+            // 生成树结构
+            var tree = $.fn.zTree.init($("#treeDemo" + this.node.id), this.setting, this.znodes);
+            tree.expandAll(true);
+        },
+        // 删除
+        beforeRemove: function (treeId, treeNode) {
+            var parent = this.$parent;
+            confirm("<@spring.message 'common.confirmDelete'/>", function () {
+                parent.deleteNodeGroup(treeNode);
+            });
+            return false;
+        },
+        // 鼠标移除删除添加按钮
+        removeHoverDom: function (treeId, treeNode) {
+            $("#addBtn_" + treeNode.tId).unbind().remove();
+        },
+        addRootGroup: function () {
+            // 将数据传至父组件 也就是外面的vm 实例中进行添加操作
+             this.$emit('addrootgroup', this.node, true);
+        },
+        // 鼠标划过展示功能按钮
+        addHoverDom: function (treeId, treeNode) {
+            var parent = this.$parent;
+            var sObj = $("#" + treeNode.tId + "_span");
+            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0 || treeNode.allowSub == 0) { // 可以让不可添加的按钮隐藏
+                return;
+            }
+            // 添加子节点组
+            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='<@spring.message 'common.add'/><@spring.message 'nodegroup.child.group'/>' onfocus='this.blur();'></span>";
+            sObj.append(addStr);
+            var btn = $("#addBtn_" + treeNode.tId);
+            if (btn) btn.bind("click", function () {
+                parent.addNodeGroup(treeNode, false);
+                return false; // 结束方法
+            });
+        },
+        // 鼠标移除删除添加按钮
+        removeHoverDom: function (treeId, treeNode) {
+            $("#addBtn_" + treeNode.tId).unbind().remove();
+        },
+        beforeEditName: function (treeId, treeNode) {   // 修改
+            this.$parent.updateNodeGroup(treeNode);
+            return false;
+        },
+        beforeCheck:function(treeId, treeNode){          // 选择前判断是否可选
+            if(treeNode.allowAss == "1"){ // 允许选择
+                return true;
+            }
+            layer.msg("此节点组不支持分配节点");
+            return false;
+        },
+        zTreeOnCheck:function(event, treeId, treeNode){
+            if(treeNode.checked){
+                treeNode.absolutePath = this.node.name + "-> " + this.getNodePath(treeNode);
+                this.$emit("tree-select", treeNode);
+            }else{
+                this.$emit("tree-unselect", treeNode);
+            }
+        },
+        forUpdateNode:function(nodeIds){ // 修改时调用此方法
+            var temp = this;
+            var treeObj = $.fn.zTree.getZTreeObj("treeDemo"+temp.node.id);
+            nodeIds.forEach(item=>{
+                var nodeObj = treeObj.getNodesByParam("id", item.groupId, null);
+                if(nodeObj.length >0){
+                    // 1. 将节点组名称层级关系传递父组件
+                    var currNode = nodeObj[0];
+                    currNode.absolutePath = temp.node.name + "-> " + temp.getNodePath(currNode);
+                    temp.$emit("tree-select", currNode);
+                    // 2. 节点状态选中
+                    currNode.checked = true;
+                    treeObj.updateNode(currNode, true);
+                }
+            });
+        },
+        getNodePath: function(treeNode){ // 递归拼接节点组层级关系
+            if(treeNode==null)return "";
+            var nodeName = treeNode.nodeTitle;
+            var pNode = treeNode.getParentNode();
+            if(pNode!=null){
+                nodeName = this.getNodePath(pNode) +"/"+ nodeName;
+            }
+            return nodeName;
+        },
+        uncheckTreeData:function(node){
+            if(node.systemId != this.node.id){
+                return;
+            }else{
+                this.showCurrTree(this.node);
+            }
+            if (node.tId == undefined || node.tId == null) { //解决更新操作中 找不到关联节点的问题
+                node = this.zTree.getNodeByParam("id", node.id, null);
+            }
+            node.checked = false;
+            var treeObj = $.fn.zTree.getZTreeObj("treeDemo"+this.node.id);
+            treeObj.updateNode(node, false);
+        },
+        myFilter:function(node){
+            return (node.showCurrTree != undefined);
+        },
+        // 一下是 展示/样式相关方法
+        showTree: function (item) {
+            $("#box" + item.id).toggle(200);
+            if ($("#icon" + item.id).hasClass("mytreeicon-open")) {
+                $("#icon" + item.id).removeClass("mytreeicon-open").addClass("mytreeicon-close");
+            } else {
+                $("#icon" + item.id).removeClass("mytreeicon-close").addClass("mytreeicon-open");
+            }
+        },
+        showCurrTree:function(item){
+            $("#box" + item.id).show(200);
+        },
+        showBtn: function (item) {
+            $("#icon2" + item.id).css("display", "inline-block");
+        },
+        hideBtn: function (item) {
+            $("#icon2" + item.id).hide();
+        },
+        showBtn2: function (item) {
+            $("#icon2" + item.id).removeClass("mytreeicon-add_unact").addClass("mytreeicon-add_act");
+        },
+        hideBtn2: function (item) {
+            $("#icon2" + item.id).removeClass("mytreeicon-add_act").addClass("mytreeicon-add_unact");
+        },
+    },
+    watch: {
+        // 监听树节点的变化更新树
+       /*znodes: function (val) {
+           this.init();
+       }*/
+    },
+    mounted() {
+        console.log("mounted 重新挂载")
+         this.init();
+        // 如果是global 下隐藏树
+        var currSys;
+        $.ajax({
+            type: "GET",
+            url: baseURL + "system/detail",
+            async: false,
+            dataType: "json",
+            success: function (r) {
+                currSys = r.data;
+            }
+        });
+        if (currSys.id > 1) { // 当前不是global
+            $("#box" + this.node.id).show();
+        }else{
+            $("#box" + this.node.id).hide();
+        }
+    },
+    updated:function(){
+        console.log("updated 重新挂载")
+        this.init();
+        // 过滤节点是否存在showCurrTree属性  存在则展开节点当前树结构
+        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"+this.node.id);
+        var nodes = treeObj.getNodesByFilter(this.myFilter); // 查找节点集合
+        if(nodes.length > 0){
+            $("#box" + this.node.id).show();
+        }else{
+            $("#box" + this.node.id).hide();
+        }
+    }
+});
+
 // 注册select组件
 Vue.component('multiselect', window.VueMultiselect.default);
 
@@ -294,7 +529,7 @@ var cabRequired = function (value, nodeInfo) {
 }
 // 起始位置必选状态
 var startRequired = function (value, nodeInfo) {
-    if (nodeInfo.cabinetId != null && value == null) {
+    if (nodeInfo.nodeRoom != null && value == null) {
         return false;
     }
     return true;
@@ -308,10 +543,40 @@ var sizeRequired = function (value, nodeInfo) {
     }
     return true;
 }
+// 节点组名称校验
+var groupNameCheck = function (value, nodeGroup) {
+    if (helpers.req(value)) {
+        var flag = true;
+        var params = "?name=" + value + "&pid=" + vm.nodeGroupDto.parentGroup.id;
+        if (nodeGroup.id) {
+            params += "&id=" + nodeGroup.id;
+        }
+        if (nodeGroup.parentGroup.id == 0) { // 添加的是根节点 则参数需要传业务ID
+            params += "&systemId=" + vm.system.id;
+        }
+        $.ajax({
+            type: "GET",
+            url: baseURL + "nodegroup/groupNameCheck" + params,
+            async: false,
+            dataType: "json",
+            success: function (r) {
+                if (r.code != 200) {
+                    flag = false;
+                }
+            }
+        });
+        return flag;
+    } else {
+        return true;
+    }
+}
 
 var data = {
-    showList: true,
+    showList: true,      // 节点列表的显示与隐藏
+    showGroupTree:true,  // nodeGroups tree 展示与隐藏
+    showGroupForm:true,  // nodeGroup  form 展示与隐藏
     title: "<@spring.message 'common.add'/>",
+    cabStartTitle:"<@spring.message 'common.pleaseSelect'/>",
     nodeList: [],
     q: {
         name: null, type: null, state: null, ip: null, tag: null
@@ -344,6 +609,17 @@ var data = {
     },
     nodeInfoDto: null,
     nodeGroup: null,         // 节点组页面搜索使用
+    nodeGroupDto:{           // 节点添加选择节点组  表单绑定对象
+        name: null,
+        id: null,
+        systemId: null,
+        pid: null,
+        remark: null,
+        parentGroup: {
+            id: null,
+            name: null
+        }
+    },
     isAdvancedSearch: false, // 高级搜索状态控制
     disabledFlag: false,     // 表单锁定状态控制
     oldNodeInfos: [],        // 增加/修改 回显旧对象数组
@@ -354,7 +630,15 @@ var data = {
     selectedItem1: "IP",
     // single  multi 控制工具栏单选 多选可点击状态
     single:true,
-    multi:true
+    multi:true,
+    systems: null,  // 业务系统和节点组集合
+    system: {       // 当前业务系统  节点组添加修改时使用
+        id: null,
+        name: null
+    },
+    currentZIndex:null,  // 当前弹出层zIndex值
+    checkedGroups:[],    // 当前节点选中的节点组
+    currSystem: null     // 当前业务系统ID
 };
 
 Vue.config.devtools = true;
@@ -387,6 +671,11 @@ var vm = new Vue({
             cabinetStart: {
                 startRequired
             }
+        },
+        nodeGroupDto: {
+            name: {
+                required, groupNameCheck
+            }
         }
     },
     methods: {
@@ -483,6 +772,15 @@ var vm = new Vue({
             vm.cabinets = [];
             // 重新获取可用机柜信息
             this.getRooms();
+            // 初始化 节点组信息
+            vm.checkedGroups = [];
+            // 默认在线状态为上线
+            vm.nodeStates.some(item=>{
+                if(item.code == 1){
+                    vm.nodeInfo.state = item;
+                    return true;
+                }
+            })
         },
         update: function () {
             vm.$v.nodeInfo.$reset(); // 进入修改页面时，将校验触发状态清空($dirty=true -> false)
@@ -494,9 +792,12 @@ var vm = new Vue({
                 return;
             }
             vm.showList = false;
+            vm.checkedGroups = [];
             vm.title = "<@spring.message 'common.edit'/>";
             // 查询详情
             this.getInfo(uuid);
+            // 查询是否关联节点组
+            this.getNodeGroupsById(uuid);
         },
         del: function (event) {
             var ids = getSelectedRows();
@@ -583,7 +884,14 @@ var vm = new Vue({
             vm.$set(vm.nodeInfoDto, 'tag', vm.nodeInfo.tag == null ? null : vm.nodeInfo.tag.code);
             vm.$set(vm.nodeInfoDto, 'state', vm.nodeInfo.state.code);
             vm.$set(vm.nodeInfoDto, 'cabinetId', vm.nodeInfo.cabinetId == null ? null : vm.nodeInfo.cabinetId.id);
-            $.ajax({
+            if(vm.checkedGroups.length > 0){
+                var groupIds = vm.checkedGroups.map(function(item) {
+                    return item.id;
+                });
+                vm.$set(vm.nodeInfoDto , 'groupIds', groupIds);
+            }
+            console.log(vm.nodeInfoDto)
+           $.ajax({
                 type: vm.nodeInfo.uuid == null ? "POST" : "PUT",
                 url: baseURL + url,
                 contentType: "application/json",
@@ -614,6 +922,7 @@ var vm = new Vue({
                 },
                 page: 1
             }).trigger("reloadGrid");
+            layer.closeAll();
         },
         getTags: function () {
             // 清空缓存
@@ -686,29 +995,45 @@ var vm = new Vue({
                     return true;
                 }
             });
+            if(vm.nodeInfo.cabinetId == null){
+                vm.cabStartTitle = "<@spring.message 'common.pleaseSelect'/>";
+                return;
+            }
+            if(vm.starts.length < 1){ // 没有起始位置可选
+                vm.cabStartTitle = "<@spring.message 'node.notEnough.position'/>";
+            }else{
+                vm.cabStartTitle = "<@spring.message 'common.pleaseSelect'/>";
+            }
         },
-        /*getQueryTag: function () {
-            vm.queryTags = [];
-            vm.q.tag = null;
-            if (vm.q.type != null) {
-                var param = "?type=" + "nodeTag" + vm.q.type.code;
-                $.ajax({
-                    type: "GET",
-                    url: baseURL + "sys/dict/list" + param,
-                    async: false,
-                    dataType: "json",
-                    success: function (r) {
-                        vm.queryTags = r.page.list;
+        getNodeGroupsById:function(uuid){ // 根据节点ID获取所属节点组集合
+            var groups;
+            $.ajax({
+                type: "GET",
+                url: baseURL + "node/getGroupsById?uuid=" + uuid,
+                async: false,
+                dataType: "json",
+                success: function (r) {
+                    groups = r.data;
+                }
+            });
+            // 该节点包含节点组
+            if(groups != undefined && groups != null && groups.length > 0){
+                // 生成组件
+                vm.getSystems();
+                this.$nextTick(()=>{
+                        for (let i = 0; i < vm.$refs.gtree.length; i++) {
+                        var refObj = vm.$refs.gtree[i];
+                        refObj.forUpdateNode(groups);
                     }
-                });
+                })
             }
-        },*/
-        checkUsize: function () {
+        },
+       /* checkUsize: function () {
             if (vm.nodeInfo.uSize == null || vm.nodeInfo.uSize == '') { // 节点高度为null
                 alert("<@spring.message 'node.pleaseWrite.uSize'/>!");
             }
-        },
-        checkNodeRoom: function () {
+        },*/
+       /* checkNodeRoom: function () {
             if (vm.nodeInfo.uSize == null || vm.nodeInfo.uSize == '') { // 节点高度为null
                 alert("<@spring.message 'node.pleaseWrite.uSize'/>!");
                 return;
@@ -716,8 +1041,8 @@ var vm = new Vue({
             if (vm.nodeInfo.uSize != null && vm.nodeInfo.nodeRoom == null) {
                 alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.room.name'/>!");
             }
-        },
-        checkCabStart: function () {
+        },*/
+        /*checkCabStart: function () {
             if (vm.nodeInfo.uSize == null || vm.nodeInfo.uSize == '') { // 节点高度为null
                 alert("<@spring.message 'node.pleaseWrite.uSize'/>!");
             } else if (vm.nodeInfo.nodeRoom == null) {
@@ -728,21 +1053,20 @@ var vm = new Vue({
                 // 暂无位置可选
                 alert(vm.nodeInfo.cabinetId.name + "  <@spring.message 'node.notEnough.position'/>!");
             }
-        },
-        checkNodeType: function () {
+        },*/
+        /*checkNodeType: function () {
             if (vm.nodeInfo.type == null) {
                 alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.type'/>!");
             }
-        },
-        /*checkQueryTag: function () {
-            if (vm.q.type == null) {
-                alert("<@spring.message 'common.pleaseSelect'/><@spring.message 'node.type'/>!");
-            }
         },*/
         validate: function () {
             vm.$v.nodeInfo.$touch();
             return !vm.$v.nodeInfo.$error;
         },
+        validateGroup: function () { // 节点组表单校验
+            vm.$v.nodeGroupDto.$touch();
+            return !vm.$v.nodeGroupDto.$error;
+        },
         advancedSearch: function () { //高级搜索
             this.isAdvancedSearch = !this.isAdvancedSearch;
             if (!this.isAdvancedSearch) {
@@ -754,6 +1078,223 @@ var vm = new Vue({
         },
         changeAdSearch1: function(item) {
         	this.selectedItem1 = item;
+        },
+        // group
+        showNodeGroups:function () {
+            // 获取菜单数据
+            vm.getSystems();
+
+            // 选择的节点组有数据的情况  再次打开应该回显
+            if(vm.checkedGroups.length > 0){
+                vm.systems.forEach(function (item, index) {
+                    // 如果业务系统存在节点组
+                    if(item.nodegroups.length > 0){
+                        item.nodegroups.forEach(function (group, index1) {
+                            vm.checkedGroups.forEach(function(checkGroup){
+                                if(checkGroup.id == group.id){
+                                    checkGroup.name = checkGroup.nodeTitle; // 因为名称已经是处理之后的字符串了
+                                    checkGroup.showCurrTree = true;             // 选中的节点所属的树展开
+                                    item.nodegroups.splice(index1,1,checkGroup);
+                                }
+                            })
+                        })
+                    }
+                });
+            }
+            vm.showGroupTree = false;
+            this.openGroupTree("选择节点组");
+        },
+        getSystems:function(){ // 获取菜单数据 包含业务系统和节点组信息
+            $.ajax({
+                type: "GET",
+                url: baseURL + "nodegroup/list",
+                async: false,
+                dataType: "json",
+                success: function (r) {
+                    vm.systems = r.data.list;
+                }
+            });
+        },
+        getParentSystem: function (systemId) { // 获取父节点的业务系统
+            $.ajax({
+                type: "GET",
+                url: baseURL + "/system/detail?id=" + systemId,
+                async: false,
+                dataType: "json",
+                success: function (r) {
+                    vm.system = r.data;
+                }
+            });
+        },
+        addNodeGroup: function (nodeGroup, isRoot) {
+            vm.$v.nodeGroupDto.$reset();
+            if (isRoot) { // 添加根节点组
+                vm.showGroupForm = true;
+                // 获取当前权限
+                vm.system = nodeGroup;
+                vm.nodeGroupDto = {
+                    name: null,
+                    id: null,
+                    systemId: null,
+                    pid: null,
+                    remark: null,
+                    parentGroup: null
+                };
+                vm.nodeGroupDto.parentGroup = {name: "<@spring.message 'nodegroup.root.group'/>", id: 0}; // 根节点组
+            } else {
+                // 获取节点组的业务系统 作为子节点组的业务系统
+                vm.getParentSystem(nodeGroup.systemId);
+                vm.showGroupForm = true;
+                vm.nodeGroupDto = {
+                    name: null,
+                    id: null,
+                    systemId: null,
+                    pid: null,
+                    remark: null,
+                    parentGroup: null
+                };
+                vm.nodeGroupDto.parentGroup = nodeGroup;
+                vm.$set(vm.nodeGroupDto.parentGroup,"name",nodeGroup.nodeTitle);
+            }
+            this.openGroupForm("<@spring.message 'common.add'/>");
+        },
+        deleteNodeGroup:function(nodeGroup){
+            var form = new FormData();
+            form.append("id", nodeGroup.id);
+            $.ajax({
+                type: "DELETE",
+                url: baseURL + "nodegroup/delete",
+                processData: false,
+                contentType: false,
+                mimeType: "multipart/form-data",
+                data: form,
+                success: function (r) {
+                    if (r.code == 200) {
+                        alert("<@spring.message 'common.success'/>", function (index) {
+                            // 从新挂载节点组tree
+                            vm.getSystems();
+                        });
+                    } else {
+                        alert(r.msg);
+                    }
+                }
+            });
+        },
+        updateNodeGroup: function(nodeGroup){
+            vm.$v.nodeGroupDto.$reset();
+            $.ajax({
+                type: "GET",
+                url: baseURL + "nodegroup/detail?id=" + nodeGroup.id,
+                async: false, // 关闭异步
+                dataType: "json",
+                success: function (r) {
+                    vm.nodeGroupDto = r.data;
+                }
+            });
+            vm.getParentSystem(nodeGroup.systemId);
+            vm.nodeGroupDto.parentGroup = nodeGroup.getParentNode() == null ? {name: "<@spring.message 'nodegroup.root.group'/>", id: 0} : nodeGroup.getParentNode();
+            this.openGroupForm("<@spring.message 'common.edit'/>");
+        },
+        saveOrUpdateGroup:function(){
+            if (!this.validateGroup()) {
+                return;
+            }
+            var url;
+            if (vm.nodeGroupDto.id == null) {
+                url = "nodegroup/save";
+            } else {
+                url = "nodegroup/update";
+            }
+            vm.$set(vm.nodeGroupDto, "pid", vm.nodeGroupDto.parentGroup.id);
+            vm.$set(vm.nodeGroupDto, "systemId", vm.system == null ? null : vm.system.id);
+            if (vm.nodeGroupDto.id) {
+                vm.nodeGroupDto.pid = vm.nodeGroupDto.pids = vm.nodeGroupDto.systemId = null;
+            }
+            $.ajax({
+                type: vm.nodeGroupDto.id == null ? "POST" : "PUT",
+                url: baseURL + url,
+                contentType: "application/json",
+                data: JSON.stringify(vm.nodeGroupDto),
+                success: function (r) {
+                    if (r.code === 200) {
+                        alert("<@spring.message 'common.success'/>", function (index) {
+                            // 关闭当前弹出层
+                            layer.close(vm.currentZIndex);
+                            // 从新挂载节点组tree
+                            vm.getSystems();
+                        });
+                    } else {
+                        alert(r.msg);
+                    }
+                }
+            });
+        },
+        selectedTreeDatas:function(nodeGroup){  // 子组件向父组件传出 absolutePath
+            vm.checkedGroups = vm.checkedGroups.concat(nodeGroup);
+        },
+        unSelectedTreeDatas:function(nodeGroup){  // 子组件撤销传出的 absolutePath
+            vm.checkedGroups.some(function(item,index){
+                if(item.id == nodeGroup.id){
+                    vm.checkedGroups.splice(index,1);
+                    return true;
+                }
+            });
+        },
+        unCheckGroup:function(nodeGroup){  // 从选中节点组中移除某个节点组
+            // 在数组中移除元素
+            vm.checkedGroups.splice(vm.checkedGroups.indexOf(nodeGroup),1)
+            // 调用组件 取消选中
+            for (let i = 0; i < vm.$refs.gtree.length; i++) {
+                var refObj = vm.$refs.gtree[i];
+                nodeGroup.showCurrTree = true;
+                refObj.uncheckTreeData(nodeGroup);
+            }
+            // 判断当前节点组的弹层是否存在
+            if(vm.showGroupTree) {
+                vm.showGroupTree = false;
+                this.openGroupTree("选择节点组");
+            }
+        },
+        openGroupTree: function (title) {
+            layer.open({
+                area: ['500px', '100%'],
+                shade: 0,
+                title: title,
+                type: 1,
+                fixed: false,
+                maxmin: false,
+                scrollbar: false,
+                offset: 'r',
+                closeBtn: 1,
+                move: false,
+                content: $("#groupTree"), // 本页面的元素
+                end:function () {
+                    vm.showGroupTree = true;
+                }
+            });
+        },
+        openGroupForm:function(title){
+            var index = layer.open({
+                area: ['50%', '400px'],
+                shade: 0,
+                title: title,
+                type: 1,
+                fixed: false,
+                maxmin: false,
+                scrollbar: false,
+                offset: 'r',
+                closeBtn: 1,
+                move: false,
+                content: $("#groupForm") // 本页面的元素
+            });
+            vm.currentZIndex = index;
+            return index;
+        },
+        closeGroupForm:function(){
+            layer.close(vm.currentZIndex);
+        },
+        closeGroupTree:function () {
+            layer.closeAll();
         }
     },
     created: function () {
@@ -846,9 +1387,16 @@ var vm = new Vue({
             if (vm.starts.length > 0 && flag) {// vm.nodeInfo.uuid != null 可加可不加 加上为只在修改上回显
                 vm.nodeInfo.cabinetStart = cloneNodeInfo.cabinetStart;
             }
+
+            // 7.关于起始位置提示
+            if(data.starts.length < 1 && data.nodeInfo.nodeRoom != null){
+                data.cabStartTitle = "<@spring.message 'node.notEnough.position'/>";
+            }else{
+                data.cabStartTitle = "<@spring.message 'common.pleaseSelect'/>";
+            }
         },
-        "selectedItem1": function(n, o) {
-        	if (n == 'IP') {
+        "selectedItem1": function(newValue, oldValue) {
+        	if (newValue == 'IP') {
         		this.showIp = true;
         		this.q.name = "";
         	} else {
@@ -856,12 +1404,17 @@ var vm = new Vue({
         		this.q.ip = "";
         	}
         },
-        "selectFlag1": function(n, o) {
-        	if (n) {
+        "selectFlag1": function(newValue, oldValue) {
+        	if (newValue) {
         		$(".ad-search-label").css("border-bottom", "0");
         	} else {
         		$(".ad-search-label").css("border-bottom", "1px solid #ccc");
         	}
+        },
+        "nodeInfo.type":function(newValue,oldValue){
+            if(newValue == null){
+                vm.nodeTags = [];
+            }
         }
     },
     computed: {}
diff --git a/nezha-admin/src/main/resources/templates/modules/detect/deteType.html b/nezha-admin/src/main/resources/templates/modules/detect/deteType.html
index aa68f75f..26c42e31 100644
--- a/nezha-admin/src/main/resources/templates/modules/detect/deteType.html
+++ b/nezha-admin/src/main/resources/templates/modules/detect/deteType.html
@@ -10,11 +10,11 @@
 <body>
 <div id="deteType" v-cloak>
     <div v-show="showList">
-        <div class="grid-btn">
-            <div class="form-group col-sm-2">
-                <input type="text" class="form-control" v-model.trim="params.name" @keyup.enter="query" placeholder="<@spring.message 'common.name'/>">
+        <div class="tools">
+            <div class="form-group">
+                <input type="text" class="form-control input-medium" v-model.trim="params.name" @keyup.enter="query" placeholder="<@spring.message 'common.name'/>">
             </div>
-            <a class="btn btn-default" @click="query" title="<@spring.message 'common.search'/>"><i class="fa fa-search"></i></a>
+            <a class="btn btn-default btn-search" @click="query" title="<@spring.message 'common.search'/>"><i class="fa fa-search"></i></a>
             <a class="btn btn-primary" @click="add" title="<@spring.message 'common.add'/>"><i class="fa fa-plus"></i></a>
             <a class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"><i class="fa fa-pencil-square-o"></i></a>
             <a class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"><i class="fa fa-trash-o"></i></a>
diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html b/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html
index db430ec7..3ec2604f 100644
--- a/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html
+++ b/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html
@@ -8,11 +8,24 @@
     .ztree {
     	padding: 1px 0 0 6px !important;
     }
+    .nodeList{
+        width: calc(100% - 250px);    /*根据页面宽度变化而变化*/
+        display: inline-block;
+        float:left
+    }
+    .content{
+        position: relative;
+        width: 250px;
+        display: inline-block;
+        padding-left: 15px;
+        float:left;
+        height: 100%;
+    }
     </style>
 </head>
 <body>
 
-<div id="app" class="" style="width: 250px;display: inline-block;padding-left: 15px;float:left" v-cloak>
+<div id="nodeGroupApp" class="content" v-cloak>
 
     <div class="mytree-title"><span class="mytreeicon mytreeicon-close"></span>
         <@spring.message 'system.system'/>
@@ -25,6 +38,7 @@
             :node="item"
             @addrootgroup="add"
             ref="gtree"> <!-- ref 为获取 组件 或 dom 时使用 -->
+
     </group-tree>
 
     <!-- 添加 / 修改 表单 -->
@@ -97,7 +111,7 @@
 </div>
 
 <!-- 节点列表 -->
-<div id="nodeInfoApp" class="" style="width: 77%;display: inline-block;float:left" v-cloak>
+<div id="nodeInfoApp" class="nodeList" v-cloak>
 
     <div class="form-group">
         <a class="" href="#" style="font-size: 16px;"><@spring.message 'node.list'/></a>
@@ -194,5 +208,9 @@
 <!--<script src="${request.contextPath}/statics/js/modules/node/nodeGroup.js"></script>-->
 <#include "/js/modules/node/nodeGroup.js">
 <#include "/js/modules/node/nodeInfo.js">
+<script>
+    // 滚动条
+    // var perfect = new PerfectScrollbar('.content');
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html b/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html
index a423c277..7f858c31 100644
--- a/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html
+++ b/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html
@@ -4,8 +4,10 @@
 <head>
     <title>节点管理</title>
     <#include "/header.html">
+    <link rel="stylesheet" href="${request.contextPath}/statics/css/detect.css">
 </head>
 <body>
+<!-- 节点APP -->
 <div id="nodeInfoApp" v-cloak>
 
     <!-- 列表  查询 -->
@@ -143,11 +145,11 @@
             </div>
 
             <!-- 设备标签 -->
-            <div class="form-group">
+            <div class="form-group"><!-- @open="checkNodeType()" -->
                 <div class="col-sm-2 control-label"><@spring.message 'node.tag'/></div>
                 <div class="col-sm-9">
                     <multiselect :options="nodeTags" label="value" :show-labels="false" :disabled="disabledFlag"
-                                 v-model="nodeInfo.tag" @open="checkNodeType()"
+                                 v-model="nodeInfo.tag"
                                  placeholder="<@spring.message 'common.pleaseSelect'/>"></multiselect>
                 </div>
             </div>
@@ -169,7 +171,7 @@
 
             <!-- 位置信息 -->
             <div class="form-group">
-                <div class="col-sm-2 control-label"><@spring.message 'node.position.information'/>:</div>
+                <div class="col-sm-2 control-label"><@spring.message 'node.position.information'/></div>
                 <div class="col-sm-9">
 
                     <div class="add-box2">
@@ -181,8 +183,8 @@
                                        :class="{'form-control--error': $v.nodeInfo.uSize.$dirty && !$v.nodeInfo.uSize.minValue || !$v.nodeInfo.uSize.integer}"
                                        v-model.trim="$v.nodeInfo.uSize.$model"
                                        placeholder="<@spring.message 'node.uSize'/>(U)"/>
-                                <span class=""
-                                      v-if="$v.nodeInfo.uSize.$dirty && !$v.nodeInfo.uSize.sizeRequired">*</span>
+                                <span class="add-box2-required-symbol"
+                                      v-if="nodeInfo.nodeRoom != null">*</span><!--$v.nodeInfo.uSize.$dirty && !$v.nodeInfo.uSize.sizeRequired-->
                                 <div class="form-control_error-msg"
                                      v-if="$v.nodeInfo.uSize.$dirty && !$v.nodeInfo.uSize.minValue  || !$v.nodeInfo.uSize.integer">
                                     <@spring.message 'validate.common.positiveInteger'/>
@@ -194,24 +196,26 @@
                             </div>
                         </div>
 
-                        <div class="form-group">
+                        <!-- 机房 -->
+                        <div class="form-group"> <!-- @open="checkUsize()" ,$v.nodeInfo.cabinetId.$touch(),$v.nodeInfo.uSize.$touch() -->
                             <div class="col-sm-3 control-label"><@spring.message 'node.room.name'/></div>
                             <div class="col-sm-8">
                                 <multiselect :options="rooms" label="roomName" :disabled="disabledFlag"
                                              :show-labels="false"
-                                             @close="getCabinets($event),$v.nodeInfo.cabinetId.$touch(),$v.nodeInfo.uSize.$touch()"
-                                             v-model="nodeInfo.nodeRoom" @open="checkUsize()"
+                                             @close="getCabinets($event)"
+                                             v-model="nodeInfo.nodeRoom"
                                              placeholder="<@spring.message 'common.pleaseSelect'/>"></multiselect>
                             </div>
                         </div>
 
-                        <div class="form-group">
+                        <!-- 机柜 -->
+                        <div class="form-group"> <!-- @open="checkNodeRoom()  ,$v.nodeInfo.cabinetStart.$touch(),$v.nodeInfo.uSize.$touch()" -->
                             <div class="col-sm-3 control-label"><@spring.message 'node.cabinet.name'/></div>
                             <div class="col-sm-8">
                                 <multiselect :options="cabinets" label="name" :disabled="disabledFlag"
                                              :show-labels="false"
-                                             @close="getStarts($event),$v.nodeInfo.cabinetStart.$touch(),$v.nodeInfo.uSize.$touch()"
-                                             v-model="nodeInfo.cabinetId" @open="checkNodeRoom()"
+                                             @close="getStarts($event)"
+                                             v-model="nodeInfo.cabinetId"
                                              placeholder="<@spring.message 'common.pleaseSelect'/>"></multiselect>
                                 <span class="add-box2-required-symbol"
                                       v-if="nodeInfo.nodeRoom != null">*</span>
@@ -222,17 +226,18 @@
                             </div>
                         </div>
 
-                        <div class="form-group">
+                        <!-- 起始位置 -->
+                        <div class="form-group"><!--  @open="checkCabStart()" -->
                             <div class="col-sm-3 control-label"><@spring.message 'node.cabinetStart'/></div>
                             <div class="col-sm-8" style="position:relative;">
                                 <multiselect :options="starts" :show-labels="false" :disabled="disabledFlag"
-                                             v-model="nodeInfo.cabinetStart" @open="checkCabStart()"
+                                             v-model="nodeInfo.cabinetStart"
                                              @blur="$v.nodeInfo.uSize.$touch()"
-                                             placeholder="<@spring.message 'common.pleaseSelect'/>"></multiselect>
+                                             :placeholder="cabStartTitle"></multiselect>
                                 <span class="add-box2-required-symbol"
                                       v-if="nodeInfo.nodeRoom != null">*</span>
                                 <div class="form-control_error-msg"
-                                     v-if="$v.nodeInfo.cabinetId.$dirty && !$v.nodeInfo.cabinetId.cabRequired || !$v.nodeInfo.cabinetStart.startRequired">
+                                     v-if="$v.nodeInfo.cabinetId.$dirty && !$v.nodeInfo.cabinetStart.startRequired">
                                     <@spring.message 'validate.common.required'/>
                                 </div>
                             </div>
@@ -294,6 +299,29 @@
                 </div>
             </div>
 
+            <!-- 选择节点组 -->
+            <div class="form-group">
+                <div class="col-sm-2 control-label">节点组</div>
+                <div class="col-sm-9">
+                    <div class="add-box">
+                        <div class="add-box_head">
+                            节点组
+                        </div>
+                        <div class="add-box_rows psNg">
+                            <div class="add-box_row" v-for="item in checkedGroups">
+                                <span class="add-box_row_item">{{item.absolutePath}}</span>
+                                <span class="add-box_op">
+	                            	<i @click="unCheckGroup(item)" class="fa fa-trash-o"></i>
+	                            </span>
+                            </div>
+                        </div>
+                        <div class="add-box_foot">
+                            <i @click="showNodeGroups" class="fa fa-plus"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <pre v-show="disabledFlag" style="text-align: center;color: red">此节点已和其他业务系统建立联系,点击保存和当前系统再次建立联系</pre>
 
             <!-- 保存 / 返回 -->
@@ -309,8 +337,123 @@
         </form>
 
     </div>
+
+    <!-- 节点组tree -->
+    <div v-show="!showGroupTree" id="groupTree" style="margin: 10px 0px 0px 30px">
+
+        <div class="mytree-title"><span class="mytreeicon mytreeicon-close"></span>
+            <@spring.message 'system.system'/>
+            <div style="clear:both"></div>
+        </div>
+        <template v-for="item in systems" >
+            <group-tree1
+                    :zNodes="item.nodegroups"
+                    :node="item"
+                    @addrootgroup="addNodeGroup"
+                    ref="gtree"
+                    @tree-select="selectedTreeDatas"
+                    @tree-unselect="unSelectedTreeDatas"> <!-- ref 为获取 组件 或 dom 时使用 -->
+
+            </group-tree1>
+        </template>
+    </div>
+
+
+    <!-- 添加 / 修改 表单 -->
+    <div v-show="!showGroupForm" id="groupForm">
+        <div class="panel panel-default">
+            <form class="form-horizontal">
+
+                <!-- 上级节点组 -->
+                <div class="form-group">
+                    <div class="col-sm-2 control-label"><@spring.message 'nodegroup.parent.group'/></div>
+                    <div class="col-sm-9">
+                        <input disabled type="text" class="form-control"
+                               v-model.trim="nodeGroupDto.parentGroup.name"
+                               placeholder="<@spring.message 'nodegroup.parent.group'/>"/>
+                        <span class="required-symbol">*</span>
+                    </div>
+                </div>
+
+                <!-- 业务系统 -->
+                <div class="form-group">
+                    <div class="col-sm-2 control-label"><@spring.message 'system.system'/></div>
+                    <div class="col-sm-9">
+                        <input disabled type="text" class="form-control" v-model.trim="system.name"
+                               placeholder="<@spring.message 'system.system'/>"/>
+                    </div>
+                </div>
+
+                <!-- 节点组名称 -->
+                <div class="form-group">
+                    <div class="col-sm-2 control-label"><@spring.message 'nodegroup.name'/></div>
+                    <div class="col-sm-9">
+                        <input type="text" class="form-control"
+                               :class="{'form-control--error': $v.nodeGroupDto.name.$dirty && !$v.nodeGroupDto.name.required}"
+                               v-model.trim="$v.nodeGroupDto.name.$model"
+                               placeholder="<@spring.message 'nodegroup.name'/>"/>
+                        <span class="required-symbol">*</span>
+                        <div class="form-control_error-msg"
+                             v-if="$v.nodeGroupDto.name.$dirty && !$v.nodeGroupDto.name.required">
+                            <@spring.message 'validate.common.required'/>
+                        </div>
+                        <div class="form-control_error-msg"
+                             v-if="$v.nodeGroupDto.name.$dirty && !$v.nodeGroupDto.name.groupNameCheck">
+                            <@spring.message 'validate.common.name.repeat'/>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 备注 -->
+                <div class="form-group">
+                    <div class="col-sm-2 control-label"> <@spring.message 'common.remark'/></div>
+                    <div class="col-sm-9">
+                        <input type="text" class="form-control" v-model.trim="nodeGroupDto.remark"
+                               placeholder="<@spring.message 'common.remark'/>"/>
+                    </div>
+                </div>
+            </form>
+
+            <!-- 保存 / 返回 -->
+            <div class="form-group_opbox" style="margin-bottom: 20px">
+                <div>
+                    <button title="<@spring.message 'common.submit'/>" type="button" class="btn btn-primary"
+                            style="width: 55px" @click="saveOrUpdateGroup"><i class="fa fa-check"></i></button>
+                    <div style="display:inline-block;width:10px;"></div>
+                    <button title="<@spring.message 'common.back'/>" type="button" class="btn btn-warning"
+                            style="width: 55px" @click="closeGroupForm"><i class="fa fa-reply"></i></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </div>
-</div>
+
+<!-- 节点组树结构模板 -->
+<template id="treeTemplate">
+    <div class="mytree-item">
+
+        <!-- 业务系统名称 + 添加按钮 -->
+        <div>
+            <span :id="'icon' + node.id" class="mytreeicon mytreeicon-open" @click="showTree(node)"></span>
+            <span class="mytree-subtitle" @mouseenter="showBtn(node)" @mouseleave="hideBtn(node)">
+                    <a :title="node.name" @click="showTree(node)">{{node.name}}</a>
+                <!-- 添加按钮 -->
+		           	<span :id="'icon2' + node.id" class="mytreeicon mytreeicon-add_unact" @mouseenter="showBtn2(node)"
+                          @mouseleave="hideBtn2(node)" @click="addRootGroup"
+                          title="<@spring.message 'common.add'/><@spring.message 'nodegroup.root.group'/>"></span>
+	           	</span>
+        </div>
+
+        <!-- 树 div -->
+        <div style="clear:both"></div>
+        <div class="mytree-box" :id="'box' + node.id">
+            <ul :id="'treeDemo'+node.id" class="ztree"></ul>
+        </div>
+        <div style="clear:both"></div>
+
+    </div>
+</template>
 <!--<script src="${request.contextPath}/statics/js/modules/node/nodeInfo.js"></script>-->
 <#include "/js/modules/node/nodeInfo.js">
 
@@ -339,5 +482,9 @@
     }
 
 </style>
+<script>
+    // 选择节点组DIV滚动条
+    var perfect = new PerfectScrollbar('.psNg');
+</script>
 </body>
 </html>
\ No newline at end of file