From 8a4358987cc01bff12c66c6671f59a4ae35a6e0f Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Mon, 30 Oct 2023 16:57:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=88=98=E9=BE=99=E9=BE=9910-30?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |   23 +
 src/components/ChiCollection.vue        |  523 +++++------
 src/components/IpConfiguration.vue      |  195 ++++-
 src/components/NetworkConfiguration.vue |   78 ++
 src/components/NetworkManagement.vue    |  164 ++++
 src/components/ObjectManagement.vue     |  119 +++
 src/components/PortConfiguration.vue    |   64 +-
 src/components/TreeView.vue             | 1047 +++++++++++++----------
 src/components/Wireles.vue              |   96 +++
 src/components/netConfiguration.vue     |  167 ++++
 10 files changed, 1729 insertions(+), 747 deletions(-)
 create mode 100644 src/components/NetworkConfiguration.vue
 create mode 100644 src/components/NetworkManagement.vue
 create mode 100644 src/components/ObjectManagement.vue
 create mode 100644 src/components/Wireles.vue
 create mode 100644 src/components/netConfiguration.vue

diff --git a/src/App.vue b/src/App.vue
index e22cab5..4f791d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,19 @@
     </div>
     <IpConfiguration></IpConfiguration>
     <PortConfiguration></PortConfiguration>
+
+    <div>
+      <!-- //串口及网络协议设置 -->
+      <netConfiguration />
+      <!-- 网口配置 -->
+      <NetworkConfiguration />
+      <!-- 无线配置 -->
+      <Wireles />
+      <!-- 网络管理 -->
+      <NetworkManagement />
+      <!-- 对象管理 -->
+      <ObjectManagement />
+    </div>
   </div>
 </template>
 
@@ -42,6 +55,11 @@ import PortConfiguration from "./components/PortConfiguration.vue";
 import ChiDevice from "./components/ChiDevice.vue";
 import ChiCollection from "./components/ChiCollection.vue";
 import ChiClone from "./components/ChiClone.vue";
