From d0f2dcba1aba0933a514c75af50e1975b0793c6c Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Fri, 27 Oct 2023 16:11:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=98=E9=BE=99=E9=BE=99=E4=B8=B2=E5=8F=A3?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |   22 +-
 src/components/ChiGate.vue           |  320 ++++----
 src/components/ChiGateway.vue        |  270 +++----
 src/components/CloneView.vue         |  900 +++++++++++++---------
 src/components/DataView.vue          |  638 +++++++--------
 src/components/IpConfiguration.vue   |  205 +++++
 src/components/PortConfiguration.vue |  207 +++++
 src/components/SerialPort.vue        | 1066 +++++++++++++++-----------
 src/validate.js                      |    7 +
 9 files changed, 2222 insertions(+), 1413 deletions(-)
 create mode 100644 src/components/IpConfiguration.vue
 create mode 100644 src/components/PortConfiguration.vue
 create mode 100644 src/validate.js

diff --git a/src/App.vue b/src/App.vue
index e5bad54..6cac192 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,13 +17,15 @@
       <ChiWireld></ChiWireld>
       <ChiGateway></ChiGateway>
     </div>
+    <IpConfiguration></IpConfiguration>
+    <PortConfiguration></PortConfiguration>
   </div>
 </template>
 
 <script>
 import TreeView from "./components/TreeView.vue";
-import GateWay from './components/GateWay.vue';
-import DataAcquisition from './components/DataAcquisition.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";
@@ -32,8 +34,14 @@ 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";
 export default {
-  name: 'App',
+  name: "App",
+  data() {
+    return {};
+  },
+  methods: {},
   components: {
     GateWay,
     DataAcquisition,
@@ -46,8 +54,10 @@ export default {
     ChiGate,
     ChiWireld,
     ChiGateway,
-  }
-}
+    IpConfiguration,
+    PortConfiguration,
+  },
+};
 </script>
 
 <style>
@@ -59,7 +69,7 @@ export default {
 #app {
   width: 100%;
   height: 100vh;
-  background-color: #2B2D38;
+  background-color: #2b2d38;
 }
 
 .db_lite,
diff --git a/src/components/ChiGate.vue b/src/components/ChiGate.vue
index 65b4955..89f5dbe 100644
--- a/src/components/ChiGate.vue
+++ b/src/components/ChiGate.vue
@@ -1,172 +1,194 @@
 <template>
-    <div>
-        <el-button type="info" plain @click="getShow">斥候无线网关</el-button>
-        <div class="gateway" v-show="isShow">
-            <div class="title">
-                <p class="title_l">IP配置</p>
-                <i class="el-icon-close title_r" @click="isShow = false"></i>
-            </div>
-            <el-divider></el-divider>
-            <div class="content">
-                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
-                    <el-row>
-                        <el-col :span="24">
-                            <el-form-item label="客户端SSID:" :label-width="formLabelWidth" prop="client_id">
-                                <el-select v-model="value" placeholder="下拉选择WIFI">
-                                    <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="24">
-                            <el-form-item label="认证方式:" :label-width="formLabelWidth">
-                                <el-select v-model="value" placeholder="开放式">
-                                    <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="24">
-                            <el-form-item label="加密方式:" :label-width="formLabelWidth">
-                                <el-select v-model="value" placeholder="NONE">
-                                    <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="24">
-                            <el-form-item label="密码:" :label-width="formLabelWidth" prop="passage">
-                                <el-input v-model="value" placeholder=""></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <div class="footer">
-                        <el-button type="primary">保 存</el-button>
-                        <el-button>取 消</el-button>
-                    </div>
-                </el-form>
-            </div>
-        </div>
+  <div>
+    <el-button type="info" plain @click="getShow">斥候无线网关</el-button>
+    <div class="gateway" v-show="isShow">
+      <div class="title">
+        <p class="title_l">IP配置</p>
+        <i class="el-icon-close title_r" @click="isShow = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item
+                label="客户端SSID:"
+                :label-width="formLabelWidth"
+                prop="client_id"
+              >
+                <el-select v-model="value" placeholder="下拉选择WIFI">
+                  <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="24">
+              <el-form-item label="认证方式:" :label-width="formLabelWidth">
+                <el-select v-model="value" placeholder="开放式">
+                  <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="24">
+              <el-form-item label="加密方式:" :label-width="formLabelWidth">
+                <el-select v-model="value" placeholder="NONE">
+                  <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="24">
+              <el-form-item
+                label="密码:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
+                <el-input v-model="value" placeholder=""></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="footer">
+            <el-button type="primary">保 存</el-button>
+            <el-button>取 消</el-button>
+          </div>
+        </el-form>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'TestChiGate',
+  name: "TestChiGate",
 
