diff --git a/.history/src/components/CloneView_20231030184921.vue b/.history/src/components/CloneView_20231030184921.vue
new file mode 100644
index 0000000..0c36467
--- /dev/null
+++ b/.history/src/components/CloneView_20231030184921.vue
@@ -0,0 +1,464 @@
+<!-- 串口通道 -->
+<template>
+    <div class="Clone">
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button>
+            <div v-show="dialogVisible" class="tree_menu">
+                <el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
+                <!-- 树形控件右键组件 -->
+            </div>
+        </div>
+        <div class="pas_params" v-show="add_passage">
+            <div class="content">
+                <div class="con_left">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">启动</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="server_ip">
+                                    <el-row>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                        <el-col :span="1">.
+                                        </el-col>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                        <el-col :span="1">.</el-col>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                        <el-col :span="1">.</el-col>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item label="网关SND:" :label-width="formLabelWidth" prop="gateway_id">
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-divider></el-divider>
+                        <el-form-item label="实时数据发布的主题：" label-width="168px" prop="data_theme">
+                        </el-form-item>
+                        <el-row>
+
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-row>
+                                        <el-col :span="15">
+                                            <el-input v-model="input1" placeholder="" style="width: 200px;"></el-input>
+                                        </el-col>
+                                        <el-col :span="9">
+                                            <el-select v-model="value" placeholder="请选择" style="width: 99px;">
+                                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                                    :value="item.value">
+                                                </el-option>
+                                            </el-select>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
+                                    <el-switch v-model="value1"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="上传模式:" :label-width="formLabelWidth" prop="upload_mode">
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="上传周期(s):" label-width="108px" prop="upload_week">
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item label="数据过滤:" :label-width="formLabelWidth" prop="data_filter">
+                                    <el-checkbox-group v-model="checkList">
+                                        <el-checkbox label="值改变"></el-checkbox>
+                                        <el-checkbox label="采集成功"></el-checkbox>
+                                        <el-checkbox label="时间戳改变"></el-checkbox>
+                                    </el-checkbox-group>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <div class="con_left_footer">
+                            <el-button type="primary" @click="choose_point = false">保 存</el-button>
+                            <el-button @click="choose_point = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                            <el-menu-item index="1">添加</el-menu-item>
+                            <el-menu-item index="2">保存</el-menu-item>
+                            <el-menu-item index="3">删除</el-menu-item>
+                        </el-menu>
+                    </div>
+                    <el-table ref="singleTable" :data="tableData" style="width: 100%">
+                        <el-table-column type="index">
+                        </el-table-column>
+                        <el-table-column property="name" label="设备名称">
+                        </el-table-column>
+                        <el-table-column property="tag_id" label="TagID">
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+        </div>
+        <!-- 添加按钮下显示出来的弹框信息 -->
+        <div>
+            <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+                <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2, 3, 4, 5]"
+                    :default-checked-keys="[4, 5, 6, 7, 8, 9]" :props="defaultProps">
+                </el-tree>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="choose_point = false">保 存</el-button>
+                    <el-button @click="choose_point = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CloneView',
+
+    data() {
+        return {
+            options1: [{
+                value: "qos0",
+                label: "qos0"
+            },
+            {
+                value: "qos1",
+                label: "qos1"
+            }, {
+                value: "qos2",
+                label: "qos2"
+            }],
+            options2: [{
+                value: "周期上传",
+                label: "周期上传"
+            },
+            {
+                value: "整点上传",
+                label: "整点上传"
+            }],
+            points: [{
+                id: 1,
+                label: '一级 1',
+                children: [{
+                    id: 4,
+                    label: '二级 1-1',
+                    children: [{
+                        id: 9,
+                        label: '三级 1-1-1'
+                    }, {
+                        id: 10,
+                        label: '三级 1-1-2'
+                    }]
+                }]
+            }, {
+                id: 2,
+                label: '一级 2',
+                children: [{
+                    id: 5,
+                    label: '二级 2-1',
+                    children: [{
+                        id: 11,
+                        label: '三级 2-1-1'
+                    }, {
+                        id: 12,
+                        label: '三级 2-1-2'
+                    }]
+                }, {
+                    id: 6,
+                    label: '二级 2-2'
+                }]
+            }, {
+                id: 3,
+                label: '一级 3',
+                children: [{
+                    id: 7,
+                    label: '二级 3-1'
+                }, {
+                    id: 8,
+                    label: '二级 3-2'
+                }]
+            }],
+            choose_point: false,
+            checkList: ['采集成功'],
+            checked1: "",
+            options: [{
+                value: '选项1',
+                label: '选项1'
+            }, {
+                value: '选项2',
+                label: '选项2'
+            }],
+            value: 'qos0',
+            activeIndex: '1',
+            value1: 0,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "88px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            datas: [{
+                label: '一级 1',
+                children: [{
+                    label: '二级 1-1',
+                    children: [{
+                        label: '三级 1-1-1'
+                    }]
+                }]
+            }, {
+                label: '一级 2',
+                children: [{
+                    label: '二级 2-1',
+                    children: [{
+                        label: '三级 2-1-1'
+                    }]
+                }, {
+                    label: '二级 2-2',
+                    children: [{
+                        label: '三级 2-2-1'
+                    }]
+                }]
+            }, {
+                label: '一级 3',
+                children: [{
+                    label: '二级 3-1',
+                    children: [{
+                        label: '三级 3-1-1'
+                    }]
+                }, {
+                    label: '二级 3-2',
+                    children: [{
+                        label: '三级 3-2-1'
+                    }]
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            tableData: [{
+                tag_id: 'tag0001',
+                name: '测试',
+            }],
+            rules: {
+                server_ip: [
+                    { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                port_number: [
+                    { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                gateway_id: [
+                    { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                data_theme: [
+                    { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                upload_mode: [
+                    { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                upload_week: [
+                    { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                data_filter: [
+                    { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        treeNodeClick() {
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        handleSelect(key) {
+            console.log(key);
+            if (key == 1) {
+                this.choose_point = true;
+            }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        }
+    },
+    directives: {
+        'click-outside': {
+            bind: function (el, binding, vnode) {
+                console.log('el', el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == 'function') {
+                            vnode.context[binding.expression](event)
+                        }
+                    }
+                }
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener('click', el.event, true)
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener('click', el.event, true)
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    height: 753px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030184746.vue b/.history/src/components/TreeView_20231030184746.vue
new file mode 100644
index 0000000..08c121b
--- /dev/null
+++ b/.history/src/components/TreeView_20231030184746.vue
@@ -0,0 +1,851 @@
+<!-- 网关通道 -->
+<template>
+    <div>
+        <div v-click-outside="closeMenu">
+            <div class="tree_menu" v-show="dialogVisible">
+                <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
+                    @node-click="treeNodeClick"></el-tree>
+                <!-- 树形控件右键组件 -->
+                <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                        <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                            <span slot="title">新建通道</span>
+                        </el-menu-item>
+                        <el-menu-item index="2" style="font-size: 12px;">
+                            <span slot="title">取 消</span>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="input1" placeholder=""
+                                            style="width: 200px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div class="super_parmams">
+                    <h3>高级参数</h3>
+                    <div>
+                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+                        <i class="el-icon-caret-top" v-else="is_retract"></i>
+                        <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+                            收起</el-button>
+                    </div>
+                </div>
+                <div class="super_con" v-show="is_retract">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                                        :disabled="isdisabled"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">:
+                                        </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <p style="color:white">协议选择</p>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道名称:"
+                :label-width="formLabelWidth"
+                prop="pass_name"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
+                <el-select
+                  v-model="value"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="驱动名称:"
+                :label-width="formLabelWidth"
+                prop="drive_name"
+              >
+                <el-row>
+                  <el-col :span="18">
+                    <el-input
+                      v-model="input1"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="IP地址:"
+                :label-width="formLabelWidth"
+                prop="ip_address"
+              >
+                <el-row>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="端口号:"
+                :label-width="formLabelWidth"
+                prop="port_number"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="超过时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_exceeded"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="间隔时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_interval"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="轮询时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_polling"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="重复次数:"
+                :label-width="formLabelWidth"
+                prop="repeate_count"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button
+              type="text"
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="add_passage = false">取 消</el-button>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All">
+      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+        <el-tree :data="datas" :props="defaultProps"></el-tree>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            diag_drive: false,
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            checked2: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            },],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    console.log(document.querySelector(".body"));
+  },
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+<<<<<<< HEAD
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+}
+
+.drvieName_All {
+    position: absolute;
+    left: 1335px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
+=======
+</style>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
diff --git a/.history/src/components/TreeView_20231030184838.vue b/.history/src/components/TreeView_20231030184838.vue
new file mode 100644
index 0000000..d83dc46
--- /dev/null
+++ b/.history/src/components/TreeView_20231030184838.vue
@@ -0,0 +1,933 @@
+<!-- 网关通道 -->
+<template>
+<<<<<<< HEAD
+    <div>
+        <div v-click-outside="closeMenu">
+            <div class="tree_menu" v-show="dialogVisible">
+                <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
+                    @node-click="treeNodeClick"></el-tree>
+                <!-- 树形控件右键组件 -->
+                <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                        <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                            <span slot="title">新建通道</span>
+                        </el-menu-item>
+                        <el-menu-item index="2" style="font-size: 12px;">
+                            <span slot="title">取 消</span>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="input1" placeholder=""
+                                            style="width: 200px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div class="super_parmams">
+                    <h3>高级参数</h3>
+                    <div>
+                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+                        <i class="el-icon-caret-top" v-else="is_retract"></i>
+                        <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+                            收起</el-button>
+                    </div>
+                </div>
+                <div class="super_con" v-show="is_retract">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                                        :disabled="isdisabled"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">:
+                                        </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <p style="color:white">协议选择</p>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+=======
+  <div>
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >网关通道</el-button
+    >
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-contextmenu="rightClick"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu
+          class="el-menu-vertical-demo"
+          @select="selectMenuNode"
+          default-active="#0078FE"
+        >
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建通道</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道名称:"
+                :label-width="formLabelWidth"
+                prop="pass_name"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
+                <el-select
+                  v-model="value"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="驱动名称:"
+                :label-width="formLabelWidth"
+                prop="drive_name"
+              >
+                <el-row>
+                  <el-col :span="18">
+                    <el-input
+                      v-model="input1"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="IP地址:"
+                :label-width="formLabelWidth"
+                prop="ip_address"
+              >
+                <el-row>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="端口号:"
+                :label-width="formLabelWidth"
+                prop="port_number"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="超过时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_exceeded"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="间隔时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_interval"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="轮询时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_polling"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="重复次数:"
+                :label-width="formLabelWidth"
+                prop="repeate_count"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button
+              type="text"
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="add_passage = false">取 消</el-button>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All">
+      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+        <el-tree :data="datas" :props="defaultProps"></el-tree>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+<<<<<<< HEAD
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            diag_drive: false,
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            checked2: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            },],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+=======
+  data() {
+    return {
+      diag_drive: false,
+      options: [
+        {
+          value: "选项1",
+          label: "测试1",
+        },
+        {
+          value: "选项2",
+          label: "测试2",
+        },
+        {
+          value: "选项3",
+          label: "测试3",
+        },
+        {
+          value: "选项4",
+          label: "测试4",
+        },
+        {
+          value: "选项5",
+          label: "测试5",
+        },
+      ],
+      value: "网口",
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: false,
+      menuShow: false,
+      datas: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    console.log(document.querySelector(".body"));
+  },
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+<<<<<<< HEAD
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+}
+
+.drvieName_All {
+    position: absolute;
+    left: 1335px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
+=======
+</style>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
diff --git a/.history/src/components/TreeView_20231030185253.vue b/.history/src/components/TreeView_20231030185253.vue
new file mode 100644
index 0000000..b323749
--- /dev/null
+++ b/.history/src/components/TreeView_20231030185253.vue
@@ -0,0 +1,930 @@
+<!-- 网关通道 -->
+<template>
+    <div>
+        <div v-click-outside="closeMenu">
+            <div class="tree_menu" v-show="dialogVisible">
+                <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
+                    @node-click="treeNodeClick"></el-tree>
+                <!-- 树形控件右键组件 -->
+                <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                        <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                            <span slot="title">新建通道</span>
+                        </el-menu-item>
+                        <el-menu-item index="2" style="font-size: 12px;">
+                            <span slot="title">取 消</span>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="input1" placeholder=""
+                                            style="width: 200px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div class="super_parmams">
+                    <h3>高级参数</h3>
+                    <div>
+                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+                        <i class="el-icon-caret-top" v-else="is_retract"></i>
+                        <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+                            收起</el-button>
+                    </div>
+                </div>
+                <div class="super_con" v-show="is_retract">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                                        :disabled="isdisabled"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">:
+                                        </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <p style="color:white">协议选择</p>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+=======
+  <div>
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >网关通道</el-button
+    >
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-contextmenu="rightClick"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu
+          class="el-menu-vertical-demo"
+          @select="selectMenuNode"
+          default-active="#0078FE"
+        >
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建通道</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道名称:"
+                :label-width="formLabelWidth"
+                prop="pass_name"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
+                <el-select
+                  v-model="value"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="驱动名称:"
+                :label-width="formLabelWidth"
+                prop="drive_name"
+              >
+                <el-row>
+                  <el-col :span="18">
+                    <el-input
+                      v-model="input1"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="IP地址:"
+                :label-width="formLabelWidth"
+                prop="ip_address"
+              >
+                <el-row>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="端口号:"
+                :label-width="formLabelWidth"
+                prop="port_number"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="超过时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_exceeded"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="间隔时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_interval"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="轮询时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_polling"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="重复次数:"
+                :label-width="formLabelWidth"
+                prop="repeate_count"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button
+              type="text"
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="add_passage = false">取 消</el-button>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All">
+      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+        <el-tree :data="datas" :props="defaultProps"></el-tree>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+<<<<<<< HEAD
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            diag_drive: false,
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            checked2: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            },],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+  data(){
+    return {
+      diag_drive: false,
+      options: [
+        {
+          value: "选项1",
+          label: "测试1",
+        },
+        {
+          value: "选项2",
+          label: "测试2",
+        },
+        {
+          value: "选项3",
+          label: "测试3",
+        },
+        {
+          value: "选项4",
+          label: "测试4",
+        },
+        {
+          value: "选项5",
+          label: "测试5",
+        },
+      ],
+      value: "网口",
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: false,
+      menuShow: false,
+      datas: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    console.log(document.querySelector(".body"));
+  },
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+<<<<<<< HEAD
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+}
+
+.drvieName_All {
+    position: absolute;
+    left: 1335px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
+=======
+</style>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
diff --git a/.history/src/components/TreeView_20231030185519.vue b/.history/src/components/TreeView_20231030185519.vue
new file mode 100644
index 0000000..d15fc94
--- /dev/null
+++ b/.history/src/components/TreeView_20231030185519.vue
@@ -0,0 +1,879 @@
+<!-- 网关通道 -->
+<template>
+    <div>
+        <div v-click-outside="closeMenu">
+            <div class="tree_menu" v-show="dialogVisible">
+                <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
+                    @node-click="treeNodeClick"></el-tree>
+                <!-- 树形控件右键组件 -->
+                <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                        <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                            <span slot="title">新建通道</span>
+                        </el-menu-item>
+                        <el-menu-item index="2" style="font-size: 12px;">
+                            <span slot="title">取 消</span>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="input1" placeholder=""
+                                            style="width: 200px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div class="super_parmams">
+                    <h3>高级参数</h3>
+                    <div>
+                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+                        <i class="el-icon-caret-top" v-else="is_retract"></i>
+                        <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+                            收起</el-button>
+                    </div>
+                </div>
+                <div class="super_con" v-show="is_retract">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                                        :disabled="isdisabled"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">:
+                                        </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <p style="color:white">协议选择</p>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+  <div>
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >网关通道</el-button
+    >
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-contextmenu="rightClick"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu
+          class="el-menu-vertical-demo"
+          @select="selectMenuNode"
+          default-active="#0078FE"
+        >
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建通道</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道名称:"
+                :label-width="formLabelWidth"
+                prop="pass_name"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
+                <el-select
+                  v-model="value"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="驱动名称:"
+                :label-width="formLabelWidth"
+                prop="drive_name"
+              >
+                <el-row>
+                  <el-col :span="18">
+                    <el-input
+                      v-model="input1"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="IP地址:"
+                :label-width="formLabelWidth"
+                prop="ip_address"
+              >
+                <el-row>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="端口号:"
+                :label-width="formLabelWidth"
+                prop="port_number"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="超过时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_exceeded"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="间隔时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_interval"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="轮询时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_polling"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="重复次数:"
+                :label-width="formLabelWidth"
+                prop="repeate_count"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button
+              type="text"
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="add_passage = false">取 消</el-button>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All">
+      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+        <el-tree :data="datas" :props="defaultProps"></el-tree>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            diag_drive: false,
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            checked2: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            },],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    console.log(document.querySelector(".body"));
+  },
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+<<<<<<< HEAD
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+}
+
+.drvieName_All {
+    position: absolute;
+    left: 1335px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
+=======
+</style>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
diff --git a/.history/src/components/TreeView_20231030185532.vue b/.history/src/components/TreeView_20231030185532.vue
new file mode 100644
index 0000000..f1ba712
--- /dev/null
+++ b/.history/src/components/TreeView_20231030185532.vue
@@ -0,0 +1,878 @@
+<!-- 网关通道 -->
+<template>
+    <div>
+        <div v-click-outside="closeMenu">
+            <div class="tree_menu" v-show="dialogVisible">
+                <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
+                    @node-click="treeNodeClick"></el-tree>
+                <!-- 树形控件右键组件 -->
+                <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                        <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                            <span slot="title">新建通道</span>
+                        </el-menu-item>
+                        <el-menu-item index="2" style="font-size: 12px;">
+                            <span slot="title">取 消</span>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="input1" placeholder=""
+                                            style="width: 200px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div class="super_parmams">
+                    <h3>高级参数</h3>
+                    <div>
+                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+                        <i class="el-icon-caret-top" v-else="is_retract"></i>
+                        <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+                            收起</el-button>
+                    </div>
+                </div>
+                <div class="super_con" v-show="is_retract">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                                        :disabled="isdisabled"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">:
+                                        </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <p style="color:white">协议选择</p>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+  <div>
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >网关通道</el-button
+    >
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-contextmenu="rightClick"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu
+          class="el-menu-vertical-demo"
+          @select="selectMenuNode"
+          default-active="#0078FE"
+        >
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建通道</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道名称:"
+                :label-width="formLabelWidth"
+                prop="pass_name"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
+                <el-select
+                  v-model="value"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="驱动名称:"
+                :label-width="formLabelWidth"
+                prop="drive_name"
+              >
+                <el-row>
+                  <el-col :span="18">
+                    <el-input
+                      v-model="input1"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="IP地址:"
+                :label-width="formLabelWidth"
+                prop="ip_address"
+              >
+                <el-row>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="端口号:"
+                :label-width="formLabelWidth"
+                prop="port_number"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="超过时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_exceeded"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="间隔时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_interval"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="轮询时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_polling"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="重复次数:"
+                :label-width="formLabelWidth"
+                prop="repeate_count"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button
+              type="text"
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="add_passage = false">取 消</el-button>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All">
+      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+        <el-tree :data="datas" :props="defaultProps"></el-tree>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            diag_drive: false,
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            checked2: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            },],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    console.log(document.querySelector(".body"));
+  },
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+<<<<<<< HEAD
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+}
+
+.drvieName_All {
+    position: absolute;
+    left: 1335px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
+=======
+</style>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
diff --git a/.history/src/components/TreeView_20231030185533.vue b/.history/src/components/TreeView_20231030185533.vue
new file mode 100644
index 0000000..f1ba712
--- /dev/null
+++ b/.history/src/components/TreeView_20231030185533.vue
@@ -0,0 +1,878 @@
+<!-- 网关通道 -->
+<template>
+    <div>
+        <div v-click-outside="closeMenu">
+            <div class="tree_menu" v-show="dialogVisible">
+                <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
+                    @node-click="treeNodeClick"></el-tree>
+                <!-- 树形控件右键组件 -->
+                <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                        <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                            <span slot="title">新建通道</span>
+                        </el-menu-item>
+                        <el-menu-item index="2" style="font-size: 12px;">
+                            <span slot="title">取 消</span>
+                        </el-menu-item>
+                    </el-menu>
+                </div>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="input1" placeholder=""
+                                            style="width: 200px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <div class="super_parmams">
+                    <h3>高级参数</h3>
+                    <div>
+                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+                        <i class="el-icon-caret-top" v-else="is_retract"></i>
+                        <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+                            收起</el-button>
+                    </div>
+                </div>
+                <div class="super_con" v-show="is_retract">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                                        :disabled="isdisabled"></el-input>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">:
+                                        </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                                    <el-row>
+                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <p style="color:white">协议选择</p>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+  <div>
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >网关通道</el-button
+    >
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-contextmenu="rightClick"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu
+          class="el-menu-vertical-demo"
+          @select="selectMenuNode"
+          default-active="#0078FE"
+        >
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建通道</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道名称:"
+                :label-width="formLabelWidth"
+                prop="pass_name"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="通道:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
+                <el-select
+                  v-model="value"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="驱动名称:"
+                :label-width="formLabelWidth"
+                prop="drive_name"
+              >
+                <el-row>
+                  <el-col :span="18">
+                    <el-input
+                      v-model="input1"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="IP地址:"
+                :label-width="formLabelWidth"
+                prop="ip_address"
+              >
+                <el-row>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="端口号:"
+                :label-width="formLabelWidth"
+                prop="port_number"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="超过时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_exceeded"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="间隔时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_interval"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="轮询时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_polling"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="重复次数:"
+                :label-width="formLabelWidth"
+                prop="repeate_count"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button
+              type="text"
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="add_passage = false">取 消</el-button>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All">
+      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+        <el-tree :data="datas" :props="defaultProps"></el-tree>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            diag_drive: false,
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            checked2: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            },],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    console.log(document.querySelector(".body"));
+  },
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+<<<<<<< HEAD
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+}
+
+.drvieName_All {
+    position: absolute;
+    left: 1335px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
+=======
+</style>
+>>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
diff --git a/.history/src/components/TreeView_20231030190044.vue b/.history/src/components/TreeView_20231030190044.vue
new file mode 100644
index 0000000..2942155
--- /dev/null
+++ b/.history/src/components/TreeView_20231030190044.vue
@@ -0,0 +1,685 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <div v-click-outside="closeMenu">
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px;">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.
+                  </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+              收起</el-button>
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    :disabled="isdisabled"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">:
+                    </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="add_passage = false">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <p style="color:white">协议选择</p>
+      <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+    </div>
+    <div>
+      <!-- 设置树形控件 -->
+      <el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        >>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+      </div>
+      <div class="pas_params">
+        <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                  <el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                  <el-row>
+                    <el-col :span="18">
+                      <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="6">
+                      <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="super_parmams">
+            <h3>高级参数</h3>
+            <div>
+              <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+              <i class="el-icon-caret-top" v-else="is_retract"></i>
+              <el-button type="text" plain @click="getRetract" style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              ">
+                收起</el-button>
+            </div>
+          </div>
+          <div class="super_con" v-show="is_retract">
+            <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                    <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
+                      :disabled="isdisabled"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                      <el-col :span="4">: </el-col>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="06/10:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="add_passage = false">取 消</el-button>
+            <el-button type="primary" @click="add_passage = false">确 定</el-button>
+          </span>
+        </el-dialog>
+      </div>
+      <div class="drvieName_All">
+        <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+          <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </el-dialog>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      options1: [{
+        value: "有线区Channel1",
+        label: "有线区Channel1",
+      }, {
+        value: "无线区Channel1",
+        label: "无线区Channel1",
+      }],
+      options2: [{
+        value: "网口",
+        label: "网口",
+      }, {
+        value: "串口",
+        label: "串口",
+      }],
+      value1: '有线区Channel1',
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "数据服务",
+          children: [{
+            label: "Modbus"
+          }]
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client"
+            },
+            {
+              label: "Alink"
+            },
+            {
+              label: "Tlink"
+            },
+            {
+              label: "loTDDC"
+            },
+            {
+              label: "Ulink"
+            },
+          ]
+        }
+        ]
+      },],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+    },
+    // defaultProps: {
+    //   children: "children",
+    //   label: "label",
+    // },
+    rules: {
+      pass_name: [
+        { required: true, message: "请输入通道名称", trigger: "blur" },
+        { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+      ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+          drive_name: [
+            { required: true, message: "请输入驱动名称", trigger: "blur" },
+          ],
+            ip_address: [
+              { required: true, message: "请输入ip地址", trigger: "blur" },
+            ],
+              port_number: [
+                { required: true, message: "请输入端口号", trigger: "blur" },
+              ],
+                time_exceeded: [
+                  { required: true, message: "请输入超出时间", trigger: "blur" },
+                ],
+                  time_interval: [
+                    { required: true, message: "请输入间隔时间", trigger: "blur" },
+                  ],
+                    time_polling: [
+                      { required: true, message: "请输入轮询时间", trigger: "blur" },
+                    ],
+                      repeate_count: [
+                        { required: true, message: "请输入重复次数", trigger: "blur" },
+                      ],
+      },
+};
+
+
+methods: {
+  rightClick(e, data, node) {
+    this.menuShow = false;
+    this.menuShow = true;
+    e.preventDefault(); //关闭浏览器右键默认事件
+    this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+    document.addEventListener("click", (ev) => {
+      ev.stopImmediatePropagation();
+      if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+        this.foo();
+      }
+    });
+  },
+  // 点击时候的判断,判断是否为新增网关
+  selectMenuNode(index, indexPath) {
+    console.log(index);
+    if (index == 1) {
+      this.add_passage = true;
+    }
+  },
+  foo() {
+    // 取消鼠标监听事件 菜单栏
+    this.menuShow = false;
+    document.removeEventListener("click", this.foo); // 关掉监听，
+  },
+  treeNodeClick() {
+    this.foo();
+  },
+  // 收起点击事件的判断
+  getRetract() {
+    if (this.is_retract == true) {
+      this.is_retract = false;
+    } else {
+      this.is_retract = true;
+    }
+  },
+  getDriveName() {
+    this.diag_drive = true;
+  },
+},
+watch: {
+  checked1: {
+    handler(old) {
+      if (old) {
+        this.isdisabled = false;
+      } else {
+        this.isdisabled = true;
+      }
+    },
+  },
+},
+directives: {
+  clickoutside: {
+    bind: function (el, binding, vnode) {
+      function documentHandler(e) {
+        if (el.contains(e.target)) {
+          return false;
+        }
+        if (binding.expression) {
+          binding.value(e);
+        }
+      }
+      el._vueClickOutside_ = documentHandler;
+      document.addEventListener("click", documentHandler);
+    },
+    unbind: function (el, binding) {
+      document.removeEventListener("click", el._vueClickOutside_);
+      delete el._vueClickOutside_;
+    },
+  },
+},
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+}
+
+.drvieName_All {
+  position: absolute;
+  left: 1335px;
+  top: 218px;
+  width: 435px;
+  height: 720px;
+}
+</style>
diff --git a/.history/src/components/TreeView_20231030190205.vue b/.history/src/components/TreeView_20231030190205.vue
new file mode 100644
index 0000000..0fa0eec
--- /dev/null
+++ b/.history/src/components/TreeView_20231030190205.vue
@@ -0,0 +1,687 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <div v-click-outside="closeMenu">
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px;">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.
+                  </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+              收起</el-button>
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    :disabled="isdisabled"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">:
+                    </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="add_passage = false">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <p style="color:white">协议选择</p>
+      <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+    </div>
+    <div>
+      <!-- 设置树形控件 -->
+      <el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        >>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+      </div>
+      <div class="pas_params">
+        <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                  <el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                  <el-row>
+                    <el-col :span="18">
+                      <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="6">
+                      <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="super_parmams">
+            <h3>高级参数</h3>
+            <div>
+              <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+              <i class="el-icon-caret-top" v-else="is_retract"></i>
+              <el-button type="text" plain @click="getRetract" style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              ">
+                收起</el-button>
+            </div>
+          </div>
+          <div class="super_con" v-show="is_retract">
+            <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                    <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
+                      :disabled="isdisabled"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                      <el-col :span="4">: </el-col>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="06/10:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="add_passage = false">取 消</el-button>
+            <el-button type="primary" @click="add_passage = false">确 定</el-button>
+          </span>
+        </el-dialog>
+      </div>
+      <div class="drvieName_All">
+        <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+          <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </el-dialog>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      options1: [{
+        value: "有线区Channel1",
+        label: "有线区Channel1",
+      }, {
+        value: "无线区Channel1",
+        label: "无线区Channel1",
+      }],
+      options2: [{
+        value: "网口",
+        label: "网口",
+      }, {
+        value: "串口",
+        label: "串口",
+      }],
+      value1: '有线区Channel1',
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "数据服务",
+          children: [{
+            label: "Modbus"
+          }]
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client"
+            },
+            {
+              label: "Alink"
+            },
+            {
+              label: "Tlink"
+            },
+            {
+              label: "loTDDC"
+            },
+            {
+              label: "Ulink"
+            },
+          ]
+        }
+        ]
+      },],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+
+      // defaultProps: {
+      //   children: "children",
+      //   label: "label",
+      // },
+      rules: [{
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      }]
+    },
+  }
+};
+
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+}
+
+.drvieName_All {
+  position: absolute;
+  left: 1335px;
+  top: 218px;
+  width: 435px;
+  height: 720px;
+}
+</style>
diff --git a/.history/src/components/TreeView_20231030190317.vue b/.history/src/components/TreeView_20231030190317.vue
new file mode 100644
index 0000000..42b5ea3
--- /dev/null
+++ b/.history/src/components/TreeView_20231030190317.vue
@@ -0,0 +1,684 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <div v-click-outside="closeMenu">
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px;">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.
+                  </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+              收起</el-button>
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    :disabled="isdisabled"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">:
+                    </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="add_passage = false">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <p style="color:white">协议选择</p>
+      <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+    </div>
+    <div>
+      <!-- 设置树形控件 -->
+      <el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        >>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+      </div>
+      <div class="pas_params">
+        <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                  <el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                  <el-row>
+                    <el-col :span="18">
+                      <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="6">
+                      <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="super_parmams">
+            <h3>高级参数</h3>
+            <div>
+              <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+              <i class="el-icon-caret-top" v-else="is_retract"></i>
+              <el-button type="text" plain @click="getRetract" style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              ">
+                收起</el-button>
+            </div>
+          </div>
+          <div class="super_con" v-show="is_retract">
+            <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                    <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
+                      :disabled="isdisabled"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                      <el-col :span="4">: </el-col>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="06/10:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="add_passage = false">取 消</el-button>
+            <el-button type="primary" @click="add_passage = false">确 定</el-button>
+          </span>
+        </el-dialog>
+      </div>
+      <div class="drvieName_All">
+        <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+          <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </el-dialog>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      options1: [{
+        value: "有线区Channel1",
+        label: "有线区Channel1",
+      }, {
+        value: "无线区Channel1",
+        label: "无线区Channel1",
+      }],
+      options2: [{
+        value: "网口",
+        label: "网口",
+      }, {
+        value: "串口",
+        label: "串口",
+      }],
+      value1: '有线区Channel1',
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "数据服务",
+          children: [{
+            label: "Modbus"
+          }]
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client"
+            },
+            {
+              label: "Alink"
+            },
+            {
+              label: "Tlink"
+            },
+            {
+              label: "loTDDC"
+            },
+            {
+              label: "Ulink"
+            },
+          ]
+        }
+        ]
+      },],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+
+      // defaultProps: {
+      //   children: "children",
+      //   label: "label",
+      // },
+      rules: [{
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      }]
+    };
+  },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+}
+
+.drvieName_All {
+  position: absolute;
+  left: 1335px;
+  top: 218px;
+  width: 435px;
+  height: 720px;
+}
+</style>
diff --git a/.history/src/components/TreeView_20231030190324.vue b/.history/src/components/TreeView_20231030190324.vue
new file mode 100644
index 0000000..42b5ea3
--- /dev/null
+++ b/.history/src/components/TreeView_20231030190324.vue
@@ -0,0 +1,684 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <div v-click-outside="closeMenu">
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px;">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.
+                  </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+              收起</el-button>
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    :disabled="isdisabled"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">:
+                    </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="add_passage = false">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <p style="color:white">协议选择</p>
+      <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+    </div>
+    <div>
+      <!-- 设置树形控件 -->
+      <el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        >>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+      </div>
+      <div class="pas_params">
+        <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                  <el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                  <el-row>
+                    <el-col :span="18">
+                      <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="6">
+                      <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="super_parmams">
+            <h3>高级参数</h3>
+            <div>
+              <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+              <i class="el-icon-caret-top" v-else="is_retract"></i>
+              <el-button type="text" plain @click="getRetract" style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              ">
+                收起</el-button>
+            </div>
+          </div>
+          <div class="super_con" v-show="is_retract">
+            <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                    <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
+                      :disabled="isdisabled"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                      <el-col :span="4">: </el-col>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="06/10:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="add_passage = false">取 消</el-button>
+            <el-button type="primary" @click="add_passage = false">确 定</el-button>
+          </span>
+        </el-dialog>
+      </div>
+      <div class="drvieName_All">
+        <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+          <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </el-dialog>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      options1: [{
+        value: "有线区Channel1",
+        label: "有线区Channel1",
+      }, {
+        value: "无线区Channel1",
+        label: "无线区Channel1",
+      }],
+      options2: [{
+        value: "网口",
+        label: "网口",
+      }, {
+        value: "串口",
+        label: "串口",
+      }],
+      value1: '有线区Channel1',
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "数据服务",
+          children: [{
+            label: "Modbus"
+          }]
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client"
+            },
+            {
+              label: "Alink"
+            },
+            {
+              label: "Tlink"
+            },
+            {
+              label: "loTDDC"
+            },
+            {
+              label: "Ulink"
+            },
+          ]
+        }
+        ]
+      },],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+
+      // defaultProps: {
+      //   children: "children",
+      //   label: "label",
+      // },
+      rules: [{
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      }]
+    };
+  },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+}
+
+.drvieName_All {
+  position: absolute;
+  left: 1335px;
+  top: 218px;
+  width: 435px;
+  height: 720px;
+}
+</style>
diff --git a/.history/src/components/TreeView_20231030190433.vue b/.history/src/components/TreeView_20231030190433.vue
new file mode 100644
index 0000000..b46eca0
--- /dev/null
+++ b/.history/src/components/TreeView_20231030190433.vue
@@ -0,0 +1,685 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <div v-click-outside="closeMenu">
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px;">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.
+                  </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+              收起</el-button>
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    :disabled="isdisabled"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">:
+                    </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="add_passage = false">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <p style="color:white">协议选择</p>
+      <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+    </div>
+    <div>
+      <!-- 设置树形控件 -->
+      <el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        >>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+      </div>
+      <div class="pas_params">
+        <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                  <el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                  <el-row>
+                    <el-col :span="18">
+                      <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="6">
+                      <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="super_parmams">
+            <h3>高级参数</h3>
+            <div>
+              <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+              <i class="el-icon-caret-top" v-else="is_retract"></i>
+              <el-button type="text" plain @click="getRetract" style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              ">
+                收起</el-button>
+            </div>
+          </div>
+          <div class="super_con" v-show="is_retract">
+            <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                    <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
+                      :disabled="isdisabled"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                      <el-col :span="4">: </el-col>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="06/10:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="add_passage = false">取 消</el-button>
+            <el-button type="primary" @click="add_passage = false">确 定</el-button>
+          </span>
+        </el-dialog>
+      </div>
+      <div class="drvieName_All">
+        <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+          <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      options1: [{
+        value: "有线区Channel1",
+        label: "有线区Channel1",
+      }, {
+        value: "无线区Channel1",
+        label: "无线区Channel1",
+      }],
+      options2: [{
+        value: "网口",
+        label: "网口",
+      }, {
+        value: "串口",
+        label: "串口",
+      }],
+      value1: '有线区Channel1',
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "数据服务",
+          children: [{
+            label: "Modbus"
+          }]
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client"
+            },
+            {
+              label: "Alink"
+            },
+            {
+              label: "Tlink"
+            },
+            {
+              label: "loTDDC"
+            },
+            {
+              label: "Ulink"
+            },
+          ]
+        }
+        ]
+      },],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+
+      // defaultProps: {
+      //   children: "children",
+      //   label: "label",
+      // },
+      rules: [{
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      }]
+    };
+  },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+}
+
+.drvieName_All {
+  position: absolute;
+  left: 1335px;
+  top: 218px;
+  width: 435px;
+  height: 720px;
+}
+</style>
diff --git a/.history/src/views/DataCollect_20231030185144.vue b/.history/src/views/DataCollect_20231030185144.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030185144.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        SerialPort,
+        DeviceVIew,
+        CollectionView,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030185153.vue b/.history/src/views/DataCollect_20231030185153.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030185153.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        SerialPort,
+        DeviceVIew,
+        CollectionView,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030190326.vue b/.history/src/views/DataCollect_20231030190326.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030190326.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        SerialPort,
+        DeviceVIew,
+        CollectionView,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030190507.vue b/.history/src/views/DataCollect_20231030190507.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030190507.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        SerialPort,
+        DeviceVIew,
+        CollectionView,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030190508.vue b/.history/src/views/DataCollect_20231030190508.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030190508.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        SerialPort,
+        DeviceVIew,
+        CollectionView,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030190520.vue b/.history/src/views/DataCollect_20231030190520.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030190520.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        SerialPort,
+        DeviceVIew,
+        CollectionView,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 89537e1..e2153f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,14 +13,31 @@
       <ChiCollection></ChiCollection>
       <ChiClone></ChiClone>
     </div>