+import netConfiguration from "./components/netConfiguration.vue";
+import NetworkConfiguration from "./components/NetworkConfiguration.vue";
+import Wireles from "./components/Wireles.vue";
+import NetworkManagement from "./components/NetworkManagement.vue";
+import ObjectManagement from "./components/ObjectManagement.vue";
 export default {
   name: "App",
   data() {
@@ -65,6 +83,11 @@ export default {
     ChiClone,
     IpConfiguration,
     PortConfiguration,
+    netConfiguration,
+    NetworkConfiguration,
+    Wireles,
+    NetworkManagement,
+    ObjectManagement,
   },
 };
 </script>
diff --git a/src/components/ChiCollection.vue b/src/components/ChiCollection.vue
index 4b52aa6..5c9d2ae 100644
--- a/src/components/ChiCollection.vue
+++ b/src/components/ChiCollection.vue
@@ -1,271 +1,316 @@
 <!-- 采集点收集 -->
 <template>
-    <div>
-        <!-- 设置树形控件 -->
-        <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button>
-        <div v-show="dialogVisible" class="tree_menu">
-            <el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
-            <!-- 树形控件右键组件 -->
-        </div>
-        <div class="pas_params" v-show="add_passage">
-            <div>
-                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-                    <el-menu-item index="1">添加</el-menu-item>
-                    <el-menu-item index="2">保存</el-menu-item>
-                    <el-menu-item index="3">删除</el-menu-item>
-                </el-menu>
-            </div>
-            <el-table ref="singleTable" :data="tableData" style="width: 100%">
-                <el-table-column type="index">
-                </el-table-column>
-                <el-table-column property="tag_id" label="TagID">
-                </el-table-column>
-                <el-table-column property="name" label="名称">
-                </el-table-column>
-                <el-table-column property="datas" label="地址">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.datas" placeholder="0X">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column property="address" label="寄存地址(十进制)" width="150px">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.address" placeholder="1">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column property="type" label="采集数据类型">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.type" placeholder="bool">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-
-                <el-table-column property="attribute" label="读写属性">
-                    <template slot-scope="scope">
-                        <el-select v-model="scope.row.attribute" placeholder="读写">
-                            <el-option v-for="option in selectOptions" :key="option" :label="option"
-                                :value="option"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column property="order" label="上传模式">
-                </el-table-column>
-                <el-table-column property="count" label="单位">
-                </el-table-column>
-            </el-table>
-        </div>
+  <div>
+    <!-- 设置树形控件 -->
+    <el-button type="info" plain @click="dialogVisible = true"
+      >斥候采集点设置</el-button
+    >
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        @node-click="treeNodeClick"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
     </div>
+    <div class="pas_params" v-show="add_passage">
+      <div>
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="handleSelect"
+        >
+          <el-menu-item index="1">添加</el-menu-item>
+          <el-menu-item index="2">保存</el-menu-item>
+          <el-menu-item index="3">删除</el-menu-item>
+        </el-menu>
+      </div>
+      <el-table ref="singleTable" :data="tableData" style="width: 100%">
+        <el-table-column type="index"> </el-table-column>
+        <el-table-column property="tag_id" label="TagID"> </el-table-column>
+        <el-table-column property="name" label="名称"> </el-table-column>
+        <el-table-column property="datas" label="地址">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.datas" placeholder="0X">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          property="address"
+          label="寄存地址(十进制)"
+          width="150px"
+        >
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.address" placeholder="1">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="type" label="采集数据类型">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.type" placeholder="bool">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column property="attribute" label="读写属性">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.attribute" placeholder="读写">
+              <el-option
+                v-for="option in selectOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="order" label="上传模式"> </el-table-column>
+        <el-table-column property="count" label="单位"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'ChiCollection',
+  name: "ChiCollection",
 
-    data() {
-        return {
-
-            activeIndex: '1',
-            value1: 1,
-            checked: "",
-            labelPosition: "left",
-            formLabelWidth: "116px",
-            input1: 192,
-            add_passage: false,
-            rightMenu: "",
-            dialogVisible: false,
-            menuShow: false,
-            datas: [{
-                label: '一级 1',
-                children: [{
-                    label: '二级 1-1',
-                    children: [{
-                        label: '三级 1-1-1'
-                    }]
-                }]
-            }, {
-                label: '一级 2',
-                children: [{
-                    label: '二级 2-1',
-                    children: [{
-                        label: '三级 2-1-1'
-                    }]
-                }, {
-                    label: '二级 2-2',
-                    children: [{
-                        label: '三级 2-2-1'
-                    }]
-                }]
-            }, {
-                label: '一级 3',
-                children: [{
-                    label: '二级 3-1',
-                    children: [{
-                        label: '三级 3-1-1'
-                    }]
-                }, {
-                    label: '二级 3-2',
-                    children: [{
-                        label: '三级 3-2-1'
-                    }]
-                }]
-            }],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
+  data() {
+    return {
+      activeIndex: "1",
+      value1: 1,
+      checked: "",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: false,
+      menuShow: false,
+      datas: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
             },
-            selectOptions: [],
-            tableData: [{
-                tag_id: 'tag0001',
-                name: '测试',
-                datas: "",
-                address: '1',
-                order: 'NUll',
-                type: "boolean",
-                attribute: "读写",
-                count: 1,
-            }],
-        };
-    },
-
-    mounted() {
-
-    },
-
-    methods: {
-        treeNodeClick() {
-            this.add_passage = true;
+          ],
         },
-        getDriveName() {
-            this.diag_drive = true;
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
         },
-        handleSelect(key, keyPath) {
-            console.log(key, keyPath);
-        }
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      selectOptions: [],
+      tableData: [
+        {
+          tag_id: "tag0001",
+          name: "测试",
+          datas: "",
+          address: "1",
+          order: "NUll",
+          type: "boolean",
+          attribute: "读写",
+          count: 1,
+        },
+      ],
+    };
+  },
+
+  mounted() {},
+
+  methods: {
+    treeNodeClick() {
+      this.add_passage = true;
     },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .tree_menu {
-    position: absolute;
-    width: 286px;
-    height: 753px;
-    left: 64px;
-    top: 104px;
-    width: 286px;
-    height: 753px;
-    line-height: 20px;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
 }
 
 /deep/ .pas_params {
+  position: absolute;
+  left: 362px;
+  top: 95px;
+  width: 1066px;
+  height: 752px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  // text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+
+  .el-button {
+    width: 80px;
+    height: 30px;
+    line-height: 0.5;
+  }
+
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 54px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
     position: absolute;
-    left: 362px;
-    top: 95px;
-    width: 1066px;
-    height: 752px;
+    left: 377px;
+    top: 69px;
+    width: 1220px;
+    height: 836px;
     line-height: 20px;
-    border-radius: 3px;
+    padding-left: 36px;
     background-color: rgba(255, 255, 255, 1);
-    // text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    border: 1px solid rgba(187, 187, 187, 1);
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
 
-    .el-button {
-        width: 80px;
-        height: 30px;
-        line-height: 0.5;
+    .el-form-item {
+      margin-bottom: 0px;
     }
 
-    .el-col-12:last-child {
-        padding-right: 150px;
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
     }
 
-    .el-col-12:first-child {
-        padding-right: 54px;
-    }
+    .con_left {
+      width: 709px;
+      position: relative;
 
-    .el-row {
-        height: 40px;
-        display: flex;
-        align-items: flex-start;
-
-        .el-col-1 {
-            text-align: center;
-            line-height: 20px;
-            height: 20px;
-        }
-
-        .el-col-9 {
-            padding-left: 30px;
-        }
-    }
-
-    .el-input__inner {
-        height: 30px;
-        text-align: left;
-        padding: 0px 8px;
-    }
-
-
-
-    .content {
+      .con_left_footer {
         position: absolute;
-        left: 377px;
-        top: 69px;
-        width: 1220px;
-        height: 836px;
-        line-height: 20px;
-        padding-left: 36px;
-        background-color: rgba(255, 255, 255, 1);
-        color: rgba(16, 16, 16, 1);
-        font-size: 14px;
-        border: 1px solid rgba(187, 187, 187, 1);
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        .el-form-item {
-            margin-bottom: 0px;
-        }
-
-        /deep/ .con_left {
-            .el-con-5 {
-                width: 43px;
-            }
-        }
-
-        .con_left {
-            width: 709px;
-            position: relative;
-
-            .con_left_footer {
-                position: absolute;
-                left: 499px;
-                top: 777px;
-            }
-        }
-
-        .con_right {
-            width: 480px;
-
-            .dialog-footer {
-                .el-button {
-                    width: 80px;
-                    height: 30px;
-                    line-height: 0.5;
-                }
-            }
-        }
+        left: 499px;
+        top: 777px;
+      }
     }
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/IpConfiguration.vue b/src/components/IpConfiguration.vue
index 2a5d438..b940bb8 100644
--- a/src/components/IpConfiguration.vue
+++ b/src/components/IpConfiguration.vue
@@ -11,56 +11,175 @@
         :label-position="labelPosition"
       >
         <el-form-item label="IP获取方式" prop="ipGetMethod">
-          <el-select v-model="ruleForm.ipGetMethod">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="10">
+            <el-select v-model="ruleForm.ipGetMethod">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="DNS获取方式" prop="DnsGetMethod">
-          <el-select v-model="ruleForm.DnsGetMethod">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="10">
+            <el-select v-model="ruleForm.DnsGetMethod">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="本机IP" prop="ipAddress">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.ipAddress"
-              placeholder="请输入IP地址"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="子网掩码" prop="subnetMaskRules">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.subnetMaskRules"
-              placeholder="请输入子网掩码"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="网关地址" prop="gateway">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.gateway"
-              placeholder="请输入网关地址"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="主DNS服务器" prop="primaryDNS">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.primaryDNS"
-              placeholder="请输入服务器号码"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
         <el-form-item label="备用DNS服务器" prop="bprimaryDNS">
-          <el-col :span="10">
-            <el-input
-              v-model="ruleForm.bprimaryDNS"
-              placeholder="请输入服务器号码"
-            ></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="5">
+              <el-input
+                v-model="input1"
+                style="width: 43px; height: 30px"
+              ></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
diff --git a/src/components/NetworkConfiguration.vue b/src/components/NetworkConfiguration.vue
new file mode 100644
index 0000000..50e80f8
--- /dev/null
+++ b/src/components/NetworkConfiguration.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">网口设置</el-button>
+    <el-dialog
+      title="网口设置"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <h3>以太网功能</h3>
+      <el-divider></el-divider>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="开启网口:" prop="kqwk">
+          <el-select v-model="ruleForm.kqwk">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网口工作方式:" prop="wkgzfs">
+          <el-select v-model="ruleForm.wkgzfs">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <h3>网口模式设置</h3>
+      <el-divider></el-divider>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="网口模式:" prop="wkms">
+          <el-select v-model="ruleForm.wkms">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        kqwk: "",
+        wkgzfs: "",
+        wkms: "",
+      },
+      rules: {
+        kqwk: [{ required: true, trigger: "change" }],
+        wkgzfs: [{ required: true, trigger: "change" }],
+        wkms: [{ required: true, trigger: "change" }],
+      },
+    };
+  },
+};
+</script>
diff --git a/src/components/NetworkManagement.vue b/src/components/NetworkManagement.vue
new file mode 100644
index 0000000..0530a17
--- /dev/null
+++ b/src/components/NetworkManagement.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">网络管理</el-button>
+    <el-dialog
+      title="网络管理"
+      :visible.sync="dialogVisible"
+      width="40%"
+      :before-close="handleClose"
+    >
+      <h3>内网网卡</h3>
+      <el-divider></el-divider>
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column prop="name" label="网卡名称"> </el-table-column>
+        <el-table-column prop="ipv4Address" label="IPV4地址">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ipv4Code" label="IPV4掩码">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row> </template
+        ></el-table-column>
+      </el-table>
+      <h3>外网网卡</h3>
+      <el-divider></el-divider>
+      <el-table :data="tableData1" style="width: 100%" border>
+        <el-table-column prop="name" label="网卡名称"> </el-table-column>
+        <el-table-column prop="ipv4Address" label="IPV4地址">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ipv4Code" label="IPV4掩码">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">. </el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+              <el-col :span="1">.</el-col>
+              <el-col :span="5">
+                <el-input v-model="input1"></el-input>
+              </el-col>
+            </el-row> </template
+        ></el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      tableData: [
+        {
+          name: "内网网卡1",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+        {
+          name: "内网网卡2",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+        {
+          name: "内网网卡3",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+        {
+          name: "内网网卡4",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+      ],
+      tableData1: [
+        {
+          name: "外网网卡1",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+        {
+          name: "外网网卡2",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+        {
+          name: "外网网卡3",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+        {
+          name: "外网网卡4",
+          ipv4Address: "",
+          ipv4Code: "",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style></style>
diff --git a/src/components/ObjectManagement.vue b/src/components/ObjectManagement.vue
new file mode 100644
index 0000000..abf696e
--- /dev/null
+++ b/src/components/ObjectManagement.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">对象管理</el-button>
+    <el-dialog
+      title="对象管理"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-button style="margin-bottom: 10px" @click="dialogVisible1 = true"
+        >新增对象</el-button
+      >
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column label="序号">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="对象名称"> </el-table-column>
+        <el-table-column prop="address" label="IP地址信息"> </el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"
+              >编辑</el-button
+            >
+            <el-button type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog
+      title="新增对象"
+      :visible.sync="dialogVisible1"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="IP类型:" prop="iplx">
+          <el-col :span="20">
+            <el-select v-model="ruleForm.iplx">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item label="对象名称:" prop="dxmc">
+          <el-col :span="20">
+            <el-input v-model="ruleForm.dxmc"> </el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="IP地址:" prop="ipdz">
+          <el-col :span="4">
+            <el-input v-model="input1"></el-input>
+          </el-col>
+          <el-col :span="2">. </el-col>
+          <el-col :span="4">
+            <el-input v-model="input1"></el-input>
+          </el-col>
+          <el-col :span="2">. </el-col>
+          <el-col :span="4">
+            <el-input v-model="input1"></el-input>
+          </el-col>
+          <el-col :span="2">. </el-col>
+          <el-col :span="4">
+            <el-input v-model="input1"></el-input>
+          </el-col>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible1 = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogVisible1: false,
+      labelPosition: "left",
+      tableData: [
+        {
+          name: "数来服务器",
+          address: "192.168.89.21",
+        },
+        {
+          name: "网关1",
+          address: "192.168.89.16",
+        },
+      ],
+      ruleForm: {
+        iplx: "",
+        dxmc: "",
+      },
+      rules: {
+        iplx: [{ required: true, trigger: "change" }],
+        dxmc: [{ required: true, trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleClick() {},
+  },
+};
+</script>
+<style></style>
diff --git a/src/components/PortConfiguration.vue b/src/components/PortConfiguration.vue
index 2d35353..6cc2965 100644
--- a/src/components/PortConfiguration.vue
+++ b/src/components/PortConfiguration.vue
@@ -22,37 +22,47 @@
         :label-position="labelPosition"
       >
         <el-form-item label="波特率(bps)" prop="btl">
-          <el-select v-model="ruleForm.btl">
-            <el-option label="9600" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.btl">
+              <el-option label="9600" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="数据位(bit)" prop="data">
-          <el-select v-model="ruleForm.data">
-            <el-option label="8" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.data">
+              <el-option label="8" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="检验位" prop="check">
-          <el-select v-model="ruleForm.check">
-            <el-option label="无校验(None)" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.check">
+              <el-option label="无校验(None)" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="停止位" prop="stop">
-          <el-select v-model="ruleForm.stop">
-            <el-option label="1" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.stop">
+              <el-option label="1" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="流控模式" prop="waterContorl">
-          <el-select v-model="ruleForm.waterContorl">
-            <el-option label="None" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.waterContorl">
+              <el-option label="None" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-form-item label="打包长度(bytes)" prop="bagLength">
-          <el-col :span="10">
+          <el-col :span="15">
             <el-input
               v-model="ruleForm.bagLength"
               placeholder="0-1460"
@@ -60,15 +70,17 @@
           </el-col>
         </el-form-item>
         <el-form-item label="打包时间(ms)" prop="time">
-          <el-col :span="10">
+          <el-col :span="15">
             <el-input v-model="ruleForm.time" placeholder="0-255"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="同步波特率(RF2217)" prop="RFbtl">
-          <el-select v-model="ruleForm.RFbtl">
-            <el-option label="None" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <el-col :span="15">
+            <el-select v-model="ruleForm.RFbtl">
+              <el-option label="None" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
         </el-form-item>
         <el-checkbox
           label="使能串口心跳包"
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index b4c4d62..3c7a4ed 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -1,479 +1,638 @@
 <!-- 网关通道 -->
 <template>
-    <div>
-        <!-- 设置树形控件 -->
-        <el-button type="info" plain @click="dialogVisible = true">网关通道</el-button>
-        <div class="tree_menu" v-show="dialogVisible">
-            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick"
-                @node-click="treeNodeClick"></el-tree>
-            <!-- 树形控件右键组件 -->
-            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
-
-                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
-
-                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
-                        <span slot="title">新建通道</span>
-                    </el-menu-item>
-                    <el-menu-item index="2" style="font-size: 12px;">
-                        <span slot="title">取 消</span>
-                    </el-menu-item>
-                </el-menu>
-            </div>
-        </div>
-        <div class="pas_params">
-            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px">
-                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="pass_name">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="passage">
-                                <el-select v-model="value" placeholder="" style="width: 200px;height:30px">
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
-                                        :value="item.value">
-                                    </el-option>
-                                </el-select>
-
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="drive_name">
-                                <el-row>
-                                    <el-col :span="18">
-                                        <el-input v-model="input1" placeholder=""
-                                            style="width: 200px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="6">
-                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
-                                    </el-col>
-                                </el-row>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ip_address">
-                                <el-row>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="1">.
-                                    </el-col>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="1">.</el-col>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                    <el-col :span="1">.</el-col>
-                                    <el-col :span="5">
-                                        <el-input v-model="input1" style="width: 43px;height:30px"></el-input>
-                                    </el-col>
-                                </el-row>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="port_number">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="time_exceeded">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="time_interval">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="time_polling">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="重复次数:" :label-width="formLabelWidth" prop="repeate_count">
-                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <div class="super_parmams">
-                    <h3>高级参数</h3>
-                    <div>
-                        <i class="el-icon-caret-bottom" v-if="is_retract"></i>
-                        <i class="el-icon-caret-top" v-else="is_retract"></i>
-                        <el-button type="text" plain @click="getRetract" style="width: 28px;
-                    height: 20px;color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left;">
-                            收起</el-button>
-                    </div>
-                </div>
-                <div class="super_con" v-show="is_retract">
-                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item>
-                                    <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
-                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
-                                        :disabled="isdisabled"></el-input>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item>
-                                    <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
-                                    <el-row>
-                                        <el-col :span="10">
-                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
-                                        </el-col>
-                                        <el-col :span="4">:
-                                        </el-col>
-                                        <el-col :span="10">
-                                            <el-input v-model="input1" style="width: 91px;height:30px"></el-input>
-                                        </el-col>
-                                    </el-row>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="05/0F:" :label-width="formLabelWidth">
-                                    <el-row>
-                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="2">05</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="3">0F</el-radio></el-col>
-                                    </el-row>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="06/10:" :label-width="formLabelWidth">
-                                    <el-row>
-                                        <el-col :span="8"><el-radio v-model="radio" label="1">auto</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="2">06</el-radio></el-col>
-                                        <el-col :span="8"><el-radio v-model="radio" label="3">10</el-radio></el-col>
-                                    </el-row>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                </div>
-                <span slot="footer" class="dialog-footer">
-                    <el-button @click="add_passage = false">取 消</el-button>
-                    <el-button type="primary" @click="add_passage = false">确 定</el-button>
-                </span>
-            </el-dialog>
-        </div>
-        <div class="drvieName_All">
-            <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
-                <el-tree :data="datas" :props="defaultProps"></el-tree>
-            </el-dialog>
-        </div>
+  <div>
+    <!-- 设置树形控件 -->
+    <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"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-button
+                      style="width: 50px; height: 30px"
+                      @click="getDriveName"
+                      >...</el-button
+                    >
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="IP地址:"
+                :label-width="formLabelWidth"
+                prop="ip_address"
+              >
+                <el-row>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input
+                      v-model="input1"
+                      style="width: 43px; height: 30px"
+                    ></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="端口号:"
+                :label-width="formLabelWidth"
+                prop="port_number"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="超过时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_exceeded"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="间隔时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_interval"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="轮询时间(ms):"
+                :label-width="formLabelWidth"
+                prop="time_polling"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="重复次数:"
+                :label-width="formLabelWidth"
+                prop="repeate_count"
+              >
+                <el-input
+                  v-model="input1"
+                  placeholder=""
+                  style="width: 200px; height: 30px"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="super_parmams">
+          <h3>高级参数</h3>
+          <div>
+            <i class="el-icon-caret-bottom" v-if="is_retract"></i>
+            <i class="el-icon-caret-top" v-else="is_retract"></i>
+            <el-button
+              type="text"
+              plain
+              @click="getRetract"
+              style="
+                width: 28px;
+                height: 20px;
+                color: rgba(16, 16, 16, 1);
+                font-size: 14px;
+                text-align: left;
+              "
+            >
+              收起</el-button
+            >
+          </div>
+        </div>
+        <div class="super_con" v-show="is_retract">
+          <el-form
+            :label-position="labelPosition"
+            :rules="rules"
+            ref="ruleForm"
+          >
+            <el-row>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked1">watch time(s)</el-checkbox>
+                  <el-input
+                    v-model="input1"
+                    placeholder=""
+                    style="width: 200px; height: 30px"
+                    :disabled="isdisabled"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item>
+                  <el-checkbox v-model="checked2">采集使用连续地址</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="读写占空比:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input
+                        v-model="input1"
+                        style="width: 91px; height: 30px"
+                      ></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="05/0F:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">05</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">0F</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="06/10:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="1"
+                        >auto</el-radio
+                      ></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="2">06</el-radio></el-col
+                    >
+                    <el-col :span="8"
+                      ><el-radio v-model="radio" label="3">10</el-radio></el-col
+                    >
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="add_passage = false">取 消</el-button>
+          <el-button type="primary" @click="add_passage = false"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All">
+      <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+        <el-tree :data="datas" :props="defaultProps"></el-tree>
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'TestTreeView',
+  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",
+                },
+              ],
             },
-        };
-    },
-
-    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;
-        }
-    },
-    watch: {
-        checked1: {
-            handler(old,) {
-                if (old) {
-                    this.isdisabled = false;
-                } else {
-                    this.isdisabled = true;
-                }
-            }
-        }
-    },
-      directives:{
-        clickoutside:{
-            bind:function(el,binding,vnode){
-                function documentHandler(e){
-                    if(el.contains(e.target)){
-                        return false;
-                    }
-                    if(binding.expression){
-                        binding.value(e)
-                    }
-                }
-                el._vueClickOutside_ = documentHandler;
-                document.addEventListener('click',documentHandler);
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
             },
-            unbind:function(el,binding){
-                document.removeEventListener('click',el._vueClickOutside_);
-                delete el._vueClickOutside_;
-            }
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        pass_name: [
+          { required: true, message: "请输入通道名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        passage: [{ required: true, message: "请输入通道", trigger: "blur" }],
+        drive_name: [
+          { required: true, message: "请输入驱动名称", trigger: "blur" },
+        ],
+        ip_address: [
+          { required: true, message: "请输入ip地址", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        time_exceeded: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        time_interval: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        time_polling: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        repeate_count: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    console.log(document.querySelector(".body"));
+  },
+
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
         }
-    }
+      });
+    },
+    // 点击时候的判断,判断是否为新增网关
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+  },
+  watch: {
+    checked1: {
+      handler(old) {
+        if (old) {
+          this.isdisabled = false;
+        } else {
+          this.isdisabled = true;
+        }
+      },
+    },
+  },
+  directives: {
+    clickoutside: {
+      bind: function (el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el._vueClickOutside_ = documentHandler;
+        document.addEventListener("click", documentHandler);
+      },
+      unbind: function (el, binding) {
+        document.removeEventListener("click", el._vueClickOutside_);
+        delete el._vueClickOutside_;
+      },
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .tree_menu {
-    position: absolute;
-    width: 286px;
-    height: 753px;
-    left: 64px;
-    top: 104px;
-    width: 286px;
-    height: 753px;
-    line-height: 20px;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    border: 1px solid rgba(220, 220, 220, 1);
+  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/components/Wireles.vue b/src/components/Wireles.vue
new file mode 100644
index 0000000..89fde1c
--- /dev/null
+++ b/src/components/Wireles.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">无线设置</el-button>
+    <el-dialog
+      title="无线设置"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="工作模式:" prop="gzms">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.gzms">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网络名称:" prop="wlmc">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.wlmc">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="MAC地址:" prop="mac">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.mac"> </el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="加密模式:" prop="jmms">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.jmms">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="加密算法:" prop="jmsf">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.jmsf">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="密码:" prop="mm">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.mm"> </el-input>
+          </el-col>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        gzms: "",
+        wlmc: "",
+        mac: "",
+        jmms: "",
+        jmsf: "",
+        mm: "",
+      },
+      rules: {
+        gzms: [{ required: true, trigger: "change" }],
+        wlmc: [{ required: true, trigger: "change" }],
+        mac: [{ trigger: "blur" }],
+        jmms: [{ required: true, trigger: "blur" }],
+        jmsf: [{ required: true, trigger: "blur" }],
+        mm: [{ required: true, trigger: "blur" }],
+      },
+    };
+  },
+};
+</script>
diff --git a/src/components/netConfiguration.vue b/src/components/netConfiguration.vue
new file mode 100644
index 0000000..6503271
--- /dev/null
+++ b/src/components/netConfiguration.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">串口及网络协议设置</el-button>
+    <el-dialog
+      title="串口及网络协议设置"
+      :visible.sync="dialogVisible"
+      :before-close="handleClose"
+    >
+      <h3>串口参数设置</h3>
+      <el-divider></el-divider>
+      <div class="formOne">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+          :label-position="labelPosition"
+        >
+          <el-form-item label="波特率(bps):" prop="btl">
+            <el-select v-model="ruleForm.btl" placeholder="请选择波特率">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="检验位:" prop="jyw">
+            <el-select v-model="ruleForm.jyw" placeholder="请选择检验位">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="流控:" prop="lk">
+            <el-select v-model="ruleForm.lk" placeholder="请选择流控">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="自适应波特率(类RFC2117):" prop="rfc">
+            <el-select v-model="ruleForm.rfc" placeholder="请选择自适应波特率">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+          :label-position="labelPosition"
+        >
+          <el-form-item label="数据位(bit):" prop="sjw">
+            <el-select v-model="ruleForm.sjw" placeholder="请选择数据位">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="停止位:" prop="tzw">
+            <el-select v-model="ruleForm.tzw" placeholder="请选择停止位">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="485功能:" prop="gn">
+            <el-select v-model="ruleForm.gn" placeholder="请选择485功能">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <h3>其他设置</h3>
+      <el-divider></el-divider>
+      <div class="formOne">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+          :label-position="labelPosition"
+        >
+          <el-form-item label="串口自动成频:" prop="ckzdcp">
+            <el-select v-model="ruleForm.ckzdcp">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="注册包类型:" prop="zcblx">
+            <el-select v-model="ruleForm.zcblx">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="自定义心跳包:" prop="zdyxtb">
+            <el-select v-model="ruleForm.zdyxtb">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="套接字分发功能:" prop="tjz">
+            <el-select v-model="ruleForm.tjz">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div>
+          注意：开启后，模块主动向服务器发送注册包，此功能用于辨识设备。
+          first:模块建议时发送注册包,every:每次发送数据时发送注册包
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      labelPosition: "left",
+      ruleForm: {
+        btl: "",
+        jyw: "",
+        lk: "",
+        rfc: "",
+        sjw: "",
+        tzw: "",
+        gn: "",
+        ckzdcp: "",
+        zcblx: "",
+        zdyxtb: "",
+        tjz: "",
+      },
+      rules: {
+        btl: [{ required: true, trigger: "change" }],
+        jyw: [{ required: true, trigger: "change" }],
+        lk: [{ required: true, trigger: "change" }],
+        rfc: [{ required: true, trigger: "change" }],
+        sjw: [{ required: true, trigger: "change" }],
+        tzw: [{ required: true, trigger: "change" }],
+        gn: [{ required: true, trigger: "change" }],
+        ckzdcp: [{ required: true, trigger: "change" }],
+        zcblx: [{ required: true, trigger: "change" }],
+        zdyxtb: [{ required: true, trigger: "change" }],
+        tjz: [{ required: true, trigger: "change" }],
+      },
+    };
+  },
+};
+</script>
+<style scoped>
+.formOne {
+  display: flex;
+  justify-content: space-around;
+}
+.demo-ruleForm {
+  width: 50%;
+}
+</style>