-    data() {
-        return {
-            labelPosition: "left",
-            formLabelWidth: "116px",
-            value: "测试",
-            count: 0,
-            isShow: false,
-            options: [{
-                value: '选项1',
-                label: '测试1'
-            }, {
-                value: '选项2',
-                label: '测试2'
-            }, {
-                value: '选项3',
-                label: '测试3'
-            }, {
-                value: '选项4',
-                label: '测试4'
-            }, {
-                value: '选项5',
-                label: '测试5'
-            }],
-            rules: {
-                client_id: [
-                    { required: true, message: '请输入客户端SSID', trigger: 'blur' },
-                ],
-                passage: [
-                    { required: true, message: '请输入通道', trigger: 'blur' },
-                ],
-            },
-        };
-    },
-
-    mounted() {
-
-    },
-
-    methods: {
-        getShow() {
-            this.count++;
-            if (this.count % 2 == 0) {
-                this.isShow = false;
-            } else {
-                this.isShow = true;
-            }
-        }
+  data() {
+    return {
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      value: "测试",
+      count: 0,
+      isShow: false,
+      options: [
+        {
+          value: "选项1",
+          label: "测试1",
+        },
+        {
+          value: "选项2",
+          label: "测试2",
+        },
+        {
+          value: "选项3",
+          label: "测试3",
+        },
+        {
+          value: "选项4",
+          label: "测试4",
+        },
+        {
+          value: "选项5",
+          label: "测试5",
+        },
+      ],
+      rules: {
+        client_id: [
+          { required: true, message: "请输入客户端SSID", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+      },
+    };
+  },
+
+  mounted() {},
+
+  methods: {
+    getShow() {
+      this.count++;
+      if (this.count % 2 == 0) {
+        this.isShow = false;
+      } else {
+        this.isShow = true;
+      }
     },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 /deep/ .gateway {
-    position: absolute;
-    left: 648px;
-    top: 226px;
-    width: 470px;
-    height: 384px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(187, 187, 187, 1);
+  position: absolute;
+  left: 648px;
+  top: 226px;
+  width: 470px;
+  height: 384px;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(187, 187, 187, 1);
 
-    .el-divider--horizontal {
-        margin: 10px 0;
+  .el-divider--horizontal {
+    margin: 10px 0;
+  }
+
+  .title {
+    margin: 13px 6px 0px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 53px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
     }
 
-    .title {
-        margin: 13px 6px 0px 25px;
-        display: flex;
-        justify-content: space-between;
-
-        .title_l {
-            width: 53px;
-            height: 26px;
-            color: rgba(16, 16, 16, 1);
-            font-size: 18px;
-            text-align: left;
-        }
-
-        .title_r {
-            width: 24px;
-            height: 24px;
-            cursor: pointer;
-            color: rgba(111, 103, 103, 1);
-        }
+    .title_r {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
     }
+  }
 
-    /deep/ .content {
-        margin-left: 62px;
-        margin-right: 114px;
+  /deep/ .content {
+    margin-left: 62px;
+    margin-right: 114px;
 
-        .el-input__inner {
-            width: 200px;
-            height: 30px;
-        }
+    .el-input__inner {
+      width: 200px;
+      height: 30px;
     }
+  }
 
-    /deep/ .footer {
-        .el-button {
-            width: 80px;
-            height: 30px;
-            line-height: 0.5;
-        }
+  /deep/ .footer {
+    .el-button {
+      width: 80px;
+      height: 30px;
+      line-height: 0.5;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ChiGateway.vue b/src/components/ChiGateway.vue
index 07e4c51..58ac64d 100644
--- a/src/components/ChiGateway.vue
+++ b/src/components/ChiGateway.vue
@@ -1,154 +1,164 @@
 <!-- 斥候网关配置 -->
 <template>
-    <div>
-        <el-button type="info" plain @click="getShow">斥候网关配置</el-button>
-        <div class="gateway" v-show="isShow">
-            <div class="title">
-                <p class="title_l">新建网关</p>
-                <i class="el-icon-close title_r" @click="isShow = false"></i>
-            </div>
-            <el-divider></el-divider>
-            <div class="content">
-                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
-                    <el-row>
-                        <el-col :span="24">
-                            <el-form-item label="网关名称:" :label-width="formLabelWidth" prop="client_id">
-                                <el-input v-model="value" placeholder=""></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="value" placeholder=""></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="24">
-                            <el-form-item label="网关描述:" :label-width="formLabelWidth">
-                                <el-input v-model="value" placeholder=""></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <div class="footer">
-                        <el-button type="primary">保 存</el-button>
-                        <el-button>取 消</el-button>
-                    </div>
-                </el-form>
-            </div>
-        </div>
+  <div>
+    <el-button type="info" plain @click="getShow">斥候网关配置</el-button>
+    <div class="gateway" v-show="isShow">
+      <div class="title">
+        <p class="title_l">新建网关</p>
+        <i class="el-icon-close title_r" @click="isShow = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item
+                label="网关名称:"
+                :label-width="formLabelWidth"
+                prop="client_id"
+              >
+                <el-input v-model="value" placeholder=""></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="value" placeholder=""></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="网关描述:" :label-width="formLabelWidth">
+                <el-input v-model="value" placeholder=""></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="footer">
+            <el-button type="primary">保 存</el-button>
+            <el-button>取 消</el-button>
+          </div>
+        </el-form>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'TestChiGate',
+  name: "TestChiGate",
 
-    data() {
-        return {
-            labelPosition: "left",
-            formLabelWidth: "116px",
-            value: "测试",
-            count: 0,
-            isShow: false,
-            options: [{
-                value: '选项1',
-                label: '测试1'
-            }, {
-                value: '选项2',
-                label: '测试2'
-            }, {
-                value: '选项3',
-                label: '测试3'
-            }, {
-                value: '选项4',
-                label: '测试4'
-            }, {
-                value: '选项5',
-                label: '测试5'
-            }],
-            rules: {
-                client_id: [
-                    { required: true, message: '请输入客户端SSID', trigger: 'blur' },
-                ],
-                passage: [
-                    { required: true, message: '请输入通道', trigger: 'blur' },
-                ],
-            },
-        };
-    },
-
-    mounted() {
-
-    },
-
-    methods: {
-        getShow() {
-            this.count++;
-            if (this.count % 2 == 0) {
-                this.isShow = false;
-            } else {
-                this.isShow = true;
-            }
-        }
+  data() {
+    return {
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      value: "测试",
+      count: 0,
+      isShow: false,
+      options: [
+        {
+          value: "选项1",
+          label: "测试1",
+        },
+        {
+          value: "选项2",
+          label: "测试2",
+        },
+        {
+          value: "选项3",
+          label: "测试3",
+        },
+        {
+          value: "选项4",
+          label: "测试4",
+        },
+        {
+          value: "选项5",
+          label: "测试5",
+        },
+      ],
+      rules: {
+        client_id: [
+          { required: true, message: "请输入客户端SSID", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+      },
+    };
+  },
+
+  mounted() {},
+
+  methods: {
+    getShow() {
+      this.count++;
+      if (this.count % 2 == 0) {
+        this.isShow = false;
+      } else {
+        this.isShow = true;
+      }
     },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 /deep/ .gateway {
-    position: absolute;
-    left: 694px;
-    top: 188px;
-    width: 382px;
-    height: 309px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(187, 187, 187, 1);
+  position: absolute;
+  left: 694px;
+  top: 188px;
+  width: 382px;
+  height: 309px;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(187, 187, 187, 1);
 
-    .el-divider--horizontal {
-        margin: 8px 0;
+  .el-divider--horizontal {
+    margin: 8px 0;
+  }
+
+  .title {
+    margin: 13px 11px 0px 21px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 72px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
     }
 
-    .title {
-        margin: 13px 11px 0px 21px;
-        display: flex;
-        justify-content: space-between;
-
-        .title_l {
-            width: 72px;
-            height: 26px;
-            color: rgba(16, 16, 16, 1);
-            font-size: 18px;
-            text-align: left;
-        }
-
-        .title_r {
-            width: 24px;
-            height: 24px;
-            cursor: pointer;
-            color: rgba(111, 103, 103, 1);
-        }
+    .title_r {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
     }
+  }
 
-    .content {
-        margin-left: 50px;
-        margin-right: 50px;
+  .content {
+    margin-left: 50px;
+    margin-right: 50px;
 
-        .el-input__inner {
-            width: 200px;
-            height: 30px;
-        }
+    .el-input__inner {
+      width: 200px;
+      height: 30px;
     }
+  }
 
-    /deep/ .footer {
-        .el-button {
-            width: 80px;
-            height: 30px;
-            line-height: 0.5;
-        }
+  /deep/ .footer {
+    .el-button {
+      width: 80px;
+      height: 30px;
+      line-height: 0.5;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/CloneView.vue b/src/components/CloneView.vue
index ffeee8f..343de32 100644
--- a/src/components/CloneView.vue
+++ b/src/components/CloneView.vue
@@ -1,413 +1,547 @@
 <!-- 串口通道 -->
 <template>
-    <div class="Clone">
-        <!-- 设置树形控件 -->
-        <el-button type="info" plain @click="dialogVisible = true">MQTT云</el-button>
-        <div v-show="dialogVisible" class="tree_menu">
-            <el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
-            <!-- 树形控件右键组件 -->
-        </div>
-        <div class="pas_params" v-show="add_passage">
-            <div 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 :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
-                            @select="handleSelect">
-                            <el-menu-item index="1">添加</el-menu-item>
-                            <el-menu-item index="2">保存</el-menu-item>
-                            <el-menu-item index="3">删除</el-menu-item>
-                        </el-menu>
-                    </div>
-                    <el-table ref="singleTable" :data="tableData" style="width: 100%">
-                        <el-table-column type="index">
-                        </el-table-column>
-                        <el-table-column property="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 class="Clone">
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >MQTT云</el-button
+    >
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
     </div>
+    <div class="pas_params" v-show="add_passage">
+      <div 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
+              :default-active="activeIndex"
+              class="el-menu-demo"
+              mode="horizontal"
+              @select="handleSelect"
+            >
+              <el-menu-item index="1">添加</el-menu-item>
+              <el-menu-item index="2">保存</el-menu-item>
+              <el-menu-item index="3">删除</el-menu-item>
+            </el-menu>
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="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',
+  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'
+  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",
+                },
+              ],
             },
-            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' },
-                ],
+          ],
+        },
+        {
+          id: 2,
+          label: "一级 2",
+          children: [
+            {
+              id: 5,
+              label: "二级 2-1",
+              children: [
+                {
+                  id: 11,
+                  label: "三级 2-1-1",
+                },
+                {
+                  id: 12,
+                  label: "三级 2-1-2",
+                },
+              ],
             },
-        };
-    },
-
-    mounted() {
-
-    },
-
-    methods: {
-        treeNodeClick() {
-            this.add_passage = true;
+            {
+              id: 6,
+              label: "二级 2-2",
+            },
+          ],
         },
-        getDriveName() {
-            this.diag_drive = true;
+        {
+          id: 3,
+          label: "一级 3",
+          children: [
+            {
+              id: 7,
+              label: "二级 3-1",
+            },
+            {
+              id: 8,
+              label: "二级 3-2",
+            },
+          ],
         },
-        handleSelect(key) {
-            console.log(key);
-            if (key == 1) {
-                this.choose_point = true;
-            }
-        }
+      ],
+      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;
+      }
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .tree_menu {
-    position: absolute;
-    width: 286px;
-    height: 753px;
-    left: 64px;
-    top: 104px;
-    width: 286px;
-    height: 753px;
-    line-height: 20px;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
 }
 
 /deep/ .pas_params {
-    .el-button {
-        width: 80px;
-        height: 30px;
-        line-height: 0.5;
+  .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-12:last-child {
-        padding-right: 150px;
+    .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;
     }
 
-    .el-col-12:first-child {
-        padding-right: 54px;
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
     }
 
-    .el-row {
-        height: 40px;
-        display: flex;
-        align-items: flex-start;
+    .con_left {
+      width: 709px;
+      position: relative;
 
-        .el-col-1 {
-            text-align: center;
-            line-height: 20px;
-            height: 20px;
-        }
-
-        .el-col-9 {
-            padding-left: 30px;
-        }
-    }
-
-    .el-input__inner {
-        height: 30px;
-        text-align: left;
-        padding: 0px 8px;
-    }
-
-
-
-    .content {
+      .con_left_footer {
         position: absolute;
-        left: 377px;
-        top: 69px;
-        width: 1220px;
-        height: 836px;
-        line-height: 20px;
-        padding-left: 36px;
-        background-color: rgba(255, 255, 255, 1);
-        color: rgba(16, 16, 16, 1);
-        font-size: 14px;
-        border: 1px solid rgba(187, 187, 187, 1);
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        .el-form-item {
-            margin-bottom: 0px;
-        }
-
-        /deep/ .con_left {
-            .el-con-5 {
-                width: 43px;
-            }
-        }
-
-        .con_left {
-            width: 709px;
-            position: relative;
-
-            .con_left_footer {
-                position: absolute;
-                left: 499px;
-                top: 777px;
-            }
-        }
-
-        .con_right {
-            width: 480px;
-
-            .dialog-footer {
-                .el-button {
-                    width: 80px;
-                    height: 30px;
-                    line-height: 0.5;
-                }
-            }
-        }
+        left: 499px;
+        top: 777px;
+      }
     }
-}</style>
\ No newline at end of file
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/DataView.vue b/src/components/DataView.vue
index e6bc9f5..831c528 100644
--- a/src/components/DataView.vue
+++ b/src/components/DataView.vue
@@ -1,326 +1,348 @@
-
 <template>
+  <div>
     <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="24">
-                                <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-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>
+      <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="24">
+                  <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-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: 'TestHelloWorld',
-    data() {
-        return {
-            labelPosition: "left",
-            input1: 192,
-            input2: 168,
-            input3: 1,
-            input4: 1,
-            radio: '2',
-            dialogFormVisible: false,
-            form: {
-                name: '',
-                region: '',
-                date1: '',
-                date2: '',
-                delivery: false,
-                type: [],
-                resource: '',
-                desc: ''
-            },
-            formLabelWidth: '80px'
-        }
-    }
-}
+  name: "TestHelloWorld",
+  data() {
+    return {
+      labelPosition: "left",
+      input1: 192,
+      input2: 168,
+      input3: 1,
+      input4: 1,
+      radio: "2",
+      dialogFormVisible: false,
+      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;
-            }
-        }
+  .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;
+      }
+    }
+  }
 }
 .netWay {
-    margin-bottom:20px;
-    width: 80px;
-    color: rgba(16, 16, 16, 1);
-    font-size: 20px;
-    text-align: left;
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
 }
-.footer{
-    position:absolute;
-    left:360px;
-    bottom:20px;
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 20px;
 }
 </style>
diff --git a/src/components/IpConfiguration.vue b/src/components/IpConfiguration.vue
new file mode 100644
index 0000000..2a5d438
--- /dev/null
+++ b/src/components/IpConfiguration.vue
@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">ip配置</el-button>
+    <el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="140px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="IP获取方式" prop="ipGetMethod">
+          <el-select v-model="ruleForm.ipGetMethod">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="DNS获取方式" prop="DnsGetMethod">
+          <el-select v-model="ruleForm.DnsGetMethod">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="本机IP" prop="ipAddress">
+          <el-col :span="10">
+            <el-input
+              v-model="ruleForm.ipAddress"
+              placeholder="请输入IP地址"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="子网掩码" prop="subnetMaskRules">
+          <el-col :span="10">
+            <el-input
+              v-model="ruleForm.subnetMaskRules"
+              placeholder="请输入子网掩码"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网关地址" prop="gateway">
+          <el-col :span="10">
+            <el-input
+              v-model="ruleForm.gateway"
+              placeholder="请输入网关地址"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="主DNS服务器" prop="primaryDNS">
+          <el-col :span="10">
+            <el-input
+              v-model="ruleForm.primaryDNS"
+              placeholder="请输入服务器号码"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="备用DNS服务器" prop="bprimaryDNS">
+          <el-col :span="10">
+            <el-input
+              v-model="ruleForm.bprimaryDNS"
+              placeholder="请输入服务器号码"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { isValidPrimaryDNS } from "../validate";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        ipGetMethod: "",
+        DnsGetMethod: "",
+        ipAddress: "",
+        subnetMaskRules: "",
+        gateway: "",
+        primaryDNS: "",
+        bprimaryDNS: "",
+      },
+      rules: {
+        ipGetMethod: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+        ],
+        DnsGetMethod: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+        ],
+        ipAddress: [
+          {
+            required: true,
+            validator: this.validateIpAddress,
+            trigger: "blur",
+            message: "请输入有效的IP地址",
+          },
+        ],
+        subnetMaskRules: [
+          {
+            required: true,
+            validator: this.validateSubnetMask,
+            trigger: "blur",
+            message: "请输入有效的子网掩码",
+          },
+        ],
+        gateway: [
+          {
+            required: true,
+            validator: this.validateGateway,
+            trigger: "blur",
+            message: "请输入有效的网关地址",
+          },
+        ],
+        primaryDNS: [
+          {
+            required: true,
+            validator: this.validatePrimaryDNS,
+            trigger: "blur",
+            message: "请输入有效的主DNS服务器地址",
+          },
+        ],
+        bprimaryDNS: [
+          {
+            required: true,
+            validator: this.validatePrimaryDNS,
+            trigger: "blur",
+            message: "请输入有效的备用DNS服务器地址",
+          },
+        ],
+      },
+    };
+  },
+  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();
+    },
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+          value
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //子网掩码验证
+    validateSubnetMask(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
+          value
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //网关地址验证
+    validateGateway(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入网关地址"));
+      } else if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //dns服务验证
+    validatePrimaryDNS(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!isValidPrimaryDNS(value)) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/PortConfiguration.vue b/src/components/PortConfiguration.vue
new file mode 100644
index 0000000..2d35353
--- /dev/null
+++ b/src/components/PortConfiguration.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/src/components/SerialPort.vue b/src/components/SerialPort.vue
index d5b6d02..f3b8027 100644
--- a/src/components/SerialPort.vue
+++ b/src/components/SerialPort.vue
@@ -1,475 +1,667 @@
 <template>
-    <div>
-        <!-- 设置树形控件 -->
-        <!-- 串口通道的页面 -->
-        <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button>
+  <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>
-        </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-input v-model="input1" placeholder="" 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="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 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 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-input
+                  v-model="input1"
+                  placeholder=""
+                  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="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',
+  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'
+  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",
+                },
+              ],
             },
-            rules: {
-                pass_name: [
-                    { required: true, message: '请输入通道名称', trigger: 'blur' },
-                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-                ],
-                passage: [
-                    { required: true, message: '请输入通道', trigger: 'blur' },
-                ],
-                drive_name: [
-                    { required: true, message: '请输入驱动名称', trigger: 'blur' },
-                ],
-                ip_address: [
-                    { required: true, message: '请输入ip地址', trigger: 'blur' },
-                ],
-                port_number: [
-                    { required: true, message: '请输入端口号', trigger: 'blur' },
-                ],
-                time_exceeded: [
-                    { required: true, message: '请输入超出时间', trigger: 'blur' },
-                ],
-                time_interval: [
-                    { required: true, message: '请输入间隔时间', trigger: 'blur' },
-                ],
-                time_polling: [
-                    { required: true, message: '请输入轮询时间', trigger: 'blur' },
-                ],
-                repeate_count: [
-                    { required: true, message: '请输入重复次数', trigger: 'blur' },
-                ],
+          ],
+        },
+        {
+          label: "一级 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() {
+  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;
+  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();
         }
+      });
     },
