刘龙龙串口服务器模块

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 GateWay from "./components/GateWay.vue";
-import DataAcquisition from './components/DataAcquisition.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,

src/components/ChiGate.vue

@@ -11,10 +11,18 @@
         <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-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"
+                  <el-option
-                                        :value="item.value">
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -24,8 +32,12 @@
             <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"
+                  <el-option
-                                        :value="item.value">
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -35,8 +47,12 @@
             <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"
+                  <el-option
-                                        :value="item.value">
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -44,7 +60,11 @@
           </el-row>
           <el-row>
             <el-col :span="24">
-                            <el-form-item label="密码:" :label-width="formLabelWidth" prop="passage">
+              <el-form-item
+                label="密码:"
+                :label-width="formLabelWidth"
+                prop="passage"
+              >
                 <el-input v-model="value" placeholder=""></el-input>
               </el-form-item>
             </el-col>
@@ -61,7 +81,7 @@
 
 <script>
 export default {
-    name: 'TestChiGate',
+  name: "TestChiGate",
 
   data() {
     return {
@@ -70,36 +90,38 @@ export default {
       value: "测试",
       count: 0,
       isShow: false,
-            options: [{
+      options: [
-                value: '选项1',
+        {
-                label: '测试1'
+          value: "选项1",
-            }, {
+          label: "测试1",
-                value: '选项2',
+        },
-                label: '测试2'
+        {
-            }, {
+          value: "选项2",
-                value: '选项3',
+          label: "测试2",
-                label: '测试3'
+        },
-            }, {
+        {
-                value: '选项4',
+          value: "选项3",
-                label: '测试4'
+          label: "测试3",
-            }, {
+        },
-                value: '选项5',
+        {
-                label: '测试5'
+          value: "选项4",
-            }],
+          label: "测试4",
+        },
+        {
+          value: "选项5",
+          label: "测试5",
+        },
+      ],
       rules: {
         client_id: [
-                    { required: true, message: '请输入客户端SSID', trigger: 'blur' },
+          { required: true, message: "请输入客户端SSID", trigger: "blur" },
-                ],
-                passage: [
-                    { required: true, message: '请输入通道', trigger: 'blur' },
         ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
       },
     };
   },
 
-    mounted() {
+  mounted() {},
-
-    },
 
   methods: {
     getShow() {
@@ -109,7 +131,7 @@ export default {
       } else {
         this.isShow = true;
       }
-        }
+    },
   },
 };
 </script>

src/components/ChiGateway.vue

@@ -12,14 +12,22 @@
         <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-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-form-item
+                label="网关ID:"
+                :label-width="formLabelWidth"
+                prop="gateway_id"
+              >
                 <el-input v-model="value" placeholder=""></el-input>
               </el-form-item>
             </el-col>
@@ -43,7 +51,7 @@
 
 <script>
 export default {
-    name: 'TestChiGate',
+  name: "TestChiGate",
 
   data() {
     return {
@@ -52,36 +60,38 @@ export default {
       value: "测试",
       count: 0,
       isShow: false,
-            options: [{
+      options: [
-                value: '选项1',
+        {
-                label: '测试1'
+          value: "选项1",
-            }, {
+          label: "测试1",
-                value: '选项2',
+        },
-                label: '测试2'
+        {
-            }, {
+          value: "选项2",
-                value: '选项3',
+          label: "测试2",
-                label: '测试3'
+        },
-            }, {
+        {
-                value: '选项4',
+          value: "选项3",
-                label: '测试4'
+          label: "测试3",
-            }, {
+        },
-                value: '选项5',
+        {
-                label: '测试5'
+          value: "选项4",
-            }],
+          label: "测试4",
+        },
+        {
+          value: "选项5",
+          label: "测试5",
+        },
+      ],
       rules: {
         client_id: [
-                    { required: true, message: '请输入客户端SSID', trigger: 'blur' },
+          { required: true, message: "请输入客户端SSID", trigger: "blur" },
-                ],
-                passage: [
-                    { required: true, message: '请输入通道', trigger: 'blur' },
         ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
       },
     };
   },
 
-    mounted() {
+  mounted() {},
-
-    },
 
   methods: {
     getShow() {
@@ -91,7 +101,7 @@ export default {
       } else {
         this.isShow = true;
       }
-        }
+    },
   },
 };
 </script>

src/components/CloneView.vue

@@ -2,15 +2,25 @@
 <template>
   <div class="Clone">
     <!-- 设置树形控件 -->
-        <el-button type="info" plain @click="dialogVisible = true">MQTT云</el-button>
+    <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>
+      <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-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
             <el-row>
               <el-col :span="24">
                 <el-form-item>
@@ -20,23 +30,38 @@
             </el-row>
             <el-row>
               <el-col :span="12">
-                                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="server_ip">
+                <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-input
-                                        </el-col>
+                        v-model="input1"
-                                        <el-col :span="1">.
+                        style="width: 43px; height: 30px"
-                                        </el-col>
+                      ></el-input>
-                                        <el-col :span="5">
-                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
                     </el-col>
                     <el-col :span="1">. </el-col>
                     <el-col :span="5">
-                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                      <el-input
+                        v-model="input1"
+                        style="width: 43px; height: 30px"
+                      ></el-input>
                     </el-col>
                     <el-col :span="1">.</el-col>
                     <el-col :span="5">
-                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                      <el-input
+                        v-model="input1"
+                        style="width: 43px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input
+                        v-model="input1"
+                        style="width: 43px; height: 30px"
+                      ></el-input>
                     </el-col>
                   </el-row>
                 </el-form-item>
@@ -44,33 +69,64 @@
             </el-row>
             <el-row>
               <el-col :span="24">
-                                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
+                <el-form-item
-                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  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-form-item
-                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  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
+              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-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-select
-                                                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                        v-model="value"
-                                                    :value="item.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>
@@ -78,26 +134,50 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
+                <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-form-item
-                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  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-form-item
-                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                  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-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>
@@ -107,27 +187,31 @@
               </el-col>
             </el-row>
             <div class="con_left_footer">
-                            <el-button type="primary" @click="choose_point = false">保 存</el-button>
+              <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"
+            <el-menu
-                            @select="handleSelect">
+              :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 type="index"> </el-table-column>
-                        </el-table-column>
             <el-table-column property="name" label="设备名称">
             </el-table-column>
-                        <el-table-column property="tag_id" label="TagID">
+            <el-table-column property="tag_id" label="TagID"> </el-table-column>
-                        </el-table-column>
           </el-table>
         </div>
       </div>
@@ -135,11 +219,19 @@
     <!-- 添加按钮下显示出来的弹框信息 -->
     <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]"
+        <el-tree
-                    :default-checked-keys="[4, 5, 6, 7, 8, 9]" :props="defaultProps">
+          :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 type="primary" @click="choose_point = false"
+            >保 存</el-button
+          >
           <el-button @click="choose_point = false">取 消</el-button>
         </span>
       </el-dialog>
@@ -149,64 +241,85 @@
 
 <script>
 export default {
-    name: 'CloneView',
+  name: "CloneView",
 
   data() {
     return {
-            points: [{
+      points: [
+        {
           id: 1,
-                label: '一级 1',
+          label: "一级 1",
-                children: [{
+          children: [
+            {
               id: 4,
-                    label: '二级 1-1',
+              label: "二级 1-1",
-                    children: [{
+              children: [
+                {
                   id: 9,
-                        label: '三级 1-1-1'
+                  label: "三级 1-1-1",
-                    }, {
+                },
+                {
                   id: 10,
-                        label: '三级 1-1-2'
+                  label: "三级 1-1-2",
-                    }]
+                },
-                }]
+              ],
-            }, {
+            },
+          ],
+        },
+        {
           id: 2,
-                label: '一级 2',
+          label: "一级 2",
-                children: [{
+          children: [
+            {
               id: 5,
-                    label: '二级 2-1',
+              label: "二级 2-1",
-                    children: [{
+              children: [
+                {
                   id: 11,
-                        label: '三级 2-1-1'
+                  label: "三级 2-1-1",
-                    }, {
+                },
+                {
                   id: 12,
-                        label: '三级 2-1-2'
+                  label: "三级 2-1-2",
-                    }]
+                },
-                }, {
+              ],
+            },
+            {
               id: 6,
-                    label: '二级 2-2'
+              label: "二级 2-2",
-                }]
+            },
-            }, {
+          ],
+        },
+        {
           id: 3,
-                label: '一级 3',
+          label: "一级 3",
-                children: [{
+          children: [
+            {
               id: 7,
-                    label: '二级 3-1'
+              label: "二级 3-1",
-                }, {
+            },
+            {
               id: 8,
-                    label: '二级 3-2'
+              label: "二级 3-2",
-                }]
+            },
-            }],
+          ],
+        },
+      ],
       choose_point: false,
-            checkList: ['采集成功'],
+      checkList: ["采集成功"],
       checked1: "",
-            options: [{
+      options: [
-                value: '选项1',
+        {
-                label: '选项1'
+          value: "选项1",
-            }, {
+          label: "选项1",
-                value: '选项2',
+        },
-                label: '选项2'
+        {
-            }],
+          value: "选项2",
-            value: 'qos0',
+          label: "选项2",
-            activeIndex: '1',
+        },
+      ],
+      value: "qos0",
+      activeIndex: "1",
       value1: 0,
       checked: "",
       labelPosition: "left",
@@ -216,78 +329,100 @@ export default {
       rightMenu: "",
       dialogVisible: false,
       menuShow: false,
-            datas: [{
+      datas: [
-                label: '一级 1',
+        {
-                children: [{
+          label: "一级 1",
-                    label: '二级 1-1',
+          children: [
-                    children: [{
+            {
-                        label: '三级 1-1-1'
+              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: '测试',
+          ],
-            }],
+        },
+        {
+          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' },
+          { required: true, message: "请输入服务器IP", trigger: "blur" },
         ],
         port_number: [
-                    { required: true, message: '请输入端口', trigger: 'blur' },
+          { required: true, message: "请输入端口", trigger: "blur" },
         ],
         gateway_id: [
-                    { required: true, message: '请输入网关ID', trigger: 'blur' },
+          { required: true, message: "请输入网关ID", trigger: "blur" },
         ],
         data_theme: [
-                    { required: true, message: '请输入主题', trigger: 'blur' },
+          { required: true, message: "请输入主题", trigger: "blur" },
         ],
         upload_mode: [
-                    { required: true, message: '请输入上传模式', trigger: 'blur' },
+          { required: true, message: "请输入上传模式", trigger: "blur" },
         ],
         upload_week: [
-                    { required: true, message: '请输入上传周期', trigger: 'blur' },
+          { required: true, message: "请输入上传周期", trigger: "blur" },
         ],
         data_filter: [
-                    { required: true, message: '请输入数据过滤', trigger: 'blur' },
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
         ],
       },
     };
   },
 
-    mounted() {
+  mounted() {},
-
-    },
 
   methods: {
     treeNodeClick() {
@@ -301,7 +436,7 @@ export default {
       if (key == 1) {
         this.choose_point = true;
       }
-        }
+    },
   },
 };
 </script>
@@ -359,8 +494,6 @@ export default {
     padding: 0px 8px;
   }
 
-
-
   .content {
     position: absolute;
     left: 377px;
@@ -410,4 +543,5 @@ export default {
       }
     }
   }
-}</style>
+}
+</style>

src/components/DataView.vue

@@ -1,8 +1,16 @@
-
 <template>
   <div>
-        <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div>
+    <div>
-        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+      <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>
@@ -12,12 +20,20 @@
         </div>
         <div v-if="radio == 1 ? true : false">
           <h2>有线</h2>
-                <el-form :model="form" :label-position="labelPosition" label-width="80px">
+          <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-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>
@@ -29,8 +45,7 @@
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
-                                        <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                        </el-col>
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
@@ -74,8 +89,7 @@
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
-                                        <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                        </el-col>
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
@@ -119,8 +133,7 @@
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
-                                        <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                        </el-col>
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
@@ -141,7 +154,9 @@
                   <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-input
+                          style="width: 200px; height: 30px"
+                        /><el-button>复制</el-button>
                       </el-col>
                     </el-row>
                   </el-form-item>
@@ -158,12 +173,20 @@
               <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-input
+                      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-input
+                      v-model="input1"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -195,8 +218,7 @@
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
-                                        <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                        </el-col>
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
@@ -219,8 +241,7 @@
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
-                                        <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                        </el-col>
                       <el-col :span="5">
                         <el-input v-model="input1"></el-input>
                       </el-col>
@@ -240,9 +261,10 @@
           </el-form>
         </div>
         <div slot="footer" class="dialog-footer footer">
-                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+          <el-button type="primary" @click="dialogFormVisible = false"
+            >确 定</el-button
+          >
           <el-button @click="dialogFormVisible = false">取 消</el-button>
-
         </div>
       </div>
     </el-dialog>
@@ -251,7 +273,7 @@
 
 <script>
 export default {
-    name: 'TestHelloWorld',
+  name: "TestHelloWorld",
   data() {
     return {
       labelPosition: "left",
@@ -259,22 +281,22 @@ export default {
       input2: 168,
       input3: 1,
       input4: 1,
-            radio: '2',
+      radio: "2",
       dialogFormVisible: false,
       form: {
-                name: '',
+        name: "",
-                region: '',
+        region: "",
-                date1: '',
+        date1: "",
-                date2: '',
+        date2: "",
         delivery: false,
         type: [],
-                resource: '',
+        resource: "",
-                desc: ''
+        desc: "",
       },
-            formLabelWidth: '80px'
+      formLabelWidth: "80px",
-        }
+    };
-    }
+  },
-}
+};
 </script>
 
 <style lang="less" scoped>

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>

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>

src/components/SerialPort.vue

@@ -2,20 +2,28 @@
   <div>
     <!-- 设置树形控件 -->
     <!-- 串口通道的页面 -->
-        <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button>
+    <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"
+      <el-tree
-                @node-click="treeNodeClick"></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
-                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          class="el-menu-vertical-demo"
-
+          @select="selectMenuNode"
-                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+          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;">
+          <el-menu-item index="2" style="font-size: 12px">
             <span slot="title">取 消</span>
           </el-menu-item>
         </el-menu>
@@ -26,30 +34,62 @@
         <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-form-item
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                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-form-item
-                                <el-select v-model="value" placeholder="" style="width: 200px;height:30px">
+                label="通道:"
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                :label-width="formLabelWidth"
-                                        :value="item.value">
+                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-form-item
+                label="驱动名称:"
+                :label-width="formLabelWidth"
+                prop="drive_name"
+              >
                 <el-row>
                   <el-col :span="18">
-                                        <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                    <el-input
-                                            disabled></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-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
                   </el-col>
                 </el-row>
               </el-form-item>
@@ -57,26 +97,58 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-                            <el-form-item label="串口号:" :label-width="formLabelWidth" prop="port_number">
+              <el-form-item
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                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-form-item
-                                <el-select v-model="value" placeholder="" style="width: 200px;height:30px">
+                label="波特率:"
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                :label-width="formLabelWidth"
-                                        :value="item.value">
+                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-form-item
-                                <el-select v-model="value" placeholder="" style="width: 200px;height:30px">
+                label="数据位:"
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                :label-width="formLabelWidth"
-                                        :value="item.value">
+                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>
@@ -84,19 +156,43 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-                            <el-form-item label="停止位:" :label-width="formLabelWidth" prop="passage">
+              <el-form-item
-                                <el-select v-model="value" placeholder="" style="width: 200px;height:30px">
+                label="停止位:"
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                :label-width="formLabelWidth"
-                                        :value="item.value">
+                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-form-item
-                                <el-select v-model="value" placeholder="" style="width: 200px;height:30px">
+                label="奇偶校验:"
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                :label-width="formLabelWidth"
-                                        :value="item.value">
+                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>
@@ -104,25 +200,57 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
+              <el-form-item
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                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-form-item
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                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-form-item
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                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-form-item
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                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>
@@ -132,19 +260,38 @@
           <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;
+            <el-button
-                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
+              type="text"
-                            收起</el-button>
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
           </div>
         </div>
         <div class="super_con" v-show="is_retract">
-                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
             <el-row>
               <el-col :span="12">
                 <el-form-item>
                   <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
-                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                  <el-input
-                                        :disabled="isdisabled"></el-input>
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -158,12 +305,17 @@
                 <el-form-item label="读写占空比:" :label-width="formLabelWidth">
                   <el-row>
                     <el-col :span="10">
-                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
+                      <el-input
-                                        </el-col>
+                        v-model="input1"
-                                        <el-col :span="4">:
+                        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-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
                     </el-col>
                   </el-row>
                 </el-form-item>
@@ -173,18 +325,34 @@
               <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-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
+                      ><el-radio v-model="radio" label="1"
-                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
+                        >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-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
+                      ><el-radio v-model="radio" label="1"
-                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
+                        >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>
@@ -193,7 +361,9 @@
         </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>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
         </span>
       </el-dialog>
     </div>
@@ -207,28 +377,34 @@
 
 <script>
 export default {
-    name: 'TestTreeView',
+  name: "TestTreeView",
 
   data() {
     return {
       diag_drive: false,
-            options: [{
+      options: [
-                value: '选项1',
+        {
-                label: '测试1'
+          value: "选项1",
-            }, {
+          label: "测试1",
-                value: '选项2',
+        },
-                label: '测试2'
+        {
-            }, {
+          value: "选项2",
-                value: '选项3',
+          label: "测试2",
-                label: '测试3'
+        },
-            }, {
+        {
-                value: '选项4',
+          value: "选项3",
-                label: '测试4'
+          label: "测试3",
-            }, {
+        },
-                value: '选项5',
+        {
-                label: '测试5'
+          value: "选项4",
-            }],
+          label: "测试4",
-            value: '网口',
+        },
+        {
+          value: "选项5",
+          label: "测试5",
+        },
+      ],
+      value: "网口",
       isdisabled: true,
       radio: "1",
       checked1: false,
@@ -241,110 +417,127 @@ export default {
       rightMenu: "",
       dialogVisible: false,
       menuShow: false,
-            datas: [{
+      datas: [
-                label: '一级 1',
+        {
-                children: [{
+          label: "一级 1",
-                    label: '二级 1-1',
+          children: [
-                    children: [{
+            {
-                        label: '三级 1-1-1'
+              label: "二级 1-1",
-                    }]
+              children: [
-                }]
+                {
-            }, {
+                  label: "三级 1-1-1",
-                label: '一级 2',
+                },
-                children: [{
+              ],
-                    label: '二级 2-1',
+            },
-                    children: [{
+          ],
-                        label: '三级 2-1-1'
+        },
-                    }]
+        {
-                }, {
+          label: "一级 2",
-                    label: '二级 2-2',
+          children: [
-                    children: [{
+            {
-                        label: '三级 2-2-1'
+              label: "二级 2-1",
-                    }]
+              children: [
-                }]
+                {
-            }, {
+                  label: "三级 2-1-1",
-                label: '一级 3',
+                },
-                children: [{
+              ],
-                    label: '二级 3-1',
+            },
-                    children: [{
+            {
-                        label: '三级 3-1-1'
+              label: "二级 2-2",
-                    }]
+              children: [
-                }, {
+                {
-                    label: '二级 3-2',
+                  label: "三级 2-2-1",
-                    children: [{
+                },
-                        label: '三级 3-2-1'
+              ],
-                    }]
+            },
-                }]
+          ],
-            }],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
       defaultProps: {
-                children: 'children',
+        children: "children",
-                label: 'label'
+        label: "label",
       },
       rules: {
         pass_name: [
-                    { required: true, message: '请输入通道名称', trigger: 'blur' },
+          { required: true, message: "请输入通道名称", trigger: "blur" },
-                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
-                ],
-                passage: [
-                    { required: true, message: '请输入通道', trigger: 'blur' },
         ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
         drive_name: [
-                    { required: true, message: '请输入驱动名称', trigger: 'blur' },
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
         ],
         ip_address: [
-                    { required: true, message: '请输入ip地址', trigger: 'blur' },
+          { required: true, message: "请输入ip地址", trigger: "blur" },
         ],
         port_number: [
-                    { required: true, message: '请输入端口号', trigger: 'blur' },
+          { required: true, message: "请输入端口号", trigger: "blur" },
         ],
         time_exceeded: [
-                    { required: true, message: '请输入超出时间', trigger: 'blur' },
+          { required: true, message: "请输入超出时间", trigger: "blur" },
         ],
         time_interval: [
-                    { required: true, message: '请输入间隔时间', trigger: 'blur' },
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
         ],
         time_polling: [
-                    { required: true, message: '请输入轮询时间', trigger: 'blur' },
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
         ],
         repeate_count: [
-                    { required: true, message: '请输入重复次数', trigger: 'blur' },
+          { required: true, message: "请输入重复次数", trigger: "blur" },
         ],
       },
     };
   },
 
-    mounted() {
+  mounted() {},
-
-    },
 
   methods: {
     rightClick(e, data, node) {
-            this.menuShow = false
+      this.menuShow = false;
-            this.menuShow = true
+      this.menuShow = true;
-            e.preventDefault() //关闭浏览器右键默认事件
+      e.preventDefault(); //关闭浏览器右键默认事件
-            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
-            document.addEventListener('click', (ev) => {
+      document.addEventListener("click", (ev) => {
-                ev.stopImmediatePropagation()
+        ev.stopImmediatePropagation();
-                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
-                    this.foo()
+          this.foo();
         }
-            })
+      });
     },
     // 点击时候的判断,判断是否为新增网关
     selectMenuNode(index, indexPath) {
       console.log(index);
       if (index == 1) {
         this.add_passage = true;
-
       }
     },
     foo() {
       // 取消鼠标监听事件 菜单栏
-            this.menuShow = false
+      this.menuShow = false;
-            document.removeEventListener('click', this.foo) // 关掉监听，
+      document.removeEventListener("click", this.foo); // 关掉监听，
     },
     treeNodeClick() {
-            this.foo()
+      this.foo();
     },
     // 收起点击事件的判断
     getRetract() {
@@ -356,19 +549,19 @@ export default {
     },
     getDriveName() {
       this.diag_drive = true;
-        }
+    },
   },
   watch: {
     checked1: {
-            handler(old,) {
+      handler(old) {
         if (old) {
           this.isdisabled = false;
         } else {
           this.isdisabled = true;
         }
-            }
+      },
-        }
+    },
-    }
+  },
 };
 </script>
 
@@ -454,7 +647,6 @@ export default {
   }
 
   .el-input__inner {
-
     text-align: left;
     padding: 0 8px;
   }

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);
+};