-    <div class="ip">
-      <IpConfiguration></IpConfiguration>
-      <PortConfiguration></PortConfiguration>
-      <NetProtocol></NetProtocol>
-    </div>
+    <IpConfiguration></IpConfiguration>
+    <PortConfiguration></PortConfiguration>
 
     <div>
-      <router-view></router-view>
+      <!-- //串口及网络协议设置 -->
+      <netConfiguration />
+      <!-- 网口配置 -->
+      <NetworkConfiguration />
+      <!-- 无线配置 -->
+      <Wireles />
+      <!-- 网络管理 -->
+      <NetworkManagement />
+      <!-- 对象管理 -->
+      <ObjectManagement />
+      <!-- 策略管理 -->
+      <PolicyManagement />
+      <div class="ip">
+        <IpConfiguration></IpConfiguration>
+        <PortConfiguration></PortConfiguration>
+        <NetProtocol></NetProtocol>
+      </div>
+
+      <div>
+        <router-view></router-view>
+      </div>
     </div>
   </div>
 </template>
@@ -36,7 +53,13 @@ import PortConfiguration from "./components/PortConfiguration.vue";
 import ChiDevice from "./components/ChiDevice.vue";
 import ChiCollection from "./components/ChiCollection.vue";
 import ChiClone from "./components/ChiClone.vue";