-    watch: {
-        checked1: {
-            handler(old,) {
-                if (old) {
-                    this.isdisabled = false;
-                } else {
-                    this.isdisabled = true;
-                }
-            }
+    // 点击时候的判断,判断是否为新增网关
+    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;
         }
-    }
+      },
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .tree_menu {
-    position: absolute;
-    width: 286px;
-    height: 753px;
-    left: 64px;
-    top: 104px;
-    width: 286px;
-    height: 753px;
-    line-height: 20px;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
 }
 
 .tree_rightmenu {
-    position: fixed;
-    width: 120px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-    z-index: 1000;
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
 }
 
 .super_parmams {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 668px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
 
-    i {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-    }
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
 }
 
 /deep/ .pas_params {
-    .el-col-12:last-child {
-        padding-right: 150px;
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
     }
 
-    .el-col-12:first-child {
-        padding-right: 42px;
-    }
-
-    .el-input__inner {
-        height: 30px;
-        text-align: left;
-        padding: 0px 8px;
-    }
-
-    .el-row {
-        display: flex;
-        align-items: flex-end;
-
-        .el-col-1 {
-            text-align: center;
-            line-height: 20px;
-            height: 20px;
-        }
-
-        .el-col-6 {
-            height: 40px;
-            top: 5px;
-            left: 77px;
-            position: relative;
-            width: 50px;
-        }
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
     }
+  }
 }
 
 .super_con {
-    .el-col-12:last-child {
-        padding-right: 28px;
-    }
-
-    .el-col-12:first-child {
-        padding-right: 42px;
-    }
-
-    .el-input__inner {
-
-        text-align: left;
-        padding: 0 8px;
-    }
-
-    .el-row {
-        display: flex;
-        align-items: flex-end;
-
-        .el-col-4 {
-            padding-left: 5px;
-            width: 14px;
-            text-align: center;
-            line-height: 4px;
-            height: 20px;
-        }
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/validate.js b/src/validate.js
new file mode 100644
index 0000000..5f1552c
--- /dev/null
+++ b/src/validate.js
@@ -0,0 +1,7 @@
+// 辅助函数，检查主DNS服务器地址是否有效
+export let isValidPrimaryDNS = (value) => {
+  // 在这里可以添加更多的校验逻辑
+  // 例如，检查是否是有效的IP地址或域名
+  // 这里只提供了一个简单的示例
+  return /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/.test(value);
+};