From 22cbe0d0bb9f43c6013914bcd0351ca5b8dbf5ed Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Fri, 27 Oct 2023 17:25:45 +0800
Subject: [PATCH] second commit 5:25

---
 package-lock.json                  |  34 +-
 package.json                       |   4 +-
 src/App.vue                        |   9 +
 src/components/ChiClone.vue        | 481 +++++++++++++++++++++++++++++
 src/components/ChiCollection.vue   | 271 ++++++++++++++++
 src/components/ChiDevice.vue       | 459 +++++++++++++++++++++++++++
 src/components/ChiGate.vue         |   4 +-
 src/components/ChiGateway.vue      |  15 +-
 src/components/ChiWireld.vue       |   2 +-
 src/components/DataAcquisition.vue |   4 +-
 src/components/TreeView.vue        |  20 ++
 11 files changed, 1293 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ChiClone.vue
 create mode 100644 src/components/ChiCollection.vue
 create mode 100644 src/components/ChiDevice.vue

diff --git a/package-lock.json b/package-lock.json
index d2a51c2..4b9482d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,12 @@
         "element-ui": "^2.15.14",
         "less": "^4.2.0",
         "less-loader": "^11.1.3",
+        "prismjs": "^1.29.0",
         "sass-loader": "^13.3.2",
         "scss-loader": "^0.0.1",
         "vue": "^2.6.14",
-        "vue-contextmenu": "^1.5.11"
+        "vue-contextmenu": "^1.5.11",
+        "vue-prism-editor": "^1.3.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -8876,6 +8878,14 @@
         "renderkid": "^3.0.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmmirror.com/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -10584,6 +10594,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-prism-editor": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-prism-editor/-/vue-prism-editor-1.3.0.tgz",
+      "integrity": "sha512-54RfgtMGRMNr9484zKMOZs1wyLDR6EfFylzE2QrMCD9alCvXyYYcS0vX8oUHh+6pMUu6ts59uSN9cHglpU2NRQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.11"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -18093,6 +18114,11 @@
         "renderkid": "^3.0.0"
       }
     },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmmirror.com/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -19453,6 +19479,12 @@
         }
       }
     },
+    "vue-prism-editor": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-prism-editor/-/vue-prism-editor-1.3.0.tgz",
+      "integrity": "sha512-54RfgtMGRMNr9484zKMOZs1wyLDR6EfFylzE2QrMCD9alCvXyYYcS0vX8oUHh+6pMUu6ts59uSN9cHglpU2NRQ==",
+      "requires": {}
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/package.json b/package.json
index f2b1b3b..7a6c2ce 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
     "element-ui": "^2.15.14",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
+    "prismjs": "^1.29.0",
     "sass-loader": "^13.3.2",
     "scss-loader": "^0.0.1",
     "vue": "^2.6.14",
-    "vue-contextmenu": "^1.5.11"
+    "vue-contextmenu": "^1.5.11",
+    "vue-prism-editor": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/src/App.vue b/src/App.vue
index e5bad54..d4b862e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,6 +16,9 @@
       <ChiGate></ChiGate>
       <ChiWireld></ChiWireld>
       <ChiGateway></ChiGateway>
+      <ChiDevice></ChiDevice>
+      <ChiCollection></ChiCollection>
+      <ChiClone></ChiClone>
     </div>
   </div>
 </template>
@@ -32,6 +35,9 @@ import CloneView from "./components/CloneView.vue";
 import ChiGate from "./components/ChiGate.vue";
 import ChiWireld from "./components/ChiWireld.vue";
 import ChiGateway from "./components/ChiGateway.vue";