From 1a0774b5087c60e0b43aa61905eafc0204228718 Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Mon, 30 Oct 2023 18:17:36 +0800
Subject: [PATCH 2/2] lll 10-30 2

---
 src/App.vue                          |   4 +
 src/components/NetworkManagement.vue |  30 ------
 src/components/ObjectManagement.vue  |  36 +++----
 src/components/PolicyManagement.vue  | 135 +++++++++++++++++++++++++++
 src/components/netConfiguration.vue  |   2 +-
 src/views/ChannelConfig.vue          |  32 +++----
 src/views/DataCollect.vue            |  52 +++++------
 src/views/IpSetting.vue              |  32 +++----
 8 files changed, 208 insertions(+), 115 deletions(-)
 create mode 100644 src/components/PolicyManagement.vue

diff --git a/src/App.vue b/src/App.vue
index 54e42e9..d4dd672 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,6 +27,8 @@
       <NetworkManagement />
       <!-- 对象管理 -->
       <ObjectManagement />
+      <!-- 策略管理 -->
+      <PolicyManagement />
       <div class="ip">
         <IpConfiguration></IpConfiguration>
         <PortConfiguration></PortConfiguration>
@@ -63,6 +65,7 @@ import Wireles from "./components/Wireles.vue";
 import NetworkManagement from "./components/NetworkManagement.vue";
 import ObjectManagement from "./components/ObjectManagement.vue";
 import NetProtocol from "./components/NetProtocol.vue";
