diff --git a/.history/src/App_20231030174446.vue b/.history/src/App_20231030174446.vue
new file mode 100644
index 0000000..ae70239
--- /dev/null
+++ b/.history/src/App_20231030174446.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="app">
+    <div class="db_lite">
+      <router-link to="/ipsetting">IP设置</router-link>
+      <router-link to="/datacollect">数据采集配置</router-link>
+    </div>
+    <div class="chihou">
+      <h2>斥候工业网关</h2>
+      <ChiGate></ChiGate>
+      <ChiWireld></ChiWireld>
+      <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
+    </div>
+    <div class="ip">
+      <IpConfiguration></IpConfiguration>
+      <PortConfiguration></PortConfiguration>
+      <NetProtocol></NetProtocol>
+    </div>
+
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import TreeView from "./components/TreeView.vue";
+// import GateWay from "./components/GateWay.vue";
+import DataAcquisition from "./components/DataAcquisition.vue";
+// import DataView from "./components/DataView.vue";
+import SerialPort from "./components/SerialPort.vue";
+import DeviceVIew from "./components/DeviceVIew.vue";
+import CollectionView from "./components/CollectionView.vue";
+import CloneView from "./components/CloneView.vue";
+import ChiGate from "./components/ChiGate.vue";
+import ChiWireld from "./components/ChiWireld.vue";
+import ChiGateway from "./components/ChiGateway.vue";
+import IpConfiguration from "./components/IpConfiguration.vue";
+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 NetProtocol from "./components/NetProtocol.vue";
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    // GateWay,
+    DataAcquisition,
+    // DataView,
+    TreeView,
+    SerialPort,
+    DeviceVIew,
+    CollectionView,
+    CloneView,
+    ChiGate,
+    ChiWireld,
+    ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
+    IpConfiguration,
+    PortConfiguration,
+    NetProtocol
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: #2b2d38;
+}
+
+.db_lite,
+.chihou,
+.ip {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+</style>
diff --git a/.history/src/App_20231030175814.vue b/.history/src/App_20231030175814.vue
new file mode 100644
index 0000000..8b20c74
--- /dev/null
+++ b/.history/src/App_20231030175814.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="app">
+    <div class="db_lite">
+      <router-link to="/ipsetting">IP设置</router-link>
+      <router-link to="/datacollect">数据采集配置</router-link>
+    </div>
+    <div class="chihou">
+      <h2>斥候工业网关</h2>
+      <ChiGate></ChiGate>
+      <ChiWireld></ChiWireld>
+      <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
+    </div>
+    <div class="ip">
+      <IpConfiguration></IpConfiguration>
+      <PortConfiguration></PortConfiguration>
+      <NetProtocol></NetProtocol>
+    </div>
+
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// import TreeView from "./components/TreeView.vue";
+// import GateWay from "./components/GateWay.vue";
+// import DataAcquisition from "./components/DataAcquisition.vue";
+// import DataView from "./components/DataView.vue";
+// import SerialPort from "./components/SerialPort.vue";
+// import DeviceVIew from "./components/DeviceVIew.vue";
+import CollectionView from "./components/CollectionView.vue";
+import CloneView from "./components/CloneView.vue";
+import ChiGate from "./components/ChiGate.vue";
+import ChiWireld from "./components/ChiWireld.vue";
+import ChiGateway from "./components/ChiGateway.vue";
+import IpConfiguration from "./components/IpConfiguration.vue";
+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 NetProtocol from "./components/NetProtocol.vue";
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    // GateWay,
+    DataAcquisition,
+    // DataView,
+    TreeView,
+    SerialPort,
+    DeviceVIew,
+    CollectionView,
+    CloneView,
+    ChiGate,
+    ChiWireld,
+    ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
+    IpConfiguration,
+    PortConfiguration,
+    NetProtocol
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: #2b2d38;
+}
+
+.db_lite,
+.chihou,
+.ip {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+</style>
diff --git a/.history/src/App_20231030175823.vue b/.history/src/App_20231030175823.vue
new file mode 100644
index 0000000..f69d793
--- /dev/null
+++ b/.history/src/App_20231030175823.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="app">
+    <div class="db_lite">
+      <router-link to="/ipsetting">IP设置</router-link>
+      <router-link to="/datacollect">数据采集配置</router-link>
+    </div>
+    <div class="chihou">
+      <h2>斥候工业网关</h2>
+      <ChiGate></ChiGate>
+      <ChiWireld></ChiWireld>
+      <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
+    </div>
+    <div class="ip">
+      <IpConfiguration></IpConfiguration>
+      <PortConfiguration></PortConfiguration>
+      <NetProtocol></NetProtocol>
+    </div>
+
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// import TreeView from "./components/TreeView.vue";
+// import GateWay from "./components/GateWay.vue";
+// import DataAcquisition from "./components/DataAcquisition.vue";
+// import DataView from "./components/DataView.vue";
+// import SerialPort from "./components/SerialPort.vue";
+// import DeviceVIew from "./components/DeviceVIew.vue";
+import CollectionView from "./components/CollectionView.vue";
+import CloneView from "./components/CloneView.vue";
+import ChiGate from "./components/ChiGate.vue";
+import ChiWireld from "./components/ChiWireld.vue";
+import ChiGateway from "./components/ChiGateway.vue";
+import IpConfiguration from "./components/IpConfiguration.vue";
+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 NetProtocol from "./components/NetProtocol.vue";
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    // GateWay,
+    // DataAcquisition,
+    // // DataView,
+    // TreeView,
+    // SerialPort,
+    // DeviceVIew,
+    CollectionView,
+    CloneView,
+    ChiGate,
+    ChiWireld,
+    ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
+    IpConfiguration,
+    PortConfiguration,
+    NetProtocol
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: #2b2d38;
+}
+
+.db_lite,
+.chihou,
+.ip {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+</style>
diff --git a/.history/src/App_20231030175827.vue b/.history/src/App_20231030175827.vue
new file mode 100644
index 0000000..b1c943f
--- /dev/null
+++ b/.history/src/App_20231030175827.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="app">
+    <div class="db_lite">
+      <router-link to="/ipsetting">IP设置</router-link>
+      <router-link to="/datacollect">数据采集配置</router-link>
+    </div>
+    <div class="chihou">
+      <h2>斥候工业网关</h2>
+      <ChiGate></ChiGate>
+      <ChiWireld></ChiWireld>
+      <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
+    </div>
+    <div class="ip">
+      <IpConfiguration></IpConfiguration>
+      <PortConfiguration></PortConfiguration>
+      <NetProtocol></NetProtocol>
+    </div>
+
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// import TreeView from "./components/TreeView.vue";
+// import GateWay from "./components/GateWay.vue";
+// import DataAcquisition from "./components/DataAcquisition.vue";
+// import DataView from "./components/DataView.vue";
+// import SerialPort from "./components/SerialPort.vue";
+// import DeviceVIew from "./components/DeviceVIew.vue";
+import CollectionView from "./components/CollectionView.vue";
+import CloneView from "./components/CloneView.vue";
+import ChiGate from "./components/ChiGate.vue";
+import ChiWireld from "./components/ChiWireld.vue";
+import ChiGateway from "./components/ChiGateway.vue";
+import IpConfiguration from "./components/IpConfiguration.vue";
+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 NetProtocol from "./components/NetProtocol.vue";
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    // GateWay,
+    // DataAcquisition,
+    // DataView,
+    // TreeView,
+    // SerialPort,
+    // DeviceVIew,
+    CollectionView,
+    CloneView,
+    ChiGate,
+    ChiWireld,
+    ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
+    IpConfiguration,
+    PortConfiguration,
+    NetProtocol
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: #2b2d38;
+}
+
+.db_lite,
+.chihou,
+.ip {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+</style>
diff --git a/.history/src/App_20231030175835.vue b/.history/src/App_20231030175835.vue
new file mode 100644
index 0000000..1d6deca
--- /dev/null
+++ b/.history/src/App_20231030175835.vue
@@ -0,0 +1,99 @@
+<template>
+  <div id="app">
+    <div class="db_lite">
+      <router-link to="/ipsetting">IP设置</router-link>
+      <router-link to="/datacollect">数据采集配置</router-link>
+    </div>
+    <div class="chihou">
+      <CollectionView></CollectionView>
+      <h2>斥候工业网关</h2>
+      <ChiGate></ChiGate>
+      <ChiWireld></ChiWireld>
+      <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
+    </div>
+    <div class="ip">
+      <IpConfiguration></IpConfiguration>
+      <PortConfiguration></PortConfiguration>
+      <NetProtocol></NetProtocol>
+    </div>
+
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// import TreeView from "./components/TreeView.vue";
+// import GateWay from "./components/GateWay.vue";
+// import DataAcquisition from "./components/DataAcquisition.vue";
+// import DataView from "./components/DataView.vue";
+// import SerialPort from "./components/SerialPort.vue";
+// import DeviceVIew from "./components/DeviceVIew.vue";
+import CollectionView from "./components/CollectionView.vue";
+import CloneView from "./components/CloneView.vue";
+import ChiGate from "./components/ChiGate.vue";
+import ChiWireld from "./components/ChiWireld.vue";
+import ChiGateway from "./components/ChiGateway.vue";
+import IpConfiguration from "./components/IpConfiguration.vue";
+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 NetProtocol from "./components/NetProtocol.vue";
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    // GateWay,
+    // DataAcquisition,
+    // DataView,
+    // TreeView,
+    // SerialPort,
+    // DeviceVIew,
+    CollectionView,
+    CloneView,
+    ChiGate,
+    ChiWireld,
+    ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
+    IpConfiguration,
+    PortConfiguration,
+    NetProtocol
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: #2b2d38;
+}
+
+.db_lite,
+.chihou,
+.ip {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+</style>
diff --git a/.history/src/App_20231030180147.vue b/.history/src/App_20231030180147.vue
new file mode 100644
index 0000000..b1c943f
--- /dev/null
+++ b/.history/src/App_20231030180147.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="app">
+    <div class="db_lite">
+      <router-link to="/ipsetting">IP设置</router-link>
+      <router-link to="/datacollect">数据采集配置</router-link>
+    </div>
+    <div class="chihou">
+      <h2>斥候工业网关</h2>
+      <ChiGate></ChiGate>
+      <ChiWireld></ChiWireld>
+      <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
+    </div>
+    <div class="ip">
+      <IpConfiguration></IpConfiguration>
+      <PortConfiguration></PortConfiguration>
+      <NetProtocol></NetProtocol>
+    </div>
+
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// import TreeView from "./components/TreeView.vue";
+// import GateWay from "./components/GateWay.vue";
+// import DataAcquisition from "./components/DataAcquisition.vue";
+// import DataView from "./components/DataView.vue";
+// import SerialPort from "./components/SerialPort.vue";
+// import DeviceVIew from "./components/DeviceVIew.vue";
+import CollectionView from "./components/CollectionView.vue";
+import CloneView from "./components/CloneView.vue";
+import ChiGate from "./components/ChiGate.vue";
+import ChiWireld from "./components/ChiWireld.vue";
+import ChiGateway from "./components/ChiGateway.vue";
+import IpConfiguration from "./components/IpConfiguration.vue";
+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 NetProtocol from "./components/NetProtocol.vue";
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    // GateWay,
+    // DataAcquisition,
+    // DataView,
+    // TreeView,
+    // SerialPort,
+    // DeviceVIew,
+    CollectionView,
+    CloneView,
+    ChiGate,
+    ChiWireld,
+    ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
+    IpConfiguration,
+    PortConfiguration,
+    NetProtocol
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: #2b2d38;
+}
+
+.db_lite,
+.chihou,
+.ip {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+</style>
diff --git a/.history/src/App_20231030180216.vue b/.history/src/App_20231030180216.vue
new file mode 100644
index 0000000..89537e1
--- /dev/null
+++ b/.history/src/App_20231030180216.vue
@@ -0,0 +1,92 @@
+<template>
+  <div id="app">
+    <div class="db_lite">
+      <router-link to="/ipsetting">IP设置</router-link>
+      <router-link to="/datacollect">数据采集配置</router-link>
+    </div>
+    <div class="chihou">
+      <h2>斥候工业网关</h2>
+      <ChiGate></ChiGate>
+      <ChiWireld></ChiWireld>
+      <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
+    </div>
+    <div class="ip">
+      <IpConfiguration></IpConfiguration>
+      <PortConfiguration></PortConfiguration>
+      <NetProtocol></NetProtocol>
+    </div>
+
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import CollectionView from "./components/CollectionView.vue";
+import CloneView from "./components/CloneView.vue";
+import ChiGate from "./components/ChiGate.vue";
+import ChiWireld from "./components/ChiWireld.vue";
+import ChiGateway from "./components/ChiGateway.vue";
+import IpConfiguration from "./components/IpConfiguration.vue";
+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 NetProtocol from "./components/NetProtocol.vue";
+export default {
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
+  components: {
+    // GateWay,
+    // DataAcquisition,
+    // DataView,
+    // TreeView,
+    // SerialPort,
+    // DeviceVIew,
+    CollectionView,
+    CloneView,
+    ChiGate,
+    ChiWireld,
+    ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
+    IpConfiguration,
+    PortConfiguration,
+    NetProtocol
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: #2b2d38;
+}
+
+.db_lite,
+.chihou,
+.ip {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+</style>
diff --git a/.history/src/components/ChiCollection_20231030174837.vue b/.history/src/components/ChiCollection_20231030174837.vue
new file mode 100644
index 0000000..6e71c8d
--- /dev/null
+++ b/.history/src/components/ChiCollection_20231030174837.vue
@@ -0,0 +1,303 @@
+<!-- 采集点收集 -->
+<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>
+</template>
+
+<script>
+export default {
+    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'
+            },
+            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)
+            },
+            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 {
+    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: 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/CloneView_20231029111159.vue b/.history/src/components/CloneView_20231029111159.vue
new file mode 100644
index 0000000..4d202e8
--- /dev/null
+++ b/.history/src/components/CloneView_20231029111159.vue
@@ -0,0 +1,445 @@
+<!-- 串口通道 -->
+<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="网关iD:" :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 options" :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 {
+            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/CloneView_20231030182039.vue b/.history/src/components/CloneView_20231030182039.vue
new file mode 100644
index 0000000..9031139
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182039.vue
@@ -0,0 +1,445 @@
+<!-- 串口通道 -->
+<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="网关iD:" :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 {
+            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/CloneView_20231030182102.vue b/.history/src/components/CloneView_20231030182102.vue
new file mode 100644
index 0000000..04dca2c
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182102.vue
@@ -0,0 +1,445 @@
+<!-- 串口通道 -->
+<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 {
+            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/CloneView_20231030182144.vue b/.history/src/components/CloneView_20231030182144.vue
new file mode 100644
index 0000000..978f597
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182144.vue
@@ -0,0 +1,456 @@
+<!-- 串口通道 -->
+<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: "读写",
+                label: "读写"
+            },
+            {
+                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/CloneView_20231030182210.vue b/.history/src/components/CloneView_20231030182210.vue
new file mode 100644
index 0000000..cc44735
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182210.vue
@@ -0,0 +1,456 @@
+<!-- 串口通道 -->
+<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"
+            }],
+            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/CloneView_20231030182315.vue b/.history/src/components/CloneView_20231030182315.vue
new file mode 100644
index 0000000..0c36467
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182315.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/CloneView_20231030182603.vue b/.history/src/components/CloneView_20231030182603.vue
new file mode 100644
index 0000000..7b865e8
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182603.vue
@@ -0,0 +1,470 @@
+<!-- 串口通道 -->
+<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="设备名称">
+                            <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                        </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/CloneView_20231030182611.vue b/.history/src/components/CloneView_20231030182611.vue
new file mode 100644
index 0000000..d3210e2
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182611.vue
@@ -0,0 +1,470 @@
+<!-- 串口通道 -->
+<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="设备名称">
+                            <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                        </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/CloneView_20231030182634.vue b/.history/src/components/CloneView_20231030182634.vue
new file mode 100644
index 0000000..2b21de4
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182634.vue
@@ -0,0 +1,477 @@
+<!-- 串口通道 -->
+<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="设备名称">
+                            <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                        </el-table-column>
+                        <el-table-column property="tag_id" label="TagID">
+                            <el-table-column property="tag_id" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                        </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/CloneView_20231030182658.vue b/.history/src/components/CloneView_20231030182658.vue
new file mode 100644
index 0000000..6897f93
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182658.vue
@@ -0,0 +1,476 @@
+<!-- 串口通道 -->
+<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="设备名称">
+                            <template slot-scope="scope">
+                                <el-select v-model="scope.row.name" placeholder="0X">
+                                    <el-option v-for="option in options3" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template>
+                        </el-table-column>
+                        <el-table-column property="tag_id" label="TagID">
+                            <template slot-scope="scope">
+                                <el-select v-model="scope.row.tag_id" placeholder="0X">
+                                    <el-option v-for="option in options4" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template>
+                        </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/CloneView_20231030182905.vue b/.history/src/components/CloneView_20231030182905.vue
new file mode 100644
index 0000000..1ddb5b5
--- /dev/null
+++ b/.history/src/components/CloneView_20231030182905.vue
@@ -0,0 +1,502 @@
+<!-- 串口通道 -->
+<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="设备名称">
+                            <template slot-scope="scope">
+                                <el-select v-model="scope.row.name" placeholder="0X">
+                                    <el-option v-for="option in options3" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template>
+                        </el-table-column>
+                        <el-table-column property="tag_id" label="TagID">
+                            <template slot-scope="scope">
+                                <el-select v-model="scope.row.tag_id" placeholder="0X">
+                                    <el-option v-for="option in options4" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template>
+                        </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: "整点上传"
+            }],
+            options3: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options4: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            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/CloneView_20231030183018.vue b/.history/src/components/CloneView_20231030183018.vue
new file mode 100644
index 0000000..0637dee
--- /dev/null
+++ b/.history/src/components/CloneView_20231030183018.vue
@@ -0,0 +1,502 @@
+<!-- 串口通道 -->
+<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="设备名称">
+                            <template slot-scope="scope">
+                                <el-select v-model="scope.row.name" placeholder="0X">
+                                    <el-option v-for="option in options3" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template>
+                        </el-table-column>
+                        <el-table-column property="tag_id" label="TagID">
+                            <!-- <template slot-scope="scope">
+                                <el-select v-model="scope.row.tag_id" placeholder="0X">
+                                    <el-option v-for="option in options4" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template> -->
+                        </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: "整点上传"
+            }],
+            options3: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options4: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            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/CloneView_20231030183024.vue b/.history/src/components/CloneView_20231030183024.vue
new file mode 100644
index 0000000..706c05d
--- /dev/null
+++ b/.history/src/components/CloneView_20231030183024.vue
@@ -0,0 +1,502 @@
+<!-- 串口通道 -->
+<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="设备名称">
+                            <!-- <template slot-scope="scope">
+                                <el-select v-model="scope.row.name" placeholder="0X">
+                                    <el-option v-for="option in options3" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template> -->
+                        </el-table-column>
+                        <el-table-column property="tag_id" label="TagID">
+                            <!-- <template slot-scope="scope">
+                                <el-select v-model="scope.row.tag_id" placeholder="0X">
+                                    <el-option v-for="option in options4" :key="option" :label="option.label"
+                                        :value="option.value"></el-option>
+                                </el-select>
+                            </template> -->
+                        </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: "整点上传"
+            }],
+            options3: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options4: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            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/CloneView_20231030183442.vue b/.history/src/components/CloneView_20231030183442.vue
new file mode 100644
index 0000000..0c36467
--- /dev/null
+++ b/.history/src/components/CloneView_20231030183442.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/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/CollectionView_20231030173753.vue b/.history/src/components/CollectionView_20231030173753.vue
new file mode 100644
index 0000000..f163299
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030173753.vue
@@ -0,0 +1,282 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" 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="name" label="名称">
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030173803.vue b/.history/src/components/CollectionView_20231030173803.vue
new file mode 100644
index 0000000..ebf8715
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030173803.vue
@@ -0,0 +1,288 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" 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="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" 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="datas" label="数据区">
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030173849.vue b/.history/src/components/CollectionView_20231030173849.vue
new file mode 100644
index 0000000..e6e0fb0
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030173849.vue
@@ -0,0 +1,288 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174038.vue b/.history/src/components/CollectionView_20231030174038.vue
new file mode 100644
index 0000000..84bfc61
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174038.vue
@@ -0,0 +1,295 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174114.vue b/.history/src/components/CollectionView_20231030174114.vue
new file mode 100644
index 0000000..e30aa0b
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174114.vue
@@ -0,0 +1,301 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            },],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174151.vue b/.history/src/components/CollectionView_20231030174151.vue
new file mode 100644
index 0000000..a2213da
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174151.vue
@@ -0,0 +1,308 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174208.vue b/.history/src/components/CollectionView_20231030174208.vue
new file mode 100644
index 0000000..fe298d0
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174208.vue
@@ -0,0 +1,308 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174351.vue b/.history/src/components/CollectionView_20231030174351.vue
new file mode 100644
index 0000000..1955249
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174351.vue
@@ -0,0 +1,324 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174353.vue b/.history/src/components/CollectionView_20231030174353.vue
new file mode 100644
index 0000000..625b25c
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174353.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174411.vue b/.history/src/components/CollectionView_20231030174411.vue
new file mode 100644
index 0000000..a44611d
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174411.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030174744.vue b/.history/src/components/CollectionView_20231030174744.vue
new file mode 100644
index 0000000..a44611d
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030174744.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030175439.vue b/.history/src/components/CollectionView_20231030175439.vue
new file mode 100644
index 0000000..a44611d
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030175439.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030175501.vue b/.history/src/components/CollectionView_20231030175501.vue
new file mode 100644
index 0000000..2527b8f
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030175501.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: true,
+            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: '测试',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030175532.vue b/.history/src/components/CollectionView_20231030175532.vue
new file mode 100644
index 0000000..9cc17b9
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030175532.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    <!-- </div> -->
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: true,
+            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: '测试',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030175553.vue b/.history/src/components/CollectionView_20231030175553.vue
new file mode 100644
index 0000000..39e6494
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030175553.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: true,
+            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: '测试',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030175606.vue b/.history/src/components/CollectionView_20231030175606.vue
new file mode 100644
index 0000000..2527b8f
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030175606.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: true,
+            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: '测试',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180004.vue b/.history/src/components/CollectionView_20231030180004.vue
new file mode 100644
index 0000000..0ff96f7
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180004.vue
@@ -0,0 +1,328 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="datas" label="数据区">
+                    <el-select v-model="scope.row.datas" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.attribute" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: true,
+            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: '测试',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180118.vue b/.history/src/components/CollectionView_20231030180118.vue
new file mode 100644
index 0000000..14a096a
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180118.vue
@@ -0,0 +1,332 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                        </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="attribute" label="读写属性">
+                    <el-select v-model="scope.row.attribute" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option"
+                                :value="option"></el-option>
+                        </el-select>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1:[{
+                value:"MachinePamHID909",
+                label:"MachinePamHID909",
+            },{
+                value:"MachinePamHID910",
+                label:"MachinePamHID910",
+            },{
+                value:"MachinePamHID911",
+                label:"MachinePamHID911",
+            },{
+                value:"MachinePamHID912",
+                label:"MachinePamHID912",
+            }],
+            options1:[{
+                value:"急停状态",
+                label:"急停状态",
+            },{
+                value:"进给速度",
+                label:"进给速度",
+            }],
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: true,
+            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: '测试',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180140.vue b/.history/src/components/CollectionView_20231030180140.vue
new file mode 100644
index 0000000..bd6cffc
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180140.vue
@@ -0,0 +1,331 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                        <el-option v-for="option in options2" :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="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options1: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: true,
+            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: '测试',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180303.vue b/.history/src/components/CollectionView_20231030180303.vue
new file mode 100644
index 0000000..9c2d463
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180303.vue
@@ -0,0 +1,331 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                        <el-option v-for="option in options2" :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="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options1: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180340.vue b/.history/src/components/CollectionView_20231030180340.vue
new file mode 100644
index 0000000..6ea51f5
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180340.vue
@@ -0,0 +1,331 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                        <el-option v-for="option in options2" :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="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180449.vue b/.history/src/components/CollectionView_20231030180449.vue
new file mode 100644
index 0000000..479cf54
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180449.vue
@@ -0,0 +1,331 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                        <el-option v-for="option in options2" :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="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180504.vue b/.history/src/components/CollectionView_20231030180504.vue
new file mode 100644
index 0000000..c8587d2
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180504.vue
@@ -0,0 +1,331 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                        <el-option v-for="option in options2" :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="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180520.vue b/.history/src/components/CollectionView_20231030180520.vue
new file mode 100644
index 0000000..ff0be92
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180520.vue
@@ -0,0 +1,331 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option" :value="option"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                        <el-option v-for="option in options2" :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="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180603.vue b/.history/src/components/CollectionView_20231030180603.vue
new file mode 100644
index 0000000..5c17174
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180603.vue
@@ -0,0 +1,331 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label" :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.order" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option.label" :value="option.value"></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="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                    <el-select v-model="scope.row.count" placeholder="0X">
+                        <el-option v-for="option in options2" :key="option" :label="option.label" :value="option.value"></el-option>
+                    </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180746.vue b/.history/src/components/CollectionView_20231030180746.vue
new file mode 100644
index 0000000..7e54315
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180746.vue
@@ -0,0 +1,352 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "",
+                label: " 0X (Coil Status)"
+            },
+            {
+                value: "、1X (Input Status)、3X (Input Registers)、4X (Holding Register)",
+                label: ""
+            }, {
+                value: "3X (Input Registers)",
+                label:"3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180802.vue b/.history/src/components/CollectionView_20231030180802.vue
new file mode 100644
index 0000000..e652f07
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180802.vue
@@ -0,0 +1,352 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: " 0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label:"3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180808.vue b/.history/src/components/CollectionView_20231030180808.vue
new file mode 100644
index 0000000..842a513
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180808.vue
@@ -0,0 +1,353 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030180831.vue b/.history/src/components/CollectionView_20231030180831.vue
new file mode 100644
index 0000000..3d6b0f9
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030180831.vue
@@ -0,0 +1,368 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options4: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181110.vue b/.history/src/components/CollectionView_20231030181110.vue
new file mode 100644
index 0000000..df9ff77
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181110.vue
@@ -0,0 +1,368 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            }],
+            options3: [{
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181205.vue b/.history/src/components/CollectionView_20231030181205.vue
new file mode 100644
index 0000000..2e2281b
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181205.vue
@@ -0,0 +1,384 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181230.vue b/.history/src/components/CollectionView_20231030181230.vue
new file mode 100644
index 0000000..356a57d
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181230.vue
@@ -0,0 +1,384 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181237.vue b/.history/src/components/CollectionView_20231030181237.vue
new file mode 100644
index 0000000..1300d86
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181237.vue
@@ -0,0 +1,384 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181307.vue b/.history/src/components/CollectionView_20231030181307.vue
new file mode 100644
index 0000000..8d230d3
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181307.vue
@@ -0,0 +1,384 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181458.vue b/.history/src/components/CollectionView_20231030181458.vue
new file mode 100644
index 0000000..f203038
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181458.vue
@@ -0,0 +1,413 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181729.vue b/.history/src/components/CollectionView_20231030181729.vue
new file mode 100644
index 0000000..5a6d052
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181729.vue
@@ -0,0 +1,413 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options5: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options6: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181757.vue b/.history/src/components/CollectionView_20231030181757.vue
new file mode 100644
index 0000000..dabf249
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181757.vue
@@ -0,0 +1,432 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options5: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options6: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options7: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030181835.vue b/.history/src/components/CollectionView_20231030181835.vue
new file mode 100644
index 0000000..eaa3aac
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030181835.vue
@@ -0,0 +1,428 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options5: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options6: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options7: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            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'
+            },
+            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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030183041.vue b/.history/src/components/CollectionView_20231030183041.vue
new file mode 100644
index 0000000..a16cd03
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030183041.vue
@@ -0,0 +1,428 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options5: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options6: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options7: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            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'
+            },
+            tableData: [{
+                tag_id: 'MachinePamHID909',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/CollectionView_20231030183407.vue b/.history/src/components/CollectionView_20231030183407.vue
new file mode 100644
index 0000000..bf43e95
--- /dev/null
+++ b/.history/src/components/CollectionView_20231030183407.vue
@@ -0,0 +1,429 @@
+<!-- 采集点收集 -->
+<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">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
+                </el-table-column>
+                <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options5: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options6: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options7: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            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'
+            },
+            tableData: [{
+                tag_id: 'MachinePamHID909',
+                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)
+            },
+            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 {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    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: 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/DataAcquisition_20231030160555.vue b/.history/src/components/DataAcquisition_20231030160555.vue
new file mode 100644
index 0000000..736169b
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030160555.vue
@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+            isRegister:false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.isRegister=true;
+            this.$router.replace("/channelconfig")
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030160557.vue b/.history/src/components/DataAcquisition_20231030160557.vue
new file mode 100644
index 0000000..ba82ddf
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030160557.vue
@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+            isRegister:false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.isRegister=true;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030160608.vue b/.history/src/components/DataAcquisition_20231030160608.vue
new file mode 100644
index 0000000..9ebe941
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030160608.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163109.vue b/.history/src/components/DataAcquisition_20231030163109.vue
new file mode 100644
index 0000000..2a56a73
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163109.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163147.vue b/.history/src/components/DataAcquisition_20231030163147.vue
new file mode 100644
index 0000000..195f06e
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163147.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163157.vue b/.history/src/components/DataAcquisition_20231030163157.vue
new file mode 100644
index 0000000..5f3f4a6
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163157.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163206.vue b/.history/src/components/DataAcquisition_20231030163206.vue
new file mode 100644
index 0000000..426a4ee
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163206.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163218.vue b/.history/src/components/DataAcquisition_20231030163218.vue
new file mode 100644
index 0000000..5760215
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163218.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163231.vue b/.history/src/components/DataAcquisition_20231030163231.vue
new file mode 100644
index 0000000..e3633fc
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163231.vue
@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163242.vue b/.history/src/components/DataAcquisition_20231030163242.vue
new file mode 100644
index 0000000..bf53a0e
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163242.vue
@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: ""
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030163334.vue b/.history/src/components/DataAcquisition_20231030163334.vue
new file mode 100644
index 0000000..29051a0
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030163334.vue
@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030165905.vue b/.history/src/components/DataAcquisition_20231030165905.vue
new file mode 100644
index 0000000..e6ef71d
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030165905.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170035.vue b/.history/src/components/DataAcquisition_20231030170035.vue
new file mode 100644
index 0000000..fe88737
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170035.vue
@@ -0,0 +1,119 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options2: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170113.vue b/.history/src/components/DataAcquisition_20231030170113.vue
new file mode 100644
index 0000000..507a471
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170113.vue
@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options2: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170134.vue b/.history/src/components/DataAcquisition_20231030170134.vue
new file mode 100644
index 0000000..a8d0b35
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170134.vue
@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options2: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170153.vue b/.history/src/components/DataAcquisition_20231030170153.vue
new file mode 100644
index 0000000..397b191
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170153.vue
@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options2:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options3: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170223.vue b/.history/src/components/DataAcquisition_20231030170223.vue
new file mode 100644
index 0000000..597ecc6
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170223.vue
@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options2:[{
+                value:"LAN-BOX1",
+                label:"有线区网关1",
+            },{
+                value:"WLAN-BOX1",
+                label:"WLAN-BOX1",
+            }],
+            options3: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170227.vue b/.history/src/components/DataAcquisition_20231030170227.vue
new file mode 100644
index 0000000..0c626a3
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170227.vue
@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options2:[{
+                value:"LAN-BOX1",
+                label:"LAN-BOX1",
+            },{
+                value:"WLAN-BOX1",
+                label:"WLAN-BOX1",
+            }],
+            options3: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "Gateway",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170254.vue b/.history/src/components/DataAcquisition_20231030170254.vue
new file mode 100644
index 0000000..5388259
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170254.vue
@@ -0,0 +1,133 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1:[{
+                value:"有线区网关1",
+                label:"有线区网关1",
+            },{
+                value:"无线区网关1",
+                label:"无线区网关1",
+            }],
+            options2:[{
+                value:"LAN-BOX1",
+                label:"LAN-BOX1",
+            },{
+                value:"WLAN-BOX1",
+                label:"WLAN-BOX1",
+            }],
+            options3: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "有线区网关1",
+                id:"LAN-BOX1",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquisition_20231030170256.vue b/.history/src/components/DataAcquisition_20231030170256.vue
new file mode 100644
index 0000000..052d545
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231030170256.vue
@@ -0,0 +1,133 @@
+<template>
+    <div>
+        <!-- <div class="data_acquire">
+            <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
+        </div> -->
+        <div>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
+                <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
+                    <el-form-item label="网关名称:" prop="name">
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关类型:" prop="type">
+                        <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
+                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+                    <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="innerConfirm">确定</el-button>
+                        <el-button @click="innerVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+                <div slot="footer" class="dialog-footer-outer">
+                    <el-button type="primary" @click="innerVisible = true">保存</el-button>
+                    <el-button @click="outerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestDataAcquisition',
+
+    data() {
+        return {
+            input1: "",
+            options1: [{
+                value: "有线区网关1",
+                label: "有线区网关1",
+            }, {
+                value: "无线区网关1",
+                label: "无线区网关1",
+            }],
+            options2: [{
+                value: "LAN-BOX1",
+                label: "LAN-BOX1",
+            }, {
+                value: "WLAN-BOX1",
+                label: "WLAN-BOX1",
+            }],
+            options3: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
+            }, {
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
+            }, {
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
+            }],
+            value: '',
+            formdata: {
+                name: "有线区网关1",
+                id: "LAN-BOX1",
+                type: "loT网关"
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入网关名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择活动区域', trigger: 'change' }
+                ],
+            },
+            outerVisible: true,
+            innerVisible: false,
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        innerConfirm() {
+            this.outerVisible = false;
+            this.innerVisible = false;
+            this.$router.replace("/channelconfig");
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+    font-size: 14px;
+}
+
+.inner_content {
+    margin-left: 30px;
+    width: 280px;
+    height: 40px;
+    // color: rgba(255, 255, 255, 0);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataView_20231030164814.vue b/.history/src/components/DataView_20231030164814.vue
new file mode 100644
index 0000000..b3b070f
--- /dev/null
+++ b/.history/src/components/DataView_20231030164814.vue
@@ -0,0 +1,391 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="区域一" value="aa"></el-option>
+                                            <el-option label="区域二" value="aa1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231030164943.vue b/.history/src/components/DataView_20231030164943.vue
new file mode 100644
index 0000000..d9420dd
--- /dev/null
+++ b/.history/src/components/DataView_20231030164943.vue
@@ -0,0 +1,394 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="区域一" value="aa"></el-option>
+                                            <el-option label="区域二" value="aa1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: {
+                    ETH0,
+                    ETH1
+                },
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231030165014.vue b/.history/src/components/DataView_20231030165014.vue
new file mode 100644
index 0000000..0475d10
--- /dev/null
+++ b/.history/src/components/DataView_20231030165014.vue
@@ -0,0 +1,396 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="区域一" value="aa"></el-option>
+                                            <el-option label="区域二" value="aa1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: [{
+                    ETH0
+
+                }, {
+                    ETH1
+                }],
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231030165015.vue b/.history/src/components/DataView_20231030165015.vue
new file mode 100644
index 0000000..0475d10
--- /dev/null
+++ b/.history/src/components/DataView_20231030165015.vue
@@ -0,0 +1,396 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="区域一" value="aa"></el-option>
+                                            <el-option label="区域二" value="aa1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: [{
+                    ETH0
+
+                }, {
+                    ETH1
+                }],
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231030165027.vue b/.history/src/components/DataView_20231030165027.vue
new file mode 100644
index 0000000..d9420dd
--- /dev/null
+++ b/.history/src/components/DataView_20231030165027.vue
@@ -0,0 +1,394 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="区域一" value="aa"></el-option>
+                                            <el-option label="区域二" value="aa1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: {
+                    ETH0,
+                    ETH1
+                },
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231030165036.vue b/.history/src/components/DataView_20231030165036.vue
new file mode 100644
index 0000000..bfc5094
--- /dev/null
+++ b/.history/src/components/DataView_20231030165036.vue
@@ -0,0 +1,394 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="区域一" value="aa"></el-option>
+                                            <el-option label="区域二" value="aa1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: [
+                    ETH0,
+                    ETH1
+            ],
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231030165107.vue b/.history/src/components/DataView_20231030165107.vue
new file mode 100644
index 0000000..ae72a12
--- /dev/null
+++ b/.history/src/components/DataView_20231030165107.vue
@@ -0,0 +1,391 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="区域一" value="aa"></el-option>
+                                            <el-option label="区域二" value="aa1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: "",
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231030165206.vue b/.history/src/components/DataView_20231030165206.vue
new file mode 100644
index 0000000..1a90510
--- /dev/null
+++ b/.history/src/components/DataView_20231030165206.vue
@@ -0,0 +1,391 @@
+
+<template>
+    <div>
+        <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+            <div class="form_content">
+                <div>
+                    <p class="netWay">网络方式</p>
+                    <el-radio v-model="radio" label="1">有线</el-radio>
+                    <el-radio v-model="radio" label="2">WIFI</el-radio>
+                    <el-divider></el-divider>
+                </div>
+                <div v-if="radio == 1 ? true : false">
+                    <h2>有线</h2>
+                    <el-form :model="form" :label-position="labelPosition" label-width="80px">
+                        <div class="wired">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <el-select v-model="form.region" placeholder="ETHO"
+                                            style="width: 200px;height:30px">
+                                            <el-option label="ETH0" value="ETH0"></el-option>
+                                            <el-option label="ETH1" value="ETH1"></el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="5">
+                                                <el-input v-model="input1"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                                        <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>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+
+                <div v-if="radio == 2 ? true : false">
+                    <h2>WIFI</h2>
+                    <el-form :label-position="labelPosition" label-width="80px">
+                        <div class="wifi">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="网口:" :label-width="formLabelWidth">
+                                        <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">
+                                        <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">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="IP地址:" :label-width="formLabelWidth">
+                                        <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>
+                                    </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="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>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="dns">
+                                        <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="input2"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input3"></el-input>
+                                            </el-col>
+                                            <el-col :span="1">.</el-col>
+                                            <el-col :span="5">
+                                                <el-input v-model="input4"></el-input>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth">
+                                        <el-row>
+                                            <el-col :span="24" class="mac">
+                                                <el-input style="width: 200px;height:30px" /><el-button>复制</el-button>
+                                            </el-col>
+                                        </el-row>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DataView',
+    data() {
+        return {
+            labelPosition: "left",
+            input1: 192,
+            input2: 168,
+            input3: 1,
+            input4: 1,
+            radio: '2',
+            dialogFormVisible: true,
+            form: {
+                name: '',
+                region: "",
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            },
+            formLabelWidth: '80px'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+    .el-row {
+        .el-col-12:last-child {
+            padding-right: 134px;
+        }
+
+        .el-col-12:first-child {
+            padding-right: 138px;
+        }
+
+        .el-input__inner {
+            height: 30px;
+            text-align: center;
+            padding: 0;
+        }
+
+        .el-row {
+            display: flex;
+            align-items: flex-end;
+
+            .el-col-1 {
+                text-align: center;
+                line-height: 20px;
+                height: 20px;
+            }
+
+            .mac {
+                display: flex;
+                align-items: center;
+
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+
+.netWay {
+    margin-bottom: 20px;
+    width: 80px;
+    color: rgba(16, 16, 16, 1);
+    font-size: 20px;
+    text-align: left;
+}
+
+.footer {
+    position: absolute;
+    left: 360px;
+    bottom: 20px;
+}
+</style>
diff --git a/.history/src/components/DeviceVIew_20231030172930.vue b/.history/src/components/DeviceVIew_20231030172930.vue
new file mode 100644
index 0000000..475ac42
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030172930.vue
@@ -0,0 +1,317 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="dev_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="24">
+                            <el-form-item label="设备地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            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'
+            },
+            rules: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030173005.vue b/.history/src/components/DeviceVIew_20231030173005.vue
new file mode 100644
index 0000000..845abef
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030173005.vue
@@ -0,0 +1,317 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="dev_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="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            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'
+            },
+            rules: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030173101.vue b/.history/src/components/DeviceVIew_20231030173101.vue
new file mode 100644
index 0000000..ced60b2
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030173101.vue
@@ -0,0 +1,325 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            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'
+            },
+            rules: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030173103.vue b/.history/src/components/DeviceVIew_20231030173103.vue
new file mode 100644
index 0000000..ced60b2
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030173103.vue
@@ -0,0 +1,325 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            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'
+            },
+            rules: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030173357.vue b/.history/src/components/DeviceVIew_20231030173357.vue
new file mode 100644
index 0000000..88679e9
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030173357.vue
@@ -0,0 +1,333 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            options1:[{
+                value:"有线区加工设备1",
+                label:"有线区加工设备1"
+            },{
+                value:"无线区加工设备1",
+                label:"无线区加工设备1"
+            }],
+            options2:[{}],
+            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: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030173454.vue b/.history/src/components/DeviceVIew_20231030173454.vue
new file mode 100644
index 0000000..22f973c
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030173454.vue
@@ -0,0 +1,339 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            options1:[{
+                value:"有线区加工设备1",
+                label:"有线区加工设备1"
+            },{
+                value:"无线区加工设备1",
+                label:"无线区加工设备1"
+            }],
+            options2:[{
+                value:"有线区精雕1",
+                label:"有线区精雕1",
+            },{
+                value:"无线区精雕1",
+                label:"无线区精雕1",
+            }],
+            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: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030173458.vue b/.history/src/components/DeviceVIew_20231030173458.vue
new file mode 100644
index 0000000..7800b23
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030173458.vue
@@ -0,0 +1,339 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            options1: [{
+                value: "有线区加工设备1",
+                label: "有线区加工设备1"
+            }, {
+                value: "无线区加工设备1",
+                label: "无线区加工设备1"
+            }],
+            options2: [{
+                value: "有线区精雕1",
+                label: "有线区精雕1",
+            }, {
+                value: "无线区精雕1",
+                label: "无线区精雕1",
+            }],
+            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: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030173539.vue b/.history/src/components/DeviceVIew_20231030173539.vue
new file mode 100644
index 0000000..410bde2
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030173539.vue
@@ -0,0 +1,395 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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="pas_params">
+            <el-dialog title="设备属性" :visible.sync="add_passage" width="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            options1: [{
+                value: "有线区加工设备1",
+                label: "有线区加工设备1"
+            }, {
+                value: "无线区加工设备1",
+                label: "无线区加工设备1"
+            }],
+            options2: [{
+                value: "有线区精雕1",
+                label: "有线区精雕1",
+            }, {
+                value: "无线区精雕1",
+                label: "无线区精雕1",
+            }],
+            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: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DeviceVIew_20231030175104.vue b/.history/src/components/DeviceVIew_20231030175104.vue
new file mode 100644
index 0000000..410bde2
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231030175104.vue
@@ -0,0 +1,395 @@
+<!-- 串口通道 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <div v-click-outside="closeMenu">
+            <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-item index="3" 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="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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="pas_params">
+            <el-dialog title="设备属性" :visible.sync="add_passage" width="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备地址:" :label-width="formLabelWidth" prop="dev_address">
+                                <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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>
+</template>
+
+<script>
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            options1: [{
+                value: "有线区加工设备1",
+                label: "有线区加工设备1"
+            }, {
+                value: "无线区加工设备1",
+                label: "无线区加工设备1"
+            }],
+            options2: [{
+                value: "有线区精雕1",
+                label: "有线区精雕1",
+            }, {
+                value: "无线区精雕1",
+                label: "无线区精雕1",
+            }],
+            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: {
+                dev_id: [
+                    { required: true, message: '请输入设备ID', trigger: 'blur' },
+                ],
+                dev_name: [
+                    { required: true, message: '请输入设备名称', trigger: 'blur' },
+                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+                ],
+                dev_address: [
+                    { required: true, message: '请输入设备地址', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    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()
+        },
+        getDriveName() {
+            this.diag_drive = 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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/PortConfiguration_20231030092844.vue b/.history/src/components/PortConfiguration_20231030092844.vue
new file mode 100644
index 0000000..2d35353
--- /dev/null
+++ b/.history/src/components/PortConfiguration_20231030092844.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">端口配置</el-button>
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-click="treeNodeClick"
+        :default-expanded-keys="['keyOfNodeToExpand']"
+        :default-checked-keys="['keyOfNodeToSelect']"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+
+    <el-dialog title="端口配置" :visible.sync="dialogVisible" width="30%">
+      <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">
+            <el-option label="9600" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </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-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-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-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-form-item>
+        <el-form-item label="打包长度(bytes)" prop="bagLength">
+          <el-col :span="10">
+            <el-input
+              v-model="ruleForm.bagLength"
+              placeholder="0-1460"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="打包时间(ms)" prop="time">
+          <el-col :span="10">
+            <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-form-item>
+        <el-checkbox
+          label="使能串口心跳包"
+          name="type"
+          v-model="checked"
+        ></el-checkbox>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click="submitForm('ruleForm'), (dialogVisible = false)"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isValidPrimaryDNS } from "../validate";
+export default {
+  data() {
+    return {
+      datas: [
+        {
+          name: "端口",
+          children: [
+            {
+              name: "端口1",
+            },
+            {
+              name: "端口2",
+            },
+            {
+              name: "端口3",
+            },
+            {
+              name: "端口4",
+            },
+            {
+              name: "网页转串口",
+            },
+          ],
+        },
+      ],
+      checked: false,
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        btl: "",
+        data: "",
+        check: "",
+        stop: "",
+        waterContorl: "",
+        bagLength: "",
+        time: "",
+        RFbtl: "",
+      },
+      rules: {
+        btl: [{ required: true, message: "请选择波特率", trigger: "change" }],
+        data: [{ required: true, message: "请选择数据位", trigger: "change" }],
+        stop: [{ required: true, message: "请选择停止位", trigger: "change" }],
+        check: [{ required: true, message: "请选择检验位", trigger: "change" }],
+        waterContorl: [
+          { required: true, message: "请选择流控模式", trigger: "blur" },
+        ],
+        bagLength: [
+          { required: true, message: "请输入打包长度", trigger: "blur" },
+          // 自定义校验规则，这里限制最大长度为1000
+          { validator: this.validatePackagingLength, trigger: "blur" },
+          { type: "number", message: "打包长度必须为数字值", trigger: "blur" },
+        ],
+        time: [
+          { required: true, message: "请输入打包时间", trigger: "blur" },
+          { type: "number", message: "打包时间必须为数字值", trigger: "blur" },
+          // 自定义校验规则，这里限制最大长度为1000
+          { validator: this.validatTime, trigger: "blur" },
+        ],
+        RFbtl: [
+          { required: true, message: "请选择同步波特率", trigger: "change" },
+        ],
+      },
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    validatePackagingLength(rule, value, callback) {
+      if (value && parseInt(value, 10) > 1460) {
+        callback(new Error("打包长度不能超过1000"));
+      } else {
+        callback();
+      }
+    },
+    validatTime(rule, value, callback) {
+      if (value && parseInt(value, 10) > 255) {
+        callback(new Error("打包时间不能超过255"));
+      } else {
+        callback();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  z-index: 99999999999999;
+  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);
+}
+</style>
diff --git a/.history/src/components/PortConfiguration_20231030165450.vue b/.history/src/components/PortConfiguration_20231030165450.vue
new file mode 100644
index 0000000..cd81447
--- /dev/null
+++ b/.history/src/components/PortConfiguration_20231030165450.vue
@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">端口配置</el-button>
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        :default-expanded-keys="['keyOfNodeToExpand']"
+        :default-checked-keys="['keyOfNodeToSelect']"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+
+    <el-dialog title="端口配置" :visible.sync="dialogVisible" width="30%">
+      <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">
+            <el-option label="9600" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </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-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-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-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-form-item>
+        <el-form-item label="打包长度(bytes)" prop="bagLength">
+          <el-col :span="10">
+            <el-input
+              v-model="ruleForm.bagLength"
+              placeholder="0-1460"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="打包时间(ms)" prop="time">
+          <el-col :span="10">
+            <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-form-item>
+        <el-checkbox
+          label="使能串口心跳包"
+          name="type"
+          v-model="checked"
+        ></el-checkbox>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click="submitForm('ruleForm'), (dialogVisible = false)"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isValidPrimaryDNS } from "../validate";
+export default {
+  data() {
+    return {
+      datas: [
+        {
+          name: "端口",
+          children: [
+            {
+              name: "端口1",
+            },
+            {
+              name: "端口2",
+            },
+            {
+              name: "端口3",
+            },
+            {
+              name: "端口4",
+            },
+            {
+              name: "网页转串口",
+            },
+          ],
+        },
+      ],
+      checked: false,
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        btl: "",
+        data: "",
+        check: "",
+        stop: "",
+        waterContorl: "",
+        bagLength: "",
+        time: "",
+        RFbtl: "",
+      },
+      rules: {
+        btl: [{ required: true, message: "请选择波特率", trigger: "change" }],
+        data: [{ required: true, message: "请选择数据位", trigger: "change" }],
+        stop: [{ required: true, message: "请选择停止位", trigger: "change" }],
+        check: [{ required: true, message: "请选择检验位", trigger: "change" }],
+        waterContorl: [
+          { required: true, message: "请选择流控模式", trigger: "blur" },
+        ],
+        bagLength: [
+          { required: true, message: "请输入打包长度", trigger: "blur" },
+          // 自定义校验规则，这里限制最大长度为1000
+          { validator: this.validatePackagingLength, trigger: "blur" },
+          { type: "number", message: "打包长度必须为数字值", trigger: "blur" },
+        ],
+        time: [
+          { required: true, message: "请输入打包时间", trigger: "blur" },
+          { type: "number", message: "打包时间必须为数字值", trigger: "blur" },
+          // 自定义校验规则，这里限制最大长度为1000
+          { validator: this.validatTime, trigger: "blur" },
+        ],
+        RFbtl: [
+          { required: true, message: "请选择同步波特率", trigger: "change" },
+        ],
+      },
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    validatePackagingLength(rule, value, callback) {
+      if (value && parseInt(value, 10) > 1460) {
+        callback(new Error("打包长度不能超过1000"));
+      } else {
+        callback();
+      }
+    },
+    validatTime(rule, value, callback) {
+      if (value && parseInt(value, 10) > 255) {
+        callback(new Error("打包时间不能超过255"));
+      } else {
+        callback();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  z-index: 99999999999999;
+  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);
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231030171113.vue b/.history/src/components/SerialPort_20231030171113.vue
new file mode 100644
index 0000000..c684f71
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171113.vue
@@ -0,0 +1,510 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value1" 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-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="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-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="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-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 {
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171118.vue b/.history/src/components/SerialPort_20231030171118.vue
new file mode 100644
index 0000000..3cc2503
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171118.vue
@@ -0,0 +1,510 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <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="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="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-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="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-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 {
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171123.vue b/.history/src/components/SerialPort_20231030171123.vue
new file mode 100644
index 0000000..31fe9e1
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171123.vue
@@ -0,0 +1,510 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <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="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-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="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-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 {
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171200.vue b/.history/src/components/SerialPort_20231030171200.vue
new file mode 100644
index 0000000..f0cc419
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171200.vue
@@ -0,0 +1,510 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value1: 'com1',
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171248.vue b/.history/src/components/SerialPort_20231030171248.vue
new file mode 100644
index 0000000..fd39c75
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171248.vue
@@ -0,0 +1,510 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: 'com1',
+                label: 'com1'
+            }, {
+                value: 'com2',
+                label: 'com2'
+            }, {
+                value: 'com3',
+                label: 'com3'
+            }, {
+                value: 'com4',
+                label: 'com4'
+            }, {
+                value: 'com5',
+                label: 'com5'
+            }],
+            value1: 'com1',
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171412.vue b/.history/src/components/SerialPort_20231030171412.vue
new file mode 100644
index 0000000..efbce20
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171412.vue
@@ -0,0 +1,514 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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="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-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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: 'com1',
+                label: 'com1'
+            }, {
+                value: 'com2',
+                label: 'com2'
+            }, {
+                value: 'com3',
+                label: 'com3'
+            }, {
+                value: 'com4',
+                label: 'com4'
+            }, {
+                value: 'com5',
+                label: 'com5'
+            }],
+            value1: 'com1',
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171428.vue b/.history/src/components/SerialPort_20231030171428.vue
new file mode 100644
index 0000000..e52c21a
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171428.vue
@@ -0,0 +1,514 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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="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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: 'com1',
+                label: 'com1'
+            }, {
+                value: 'com2',
+                label: 'com2'
+            }, {
+                value: 'com3',
+                label: 'com3'
+            }, {
+                value: 'com4',
+                label: 'com4'
+            }, {
+                value: 'com5',
+                label: 'com5'
+            }],
+            value1: 'com1',
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171523.vue b/.history/src/components/SerialPort_20231030171523.vue
new file mode 100644
index 0000000..6035ae8
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171523.vue
@@ -0,0 +1,513 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171616.vue b/.history/src/components/SerialPort_20231030171616.vue
new file mode 100644
index 0000000..42e2987
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171616.vue
@@ -0,0 +1,513 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171629.vue b/.history/src/components/SerialPort_20231030171629.vue
new file mode 100644
index 0000000..4a1c3e6
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171629.vue
@@ -0,0 +1,513 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171731.vue b/.history/src/components/SerialPort_20231030171731.vue
new file mode 100644
index 0000000..b0fd00a
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171731.vue
@@ -0,0 +1,518 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1"
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171733.vue b/.history/src/components/SerialPort_20231030171733.vue
new file mode 100644
index 0000000..ea895e2
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171733.vue
@@ -0,0 +1,518 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171825.vue b/.history/src/components/SerialPort_20231030171825.vue
new file mode 100644
index 0000000..f754621
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171825.vue
@@ -0,0 +1,519 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1",
+            value4:"9600",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171852.vue b/.history/src/components/SerialPort_20231030171852.vue
new file mode 100644
index 0000000..fcc9d2c
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171852.vue
@@ -0,0 +1,528 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            },
+            {
+                value:"com2",
+                label:"com2", 
+            },
+            {
+                value:"com1",
+                label:"com1",
+            }
+        ],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1",
+            value4:"9600",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171856.vue b/.history/src/components/SerialPort_20231030171856.vue
new file mode 100644
index 0000000..f9fe93c
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171856.vue
@@ -0,0 +1,528 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            },
+            {
+                value:"com2",
+                label:"com2", 
+            },
+            {
+                value:"com3",
+                label:"com3",
+            }
+        ],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1",
+            value4:"9600",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171901.vue b/.history/src/components/SerialPort_20231030171901.vue
new file mode 100644
index 0000000..cadbb57
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171901.vue
@@ -0,0 +1,532 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            },
+            {
+                value:"com2",
+                label:"com2", 
+            },
+            {
+                value:"com3",
+                label:"com3",
+            },
+            {
+                value:"com1",
+                label:"com1",
+            }
+        ],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1",
+            value4:"9600",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171906.vue b/.history/src/components/SerialPort_20231030171906.vue
new file mode 100644
index 0000000..adfffc6
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171906.vue
@@ -0,0 +1,532 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            },
+            {
+                value:"com2",
+                label:"com2", 
+            },
+            {
+                value:"com3",
+                label:"com3",
+            },
+            {
+                value:"com4",
+                label:"com4",
+            }
+        ],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1",
+            value4:"9600",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030171914.vue b/.history/src/components/SerialPort_20231030171914.vue
new file mode 100644
index 0000000..ec8a2b9
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030171914.vue
@@ -0,0 +1,536 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3:[{
+                value:"com1",
+                label:"com1",
+            },
+            {
+                value:"com2",
+                label:"com2", 
+            },
+            {
+                value:"com3",
+                label:"com3",
+            },
+            {
+                value:"com4",
+                label:"com4",
+            },
+            {
+                value:"com5",
+                label:"com5",
+            }
+        ],
+            value1: '有线区Channel1',
+            value2:"网口",
+            value3:"com1",
+            value4:"9600",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172204.vue b/.history/src/components/SerialPort_20231030172204.vue
new file mode 100644
index 0000000..ae761bc
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172204.vue
@@ -0,0 +1,552 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="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-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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4:[{
+                value:"1200",
+                label:"1200"
+            },{
+                value:"2400",
+                label:"2400"
+            },{
+                value:"4800",
+                label:"4800",
+            },{
+                value:"9600",
+                label:"9600",
+            },{
+                value:"115200",
+                label:"115200"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172235.vue b/.history/src/components/SerialPort_20231030172235.vue
new file mode 100644
index 0000000..bb69e0d
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172235.vue
@@ -0,0 +1,552 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4:[{
+                value:"1200",
+                label:"1200"
+            },{
+                value:"2400",
+                label:"2400"
+            },{
+                value:"4800",
+                label:"4800",
+            },{
+                value:"9600",
+                label:"9600",
+            },{
+                value:"115200",
+                label:"115200"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172343.vue b/.history/src/components/SerialPort_20231030172343.vue
new file mode 100644
index 0000000..77d4d1e
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172343.vue
@@ -0,0 +1,560 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4:[{
+                value:"1200",
+                label:"1200"
+            },{
+                value:"2400",
+                label:"2400"
+            },{
+                value:"4800",
+                label:"4800",
+            },{
+                value:"9600",
+                label:"9600",
+            },{
+                value:"115200",
+                label:"115200"
+            }],
+            options5:[{
+                value:"8",
+                label:"8"
+            },{
+                value:"7",
+                label:"7"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5:"8",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172346.vue b/.history/src/components/SerialPort_20231030172346.vue
new file mode 100644
index 0000000..62fa721
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172346.vue
@@ -0,0 +1,560 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172440.vue b/.history/src/components/SerialPort_20231030172440.vue
new file mode 100644
index 0000000..bc990d5
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172440.vue
@@ -0,0 +1,560 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172538.vue b/.history/src/components/SerialPort_20231030172538.vue
new file mode 100644
index 0000000..61b62d6
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172538.vue
@@ -0,0 +1,570 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6:[{
+                value:"1",
+                label:"1"
+            },{
+                value:"2",
+                label:"2",
+            }],
+            options7:[{}],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6:"1",
+            value7:"",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172646.vue b/.history/src/components/SerialPort_20231030172646.vue
new file mode 100644
index 0000000..98103cb
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172646.vue
@@ -0,0 +1,579 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6:[{
+                value:"1",
+                label:"1"
+            },{
+                value:"2",
+                label:"2",
+            }],
+            options7:[{
+                value:"奇校验、偶校验、无校验（none）",
+                label:"奇校验"
+            },{
+                value:"偶校验",
+                label:""
+            },{
+                value:"无校验（none）",
+                label:"无校验（none）"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6:"1",
+            value7:"",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172649.vue b/.history/src/components/SerialPort_20231030172649.vue
new file mode 100644
index 0000000..455815c
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172649.vue
@@ -0,0 +1,579 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6:[{
+                value:"1",
+                label:"1"
+            },{
+                value:"2",
+                label:"2",
+            }],
+            options7:[{
+                value:"奇校验、偶校验、无校验（none）",
+                label:"奇校验"
+            },{
+                value:"偶校验",
+                label:"偶校验"
+            },{
+                value:"无校验（none）",
+                label:"无校验（none）"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6:"1",
+            value7:"",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172654.vue b/.history/src/components/SerialPort_20231030172654.vue
new file mode 100644
index 0000000..b72b5ac
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172654.vue
@@ -0,0 +1,579 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6:[{
+                value:"1",
+                label:"1"
+            },{
+                value:"2",
+                label:"2",
+            }],
+            options7:[{
+                value:"奇校验",
+                label:"奇校验"
+            },{
+                value:"偶校验",
+                label:"偶校验"
+            },{
+                value:"无校验（none）",
+                label:"无校验（none）"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6:"1",
+            value7:"",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172658.vue b/.history/src/components/SerialPort_20231030172658.vue
new file mode 100644
index 0000000..a46e409
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172658.vue
@@ -0,0 +1,579 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="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-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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6: [{
+                value: "1",
+                label: "1"
+            }, {
+                value: "2",
+                label: "2",
+            }],
+            options7: [{
+                value: "奇校验",
+                label: "奇校验"
+            }, {
+                value: "偶校验",
+                label: "偶校验"
+            }, {
+                value: "无校验（none）",
+                label: "无校验（none）"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6: "1",
+            value7: "",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172719.vue b/.history/src/components/SerialPort_20231030172719.vue
new file mode 100644
index 0000000..654b65e
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172719.vue
@@ -0,0 +1,579 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="passage">
+                                <el-select v-model="value7" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options7" :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="超过时间(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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6: [{
+                value: "1",
+                label: "1"
+            }, {
+                value: "2",
+                label: "2",
+            }],
+            options7: [{
+                value: "奇校验",
+                label: "奇校验"
+            }, {
+                value: "偶校验",
+                label: "偶校验"
+            }, {
+                value: "无校验（none）",
+                label: "无校验（none）"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6: "1",
+            value7: "",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/SerialPort_20231030172800.vue b/.history/src/components/SerialPort_20231030172800.vue
new file mode 100644
index 0000000..68884e5
--- /dev/null
+++ b/.history/src/components/SerialPort_20231030172800.vue
@@ -0,0 +1,579 @@
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <div v-click-outside="closeMenu">
+            <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>
+            </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"
+                                            disabled></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="串口号:" :label-width="formLabelWidth" prop="port_number">
+                                <el-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :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="passage">
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :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="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :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="passage">
+                                <el-select v-model="value7" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options7" :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="超过时间(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 {
+            diag_drive: false,
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6: [{
+                value: "1",
+                label: "1"
+            }, {
+                value: "2",
+                label: "2",
+            }],
+            options7: [{
+                value: "奇校验",
+                label: "奇校验"
+            }, {
+                value: "偶校验",
+                label: "偶校验"
+            }, {
+                value: "无校验（none）",
+                label: "无校验（none）"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6: "1",
+            value7: "无校验（none）",
+            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() {
+
+    },
+
+    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: {
+        '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);
+}
+
+.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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030160733.vue b/.history/src/components/TreeView_20231030160733.vue
new file mode 100644
index 0000000..27157a2
--- /dev/null
+++ b/.history/src/components/TreeView_20231030160733.vue
@@ -0,0 +1,482 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161311.vue b/.history/src/components/TreeView_20231030161311.vue
new file mode 100644
index 0000000..0abe734
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161311.vue
@@ -0,0 +1,482 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: 'I/O点',
+                    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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161349.vue b/.history/src/components/TreeView_20231030161349.vue
new file mode 100644
index 0000000..500364e
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161349.vue
@@ -0,0 +1,482 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    }]
+                }]
+            }, {
+                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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161442.vue b/.history/src/components/TreeView_20231030161442.vue
new file mode 100644
index 0000000..e322496
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161442.vue
@@ -0,0 +1,492 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: 'I/O点',
+                    },
+                    {
+                    label: 'I/O点',
+                },
+                {
+                    label: 'I/O点',
+                },
+                    ]
+                }]
+            }, {
+                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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161444.vue b/.history/src/components/TreeView_20231030161444.vue
new file mode 100644
index 0000000..16024c9
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161444.vue
@@ -0,0 +1,492 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: 'I/O点',
+                    },
+                    {
+                        label: 'I/O点',
+                    },
+                    {
+                        label: 'I/O点',
+                    },
+                    ]
+                }]
+            }, {
+                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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161514.vue b/.history/src/components/TreeView_20231030161514.vue
new file mode 100644
index 0000000..31de696
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161514.vue
@@ -0,0 +1,492 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161744.vue b/.history/src/components/TreeView_20231030161744.vue
new file mode 100644
index 0000000..1b8cece
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161744.vue
@@ -0,0 +1,473 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label:"数据服务",
+                    children:[{
+                        label:"Modbus"
+                    }]
+                }
+            ]
+            }, ],
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161752.vue b/.history/src/components/TreeView_20231030161752.vue
new file mode 100644
index 0000000..f398c4c
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161752.vue
@@ -0,0 +1,476 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label:"数据服务",
+                    children:[{
+                        label:"Modbus"
+                    }]
+                },
+                {
+                    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' },
+                ],
+            },
+        };
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161856.vue b/.history/src/components/TreeView_20231030161856.vue
new file mode 100644
index 0000000..f40c9fe
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161856.vue
@@ -0,0 +1,490 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: 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: "Mqtt Client"
+                        },
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Mqtt Client"
+                        },
+                    ]
+                }
+                ]
+            },],
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161905.vue b/.history/src/components/TreeView_20231030161905.vue
new file mode 100644
index 0000000..8701487
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161905.vue
@@ -0,0 +1,490 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: 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: "Mqtt Client"
+                        },
+                        {
+                            label: "Mqtt Client"
+                        },
+                    ]
+                }
+                ]
+            },],
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161920.vue b/.history/src/components/TreeView_20231030161920.vue
new file mode 100644
index 0000000..85224a9
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161920.vue
@@ -0,0 +1,490 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: 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: "Mqtt Client"
+                        },
+                    ]
+                }
+                ]
+            },],
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161945.vue b/.history/src/components/TreeView_20231030161945.vue
new file mode 100644
index 0000000..d5f8604
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161945.vue
@@ -0,0 +1,493 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: 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: "loTDDC"
+                        },
+                    ]
+                }
+                ]
+            },],
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030161954.vue b/.history/src/components/TreeView_20231030161954.vue
new file mode 100644
index 0000000..7b9398b
--- /dev/null
+++ b/.history/src/components/TreeView_20231030161954.vue
@@ -0,0 +1,493 @@
+<!-- 网关通道 -->
+<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-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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030162045.vue b/.history/src/components/TreeView_20231030162045.vue
new file mode 100644
index 0000000..5c342fe
--- /dev/null
+++ b/.history/src/components/TreeView_20231030162045.vue
@@ -0,0 +1,494 @@
+<!-- 网关通道 -->
+<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-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 type="primary" @click="add_passage = false">确 定</el-button>
+                    <el-button @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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030162054.vue b/.history/src/components/TreeView_20231030162054.vue
new file mode 100644
index 0000000..c4ffe74
--- /dev/null
+++ b/.history/src/components/TreeView_20231030162054.vue
@@ -0,0 +1,494 @@
+<!-- 网关通道 -->
+<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-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 type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030162141.vue b/.history/src/components/TreeView_20231030162141.vue
new file mode 100644
index 0000000..373a9e2
--- /dev/null
+++ b/.history/src/components/TreeView_20231030162141.vue
@@ -0,0 +1,499 @@
+<!-- 网关通道 -->
+<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-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 type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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%;
+    transform: translateX(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030162156.vue b/.history/src/components/TreeView_20231030162156.vue
new file mode 100644
index 0000000..261253e
--- /dev/null
+++ b/.history/src/components/TreeView_20231030162156.vue
@@ -0,0 +1,500 @@
+<!-- 网关通道 -->
+<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-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 type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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%;
+    top:20px
+    transform: translateX(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030162157.vue b/.history/src/components/TreeView_20231030162157.vue
new file mode 100644
index 0000000..1d0d650
--- /dev/null
+++ b/.history/src/components/TreeView_20231030162157.vue
@@ -0,0 +1,500 @@
+<!-- 网关通道 -->
+<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-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 type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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%;
+    top:20px;
+    transform: translateX(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030162208.vue b/.history/src/components/TreeView_20231030162208.vue
new file mode 100644
index 0000000..9c7c6f4
--- /dev/null
+++ b/.history/src/components/TreeView_20231030162208.vue
@@ -0,0 +1,500 @@
+<!-- 网关通道 -->
+<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-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 type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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%);
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030162212.vue b/.history/src/components/TreeView_20231030162212.vue
new file mode 100644
index 0000000..e73a443
--- /dev/null
+++ b/.history/src/components/TreeView_20231030162212.vue
@@ -0,0 +1,500 @@
+<!-- 网关通道 -->
+<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-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 type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @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 {
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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%);
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030163908.vue b/.history/src/components/TreeView_20231030163908.vue
new file mode 100644
index 0000000..b7d2339
--- /dev/null
+++ b/.history/src/components/TreeView_20231030163908.vue
@@ -0,0 +1,500 @@
+<!-- 网关通道 -->
+<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-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 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">
+            <el-dialog title="提示" :visible.sync="" width="435px">
+                <el-tree :data="datas" :props="defaultProps"></el-tree>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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%);
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030163939.vue b/.history/src/components/TreeView_20231030163939.vue
new file mode 100644
index 0000000..a8a3c0c
--- /dev/null
+++ b/.history/src/components/TreeView_20231030163939.vue
@@ -0,0 +1,499 @@
+<!-- 网关通道 -->
+<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-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 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">
+            <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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%);
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030164128.vue b/.history/src/components/TreeView_20231030164128.vue
new file mode 100644
index 0000000..696febe
--- /dev/null
+++ b/.history/src/components/TreeView_20231030164128.vue
@@ -0,0 +1,506 @@
+<!-- 网关通道 -->
+<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-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 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">
+            <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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: 1235px;
+top: 218px;
+width: 435px;
+height: 720px;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030164130.vue b/.history/src/components/TreeView_20231030164130.vue
new file mode 100644
index 0000000..147b7a1
--- /dev/null
+++ b/.history/src/components/TreeView_20231030164130.vue
@@ -0,0 +1,507 @@
+<!-- 网关通道 -->
+<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-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 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">
+            <el-tree :data="datas" :props="defaultProps"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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: 1235px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030164314.vue b/.history/src/components/TreeView_20231030164314.vue
new file mode 100644
index 0000000..d1a132e
--- /dev/null
+++ b/.history/src/components/TreeView_20231030164314.vue
@@ -0,0 +1,507 @@
+<!-- 网关通道 -->
+<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-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 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">
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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: 1235px;
+    top: 218px;
+    width: 435px;
+    height: 720px;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030164342.vue b/.history/src/components/TreeView_20231030164342.vue
new file mode 100644
index 0000000..7fae1d6
--- /dev/null
+++ b/.history/src/components/TreeView_20231030164342.vue
@@ -0,0 +1,507 @@
+<!-- 网关通道 -->
+<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-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 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">
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030164458.vue b/.history/src/components/TreeView_20231030164458.vue
new file mode 100644
index 0000000..6210a61
--- /dev/null
+++ b/.history/src/components/TreeView_20231030164458.vue
@@ -0,0 +1,508 @@
+<!-- 网关通道 -->
+<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-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 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">
+            <h3>协议选择</h3>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030164541.vue b/.history/src/components/TreeView_20231030164541.vue
new file mode 100644
index 0000000..df6c26f
--- /dev/null
+++ b/.history/src/components/TreeView_20231030164541.vue
@@ -0,0 +1,508 @@
+<!-- 网关通道 -->
+<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-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 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>协议选择</p>
+            <el-tree :data="datas" :props="defaultProps" default-expand-all></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030164608.vue b/.history/src/components/TreeView_20231030164608.vue
new file mode 100644
index 0000000..373d99e
--- /dev/null
+++ b/.history/src/components/TreeView_20231030164608.vue
@@ -0,0 +1,508 @@
+<!-- 网关通道 -->
+<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-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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170413.vue b/.history/src/components/TreeView_20231030170413.vue
new file mode 100644
index 0000000..a10e097
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170413.vue
@@ -0,0 +1,512 @@
+<!-- 网关通道 -->
+<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="value" 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="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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170449.vue b/.history/src/components/TreeView_20231030170449.vue
new file mode 100644
index 0000000..9a4341a
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170449.vue
@@ -0,0 +1,519 @@
+<!-- 网关通道 -->
+<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="value" 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="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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区网关1",
+                label: "有线区网关1",
+            }, {
+                value: "无线区网关1",
+                label: "无线区网关1",
+            }],
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170453.vue b/.history/src/components/TreeView_20231030170453.vue
new file mode 100644
index 0000000..9a4341a
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170453.vue
@@ -0,0 +1,519 @@
+<!-- 网关通道 -->
+<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="value" 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="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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区网关1",
+                label: "有线区网关1",
+            }, {
+                value: "无线区网关1",
+                label: "无线区网关1",
+            }],
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170545.vue b/.history/src/components/TreeView_20231030170545.vue
new file mode 100644
index 0000000..b5b56a1
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170545.vue
@@ -0,0 +1,519 @@
+<!-- 网关通道 -->
+<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="value" 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="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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区网关1",
+                label: "无线区网关1",
+            }],
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170554.vue b/.history/src/components/TreeView_20231030170554.vue
new file mode 100644
index 0000000..53a45a1
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170554.vue
@@ -0,0 +1,519 @@
+<!-- 网关通道 -->
+<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="value" 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="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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            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: 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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170723.vue b/.history/src/components/TreeView_20231030170723.vue
new file mode 100644
index 0000000..ad919d8
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170723.vue
@@ -0,0 +1,519 @@
+<!-- 网关通道 -->
+<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 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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            diag_drive: false,
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value1: '有线区Channel1',
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170728.vue b/.history/src/components/TreeView_20231030170728.vue
new file mode 100644
index 0000000..a14b442
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170728.vue
@@ -0,0 +1,520 @@
+<!-- 网关通道 -->
+<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 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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            diag_drive: false,
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value1: '有线区Channel1',
+            value2:""
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170731.vue b/.history/src/components/TreeView_20231030170731.vue
new file mode 100644
index 0000000..5df9582
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170731.vue
@@ -0,0 +1,520 @@
+<!-- 网关通道 -->
+<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 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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            diag_drive: false,
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value1: '有线区Channel1',
+            value2:"",
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170749.vue b/.history/src/components/TreeView_20231030170749.vue
new file mode 100644
index 0000000..9262fab
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170749.vue
@@ -0,0 +1,520 @@
+<!-- 网关通道 -->
+<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 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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            diag_drive: false,
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value1: '有线区Channel1',
+            value2:"网口",
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170807.vue b/.history/src/components/TreeView_20231030170807.vue
new file mode 100644
index 0000000..0e18adb
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170807.vue
@@ -0,0 +1,511 @@
+<!-- 网关通道 -->
+<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 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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            diag_drive: false,
+            value1: '有线区Channel1',
+            value2:"网口",
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170813.vue b/.history/src/components/TreeView_20231030170813.vue
new file mode 100644
index 0000000..48f3697
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170813.vue
@@ -0,0 +1,511 @@
+<!-- 网关通道 -->
+<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 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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "无线区Channel1",
+            }],
+            diag_drive: false,
+            value1: '有线区Channel1',
+            value2:"网口",
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170815.vue b/.history/src/components/TreeView_20231030170815.vue
new file mode 100644
index 0000000..aaa1dae
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170815.vue
@@ -0,0 +1,511 @@
+<!-- 网关通道 -->
+<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 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 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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            diag_drive: false,
+            value1: '有线区Channel1',
+            value2:"网口",
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030170914.vue b/.history/src/components/TreeView_20231030170914.vue
new file mode 100644
index 0000000..cd55ee9
--- /dev/null
+++ b/.history/src/components/TreeView_20231030170914.vue
@@ -0,0 +1,511 @@
+<!-- 网关通道 -->
+<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>
+</template>
+
+<script>
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
+            }, {
+                value: "无线区Channel1",
+                label: "无线区Channel1",
+            }],
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            diag_drive: false,
+            value1: '有线区Channel1',
+            value2:"网口",
+            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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ No newline at end of file
diff --git a/.history/src/components/TreeView_20231030171458.vue b/.history/src/components/TreeView_20231030171458.vue
new file mode 100644
index 0000000..ba0c09f
--- /dev/null
+++ b/.history/src/components/TreeView_20231030171458.vue
@@ -0,0 +1,511 @@
+<!-- 网关通道 -->
+<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>
+</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'
+            },
+            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() {
+
+    },
+
+    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);
+            },
+            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>
\ 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/router/index_20231030161058.js b/.history/src/router/index_20231030161058.js
new file mode 100644
index 0000000..a58e47d
--- /dev/null
+++ b/.history/src/router/index_20231030161058.js
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router';
+Vue.use(VueRouter)
+
+const routes = [
+    {
+        path: '/ipsetting',
+        name: 'IPsetting',
+        component: () => import("../views/IpSetting.vue")
+    },
+    {
+        path: '/datacollect',
+        name: 'datacollect',
+        component: () => import('../views/DataCollect.vue')
+    },
+    {
+        path: "/channelconfig",
+        name: "channelconfig",
+        component: () => import("../views/ChannelConfig.vue"),
+    }
+]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
+})
+
+export default router
diff --git a/.history/src/views/DataCollect_20231030160847.vue b/.history/src/views/DataCollect_20231030160847.vue
new file mode 100644
index 0000000..a60a4ab
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030160847.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CollectionView></CollectionView>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import TreeView from "@/components/TreeView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CollectionView from "@/components/CollectionView.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        TreeView,
+        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_20231030160853.vue b/.history/src/views/DataCollect_20231030160853.vue
new file mode 100644
index 0000000..a60a4ab
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030160853.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CollectionView></CollectionView>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import TreeView from "@/components/TreeView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CollectionView from "@/components/CollectionView.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        TreeView,
+        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_20231030174450.vue b/.history/src/views/DataCollect_20231030174450.vue
new file mode 100644
index 0000000..a60a4ab
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030174450.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CollectionView></CollectionView>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import TreeView from "@/components/TreeView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CollectionView from "@/components/CollectionView.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        TreeView,
+        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_20231030174547.vue b/.history/src/views/DataCollect_20231030174547.vue
new file mode 100644
index 0000000..d40d8aa
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030174547.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import TreeView from "@/components/TreeView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CollectionView from "@/components/CollectionView.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        TreeView,
+        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_20231030174549.vue b/.history/src/views/DataCollect_20231030174549.vue
new file mode 100644
index 0000000..3541336
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030174549.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import TreeView from "@/components/TreeView.vue";
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CollectionView from "@/components/CollectionView.vue";
+import CloneView from "@/components/CloneView.vue";
+export default {
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        TreeView,
+        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_20231030174612.vue b/.history/src/views/DataCollect_20231030174612.vue
new file mode 100644
index 0000000..07559ab
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030174612.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CollectionView from "@/components/CollectionView.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_20231030174614.vue b/.history/src/views/DataCollect_20231030174614.vue
new file mode 100644
index 0000000..07559ab
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030174614.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import DataAcquisition from "@/components/DataAcquisition.vue";
+import SerialPort from "@/components/SerialPort.vue";
+import DeviceVIew from "@/components/DeviceVIew.vue";
+import CollectionView from "@/components/CollectionView.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_20231030175120.vue b/.history/src/views/DataCollect_20231030175120.vue
new file mode 100644
index 0000000..647a72c
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175120.vue
@@ -0,0 +1,43 @@
+<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_20231030175122.vue b/.history/src/views/DataCollect_20231030175122.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175122.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_20231030175133.vue b/.history/src/views/DataCollect_20231030175133.vue
new file mode 100644
index 0000000..02c3bf5
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175133.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <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_20231030175136.vue b/.history/src/views/DataCollect_20231030175136.vue
new file mode 100644
index 0000000..4875d61
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175136.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <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_20231030175223.vue b/.history/src/views/DataCollect_20231030175223.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175223.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_20231030175343.vue b/.history/src/views/DataCollect_20231030175343.vue
new file mode 100644
index 0000000..052944a
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175343.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="datacollection">
+        <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_20231030175405.vue b/.history/src/views/DataCollect_20231030175405.vue
new file mode 100644
index 0000000..310938e
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175405.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="datacollection">
+        <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>
+.datacollection{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175412.vue b/.history/src/views/DataCollect_20231030175412.vue
new file mode 100644
index 0000000..03379d9
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175412.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="datacollection">
+        <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>
+.datacollection{
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175418.vue b/.history/src/views/DataCollect_20231030175418.vue
new file mode 100644
index 0000000..c4bf701
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175418.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="datacollection">
+        <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>
+.datacollection{
+    margin:  0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175631.vue b/.history/src/views/DataCollect_20231030175631.vue
new file mode 100644
index 0000000..5257bc7
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175631.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <Collection></Collection>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import Collection 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>
+.datacollection{
+    margin:  0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175637.vue b/.history/src/views/DataCollect_20231030175637.vue
new file mode 100644
index 0000000..4d51308
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175637.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <Collection></Collection>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import Collection 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,
+        Collection,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.datacollection{
+    margin:  0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175639.vue b/.history/src/views/DataCollect_20231030175639.vue
new file mode 100644
index 0000000..b75d7fb
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175639.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <Collection></Collection>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import Collection 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,
+        Collection,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.datacollection {
+    margin: 0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175710.vue b/.history/src/views/DataCollect_20231030175710.vue
new file mode 100644
index 0000000..c6d60cf
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175710.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <Collection></Collection>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+// import Collection 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,
+        Collection,
+        CloneView,
+    },
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.datacollection {
+    margin: 0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175714.vue b/.history/src/views/DataCollect_20231030175714.vue
new file mode 100644
index 0000000..de7a2a3
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175714.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <Collection></Collection>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+// import Collection 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>
+.datacollection {
+    margin: 0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175721.vue b/.history/src/views/DataCollect_20231030175721.vue
new file mode 100644
index 0000000..90c4429
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175721.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+// import Collection 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>
+.datacollection {
+    margin: 0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175722.vue b/.history/src/views/DataCollect_20231030175722.vue
new file mode 100644
index 0000000..90c4429
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175722.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+// import Collection 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>
+.datacollection {
+    margin: 0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030175725.vue b/.history/src/views/DataCollect_20231030175725.vue
new file mode 100644
index 0000000..90c4429
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030175725.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="datacollection">
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+// import Collection 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>
+.datacollection {
+    margin: 0 auto;
+    width: 800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/DataCollect_20231030183514.vue b/.history/src/views/DataCollect_20231030183514.vue
new file mode 100644
index 0000000..6033d2c
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030183514.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+// import Collection 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_20231030183517.vue b/.history/src/views/DataCollect_20231030183517.vue
new file mode 100644
index 0000000..b44b528
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030183517.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
+</template>
+
+<script>
+import CollectionView from "@/components/CollectionView.vue";
+// import Collection 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_20231030183523.vue b/.history/src/views/DataCollect_20231030183523.vue
new file mode 100644
index 0000000..ecce780
--- /dev/null
+++ b/.history/src/views/DataCollect_20231030183523.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_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 2b6e7a5..54c990d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,12 +45,6 @@
 </template>
 
 <script>
-import TreeView from "./components/TreeView.vue";
-// import GateWay from "./components/GateWay.vue";
-import DataAcquisition from "./components/DataAcquisition.vue";
-// import DataView from "./components/DataView.vue";
-import SerialPort from "./components/SerialPort.vue";
-import DeviceVIew from "./components/DeviceVIew.vue";
 import CollectionView from "./components/CollectionView.vue";
 import CloneView from "./components/CloneView.vue";
 import ChiGate from "./components/ChiGate.vue";
@@ -78,11 +72,11 @@ export default {
   methods: {},
   components: {
     // GateWay,
-    DataAcquisition,
+    // DataAcquisition,
     // DataView,
-    TreeView,
-    SerialPort,
-    DeviceVIew,
+    // TreeView,
+    // SerialPort,
+    // DeviceVIew,
     CollectionView,
     CloneView,
     ChiGate,
diff --git a/src/components/CloneView.vue b/src/components/CloneView.vue
index 4d202e8..0c36467 100644
--- a/src/components/CloneView.vue
+++ b/src/components/CloneView.vue
@@ -53,7 +53,7 @@
                         </el-row>
                         <el-row>
                             <el-col :span="24">
-                                <el-form-item label="网关iD:" :label-width="formLabelWidth" prop="gateway_id">
+                                <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>
@@ -71,7 +71,7 @@
                                         </el-col>
                                         <el-col :span="9">
                                             <el-select v-model="value" placeholder="请选择" style="width: 99px;">
-                                                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                                     :value="item.value">
                                                 </el-option>
                                             </el-select>
@@ -154,6 +154,25 @@ export default {
 
     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',
diff --git a/src/components/CollectionView.vue b/src/components/CollectionView.vue
index 5ae1516..bf43e95 100644
--- a/src/components/CollectionView.vue
+++ b/src/components/CollectionView.vue
@@ -13,6 +13,7 @@
             <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>
@@ -21,20 +22,62 @@
                 <el-table-column type="index">
                 </el-table-column>
                 <el-table-column property="tag_id" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.tag_id" placeholder="0X">
+                            <el-option v-for="option in options1" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
                 </el-table-column>
                 <el-table-column property="name" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.name" placeholder="0X">
+                            <el-option v-for="option in options2" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
                 </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 options3" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
                 </el-table-column>
                 <el-table-column property="address" label="寄存地址(十进制)" width="150px">
                 </el-table-column>
                 <el-table-column property="type" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.type" placeholder="0X">
+                            <el-option v-for="option in options4" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
                 </el-table-column>
                 <el-table-column property="order" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.order" placeholder="0X">
+                            <el-option v-for="option in options5" :key="option" :label="option.label"
+                                :value="option.value"></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="0X">
+                            <el-option v-for="option in options6" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
                 </el-table-column>
                 <el-table-column property="count" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.count" placeholder="0X">
+                            <el-option v-for="option in options7" :key="option" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
                 </el-table-column>
             </el-table>
         </div>
@@ -47,6 +90,116 @@ export default {
 
     data() {
         return {
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options4: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options5: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options6: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options7: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
             activeIndex: '1',
             value1: 1,
             checked: "",
@@ -97,7 +250,7 @@ export default {
                 label: 'label'
             },
             tableData: [{
-                tag_id: 'tag0001',
+                tag_id: 'MachinePamHID909',
                 name: '测试',
                 datas: "",
                 address: '1',
diff --git a/src/components/DataAcquisition.vue b/src/components/DataAcquisition.vue
index a9cba00..052d545 100644
--- a/src/components/DataAcquisition.vue
+++ b/src/components/DataAcquisition.vue
@@ -7,11 +7,20 @@
             <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
                 <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
                     <el-form-item label="网关名称:" prop="name">
-                        <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
+                        <el-select v-model="formdata.name" placeholder="有线区网关1" style="width: 200px;">
+                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="网关ID:" prop="type">
+                        <el-select v-model="formdata.id" placeholder="LAN-BOX1" style="width: 200px;">
+                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
                     </el-form-item>
                     <el-form-item label="网关类型:" prop="type">
                         <el-select v-model="formdata.type" placeholder="lot Life 网关" style="width: 200px;">
-                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                             </el-option>
                         </el-select>
                     </el-form-item>
@@ -39,26 +48,45 @@ export default {
     data() {
         return {
             input1: "",
-            options: [{
-                value: '选项1',
-                label: '测试1'
+            options1: [{
+                value: "有线区网关1",
+                label: "有线区网关1",
             }, {
-                value: '选项2',
-                label: '测试2'
+                value: "无线区网关1",
+                label: "无线区网关1",
+            }],
+            options2: [{
+                value: "LAN-BOX1",
+                label: "LAN-BOX1",
             }, {
-                value: '选项3',
-                label: '测试3'
+                value: "WLAN-BOX1",
+                label: "WLAN-BOX1",
+            }],
+            options3: [{
+                value: 'loT Lite网关',
+                label: 'loT Lite网关'
             }, {
-                value: '选项4',
-                label: '测试4'
+                value: 'MODBUS网关',
+                label: 'MODBUS网关'
             }, {
-                value: '选项5',
-                label: '测试5'
+                value: 'BACNET网关',
+                label: 'BACNET网关'
+            }, {
+                value: 'OPC UA网关',
+                label: 'OPC UA网关'
+            }, {
+                value: 'OPC DA网关',
+                label: 'OPC DA网关'
+            },
+            {
+                value: 'loT网关',
+                label: 'loT网关'
             }],
             value: '',
             formdata: {
-                name: "Gateway",
-                type: ""
+                name: "有线区网关1",
+                id: "LAN-BOX1",
+                type: "loT网关"
             },
             rules: {
                 name: [
@@ -71,7 +99,6 @@ export default {
             },
             outerVisible: true,
             innerVisible: false,
-            isRegister:false,
         };
     },
 
@@ -83,7 +110,7 @@ export default {
         innerConfirm() {
             this.outerVisible = false;
             this.innerVisible = false;
-            this.isRegister=true;
+            this.$router.replace("/channelconfig");
         }
     },
 };
diff --git a/src/components/DataView.vue b/src/components/DataView.vue
index 3ae7dae..1a90510 100644
--- a/src/components/DataView.vue
+++ b/src/components/DataView.vue
@@ -19,8 +19,8 @@
                                     <el-form-item label="网口:" :label-width="formLabelWidth">
                                         <el-select v-model="form.region" placeholder="ETHO"
                                             style="width: 200px;height:30px">
-                                            <el-option label="区域一" value="aa"></el-option>
-                                            <el-option label="区域二" value="aa1"></el-option>
+                                            <el-option label="ETH0" value="ETH0"></el-option>
+                                            <el-option label="ETH1" value="ETH1"></el-option>
                                         </el-select>
                                     </el-form-item>
                                 </el-col>
@@ -307,7 +307,7 @@
 
 <script>
 export default {
-    name: 'TestHelloWorld',
+    name: 'DataView',
     data() {
         return {
             labelPosition: "left",
@@ -319,7 +319,7 @@ export default {
             dialogFormVisible: true,
             form: {
                 name: '',
-                region: '',
+                region: "",
                 date1: '',
                 date2: '',
                 delivery: false,
diff --git a/src/components/DeviceVIew.vue b/src/components/DeviceVIew.vue
index 475ac42..410bde2 100644
--- a/src/components/DeviceVIew.vue
+++ b/src/components/DeviceVIew.vue
@@ -31,17 +31,81 @@
                     <el-row>
                         <el-col :span="24">
                             <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                <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="24">
                             <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="dev_address">
                                 <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>
+                                <el-checkbox v-model="checked">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="value1" :active-value="value1">
+                                </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <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="pas_params">
+            <el-dialog title="设备属性" :visible.sync="add_passage" width="382px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="dev_id">
+                                <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="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="dev_name">
+                                <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-row>
                     <el-row>
                         <el-col :span="24">
                             <el-form-item label="设备地址:" :label-width="formLabelWidth" prop="dev_address">
@@ -72,7 +136,7 @@
                 </span>
             </el-dialog>
 
-        </div>
+        </div> -->
     </div>
 </template>
 
@@ -91,6 +155,20 @@ export default {
             rightMenu: "",
             dialogVisible: false,
             menuShow: false,
+            options1: [{
+                value: "有线区加工设备1",
+                label: "有线区加工设备1"
+            }, {
+                value: "无线区加工设备1",
+                label: "无线区加工设备1"
+            }],
+            options2: [{
+                value: "有线区精雕1",
+                label: "有线区精雕1",
+            }, {
+                value: "无线区精雕1",
+                label: "无线区精雕1",
+            }],
             datas: [{
                 label: '一级 1',
                 children: [{
diff --git a/src/components/PortConfiguration.vue b/src/components/PortConfiguration.vue
index 6cc2965..ff2eb9f 100644
--- a/src/components/PortConfiguration.vue
+++ b/src/components/PortConfiguration.vue
@@ -5,7 +5,6 @@
       <el-tree
         :data="datas"
         :props="defaultProps"
-        @node-click="treeNodeClick"
         :default-expanded-keys="['keyOfNodeToExpand']"
         :default-checked-keys="['keyOfNodeToSelect']"
       ></el-tree>
diff --git a/src/components/SerialPort.vue b/src/components/SerialPort.vue
index 14919b3..68884e5 100644
--- a/src/components/SerialPort.vue
+++ b/src/components/SerialPort.vue
@@ -28,15 +28,19 @@
                     <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-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="value" placeholder="" style="width: 200px;height:30px">
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                <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>
@@ -59,15 +63,19 @@
                     <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-select v-model="value3" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options3" :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="value" placeholder="" style="width: 200px;height:30px">
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                <el-select v-model="value4" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                         :value="item.value">
                                     </el-option>
                                 </el-select>
@@ -75,8 +83,8 @@
                         </el-col>
                         <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"
+                                <el-select v-model="value5" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options5" :key="item.value" :label="item.label"
                                         :value="item.value">
                                     </el-option>
                                 </el-select>
@@ -86,8 +94,8 @@
                     <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"
+                                <el-select v-model="value6" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options6" :key="item.value" :label="item.label"
                                         :value="item.value">
                                     </el-option>
                                 </el-select>
@@ -95,8 +103,8 @@
                         </el-col>
                         <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"
+                                <el-select v-model="value7" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options7" :key="item.value" :label="item.label"
                                         :value="item.value">
                                     </el-option>
                                 </el-select>
@@ -213,23 +221,88 @@ export default {
     data() {
         return {
             diag_drive: false,
-            options: [{
-                value: '选项1',
-                label: '测试1'
+            options1: [{
+                value: "有线区Channel1",
+                label: "有线区Channel1",
             }, {
-                value: '选项2',
-                label: '测试2'
-            }, {
-                value: '选项3',
-                label: '测试3'
-            }, {
-                value: '选项4',
-                label: '测试4'
-            }, {
-                value: '选项5',
-                label: '测试5'
+                value: "无线区Channel1",
+                label: "无线区Channel1",
             }],
-            value: '网口',
+            options2: [{
+                value: "网口",
+                label: "网口",
+            }, {
+                value: "串口",
+                label: "串口",
+            }],
+            options3: [{
+                value: "com1",
+                label: "com1",
+            },
+            {
+                value: "com2",
+                label: "com2",
+            },
+            {
+                value: "com3",
+                label: "com3",
+            },
+            {
+                value: "com4",
+                label: "com4",
+            },
+            {
+                value: "com5",
+                label: "com5",
+            }
+            ],
+            options4: [{
+                value: "1200",
+                label: "1200"
+            }, {
+                value: "2400",
+                label: "2400"
+            }, {
+                value: "4800",
+                label: "4800",
+            }, {
+                value: "9600",
+                label: "9600",
+            }, {
+                value: "115200",
+                label: "115200"
+            }],
+            options5: [{
+                value: "8",
+                label: "8"
+            }, {
+                value: "7",
+                label: "7"
+            }],
+            options6: [{
+                value: "1",
+                label: "1"
+            }, {
+                value: "2",
+                label: "2",
+            }],
+            options7: [{
+                value: "奇校验",
+                label: "奇校验"
+            }, {
+                value: "偶校验",
+                label: "偶校验"
+            }, {
+                value: "无校验（none）",
+                label: "无校验（none）"
+            }],
+            value1: '有线区Channel1',
+            value2: "网口",
+            value3: "com1",
+            value4: "1200",
+            value5: "8",
+            value6: "1",
+            value7: "无校验（none）",
             isdisabled: true,
             radio: "1",
             checked1: false,
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index 3c7a4ed..b46eca0 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -1,31 +1,22 @@
 <!-- 网关通道 -->
 <template>
   <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 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">
@@ -33,61 +24,32 @@
         <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-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="drive_name"
-              >
+              <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-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-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
                   </el-col>
                 </el-row>
               </el-form-item>
@@ -95,38 +57,23 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item
-                label="IP地址:"
-                :label-width="formLabelWidth"
-                prop="ip_address"
-              >
+              <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-input v-model="input1" style="width: 43px;height:30px"></el-input>
+                  </el-col>
+                  <el-col :span="1">.
                   </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-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-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-input v-model="input1" style="width: 43px;height:30px"></el-input>
                   </el-col>
                 </el-row>
               </el-form-item>
@@ -134,72 +81,32 @@
           </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 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 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 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 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 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>
@@ -209,38 +116,19 @@
           <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
-            >
+            <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-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-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    :disabled="isdisabled"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -254,17 +142,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-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">:
                     </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-input v-model="input1" style="width: 91px;height:30px"></el-input>
                     </el-col>
                   </el-row>
                 </el-form-item>
@@ -274,34 +157,18 @@
               <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-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-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>
@@ -309,17 +176,200 @@
           </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>
-          <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 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>
@@ -330,30 +380,23 @@ export default {
 
   data() {
     return {
+      options1: [{
+        value: "有线区Channel1",
+        label: "有线区Channel1",
+      }, {
+        value: "无线区Channel1",
+        label: "无线区Channel1",
+      }],
+      options2: [{
+        value: "网口",
+        label: "网口",
+      }, {
+        value: "串口",
+        label: "串口",
+      }],
+      value1: '有线区Channel1',
+      value2: "网口",
       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,
@@ -364,70 +407,64 @@ export default {
       input1: 192,
       add_passage: false,
       rightMenu: "",
-      dialogVisible: false,
+      dialogVisible: true,
       menuShow: false,
-      datas: [
-        {
-          label: "一级 1",
-          children: [
-            {
-              label: "二级 1-1",
-              children: [
-                {
-                  label: "三级 1-1-1",
-                },
-              ],
-            },
-          ],
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
         },
         {
-          label: "一级 2",
-          children: [
-            {
-              label: "二级 2-1",
-              children: [
-                {
-                  label: "三级 2-1-1",
-                },
-              ],
-            },
-            {
-              label: "二级 2-2",
-              children: [
-                {
-                  label: "三级 2-2-1",
-                },
-              ],
-            },
-          ],
+          label: "数据服务",
+          children: [{
+            label: "Modbus"
+          }]
         },
         {
-          label: "一级 3",
+          label: "IOT",
           children: [
             {
-              label: "二级 3-1",
-              children: [
-                {
-                  label: "三级 3-1-1",
-                },
-              ],
+              label: "Mqtt Client"
             },
             {
-              label: "二级 3-2",
-              children: [
-                {
-                  label: "三级 3-2-1",
-                },
-              ],
+              label: "Alink"
             },
-          ],
-        },
-      ],
+            {
+              label: "Tlink"
+            },
+            {
+              label: "loTDDC"
+            },
+            {
+              label: "Ulink"
+            },
+          ]
+        }
+        ]
+      },],
       defaultProps: {
-        children: "children",
-        label: "label",
+        children: 'children',
+        label: 'label'
       },
-      rules: {
+
+      // defaultProps: {
+      //   children: "children",
+      //   label: "label",
+      // },
+      rules: [{
         pass_name: [
           { required: true, message: "请输入通道名称", trigger: "blur" },
           { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
@@ -454,14 +491,9 @@ export default {
         repeate_count: [
           { required: true, message: "请输入重复次数", trigger: "blur" },
         ],
-      },
+      }]
     };
   },
-
-  mounted() {
-    console.log(document.querySelector(".body"));
-  },
-
   methods: {
     rightClick(e, data, node) {
       this.menuShow = false;
@@ -635,4 +667,19 @@ export default {
     }
   }
 }
+
+.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/src/router/index.js b/src/router/index.js
index b585997..a58e47d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-    mode: 'hash',
+    mode: 'history',
     base: process.env.BASE_URL,
     routes
 })
diff --git a/src/views/DataCollect.vue b/src/views/DataCollect.vue
index 4b4d442..ecce780 100644
--- a/src/views/DataCollect.vue
+++ b/src/views/DataCollect.vue
@@ -1,39 +1,42 @@
 <template>
-  <div>
-    <DataAcquisition></DataAcquisition>
-    <TreeView></TreeView>
-    <SerialPort></SerialPort>
-    <DeviceVIew></DeviceVIew>
-    <CollectionView></CollectionView>
-    <CloneView></CloneView>
-  </div>
+    <div>
+        <DataAcquisition></DataAcquisition>
+        <CollectionView></CollectionView>
+        <SerialPort></SerialPort>
+        <DeviceVIew></DeviceVIew>
+        <CloneView></CloneView>
+    </div>
 </template>
 
 <script>
-import TreeView from "@/components/TreeView.vue";
+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 CollectionView from "@/components/CollectionView.vue";
 import CloneView from "@/components/CloneView.vue";
 export default {
-  name: "InternetCompetitionDataCollect",
-  components: {
-    DataAcquisition,
-    TreeView,
-    SerialPort,
-    DeviceVIew,
-    CollectionView,
-    CloneView,
-  },
-  data() {
-    return {};
-  },
+    name: 'InternetCompetitionDataCollect',
+    components: {
+        DataAcquisition,
+        SerialPort,
+        DeviceVIew,
+        CollectionView,
+        CloneView,
+    },
+    data() {
+        return {
 
-  mounted() {},
+        };
+    },
 
-  methods: {},
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>
\ No newline at end of file