+import ChiDevice from "./components/ChiDevice.vue";
+import ChiCollection from "./components/ChiCollection.vue";
+import ChiClone from "./components/ChiClone.vue";
 export default {
   name: 'App',
   components: {
@@ -46,6 +52,9 @@ export default {
     ChiGate,
     ChiWireld,
     ChiGateway,
+    ChiDevice,
+    ChiCollection,
+    ChiClone,
   }
 }
 </script>
diff --git a/src/components/ChiClone.vue b/src/components/ChiClone.vue
new file mode 100644
index 0000000..1545093
--- /dev/null
+++ b/src/components/ChiClone.vue
@@ -0,0 +1,481 @@
+<!-- 斥候MQTT云 -->
+<template>
+    <div class="Clone">
+        <!-- 设置树形控件 -->
+        <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button>
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="datas" :props="defaultProps" @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </div>
+        <div class="pas_params" v-show="add_passage">
+            <div class="content">
+                <div class="con_left">
+                    <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item>
+                                    <el-checkbox v-model="checked1">启动</el-checkbox>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="server_ip">
+                                    <el-row>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                        <el-col :span="1">.
+                                        </el-col>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                        <el-col :span="1">.</el-col>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                        <el-col :span="1">.</el-col>
+                                        <el-col :span="5">
+                                            <el-input v-model="input1" style="width: 43px; height: 30px;"></el-input>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item label="网关ID:" :label-width="formLabelWidth" prop="gateway_id">
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="24">
+                                <el-form-item label="端口:" :label-width="formLabelWidth" prop="port_number">
+                                    <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="Keep Alive(s):" :label-width="formLabelWidth" prop="upload_week">
+                                    <el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-60000</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="TLS加密:" :label-width="formLabelWidth" prop="upload_week">
+                                    <el-switch v-model="value1"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="清除Session:" :label-width="formLabelWidth" prop="upload_week">
+                                    <el-switch v-model="value1"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <h3 class="info_play">信息发布</h3>
+                        <el-divider></el-divider>
+
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item>
+                                    <el-row>
+                                        <el-col :span="12">
+                                            <el-form-item label="Qos(MQTT):" :label-width="formLabelWidth"
+                                                prop="upload_week">
+                                                <el-select v-model="value" placeholder="请选择" style="width: 200px;">
+                                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                                        :value="item.value">
+                                                    </el-option>
+                                                </el-select>
+                                            </el-form-item>
+                                        </el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="retained">
+                                    <el-switch v-model="value1"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="入口函数:" :label-width="formLabelWidth" prop="upload_week">
+                                    <el-input v-model="input1" placeholder="64" 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="upload_week">
+                                    <prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter"
+                                        :line-numbers="lineNumbers"></prism-editor>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <div class="con_left_footer">
+                            <el-button type="primary" @click="choose_point = false">保 存</el-button>
+                            <el-button @click="choose_point = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
+                            @select="handleSelect">
+                            <el-menu-item index="1">添加</el-menu-item>
+                            <el-menu-item index="2">保存</el-menu-item>
+                            <el-menu-item index="3">删除</el-menu-item>
+                        </el-menu>
+                    </div>
+                    <el-table ref="singleTable" :data="tableData" style="width: 100%">
+                        <el-table-column type="index">
+                        </el-table-column>
+                        <el-table-column property="name" label="设备名称">
+                        </el-table-column>
+                        <el-table-column property="tag_id" label="TagID">
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+        </div>
+        <!-- 添加按钮下显示出来的弹框信息 -->
+        <div>
+            <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+                <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2, 3, 4, 5]"
+                    :default-checked-keys="[4, 5, 6, 7, 8, 9]" :props="defaultProps">
+                </el-tree>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="choose_point = false">保 存</el-button>
+                    <el-button @click="choose_point = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
+// import highlighting library (you can use any library you want just return html string)
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
+
+export default {
+    name: 'ChiClone',
+    components: {
+        PrismEditor
+    },
+    data() {
+        return {
+            code: 'console.log("Hello World")',
+            lineNumbers: true, // true为编辑模式， false只展示不可编辑
+            points: [{
+                id: 1,
+                label: '一级 1',
+                children: [{
+                    id: 4,
+                    label: '二级 1-1',
+                    children: [{
+                        id: 9,
+                        label: '三级 1-1-1'
+                    }, {
+                        id: 10,
+                        label: '三级 1-1-2'
+                    }]
+                }]
+            }, {
+                id: 2,
+                label: '一级 2',
+                children: [{
+                    id: 5,
+                    label: '二级 2-1',
+                    children: [{
+                        id: 11,
+                        label: '三级 2-1-1'
+                    }, {
+                        id: 12,
+                        label: '三级 2-1-2'
+                    }]
+                }, {
+                    id: 6,
+                    label: '二级 2-2'
+                }]
+            }, {
+                id: 3,
+                label: '一级 3',
+                children: [{
+                    id: 7,
+                    label: '二级 3-1'
+                }, {
+                    id: 8,
+                    label: '二级 3-2'
+                }]
+            }],
+            choose_point: false,
+            checkList: ['采集成功'],
+            checked1: "",
+            options: [{
+                value: '选项1',
+                label: '选项1'
+            }, {
+                value: '选项2',
+                label: '选项2'
+            }],
+            value: 'qos0',
+            activeIndex: '1',
+            value1: 0,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "114px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            datas: [{
+                label: '一级 1',
+                children: [{
+                    label: '二级 1-1',
+                    children: [{
+                        label: '三级 1-1-1'
+                    }]
+                }]
+            }, {
+                label: '一级 2',
+                children: [{
+                    label: '二级 2-1',
+                    children: [{
+                        label: '三级 2-1-1'
+                    }]
+                }, {
+                    label: '二级 2-2',
+                    children: [{
+                        label: '三级 2-2-1'
+                    }]
+                }]
+            }, {
+                label: '一级 3',
+                children: [{
+                    label: '二级 3-1',
+                    children: [{
+                        label: '三级 3-1-1'
+                    }]
+                }, {
+                    label: '二级 3-2',
+                    children: [{
+                        label: '三级 3-2-1'
+                    }]
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            tableData: [{
+                tag_id: 'tag0001',
+                name: '测试',
+            }],
+            rules: {
+                server_ip: [
+                    { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                port_number: [
+                    { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                gateway_id: [
+                    { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                data_theme: [
+                    { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                upload_mode: [
+                    { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                upload_week: [
+                    { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                data_filter: [
+                    { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        treeNodeClick() {
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        handleSelect(key) {
+            console.log(key);
+            if (key == 1) {
+                this.choose_point = true;
+            }
+        },
+        highlighter(code) {
+            return highlight(code, languages.js); //returns html
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    height: 753px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+    .info_play {
+        width: 56px;
+        height: 20px;
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        text-align: left;
+    }
+
+    .el-divider--horizontal {
+        margin: 8px 0;
+    }
+
+    .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: 28px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            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: 104px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        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;
+
+            .my-editor {
+                background: #2d2d2d;
+                color: #ccc;
+
+                font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+                font-size: 14px;
+                line-height: 1.5;
+                padding: 5px;
+            }
+
+            /* optional */
+            .prism-editor__textarea:focus {
+                outline: none;
+            }
+
+            /* not required: */
+            .height-300 {
+                width:491px;
+                height: 300px;
+            }
+
+            .infos {
+                width: 60px;
+                position: absolute;
+                left: 208px;
+                top: 0;
+            }
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 720px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ChiCollection.vue b/src/components/ChiCollection.vue
new file mode 100644
index 0000000..4b52aa6
--- /dev/null
+++ b/src/components/ChiCollection.vue
@@ -0,0 +1,271 @@
+<!-- 采集点收集 -->
+<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>
+</template>
+
+<script>
+export default {
+    name: 'ChiCollection',
+
+    data() {
+        return {
+
+            activeIndex: '1',
+            value1: 1,
+            checked: "",
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            datas: [{
+                label: '一级 1',
+                children: [{
+                    label: '二级 1-1',
+                    children: [{
+                        label: '三级 1-1-1'
+                    }]
+                }]
+            }, {
+                label: '一级 2',
+                children: [{
+                    label: '二级 2-1',
+                    children: [{
+                        label: '三级 2-1-1'
+                    }]
+                }, {
+                    label: '二级 2-2',
+                    children: [{
+                        label: '三级 2-2-1'
+                    }]
+                }]
+            }, {
+                label: '一级 3',
+                children: [{
+                    label: '二级 3-1',
+                    children: [{
+                        label: '三级 3-1-1'
+                    }]
+                }, {
+                    label: '二级 3-2',
+                    children: [{
+                        label: '三级 3-2-1'
+                    }]
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            selectOptions: [],
+            tableData: [{
+                tag_id: 'tag0001',
+                name: '测试',
+                datas: "",
+                address: '1',
+                order: 'NUll',
+                type: "boolean",
+                attribute: "读写",
+                count: 1,
+            }],
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        treeNodeClick() {
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        handleSelect(key, keyPath) {
+            console.log(key, keyPath);
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    height: 753px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 95px;
+    width: 1066px;
+    height: 752px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ChiDevice.vue b/src/components/ChiDevice.vue
new file mode 100644
index 0000000..cfbf248
--- /dev/null
+++ b/src/components/ChiDevice.vue
@@ -0,0 +1,459 @@
+<!-- 斥候的通道配置 -->
+<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="902px">
+                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="device_name">
+                                <el-input 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="drive_name">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"
+                                            disabled></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px;" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="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-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-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="从站地址:" :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="port_number">
+                                <el-input v-model="input1" placeholder="" style="width: 200px;height:30px"></el-input>
+                                <div class="infos">1-3600</div>
+                            </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;
+                    color: rgba(16, 16, 16, 1);font-size: 14px;text-align: left; border: none;">
+                            收起</el-button>
+                    </div>
+                </div>
+                <el-divider></el-divider>
+                <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 label="启用毫秒采集:" :label-width="formLabelWidth" prop="port_number">
+                                    <el-switch v-model="val1" @change="changeSwitch"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="port_number">
+                                    <el-switch v-model="val2" @change="changeSwitch"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="最大批量采集数:" label-width="126px" prop="port_number">
+                                    <el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-125</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="采集超过时间(ms):" label-width="140px" prop="port_number">
+                                    <el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-60000</div>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="周期上报OnChange数据:" label-width="186px" prop="port_number">
+                                    <el-switch v-model="val3"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="port_number">
+                                    <el-input v-model="input1" placeholder="64" style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">0-1000</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <div class="footer_con">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;">
+                                        <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="120px">
+                                        <el-select v-model="value" placeholder="" style="width: 200px;height:30px">
+                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                                :value="item.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="add_passage = false">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All">
+            <el-dialog title="提示" :visible.sync="diag_drive" width="435px">
+                <el-tree :data="datas" :props="defaultProps"></el-tree>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ChiDevice',
+
+    data() {
+        return {
+            val1: true,
+            val2: false,
+            val3: false,
+            diag_drive: false,
+            options: [{
+                value: '选项1',
+                label: '测试1'
+            }, {
+                value: '选项2',
+                label: '测试2'
+            }, {
+                value: '选项3',
+                label: '测试3'
+            }, {
+                value: '选项4',
+                label: '测试4'
+            }, {
+                value: '选项5',
+                label: '测试5'
+            }],
+            value: '网口',
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            checked2: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: false,
+            menuShow: false,
+            datas: [{
+                label: '一级 1',
+                children: [{
+                    label: '二级 1-1',
+                    children: [{
+                        label: '三级 1-1-1'
+                    }]
+                }]
+            }, {
+                label: '一级 2',
+                children: [{
+                    label: '二级 2-1',
+                    children: [{
+                        label: '三级 2-1-1'
+                    }]
+                }, {
+                    label: '二级 2-2',
+                    children: [{
+                        label: '三级 2-2-1'
+                    }]
+                }]
+            }, {
+                label: '一级 3',
+                children: [{
+                    label: '二级 3-1',
+                    children: [{
+                        label: '三级 3-1-1'
+                    }]
+                }, {
+                    label: '二级 3-2',
+                    children: [{
+                        label: '三级 3-2-1'
+                    }]
+                }]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                device_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' },
+                ],
+                repeate_count: [
+                    { required: true, message: '请输入重复次数', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        rightClick(e, data, node) {
+            this.menuShow = false
+            this.menuShow = true
+            e.preventDefault() //关闭浏览器右键默认事件
+            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+            document.addEventListener('click', (ev) => {
+                ev.stopImmediatePropagation()
+                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                    this.foo()
+                }
+            })
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false
+            document.removeEventListener('click', this.foo) // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo()
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        changeSwitch() {
+            this.val1 = !this.val2;
+        }
+    },
+    watch: {
+        checked1: {
+            handler(old,) {
+                if (old) {
+                    this.isdisabled = false;
+                } else {
+                    this.isdisabled = true;
+                }
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    height: 753px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-form-item {
+        margin-bottom: 0px;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 102px;
+    }
+
+    .el-divider--horizontal {
+        margin: 8px 0px;
+    }
+
+    .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;
+        }
+    }
+}
+
+/deep/ .super_con {
+
+    .el-form-item {
+        margin-bottom: 7px;
+    }
+
+    .el-row {
+        display: flex;
+        align-items: flex-end;
+    }
+
+    .coil {
+        display: inline-block;
+        width: 98px;
+        height: 25px;
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        text-align: left;
+    }
+}
+
+.infos {
+    width: 60px;
+    position: absolute;
+    left: 208px;
+    top: 0;
+}
+
+/deep/ .footer_con {
+    .el-form-item__label {
+        line-height: 20px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ChiGate.vue b/src/components/ChiGate.vue
index 65b4955..bcb9d13 100644
--- a/src/components/ChiGate.vue
+++ b/src/components/ChiGate.vue
@@ -51,7 +51,7 @@
                     </el-row>
                     <div class="footer">
                         <el-button type="primary">保 存</el-button>
-                        <el-button>取 消</el-button>
+                        <el-button @click="isShow = false">取 消</el-button>
                     </div>
                 </el-form>
             </div>
@@ -115,7 +115,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/ .gateway {
+ .gateway {
     position: absolute;
     left: 648px;
     top: 226px;
diff --git a/src/components/ChiGateway.vue b/src/components/ChiGateway.vue
index 07e4c51..e84e64c 100644
--- a/src/components/ChiGateway.vue
+++ b/src/components/ChiGateway.vue
@@ -12,7 +12,7 @@
                 <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
                     <el-row>
                         <el-col :span="24">
-                            <el-form-item label="网关名称:" :label-width="formLabelWidth" prop="client_id">
+                            <el-form-item label="网关名称:" :label-width="formLabelWidth" prop="gateway_name">
                                 <el-input v-model="value" placeholder=""></el-input>
                             </el-form-item>
                         </el-col>
@@ -32,12 +32,22 @@
                         </el-col>
                     </el-row>
                     <div class="footer">
-                        <el-button type="primary">保 存</el-button>
+                        <el-button type="primary" @click="innerVisible = true">保 存</el-button>
+
                         <el-button>取 消</el-button>
                     </div>
                 </el-form>
             </div>
         </div>
+        <div>
+            <el-dialog title="系统提示" :visible.sync="innerVisible" append-to-body width="382px">
+                <p class="inner_content">请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关</p>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="innerVisible = false">确定</el-button>
+                    <el-button @click="innerVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
     </div>
 </template>
 
@@ -47,6 +57,7 @@ export default {
 
     data() {
         return {
+            innerVisible: false,
             labelPosition: "left",
             formLabelWidth: "116px",
             value: "测试",
diff --git a/src/components/ChiWireld.vue b/src/components/ChiWireld.vue
index 6c507ee..2d447a7 100644
--- a/src/components/ChiWireld.vue
+++ b/src/components/ChiWireld.vue
@@ -170,7 +170,7 @@
                     </div>
                     <div class="footer">
                         <el-button type="primary">保 存</el-button>
-                        <el-button>取 消</el-button>
+                        <el-button @click="isShow = false">取 消</el-button>
                     </div>
                 </el-form>
             </div>
diff --git a/src/components/DataAcquisition.vue b/src/components/DataAcquisition.vue
index 36a683b..8d18a83 100644
--- a/src/components/DataAcquisition.vue
+++ b/src/components/DataAcquisition.vue
@@ -4,7 +4,7 @@
             <el-button type="info" plain @click="outerVisible = true">数据采集设备</el-button>
         </div>
         <div>
-            <el-dialog title="新建网关" :visible.sync="outerVisible" center>
+            <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px">
                 <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="85px" class="demo-ruleForm">
                     <el-form-item label="网关名称:" prop="name">
                         <el-input v-model="formdata.name" placeholder="" style="width: 200px;"></el-input>
@@ -100,6 +100,4 @@ export default {
     text-align: left;
     font-family: SourceHanSansSC-regular;
 }
-.dialog-footer-outer{
-}
 </style>
\ No newline at end of file
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index 0960f6c..b4c4d62 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -352,6 +352,26 @@ export default {
                 }
             }
         }
+    },
+      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>