+import netConfiguration from "./components/netConfiguration.vue";
+import NetworkConfiguration from "./components/NetworkConfiguration.vue";
+import Wireles from "./components/Wireles.vue";
+import NetworkManagement from "./components/NetworkManagement.vue";
+import ObjectManagement from "./components/ObjectManagement.vue";
 import NetProtocol from "./components/NetProtocol.vue";
+import PolicyManagement from "./components/PolicyManagement.vue";
 export default {
   name: "App",
   data() {
@@ -60,7 +83,13 @@ export default {
     ChiClone,
     IpConfiguration,
     PortConfiguration,
-    NetProtocol
+    netConfiguration,
+    NetworkConfiguration,
+    Wireles,
+    NetworkManagement,
+    ObjectManagement,
+    NetProtocol,
+    PolicyManagement,
   },
 };
 </script>
diff --git a/src/components/ChiCollection.vue b/src/components/ChiCollection.vue
index 6e71c8d..5c9d2ae 100644
--- a/src/components/ChiCollection.vue
+++ b/src/components/ChiCollection.vue
@@ -1,303 +1,316 @@
 <!-- 采集点收集 -->
 <template>
-    <div>
-        <div v-click-outside="closeMenu">
-            <!-- 设置树形控件 -->
-            <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
-            <div v-show="dialogVisible" class="tree_menu">
-                <el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
-                <!-- 树形控件右键组件 -->
-            </div>
-        </div>
-        <div class="pas_params" v-show="add_passage">
-            <div>
-                <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
-                    <el-menu-item index="1">添加</el-menu-item>
-                    <el-menu-item index="2">保存</el-menu-item>
-                    <el-menu-item index="3">删除</el-menu-item>
-                </el-menu>
-            </div>
-            <el-table ref="singleTable" :data="tableData" style="width: 100%">
-                <el-table-column type="index">
-                </el-table-column>
-                <el-table-column property="tag_id" label="TagID">
-                </el-table-column>
-                <el-table-column property="name" label="名称">
-                </el-table-column>
-                <el-table-column property="datas" label="地址">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.datas" placeholder="0X">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.address" placeholder="1">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column property="type" label="采集数据类型">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.type" placeholder="bool">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-
-                <el-table-column property="attribute" label="读写属性">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.attribute" placeholder="读写">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column property="order" label="上传模式">
-                </el-table-column>
-                <el-table-column property="count" label="单位">
-                </el-table-column>
-            </el-table>
-        </div>
+  <div>
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >斥候采集点设置</el-button
+    >
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
     </div>
+    <div class="pas_params" v-show="add_passage">
+      <div>
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="handleSelect"
+        >
+          <el-menu-item index="1">添加</el-menu-item>
+          <el-menu-item index="2">保存</el-menu-item>
+          <el-menu-item index="3">删除</el-menu-item>
+        </el-menu>
+      </div>
+      <el-table ref="singleTable" :data="tableData" style="width: 100%">
+        <el-table-column type="index"> </el-table-column>
+        <el-table-column property="tag_id" label="TagID"> </el-table-column>
+        <el-table-column property="name" label="名称"> </el-table-column>
+        <el-table-column property="datas" label="地址">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.datas" placeholder="0X">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          property="address"
+          label="寄存地址(十进制)"
+          width="150px"
+        >
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.address" placeholder="1">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="type" label="采集数据类型">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.type" placeholder="bool">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column property="attribute" label="读写属性">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.attribute" placeholder="读写">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="order" label="上传模式"> </el-table-column>
+        <el-table-column property="count" label="单位"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'ChiCollection',
+  name: "ChiCollection",
 
-    data() {
-        return {
-
-            activeIndex: '1',
-            value1: 1,
-            checked: "",
-            labelPosition: "left",
-            formLabelWidth: "116px",
-            input1: 192,
-            add_passage: false,
-            rightMenu: "",
-            dialogVisible: false,
-            menuShow: false,
-            datas: [{
-                label: '一级 1',
-                children: [{
-                    label: '二级 1-1',
-                    children: [{
-                        label: '三级 1-1-1'
-                    }]
-                }]
-            }, {
-                label: '一级 2',
-                children: [{
-                    label: '二级 2-1',
-                    children: [{
-                        label: '三级 2-1-1'
-                    }]
-                }, {
-                    label: '二级 2-2',
-                    children: [{
-                        label: '三级 2-2-1'
-                    }]
-                }]
-            }, {
-                label: '一级 3',
-                children: [{
-                    label: '二级 3-1',
-                    children: [{
-                        label: '三级 3-1-1'
-                    }]
-                }, {
-                    label: '二级 3-2',
-                    children: [{
-                        label: '三级 3-2-1'
-                    }]
-                }]
-            }],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
+  data() {
+    return {
+      activeIndex: "1",
+      value1: 1,
+      checked: "",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: false,
+      menuShow: false,
+      datas: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
             },
-            selectOptions: [],
-            tableData: [{
-                tag_id: 'tag0001',
-                name: '测试',
-                datas: "",
-                address: '1',
-                order: 'NUll',
-                type: "boolean",
-                attribute: "读写",
-                count: 1,
-            }],
-        };
-    },
-
-    mounted() {
-
-    },
-
-    methods: {
-        treeNodeClick() {
-            this.add_passage = true;
+          ],
         },
-        getDriveName() {
-            this.diag_drive = true;
-        },
-        handleSelect(key, keyPath) {
-            console.log(key, keyPath);
-        },
-        closeMenu(ev) {
-            console.log({ ev });
-            this.dialogVisible = false;
-        }
-    },
-    directives: {
-        'click-outside': {
-            bind: function (el, binding, vnode) {
-                console.log('el', el);
-                console.log("binding", binding);
-                el.event = function (event) {
-                    // 检查点击是否发生在节点之内（包括子节点）
-                    if (!(el == event.target || el.contains(event.target))) {
-                        // 如果没有，则触发调用
-                        // 若绑定值为函数，则执行
-                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
-                        if (typeof vnode.context[binding.expression] == 'function') {
-                            vnode.context[binding.expression](event)
-                        }
-                    }
-                }
-                // 绑定事件
-                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
-                document.body.addEventListener('click', el.event, true)
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
             },
-            unbind: function (el) {
-                // 解绑事件
-                document.body.removeEventListener('click', el.event, true)
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
             },
+          ],
         },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      selectOptions: [],
+      tableData: [
+        {
+          tag_id: "tag0001",
+          name: "测试",
+          datas: "",
+          address: "1",
+          order: "NUll",
+          type: "boolean",
+          attribute: "读写",
+          count: 1,
+        },
+      ],
+    };
+  },
+
+  mounted() {},
+
+  methods: {
+    treeNodeClick() {
+      this.add_passage = true;
     },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .tree_menu {
-    position: absolute;
-    width: 286px;
-    height: 753px;
-    left: 64px;
-    top: 104px;
-    width: 286px;
-    height: 753px;
-    line-height: 20px;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
 }
 
 /deep/ .pas_params {
+  position: absolute;
+  left: 362px;
+  top: 95px;
+  width: 1066px;
+  height: 752px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  // text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+
+  .el-button {
+    width: 80px;
+    height: 30px;
+    line-height: 0.5;
+  }
+
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 54px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
     position: absolute;
-    left: 362px;
-    top: 95px;
-    width: 1066px;
-    height: 752px;
+    left: 377px;
+    top: 69px;
+    width: 1220px;
+    height: 836px;
     line-height: 20px;
-    border-radius: 3px;
+    padding-left: 36px;
     background-color: rgba(255, 255, 255, 1);
-    // text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    border: 1px solid rgba(187, 187, 187, 1);
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
 
-    .el-button {
-        width: 80px;
-        height: 30px;
-        line-height: 0.5;
+    .el-form-item {
+      margin-bottom: 0px;
     }
 
-    .el-col-12:last-child {
-        padding-right: 150px;
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
     }
 
-    .el-col-12:first-child {
-        padding-right: 54px;
-    }
+    .con_left {
+      width: 709px;
+      position: relative;
 
-    .el-row {
-        height: 40px;
-        display: flex;
-        align-items: flex-start;
-
-        .el-col-1 {
-            text-align: center;
-            line-height: 20px;
-            height: 20px;
-        }
-
-        .el-col-9 {
-            padding-left: 30px;
-        }
-    }
-
-    .el-input__inner {
-        height: 30px;
-        text-align: left;
-        padding: 0px 8px;
-    }
-
-
-
-    .content {
+      .con_left_footer {
         position: absolute;
-        left: 377px;
-        top: 69px;
-        width: 1220px;
-        height: 836px;
-        line-height: 20px;
-        padding-left: 36px;
-        background-color: rgba(255, 255, 255, 1);
-        color: rgba(16, 16, 16, 1);
-        font-size: 14px;
-        border: 1px solid rgba(187, 187, 187, 1);
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        .el-form-item {
-            margin-bottom: 0px;
-        }
-
-        /deep/ .con_left {
-            .el-con-5 {
-                width: 43px;
-            }
-        }
-
-        .con_left {
-            width: 709px;
-            position: relative;
-
-            .con_left_footer {
-                position: absolute;
-                left: 499px;
-                top: 777px;
-            }
-        }
-
-        .con_right {
-            width: 480px;
-
-            .dialog-footer {
-                .el-button {
-                    width: 80px;
-                    height: 30px;
-                    line-height: 0.5;
-                }
-            }
-        }
+        left: 499px;
+        top: 777px;
+      }
     }
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/IpConfiguration.vue b/src/components/IpConfiguration.vue
index bb695c5..b940bb8 100644
--- a/src/components/IpConfiguration.vue
+++ b/src/components/IpConfiguration.vue
@@ -11,56 +11,175 @@
         :label-position="labelPosition"
       >
         <el-form-item label="IP获取方式" prop="ipGetMethod">
-          <el-select v-model="ruleForm.ipGetMethod" style="width: 200px;">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="10">
+            <el-select v-model="ruleForm.ipGetMethod">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="DNS获取方式" prop="DnsGetMethod">
-          <el-select v-model="ruleForm.DnsGetMethod" style="width: 200px;">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="10">
+            <el-select v-model="ruleForm.DnsGetMethod">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="本机IP" prop="ipAddress">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.ipAddress"
-              placeholder="请输入IP地址"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="子网掩码" prop="subnetMaskRules">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.subnetMaskRules"
-              placeholder="请输入子网掩码"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="网关地址" prop="gateway">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.gateway"
-              placeholder="请输入网关地址"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="主DNS服务器" prop="primaryDNS">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.primaryDNS"
-              placeholder="请输入服务器号码"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="备用DNS服务器" prop="bprimaryDNS">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.bprimaryDNS"
-              placeholder="请输入服务器号码"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
diff --git a/src/components/NetworkConfiguration.vue b/src/components/NetworkConfiguration.vue
new file mode 100644
index 0000000..50e80f8
--- /dev/null
+++ b/src/components/NetworkConfiguration.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">网口设置</el-button>
+    <el-dialog
+      title="网口设置"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <h3>以太网功能</h3>
+      <el-divider></el-divider>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="开启网口:" prop="kqwk">
+          <el-select v-model="ruleForm.kqwk">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网口工作方式:" prop="wkgzfs">
+          <el-select v-model="ruleForm.wkgzfs">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <h3>网口模式设置</h3>
+      <el-divider></el-divider>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="网口模式:" prop="wkms">
+          <el-select v-model="ruleForm.wkms">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        kqwk: "",
+        wkgzfs: "",
+        wkms: "",
+      },
+      rules: {
+        kqwk: [{ required: true, trigger: "change" }],
+        wkgzfs: [{ required: true, trigger: "change" }],
+        wkms: [{ required: true, trigger: "change" }],
+      },
+    };
+  },
+};
+</script>
diff --git a/src/components/NetworkManagement.vue b/src/components/NetworkManagement.vue
new file mode 100644
index 0000000..494bf3c
--- /dev/null
+++ b/src/components/NetworkManagement.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">网络管理</el-button>
+    <el-dialog
+      title="网络管理"
+      :visible.sync="dialogVisible"
+      width="40%"
+      :before-close="handleClose"
+    >
+      <h3>内网网卡</h3>
+      <el-divider></el-divider>
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column prop="name" label="网卡名称"> </el-table-column>
+        <el-table-column prop="ipv4Address" label="IPV4地址">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ipv4Code" label="IPV4掩码">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row> </template
+        ></el-table-column>
+      </el-table>
+      <h3>外网网卡</h3>
+      <el-divider></el-divider>
+      <el-table :data="tableData1" style="width: 100%" border>
+        <el-table-column prop="name" label="网卡名称"> </el-table-column>
+        <el-table-column prop="ipv4Address" label="IPV4地址">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ipv4Code" label="IPV4掩码">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row> </template
+        ></el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      tableData: [
+        {
+          name: "内网网卡1",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+      ],
+      tableData1: [
+        {
+          name: "外网网卡1",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style></style>
diff --git a/src/components/ObjectManagement.vue b/src/components/ObjectManagement.vue
new file mode 100644
index 0000000..fa85405
--- /dev/null
+++ b/src/components/ObjectManagement.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">对象管理</el-button>
+    <el-dialog
+      title="对象管理"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-button style="margin-bottom: 10px" @click="dialogVisible1 = true"
+        >新增对象</el-button
+      >
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column label="序号">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="对象名称"> </el-table-column>
+        <el-table-column prop="address" label="IP地址信息"> </el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"
+              >编辑</el-button
+            >
+            <el-button type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog
+      title="新增对象"
+      :visible.sync="dialogVisible1"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="IP类型:" prop="iplx">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.iplx">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item label="对象名称:" prop="dxmc">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.dxmc"> </el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="IP地址:" prop="ipdz">
+          <el-row>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible1 = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogVisible1: false,
+      labelPosition: "left",
+      tableData: [
+        {
+          name: "数来服务器",
+          address: "192.168.89.21",
+        },
+        {
+          name: "网关1",
+          address: "192.168.89.16",
+        },
+      ],
+      ruleForm: {
+        iplx: "",
+        dxmc: "",
+      },
+      rules: {
+        iplx: [{ required: true, trigger: "change" }],
+        dxmc: [{ required: true, trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleClick() {},
+  },
+};
+</script>
+<style></style>
diff --git a/src/components/PolicyManagement.vue b/src/components/PolicyManagement.vue
new file mode 100644
index 0000000..a335537
--- /dev/null
+++ b/src/components/PolicyManagement.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">策略管理</el-button>
+    <el-dialog
+      title="策略管理"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-button style="margin-bottom: 10px" @click="dialogVisible1 = true"
+        >新增策略</el-button
+      >
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column label="序号">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+        <el-table-column prop="status" label="是否启动">
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.status"
+              @change="handleSwitchChange(scope.row)"
+            ></el-switch> </template
+        ></el-table-column>
+        <el-table-column prop="address" label="协议"> </el-table-column>
+        <el-table-column prop="address" label="工作模式"> </el-table-column>
+        <el-table-column prop="address" label="源对象"> </el-table-column>
+        <el-table-column prop="address" label="源端口"> </el-table-column>
+        <el-table-column prop="address" label="入口网卡"> </el-table-column>
+        <el-table-column prop="address" label="入口IP"> </el-table-column>
+        <el-table-column prop="address" label="入口网关"> </el-table-column>
+        <el-table-column prop="address" label="出口网关"> </el-table-column>
+        <el-table-column prop="address" label="出口IP"> </el-table-column>
+        <el-table-column prop="address" label="出口网关"> </el-table-column>
+        <el-table-column prop="address" label="目的对象"> </el-table-column>
+        <el-table-column prop="address" label="目的端口"> </el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"
+              >编辑</el-button
+            >
+            <el-button type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog
+      title="添加策略"
+      :visible.sync="dialogVisible1"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="IP类型:" prop="iplx">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.iplx">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item label="对象名称:" prop="dxmc">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.dxmc"> </el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="IP地址:" prop="ipdz">
+          <el-row>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible1 = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogVisible1: false,
+      labelPosition: "left",
+      tableData: [
+        {
+          name: "数来服务器",
+          address: "192.168.89.21",
+        },
+      ],
+      ruleForm: {
+        iplx: "",
+        dxmc: "",
+      },
+      rules: {
+        iplx: [{ required: true, trigger: "change" }],
+        dxmc: [{ required: true, trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleClick() {},
+  },
+};
+</script>
+<style></style>
diff --git a/src/components/PortConfiguration.vue b/src/components/PortConfiguration.vue
index cd81447..ff2eb9f 100644
--- a/src/components/PortConfiguration.vue
+++ b/src/components/PortConfiguration.vue
@@ -21,37 +21,47 @@
         :label-position="labelPosition"
       >
         <el-form-item label="波特率(bps)" prop="btl">
-          <el-select v-model="ruleForm.btl">
-            <el-option label="9600" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.btl">
+              <el-option label="9600" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="数据位(bit)" prop="data">
-          <el-select v-model="ruleForm.data">
-            <el-option label="8" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.data">
+              <el-option label="8" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="检验位" prop="check">
-          <el-select v-model="ruleForm.check">
-            <el-option label="无校验(None)" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.check">
+              <el-option label="无校验(None)" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="停止位" prop="stop">
-          <el-select v-model="ruleForm.stop">
-            <el-option label="1" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.stop">
+              <el-option label="1" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="流控模式" prop="waterContorl">
-          <el-select v-model="ruleForm.waterContorl">
-            <el-option label="None" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.waterContorl">
+              <el-option label="None" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="打包长度(bytes)" prop="bagLength">
-          <el-col :span="10">
+          <el-col :span="15">
             <el-input
               v-model="ruleForm.bagLength"
               placeholder="0-1460"
@@ -59,15 +69,17 @@
           </el-col>
         </el-form-item>
         <el-form-item label="打包时间(ms)" prop="time">
-          <el-col :span="10">
+          <el-col :span="15">
             <el-input v-model="ruleForm.time" placeholder="0-255"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="同步波特率(RF2217)" prop="RFbtl">
-          <el-select v-model="ruleForm.RFbtl">
-            <el-option label="None" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.RFbtl">
+              <el-option label="None" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-checkbox
           label="使能串口心跳包"
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index ba0c09f..b46eca0 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -1,511 +1,685 @@
 <!-- 网关通道 -->
 <template>
-    <div>
-        <div v-click-outside="closeMenu">
-            <div class="tree_menu" v-show="dialogVisible">
-                <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
-                    @node-click="treeNodeClick"></el-tree>
-                <!-- 树形控件右键组件 -->
-                <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+  <div>
+    <div v-click-outside="closeMenu">
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
 
-                    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
 
-                        <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
-                            <span slot="title">新建通道</span>
-                        </el-menu-item>
-                        <el-menu-item index="2" style="font-size: 12px;">
-                            <span slot="title">取 消</span>
-                        </el-menu-item>
-                    </el-menu>
-                </div>
-            </div>
-        </div>
-        <div class="pas_params">
-            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
-                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
-                                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
-                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
-                                        :value="item.value">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
-                                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
-                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
-                                        :value="item.value">
-                                    </el-option>
-                                </el-select>
-
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
-                                <el-row>
-                                    <el-col :span="18">
-                                        <el-input v-model="input1" placeholder=""
-                                            style="width: 200px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="6">
-                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
-                                    </el-col>
-                                </el-row>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
-                                <el-row>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="1">.
-                                    </el-col>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="1">.</el-col>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="1">.</el-col>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                </el-row>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <div class="super_parmams">
-                    <h3>高级参数</h3>
-                    <div>
-                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
-                        <i class="el-icon-caret-top" v-else="is_retract"></i>
-                        <el-button type="text" plain @click="getRetract" style="width: 28px;
-                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
-                            收起</el-button>
-                    </div>
-                </div>
-                <div class="super_con" v-show="is_retract">
-                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item>
-                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
-                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
-                                        :disabled="isdisabled"></el-input>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item>
-                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
-                                    <el-row>
-                                        <el-col :span="10">
-                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
-                                        </el-col>
-                                        <el-col :span="4">:
-                                        </el-col>
-                                        <el-col :span="10">
-                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
-                                        </el-col>
-                                    </el-row>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
-                                    <el-row>
-                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
-                                    </el-row>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="06/10:" :label-width="formLabelWidth">
-                                    <el-row>
-                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
-                                    </el-row>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                </div>
-                <span slot="footer" class="dialog-footer">
-                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
-                    <el-button @click="add_passage = false">取 消</el-button>
-
-                </span>
-            </el-dialog>
-        </div>
-        <div class="drvieName_All" v-show="diag_drive">
-            <p style="color:white">协议选择</p>
-            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px;">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
         </div>
+      </div>
     </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                <el-select v-model="value1" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                <el-select v-model="value2" placeholder="" style="width: 200px;height:30px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.
+                  </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button type="text" plain @click="getRetract" style="width: 28px;
+                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+              收起</el-button>
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    :disabled="isdisabled"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">:
+                    </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="add_passage = false">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <p style="color:white">协议选择</p>
+      <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+    </div>
+    <div>
+      <!-- 设置树形控件 -->
+      <el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"></el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        >>>>>>> 1a0774b5087c60e0b43aa61905eafc0204228718
+      </div>
+      <div class="pas_params">
+        <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
+          <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
+                  <el-select v-model="value" placeholder="" style="width: 200px; height: 30px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
+                  <el-row>
+                    <el-col :span="18">
+                      <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="6">
+                      <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="input1" style="width: 43px; height: 30px"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
+                  <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="super_parmams">
+            <h3>高级参数</h3>
+            <div>
+              <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+              <i class="el-icon-caret-top" v-else="is_retract"></i>
+              <el-button type="text" plain @click="getRetract" style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              ">
+                收起</el-button>
+            </div>
+          </div>
+          <div class="super_con" v-show="is_retract">
+            <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                    <el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
+                      :disabled="isdisabled"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item>
+                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                      <el-col :span="4">: </el-col>
+                      <el-col :span="10">
+                        <el-input v-model="input1" style="width: 91px; height: 30px"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="06/10:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                      <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="add_passage = false">取 消</el-button>
+            <el-button type="primary" @click="add_passage = false">确 定</el-button>
+          </span>
+        </el-dialog>
+      </div>
+      <div class="drvieName_All">
+        <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+          <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'TestTreeView',
+  name: "TestTreeView",
 
-    data() {
-        return {
-            options1: [{
-                value: "有线区Channel1",
-                label: "有线区Channel1",
-            }, {
-                value: "无线区Channel1",
-                label: "无线区Channel1",
-            }],
-            options2: [{
-                value: "网口",
-                label: "网口",
-            }, {
-                value: "串口",
-                label: "串口",
-            }],
-            value1: '有线区Channel1',
-            value2:"网口",
-            diag_drive: false,
-            isdisabled: true,
-            radio: "1",
-            checked1: false,
-            checked2: true,
-            is_retract: true,
-            labelPosition: "left",
-            formLabelWidth: "116px",
-            input1: 192,
-            add_passage: false,
-            rightMenu: "",
-            dialogVisible: true,
-            menuShow: false,
-            datas: [{
-                label: 'Gateway',
-                children: [{
-                    label: '数据采集',
-                    children: [{
-                        label: 'I/O点'
-                    },
-                    {
-                        label: '用户点',
-                    },
-                    {
-                        label: '计算点',
-                    },
-                    {
-                        label: '系统点',
-                    },
-                    ]
-                },
-                {
-                    label: "数据服务",
-                    children: [{
-                        label: "Modbus"
-                    }]
-                },
-                {
-                    label: "IOT",
-                    children: [
-                        {
-                            label: "Mqtt Client"
-                        },
-                        {
-                            label: "Alink"
-                        },
-                        {
-                            label: "Tlink"
-                        },
-                        {
-                            label: "loTDDC"
-                        },
-                        {
-                            label: "Ulink"
-                        },
-                    ]
-                }
-                ]
-            },],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
+  data() {
+    return {
+      options1: [{
+        value: "有线区Channel1",
+        label: "有线区Channel1",
+      }, {
+        value: "无线区Channel1",
+        label: "无线区Channel1",
+      }],
+      options2: [{
+        value: "网口",
+        label: "网口",
+      }, {
+        value: "串口",
+        label: "串口",
+      }],
+      value1: '有线区Channel1',
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      checked1: false,
+      checked2: true,
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "数据服务",
+          children: [{
+            label: "Modbus"
+          }]
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client"
             },
-            rules: {
-                pass_name: [
-                    { required: true, message: '请输入通道名称', trigger: 'blur' },
-                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-                ],
-                passage: [
-                    { required: true, message: '请输入通道', trigger: 'blur' },
-                ],
-                drive_name: [
-                    { required: true, message: '请输入驱动名称', trigger: 'blur' },
-                ],
-                ip_address: [
-                    { required: true, message: '请输入ip地址', trigger: 'blur' },
-                ],
-                port_number: [
-                    { required: true, message: '请输入端口号', trigger: 'blur' },
-                ],
-                time_exceeded: [
-                    { required: true, message: '请输入超出时间', trigger: 'blur' },
-                ],
-                time_interval: [
-                    { required: true, message: '请输入间隔时间', trigger: 'blur' },
-                ],
-                time_polling: [
-                    { required: true, message: '请输入轮询时间', trigger: 'blur' },
-                ],
-                repeate_count: [
-                    { required: true, message: '请输入重复次数', trigger: 'blur' },
-                ],
+            {
+              label: "Alink"
             },
-        };
-    },
-
-    mounted() {
-
-    },
-
-    methods: {
-        rightClick(e, data, node) {
-            this.menuShow = false
-            this.menuShow = true
-            e.preventDefault() //关闭浏览器右键默认事件
-            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
-            document.addEventListener('click', (ev) => {
-                ev.stopImmediatePropagation()
-                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
-                    this.foo()
-                }
-            })
-        },
-        // 点击时候的判断,判断是否为新增网关
-        selectMenuNode(index, indexPath) {
-            console.log(index);
-            if (index == 1) {
-                this.add_passage = true;
-            }
-        },
-        foo() {
-            // 取消鼠标监听事件 菜单栏
-            this.menuShow = false
-            document.removeEventListener('click', this.foo) // 关掉监听，
-        },
-        treeNodeClick() {
-            this.foo()
-        },
-        // 收起点击事件的判断
-        getRetract() {
-            if (this.is_retract == true) {
-                this.is_retract = false;
-            } else {
-                this.is_retract = true;
-            }
-        },
-        getDriveName() {
-            this.diag_drive = true;
-        },
-        closeMenu(ev) {
-            console.log({ ev });
-            this.dialogVisible = false;
-        }
-    },
-    watch: {
-        checked1: {
-            handler(old,) {
-                if (old) {
-                    this.isdisabled = false;
-                } else {
-                    this.isdisabled = true;
-                }
-            }
-        }
-    },
-    directives: {
-        clickoutside: {
-            bind: function (el, binding, vnode) {
-                function documentHandler(e) {
-                    if (el.contains(e.target)) {
-                        return false;
-                    }
-                    if (binding.expression) {
-                        binding.value(e)
-                    }
-                }
-                el._vueClickOutside_ = documentHandler;
-                document.addEventListener('click', documentHandler);
+            {
+              label: "Tlink"
             },
-            unbind: function (el, binding) {
-                document.removeEventListener('click', el._vueClickOutside_);
-                delete el._vueClickOutside_;
-            }
+            {
+              label: "loTDDC"
+            },
+            {
+              label: "Ulink"
+            },
+          ]
         }
+        ]
+      },],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+
+      // defaultProps: {
+      //   children: "children",
+      //   label: "label",
+      // },
+      rules: [{
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      }]
+    };
+  },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
     },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .tree_menu {
-    position: absolute;
-    width: 286px;
-    height: 753px;
-    left: 64px;
-    top: 104px;
-    width: 286px;
-    height: 753px;
-    line-height: 20px;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
 }
 
 .tree_rightmenu {
-    position: fixed;
-    width: 120px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-    z-index: 1000;
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
 }
 
 .super_parmams {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 668px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
 
-    i {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-    }
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
 }
 
 /deep/ .pas_params {
-    .el-col-12:last-child {
-        padding-right: 150px;
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
     }
 
-    .el-col-12:first-child {
-        padding-right: 42px;
-    }
-
-    .el-input__inner {
-        height: 30px;
-        text-align: left;
-        padding: 0px 8px;
-    }
-
-    .el-row {
-        display: flex;
-        align-items: flex-end;
-
-        .el-col-1 {
-            text-align: center;
-            line-height: 20px;
-            height: 20px;
-        }
-
-        .el-col-6 {
-            height: 40px;
-            top: 5px;
-            left: 77px;
-            position: relative;
-            width: 50px;
-        }
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
     }
+  }
 }
 
 .super_con {
-    .el-col-12:last-child {
-        padding-right: 28px;
-    }
-
-    .el-col-12:first-child {
-        padding-right: 42px;
-    }
-
-    .el-input__inner {
-
-        text-align: left;
-        padding: 0 8px;
-    }
-
-    .el-row {
-        display: flex;
-        align-items: flex-end;
-
-        .el-col-4 {
-            padding-left: 5px;
-            width: 14px;
-            text-align: center;
-            line-height: 4px;
-            height: 20px;
-        }
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
     }
+  }
 }
 
 .dialog-footer {
-    position: absolute;
-    left: 50%;
-    bottom: 20px;
-    transform: translateX(-50%);
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
 }
 
 .drvieName_All {
-    position: absolute;
-    left: 1335px;
-    top: 218px;
-    width: 435px;
-    height: 720px;
+  position: absolute;
+  left: 1335px;
+  top: 218px;
+  width: 435px;
+  height: 720px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Wireles.vue b/src/components/Wireles.vue
new file mode 100644
index 0000000..89fde1c
--- /dev/null
+++ b/src/components/Wireles.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">无线设置</el-button>
+    <el-dialog
+      title="无线设置"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="工作模式:" prop="gzms">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.gzms">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网络名称:" prop="wlmc">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.wlmc">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="MAC地址:" prop="mac">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.mac"> </el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="加密模式:" prop="jmms">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.jmms">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="加密算法:" prop="jmsf">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.jmsf">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="密码:" prop="mm">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.mm"> </el-input>
+          </el-col>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        gzms: "",
+        wlmc: "",
+        mac: "",
+        jmms: "",
+        jmsf: "",
+        mm: "",
+      },
+      rules: {
+        gzms: [{ required: true, trigger: "change" }],
+        wlmc: [{ required: true, trigger: "change" }],
+        mac: [{ trigger: "blur" }],
+        jmms: [{ required: true, trigger: "blur" }],
+        jmsf: [{ required: true, trigger: "blur" }],
+        mm: [{ required: true, trigger: "blur" }],
+      },
+    };
+  },
+};
+</script>
diff --git a/src/components/netConfiguration.vue b/src/components/netConfiguration.vue
new file mode 100644
index 0000000..4bc31fa
--- /dev/null
+++ b/src/components/netConfiguration.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">串口及网络协议设置</el-button>
+    <el-dialog
+      title="串口及网络协议设置"
+      :visible.sync="dialogVisible"
+      :before-close="handleClose"
+    >
+      <h3>串口参数设置</h3>
+      <el-divider></el-divider>
+      <div class="formOne">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+          :label-position="labelPosition"
+        >
+          <el-form-item label="波特率(bps):" prop="btl">
+            <el-select v-model="ruleForm.btl" placeholder="请选择波特率">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="检验位:" prop="jyw">
+            <el-select v-model="ruleForm.jyw" placeholder="请选择检验位">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="流控:" prop="lk">
+            <el-select v-model="ruleForm.lk" placeholder="请选择流控">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="自适应波特率(类RFC2117):" prop="rfc">
+            <el-select v-model="ruleForm.rfc" placeholder="请选择自适应波特率">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+          :label-position="labelPosition"
+        >
+          <el-form-item label="数据位(bit):" prop="sjw">
+            <el-select v-model="ruleForm.sjw" placeholder="请选择数据位">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="停止位:" prop="tzw">
+            <el-select v-model="ruleForm.tzw" placeholder="请选择停止位">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="485功能:" prop="gn">
+            <el-select v-model="ruleForm.gn" placeholder="请选择485功能">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <h3>其他设置</h3>
+      <el-divider></el-divider>
+      <div class="formOne">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+          :label-position="labelPosition"
+        >
+          <el-form-item label="串口自动成频:" prop="ckzdcp">
+            <el-select v-model="ruleForm.ckzdcp">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="注册包类型:" prop="zcblx">
+            <el-select v-model="ruleForm.zcblx">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="自定义心跳包:" prop="zdyxtb">
+            <el-select v-model="ruleForm.zdyxtb">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="套接字分发功能:" prop="tjz">
+            <el-select v-model="ruleForm.tjz">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div>
+          注意：开启后，模块主动向服务器发送注册包，此功能用于辨识设备。
+          first:模块建议时发送注册包,every:每次发送数据时发送注册包
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        btl: "",
+        jyw: "",
+        lk: "",
+        rfc: "",
+        sjw: "",
+        tzw: "",
+        gn: "",
+        ckzdcp: "",
+        zcblx: "",
+        zdyxtb: "",
+        tjz: "",
+      },
+      rules: {
+        btl: [{ required: true, trigger: "change" }],
+        jyw: [{ required: true, trigger: "change" }],
+        lk: [{ required: true, trigger: "change" }],
+        rfc: [{ required: true, trigger: "change" }],
+        sjw: [{ required: true, trigger: "change" }],
+        tzw: [{ required: true, trigger: "change" }],
+        gn: [{ required: true, trigger: "change" }],
+        ckzdcp: [{ required: true, trigger: "change" }],
+        zcblx: [{ required: true, trigger: "change" }],
+        zdyxtb: [{ required: true, trigger: "change" }],
+        tjz: [{ required: true, trigger: "change" }],
+      },
+    };
+  },
+};
+</script>
+<style scoped lang="less">
+.formOne {
+  display: flex;
+  justify-content: space-around;
+}
+.demo-ruleForm {
+  width: 50%;
+}
+</style>
diff --git a/src/views/ChannelConfig.vue b/src/views/ChannelConfig.vue
index 3bd3115..0e6cdfd 100644
--- a/src/views/ChannelConfig.vue
+++ b/src/views/ChannelConfig.vue
@@ -1,30 +1,24 @@
 <template>
