监测类别添加重构（初版）

8 files changed, 1524 insertions, 668 deletions

diff --git a/nezha-admin/src/main/resources/application.yml b/nezha-admin/src/main/resources/application.yml
index 3940790f..ab9cc1f6 100644
--- a/nezha-admin/src/main/resources/application.yml
+++ b/nezha-admin/src/main/resources/application.yml
@@ -4,7 +4,7 @@ server:
     uri-encoding: UTF-8
     max-threads: 1000
     min-spare-threads: 30
-  port: 8080
+  port: 8081
   servlet:
     context-path: /nezha-admin
 
diff --git a/nezha-admin/src/main/resources/statics/css/addDetectType.css b/nezha-admin/src/main/resources/statics/css/addDetectType.css
new file mode 100644
index 00000000..4268fa59
--- /dev/null
+++ b/nezha-admin/src/main/resources/statics/css/addDetectType.css
@@ -0,0 +1,200 @@
+/*滚动条颜色*/
+.ps__thumb-y {
+    background-color: #ddd;
+}
+/*将滚动条放在最顶层*/
+.ps__rail-y{
+    top: 32px;
+    right: 0px;
+    height: 135px;
+    z-index:99999;
+}
+.add-box{
+    font-size:13px;
+    border:1px solid #cccccc;
+    width:90%;
+    border-radius:4px;
+}
+
+.add-box_head {
+    border-bottom: 1px solid #cccccc;
+    padding: 7px 10px 4px 10px;
+}
+.add-box_head_meta, .add-box_row1_meta {
+    display: inline-block;
+    width: 25%;
+}
+.add-box_head_param, .add-box_row1_param {
+    display: inline-block;
+    width: 45%;
+}
+.add-meta-box_rows {
+    padding: 3px 0;
+    position:relative;
+    height:135px;
+}
+.add-param-box_rows {
+    padding: 3px 0;
+    position:relative;
+    height:100%;
+}
+.add-box_row {
+    line-height: 23px;
+    position: relative;
+    padding: 3px 10px;
+}
+
+.add-box_tag1, .add-box_tag2 {
+    font-size: 12px;
+    display: inline-block;
+    color: white;
+    line-height: 18px;
+    padding: 0 5px;
+    border-radius: 4px;
+}
+.add-box_tag1 {
+    background-color: #3c8dbc;
+}
+.add-box_tag2 {
+    background-color: #55c8c3;
+}
+.add-box_op {
+    position: absolute;
+    right: 30px;
+    color: #777777;
+    cursor: pointer;
+    top:10px;
+}
+.add-box_del {
+    position: absolute;
+    right: 10px;
+    color: red;
+    cursor: pointer;
+    top:10px;
+}
+.add-box_rec {
+    position: absolute;
+    right: 10px;
+    color: lightgreen;
+    cursor: pointer;
+    top:10px;
+}
+
+.add-box_ok {
+    position: absolute;
+    right: 10px;
+    cursor: pointer;
+    top:10px;
+}
+
+.add-box_foot {
+    height: 23px;
+    line-height: 23px;
+    text-align: center;
+}
+.add-box_foot>span, .meta-win_list-foot>span {
+    cursor: pointer;
+}
+.metatype-question {
+    display: inline-block;
+    margin-left: 2px;
+    color: #ccc;
+    cursor: pointer;
+    font-size: 14px;
+}
+.metatype-question:hover {
+    color: #3c8dbc;
+}
+
+.meta-details {
+    display:inline-block;
+    padding-top: 18px;
+    width: 400px;
+}
+.meta-details .form-horizontal {
+    width:400px;
+}
+.meta-win_list{
+    float:left;
+    display:inline-block;
+    position:relative;
+    width:180px;
+    height:100%;
+    background-color:#eeeeee;
+
+}
+.meta-win_list-foot {
+    margin: 0 auto;
+    height: 72px;
+    line-height: 72px;
+    text-align: center;
+    font-size: 16px;
+    border-bottom: 1px solid #ffffff;
+    position: relative;
+    top:3px;
+}
+.meta-win_item {
+    padding: 15px 7px 7px 15px;
+    border-bottom: 1px solid #ffffff;
+    position: relative;
+    word-wrap:break-word;
+}
+.meta-win_item_name{
+    font-size:14px;
+    line-height:30px;
+}
+
+.meta-win_item_name_unpass{
+    color:red;
+}
+
+.meta-win_item_name_del{
+    text-decoration: line-through;
+}
+
+.meta-win_item_active {
+    background-color: white;
+}
+.form-group_opbox_meta-model {
+    padding-left: 180px;
+}
+
+.r-dete-meta-detail{
+    display:none;
+}
+
+.shadow{
+    display:none;
+    position:absolute;
+    top:0%;
+    width:100%;
+    height:100%;
+    background-color:#eeeeee;;
+    z-index:1001;
+    -moz-opacity:0.7;
+    opacity:.70;
+    filter:alpha(opacity=70);
+}
+
+.active{
+    background-color: #F5F5F5;
+}
+.success{
+    background-color: #DFF0D8;
+}
+.warning{
+    background-color: #FDF8E4;
+}
+.danger{
+    background-color: #F2DEDF;
+}
+.form-group-left {
+    width: 45%;
+}
+.form-group-right {
+    width: 53.8%;
+}
+
+.text-disabled{
+    color:#cccccc;
+}
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/js/modules/detect/addType.js b/nezha-admin/src/main/resources/templates/js/modules/detect/addType.js
new file mode 100644
index 00000000..e1774a55
--- /dev/null
+++ b/nezha-admin/src/main/resources/templates/js/modules/detect/addType.js
@@ -0,0 +1,908 @@
+<script>
+$(function(){
+    var ps1 = new PerfectScrollbar('.meta-win_list');
+    // var ps2 = new PerfectScrollbar('.add-param-box_rows');
+    var ps3 = new PerfectScrollbar('.add-meta-box_rows');
+})
+Vue.use(window.vuelidate.default);
+Vue.component('multiselect', window.VueMultiselect.default);
+//引用校验规则   所有校验规则见   https://vuelidate.netlify.com/#sub-v-values
+var required = window.validators.required;
+var helpers = window.validators.helpers;
+var integer = window.validators.integer;
+
+Vue.directive('id', function (el, binding, vnode) {
+        el.id = binding.arg + "-" + binding.value;
+    }
+)
+
+
+/*自定义校验规则*/
+//监测类别名称重复性验证
+var nameRepeat = function (name, deteType) {
+    if (helpers.req(name) && helpers.req(deteType)) {
+        var params = "?name=" + name;
+        if (deteType.id) {
+            params += "&id=" + deteType.id;
+        }
+        var flag = true;
+        $.ajax({
+            type: "get",
+            url: baseURL + "/deteType/nameCheck" + params,
+            async: false, //关闭异步，否则会在执行完ajax前就跳到下一段代码
+            dataType: "json",
+            success: function (r) {
+                if (r.code != 200) {
+                    flag = false;
+                }
+            }
+        });
+        return flag;
+    } else {
+        return true;
+    }
+
+}
+//统一页面内 名称是否重复 params：数组 index当前检验的元素的下标（排除自己）
+var inPageNameRepeat=function(params,index){
+    return helpers.withParams({type:inPageNameRepeat},function(value){
+        if(helpers.req(value)){
+            for (let i in params){
+                if(i!=index){
+                    var param=params[i];
+                    if(helpers.req(param.name)){
+                        if(param.name==value){
+                            return false;
+                        }
+                    }
+
+                }
+            }
+        }
+        return true;
+    })
+}
+
+var meta=Vue.extend({
+    template:"#detectMata",
+    components: {},
+    props: {
+        deteMeta:{
+            type:Object,
+            required:true
+        },
+        deteMetas:{
+            type:Array,
+            required:true
+        },
+        index:{
+            type:Number,
+            required:true
+        },
+        deteMethod:{
+            type:Object,
+            required:true
+        },
+        fieldTypes:{
+            type:Array,
+            required:true
+        },
+        dataTypes:{
+            type:Array,
+            required:true
+        },
+        dicTypes:{
+            type:Array,
+            required:true
+        },
+        delMeta:{
+            type:Function,
+            required:true
+        }
+    },
+    data: function () {
+        return {
+            metaDomIdKey:"r-meta-id",
+            metaDetailDomIdKey:"r-meta-detail-id",
+            metaDomSelector:"",
+            metaDetailDomSelector:"",
+            metaDom:null,
+            metaDetailDom:null,
+            nameRepeat:false
+        }
+    },
+    validations:function(){
+        var temp=this;
+        if("2"==this.deteMethod.code){
+            return {
+                deteMeta:{
+                    name: {
+                        required,
+                        inPageNameRepeat:inPageNameRepeat(temp.deteMetas,temp.index)
+                    },
+                    fieldType: {
+                        required
+                    },
+                    dataType: {
+                        required
+                    },
+                    dataLenth: {
+                        required,
+                        integer
+                    },
+                    oid: {
+                        required
+                    },
+                    unit: {
+                        required
+                    },
+                    dicType: {},
+                    remark: {}
+                }
+            }
+        }else{
+            return {
+                deteMeta:{
+                    name: {
+                        required,
+                        inPageNameRepeat:inPageNameRepeat(temp.deteMetas,temp.index)
+                    },
+                    fieldType: {
+                        required
+                    },
+                    dataType: {
+                        required
+                    },
+                    dataLenth: {
+                        required,
+                        integer
+                    },
+                    oid: {},
+                    unit: {
+                        required
+                    },
+                    dicType: {},
+                    remark: {}
+                }
+            }
+        }
+
+
+    },
+    created:function(){
+
+    },
+    methods: {
+        init:function(){
+            var temp=this;
+            temp.metaDomSelector="#"+temp.metaDomIdKey+"-"+temp.index;
+            temp.metaDetailDomSelector="#"+temp.metaDetailDomIdKey+"-"+temp.index;
+            temp.metaDom=$(temp.metaDomSelector);
+            temp.metaDetailDom=$(temp.metaDetailDomSelector);
+            temp.metaDom.off("click").on("click",temp.metaDomClick)
+            temp.metaDetailDom.appendTo($("#meta-details"));
+            if(temp.deteMeta.delFlag=='1'){
+                temp.addShadow();
+            }
+        },
+        afterHide:function(e){
+
+        },
+        addMeta:function(){
+
+        },
+        metaDomClick:function(){
+            var temp=this;
+            $(".meta-win_item").removeClass("meta-win_item_active");
+            temp.metaDom.addClass("meta-win_item_active");
+            $(".r-dete-meta-detail").hide();
+            temp.$emit('swap-meta',temp.index);
+            temp.metaDetailDom.show();
+            temp.$emit("up-meta",temp.deteMeta)
+        },
+        delSelf:function(index){
+            var temp=this;
+            if(temp.deteMeta.new){
+                temp.delMeta(index);
+                temp.metaDetailDom.remove();
+            }else{
+                temp.deteMeta.delFlag='1';
+                temp.addShadow();
+            }
+
+        },
+        recSelf:function(){
+            this.deteMeta.delFlag='0';
+            this.removeShadow();
+        },
+        validate:function(){
+            var temp=this;
+            temp.$v.deteMeta.$touch();
+            temp.deteMeta.passFlag=!temp.$v.deteMeta.$error;
+        },
+        addShadow:function(){
+            $(this.metaDetailDomSelector+">.shadow").show();
+        },
+        removeShadow:function(){
+            $(this.metaDetailDomSelector+">.shadow").hide();
+        },
+        mouseAt: function(id) {
+            layer.open({
+                type: 4,
+                content: [$("#items" + id).html(), "#position"+id+this.index],
+                tips: [4, "#41B883"],
+                closeBtn: 0,
+                shade: 0
+            })
+        },
+        mouseout: function(){
+            layer.closeAll("tips");
+        },
+        // warnNameRepeat:function(){
+        //     this.nameRepeat=true;
+        // },
+        // removeNameRepeatWarn:function(){
+        //     this.nameRepeat=false;
+        // }
+
+    },
+    computed: {},
+    watch: {
+        '$v.deteMeta': {
+            handler() {
+                var temp=this;
+                var v=temp.$v.deteMeta;
+                if(v.name.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+                if(v.fieldType.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+                if(v.dataType.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+                if(v.dataLenth.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+                if(v.oid.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+                if(v.unit.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+                if(v.dicType.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+                if(v.remark.$anyError){
+                    temp.deteMeta.passFlag=false;
+                    return ;
+                }
+
+                temp.deteMeta.passFlag=true;
+            },
+            deep: true
+        },
+        'deteMeta.delFlag':function(){
+            if('1'==this.deteMeta.delFlag){
+                this.delSelf(this.index)
+            }
+        },
+        // 'deteMeta.name':function(){
+        //     this.$emit('name-check',this.deteMeta.name);
+        // }
+    },
+    mounted: function () {
+        this.init();
+    }
+})
+
+var addMeta=Vue.extend({
+    template:"#addDetectMata",
+    components: {
+        "detect-meta":meta
+    },
+    props: {
+        deteMetas:{
+            type:Array,
+            required:true
+        },
+        deteMethod:{
+            type:Object,
+            required
+        },
+        fieldTypes:{
+            type:Array,
+            required:true
+        },
+        dataTypes:{
+            type:Array,
+            required:true
+        },
+        dicTypes:{
+            type:Array,
+            required:true
+        }
+    },
+    data: function () {
+        return {
+            counter:1,
+            reset:true,
+            beforeIndex:null
+        }
+    },
+    validations:function(){
+
+
+    },
+    created:function(){
+
+    },
+    methods: {
+        addMeta:function(){
+            var name='TEMP-'+this.counter;
+            var meta={
+                id: null,
+                name: name,
+                fieldType: {
+                    code:"3",
+                    value:"TEMP"
+                },
+                dataType: {
+                    code:'3',
+                    value:"STRING"
+                },
+                dataLenth: 100,
+                oid: '',
+                unit: '',
+                dicType: '',
+                remark: '',
+                delFlag: '0',
+                new:true,
+                passFlag:true
+            };
+            this.deteMetas.push(meta);
+            this.counter++;
+        },
+        delMeta:function(index){
+            this.deteMetas.splice(index,1);
+            $("#meta-details").html("");
+            this.resetDom();
+        },
+        getOpMeta:function(deteMeta){
+            var temp=this;
+            temp.opDeteMeta=deteMeta;
+        },
+        resetDom: function () {//强制刷新dom
+            var temp = this;
+            temp.reset = false;
+            temp.$nextTick(() => {
+                temp.reset = true
+            });
+        },
+        swapMeta:function(index){
+            var temp=this;
+            /*校验上一个*/
+            if(typeof(temp.beforeIndex)=='number'){
+                var componet=temp.$refs['r-detect-meta'][temp.beforeIndex];
+                if(componet!=undefined){
+                    componet.validate();
+                }
+
+            }
+
+            if(typeof(index)=='number'){
+                temp.beforeIndex=index;
+            }
+            /*检验出当前点击的全部*/
+            // var componets=temp.$refs['r-detect-meta'];
+            // for (let i in componets){
+            //     if(i==index){
+            //         continue;
+            //     }
+            //     var componet=componets[i];
+            //     componet.validate();
+            // }
+
+        },
+        // nameRepeatCheck:function(name){
+        //     console.info("name type-->"+(typeof name))
+        //     var temp=this;
+        //     var componets=temp.$refs['r-detect-meta'];
+        //     if(name!=undefined&&name!=null&&name!=''&&typeof name=='string'){
+        //         for (let index in temp.deteMetas){
+        //             var meta=temp.deteMetas[index];
+        //             if(meta.name==name){
+        //                 componets[index].warnNameRepeat();
+        //             }else{
+        //                 componets[index].removeNameRepeatWarn();
+        //             }
+        //         }
+        //     }
+        // }
+
+    },
+    computed: {},
+    watch: {
+        // rowData: {
+        //     handler() {
+        //         this.init();
+        //     },
+        //     deep: true
+        // }
+    },
+    mounted: function () {
+
+    }
+})
+
+var addParam=Vue.extend({
+    template:"#addDetectParam",
+    components: {
+
+    },
+    props: {
+        deteParam:{
+            type:Object,
+            required:true
+        },
+        index:{
+            type:Number,
+            required:true
+        },
+        deteParams:{
+            type:Array,
+            required:true
+        }
+    },
+    data: function () {
+        return {
+            editSwitch:false,
+            listPreKey:'r-detect-param-list',
+            editPreKey:'r-detect-param-edit',
+            listSelector:'',
+            editSelector:'',
+            listDom:null,
+            editDom:null
+        }
+    },
+    validations:function(){
+        var temp=this;
+        return {
+            deteParam:{
+                name:{
+                    required,
+                    inPageNameRepeat:inPageNameRepeat(temp.deteParams,temp.index)
+                },
+                defVal:{
+                    required
+                }
+            }
+        }
+
+
+    },
+    created:function(){
+
+    },
+    methods: {
+        init:function(){
+            var temp=this;
+            temp.listSelector="#"+temp.listPreKey+"-"+temp.index;
+            temp.editSelector="#"+temp.editPreKey+"-"+temp.index;
+            temp.listDom=$(temp.listSelector);
+            temp.editDom=$(temp.editSelector);
+            if(temp.deteParam.new!=undefined&&temp.deteParam.new!=null&&temp.deteParam.new){
+                temp.editSwitch=true;
+                temp.listDom.parent().attr("draggable",'false');
+            }
+            //解决火狐弹出新选项卡的问题
+            $("#r-dete-param-container").bind('drop',function(event){
+                event.preventDefault();
+                event.stopPropagation();
+            });
+            temp.listDom.parent().bind("dragstart",temp.dragStartFunc);
+            temp.listDom.parent().bind("dragend",temp.dragEndFunc);
+            temp.listDom.parent().bind("dragenter",temp.dragEnterFunc);
+            temp.listDom.parent().bind("dragover",temp.dragOverFunc);
+            temp.listDom.parent().bind("dragleave",temp.dragLeaveFunc);
+            temp.listDom.parent().bind("drop",temp.dropFunc);
+
+
+        },
+        dragStartFunc:function(event){//拖拽开始时将被拖拽元素透明度设置为50%
+            this.editSwitch=false;
+            var event = event.originalEvent;
+            event.target.style.opacity = .5;
+            var index = $(event.target).attr('index');
+            //firefox 必须添加
+            event.dataTransfer.setData("index",index);
+        },
+        dragEndFunc:function(event){//拖拽之后恢复被拖拽元素的透明度
+            var event = event.originalEvent;
+            event.target.style.opacity = 1;
+        },
+        dragEnterFunc:function(event){//将元素拖入当前元素
+            var event = event.originalEvent;
+            event.target.style.backgroundColor='#eeeeee';
+        },
+        dragOverFunc:function(event){//google chrome,opera需要添加
+            event.originalEvent.preventDefault();
+        },
+        dragLeaveFunc:function(event){//将元素拖离当前元素
+            var event = event.originalEvent;
+            event.target.style.backgroundColor='';
+        },
+        dropFunc:function(event){//将元素释放到当前元素中
+            var event = event.originalEvent;
+            var index = event.dataTransfer.getData("index");
+            //重置背景色
+            event.target.style.backgroundColor='';
+
+            this.$emit("ask-for-swap",index,this.index);
+
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        editSelf:function(){
+            var temp=this;
+            if(temp.deteParam.delFlag=='0'){
+                temp.editSwitch=true;
+                temp.listDom.parent().attr("draggable",'false');
+            }else{
+                return false;
+            }
+
+        },
+        delSelf:function(e){
+            var temp=this;
+            var p=temp.deteParam;
+            if(p.new!=undefined&&p.new!=null&&p.new){
+                temp.$emit("del-param",this.index);
+            }else{
+                $("#add-box_op_edit_"+temp.index).bind('mouseover',function(event){
+                    event.target.style.cursor='not-allowed';
+                });
+                p.delFlag='1';
+            }
+
+        },
+        recSelf:function(e){
+            var temp=this;
+            temp.listDom.removeClass('text-disabled');
+            $("#add-box_op_edit_"+temp.index).bind('mouseover',function(event){
+                event.target.style.cursor='pointer';
+            });
+            temp.deteParam.delFlag='0';
+        },
+        submitSelf:function(){
+            var temp=this;
+
+            temp.$v.deteParam.$touch();
+
+            if(temp.$v.deteParam.$error){
+                temp.showNameWarningMsg();
+                temp.showDefValWarningMsg();
+                return ;
+            }
+
+            temp.editSwitch=false;
+            temp.listDom.parent().attr("draggable",'true');
+
+        },
+        showNameWarningMsg:function(){
+            var temp =this;
+            if(temp.$v.deteParam.name.$anyError){
+                $("#r-param-name-input-"+temp.index).blur();
+                var msg='';
+                if(temp.$v.deteParam.name.$dirty&&!temp.$v.deteParam.name.required){
+                    msg="<div class=\"form-control_error-msg\">必填项</div>"
+                }
+                if(temp.$v.deteParam.name.$dirty&&!temp.$v.deteParam.name.inPageNameRepeat){
+                    msg="<div class=\"form-control_error-msg\">名称重复</div>"
+                }
+                if(temp.editSwitch){
+                    layer.tips(msg, "#r-param-name-input-"+temp.index,{
+                        tips:[1, "white"],
+                        tipsMore:true
+                    });
+                }
+
+
+            }
+
+        },
+        showDefValWarningMsg:function(){
+            var temp=this;
+            if(temp.$v.deteParam.defVal.$anyError){
+                $("#r-param-defval-input-"+this.index).blur();
+                var msg='';
+                if(temp.$v.deteParam.defVal.$dirty&&!temp.$v.deteParam.defVal.required){
+                    msg="<div class=\"form-control_error-msg\">必填项</div>"
+                }
+                if(temp.editSwitch){
+                    layer.tips(msg, "#r-param-defval-input-"+temp.index,{
+                        tips:[1, "white"],
+                        tipsMore:true
+                    });
+                }
+
+            }
+        }
+
+    },
+    computed: {},
+    watch: {
+        "$v.deteParam.name": {
+            handler() {
+                this.showNameWarningMsg();
+            },
+            deep: true
+        },
+        "$v.deteParam.defVal": {
+            handler() {
+                this.showDefValWarningMsg();
+            },
+            deep: true
+        }
+    },
+    mounted: function () {
+        this.init();
+    }
+})
+var addType=Vue.extend({
+    template:"#addTypeTemplate",
+    components: {
+        "nz-add-meta":addMeta,
+        "nz-add-param":addParam
+    },
+    props: {
+        typeId:{
+
+        }
+    },
+    data: function () {
+        return {
+            title:"监测类别",
+            deteType:{
+                id: null,
+                name: '',
+                viewLevel: 2,
+                method: 1,
+                deteInterval: 60,
+                content: '',
+                i18nCode: '',
+                remark: '',
+                deteTypeMetas: [],
+                deteTypeParams: []
+            },
+            deteMethods:[],
+            defaultMethod:{},
+            fieldTypes:[],
+            dataTypes:[],
+            dicTypes:[],
+            reset:true
+        }
+    },
+    validations:{
+
+        deteType: {
+            name: {
+                required,
+                nameRepeat
+            },
+            method: {},
+            deteInterval: {
+                integer
+            },
+            content: {},
+            i18nCode: {
+                required
+            },
+            remark: {}
+        }
+
+    },
+    created:function(){
+        this.init();
+    },
+    methods: {
+        init:function(){
+            var temp=this;
+            temp.getDeteMethods();
+            temp.getFieldTypes();
+            temp.getDataTypes();
+            temp.getDicTypes();
+            temp.initDeteType();
+        },
+        initDeteType:function(){
+            var temp=this;
+            console.log("typeId-->"+temp.typeId)
+            if(temp.typeId==null){
+               temp.deteType={
+                   id: null,
+                   name: '',
+                   viewLevel: 2,
+                   method: 1,
+                   deteInterval: 60,
+                   content: '',
+                   i18nCode: '',
+                   remark: '',
+                   deteTypeMetas: [],
+                   deteTypeParams: []
+               }
+            }else{
+                temp.getTypeInfo();
+            }
+        },
+        getTypeInfo: function () {
+            var temp=this;
+            $.get(baseURL + "deteType/detail?id=" + temp.typeId, function (r) {
+                temp.deteType = r.data;
+                temp.formatDeteTypeToObject();
+            });
+        },
+        getDeteMethods:function(){
+            var temp=this;
+            $.getJSON(baseURL + "sys/dict/all?type=dtmethond&_" + $.now(), function (r) {
+                for (let dic of r.data) {
+                    var m={
+                        code:dic.code,
+                        value:dic.value,
+                    }
+                    if("1"==dic.code){
+                        temp.defaultMethod=m;
+                    }
+                    temp.deteMethods.push(m);
+                }
+            });
+        },
+        openMetaWindow: function(i) {
+            var metaComponets=this.$refs.addMetaWindow.$refs["r-detect-meta"];
+            var index = layer.open({
+                area: ['600px', '100%'],
+                shade: 0,
+                title: "元数据",
+                type: 1,
+                maxmin: false,
+                scrollbar: false,
+                offset: 'r',
+                closeBtn: 1,
+                move: false,
+                content: $("#metaWindow"),
+                zIndex: layer.zIndex,
+                success: function(layero){
+                    layer.setTop(layero); //重点2
+                },
+                cancel:function(){
+                    if(metaComponets!=null&&metaComponets!=undefined&&metaComponets.length>0){
+                        for(let componet of metaComponets){
+                            componet.validate();
+                        }
+                    }
+
+                }
+            });
+
+            if(typeof(i)=="number"){
+                metaComponets[i].metaDomClick();
+            }
+
+
+        },
+        getFieldTypes:function(){
+            var temp=this;
+            $.getJSON(baseURL + "sys/dict/all?type=fieldType&_" + $.now(), function (r) {
+                for (var i = 0; i < r.data.length; i++) {
+                    var m = {"code": r.data[i].code, "value": r.data[i].value,"remark":r.data[i].remark}
+                    temp.fieldTypes.push(m);
+                }
+            });
+        },
+        getDataTypes: function () {
+            var temp=this;
+            $.getJSON(baseURL + "sys/dict/all?type=dataType&_" + $.now(), function (r) {
+                for (var i = 0; i < r.data.length; i++) {
+                    var m = {"code": r.data[i].code, "value": r.data[i].value,"remark":r.data[i].remark}
+                    temp.dataTypes.push(m);
+                }
+            });
+        },
+        getDicTypes: function () {
+            var temp=this;
+            $.getJSON(baseURL + "deteType/dicList?limit=999&_" + $.now(), function (r) {
+                for (var i = 0; i < r.data.list.length; i++) {
+                    temp.dicTypes.push(r.data.list[i])
+                }
+            });
+        },
+        spliteName:function(name){
+            if(name.length>20){
+                return name.substr(0,19)+"..."
+            }else{
+                return name;
+            }
+        },
+        formatDeteTypeToSimple: function () {
+            var temp=this;
+            $.each(temp.deteType.deteTypeMetas, function (i, v) {
+                temp.deteType.deteTypeMetas[i].fieldType = v.fieldType.code;
+                temp.deteType.deteTypeMetas[i].dataType = v.dataType.code;
+            });
+        },
+        formatDeteTypeToObject: function () {
+            var temp=this;
+            $.each(temp.deteType.deteTypeMetas, function (index, value) {
+                for (var i = 0; i < temp.fieldTypes.length; i++) {
+                    if (temp.fieldTypes[i].code == value.fieldType) {
+                        temp.deteType.deteTypeMetas[index].fieldType = temp.fieldTypes[i];
+                    }
+                }
+
+                for (var i = 0; i < temp.dataTypes.length; i++) {
+                    if (temp.dataTypes[i].code == value.dataType) {
+                        temp.deteType.deteTypeMetas[index].dataType = temp.dataTypes[i];
+                    }
+                }
+            });
+        },
+        delMeta:function(index){
+            var temp=this;
+            var meta=temp.deteType.deteTypeMetas[index];
+            if(meta.new!=undefined&&meta.name!=null&&meta.new){
+                temp.deteType.deteTypeMetas.splice(index,1);
+            }else{
+                meta.delFlag='1';
+            }
+        },
+        swapParam:function(srcIndex,destIndex){
+            var temp=this;
+            var srcParam=temp.deteType.deteTypeParams[srcIndex];
+            var destParam=temp.deteType.deteTypeParams[destIndex];
+
+            temp.deteType.deteTypeParams.splice(srcIndex,1,destParam)
+            temp.deteType.deteTypeParams.splice(destIndex,1,srcParam)
+
+        },
+        addParam:function(){
+            var temp=this;
+            var param={
+                id:null,
+                name:'',
+                defVal:'',
+                delFlag:'0',
+                new:true
+            }
+            temp.deteType.deteTypeParams.push(param);
+        },
+        delParam:function(index){
+            var temp=this;
+            temp.deteType.deteTypeParams.splice(index,1)
+        },
+        resetDom: function () {//强制刷新dom
+            var temp = this;
+            temp.reset = false;
+            temp.$nextTick(() => {
+                temp.reset = true
+            });
+        },
+
+    },
+    computed: {},
+    watch: {
+        typeId:function(){
+            this.getTypeInfo();
+        }
+    },
+    mounted: function () {
+
+    }
+})
+
+</script>
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/js/modules/detect/deteSet.js b/nezha-admin/src/main/resources/templates/js/modules/detect/deteSet.js
index a11626f8..9f756cb1 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/detect/deteSet.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/detect/deteSet.js
@@ -52,6 +52,7 @@ $(function () {
 // Vue.component("select-panel", pannel);
 // Vue.component("left-tree", znodeTree);
 Vue.component("nz-node-selector",selector);
+Vue.component("nz-detect-addtype",addType)
 // Vue.component("right-table",gqGridTable);
 
 var nameRepeat = function (name, deteSet) {
@@ -118,7 +119,9 @@ var vm = new Vue({
         nodeOrGroupEmptyMsg:"",
         deteTypeIsNull:false,
         userGroupsEmpty:false,
-        selectorReset:true
+        selectorReset:true,
+        openAddTypeWindow:false,
+        typeId:null
     },
     created: function () {
         this.getSetState();
@@ -336,6 +339,25 @@ var vm = new Vue({
             });
             var ps3 = new PerfectScrollbar('.nodeTree');
         },
+        openAddTypePannel: function () {
+            var index = layer.open({
+                area: ['1000px', '100%'],
+                shade: 0,
+                title: "",
+                type: 1,
+                maxmin: false,
+                scrollbar: false,
+                offset: 'r',
+                closeBtn: 1,
+                move: false,
+                content: $("#add-type-layer-view"),
+                zIndex: layer.zIndex,
+                success: function(layero){
+                    layer.setTop(layero); //重点2
+                },
+            });
+            var ps3 = new PerfectScrollbar('.nodeTree');
+        },
         getTabDatas:function(tabData){
             vm.nodeInfosChecked=tabData;
         },
@@ -455,6 +477,10 @@ var vm = new Vue({
             temp.$nextTick(() => {
                 temp.selectorReset = true
             });
+        },
+        openAddDetectType:function(index){
+            this.openAddTypeWindow=true;
+            this.openAddTypePannel();
         }
     },
     watch:{
diff --git a/nezha-admin/src/main/resources/templates/js/modules/detect/deteType.js b/nezha-admin/src/main/resources/templates/js/modules/detect/deteType.js
index be2017e6..39e57430 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/detect/deteType.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/detect/deteType.js
@@ -47,313 +47,47 @@ $(function () {
     });
 });
 
-var steps = ['<@spring.message "deteType"/>', '<@spring.message "deteTypeMeta"/>', '<@spring.message "deteTypeParam"/>'];
-
-/*自定义校验规则*/
-var nameRepeat = function (name, deteType) {
-    if (helpers.req(name) && helpers.req(deteType)) {
-        var params = "?name=" + name;
-        if (deteType.id) {
-            params += "&id=" + deteType.id;
-        }
-        var flag = true;
-        $.ajax({
-            type: "get",
-            url: baseURL + "/deteType/nameCheck" + params,
-            async: false, //关闭异步，否则会在执行完ajax前就跳到下一段代码
-            dataType: "json",
-            success: function (r) {
-                if (r.code != 200) {
-                    flag = false;
-                }
-            }
-        });
-        return flag;
-    } else {
-        return true;
-    }
-
-}
-
+Vue.component("nz-detect-addtype",addType)
 var vm = new Vue({
     el: '#deteType',
     data: {
-        yes: true,
-        no: false,
-        deteType: {
-            id: null,
-            name: '',
-            viewLevel: 2,
-            method: 1,
-            deteInterval: 60,
-            content: '',
-            i18nCode: '',
-            remark: '',
-            deteTypeMetas: [
-                {
-                    id: null,
-                    name: '',
-                    fieldType: null,
-                    dataType: null,
-                    dataLenth: null,
-                    oid: '',
-                    unit: '',
-                    dicType: '',
-                    remark: '',
-                    delFlag: '0'
-                }
-            ],
-            deteTypeParams: [
-                {
-                    id: null,
-                    name: '',
-                    defVal: '',
-                    remark: '',
-                    delFlag: '0'
-                }
-            ]
-        },
         params: {
             name: ''
         },
         showList: true,
         title: 'title',
-        curStep: 0,
-        metaCount: 1,
-        paramCount: 1,
-        deteMethods: [],//监测方式对象数组，getDeteMethod()中初始化,用于表单
-        deteMethod: {}, //接收监测方式对象，在watch中对method 参数赋值
-        deteMethodsArr: [], //监测方式数组，getDeteMethod()中初始化,用于列表展示
-        fieldTypes: [],//字段类型数组
-        fieldType: [],
-        dataTypes: [],//数据类型数组
-        dataType: [], //数据类型对象
-        dicTypes: [],//mapping type数组
-        validation: {
-            meta: [false],
-            param: [false]
-        }
-    },
-    validations: function () {
-        if (this.deteType.method == 2) {//snmp 监测
-            return { //定义校验规则
-                deteType: {
-                    name: {
-                        required,
-                        nameRepeat
-                    },
-                    method: {},
-                    deteInterval: {
-                        integer
-                    },
-                    content: {},
-                    i18nCode: {required},
-                    remark: {},
-                    deteTypeMetas: {
-                        $each: {
-                            name: {
-                                required
-                            },
-                            fieldType: {
-                                required
-                            },
-                            dataType: {
-                                required
-                            },
-                            dataLenth: {
-                                required,
-                                integer
-                            },
-                            oid: {
-                                required
-                            },
-                            unit: {
-                                required
-                            },
-                            dicType: {},
-                            index: {}
-                        }
-                    },
-                    deteTypeParams: {
-                        $each: {
-                            name: {
-                                required
-                            },
-                            defVal: {
-                                required
-                            },
-                            remark: '',
-                            delFlag: '0'
-                        }
-                    }
-                }
-            }
-        } else {
-            return { //定义校验规则
-                deteType: {
-
-                    name: {
-                        required,
-                        nameRepeat
-                    },
-                    method: {},
-                    deteInterval: {
-                        integer
-                    },
-                    content: {},
-                    i18nCode: {required},
-                    remark: {},
-                    deteTypeMetas: {
-                        $each: {
-                            name: {
-                                required
-                            },
-                            fieldType: {
-                                required
-                            },
-                            dataType: {
-                                required
-                            },
-                            dataLenth: {
-                                required,
-                                integer
-                            },
-                            oid: {},
-                            unit: {required},
-                            dicType: {}
-                        }
-                    },
-                    deteTypeParams: {
-                        $each: {
-                            name: {
-                                required
-                            },
-                            defVal: {
-                                required
-                            },
-                            remark: ''
-                        }
-                    }
-                }
-            }
-        }
+        deteMethodsArr:[],
+        typeId:null
     },
 
     created: function () {
-        // this.nameCheckFunc = _.debounce(this.nameCheck, 500);
         this.getDeteMethod();
-        this.getFieldTypes();
-        this.getDataTypes();
-        this.getDicTypes();
-        this.init();
-
     },
     methods: {
-        init: function () {
-            var step = this.curStep;
-            this.title = steps[step];
-            $("#preStep")[0].disabled = true;
-        },
         query: function () {
             vm.showList = true;
             var page = $("#jqGrid").jqGrid('getGridParam', 'page');
             $("#jqGrid").jqGrid('setGridParam', {
                 postData: {'name': vm.params.name},
-                page: 1
+                page: page
             }).trigger("reloadGrid");
         },
         reload: function () {
             vm.query();
         },
         add: function () {
-            // vm.$v.deteType.name.$reset();
-            // vm.$v.deteType.method.$reset();
-            // vm.$v.deteType.deteInterval.$reset();
-            // vm.$v.deteType.content.$reset();
-            // vm.$v.deteType.i18nCode.$reset();
-            // vm.$v.deteType.remark.$reset();
-            // /*遍历touch 对数组调用touch会栈溢出*/
-            // for (var i = 0; i < vm.$v.deteType.deteTypeMetas.length; i++) {
-            //
-            //     vm.$v.deteType.deteTypeMetas.$each[i].$reset();
-            // }
-            //
-            // for (var i = 0; i < vm.$v.deteType.deteTypeParams.length; i++) {
-            //     vm.$v.deteType.deteTypeParams.$each[i].$reset();
-            // }
-            vm.$v.deteType.$reset();
-            vm.showList = false;
-            vm.curStep = 0;
-            var deteType = {
-                id: null,
-                name: '',
-                viewLevel: 2,
-                method: 1,
-                deteInterval: 60,
-                content: '',
-                i18nCode: '',
-                remark: '',
-                deteTypeMetas: [
-                    {
-                        id: null,
-                        name: '',
-                        fieldType: null,
-                        dataType: null,
-                        dataLenth: null,
-                        oid: '',
-                        unit: '',
-                        dicType: '',
-                        remark: '',
-                        delFlag: '0'
-                    }
-                ],
-                deteTypeParams: [
-                    {
-                        id: null,
-                        name: '',
-                        defVal: '',
-                        remark: '',
-                        delFlag: '0'
-                    }
-                ]
-            }
-
-            vm.deteType = deteType;
+            vm.showList=false;
+            vm.typeId=null;
         },
         update: function () {
-            // vm.$v.deteType.name.$reset();
-            // vm.$v.deteType.method.$reset();
-            // vm.$v.deteType.deteInterval.$reset();
-            // vm.$v.deteType.content.$reset();
-            // vm.$v.deteType.i18nCode.$reset();
-            // vm.$v.deteType.remark.$reset();
-            // /*遍历touch 对数组调用touch会栈溢出*/
-            // for (var i = 0; i < vm.$v.deteType.deteTypeMetas.length; i++) {
-            //
-            //     vm.$v.deteType.deteTypeMetas.$each[i].$reset();
-            // }
-            //
-            // for (var i = 0; i < vm.$v.deteType.deteTypeParams.length; i++) {
-            //     vm.$v.deteType.deteTypeParams.$each[i].$reset();
-            // }
-            vm.$v.deteType.$reset();
+
             var id = getSelectedRow();
             if (id == null) {
                 return;
             }
-            vm.showList = false;
-            vm.curStep = 0;
-            vm.getInfo(id);
-
-
-        },
-        getInfo: function (id) {
-            $.get(baseURL + "deteType/detail?id=" + id, function (r) {
-                vm.deteType = r.data;
-                vm.metaCount = r.data.deteTypeMetas.length;
-                vm.paramCount = r.data.deteTypeParams.length;
-                vm.formatDeteTypeToObject();
-            });
+            vm.typeId=id;
+            console.log("update-->"+vm.typeId);
+            vm.showList=false;
         },
         saveOrUpdate: function () {
 
@@ -412,226 +146,24 @@ var vm = new Vue({
 
             })
         },
-        validate: function () {//提交时的校验
-            var metaFlag = false;
-            var paramFlag = false;
-            for (var i = 0; i < vm.validation.meta.length; i++) {
-                if (vm.validation.meta[i]) {
-                    metaFlag = true;
-                    break;
-                }
-            }
-
-            for (var i = 0; i < vm.validation.param.length; i++) {
-                if (vm.validation.param[i]) {
-                    paramFlag = true;
-                    break;
-                }
-            }
-            // vm.$v.deteType.name.$touch();
-            // vm.$v.deteType.method.$touch();
-            // vm.$v.deteType.deteInterval.$touch();
-            // vm.$v.deteType.content.$touch();
-            // vm.$v.deteType.i18nCode.$touch();
-            // vm.$v.deteType.remark.$touch();
-            // /*遍历touch 对数组调用touch会栈溢出*/
-            // for (var i = 0; i < vm.$v.deteType.deteTypeMetas.length; i++) {
-            //
-            //     vm.$v.deteType.deteTypeMetas.$each[i].$touch();
-            // }
-            //
-            // for (var i = 0; i < vm.$v.deteType.deteTypeParams.length; i++) {
-            //     vm.$v.deteType.deteTypeParams.$each[i].$touch();
-            // }
-            vm.$v.deteType.$touch();
-            return vm.$v.deteType.$error || metaFlag || paramFlag;
-        },
         getDeteMethod: function () {
             $.getJSON(baseURL + "sys/dict/all?type=dtmethond&_" + $.now(), function (r) {
-                var deteMethods = [];
                 var deteMethodsArr = [];
                 for (var i = 0; i < r.data.length; i++) {
                     var m = {"code": r.data[i].code, "value": r.data[i].value}
-                    deteMethods.push(m);
                     deteMethodsArr.push(r.data[i].value);
                     if ("1" == r.data[i].code) { //默认为脚本
                         vm.deteMethod = m;
 
                     }
                 }
-                vm.deteMethods = deteMethods;
                 vm.deteMethodsArr = deteMethodsArr;
             });
         },
-        getFieldTypes: function () {
-            $.getJSON(baseURL + "sys/dict/all?type=fieldType&_" + $.now(), function (r) {
-                for (var i = 0; i < r.data.length; i++) {
-                    var m = {"code": r.data[i].code, "value": r.data[i].value}
-                    vm.fieldTypes.push(m);
-                }
-            });
-        },
-        getDataTypes: function () {
-            $.getJSON(baseURL + "sys/dict/all?type=dataType&_" + $.now(), function (r) {
-                for (var i = 0; i < r.data.length; i++) {
-                    var m = {"code": r.data[i].code, "value": r.data[i].value}
-                    vm.dataTypes.push(m);
-                }
-            });
-        },
-        getDicTypes: function () {
-            $.getJSON(baseURL + "deteType/dicList?limit=999&_" + $.now(), function (r) {
-                for (var i = 0; i < r.data.list.length; i++) {
-                    vm.dicTypes.push(r.data.list[i].type)
-                }
-            });
-        },
-        preStep: function () {
-            this.curStep -= 1;
-            if (this.curStep <= 0) {
-                $("#preStep")[0].disabled = true;
-                $("#nextStep")[0].disabled=false;
-
-            }else if((0<this.curStep && this.curStep<steps.length-1)){
-                $("#nextStep")[0].disabled = false;
-                $("#preStep")[0].disabled=false;
-            }else {
-                $("#preStep")[0].disabled = false;
-            }
-        },
-        nextStep: function () {
-            this.curStep += 1;
-            if (this.curStep >= steps.length - 1) {
-                $("#nextStep")[0].disabled = true;
-                $("#preStep")[0].disabled=false;
-            } else if(0<this.curStep && this.curStep<steps.length-1) {
-                $("#nextStep")[0].disabled = false;
-                $("#preStep")[0].disabled=false;
-            }else{
-                $("#nextStep")[0].disabled = false;
-            }
-        },
-        addMetaView: function () {
-            var mata = {
-                id: null,
-                name: '',
-                fieldType: null,
-                dataType: null,
-                dataLenth: null,
-                oid: '',
-                unit: '',
-                dicType: '',
-                remark: '',
-                delFlag: '0'
-            }
-            Vue.set(this.deteType.deteTypeMetas, this.metaCount, mata);
-            this.metaCount += 1;
-        },
-        delMetaView: function (index) {
-            if (this.deteType.deteTypeMetas[index].id == null) {
-                Vue.delete(this.deteType.deteTypeMetas, index);
-                this.metaCount -= 1;
-            } else {
-                this.deteType.deteTypeMetas[index].delFlag = '1';
-            }
-
-        },
-        addParamView: function () {
-            var param = {
-                id: null,
-                name: '',
-                defVal: '',
-                remark: '',
-                delFlag: '0'
-            }
-
-
-            Vue.set(this.deteType.deteTypeParams, this.paramCount, param);
-            this.paramCount += 1;
-        },
-        delParamView: function (index) {
-            if (this.deteType.deteTypeParams[index].id == null) {
-                Vue.delete(this.deteType.deteTypeParams, index);
-                this.paramCount -= 1;
-            } else {
-                this.deteType.deteTypeParams[index].delFlag = '1';
-            }
-        },
-        formatDeteTypeToSimple: function () {
-            $.each(vm.deteType.deteTypeMetas, function (i, v) {
-                vm.deteType.deteTypeMetas[i].fieldType = v.fieldType.code;
-                vm.deteType.deteTypeMetas[i].dataType = v.dataType.code;
-            });
-        },
-        formatDeteTypeToObject: function () {
-            $.each(vm.deteType.deteTypeMetas, function (index, value) {
-                for (var i = 0; i < vm.fieldTypes.length; i++) {
-                    if (vm.fieldTypes[i].code == value.fieldType) {
-                        vm.deteType.deteTypeMetas[index].fieldType = vm.fieldTypes[i];
-                    }
-                }
-
-                for (var i = 0; i < vm.dataTypes.length; i++) {
-                    if (vm.dataTypes[i].code == value.dataType) {
-                        vm.deteType.deteTypeMetas[index].dataType = vm.dataTypes[i];
-                    }
-                }
-            });
-        },
-        metaNameRepeat: function (index) {
-            var name = vm.deteType.deteTypeMetas[index].name;
-            if (name == null || name == "") {
-                return;
-            }
-            var flag = false;
-            for (var i = 0; i < vm.deteType.deteTypeMetas.length; i++) {
-                if (index == i) {
-                    continue;
-                }
-                var tempName = vm.deteType.deteTypeMetas[i].name;
-
-                if (name == tempName) {
-                    flag = true;
-                    vm.validation.meta[index] = flag;
-                    return;
-                }
-                flag = false;
-            }
-            vm.validation.meta[index] = flag;
-        },
-        paramNameRepeat: function (index) {
-            var name = vm.deteType.deteTypeParams[index].name;
-            if (name == null || name == "") {
-                return;
-            }
-            var flag = false;
-            for (var i = 0; i < vm.deteType.deteTypeParams.length; i++) {
-                if (index == i) {
-                    continue;
-                }
-                var tempName = vm.deteType.deteTypeParams[i].name;
 
-                if (name == tempName) {
-                    flag = true;
-                    vm.validation.param[index] = flag;
-                    return;
-                }
-                flag = false;
-            }
-            vm.validation.param[index] = flag;
-        }
     },
     watch: {
-        deteMethod: function () {
-            this.deteType.method = this.deteMethod.code;
-        },
-        curStep: function () {
-            this.title = steps[this.curStep]
-            if(this.curStep==0){
-                $("#preStep")[0].disabled=true;
-                $("#nextStep")[0].disabled=false;
-            }
-        }
+
 
     }
 });
diff --git a/nezha-admin/src/main/resources/templates/modules/detect/addTypeTemplate.html b/nezha-admin/src/main/resources/templates/modules/detect/addTypeTemplate.html
new file mode 100644
index 00000000..c5c3298e
--- /dev/null
+++ b/nezha-admin/src/main/resources/templates/modules/detect/addTypeTemplate.html
@@ -0,0 +1,355 @@
+<script type="text/x-template" id="addTypeTemplate">
+    <div class="panel panel-default">
+        <div class="panel-heading">{{title}}</div>
+        <form class="form-horizontal">
+            <div class="form-group">
+                <div class="col-sm-2 control-label">名称:</div>
+                <div class="col-sm-9"><!--名称-->
+                    <input type="text" class="form-control"
+                           :class="{'form-control--error': $v.deteType.name.$dirty && !$v.deteType.name.required|| !$v.deteType.name.nameRepeat}"
+                           v-model.trim="$v.deteType.name.$model"/>
+                    <span class="required-symbol">*</span>
+                    <div class="form-control_error-msg" v-if="$v.deteType.name.$dirty && !$v.deteType.name.required">
+                        必填项
+                    </div>
+                    <div class="form-control_error-msg" v-if="$v.deteType.name.$dirty && !$v.deteType.name.nameRepeat">
+                        名称重复
+                    </div>
+                </div>
+            </div>
+            <div class="form-group"> <!--监测方式-->
+                <div class="col-sm-2 control-label">监测方式:</div>
+                <div class="col-sm-9">
+                    <multiselect v-model="defaultMethod" :options="deteMethods" placeholder="..." track-by="code"
+                                 label="value" :searchable="false"  :allow-empty="false"
+                                 :show-labels="false"></multiselect>
+                </div>
+
+            </div>
+            <div class="form-group"><!--监测间隔-->
+                <div class="col-sm-2 control-label">监测间隔:</div>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control"
+                           :class="{'form-control--error': $v.deteType.deteInterval.$dirty && !$v.deteType.deteInterval.integer}"
+                           v-model.trim="$v.deteType.deteInterval.$model"/>
+                    <span class="required-symbol">*</span>
+                    <div class="form-control_error-msg"
+                         v-if="$v.deteType.deteInterval.$dirty && !$v.deteType.deteInterval.integer">整数类型
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-group"><!--内容-->
+                <div class="col-sm-2 control-label">内容:</div>
+                <div class="col-sm-9">
+                    <textarea v-model.trim="$v.deteType.content.$model" class="form-control"></textarea>
+                </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">
+                				<span class="add-box_head_meta">
+                					<span>Field-Type</span>
+                                    <!-- <span class="metatype-question"><i class="fa fa-question-circle"></i></span> -->
+                				</span>
+                            <span class="add-box_head_meta">
+                					<span>Data-Type</span>
+                                <!-- <span class="metatype-question"><i class="fa fa-question-circle"></i></span> -->
+                				</span>
+                            <span>Name</span>
+                        </div>
+                        <div class="add-meta-box_rows">
+                            <div class="add-box_row"
+
+                                 v-for="(meta,index) in deteType.deteTypeMetas"
+                                 :class="{'danger':meta.passFlag!=undefined&&!meta.passFlag}"
+                                 v-if="meta.delFlag=='0'" >
+                                <!--<div style="width:800px;height:1px;margin:0px auto;padding:0px;background-color:black;overflow:hidden;"></div>-->
+                                <div class="add-box_row1_meta">
+                                    <span class="add-box_tag1">{{meta.fieldType.value}}</span>
+                                </div>
+                                <div class="add-box_row1_meta">
+                                    <span class="add-box_tag2">{{meta.dataType.value}}</span>
+                                </div>
+                                <span class="add-box_name" :title="meta.name" v-html="meta.name.length>20?spliteName(meta.name):meta.name"></span>
+                                <span class="add-box_op" @click="openMetaWindow(index)"><i class="fa fa-pencil-square-o"></i></span>
+                                <span class="add-box_del" @click="delMeta(index)"><i class="fa fa-trash-o"></i></span>
+
+                            </div>
+                        </div>
+                        <div class="add-box_foot">
+                            <span @click="openMetaWindow()"><i class="fa fa-plus"></i></span>
+                        </div>
+
+                    </div>
+                </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">
+                            <span class="add-box_head_param">Name</span>
+                            <span>Default</span>
+                        </div>
+                        <div class="add-param-box_rows" id="r-dete-param-container">
+                            <template v-for="(param,index) in deteType.deteTypeParams">
+                                <nz-add-param
+                                    :dete-param="param"
+                                    :index="index"
+                                    :dete-params="deteType.deteTypeParams"
+                                    @ask-for-swap="swapParam"
+                                    @del-param="delParam"
+                                ></nz-add-param>
+                            </template>
+
+                        </div>
+                        <div class="add-box_foot">
+                            <span @click="addParam"><i class="fa fa-plus"></i></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--<div class="form-group">
+                <div class="col-sm-2 control-label">I18n Code:</div>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control"
+                           :class="{'form-control&#45;&#45;error': $v.deteType.i18nCode.$dirty && !$v.deteType.i18nCode.required }"
+                           v-model.trim="$v.deteType.i18nCode.$model"/>
+                    <span class="required-symbol">*</span>
+                    <div class="form-control_error-msg"
+                         v-if="$v.deteType.i18nCode.$dirty && !$v.deteType.i18nCode.required"><@spring.message
+                        'validate.common.required'/>
+                    </div>
+
+                </div>
+            </div>-->
+
+            <div class="form-group"><!--备注-->
+                <div class="col-sm-2 control-label">备注:</div>
+                <div class="col-sm-9">
+                    <textarea v-model.trim="$v.deteType.remark.$model" class="form-control"></textarea>
+                </div>
+            </div>
+        </form>
+
+        <div id="metaWindow" style="height:100%;display:none;">
+            <nz-add-meta
+                ref="addMetaWindow"
+                :dete-metas="deteType.deteTypeMetas"
+                :dete-method="defaultMethod"
+                :field-types="fieldTypes"
+                :data-types="dataTypes"
+                :dic-types="dicTypes"
+            ></nz-add-meta>
+        </div>
+    </div>
+</script>
+
+<script type="text/x-template" id="addDetectMata">
+    <div style="height:100%">
+        <!-- meta列表 -->
+        <div class="meta-win_list"  >
+            <template v-for="(meta,index) in deteMetas" v-if="reset">
+                <detect-meta
+                        ref="r-detect-meta"
+                        :dete-meta="meta"
+                        :dete-metas="deteMetas"
+                        :index="index"
+                        :dete-method="deteMethod"
+                        :field-types="fieldTypes"
+                        :data-types="dataTypes"
+                        :dic-types="dicTypes"
+                        :del-meta="delMeta"
+                        @up-meta="getOpMeta"
+                        @swap-meta="swapMeta"
+                ></detect-meta>
+            </template>
+            <!-- 新增按钮 -->
+            <div class="meta-win_list-foot">
+                <span @click="addMeta"><i class="fa fa-plus"></i></span>
+            </div>
+        </div>
+        <!-- meta详情 -->
+        <div class="meta-details" id="meta-details" >
+
+        </div>
+    </div>
+
+    </div>
+
+</script>
+
+<script type="text/x-template" id="detectMata">
+    <div>
+        <div class="meta-win_item" v-id:[metaDomIdKey]="index">
+            <span v-show="deteMeta.delFlag=='1'" style="display: inline-block" @click="recSelf"><i class="fa fa-undo"></i>&nbsp;&nbsp;</span>
+            <div class="meta-win_item_name" style="display: inline-block"
+                 :class="{'meta-win_item_name_unpass':deteMeta.passFlag!=null&&deteMeta.passFlag!=undefined&&!deteMeta.passFlag,'meta-win_item_name_del':deteMeta.delFlag=='1'}">{{deteMeta.name}}</div>
+            <div style="text-align:right;">
+                <span style="color: red;position:absolute;top:2px;left:2px;" class="myicon-new" v-show="deteMeta.new"></span>
+                <span class="add-box_tag1">{{deteMeta.fieldType.value}}</span>
+                <span class="add-box_tag2">{{deteMeta.dataType.value}}</span>
+            </div>
+        </div>
+        <div v-id:[metaDetailDomIdKey]="index"  class="r-dete-meta-detail" >
+            <div>
+                <form class="form-horizontal" >
+                    <div>
+                        <div class="form-group">
+                            <div class="col-sm-3 control-label"><@spring.message 'common.name'/>:</div>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control  nameEvent" v-model="$v.deteMeta.name.$model"/>
+                                <span class="required-symbol_meta-model">*</span>
+                                <div class="form-control_error-msg" v-if="$v.deteMeta.name.$dirty&&!$v.deteMeta.name.required"><@spring.message 'validate.common.required'/></div>
+                                <div class="form-control_error-msg" v-if="$v.deteMeta.name.$dirty&&!$v.deteMeta.name.inPageNameRepeat"><@spring.message 'validate.deteType.name.repeat'/></div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-3 control-label"><@spring.message 'deteType.fieldType'/>:</div>
+                            <div class="col-sm-9">
+                                <multiselect
+                                        :options="fieldTypes"
+                                        placeholder="..."
+                                        track-by="code"
+                                        label="value"
+                                        :searchable="false"
+                                        :allow-empty="false"
+                                        v-model="$v.deteMeta.fieldType.$model"
+                                        :show-labels="false">
+                                    <template slot="option" slot-scope="props">
+                                        <div>
+                                            <span style="font-weight: bold;">{{props.option.value}}</span>
+                                            <span style="font-size: 2px">{{props.option.remark}}</span>
+                                        </div>
+                                    </template>
+
+                                </multiselect>
+                                <span class="required-symbol_meta-model">*</span>
+                                <div class="form-control_error-msg" v-if="$v.deteMeta.fieldType.$dirty&&!$v.deteMeta.fieldType.required"><@spring.message 'validate.common.required'/></div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-3 control-label"><@spring.message 'deteType.dataType'/>:</div>
+                            <div class="col-sm-9">
+                                <multiselect
+                                        :options="dataTypes"
+                                        placeholder="..."
+                                        track-by="code"
+                                        label="value"
+                                        v-model="$v.deteMeta.dataType.$model"
+                                        :searchable="false"
+                                        :allow-empty="false"
+                                        :show-labels="false">
+                                    <template slot="option" slot-scope="props">
+                                        <div>
+                                            <span style="font-weight: bold;">{{props.option.value}}</span>
+                                            <span style="font-size: 2px">{{props.option.remark}}</span>
+                                        </div>
+                                    </template>
+                                </multiselect>
+                                <span class="required-symbol_meta-model">*</span>
+                                <div class="form-control_error-msg" v-if="$v.deteMeta.dataType.$dirty&&!$v.deteMeta.dataType.required"><@spring.message 'validate.common.required'/></div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-3 control-label"><@spring.message 'deteType.dataLenth'/>:</div>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" v-model="$v.deteMeta.dataLenth.$model"/>
+                                <span class="required-symbol_meta-model">*</span>
+                                <div class="form-control_error-msg" v-if="$v.deteMeta.dataLenth.$dirty&&!$v.deteMeta.dataLenth.required"><@spring.message 'validate.common.required'/></div>
+                            </div>
+                        </div>
+                        <div class="form-group" v-show="deteMethod.code=='2'">
+                            <div class="col-sm-3 control-label">OID:</div>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" v-model="$v.deteMeta.oid.$model"/>
+                                <span class="required-symbol_meta-model">*</span>
+                                <div class="form-control_error-msg" v-if="deteMethod.code=='2'&&$v.deteMeta.oid.$dirty&&!$v.deteMeta.oid.required"><@spring.message 'validate.common.required'/></div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-3 control-label"><@spring.message 'deteType.unit'/>:</div>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" v-model="$v.deteMeta.unit.$model"/>
+                                <span class="required-symbol_meta-model">*</span>
+                                <div class="form-control_error-msg" v-if="$v.deteMeta.unit.$dirty&&!$v.deteMeta.unit.required"><@spring.message 'validate.common.required'/></div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-3 control-label"><@spring.message 'deteType.dicType'/>:</div>
+                            <div class="col-sm-9">
+                                <multiselect
+                                        :options="dicTypes"
+                                        placeholder="..."
+                                        :searchable="false"
+                                        value="dataType"
+                                        v-model="$v.deteMeta.dicType.$model"
+                                        :show-labels="false">
+                                    <template slot="option" slot-scope="props">
+                                            <div :id="'position'+props.option.type+index" style="position:absolute;top:20%;left:0;width:1px;height:1px;"></div>
+                                            <div style="line-height: 30px"id="title" @mouseenter="mouseAt(props.option.type)" @mouseleave="mouseout">{{props.option.type}}</div>
+                                            <div :id="'items'+props.option.type" style="display:none;">
+                                                <div style="color: white;" v-for="mapping in props.option.mappings">
+                                                    {{mapping.val}}:{{mapping.mapping}}
+                                                </div>
+                                            </div>
+                                    </template>
+
+                                </multiselect>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-3 control-label"><@spring.message "common.remark"/>:</div>
+                            <div class="col-sm-9">
+                                <textarea class="form-control" v-model="$v.deteMeta.remark.$model"></textarea>
+                            </div>
+                        </div>
+                        <div class="form-group form-group_opbox_meta-model" >
+                            <div>
+                                <!--                        <button title="<@spring.message 'common.submit'/>" type="button" class="btn btn-primary" style="width: 45px; padding: 3px 0;" @click="saveOrUpdate"><i class="fa fa-check"></i></button>-->
+                                <div style="display:inline-block;width:130px;"></div>
+                                <button title="删除" @click="delSelf(index)" type="button" class="btn btn-danger" style="width: 45px; padding: 3px 0;"><i class="fa fa-trash-o"></i></button>
+                                <!--                        <button title="恢复" @click="recMeta($event)" type="button" class="btn btn-success" style="width: 45px; padding: 3px 0;display: none;"><i class="fa fa-undo"></i></button>-->
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                <pre>{{$v.deteMeta}}</pre>
+            </div>
+            <div class="shadow"></div>
+        </div>
+    </div>
+</script>
+
+<script type="text/x-template" id="addDetectParam" >
+    <div draggable="true" :index="index">
+        <div class="add-box_row" v-show="!editSwitch" v-id:[listPreKey]="index" :class="{'text-disabled':deteParam.delFlag=='1'}">
+            <div class="add-box_row1_param">
+                <span>{{deteParam.name}}</span>
+            </div>
+            <span class="add-box_name">{{deteParam.defVal}}</span>
+            <span class="add-box_op" :id="'add-box_op_edit_'+index" @click="editSelf"><i class="fa fa-pencil-square-o"></i></span>
+            <span :class="{'add-box_del':deteParam.delFlag=='0','add-box_rec':deteParam.delFlag=='1'}" @click="deteParam.delFlag=='0'?delSelf():recSelf()"><i :class="{'fa fa-trash-o':deteParam.delFlag=='0','fa fa-undo':deteParam.delFlag=='1'}"></i></span>
+        </div>
+        <div class="add-box_row" v-show="editSwitch" v-id:[editPreKey]="index">
+            <div :id="'r-layer-warn-defval-'+index" >
+
+            </div>
+            <form class="form-inline">
+                <div class="form-group form-group-left">
+                    <input type="text" :id="'r-param-name-input-'+index" :class="{'form-control--error':$v.deteParam.name.$dirty&&(!$v.deteParam.name.required||!$v.deteParam.name.inPageNameRepeat)}" class="form-control"  placeholder="请输入名称" v-model="$v.deteParam.name.$model">
+
+                </div>
+                <div class="form-group form-group-right">
+                    <input type="text" :id="'r-param-defval-input-'+index" :class="{'form-control--error':$v.deteParam.defVal.$dirty&&!$v.deteParam.defVal.required}" class="form-control"  placeholder="请输入默认值" v-model="$v.deteParam.defVal.$model">
+                </div>
+                <span class="add-box_ok" @click="submitSelf"><i class="glyphicon glyphicon-ok"></i></span>
+            </form>
+        </div>
+    </div>
+
+</script>
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html b/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html
index 3c7f6f5f..3a406706 100644
--- a/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html
+++ b/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html
@@ -4,7 +4,9 @@
 <head>
     <title><@spring.message 'deteSet'/></title>
     <link rel="stylesheet" href="${request.contextPath}/statics/css/nzNodeSelector.css">
+    <link rel="stylesheet" href="${request.contextPath}/statics/css/addDetectType.css">
     <link rel="stylesheet" href="${request.contextPath}/statics/css/detect.css">
+
 </head>
 <#include "/header.html">
 <body>
@@ -58,7 +60,11 @@
                                  :allow-empty="false"
                                  :show-labels="false"
                                  @select="getDeteTypeDetail"
-                    ></multiselect>
+                    >
+                        <div slot="afterList">
+                            <div style="height: 25px;line-height:25px;text-align: center;" @click="openAddDetectType"><i class="glyphicon glyphicon-plus"></i></div>
+                        </div>
+                    </multiselect>
                     <span class="required-symbol">*</span>
                     <div class="form-control_error-msg" v-if="$v.deteSet.typeId.$dirty && !$v.deteSet.typeId.required">
                         <@spring.message 'validate.common.required'/>
@@ -68,6 +74,12 @@
                     </div>
                 </div>
             </div>
+            <div v-show="openAddTypeWindow" id="add-type-layer-view">
+                <nz-detect-addtype
+                        :type-id="typeId"
+                ></nz-detect-addtype>
+            </div>
+
             <div class="form-group" v-show="typeParams !=null && typeParams.length>0">
                 <div class="col-sm-2 control-label"><@spring.message 'validate.deteSet.param'/>:</div>
                 <div class="col-sm-9">
@@ -183,10 +195,11 @@
 </div>
 
 </body>
-
+<#include "/modules/detect/addTypeTemplate.html"/>
 <#include "/modules/common/template.html"/>
 <#include "main.html"/>
 <#include "/js/modules/common/componets.js"/>
+<#include "/js/modules/detect/addType.js"/>
 <#include "/js/modules/detect/main.js"/>
 <#include "/js/modules/detect/deteSet.js"/>
 </html>
\ No newline at end of file
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 836fd2a6..190d10de 100644
--- a/nezha-admin/src/main/resources/templates/modules/detect/deteType.html
+++ b/nezha-admin/src/main/resources/templates/modules/detect/deteType.html
@@ -3,6 +3,7 @@
 <html>
 <head>
     <title><@spring.message 'deteType'/></title>
+    <link rel="stylesheet" href="${request.contextPath}/statics/css/addDetectType.css">
 </head>
 <#include "/header.html">
 
@@ -21,193 +22,14 @@
         <table id="jqGrid"></table>
         <div id="jqGridPager"></div>
     </div>
-    <div v-show="!showList" class="panel panel-default">
-        <div class="panel-heading">{{title}}</div>
-        <form class="form-horizontal" >
-            <!--deteTypeView start-->
-            <div id="deteTypeView" v-show="curStep == 0">
-                <div class="form-group">
-                    <div class="col-sm-2 control-label"><@spring.message 'common.name'/>:</div>
-                    <div class="col-sm-9">
-                        <input type="text" class="form-control" :class="{'form-control--error': $v.deteType.name.$dirty && !$v.deteType.name.required|| !$v.deteType.name.nameRepeat}" v-model.trim="$v.deteType.name.$model"/>
-                        <span class="required-symbol">*</span>
-                        <div class="form-control_error-msg" v-if="$v.deteType.name.$dirty && !$v.deteType.name.required"><@spring.message 'validate.common.required'/></div>
-                        <div class="form-control_error-msg" v-if="$v.deteType.name.$dirty && !$v.deteType.name.nameRepeat"><@spring.message 'validate.common.name.repeat'/></div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <div class="col-sm-2 control-label"><@spring.message 'deteType.method'/>:</div>
-                    <div class="col-sm-9">
-                        <multiselect v-model="deteMethod" :options="deteMethods" placeholder="..." track-by="code" label="value" :searchable="false" value="deteMethod" :allow-empty="false" :show-labels="false"></multiselect>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <div class="col-sm-2 control-label"><@spring.message 'deteType.deteInterval'/>:</div>
-                    <div class="col-sm-9">
-                        <input type="text" class="form-control" :class="{'form-control--error': $v.deteType.deteInterval.$dirty && !$v.deteType.deteInterval.integer}" v-model.trim="$v.deteType.deteInterval.$model"/>
-                        <span class="required-symbol">*</span>
-                        <div class="form-control_error-msg" v-if="$v.deteType.deteInterval.$dirty && !$v.deteType.deteInterval.integer"><@spring.message 'validate.common.integer'/></div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <div class="col-sm-2 control-label"><@spring.message 'deteType.content'/>:</div>
-                    <div class="col-sm-9">
-                        <textarea v-model.trim="$v.deteType.content.$model" class="form-control" ></textarea>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <div class="col-sm-2 control-label"><@spring.message 'common.i18nCode'/>:</div>
-                    <div class="col-sm-9">
-                        <input type="text" class="form-control" :class="{'form-control--error': $v.deteType.i18nCode.$dirty && !$v.deteType.i18nCode.required }" v-model.trim="$v.deteType.i18nCode.$model"/>
-                        <span class="required-symbol">*</span>
-                        <div class="form-control_error-msg" v-if="$v.deteType.i18nCode.$dirty && !$v.deteType.i18nCode.required"><@spring.message 'validate.common.required'/></div>
-
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <div class="col-sm-2 control-label"><@spring.message "common.remark"/>:</div>
-                    <div class="col-sm-9">
-                        <textarea v-model.trim="$v.deteType.remark.$model" class="form-control" ></textarea>
-                    </div>
-                </div>
-            </div> <!--deteTypeView end-->
-            <!--    deteTypeMetaView start-->
-            <div id="deteTypeMetaView" v-show="curStep == 1" v-model="deteType.deteTypeMetas">
-                <div v-for="item ,index in deteType.deteTypeMetas">
-                    <div class="panel panel-default" style="position:relative;padding:20px 0px 0px 0px;" v-show="item.delFlag=='0'">
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'common.name'/>:</div>
-                            <div class="col-sm-9"><!--v-model.trim="$v.deteType.deteTypeMetas.$each[index].name.$model"-->
-                                <input type="text" class="form-control  nameEvent" @blur="metaNameRepeat(index)" :class="{'form-control--error': ($v.deteType.deteTypeMetas.$each[index].name.$dirty && !$v.deteType.deteTypeMetas.$each[index].name.required)|| validation.meta[index] }"  v-model.trim="$v.deteType.deteTypeMetas.$each[index].name.$model" value="{{item.name}}"/>
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].name.$dirty && !$v.deteType.deteTypeMetas.$each[index].name.required"><@spring.message 'validate.common.required'/></div>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].name.$dirty && validation.meta[index]"><@spring.message 'validate.deteType.name.repeat'/></div>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'deteType.fieldType'/>:</div>
-                            <div class="col-sm-9">
-                                <multiselect v-model="$v.deteType.deteTypeMetas.$each[index].fieldType.$model" :class="{'form-control--error': $v.deteType.deteTypeMetas.$each[index].fieldType.$dirty && !$v.deteType.deteTypeMetas.$each[index].fieldType.required}":options="fieldTypes" placeholder="..." track-by="code" label="value" :searchable="false"  :allow-empty="false" :show-labels="false"></multiselect>
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].fieldType.$dirty && !$v.deteType.deteTypeMetas.$each[index].fieldType.required"><@spring.message 'validate.common.required'/></div>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'deteType.dataType'/>:</div>
-                            <div class="col-sm-9">
-                                <multiselect v-model="$v.deteType.deteTypeMetas.$each[index].dataType.$model" :class="{'form-control--error': $v.deteType.deteTypeMetas.$each[index].dataType.$dirty && !$v.deteType.deteTypeMetas.$each[index].dataType.required}" :options="dataTypes" placeholder="..." track-by="code" label="value" :searchable="false" :allow-empty="false" :show-labels="false"></multiselect>
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].dataType.$dirty && !$v.deteType.deteTypeMetas.$each[index].dataType.required"><@spring.message 'validate.common.required'/></div>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'deteType.dataLenth'/>:</div>
-                            <div class="col-sm-9">
-                                <input type="text" class="form-control" :class="{'form-control--error': $v.deteType.deteTypeMetas.$each[index].dataLenth.$dirty && !$v.deteType.deteTypeMetas.$each[index].dataLenth.required||!$v.deteType.deteTypeMetas.$each[index].dataLenth.integer}" v-model.trim="$v.deteType.deteTypeMetas.$each[index].dataLenth.$model" value="{{$v.deteType.deteTypeMetas.$each[index].dataLenth.$model}}"/>
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].dataLenth.$dirty && !$v.deteType.deteTypeMetas.$each[index].dataLenth.required"><@spring.message 'validate.common.required'/></div>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].dataLenth.$dirty && !$v.deteType.deteTypeMetas.$each[index].dataLenth.integer"><@spring.message 'validate.common.integer'/></div>
-                            </div>
-                        </div>
-                        <div class="form-group" v-show="deteType.method==2">
-                            <div class="col-sm-2 control-label">OID:</div>
-                            <div class="col-sm-9">
-                                <input type="text" class="form-control" :class="{'form-control--error':$v.deteType.deteTypeMetas.$each[index].oid.$dirty &&!$v.deteType.deteTypeMetas.$each[index].oid.required}" v-model.trim="$v.deteType.deteTypeMetas.$each[index].oid.$model"/>
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].oid.$dirty && !$v.deteType.deteTypeMetas.$each[index].oid.required"><@spring.message 'validate.common.required'/></div>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'deteType.unit'/>:</div>
-                            <div class="col-sm-9">
-                                <input type="text" class="form-control" :class="{'form-control--error':$v.deteType.deteTypeMetas.$each[index].unit.$dirty && !$v.deteType.deteTypeMetas.$each[index].unit.required}" v-model.trim="$v.deteType.deteTypeMetas.$each[index].unit.$model" />
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeMetas.$each[index].unit.$dirty && !$v.deteType.deteTypeMetas.$each[index].unit.required"><@spring.message 'validate.common.required'/></div>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'deteType.dicType'/>:</div>
-                            <div class="col-sm-9">
-                                <multiselect v-model="deteType.deteTypeMetas[index].dicType" :options="dicTypes" placeholder="..."  :searchable="false" value="dataType" :show-labels="false"></multiselect>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message "common.remark"/>:</div>
-                            <div class="col-sm-9">
-                                <textarea v-model.trim="deteType.deteTypeMetas[index].remark" class="form-control" ></textarea>
-                            </div>
-                        </div>
-                        <!--删除按钮-->
-                        <div style="position:absolute;top: 0;right: -50px;">
-                            <a class="btn btn-small" title="<@spring.message 'common.delete'/>" @click="delMetaView(index)"><i class="glyphicon glyphicon-trash"></i></a>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <a id="metaPlus" class="btn btn-small" title="<@spring.message 'deteType.addMeta'/>" @click="addMetaView"><i class="glyphicon glyphicon-plus"></i></a>
-                </div>
-            </div>
-            <!--deteTypeMetaView end-->
-
-            <!--deteTypeParam start-->
-            <div id="deteTypeParamView" v-show="curStep == 2" v-model="deteType.deteTypeMetas">
-                <div v-for="item ,index in deteType.deteTypeParams">
-                    <div class="panel panel-default" style="position:relative;padding:20px 0px 0px 0px;" v-show="item.delFlag == '0'">
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'common.name'/>:</div>
-                            <div class="col-sm-9">
-                                <input type="text" class="form-control nameEvent" @blur="paramNameRepeat(index)" :class="{'form-control--error': ($v.deteType.deteTypeParams.$each[index].name.$dirty && !$v.deteType.deteTypeParams.$each[index].name.required)|| validation.param[index]}"  v-model.trim="$v.deteType.deteTypeParams.$each[index].name.$model" value="{{item.name}}"/>
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeParams.$each[index].name.$dirty && !$v.deteType.deteTypeParams.$each[index].name.required"><@spring.message 'validate.common.required'/></div>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeParams.$each[index].name.$dirty && validation.param[index]"><@spring.message 'validate.deteType.name.repeat'/></div>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <div class="col-sm-2 control-label"><@spring.message 'deteType.defVal'/>:</div>
-                            <div class="col-sm-9">
-                                <input type="text"  class="form-control" :class="{'form-control--error': ($v.deteType.deteTypeParams.$each[index].defVal.$dirty && !$v.deteType.deteTypeParams.$each[index].defVal.required)}"  v-model.trim="$v.deteType.deteTypeParams.$each[index].defVal.$model" value="{{item.defVal}}"/>
-                                <span class="required-symbol">*</span>
-                                <div class="form-control_error-msg" v-if="$v.deteType.deteTypeParams.$each[index].defVal.$dirty && !$v.deteType.deteTypeParams.$each[index].defVal.required"><@spring.message 'validate.common.required'/></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="$v.deteType.deteTypeParams.$each[index].remark.$model" value="{{item.remark}}"/>
-                            </div>
-                        </div>
-                        <!--删除按钮-->
-                        <div style="position:absolute;top: 0;right: -50px;">
-                            <a class="btn btn-small" title="<@spring.message 'common.delete'/>" @click="delParamView(index)"><i class="glyphicon glyphicon-trash"></i></a>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <a id="paramPlus" class="btn btn-small" title="<@spring.message 'deteType.addParam'/>" @click="addParamView"><i class="glyphicon glyphicon-plus"></i></a>
-                </div>
-            </div>
-            <!--deteTypeParam end-->
-            <div class="form-group">
-                    <div class="col-sm-2 control-label"></div>
-                    &nbsp;&nbsp;
-            </div>
-            <div class="form-group form-group_opbox">
-                <div>
-                    <button title="<@spring.message 'common.submit'/>" type="button" class="btn btn-primary" style="width: 55px" @click="saveOrUpdate"><i class="fa fa-check"></i></button>
-                    <div style="display:inline-block;width:10px;"></div>
-                    <button  type="button" title="<@spring.message 'common.preStep'/>" class="btn btn-default"  @click="preStep" id="preStep" ><i class="glyphicon glyphicon-chevron-left"></i></button>
-                    <div style="display:inline-block;width:10px;"></div>
-                    <button type="button" title="<@spring.message 'common.nextStep'/>" class="btn btn-default"  @click="nextStep" id="nextStep"><i class="glyphicon glyphicon-chevron-right"></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="reload"><i class="fa fa-reply"></i></button>
-                </div>
-            </div>
-
-        </form>
+    <div v-show="!showList" >
+        <nz-detect-addtype
+            :type-id="typeId"
+        ></nz-detect-addtype>
     </div>
 </div>
-<#include "/js/modules/detect/main.js"/>
+<#include "/modules/detect/addTypeTemplate.html"/>
+<#include "/js/modules/detect/addType.js"/>
 <#include "/js/modules/detect/deteType.js"/>