+import PolicyManagement from "./components/PolicyManagement.vue";
 export default {
   name: "App",
   data() {
@@ -92,6 +95,7 @@ export default {
     NetworkManagement,
     ObjectManagement,
     NetProtocol,
+    PolicyManagement,
   },
 };
 </script>
diff --git a/src/components/NetworkManagement.vue b/src/components/NetworkManagement.vue
index 0530a17..494bf3c 100644
--- a/src/components/NetworkManagement.vue
+++ b/src/components/NetworkManagement.vue
@@ -119,21 +119,6 @@ export default {
           ipv4Address: "",
           ipv4Code: "",
         },
-        {
-          name: "内网网卡2",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "内网网卡3",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "内网网卡4",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
       ],
       tableData1: [
         {
@@ -141,21 +126,6 @@ export default {
           ipv4Address: "",
           ipv4Code: "",
         },
-        {
-          name: "外网网卡2",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "外网网卡3",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
-        {
-          name: "外网网卡4",
-          ipv4Address: "",
-          ipv4Code: "",
-        },
       ],
     };
   },
diff --git a/src/components/ObjectManagement.vue b/src/components/ObjectManagement.vue
index abf696e..fa85405 100644
--- a/src/components/ObjectManagement.vue
+++ b/src/components/ObjectManagement.vue
@@ -44,7 +44,7 @@
         :label-position="labelPosition"
       >
         <el-form-item label="IP类型:" prop="iplx">
-          <el-col :span="20">
+          <el-col :span="10">
             <el-select v-model="ruleForm.iplx">
               <el-option label="区域一" value="shanghai"></el-option>
               <el-option label="区域二" value="beijing"></el-option>
@@ -53,26 +53,28 @@
         </el-form-item>
 
         <el-form-item label="对象名称:" prop="dxmc">
-          <el-col :span="20">
+          <el-col :span="10">
             <el-input v-model="ruleForm.dxmc"> </el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="IP地址:" prop="ipdz">
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
-          <el-col :span="2">. </el-col>
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
-          <el-col :span="2">. </el-col>
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
-          <el-col :span="2">. </el-col>
-          <el-col :span="4">
-            <el-input v-model="input1"></el-input>
-          </el-col>
+          <el-row>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+          </el-row>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
diff --git a/src/components/PolicyManagement.vue b/src/components/PolicyManagement.vue
new file mode 100644
index 0000000..a335537
--- /dev/null
+++ b/src/components/PolicyManagement.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">策略管理</el-button>
+    <el-dialog
+      title="策略管理"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-button style="margin-bottom: 10px" @click="dialogVisible1 = true"
+        >新增策略</el-button
+      >
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column label="序号">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+        <el-table-column prop="status" label="是否启动">
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.status"
+              @change="handleSwitchChange(scope.row)"
+            ></el-switch> </template
+        ></el-table-column>
+        <el-table-column prop="address" label="协议"> </el-table-column>
+        <el-table-column prop="address" label="工作模式"> </el-table-column>
+        <el-table-column prop="address" label="源对象"> </el-table-column>
+        <el-table-column prop="address" label="源端口"> </el-table-column>
+        <el-table-column prop="address" label="入口网卡"> </el-table-column>
+        <el-table-column prop="address" label="入口IP"> </el-table-column>
+        <el-table-column prop="address" label="入口网关"> </el-table-column>
+        <el-table-column prop="address" label="出口网关"> </el-table-column>
+        <el-table-column prop="address" label="出口IP"> </el-table-column>
+        <el-table-column prop="address" label="出口网关"> </el-table-column>
+        <el-table-column prop="address" label="目的对象"> </el-table-column>
+        <el-table-column prop="address" label="目的端口"> </el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"
+              >编辑</el-button
+            >
+            <el-button type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog
+      title="添加策略"
+      :visible.sync="dialogVisible1"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="IP类型:" prop="iplx">
+          <el-col :span="10">
+            <el-select v-model="ruleForm.iplx">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item label="对象名称:" prop="dxmc">
+          <el-col :span="10">
+            <el-input v-model="ruleForm.dxmc"> </el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="IP地址:" prop="ipdz">
+          <el-row>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">. </el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+            <el-col :span="1">.</el-col>
+            <el-col :span="2">
+              <el-input v-model="input1"></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible1 = false"
+          >保存</el-button
+        >
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogVisible1: false,
+      labelPosition: "left",
+      tableData: [
+        {
+          name: "数来服务器",
+          address: "192.168.89.21",
+        },
+      ],
+      ruleForm: {
+        iplx: "",
+        dxmc: "",
+      },
+      rules: {
+        iplx: [{ required: true, trigger: "change" }],
+        dxmc: [{ required: true, trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleClick() {},
+  },
+};
+</script>
+<style></style>
diff --git a/src/components/netConfiguration.vue b/src/components/netConfiguration.vue
index 6503271..4bc31fa 100644
--- a/src/components/netConfiguration.vue
+++ b/src/components/netConfiguration.vue
@@ -156,7 +156,7 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style scoped lang="less">
 .formOne {
   display: flex;
   justify-content: space-around;
diff --git a/src/views/ChannelConfig.vue b/src/views/ChannelConfig.vue
index 3bd3115..0e6cdfd 100644
--- a/src/views/ChannelConfig.vue
+++ b/src/views/ChannelConfig.vue
@@ -1,30 +1,24 @@
 <template>
-    <div>
-        <TreeView></TreeView>
-    </div>
+  <div>
+    <TreeView></TreeView>
+  </div>
 </template>
 
 <script>
 import TreeView from "@/components/TreeView.vue";
 export default {
-    name: 'InternetCompetitionChannelConfig',
-    components: {
-        TreeView
-    },
-    data() {
-        return {
+  name: "InternetCompetitionChannelConfig",
+  components: {
+    TreeView,
+  },
+  data() {
+    return {};
+  },
 
-        };
-    },
+  mounted() {},
 
-    mounted() {
-
-    },
-
-    methods: {
-
-    },
+  methods: {},
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/DataCollect.vue b/src/views/DataCollect.vue
index 9c5fdb3..4b4d442 100644
--- a/src/views/DataCollect.vue
+++ b/src/views/DataCollect.vue
@@ -1,12 +1,12 @@
 <template>
-    <div>
-        <DataAcquisition></DataAcquisition>
-        <TreeView></TreeView>
-        <SerialPort></SerialPort>
-        <DeviceVIew></DeviceVIew>
-        <CollectionView></CollectionView>
-        <CloneView></CloneView>
-    </div>
+  <div>
+    <DataAcquisition></DataAcquisition>
+    <TreeView></TreeView>
+    <SerialPort></SerialPort>
+    <DeviceVIew></DeviceVIew>
+    <CollectionView></CollectionView>
+    <CloneView></CloneView>
+  </div>
 </template>
 
 <script>
@@ -17,29 +17,23 @@ import DeviceVIew from "@/components/DeviceVIew.vue";
 import CollectionView from "@/components/CollectionView.vue";
 import CloneView from "@/components/CloneView.vue";
 export default {
-    name: 'InternetCompetitionDataCollect',
-    components: {
-        DataAcquisition,
-        TreeView,
-        SerialPort,
-        DeviceVIew,
-        CollectionView,
-        CloneView,
-    },
-    data() {
-        return {
+  name: "InternetCompetitionDataCollect",
+  components: {
+    DataAcquisition,
+    TreeView,
+    SerialPort,
+    DeviceVIew,
+    CollectionView,
+    CloneView,
+  },
+  data() {
+    return {};
+  },
 
-        };
-    },
+  mounted() {},
 
-    mounted() {
-
-    },
-
-    methods: {
-
-    },
+  methods: {},
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/IpSetting.vue b/src/views/IpSetting.vue
index 8f70c22..41c6c5c 100644
--- a/src/views/IpSetting.vue
+++ b/src/views/IpSetting.vue
@@ -1,31 +1,25 @@
 <template>
-    <div>
-        <DataView></DataView>
-    </div>
+  <div>
+    <DataView></DataView>
+  </div>
 </template>
 
 <script>
 import DataView from "@/components/DataView.vue";
 export default {
-    name: 'InternetCompetitionIpSetting',
+  name: "InternetCompetitionIpSetting",
 
-    data() {
-        return {
+  data() {
+    return {};
+  },
 
-        };
-    },
+  mounted() {},
 
-    mounted() {
-
-    },
-
-    methods: {
-
-    },
-    components: {
-        DataView,
-    }
+  methods: {},
+  components: {
+    DataView,
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped></style>