-    <div>
-        <TreeView></TreeView>
-    </div>
+  <div>
+    <TreeView></TreeView>
+  </div>
 </template>
 
 <script>
 import TreeView from "@/components/TreeView.vue";
 export default {
-    name: 'InternetCompetitionChannelConfig',
-    components: {
-        TreeView
-    },
-    data() {
-        return {
+  name: "InternetCompetitionChannelConfig",
+  components: {
+    TreeView,
+  },
+  data() {
+    return {};
+  },
 
-        };
-    },
+  mounted() {},
 
-    mounted() {
-
-    },
-
-    methods: {
-
-    },
+  methods: {},
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/IpSetting.vue b/src/views/IpSetting.vue
index 8f70c22..41c6c5c 100644
--- a/src/views/IpSetting.vue
+++ b/src/views/IpSetting.vue
@@ -1,31 +1,25 @@
 <template>
-    <div>
-        <DataView></DataView>
-    </div>
+  <div>
+    <DataView></DataView>
+  </div>
 </template>
 
 <script>
 import DataView from "@/components/DataView.vue";
 export default {
-    name: 'InternetCompetitionIpSetting',
+  name: "InternetCompetitionIpSetting",
 
-    data() {
-        return {
+  data() {
+    return {};
+  },
 
-        };
-    },
+  mounted() {},
 
-    mounted() {
-
-    },
-
-    methods: {
-
-    },
-    components: {
-        DataView,
-    }
+  methods: {},
+  components: {
+    DataView,
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped></style>