diff --git a/.history/src/components/ChiClone_20231111175728.vue b/.history/src/components/ChiClone_20231111175728.vue
new file mode 100644
index 0000000..749ab74
--- /dev/null
+++ b/.history/src/components/ChiClone_20231111175728.vue
@@ -0,0 +1,875 @@
+<!-- 斥候MQTT云 -->
+<template>
+  <div class="Clone">
+    <!-- 设置树形控件 -->
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div class="content">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启用</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveIp">
+              <el-col :span="24">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" 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="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_keepalive" placeholder=""
+                    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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_sssjfbzt" 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="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
+                  <el-switch v-model="formData.mqtt_tls"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
+                  <el-switch v-model="formData.mqtt_clearsession"></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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
+                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-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="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">标准MQTT采集点</h3>
+            <el-divider></el-divider>
+
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+              <el-menu-item index="1">添加</el-menu-item>
+              <el-menu-item index="2">保存</el-menu-item>
+              <el-menu-item index="3">删除</el-menu-item>
+            </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+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 {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: false,
+        mqtt_ip: "",
+        mqtt_wgsn: "",
+        mqtt_port: "",
+        mqtt_keepalive: "",
+        mqtt_sssjfbzt: "",
+        // mqtt_tls: false,
+        // mqtt_clearsession: false,
+        mqtt_qos: "0",
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      // mqtt_sssjfbzt:"",
+
+      // code: 'console.log("Hello World")',
+      // lineNumbers: true, // true为编辑模式， false只展示不可编辑
+      points: [
+        {
+          id: 1,
+          label: "Device1",
+          children: [
+            {
+              id: 3,
+              label: "tag0001",
+            },
+            {
+              id: 4,
+              label: "tag0002",
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "Device1",
+          children: [
+            {
+              id: 5,
+              label: "tag0003",
+            },
+            {
+              id: 6,
+              label: "tag0004",
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      options1: [
+        {
+          value: "0",
+          label: "0",
+        },
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+      ],
+      labelPosition: "left",
+      formLabelWidth: "145px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "上云服务",
+              children: [
+                {
+                  label: "标准 MQTT",
+                },
+                {
+                  label: "AWS loT",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关SN", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "请输入KeepAlive", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        // data_filter: [
+        //   { required: true, message: "请输入数据过滤", trigger: "blur" },
+        // ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    GetTree({
+      user_id: this.user_id,
+      type: "3",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+  },
+  methods: {
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key) {
+      console.log(key);
+      if (key == 1 && this.isAdd == false) {
+        this.choose_point = true;
+      } else if (key == 1 && this.isAdd == true) {
+        this.$message({
+          message: "添加失败,只能添加一条数据",
+          type: "error",
+        });
+        return false;
+      }
+    },
+    highlighter(code) {
+      return highlight(code, languages.js); //returns html
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      var obj = {
+        // mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_keepalive: this.formData.mqtt_keepalive,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+        sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        // console.log(JSON.parse(data.data.mark_value));
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.mqtt_ip) {
+          // this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          // console.log(obj.mqtt_qiyong);
+          // console.log(this.formData.mqtt_qiyong);
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_keepalive = obj.mqtt_keepalive;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "3",
+      })
+      console.log(result);
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .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-24 {
+    padding-right: 348px;
+  }
+
+
+  .el-row {
+    height: 54px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      color: white;
+      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;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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: 20px !important;
+    }
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+    }
+
+    .con_left {
+      width: 706px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid rgba(187, 187, 187, 1);
+
+      .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;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .serveIp {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
diff --git a/.history/src/components/ChiClone_20231111181414.vue b/.history/src/components/ChiClone_20231111181414.vue
new file mode 100644
index 0000000..f283b6e
--- /dev/null
+++ b/.history/src/components/ChiClone_20231111181414.vue
@@ -0,0 +1,875 @@
+<!-- 斥候MQTT云 -->
+<template>
+  <div class="Clone">
+    <!-- 设置树形控件 -->
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div class="content">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启用</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveIp">
+              <el-col :span="24">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" 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="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_keepalive" placeholder=""
+                    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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_sssjfbzt" 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="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
+                  <el-switch v-model="formData.mqtt_tls"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
+                  <el-switch v-model="formData.mqtt_clearsession"></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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
+                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-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="submitForm">保 存</el-button>
+              <el-button @click="add_passage = true">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">标准MQTT采集点</h3>
+            <el-divider></el-divider>
+
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+              <el-menu-item index="1">添加</el-menu-item>
+              <el-menu-item index="2">保存</el-menu-item>
+              <el-menu-item index="3">删除</el-menu-item>
+            </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+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 {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: false,
+        mqtt_ip: "",
+        mqtt_wgsn: "",
+        mqtt_port: "",
+        mqtt_keepalive: "",
+        mqtt_sssjfbzt: "",
+        // mqtt_tls: false,
+        // mqtt_clearsession: false,
+        mqtt_qos: "0",
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      // mqtt_sssjfbzt:"",
+
+      // code: 'console.log("Hello World")',
+      // lineNumbers: true, // true为编辑模式， false只展示不可编辑
+      points: [
+        {
+          id: 1,
+          label: "Device1",
+          children: [
+            {
+              id: 3,
+              label: "tag0001",
+            },
+            {
+              id: 4,
+              label: "tag0002",
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "Device1",
+          children: [
+            {
+              id: 5,
+              label: "tag0003",
+            },
+            {
+              id: 6,
+              label: "tag0004",
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      options1: [
+        {
+          value: "0",
+          label: "0",
+        },
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+      ],
+      labelPosition: "left",
+      formLabelWidth: "145px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "上云服务",
+              children: [
+                {
+                  label: "标准 MQTT",
+                },
+                {
+                  label: "AWS loT",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关SN", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "请输入KeepAlive", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        // data_filter: [
+        //   { required: true, message: "请输入数据过滤", trigger: "blur" },
+        // ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    GetTree({
+      user_id: this.user_id,
+      type: "3",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+  },
+  methods: {
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key) {
+      console.log(key);
+      if (key == 1 && this.isAdd == false) {
+        this.choose_point = true;
+      } else if (key == 1 && this.isAdd == true) {
+        this.$message({
+          message: "添加失败,只能添加一条数据",
+          type: "error",
+        });
+        return false;
+      }
+    },
+    highlighter(code) {
+      return highlight(code, languages.js); //returns html
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      var obj = {
+        // mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_keepalive: this.formData.mqtt_keepalive,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+        sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        // console.log(JSON.parse(data.data.mark_value));
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.mqtt_ip) {
+          // this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          // console.log(obj.mqtt_qiyong);
+          // console.log(this.formData.mqtt_qiyong);
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_keepalive = obj.mqtt_keepalive;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "3",
+      })
+      console.log(result);
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .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-24 {
+    padding-right: 348px;
+  }
+
+
+  .el-row {
+    height: 54px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      color: white;
+      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;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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: 20px !important;
+    }
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+    }
+
+    .con_left {
+      width: 706px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid rgba(187, 187, 187, 1);
+
+      .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;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .serveIp {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
diff --git a/.history/src/components/ChiClone_20231111181603.vue b/.history/src/components/ChiClone_20231111181603.vue
new file mode 100644
index 0000000..f283b6e
--- /dev/null
+++ b/.history/src/components/ChiClone_20231111181603.vue
@@ -0,0 +1,875 @@
+<!-- 斥候MQTT云 -->
+<template>
+  <div class="Clone">
+    <!-- 设置树形控件 -->
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div class="content">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启用</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveIp">
+              <el-col :span="24">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" 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="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_keepalive" placeholder=""
+                    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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_sssjfbzt" 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="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
+                  <el-switch v-model="formData.mqtt_tls"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
+                  <el-switch v-model="formData.mqtt_clearsession"></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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
+                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-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="submitForm">保 存</el-button>
+              <el-button @click="add_passage = true">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">标准MQTT采集点</h3>
+            <el-divider></el-divider>
+
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+              <el-menu-item index="1">添加</el-menu-item>
+              <el-menu-item index="2">保存</el-menu-item>
+              <el-menu-item index="3">删除</el-menu-item>
+            </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+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 {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: false,
+        mqtt_ip: "",
+        mqtt_wgsn: "",
+        mqtt_port: "",
+        mqtt_keepalive: "",
+        mqtt_sssjfbzt: "",
+        // mqtt_tls: false,
+        // mqtt_clearsession: false,
+        mqtt_qos: "0",
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      // mqtt_sssjfbzt:"",
+
+      // code: 'console.log("Hello World")',
+      // lineNumbers: true, // true为编辑模式， false只展示不可编辑
+      points: [
+        {
+          id: 1,
+          label: "Device1",
+          children: [
+            {
+              id: 3,
+              label: "tag0001",
+            },
+            {
+              id: 4,
+              label: "tag0002",
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "Device1",
+          children: [
+            {
+              id: 5,
+              label: "tag0003",
+            },
+            {
+              id: 6,
+              label: "tag0004",
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      options1: [
+        {
+          value: "0",
+          label: "0",
+        },
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+      ],
+      labelPosition: "left",
+      formLabelWidth: "145px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "上云服务",
+              children: [
+                {
+                  label: "标准 MQTT",
+                },
+                {
+                  label: "AWS loT",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关SN", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "请输入KeepAlive", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        // data_filter: [
+        //   { required: true, message: "请输入数据过滤", trigger: "blur" },
+        // ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    GetTree({
+      user_id: this.user_id,
+      type: "3",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+  },
+  methods: {
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key) {
+      console.log(key);
+      if (key == 1 && this.isAdd == false) {
+        this.choose_point = true;
+      } else if (key == 1 && this.isAdd == true) {
+        this.$message({
+          message: "添加失败,只能添加一条数据",
+          type: "error",
+        });
+        return false;
+      }
+    },
+    highlighter(code) {
+      return highlight(code, languages.js); //returns html
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      var obj = {
+        // mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_keepalive: this.formData.mqtt_keepalive,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+        sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        // console.log(JSON.parse(data.data.mark_value));
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.mqtt_ip) {
+          // this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          // console.log(obj.mqtt_qiyong);
+          // console.log(this.formData.mqtt_qiyong);
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_keepalive = obj.mqtt_keepalive;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "3",
+      })
+      console.log(result);
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .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-24 {
+    padding-right: 348px;
+  }
+
+
+  .el-row {
+    height: 54px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      color: white;
+      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;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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: 20px !important;
+    }
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+    }
+
+    .con_left {
+      width: 706px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid rgba(187, 187, 187, 1);
+
+      .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;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .serveIp {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
diff --git a/.history/src/components/ChiClone_20231111184154.vue b/.history/src/components/ChiClone_20231111184154.vue
new file mode 100644
index 0000000..6e27b03
--- /dev/null
+++ b/.history/src/components/ChiClone_20231111184154.vue
@@ -0,0 +1,875 @@
+<!-- 斥候MQTT云 -->
+<template>
+  <div class="Clone">
+    <!-- 设置树形控件 -->
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div class="content">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启用</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveIp">
+              <el-col :span="24">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" 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="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_keepalive" placeholder=""
+                    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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_sssjfbzt" 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="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
+                  <el-switch v-model="formData.mqtt_tls"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
+                  <el-switch v-model="formData.mqtt_clearsession"></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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
+                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-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="submitForm">保 存</el-button>
+              <el-button @click="add_passage = true">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">标准MQTT采集点</h3>
+            <el-divider></el-divider>
+
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+              <el-menu-item index="1">添加</el-menu-item>
+              <el-menu-item index="2">保存</el-menu-item>
+              <el-menu-item index="3">删除</el-menu-item>
+            </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+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 {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: false,
+        mqtt_ip: "",
+        mqtt_wgsn: "",
+        mqtt_port: "",
+        mqtt_keepalive: "",
+        mqtt_sssjfbzt: "",
+        // mqtt_tls: false,
+        // mqtt_clearsession: false,
+        mqtt_qos: "0",
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      // mqtt_sssjfbzt:"",
+
+      // code: 'console.log("Hello World")',
+      // lineNumbers: true, // true为编辑模式， false只展示不可编辑
+      points: [
+        {
+          id: 1,
+          label: "Device1",
+          children: [
+            {
+              id: 3,
+              label: "tag0001",
+            },
+            {
+              id: 4,
+              label: "tag0002",
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "Device1",
+          children: [
+            {
+              id: 5,
+              label: "tag0003",
+            },
+            {
+              id: 6,
+              label: "tag0004",
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      options1: [
+        {
+          value: "0",
+          label: "0",
+        },
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+      ],
+      labelPosition: "left",
+      formLabelWidth: "145px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "上云服务",
+              children: [
+                {
+                  label: "标准 MQTT",
+                },
+                {
+                  label: "AWS loT",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关SN", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "请输入KeepAlive", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        // data_filter: [
+        //   { required: true, message: "请输入数据过滤", trigger: "blur" },
+        // ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    GetTree({
+      user_id: this.user_id,
+      type: "3",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+  },
+  methods: {
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key) {
+      console.log(key);
+      if (key == 1 && this.isAdd == false) {
+        this.choose_point = true;
+      } else if (key == 1 && this.isAdd == true) {
+        this.$message({
+          message: "添加失败,只能添加一条数据",
+          type: "error",
+        });
+        return false;
+      }
+    },
+    highlighter(code) {
+      return highlight(code, languages.js); //returns html
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      var obj = {
+        // mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_keepalive: this.formData.mqtt_keepalive,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+        sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        // console.log(JSON.parse(data.data.mark_value));
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.mqtt_ip) {
+          // this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          // console.log(obj.mqtt_qiyong);
+          // console.log(this.formData.mqtt_qiyong);
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_keepalive = obj.mqtt_keepalive;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "3",
+      })
+      console.log(result);
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .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-24 {
+    padding-right: 348px;
+  }
+
+
+  .el-row {
+    height: 54px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      color: white;
+      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;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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: 20px !important;
+    }
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+    }
+
+    .con_left {
+      width: 706px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid rgba(187, 187, 187, 1);
+
+      .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;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .serveIp {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
diff --git a/.history/src/components/ChiClonewifi_20231111175953.vue b/.history/src/components/ChiClonewifi_20231111175953.vue
new file mode 100644
index 0000000..84e7b81
--- /dev/null
+++ b/.history/src/components/ChiClonewifi_20231111175953.vue
@@ -0,0 +1,871 @@
+<!-- 斥候MQTT云 -->
+<template>
+  <div class="Clone">
+    <!-- 设置树形控件 -->
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div class="content">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启用</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveIp">
+              <el-col :span="24">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" 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="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_keepalive" placeholder=""
+                    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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_sssjfbzt" 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="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
+                  <el-switch v-model="formData.mqtt_tls"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
+                  <el-switch v-model="formData.mqtt_clearsession"></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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
+                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-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="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">标准MQTT采集点</h3>
+            <el-divider></el-divider>
+
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+              <el-menu-item index="1">添加</el-menu-item>
+              <el-menu-item index="2">保存</el-menu-item>
+              <el-menu-item index="3">删除</el-menu-item>
+            </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+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: "ChiClonewifi",
+  components: {
+    PrismEditor,
+  },
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: true,
+        mqtt_ip: "",
+        mqtt_wgsn: "",
+        mqtt_port: "",
+        mqtt_keepalive: "",
+        mqtt_sssjfbzt: "",
+        // mqtt_tls: false,
+        // mqtt_clearsession: false,
+        mqtt_qos: "0",
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      // mqtt_sssjfbzt:"",
+
+      // code: 'console.log("Hello World")',
+      // lineNumbers: true, // true为编辑模式， false只展示不可编辑
+      points: [
+        {
+          id: 1,
+          label: "Device1",
+          children: [
+            {
+              id: 3,
+              label: "tag0001",
+            },
+            {
+              id: 4,
+              label: "tag0002",
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "Device1",
+          children: [
+            {
+              id: 5,
+              label: "tag0003",
+            },
+            {
+              id: 6,
+              label: "tag0004",
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      options1: [
+        {
+          value: "0",
+          label: "0",
+        },
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+      ],
+      labelPosition: "left",
+      formLabelWidth: "145px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "上云服务",
+              children: [
+                {
+                  label: "标准 MQTT",
+                },
+                {
+                  label: "AWS loT",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关SN", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "请输入KeepAlive", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    GetTree({
+      user_id: this.user_id,
+      type: "4",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+  },
+  methods: {
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key) {
+      console.log(key);
+      if (key == 1 && this.isAdd == false) {
+        this.choose_point = true;
+      } else if (key == 1 && this.isAdd == true) {
+        this.$message({
+          message: "添加失败,只能添加一条数据",
+          type: "error",
+        });
+        return false;
+      }
+    },
+    highlighter(code) {
+      return highlight(code, languages.js); //returns html
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      var obj = {
+        mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_keepalive: this.formData.mqtt_keepalive,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      // console.log(JSON.parse(data.data.mark_value));
+      if (data.data && data.state) {
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.mqtt_ip) {
+          this.formData.mqtt_qiyong = obj.mqtt_qiyong;
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_keepalive = obj.mqtt_keepalive;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "4",
+      })
+      console.log(result);
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .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-24 {
+    padding-right: 348px;
+  }
+
+
+  .el-row {
+    height: 54px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      color: white;
+      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;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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: 20px !important;
+    }
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+    }
+
+    .con_left {
+      width: 706px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid rgba(187, 187, 187, 1);
+
+      .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;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .serveIp {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+.mqtt {
+  margin-left: 20px;
+}
+</style>
+
diff --git a/.history/src/components/ChiClonewifi_20231111184207.vue b/.history/src/components/ChiClonewifi_20231111184207.vue
new file mode 100644
index 0000000..4f94f1d
--- /dev/null
+++ b/.history/src/components/ChiClonewifi_20231111184207.vue
@@ -0,0 +1,871 @@
+<!-- 斥候MQTT云 -->
+<template>
+  <div class="Clone">
+    <!-- 设置树形控件 -->
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥侯MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div class="content">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">标准 MQTT</h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启用</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveIp">
+              <el-col :span="24">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关SN:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" 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="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_keepalive" placeholder=""
+                    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="实施数据发布主题:" :label-width="formLabelWidth" prop="mqtt_keepalive">
+                  <el-input v-model="formData.mqtt_sssjfbzt" 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="TLS加密:" :label-width="formLabelWidth" prop="mqtt_tls">
+                  <el-switch v-model="formData.mqtt_tls"></el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="清除Session:" :label-width="formLabelWidth" prop="mqtt_clearsession">
+                  <el-switch v-model="formData.mqtt_clearsession"></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="formData.mqtt_qos" placeholder="请选择" style="width: 200px">
+                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </el-form-item>
+                    </el-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="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">标准MQTT采集点</h3>
+            <el-divider></el-divider>
+
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+              <el-menu-item index="1">添加</el-menu-item>
+              <el-menu-item index="2">保存</el-menu-item>
+              <el-menu-item index="3">删除</el-menu-item>
+            </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+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: "ChiClonewifi",
+  components: {
+    PrismEditor,
+  },
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: true,
+        mqtt_ip: "",
+        mqtt_wgsn: "",
+        mqtt_port: "",
+        mqtt_keepalive: "",
+        mqtt_sssjfbzt: "",
+        // mqtt_tls: false,
+        // mqtt_clearsession: false,
+        mqtt_qos: "0",
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      // mqtt_sssjfbzt:"",
+
+      // code: 'console.log("Hello World")',
+      // lineNumbers: true, // true为编辑模式， false只展示不可编辑
+      points: [
+        {
+          id: 1,
+          label: "Device1",
+          children: [
+            {
+              id: 3,
+              label: "tag0001",
+            },
+            {
+              id: 4,
+              label: "tag0002",
+            },
+          ],
+        },
+        {
+          id: 2,
+          label: "Device1",
+          children: [
+            {
+              id: 5,
+              label: "tag0003",
+            },
+            {
+              id: 6,
+              label: "tag0004",
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      options1: [
+        {
+          value: "0",
+          label: "0",
+        },
+        {
+          value: "1",
+          label: "1",
+        },
+        {
+          value: "2",
+          label: "2",
+        },
+      ],
+      labelPosition: "left",
+      formLabelWidth: "145px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "上云服务",
+              children: [
+                {
+                  label: "标准 MQTT",
+                },
+                {
+                  label: "AWS loT",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关SN", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "请输入KeepAlive", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    GetTree({
+      user_id: this.user_id,
+      type: "4",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+  },
+  methods: {
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    handleSelect(key) {
+      console.log(key);
+      if (key == 1 && this.isAdd == false) {
+        this.choose_point = true;
+      } else if (key == 1 && this.isAdd == true) {
+        this.$message({
+          message: "添加失败,只能添加一条数据",
+          type: "error",
+        });
+        return false;
+      }
+    },
+    highlighter(code) {
+      return highlight(code, languages.js); //returns html
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      var obj = {
+        mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_keepalive: this.formData.mqtt_keepalive,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      // console.log(JSON.parse(data.data.mark_value));
+      if (data.data && data.state) {
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.mqtt_ip) {
+          this.formData.mqtt_qiyong = obj.mqtt_qiyong;
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_keepalive = obj.mqtt_keepalive;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "4",
+      })
+      console.log(result);
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .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-24 {
+    padding-right: 348px;
+  }
+
+
+  .el-row {
+    height: 54px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      color: white;
+      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;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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: 20px !important;
+    }
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+    }
+
+    .con_left {
+      width: 706px;
+      height: 100%;
+      position: relative;
+      border-right: 1px solid rgba(187, 187, 187, 1);
+
+      .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;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .serveIp {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+.mqtt {
+  margin-left: 20px;
+}
+</style>
+
diff --git a/.history/src/components/ChiCollection_20231111184216.vue b/.history/src/components/ChiCollection_20231111184216.vue
new file mode 100644
index 0000000..e59dcb0
--- /dev/null
+++ b/.history/src/components/ChiCollection_20231111184216.vue
@@ -0,0 +1,758 @@
+<!-- 采集点收集 -->
+<template>
+  <div>
+    <!-- 设置树形控件 -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div>
+        <el-button type="info" plain @click="handleSelect">保存</el-button>
+        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <el-menu-item index="2">保存</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="cjdpz_tagid" label="TagID">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+              <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_mc" label="名称">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+              <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_jcqdz" label="地址">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_dz" placeholder="0X">
+              <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+          <template slot-scope="scope">
+            <!-- <el-select v-model="scope.row.cjdpz_jcqdz" placeholder="1">
+              <el-option v-for="(option,index) in options4" :key="index" :label="option.label" :value="option.value"></el-option>
+            </el-select> -->
+            <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="bool">
+              <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column property="cjdpz_dxsx" label="读写属性">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_dxsx" placeholder="读写">
+              <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_scms" label="上传模式">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_scms" placeholder="读写">
+              <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_dw" label="单位">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.cjdpz_dw" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+  name: "ChiCollection",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: '',
+      trees: [],
+      options1: [{
+        value: "MachinePamHID909",
+        label: "MachinePamHID909",
+      }, {
+        value: "MachinePamHID910",
+        label: "MachinePamHID910",
+      }, {
+        value: "MachinePamHID911",
+        label: "MachinePamHID911",
+      }, {
+        value: "MachinePamHID912",
+        label: "MachinePamHID912",
+      }, {
+        value: "MachinePamHID913",
+        label: "MachinePamHID913",
+      }, {
+        value: "MachinePamHID914",
+        label: "MachinePamHID914",
+      }, {
+        value: "MachinePamHID915",
+        label: "MachinePamHID915",
+      }, {
+        value: "MachinePamHID916",
+        label: "MachinePamHID916",
+      }, {
+        value: "MachinePamHID917",
+        label: "MachinePamHID917",
+      }, {
+        value: "MachinePamHID918",
+        label: "MachinePamHID918",
+      }, {
+        value: "MachinePamHID919",
+        label: "MachinePamHID919",
+      }, {
+        value: "MachinePamHID920",
+        label: "MachinePamHID920",
+      }, {
+        value: "MachinePamHID921",
+        label: "MachinePamHID921",
+      }, {
+        value: "MachinePamHID922",
+        label: "MachinePamHID922",
+      }, {
+        value: "MachinePamHID923",
+        label: "MachinePamHID923",
+      }, {
+        value: "MachinePamHID924",
+        label: "MachinePamHID924",
+      }, {
+        value: "MachinePamHID925",
+        label: "MachinePamHID925",
+      }, {
+        value: "MachinePamHID926",
+        label: "MachinePamHID926",
+      }, {
+        value: "MachinePamHID927",
+        label: "MachinePamHID927",
+      }, {
+        value: "MachinePamHID928",
+        label: "MachinePamHID928",
+      }, {
+        value: "MachinePamHID929",
+        label: "MachinePamHID929",
+      }, {
+        value: "MachinePamHID930",
+        label: "MachinePamHID930",
+      }, {
+        value: "MachinePamHID931",
+        label: "MachinePamHID931",
+      }, {
+        value: "MachinePamHID932",
+        label: "MachinePamHID932",
+      }, {
+        value: "MachinePamHID933",
+        label: "MachinePamHID933",
+      }, {
+        value: "MachinePamHID934",
+        label: "MachinePamHID934",
+      }, {
+        value: "MachinePamHID935",
+        label: "MachinePamHID935",
+      }, {
+        value: "MachinePamHID936",
+        label: "MachinePamHID936",
+      }, {
+        value: "MachinePamHID937",
+        label: "MachinePamHID937",
+      }, {
+        value: "MachinePamHID938",
+        label: "MachinePamHID938",
+      }],
+      options2: [{
+        value: "急停状态",
+        label: "急停状态",
+      }, {
+        value: "产量",
+        label: "产量",
+      },
+      {
+        value: "相对位置X",
+        label: "相对位置X",
+      },
+      {
+        value: "相对位置Y",
+        label: "相对位置Y",
+      },
+      {
+        value: "相对位置Z",
+        label: "相对位置Z",
+      },
+      {
+        value: "实际位置X",
+        label: "实际位置X",
+      },
+      {
+        value: "实际位置Y",
+        label: "实际位置Y",
+      },
+      {
+        value: "实际位置Z",
+        label: "实际位置Z",
+      },
+      {
+        value: "主轴转速",
+        label: "主轴转速",
+      },
+      {
+        value: "当前刀具",
+        label: "当前刀具",
+      },
+      {
+        value: "预选刀具",
+        label: "预选刀具",
+      },
+      {
+        value: "报警信息",
+        label: "报警信息",
+      },
+      {
+        value: "驱动单元电流",
+        label: "驱动单元电流",
+      },
+      {
+        value: "负载电流",
+        label: "负载电流",
+      },
+      {
+        value: "额定电流",
+        label: "额定电流",
+      },
+      {
+        value: "运行时间",
+        label: "运行时间",
+      },
+      {
+        value: "加工产品用时",
+        label: "加工产品用时",
+      },
+      {
+        value: "工作模式",
+        label: "工作模式",
+      },
+      {
+        value: "切削速度",
+        label: "切削速度",
+      },
+      {
+        value: "任务信息",
+        label: "任务信息",
+      },
+      {
+        value: "使能状态",
+        label: "使能状态",
+      },
+      {
+        value: "系统状态",
+        label: "系统状态",
+      },
+      {
+        value: "执行任务信息",
+        label: "执行任务信息",
+      },
+      {
+        value: "进给倍军",
+        label: "进给倍军",
+      },
+      {
+        value: "轴速度",
+        label: "轴速度",
+      },
+      {
+        value: "轴角度",
+        label: "轴角度",
+      },
+      {
+        value: "进给速度",
+        label: "进给速度",
+      }],
+      options3: [{
+        value: "0X (Coil Status)",
+        label: "0X (Coil Status)"
+      },
+      {
+        value: "1X (Input Status)",
+        label: "1X (Input Status)"
+      }, {
+        value: "3X (Input Registers)",
+        label: "3X (Input Registers)"
+      },
+      {
+        value: "4X (Holding Register)",
+        label: "4X (Holding Register)"
+      }],
+      options4: [
+        {
+          value: "2000H",
+          label: "2000H",
+        },
+        {
+          value: "2002H",
+          label: "2002H",
+        },
+        {
+          value: "2004H",
+          label: "2004H",
+        },
+        {
+          value: "2005H",
+          label: "2005H",
+        },
+        {
+          value: "2006H",
+          label: "2006H",
+        },
+        {
+          value: "2007H",
+          label: "2007H",
+        },
+        {
+          value: "2008H",
+          label: "2008H",
+        },
+        {
+          value: "2009H",
+          label: "2009H",
+        },
+        {
+          value: "2010H",
+          label: "2010H",
+        },
+        {
+          value: "2011H",
+          label: "2011H",
+        },
+        {
+          value: "2012H",
+          label: "2012H",
+        },
+        {
+          value: "2013H",
+          label: "2013H",
+        },
+        {
+          value: "2014H",
+          label: "2014H",
+        },
+        {
+          value: "2015H",
+          label: "2015H",
+        },
+        {
+          value: "2016H",
+          label: "2016H",
+        },
+        {
+          value: "2017H",
+          label: "2017H",
+        },
+        {
+          value: "2018H",
+          label: "2018H",
+        },
+        {
+          value: "2019H",
+          label: "2019H",
+        },
+        {
+          value: "2020H",
+          label: "2020H",
+        }, {
+          value: "2021H",
+          label: "2021H",
+        },
+        {
+          value: "2022H",
+          label: "2022H",
+        },
+        {
+          value: "2023H",
+          label: "2023H",
+        },
+        {
+          value: "2024H",
+          label: "2024H",
+        },
+        {
+          value: "2027H",
+          label: "2027H",
+        },
+        {
+          value: "2028H",
+          label: "2028H",
+        },
+        {
+          value: "2029H",
+          label: "2029H",
+        },
+        {
+          value: "2030H",
+          label: "2030H",
+        }, {
+          value: "2031H",
+          label: "2031H",
+        }
+      ],
+      options5: [
+        {
+          value: " BIT（位0/1）",
+          label: " BIT（位0/1）"
+        },
+        {
+          value: "WORD（16位无符号整数）",
+          label: "WORD（16位无符号整数）"
+        }, {
+          value: "INT（16位有符号整数）",
+          label: "INT（16位有符号整数）"
+        },
+        {
+          value: "DWORD（32位无符号整数）",
+          label: "DWORD（32位无符号整数）"
+        },
+        {
+          value: "DINT（32位有符号整数）",
+          label: "DINT（32位有符号整数）"
+        }, {
+          value: "FLOAT（单精度浮点数）",
+          label: "FLOAT（单精度浮点数）"
+        }, {
+          value: "DOUBLE（64位浮点数）",
+          label: "DOUBLE（64位浮点数）"
+        }, {
+          value: "STRING（8位字符串）",
+          label: "STRING（8位字符串）"
+        }, {
+          value: "BCD16（16位BCD码）",
+          label: "BCD16（16位BCD码）"
+        }, {
+          value: "ULONG（64位无符号整数）",
+          label: "ULONG（64位无符号整数）"
+        }, {
+          value: "LONG（64位有符号整数）",
+          label: "LONG（64位有符号整数）"
+        },
+      ],
+      options6: [{
+        value: "读写",
+        label: "读写"
+      },
+      {
+        value: "只读",
+        label: "只读"
+      }, {
+        value: "只写",
+        label: "只写"
+      }],
+      options7: [{
+        value: "Periodic",
+        label: "Periodic"
+      },
+      {
+        value: "Onchange",
+        label: "Onchange"
+      }, {
+        value: "Never",
+        label: "Never"
+      }],
+      activeIndex: "1",
+      value1: 1,
+      checked: "",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "上云服务",
+          children: [
+            {
+              label: "标准 MQTT"
+            },
+            {
+              label: "AWS loT"
+            }]
+        }]
+      }],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      tableData: [
+        {
+          cjdpz_tagid: "MachinePamHID909",
+          cjdpz_mc: "急停状态",
+          cjdpz_dz: "0X (Coil Status)",
+          cjdpz_jcqdz: "",
+          cjdpz_cjsjlx: "BIT（位0/1）",
+          cjdpz_dxsx: "读写",
+          cjdpz_scms: "Periodic",
+          cjdpz_dw: "",
+        },
+      ],
+    };
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      // console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        // console.log(JSON.parse(data.data.mark_value));
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.cjdpz_tagid) {
+          this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+          this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+          this.tableData[0].cjdpz_dz = obj.cjdpz_dz;
+          this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+          this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+          this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+          this.tableData[0].cjdpz_scms = obj.cjdpz_scms;
+          this.tableData[0].cjdpz_dw = obj.cjdpz_dw;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "3",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "3",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+    this.GetUserAnswer();
+  }
+};
+</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;
+  color: white;
+  background-image: url(../assets/image/bg.png);
+  background-size: 100% 100%;
+  // 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>
diff --git a/.history/src/components/ChiCollectionwifi_20231111184225.vue b/.history/src/components/ChiCollectionwifi_20231111184225.vue
new file mode 100644
index 0000000..29e07cd
--- /dev/null
+++ b/.history/src/components/ChiCollectionwifi_20231111184225.vue
@@ -0,0 +1,756 @@
+<!-- 采集点收集 -->
+<template>
+  <div>
+    <!-- 设置树形控件 -->
+    <!-- <el-button type="info" plain @click="dialogVisible = true">斥候采集点设置</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+    <div class="pas_params" v-show="add_passage" v-loading="loading">
+      <div>
+        <el-button type="info" plain @click="handleSelect">保存</el-button>
+        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <el-menu-item index="2">保存</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="cjdpz_tagid" label="TagID">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+              <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_mc" label="名称">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+              <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_jcqdz" label="地址">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_dz" placeholder="0X">
+              <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+          <template slot-scope="scope">
+            <!-- <el-select v-model="scope.row.cjdpz_jcqdz" placeholder="1">
+              <el-option v-for="(option,index) in options4" :key="index" :label="option.label" :value="option.value"></el-option>
+            </el-select> -->
+            <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="bool">
+              <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column property="cjdpz_dxsx" label="读写属性">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_dxsx" placeholder="读写">
+              <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_scms" label="上传模式">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.cjdpz_scms" placeholder="读写">
+              <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                :value="option.value"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column property="cjdpz_dw" label="单位">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.cjdpz_dw" placeholder=""></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+  name: "ChiCollectionwifi",
+
+  data() {
+    return {
+      user_id: "",
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      options1: [{
+        value: "MachinePamHID909",
+        label: "MachinePamHID909",
+      }, {
+        value: "MachinePamHID910",
+        label: "MachinePamHID910",
+      }, {
+        value: "MachinePamHID911",
+        label: "MachinePamHID911",
+      }, {
+        value: "MachinePamHID912",
+        label: "MachinePamHID912",
+      }, {
+        value: "MachinePamHID913",
+        label: "MachinePamHID913",
+      }, {
+        value: "MachinePamHID914",
+        label: "MachinePamHID914",
+      }, {
+        value: "MachinePamHID915",
+        label: "MachinePamHID915",
+      }, {
+        value: "MachinePamHID916",
+        label: "MachinePamHID916",
+      }, {
+        value: "MachinePamHID917",
+        label: "MachinePamHID917",
+      }, {
+        value: "MachinePamHID918",
+        label: "MachinePamHID918",
+      }, {
+        value: "MachinePamHID919",
+        label: "MachinePamHID919",
+      }, {
+        value: "MachinePamHID920",
+        label: "MachinePamHID920",
+      }, {
+        value: "MachinePamHID921",
+        label: "MachinePamHID921",
+      }, {
+        value: "MachinePamHID922",
+        label: "MachinePamHID922",
+      }, {
+        value: "MachinePamHID923",
+        label: "MachinePamHID923",
+      }, {
+        value: "MachinePamHID924",
+        label: "MachinePamHID924",
+      }, {
+        value: "MachinePamHID925",
+        label: "MachinePamHID925",
+      }, {
+        value: "MachinePamHID926",
+        label: "MachinePamHID926",
+      }, {
+        value: "MachinePamHID927",
+        label: "MachinePamHID927",
+      }, {
+        value: "MachinePamHID928",
+        label: "MachinePamHID928",
+      }, {
+        value: "MachinePamHID929",
+        label: "MachinePamHID929",
+      }, {
+        value: "MachinePamHID930",
+        label: "MachinePamHID930",
+      }, {
+        value: "MachinePamHID931",
+        label: "MachinePamHID931",
+      }, {
+        value: "MachinePamHID932",
+        label: "MachinePamHID932",
+      }, {
+        value: "MachinePamHID933",
+        label: "MachinePamHID933",
+      }, {
+        value: "MachinePamHID934",
+        label: "MachinePamHID934",
+      }, {
+        value: "MachinePamHID935",
+        label: "MachinePamHID935",
+      }, {
+        value: "MachinePamHID936",
+        label: "MachinePamHID936",
+      }, {
+        value: "MachinePamHID937",
+        label: "MachinePamHID937",
+      }, {
+        value: "MachinePamHID938",
+        label: "MachinePamHID938",
+      }],
+      options2: [{
+        value: "急停状态",
+        label: "急停状态",
+      }, {
+        value: "产量",
+        label: "产量",
+      },
+      {
+        value: "相对位置X",
+        label: "相对位置X",
+      },
+      {
+        value: "相对位置Y",
+        label: "相对位置Y",
+      },
+      {
+        value: "相对位置Z",
+        label: "相对位置Z",
+      },
+      {
+        value: "实际位置X",
+        label: "实际位置X",
+      },
+      {
+        value: "实际位置Y",
+        label: "实际位置Y",
+      },
+      {
+        value: "实际位置Z",
+        label: "实际位置Z",
+      },
+      {
+        value: "主轴转速",
+        label: "主轴转速",
+      },
+      {
+        value: "当前刀具",
+        label: "当前刀具",
+      },
+      {
+        value: "预选刀具",
+        label: "预选刀具",
+      },
+      {
+        value: "报警信息",
+        label: "报警信息",
+      },
+      {
+        value: "驱动单元电流",
+        label: "驱动单元电流",
+      },
+      {
+        value: "负载电流",
+        label: "负载电流",
+      },
+      {
+        value: "额定电流",
+        label: "额定电流",
+      },
+      {
+        value: "运行时间",
+        label: "运行时间",
+      },
+      {
+        value: "加工产品用时",
+        label: "加工产品用时",
+      },
+      {
+        value: "工作模式",
+        label: "工作模式",
+      },
+      {
+        value: "切削速度",
+        label: "切削速度",
+      },
+      {
+        value: "任务信息",
+        label: "任务信息",
+      },
+      {
+        value: "使能状态",
+        label: "使能状态",
+      },
+      {
+        value: "系统状态",
+        label: "系统状态",
+      },
+      {
+        value: "执行任务信息",
+        label: "执行任务信息",
+      },
+      {
+        value: "进给倍军",
+        label: "进给倍军",
+      },
+      {
+        value: "轴速度",
+        label: "轴速度",
+      },
+      {
+        value: "轴角度",
+        label: "轴角度",
+      },
+      {
+        value: "进给速度",
+        label: "进给速度",
+      }],
+      options3: [{
+        value: "0X (Coil Status)",
+        label: "0X (Coil Status)"
+      },
+      {
+        value: "1X (Input Status)",
+        label: "1X (Input Status)"
+      }, {
+        value: "3X (Input Registers)",
+        label: "3X (Input Registers)"
+      },
+      {
+        value: "4X (Holding Register)",
+        label: "4X (Holding Register)"
+      }],
+      options4: [
+        {
+          value: "2000H",
+          label: "2000H",
+        },
+        {
+          value: "2002H",
+          label: "2002H",
+        },
+        {
+          value: "2004H",
+          label: "2004H",
+        },
+        {
+          value: "2005H",
+          label: "2005H",
+        },
+        {
+          value: "2006H",
+          label: "2006H",
+        },
+        {
+          value: "2007H",
+          label: "2007H",
+        },
+        {
+          value: "2008H",
+          label: "2008H",
+        },
+        {
+          value: "2009H",
+          label: "2009H",
+        },
+        {
+          value: "2010H",
+          label: "2010H",
+        },
+        {
+          value: "2011H",
+          label: "2011H",
+        },
+        {
+          value: "2012H",
+          label: "2012H",
+        },
+        {
+          value: "2013H",
+          label: "2013H",
+        },
+        {
+          value: "2014H",
+          label: "2014H",
+        },
+        {
+          value: "2015H",
+          label: "2015H",
+        },
+        {
+          value: "2016H",
+          label: "2016H",
+        },
+        {
+          value: "2017H",
+          label: "2017H",
+        },
+        {
+          value: "2018H",
+          label: "2018H",
+        },
+        {
+          value: "2019H",
+          label: "2019H",
+        },
+        {
+          value: "2020H",
+          label: "2020H",
+        }, {
+          value: "2021H",
+          label: "2021H",
+        },
+        {
+          value: "2022H",
+          label: "2022H",
+        },
+        {
+          value: "2023H",
+          label: "2023H",
+        },
+        {
+          value: "2024H",
+          label: "2024H",
+        },
+        {
+          value: "2027H",
+          label: "2027H",
+        },
+        {
+          value: "2028H",
+          label: "2028H",
+        },
+        {
+          value: "2029H",
+          label: "2029H",
+        },
+        {
+          value: "2030H",
+          label: "2030H",
+        }, {
+          value: "2031H",
+          label: "2031H",
+        }
+      ],
+      options5: [
+        {
+          value: " BIT（位0/1）",
+          label: " BIT（位0/1）"
+        },
+        {
+          value: "WORD（16位无符号整数）",
+          label: "WORD（16位无符号整数）"
+        }, {
+          value: "INT（16位有符号整数）",
+          label: "INT（16位有符号整数）"
+        },
+        {
+          value: "DWORD（32位无符号整数）",
+          label: "DWORD（32位无符号整数）"
+        },
+        {
+          value: "DINT（32位有符号整数）",
+          label: "DINT（32位有符号整数）"
+        }, {
+          value: "FLOAT（单精度浮点数）",
+          label: "FLOAT（单精度浮点数）"
+        }, {
+          value: "DOUBLE（64位浮点数）",
+          label: "DOUBLE（64位浮点数）"
+        }, {
+          value: "STRING（8位字符串）",
+          label: "STRING（8位字符串）"
+        }, {
+          value: "BCD16（16位BCD码）",
+          label: "BCD16（16位BCD码）"
+        }, {
+          value: "ULONG（64位无符号整数）",
+          label: "ULONG（64位无符号整数）"
+        }, {
+          value: "LONG（64位有符号整数）",
+          label: "LONG（64位有符号整数）"
+        },
+      ],
+      options6: [{
+        value: "读写",
+        label: "读写"
+      },
+      {
+        value: "只读",
+        label: "只读"
+      }, {
+        value: "只写",
+        label: "只写"
+      }],
+      options7: [{
+        value: "Periodic",
+        label: "Periodic"
+      },
+      {
+        value: "Onchange",
+        label: "Onchange"
+      }, {
+        value: "Never",
+        label: "Never"
+      }],
+      activeIndex: "1",
+      checked: "",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [{
+        label: 'Gateway',
+        children: [{
+          label: '数据采集',
+          children: [{
+            label: 'I/O点'
+          },
+          {
+            label: '用户点',
+          },
+          {
+            label: '计算点',
+          },
+          {
+            label: '系统点',
+          },
+          ]
+        },
+        {
+          label: "上云服务",
+          children: [
+            {
+              label: "标准 MQTT"
+            },
+            {
+              label: "AWS loT"
+            }]
+        }]
+      }],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      tableData: [
+        {
+          cjdpz_tagid: "MachinePamHID909",
+          cjdpz_mc: "急停状态",
+          cjdpz_dz: "0X (Coil Status)",
+          cjdpz_jcqdz: "",
+          cjdpz_cjsjlx: "BIT（位0/1）",
+          cjdpz_dxsx: "读写",
+          cjdpz_scms: "Periodic",
+          cjdpz_dw: "",
+        },
+      ],
+    };
+  },
+  methods: {
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      // console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+      }else{
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        // console.log(JSON.parse(data.data.mark_value));
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.cjdpz_tagid) {
+          this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+          this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+          this.tableData[0].cjdpz_dz = obj.cjdpz_dz;
+          this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+          this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+          this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+          this.tableData[0].cjdpz_scms = obj.cjdpz_scms;
+          this.tableData[0].cjdpz_dw = obj.cjdpz_dw;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "4",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "4",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+    this.GetUserAnswer();
+  }
+};
+</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;
+  color: white;
+  background-image: url(../assets/image/bg.png);
+  background-size: 100% 100%;
+  // 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>
diff --git a/.history/src/components/ChiDevice_20231111182131.vue b/.history/src/components/ChiDevice_20231111182131.vue
new file mode 100644
index 0000000..2365932
--- /dev/null
+++ b/.history/src/components/ChiDevice_20231111182131.vue
@@ -0,0 +1,834 @@
+<!-- 斥候有线的新建设备配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">斥候通道配置</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建设备</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params">
+            <el-dialog title="新建设备" :visible.sync="add_passage" width="902px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formData.sbpz_sbmc" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="控制器协议:" :label-width="formLabelWidth" prop="sbpz_kzqxy">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.sbpz_kzqxy" 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="sbpz_ip">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip1" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip2" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip3" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip4" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="sbpz_port">
+                                <el-input v-model="formData.sbpz_port" 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="sbpz_czdz">
+                                <el-input v-model="formData.sbpz_czdz" 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="sbpz_lxzq">
+                                <el-input v-model="formData.sbpz_lxzq" 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="sbpz_qyhmcj">
+                                    <el-switch v-model="formData.sbpz_qyhmcj"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="sbpz_qyplcj">
+                                    <el-switch v-model="formData.sbpz_qyplcj"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="最大批量采集数:" label-width="126px" prop="sbpz_zdplcjs">
+                                    <el-input v-model="formData.sbpz_zdplcjs" 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="sbpz_cjcgsj">
+                                    <el-input v-model="formData.sbpz_cjcgsj" 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="sbpz_zqsbonchange">
+                                    <el-switch v-model="formData.sbpz_zqsbonchange"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="sbpz_txsjjg">
+                                    <el-input v-model="formData.sbpz_txsjjg" 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;"
+                                        class="cjjcq_code">
+                                        <el-select v-model="formData.sbpz_xqjcqxr" placeholder=""
+                                            style="width: 200px;height:30px">
+                                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                                :value="item.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="线圈寄存器写入功能码:" label-width="120px" class="cjjcq_code">
+                                        <el-select v-model="formData.sbpz_bcjcqxr" placeholder=""
+                                            style="width: 200px;height:30px">
+                                            <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                                :value="item.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </div>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="add_passage = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'ChiDevice',
+    data() {
+        return {
+            user_id: "",
+            loading: false,
+            flag: false,
+            nodekey: "",
+            gateway: "",
+            trees: [],
+            formData: {
+                sbpz_sbmc: "",
+                sbpz_kzqxy: "",
+                sbpz_ip: "",
+                sbpz_port: "",
+                sbpz_czdz: "",
+                sbpz_lxzq: "",
+                sbpz_qyhmcj: false,
+                sbpz_qyplcj: true,
+                sbpz_zdplcjs: "",
+                sbpz_cjcgsj: "",
+                sbpz_zqsbonchange: false,
+                sbpz_txsjjg: "",
+                sbpz_xqjcqxr: "05",
+                sbpz_bcjcqxr: "06",
+            },
+            diag_drive: false,
+            sbpz_ip1: "",
+            sbpz_ip2: "",
+            sbpz_ip3: "",
+            sbpz_ip4: "",
+            options1: [{
+                value: '有线区精雕2',
+                label: '有线区精雕2'
+            }, {
+                value: '无线区精雕2',
+                label: '无线区精雕2'
+            }],
+            options2: [{
+                value: "05",
+                label: "05",
+            }],
+            options3: [{
+                value: "06",
+                label: "06"
+            }],
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "上云服务",
+                    children: [
+                        {
+                            label: "标准 MQTT"
+                        },
+                        {
+                            label: "AWS loT"
+                        }]
+                }]
+            }],
+            datas2: [{
+                label: 'Allen-Bradley',
+                children: [
+                    {
+                        label: 'EtherNet/IP(ControlLogix)',
+                    },
+                    {
+                        label: 'EtherNet/IP(MicroLogix)',
+                    },
+                ]
+            },
+            {
+                label: "Modbus",
+                children: [
+                    {
+                        label: "Modbus TCP"
+                    },
+                    {
+                        label: "Modbus RTU"
+                    },
+                    {
+                        label: "Modbus ASCII"
+                    },
+                    {
+                        label: "Modbus RTU Over TCP"
+                    },
+                ]
+            },
+            {
+                label: "MITSUBISHI",
+                children: [
+                    {
+                        label: "Mitsubishi CPU Port(Serial)"
+                    },
+                    {
+                        label: "Mitsubishi MC 3C"
+                    },
+                    {
+                        label: "Mitsubishi MC 1E"
+                    },
+                    {
+                        label: "Mitsubishi MC 3E"
+                    },
+                    {
+                        label: "Mitsubishi MC 3C Over TCP"
+                    }
+                ]
+            },
+            {
+                label: "OMRON",
+                children: [
+                    {
+                        label: "FINS TCP",
+                    },
+                    {
+                        label: "FINS UDP"
+                    },
+                    {
+                        label: "HostLink",
+                    }
+
+                ]
+            },
+            {
+                label: "SIEMENS",
+                children: [
+                    {
+                        label: "ISO-on-TCP",
+                    },
+                    {
+                        label: "PPI"
+                    }
+                ]
+            },
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbmc: [
+                    { required: true, message: '请输入通道名称', trigger: 'change' },
+                ],
+                sbpz_kzqxy: [
+                    { required: true, message: '请输入控制器协议', trigger: 'blur' },
+                ],
+                sbpz_ip: [
+                    {
+                        required: true,
+                        message: '',
+                        validator: this.validateIp,
+                        trigger: 'blur'
+                    },
+                ],
+                sbpz_czdz: [
+                    { required: true, message: '请输入从站地址', trigger: 'blur' },
+                ],
+                sbpz_port: [
+                    { required: true, message: '请输入端口号', trigger: 'blur' },
+                ],
+                sbpz_lxzq: [
+                    { required: true, message: '请输入轮询时间', trigger: 'blur' },
+                ],
+                sbpz_qyhmcj: [
+                    { required: true, message: '启用毫秒采集', trigger: 'change' },
+                ],
+                sbpz_qyplcj: [
+                    { required: true, message: '启用批量采集', trigger: 'change' },
+                ],
+                sbpz_zdplcjs: [
+                    { required: true, message: '请输入最大批量采集数', trigger: 'blur' },
+                ],
+                sbpz_cjcgsj: [
+                    { required: true, message: '请输入采集超过时间', trigger: 'blur' },
+                ],
+                sbpz_zqsbonchange: [
+                    { required: true, message: '周期上报Onchange数据', trigger: 'change' },
+                ],
+                sbpz_txsjjg: [
+                    { required: true, message: '请输入通讯时间间隔', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    methods: {
+        //ip地址验证
+        validateIp(rule, value, callback) {
+            if (
+                this.sbpz_ip1 +
+                "." +
+                this.sbpz_ip2 +
+                "." +
+                this.sbpz_ip3 +
+                "." +
+                this.sbpz_ip4 ===
+                "..."
+            ) {
+                callback(new Error("请输入IP地址"));
+            } else if (
+                !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+                    this.sbpz_ip1 +
+                    "." +
+                    this.sbpz_ip2 +
+                    "." +
+                    this.sbpz_ip3 +
+                    "." +
+                    this.sbpz_ip4
+                )
+            ) {
+                callback(new Error("请输入有效的IP地址"));
+            } else {
+                callback();
+            }
+        },
+        // 提交时的校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            this.menuShow = false
+            this.menuShow = true
+            this.nodekey = data.id;
+            e.preventDefault() //关闭浏览器右键默认事件
+            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+            document.addEventListener('click', (ev) => {
+                ev.stopImmediatePropagation()
+                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                    this.foo()
+                }
+            })
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false
+            document.removeEventListener('click', this.foo) // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo()
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.childNodes.length == 0) {
+                this.formData.sbpz_kzqxy = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveDevice() {
+            var obj = {
+                sbpz_sbmc: this.formData.sbpz_sbmc,
+                sbpz_kzqxy: this.formData.sbpz_kzqxy,
+                sbpz_ip: this.sbpz_ip1 + "." + this.sbpz_ip2 + "." + this.sbpz_ip3 + "." + this.sbpz_ip4,
+                sbpz_port: this.formData.sbpz_port,
+                sbpz_czdz: this.formData.sbpz_czdz,
+                sbpz_lxzq: this.formData.sbpz_lxzq,
+                sbpz_qyhmcj: String(Number(this.formData.sbpz_qyhmcj)),
+                sbpz_qyplcj: String(Number(this.formData.sbpz_qyplcj)),
+                sbpz_zdplcjs: this.formData.sbpz_zdplcjs,
+                sbpz_cjcgsj: this.formData.sbpz_cjcgsj,
+                sbpz_zqsbonchange: String(Number(this.formData.sbpz_zqsbonchange)),
+                sbpz_txsjjg: this.formData.sbpz_txsjjg,
+                sbpz_xqjcqxr: this.formData.sbpz_xqjcqxr,
+                sbpz_bcjcqxr: this.formData.sbpz_bcjcqxr,
+            }
+            let datas = sessionStorage.getItem("CHGYWG_yx");
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "CHGYWG_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                this.$refs["tree"].append({
+                    id: this.nodekey + 1000,
+                    label: this.formData.sbpz_sbmc,
+                }, this.nodekey);
+                // console.log(this.trees);
+                this.sendTree();
+                sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+                this.$router.push(`/collectionpoint?user_id=${this.user_id}`)
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // console.log(res);
+
+        },
+        async GetUserAnswer() {
+            this.loading = true;
+            let { data } = await GetUserAnswer({
+                mark: "CHGYWG_yx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(JSON.parse(data.data.mark_value));
+            if (data.data && data.state) {
+                let obj = JSON.parse(data.data.mark_value);
+                if (obj.sbpz_ip) {
+                    this.formData.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formData.sbpz_kzqxy = obj.sbpz_kzqxy;
+                    this.sbpz_ip1 = obj.sbpz_ip.split(".")[0];
+                    this.sbpz_ip2 = obj.sbpz_ip.split(".")[1];
+                    this.sbpz_ip3 = obj.sbpz_ip.split(".")[2];
+                    this.sbpz_ip4 = obj.sbpz_ip.split(".")[3];
+                    this.formData.sbpz_port = obj.sbpz_port;
+                    this.formData.sbpz_czdz = obj.sbpz_czdz;
+                    this.formData.sbpz_lxzq = obj.sbpz_lxzq;
+                    this.formData.sbpz_qyhmcj = Boolean(Number(obj.sbpz_qyhmcj));
+                    this.formData.sbpz_qyplcj = Boolean(Number(obj.sbpz_qyplcj));
+                    this.formData.sbpz_zdplcjs = obj.sbpz_zdplcjs;
+                    this.formData.sbpz_cjcgsj = obj.sbpz_cjcgsj;
+                    this.formData.sbpz_zqsbonchange = Boolean(Number(obj.sbpz_zqsbonchange));
+                    console.log(this.formData.sbpz_zqsbonchange);
+                    this.formData.sbpz_txsjjg = obj.sbpz_txsjjg;
+                    this.formData.sbpz_xqjcqxr = obj.sbpz_xqjcqxr;
+                    this.formData.sbpz_bcjcqxr = obj.sbpz_bcjcqxr;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "3",
+            })
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        console.log(this.user_id);
+        GetTree({
+            user_id: this.user_id,
+            type: "3",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.GetUserAnswer();
+    },
+    watch: {
+        checked1: {
+            handler(old,) {
+                if (old) {
+                    this.isdisabled = false;
+                } else {
+                    this.isdisabled = true;
+                }
+            }
+        }
+    },
+    directives: {
+        'click-outside': {
+            bind: function (el, binding, vnode) {
+                console.log('el', el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == 'function') {
+                            vnode.context[binding.expression](event)
+                        }
+                    }
+                }
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener('click', el.event, true)
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener('click', el.event, true)
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    height: 753px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-form-item {
+        margin-bottom: 20px !important;
+    }
+
+    .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;
+        }
+
+        .el-col-6 {
+            height: 40px;
+            top: 5px;
+            left: 25px;
+            position: relative;
+            width: 50px;
+        }
+    }
+}
+
+/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 {
+    .cjjcq_code {
+
+        // margin-left: 140px !important;
+        .el-form-item__content {
+            margin-left: 140px !important;
+        }
+    }
+
+    .el-form-item__label {
+        line-height: 20px;
+    }
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1478px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/ChiDevicewifi_20231111182124.vue b/.history/src/components/ChiDevicewifi_20231111182124.vue
new file mode 100644
index 0000000..fe86ffd
--- /dev/null
+++ b/.history/src/components/ChiDevicewifi_20231111182124.vue
@@ -0,0 +1,822 @@
+<!-- 斥候有线的新建设备配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">斥候通道配置</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建设备</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params">
+            <el-dialog title="新建设备" :visible.sync="add_passage" width="902px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formData.sbpz_sbmc" placeholder="" style="width: 200px;height:30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="控制器协议:" :label-width="formLabelWidth" prop="sbpz_kzqxy">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.sbpz_kzqxy" 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="sbpz_ip">
+                                <el-row>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip1" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.
+                                    </el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip2" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip3" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                    <el-col :span="1">.</el-col>
+                                    <el-col :span="5">
+                                        <el-input v-model="sbpz_ip4" style="width: 43px;height:30px"
+                                            maxlength="3"></el-input>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="端口号:" :label-width="formLabelWidth" prop="sbpz_port">
+                                <el-input v-model="formData.sbpz_port" 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="sbpz_czdz">
+                                <el-input v-model="formData.sbpz_czdz" 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="sbpz_lxzq">
+                                <el-input v-model="formData.sbpz_lxzq" 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">
+                        <!-- :model="formData" -->
+                        <!-- <el-form  :label-position="labelPosition" :rules="rules" ref="formData"> -->
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="启用毫秒采集:" :label-width="formLabelWidth" prop="sbpz_qyhmcj">
+                                    <el-switch v-model="formData.sbpz_qyhmcj"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="启用批量采集:" :label-width="formLabelWidth" prop="sbpz_qyplcj">
+                                    <el-switch v-model="formData.sbpz_qyplcj"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="最大批量采集数:" label-width="126px" prop="sbpz_zdplcjs">
+                                    <el-input v-model="formData.sbpz_zdplcjs" 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="sbpz_cjcgsj">
+                                    <el-input v-model="formData.sbpz_cjcgsj" 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="sbpz_zqsbonchange">
+                                    <el-switch v-model="formData.sbpz_zqsbonchange"></el-switch>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="通讯事件间隔(ms):" label-width="140px" prop="sbpz_txsjjg">
+                                    <el-input v-model="formData.sbpz_txsjjg" 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;"
+                                        class="cjjcq_code">
+                                        <el-select v-model="formData.sbpz_xqjcqxr" placeholder=""
+                                            style="width: 200px;height:30px">
+                                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                                :value="item.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-form-item label="线圈寄存器写入功能码:" label-width="120px" class="cjjcq_code">
+                                        <el-select v-model="formData.sbpz_bcjcqxr" placeholder=""
+                                            style="width: 200px;height:30px">
+                                            <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                                :value="item.value">
+                                            </el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </div>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="add_passage = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'ChiDevicewifi',
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            nodekey: "",
+            gateway: "",
+            user_id: "",
+            formData: {
+                sbpz_sbmc: "",
+                sbpz_kzqxy: "",
+                sbpz_ip: "",
+                sbpz_port: "",
+                sbpz_czdz: "",
+                sbpz_lxzq: "",
+                sbpz_qyhmcj: false,
+                sbpz_qyplcj: true,
+                sbpz_zdplcjs: "",
+                sbpz_cjcgsj: "",
+                sbpz_zqsbonchange: false,
+                sbpz_txsjjg: "",
+                sbpz_xqjcqxr: "05",
+                sbpz_bcjcqxr: "06",
+            },
+            diag_drive: false,
+            sbpz_ip1: "",
+            sbpz_ip2: "",
+            sbpz_ip3: "",
+            sbpz_ip4: "",
+            options1: [{
+                value: '有线区精雕2',
+                label: '有线区精雕2'
+            }, {
+                value: '无线区精雕2',
+                label: '无线区精雕2'
+            }],
+            options2: [{
+                value: "05",
+                label: "05",
+            }],
+            options3: [{
+                value: "06",
+                label: "06"
+            }],
+            isdisabled: true,
+            radio: "1",
+            checked1: false,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 192,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                },
+                {
+                    label: "上云服务",
+                    children: [
+                        {
+                            label: "标准 MQTT"
+                        },
+                        {
+                            label: "AWS loT"
+                        }]
+                }]
+            }],
+            datas2: [{
+                label: 'Allen-Bradley',
+                children: [
+                    {
+                        label: 'EtherNet/IP(ControlLogix)',
+                    },
+                    {
+                        label: 'EtherNet/IP(MicroLogix)',
+                    },
+                ]
+            },
+            {
+                label: "Modbus",
+                children: [
+                    {
+                        label: "Modbus TCP"
+                    },
+                    {
+                        label: "Modbus RTU"
+                    },
+                    {
+                        label: "Modbus ASCII"
+                    },
+                    {
+                        label: "Modbus RTU Over TCP"
+                    },
+                ]
+            },
+            {
+                label: "MITSUBISHI",
+                children: [
+                    {
+                        label: "Mitsubishi CPU Port(Serial)"
+                    },
+                    {
+                        label: "Mitsubishi MC 3C"
+                    },
+                    {
+                        label: "Mitsubishi MC 1E"
+                    },
+                    {
+                        label: "Mitsubishi MC 3E"
+                    },
+                    {
+                        label: "Mitsubishi MC 3C Over TCP"
+                    }
+                ]
+            },
+            {
+                label: "OMRON",
+                children: [
+                    {
+                        label: "FINS TCP",
+                    },
+                    {
+                        label: "FINS UDP"
+                    },
+                    {
+                        label: "HostLink",
+                    }
+
+                ]
+            },
+            {
+                label: "SIEMENS",
+                children: [
+                    {
+                        label: "ISO-on-TCP",
+                    },
+                    {
+                        label: "PPI"
+                    }
+                ]
+            },
+            ],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbmc: [
+                    { required: true, message: '请输入通道名称', trigger: 'change' },
+                ],
+                sbpz_kzqxy: [
+                    { required: true, message: '请输入控制器协议', trigger: 'blur' },
+                ],
+                sbpz_ip: [
+                    {
+                        required: true,
+                        message: '',
+                        validator: this.validateIp,
+                        trigger: 'blur'
+                    },
+                ],
+                sbpz_czdz: [
+                    { required: true, message: '请输入从站地址', trigger: 'blur' },
+                ],
+                sbpz_port: [
+                    { required: true, message: '请输入端口号', trigger: 'blur' },
+                ],
+                sbpz_lxzq: [
+                    { required: true, message: '请输入轮询时间', trigger: 'blur' },
+                ],
+                sbpz_qyhmcj: [
+                    { required: true, message: '启用毫秒采集', trigger: 'change' },
+                ],
+                sbpz_qyplcj: [
+                    { required: true, message: '启用批量采集', trigger: 'change' },
+                ],
+                sbpz_zdplcjs: [
+                    { required: true, message: '请输入最大批量采集数', trigger: 'blur' },
+                ],
+                sbpz_cjcgsj: [
+                    { required: true, message: '请输入采集超过时间', trigger: 'blur' },
+                ],
+                sbpz_zqsbonchange: [
+                    { required: true, message: '周期上报Onchange数据', trigger: 'change' },
+                ],
+                sbpz_txsjjg: [
+                    { required: true, message: '请输入通讯时间间隔', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+
+    methods: {
+        //ip地址验证
+        validateIp(rule, value, callback) {
+            if (
+                this.sbpz_ip1 +
+                "." +
+                this.sbpz_ip2 +
+                "." +
+                this.sbpz_ip3 +
+                "." +
+                this.sbpz_ip4 ===
+                "..."
+            ) {
+                callback(new Error("请输入IP地址"));
+            } else if (
+                !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+                    this.sbpz_ip1 +
+                    "." +
+                    this.sbpz_ip2 +
+                    "." +
+                    this.sbpz_ip3 +
+                    "." +
+                    this.sbpz_ip4
+                )
+            ) {
+                callback(new Error("请输入有效的IP地址"));
+            } else {
+                callback();
+            }
+        },
+        // 提交时的校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            this.menuShow = false
+            this.menuShow = true
+            this.nodekey = data.id;
+            e.preventDefault() //关闭浏览器右键默认事件
+            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+            document.addEventListener('click', (ev) => {
+                ev.stopImmediatePropagation()
+                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                    this.foo()
+                }
+            })
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false
+            document.removeEventListener('click', this.foo) // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo()
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.childNodes.length == 0) {
+                this.formData.sbpz_kzqxy = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveDevice() {
+            var obj = {
+                sbpz_sbmc: this.formData.sbpz_sbmc,
+                sbpz_kzqxy: this.formData.sbpz_kzqxy,
+                sbpz_ip: this.sbpz_ip1 + "." + this.sbpz_ip2 + "." + this.sbpz_ip3 + "." + this.sbpz_ip4,
+                sbpz_port: this.formData.sbpz_port,
+                sbpz_czdz: this.formData.sbpz_czdz,
+                sbpz_lxzq: this.formData.sbpz_lxzq,
+                sbpz_qyhmcj: String(Number(this.formData.sbpz_qyhmcj)),
+                sbpz_qyplcj: String(Number(this.formData.sbpz_qyplcj)),
+                sbpz_zdplcjs: this.formData.sbpz_zdplcjs,
+                sbpz_cjcgsj: this.formData.sbpz_cjcgsj,
+                sbpz_zqsbonchange: String(Number(this.formData.sbpz_zqsbonchange)),
+                sbpz_txsjjg: this.formData.sbpz_txsjjg,
+                sbpz_xqjcqxr: this.formData.sbpz_xqjcqxr,
+                sbpz_bcjcqxr: this.formData.sbpz_bcjcqxr,
+            }
+            let datas = sessionStorage.getItem("CHGYWG_wx");
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "CHGYWG_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step:"2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+                this.$refs["tree"].append({
+                    id: this.nodekey + 1000,
+                    label: this.formData.sbpz_sbmc,
+                }, this.nodekey);
+                console.log(this.trees);
+                this.sendTree();
+                this.$router.push(`/chiwificollect?user_id=${this.user_id}`)
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // console.log(res);
+
+        },
+        async GetUserAnswer() {
+            this.loading = true;
+            let { data } = await GetUserAnswer({
+                mark: "CHGYWG_wx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(JSON.parse(data.data.mark_value));
+            if (data.data && data.state) {
+                let obj = JSON.parse(data.data.mark_value);
+                // console.log(JSON.parse(data.data.mark_value));
+                // let obj = JSON.parse(data.data.mark_value);
+                if (obj.sbpz_ip) {
+                    this.formData.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formData.sbpz_kzqxy = obj.sbpz_kzqxy;
+                    this.sbpz_ip1 = obj.sbpz_ip.split(".")[0];
+                    this.sbpz_ip2 = obj.sbpz_ip.split(".")[1];
+                    this.sbpz_ip3 = obj.sbpz_ip.split(".")[2];
+                    this.sbpz_ip4 = obj.sbpz_ip.split(".")[3];
+                    this.formData.sbpz_port = obj.sbpz_port;
+                    this.formData.sbpz_czdz = obj.sbpz_czdz;
+                    this.formData.sbpz_lxzq = obj.sbpz_lxzq;
+                    this.formData.sbpz_qyhmcj = Boolean(Number(obj.sbpz_qyhmcj));
+                    this.formData.sbpz_qyplcj = Boolean(Number(obj.sbpz_qyplcj));
+                    this.formData.sbpz_zdplcjs = obj.sbpz_zdplcjs;
+                    this.formData.sbpz_cjcgsj = obj.sbpz_cjcgsj;
+                    this.formData.sbpz_zqsbonchange = Boolean(Number(obj.sbpz_zqsbonchange));
+                    console.log(this.formData.sbpz_zqsbonchange);
+                    this.formData.sbpz_txsjjg = obj.sbpz_txsjjg;
+                    this.formData.sbpz_xqjcqxr = obj.sbpz_xqjcqxr;
+                    this.formData.sbpz_bcjcqxr = obj.sbpz_bcjcqxr;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "4",
+            })
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        GetTree({
+            user_id: this.user_id,
+            type: "4",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.GetUserAnswer();
+    },
+    watch: {
+        checked1: {
+            handler(old,) {
+                if (old) {
+                    this.isdisabled = false;
+                } else {
+                    this.isdisabled = true;
+                }
+            }
+        }
+    },
+    directives: {
+        'click-outside': {
+            bind: function (el, binding, vnode) {
+                console.log('el', el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == 'function') {
+                            vnode.context[binding.expression](event)
+                        }
+                    }
+                }
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener('click', el.event, true)
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener('click', el.event, true)
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    height: 753px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-form-item {
+        margin-bottom: 20px !important;
+    }
+
+    .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;
+        }
+
+        .el-col-6 {
+            height: 40px;
+            top: 5px;
+            left: 25px;
+            position: relative;
+            width: 50px;
+        }
+    }
+}
+
+/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 {
+    .cjjcq_code {
+
+        // margin-left: 140px !important;
+        .el-form-item__content {
+            margin-left: 140px !important;
+        }
+    }
+
+    .el-form-item__label {
+        line-height: 20px;
+    }
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1478px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/ChiGate_20231111180219.vue b/.history/src/components/ChiGate_20231111180219.vue
new file mode 100644
index 0000000..af81527
--- /dev/null
+++ b/.history/src/components/ChiGate_20231111180219.vue
@@ -0,0 +1,263 @@
+<!-- 斥候IP设置——无线网关页面 -->
+<template>
+  <div v-loading="loading">
+    <!-- <el-button type="info" plain @click="getShow">斥候IP设置——无线网关</el-button> -->
+    <div class="gateway" v-show="isShow">
+      <div class="title">
+        <p class="title_l">IP配置</p>
+        <p class="title_center">本页面涉及排错，请检查修改默认值</p>
+        <i class="el-icon-close title_r" @click="isShow = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="客户端SSID:" :label-width="formLabelWidth" prop="ippz_ssid">
+                <el-input v-model="formData.ippz_ssid" placeholder="请输入WIFI名字"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="认证方式:" :label-width="formLabelWidth">
+                <el-select v-model="formData.ippz_rzfs" placeholder="开放式">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="加密方式:" :label-width="formLabelWidth">
+                <el-select v-model="formData.ippz_jmfs" placeholder="NONE">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="密码:" :label-width="formLabelWidth" prop="ippz_mm">
+                <el-input v-model="formData.ippz_mm" placeholder="请输入wifi密码"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="footer">
+            <el-button type="primary" @click="submitForm">保 存</el-button>
+            <el-button @click="isShow = false">取 消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  name: "ChiGate",
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "WPA2-PSK", //答案：WPA2-PSK
+        ippz_jmfs: "AES", //答案：AES
+        ippz_mm: "",
+      },
+      options1: [
+        {
+          value: "开放式",
+          label: "开放式",
+        },
+        {
+          value: "共享式",
+          label: "共享式",
+        },
+        {
+          value: "WPA-PSK",
+          label: "WPA-PSK",
+        },
+        {
+          value: "WPA",
+          label: "WPA",
+        },
+        {
+          value: "WPA2-PSK",
+          label: "WPA2-PSK",
+        },
+        {
+          value: "WPA2",
+          label: "WPA2",
+        },
+      ],
+      options2: [
+        {
+          value: "NONE",
+          label: "NONE",
+        },
+        {
+          value: "WEP40",
+          label: "WEP40",
+        },
+        {
+          value: "WEP104",
+          label: "WEP104",
+        },
+        {
+          value: "AES",
+          label: "AES",
+        },
+      ],
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      value: "测试",
+      count: 0,
+      isShow: true,
+      rules: {
+        ippz_ssid: [
+          { required: true, message: "请输入客户端SSID", trigger: "blur" },
+        ],
+        ippz_mm: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+  },
+  methods: {
+    // 登陆时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveGate();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+        sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        // console.log(JSON.parse(data.data.mark_value));
+        let obj = JSON.parse(data.data.mark_value);
+        if (obj.ippz_ssid) {
+          this.formData.ippz_ssid = obj.ippz_ssid;
+          this.formData.ippz_rzfs = obj.ippz_rzfs;
+          this.formData.ippz_jmfs = obj.ippz_jmfs;
+          this.formData.ippz_mm = obj.ippz_mm;
+        }
+      }
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gateway {
+  position: absolute;
+  left: 648px;
+  top: 226px;
+  width: 470px;
+  height: 384px;
+  line-height: 20px;
+  background: url(../assets/image/bg.png);
+  background-size: 100% 100%;
+  // background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(187, 187, 187, 1);
+
+  .el-divider--horizontal {
+    margin: 10px 0;
+  }
+
+  .title {
+    margin: 13px 6px 0px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 53px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_center {
+      width: 288px;
+      height: 26px;
+      line-height: 26px;
+      color: rgba(189, 49, 36, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      color: rgb(255, 255, 255);
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      // color: rgba(111, 103, 103, 1);
+    }
+  }
+
+  /deep/ .content {
+    margin-left: 62px;
+    margin-right: 114px;
+
+    .el-input__inner {
+      width: 200px;
+      height: 30px;
+    }
+  }
+
+  /deep/ .footer {
+    .el-button {
+      width: 80px;
+      height: 30px;
+      line-height: 0.5;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/ChiGateway_20231111180246.vue b/.history/src/components/ChiGateway_20231111180246.vue
new file mode 100644
index 0000000..cb5b7e5
--- /dev/null
+++ b/.history/src/components/ChiGateway_20231111180246.vue
@@ -0,0 +1,231 @@
+<!-- 斥候数据采集——有线网关配置 -->
+<template>
+  <div>
+    <div class="gateway" v-show="isShow" v-loading="loading">
+      <div class="title">
+        <p class="title_l" style="color: #fff">新建网关</p>
+        <i class="el-icon-close title_r" @click="isShow = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="网关名称:" :label-width="formLabelWidth" prop="wgpz_wgmc">
+                <el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="网关ID:" :label-width="formLabelWidth" prop="wgpz_wgid">
+                <el-select v-model="formData.wgpz_wgid" placeholder="请选择" style="width: 200px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="footer">
+            <el-button type="primary" @click="submitForm">保 存</el-button>
+            <el-button @click="isShow = false">取 消</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="saveGate">确定</el-button>
+          <el-button @click="innerVisible = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  name: "TestChiGate",
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      options1: [
+        {
+          value: "有线区网关2",
+          label: "有线区网关2",
+        },
+        {
+          value: "无线区网关2",
+          label: "无线区网关2",
+        },
+      ],
+      options2: [
+        {
+          value: "LAN-BOX2",
+          label: "LAN-BOX2",
+        },
+        {
+          value: "WLAN-BOX2",
+          label: "WLAN-BOX2",
+        },
+      ],
+      formData: {
+        wgpz_wgmc: "",
+        wgpz_wgid: "",
+      },
+      innerVisible: false,
+      labelPosition: "left",
+      formLabelWidth: "96px",
+      count: 0,
+      isShow: true,
+      rules: {
+        gateway_id: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        gateway_name: [
+          { required: true, message: "请输入网关名称", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+  },
+  methods: {
+    // 登陆时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.innerVisible = true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+        step:"1",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+        this.$router.push(`/configuration?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      // console.log(res);
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        if (data.data.step == 1) {
+          this.$router.push(`/configuration?user_id=${this.user_id}`);
+        } else if (data.data.step == 2) {
+          this.$router.push(`/collectionpoint?user_id=${this.user_id}`);
+        } else {
+          console.log(JSON.parse(data.data.mark_value));
+          let obj = JSON.parse(data.data.mark_value);
+          if (obj.wgpz_wgid) {
+            this.formData.wgpz_wgid = obj.wgpz_wgid;
+            this.formData.wgpz_wgmc = obj.wgpz_wgmc;
+          }
+        }
+      }
+    },
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .gateway {
+  position: absolute;
+  left: 694px;
+  top: 188px;
+  width: 382px;
+  height: 309px;
+  line-height: 20px;
+  // background-color: rgba(255, 255, 255, 1);
+  background: url(../assets/image/bg.png);
+  background-size: 100% 100%;
+  text-align: center;
+  border: 1px solid rgba(187, 187, 187, 1);
+
+  .el-divider--horizontal {
+    margin: 8px 0;
+  }
+
+  .title {
+    margin: 13px 11px 0px 21px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 72px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      // color: rgba(111, 103, 103, 1);
+      color: rgb(255, 255, 255);
+    }
+  }
+
+  .content {
+    margin-left: 50px;
+    margin-right: 50px;
+
+    .el-input__inner {
+      width: 200px;
+      height: 30px;
+    }
+  }
+
+  /deep/ .footer {
+    .el-button {
+      width: 80px;
+      height: 30px;
+      line-height: 0.5;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/ChiGatewifi_20231111180314.vue b/.history/src/components/ChiGatewifi_20231111180314.vue
new file mode 100644
index 0000000..af92197
--- /dev/null
+++ b/.history/src/components/ChiGatewifi_20231111180314.vue
@@ -0,0 +1,233 @@
+<!-- 斥候无线数据采集——网关配置 -->
+<template>
+  <div>
+    <!-- <el-button type="info" plain @click="getShow">斥候数据采集网关配置</el-button> -->
+    <div class="gateway" v-show="isShow" v-loading="loading">
+      <div class="title">
+        <p class="title_l">新建网关</p>
+        <i class="el-icon-close title_r" @click="isShow = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="网关名称:" :label-width="formLabelWidth" prop="wgpz_wgmc">
+                <el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
+                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="网关ID:" :label-width="formLabelWidth" prop="wgpz_wgid">
+                <el-select v-model="formData.wgpz_wgid" placeholder="请选择" style="width: 200px">
+                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="footer">
+            <el-button type="primary" @click="submitForm">保 存</el-button>
+
+            <el-button @click="isShow = false">取 消</el-button>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div>
+      <el-dialog title="系统提示" :visible.sync="innerVisible" append-to-body width="382px">
+        <p class="inner_content" style="color: #fff">
+          请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
+        </p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="saveGate">确定</el-button>
+          <el-button @click="innerVisible = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  name: "TestChiGate",
+
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      options1: [
+        {
+          value: "有线区网关2",
+          label: "有线区网关2",
+        },
+        {
+          value: "无线区网关2",
+          label: "无线区网关2",
+        },
+      ],
+      options2: [
+        {
+          value: "LAN-BOX2",
+          label: "LAN-BOX2",
+        },
+        {
+          value: "WLAN-BOX2",
+          label: "WLAN-BOX2",
+        },
+      ],
+      formData: {
+        wgpz_wgmc: "",
+        wgpz_wgid: "",
+      },
+      innerVisible: false,
+      labelPosition: "left",
+      formLabelWidth: "96px",
+      count: 0,
+      isShow: true,
+      rules: {
+        gateway_id: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        gateway_name: [
+          { required: true, message: "请输入网关名称", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+  },
+  methods: {
+    // 登陆时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.innerVisible = true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+        step: "1",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+        sessionStorage.setItem("CHGYWG_wx", JSON.stringify(this.formData));
+        this.$router.push(`/chiwifidevice?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (data.data && data.state) {
+        if (data.data.step == 1) {
+          this.$router.push(`/chiwifidevice?user_id=${this.user_id}`);
+        } else if (data.data.step == 2) {
+          this.$router.push(`/chiwificollect?user_id=${this.user_id}`);
+        } else {
+          console.log(JSON.parse(data.data.mark_value));
+          let obj = JSON.parse(data.data.mark_value);
+          if (obj.wgpz_wgid) {
+            this.formData.wgpz_wgid = obj.wgpz_wgid;
+            this.formData.wgpz_wgmc = obj.wgpz_wgmc;
+          }
+        }
+      }
+    },
+  },
+  mounted() {
+    this.GetUserAnswer();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .gateway {
+  position: absolute;
+  left: 694px;
+  top: 188px;
+  width: 382px;
+  height: 309px;
+  line-height: 20px;
+  // background-color: rgba(255, 255, 255, 1);
+  background: url(../assets/image/bg.png);
+  background-size: 100% 100%;
+  text-align: center;
+  border: 1px solid rgba(187, 187, 187, 1);
+
+  .el-divider--horizontal {
+    margin: 8px 0;
+  }
+
+  .title {
+    margin: 13px 11px 0px 21px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 72px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
+    }
+  }
+
+  .content {
+    margin-left: 50px;
+    margin-right: 50px;
+
+    .el-input__inner {
+      width: 200px;
+      height: 30px;
+    }
+  }
+
+  /deep/ .footer {
+    .el-button {
+      width: 80px;
+      height: 30px;
+      line-height: 0.5;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/ChiWireld_20231111180329.vue b/.history/src/components/ChiWireld_20231111180329.vue
new file mode 100644
index 0000000..6718503
--- /dev/null
+++ b/.history/src/components/ChiWireld_20231111180329.vue
@@ -0,0 +1,548 @@
+<!-- 斥候有线网关页面 -->
+<template>
+  <div>
+    <!-- <el-button type="info" plain @click="getShow">斥候有线网关</el-button> -->
+    <div class="gateway" v-show="isShow">
+      <div class="title">
+        <p class="title_l">IP配置</p>
+        <p class="title_center">本页面涉及排错，请检查修改默认值</p>
+        <i class="el-icon-close title_r" @click="isShow = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <div class="lan">
+          <el-form v-loading="loading" :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网络类型:" :label-width="formLabelWidth" prop="ippz_wllx">
+                  <el-select v-model="formData.ippz_wllx" placeholder="静态IP" style="width: 200px">
+                    <el-option label="静态IP" value="静态IP"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="子网掩码:" :label-width="formLabelWidth" prop="ippz_zwym">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym1"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="DNS:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="备用DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="isShow = false">取 消</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  name: "TestChiGate",
+
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      formData: {
+        ippz_wllx: "静态IP",
+        ippz_ip: "",
+        ippz_zwym: "",
+        ippz_wg: "",
+        ippz_dns: "",
+        ippz_dns_by: "",
+      },
+      ippz_ip1: "192",
+      ippz_ip2: "168",
+      ippz_ip3: "1",
+      ippz_ip4: "1",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_wg1: "192",
+      ippz_wg2: "168",
+      ippz_wg3: "1",
+      ippz_wg4: "1",
+      ippz_dns1: "8",
+      ippz_dns2: "8",
+      ippz_dns3: "8",
+      ippz_dns4: "8",
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      radio: "1",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      count: 0,
+      isShow: true,
+      rules: {
+        ippz_wllx: [{ required: true, message: "请输入网络类型", trigger: "blur" }],
+        ippz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIp,
+          trigger: "blur"
+        }],
+        ippz_zwym: [{
+          required: true,
+          message: "",
+          validator: this.validateZwym,
+          trigger: "blur"
+        }],
+        ippz_dns_by: [{
+          required: true,
+          message: "",
+          validator: this.validateDnsBy,
+          trigger: "blur"
+        }],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+  },
+  mounted() { },
+
+  methods: {
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_wg1 +
+        "." +
+        this.ippz_wg2 +
+        "." +
+        this.ippz_wg3 +
+        "." +
+        this.ippz_wg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_wg1 +
+          "." +
+          this.ippz_wg2 +
+          "." +
+          this.ippz_wg3 +
+          "." +
+          this.ippz_wg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    SliceData(value) {
+      let res = value.split(".");
+      // console.log(res);
+      return res;
+    },
+    // 保存数据,发送请求
+    async saveAll() {
+      // this.dialogFormVisible = false;
+      this.isShow = false;
+      this.formData.ippz_ip = this.Merge(
+        this.formData.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formData.ippz_zwym = this.Merge(
+        this.formData.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formData.ippz_wg = this.Merge(
+        this.formData.ippz_wg,
+        this.ippz_wg1,
+        this.ippz_wg2,
+        this.ippz_wg3,
+        this.ippz_wg4
+      );
+      this.formData.ippz_dns = this.Merge(
+        this.formData.ippz_dns,
+        this.ippz_dns1,
+        this.ippz_dns2,
+        this.ippz_dns3,
+        this.ippz_dns4
+      );
+      this.formData.ippz_dns_by = this.Merge(
+        this.formData.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+      }else{
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+
+    },
+    //读取缓存
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(data);
+      if (data.data !== null && data.state) {
+        var obj = JSON.parse(data.data.mark_value);
+        console.log(obj);
+        this.formData.ippz_wllx = obj.ippz_wllx;
+        if (obj.ippz_ip) {
+          this.ippz_ip1 = obj.ippz_ip.split(".")[0];
+          this.ippz_ip2 = obj.ippz_ip.split(".")[1];
+          this.ippz_ip3 = obj.ippz_ip.split(".")[2];
+          this.ippz_ip4 = obj.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = obj.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = obj.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = obj.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = obj.ippz_zwym.split(".")[3];
+          this.ippz_wg1 = obj.ippz_wg.split(".")[0];
+          this.ippz_wg2 = obj.ippz_wg.split(".")[1];
+          this.ippz_wg3 = obj.ippz_wg.split(".")[2];
+          this.ippz_wg4 = obj.ippz_wg.split(".")[3];
+          this.ippz_dns1 = obj.ippz_dns.split(".")[0];
+          this.ippz_dns2 = obj.ippz_dns.split(".")[1];
+          this.ippz_dns3 = obj.ippz_dns.split(".")[2];
+          this.ippz_dns4 = obj.ippz_dns.split(".")[3];
+        }
+      }
+    },
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gateway {
+  position: absolute;
+  top: 145px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 470px;
+  // height:358px;
+  height: 500px;
+  // height: 725px;
+  line-height: 20px;
+  // background-color: rgba(255, 255, 255, 1);
+  // text-align: center;
+  background: url(../assets/image/bg.png);
+  background-size: 100% 100%;
+  border: 1px solid rgba(187, 187, 187, 1);
+
+  .title {
+    margin: 13px 6px 0px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 53px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_center {
+      width: 288px;
+      height: 26px;
+      line-height: 26px;
+      color: rgba(189, 49, 36, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      // color: rgba(111, 103, 103, 1);
+      color: rgb(255, 255, 255);
+    }
+  }
+
+  .content {
+    margin: 0px 53px 0px 56px;
+
+    /deep/.lan {
+      .el-input__inner {
+        height: 30px;
+        text-align: center;
+        padding: 0;
+      }
+
+      .el-row {
+        display: flex;
+        align-items: flex-end;
+
+        .el-col-1 {
+          padding-left: 2px;
+          color: black;
+          text-align: left;
+          line-height: 15px;
+          height: 20px;
+        }
+
+        .el-col-24 {
+          padding-right: 32px;
+        }
+      }
+    }
+  }
+
+  /deep/ .footer {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .el-button {
+      width: 80px;
+      height: 30px;
+      line-height: 0.5;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/ChiWireld_20231111184255.vue b/.history/src/components/ChiWireld_20231111184255.vue
new file mode 100644
index 0000000..318d0dd
--- /dev/null
+++ b/.history/src/components/ChiWireld_20231111184255.vue
@@ -0,0 +1,548 @@
+<!-- 斥候有线网关页面 -->
+<template>
+  <div>
+    <!-- <el-button type="info" plain @click="getShow">斥候有线网关</el-button> -->
+    <div class="gateway" v-show="isShow">
+      <div class="title">
+        <p class="title_l">IP配置</p>
+        <p class="title_center">本页面涉及排错，请检查修改默认值</p>
+        <i class="el-icon-close title_r" @click="isShow = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <div class="lan">
+          <el-form v-loading="loading" :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网络类型:" :label-width="formLabelWidth" prop="ippz_wllx">
+                  <el-select v-model="formData.ippz_wllx" placeholder="静态IP" style="width: 200px">
+                    <el-option label="静态IP" value="静态IP"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="子网掩码:" :label-width="formLabelWidth" prop="ippz_zwym">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym1"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网关:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_wg4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="DNS:" :label-width="formLabelWidth">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="备用DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="isShow = false">取 消</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  name: "TestChiGate",
+
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      formData: {
+        ippz_wllx: "静态IP",
+        ippz_ip: "",
+        ippz_zwym: "",
+        ippz_wg: "",
+        ippz_dns: "",
+        ippz_dns_by: "",
+      },
+      ippz_ip1: "192",
+      ippz_ip2: "168",
+      ippz_ip3: "1",
+      ippz_ip4: "1",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_wg1: "192",
+      ippz_wg2: "168",
+      ippz_wg3: "1",
+      ippz_wg4: "1",
+      ippz_dns1: "8",
+      ippz_dns2: "8",
+      ippz_dns3: "8",
+      ippz_dns4: "8",
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      radio: "1",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      count: 0,
+      isShow: true,
+      rules: {
+        ippz_wllx: [{ required: true, message: "请输入网络类型", trigger: "blur" }],
+        ippz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIp,
+          trigger: "blur"
+        }],
+        ippz_zwym: [{
+          required: true,
+          message: "",
+          validator: this.validateZwym,
+          trigger: "blur"
+        }],
+        ippz_dns_by: [{
+          required: true,
+          message: "",
+          validator: this.validateDnsBy,
+          trigger: "blur"
+        }],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+  },
+  mounted() { },
+
+  methods: {
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_wg1 +
+        "." +
+        this.ippz_wg2 +
+        "." +
+        this.ippz_wg3 +
+        "." +
+        this.ippz_wg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_wg1 +
+          "." +
+          this.ippz_wg2 +
+          "." +
+          this.ippz_wg3 +
+          "." +
+          this.ippz_wg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    SliceData(value) {
+      let res = value.split(".");
+      // console.log(res);
+      return res;
+    },
+    // 保存数据,发送请求
+    async saveAll() {
+      // this.dialogFormVisible = false;
+      this.isShow = false;
+      this.formData.ippz_ip = this.Merge(
+        this.formData.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formData.ippz_zwym = this.Merge(
+        this.formData.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formData.ippz_wg = this.Merge(
+        this.formData.ippz_wg,
+        this.ippz_wg1,
+        this.ippz_wg2,
+        this.ippz_wg3,
+        this.ippz_wg4
+      );
+      this.formData.ippz_dns = this.Merge(
+        this.formData.ippz_dns,
+        this.ippz_dns1,
+        this.ippz_dns2,
+        this.ippz_dns3,
+        this.ippz_dns4
+      );
+      this.formData.ippz_dns_by = this.Merge(
+        this.formData.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+      }else{
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+
+    },
+    //读取缓存
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(data);
+      if (data.data !== null && data.state) {
+        var obj = JSON.parse(data.data.mark_value);
+        console.log(obj);
+        this.formData.ippz_wllx = obj.ippz_wllx;
+        if (obj.ippz_ip) {
+          this.ippz_ip1 = obj.ippz_ip.split(".")[0];
+          this.ippz_ip2 = obj.ippz_ip.split(".")[1];
+          this.ippz_ip3 = obj.ippz_ip.split(".")[2];
+          this.ippz_ip4 = obj.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = obj.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = obj.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = obj.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = obj.ippz_zwym.split(".")[3];
+          this.ippz_wg1 = obj.ippz_wg.split(".")[0];
+          this.ippz_wg2 = obj.ippz_wg.split(".")[1];
+          this.ippz_wg3 = obj.ippz_wg.split(".")[2];
+          this.ippz_wg4 = obj.ippz_wg.split(".")[3];
+          this.ippz_dns1 = obj.ippz_dns.split(".")[0];
+          this.ippz_dns2 = obj.ippz_dns.split(".")[1];
+          this.ippz_dns3 = obj.ippz_dns.split(".")[2];
+          this.ippz_dns4 = obj.ippz_dns.split(".")[3];
+        }
+      }
+    },
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gateway {
+  position: absolute;
+  top: 145px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 470px;
+  // height:358px;
+  height: 500px;
+  // height: 725px;
+  line-height: 20px;
+  // background-color: rgba(255, 255, 255, 1);
+  // text-align: center;
+  background: url(../assets/image/bg.png);
+  background-size: 100% 100%;
+  border: 1px solid rgba(187, 187, 187, 1);
+
+  .title {
+    margin: 13px 6px 0px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 53px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_center {
+      width: 288px;
+      height: 26px;
+      line-height: 26px;
+      color: rgba(189, 49, 36, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      // color: rgba(111, 103, 103, 1);
+      color: rgb(255, 255, 255);
+    }
+  }
+
+  .content {
+    margin: 0px 53px 0px 56px;
+
+    /deep/.lan {
+      .el-input__inner {
+        height: 30px;
+        text-align: center;
+        padding: 0;
+      }
+
+      .el-row {
+        display: flex;
+        align-items: flex-end;
+
+        .el-col-1 {
+          padding-left: 2px;
+          color: black;
+          text-align: left;
+          line-height: 15px;
+          height: 20px;
+        }
+
+        .el-col-24 {
+          padding-right: 32px;
+        }
+      }
+    }
+  }
+
+  /deep/ .footer {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .el-button {
+      width: 80px;
+      height: 30px;
+      line-height: 0.5;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/CloneView_20231111180352.vue b/.history/src/components/CloneView_20231111180352.vue
new file mode 100644
index 0000000..2c62546
--- /dev/null
+++ b/.history/src/components/CloneView_20231111180352.vue
@@ -0,0 +1,863 @@
+<!-- db——网关的数据采集MQTT云服务 -->
+<template>
+  <div class="Clone">
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage">
+      <div class="content" v-loading="loading">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">
+            MQTT Client
+          </h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启动</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveip">
+              <el-col :span="12">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip1">
+                        <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3">
+                        </el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip2">
+                        <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip3">
+                        <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip4">
+                        <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="网关SN号:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-divider></el-divider>
+            <el-row class="theme">
+              <el-col :span="12">
+                <el-form-item label="实时数据发布的主题" style="display: block" label-width="168px" prop="mqtt_sssjfbzt">
+                  <el-row>
+                    <el-col :span="15">
+                      <el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px"></el-input>
+                    </el-col>
+                    <el-col :span="9">
+                      <el-select v-model="formData.mqtt_qos" placeholder="请选择" style="width: 99px">
+                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <!-- <el-col :span="12">
+                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="mqtt_retained">
+                                    <el-switch v-model="formData.mqtt_retained"></el-switch>
+                                </el-form-item>
+                            </el-col> -->
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
+                  <el-input v-model="formData.mqtt_scms" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="上传周期(s):" label-width="108px" prop="mqtt_sczq">
+                  <el-input v-model="formData.mqtt_sczq" 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="mqtt_sjgl">
+                  <el-checkbox-group v-model="formData.mqtt_sjgl">
+                    <el-checkbox label="值改变"></el-checkbox>
+                    <el-checkbox label="采集成功"></el-checkbox>
+                    <el-checkbox label="时间戳改变"></el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="con_left_footer">
+              <el-button type="primary" @click="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">MQTT Client采集点</h3>
+            <el-divider></el-divider>
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                            <el-menu-item index="1">添加</el-menu-item>
+                            <el-menu-item index="2">保存</el-menu-item>
+                            <el-menu-item index="3">删除</el-menu-item>
+                        </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+  name: "CloneView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: true,
+        mqtt_ip: "",
+        mqtt_port: "",
+        mqtt_wgsn: "",
+        mqtt_sssjfbzt: "",
+        mqtt_qos: "qos1",
+        // mqtt_retained: false,
+        mqtt_scms: "",
+        mqtt_sczq: "",
+        mqtt_sjgl: [""],
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      options1: [
+        {
+          value: "qos0",
+          label: "qos0",
+        },
+        {
+          value: "qos1",
+          label: "qos1",
+        },
+        {
+          value: "qos2",
+          label: "qos2",
+        },
+      ],
+      options2: [
+        {
+          value: "周期上传",
+          label: "周期上传",
+        },
+        {
+          value: "整点上传",
+          label: "整点上传",
+        },
+      ],
+      points: [
+        {
+          id: 1,
+          label: "I/O点",
+          children: [
+            {
+              id: 2,
+              label: "Channel1",
+              children: [
+                {
+                  id: 3,
+                  label: "Device1",
+                  children: [
+                    {
+                      id: 4,
+                      label: "tag0001",
+                    },
+                    {
+                      id: 5,
+                      label: "tag0002",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      value: "qos0",
+      value1: 0,
+      labelPosition: "left",
+      formLabelWidth: "88px",
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              children: [
+                {
+                  label: "Modbus",
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              children: [
+                {
+                  label: "Mqtt Client",
+                },
+                {
+                  label: "Alink",
+                },
+                {
+                  label: "Tlink",
+                },
+                {
+                  label: "loTDDC",
+                },
+                {
+                  label: "Ulink",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      // 校验
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_port: [{ required: true, message: "请输入端口", trigger: "blur" }],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        mqtt_scms: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_sczq: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        mqtt_sjgl: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // IP地址的校验
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    // handleSelect(key) {
+    //     console.log(key);
+    //     if (key == 1 && this.isAdd == false) {
+    //         this.choose_point = true;
+    //     } else if (key == 1 && this.isAdd == true) {
+    //         this.$message({
+    //             message: '添加失败,只能添加一条数据',
+    //             type: 'error'
+    //         });
+    //         return false
+    //     }
+    // },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("answer");
+      this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.tableData),
+      });
+      // console.log(res);
+      sessionStorage.setItem("answer", JSON.stringify(this.tableData));
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    closeMenu(ev) {
+      // console.log({ ev });
+      this.dialogVisible = false;
+    },
+    async saveClone() {
+      var obj = {
+        mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_scms: this.formData.mqtt_scms,
+        mqtt_sczq: this.formData.mqtt_sczq,
+        mqtt_sjgl: this.formData.mqtt_sjgl,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      // console.log("1231");
+      // console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...obj };
+      // console.log(this.formData);
+
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      // console.log(res);
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      // console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        // console.log(obj);
+        this.formData.mqtt_qiyong = Boolean(obj.mqtt_qiyong);
+        if (obj.mqtt_ip) {
+          this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.formData.mqtt_scms = obj.mqtt_scms;
+          this.formData.mqtt_sczq = obj.mqtt_sczq;
+          this.formData.mqtt_sjgl = obj.mqtt_sjgl;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      // console.log(result);
+    },
+    async getTree() {
+      console.log("12341");
+      let res = await GetTree({ user_id: this.user_id, type: "1" });
+      // console.log(res);
+      // console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    },
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getTree();
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .el-button {
+    width: 80px;
+    height: 30px;
+    line-height: 0.5;
+  }
+
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 54px;
+  }
+
+  // .el-form-item {
+  //   margin-bottom: 0px;
+  // }
+
+  .el-row {
+    height: 50px;
+    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: 377px;
+    top: 69px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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;
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+
+      .el-checkbox-group {
+        margin-top: -28px;
+      }
+    }
+
+    .con_left {
+      width: 708px;
+      height: 100%;
+      position: relative;
+      border-top: 1px solid rgba(187, 187, 187, 1);
+      border-right: 1px solid rgba(187, 187, 187, 1);
+    }
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .theme {
+  height: 80px !important;
+  display: flex;
+  align-items: flex-end !important;
+
+  .el-col:first-child {
+    .el-form-item__label {
+      float: none;
+    }
+
+    .el-form-item__content {
+      margin-left: 0px !important;
+    }
+  }
+}
+
+.con_left_footer {
+  position: absolute;
+  left: 499px;
+  top: 777px;
+}
+
+/deep/ .serveip {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
diff --git a/.history/src/components/CloneView_20231111182422.vue b/.history/src/components/CloneView_20231111182422.vue
new file mode 100644
index 0000000..676d3ca
--- /dev/null
+++ b/.history/src/components/CloneView_20231111182422.vue
@@ -0,0 +1,837 @@
+<!-- db——网关的数据采集MQTT云服务 -->
+<template>
+  <div class="Clone">
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage">
+      <div class="content" v-loading="loading">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">
+            MQTT Client
+          </h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启动</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveip">
+              <el-col :span="12">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip1">
+                        <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3">
+                        </el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip2">
+                        <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip3">
+                        <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip4">
+                        <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="网关SN号:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-divider></el-divider>
+            <el-row class="theme">
+              <el-col :span="12">
+                <el-form-item label="实时数据发布的主题" style="display: block" label-width="168px" prop="mqtt_sssjfbzt">
+                  <el-row>
+                    <el-col :span="15">
+                      <el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px"></el-input>
+                    </el-col>
+                    <el-col :span="9">
+                      <el-select v-model="formData.mqtt_qos" placeholder="请选择" style="width: 99px">
+                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <!-- <el-col :span="12">
+                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="mqtt_retained">
+                                    <el-switch v-model="formData.mqtt_retained"></el-switch>
+                                </el-form-item>
+                            </el-col> -->
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
+                  <el-input v-model="formData.mqtt_scms" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="上传周期(s):" label-width="108px" prop="mqtt_sczq">
+                  <el-input v-model="formData.mqtt_sczq" 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="mqtt_sjgl">
+                  <el-checkbox-group v-model="formData.mqtt_sjgl">
+                    <el-checkbox label="值改变"></el-checkbox>
+                    <el-checkbox label="采集成功"></el-checkbox>
+                    <el-checkbox label="时间戳改变"></el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="con_left_footer">
+              <el-button type="primary" @click="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">MQTT Client采集点</h3>
+            <el-divider></el-divider>
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                            <el-menu-item index="1">添加</el-menu-item>
+                            <el-menu-item index="2">保存</el-menu-item>
+                            <el-menu-item index="3">删除</el-menu-item>
+                        </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+  name: "CloneView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: true,
+        mqtt_ip: "",
+        mqtt_port: "",
+        mqtt_wgsn: "",
+        mqtt_sssjfbzt: "",
+        mqtt_qos: "qos1",
+        // mqtt_retained: false,
+        mqtt_scms: "",
+        mqtt_sczq: "",
+        mqtt_sjgl: [""],
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      options1: [
+        {
+          value: "qos0",
+          label: "qos0",
+        },
+        {
+          value: "qos1",
+          label: "qos1",
+        },
+        {
+          value: "qos2",
+          label: "qos2",
+        },
+      ],
+      options2: [
+        {
+          value: "周期上传",
+          label: "周期上传",
+        },
+        {
+          value: "整点上传",
+          label: "整点上传",
+        },
+      ],
+      points: [
+        {
+          id: 1,
+          label: "I/O点",
+          children: [
+            {
+              id: 2,
+              label: "Channel1",
+              children: [
+                {
+                  id: 3,
+                  label: "Device1",
+                  children: [
+                    {
+                      id: 4,
+                      label: "tag0001",
+                    },
+                    {
+                      id: 5,
+                      label: "tag0002",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      value: "qos0",
+      value1: 0,
+      labelPosition: "left",
+      formLabelWidth: "88px",
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              children: [
+                {
+                  label: "Modbus",
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              children: [
+                {
+                  label: "Mqtt Client",
+                },
+                {
+                  label: "Alink",
+                },
+                {
+                  label: "Tlink",
+                },
+                {
+                  label: "loTDDC",
+                },
+                {
+                  label: "Ulink",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      // 校验
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_port: [{ required: true, message: "请输入端口", trigger: "blur" }],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        mqtt_scms: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_sczq: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        mqtt_sjgl: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // IP地址的校验
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    // handleSelect(key) {
+    //     console.log(key);
+    //     if (key == 1 && this.isAdd == false) {
+    //         this.choose_point = true;
+    //     } else if (key == 1 && this.isAdd == true) {
+    //         this.$message({
+    //             message: '添加失败,只能添加一条数据',
+    //             type: 'error'
+    //         });
+    //         return false
+    //     }
+    // },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("answer");
+      this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.tableData),
+      });
+      // console.log(res);
+      sessionStorage.setItem("answer", JSON.stringify(this.tableData));
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    closeMenu(ev) {
+      // console.log({ ev });
+      this.dialogVisible = false;
+    },
+    async saveClone() {
+      var obj = {
+        mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_scms: this.formData.mqtt_scms,
+        mqtt_sczq: this.formData.mqtt_sczq,
+        mqtt_sjgl: this.formData.mqtt_sjgl,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      // console.log("1231");
+      // console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...obj };
+      // console.log(this.formData);
+
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      // console.log(res);
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      // console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        // console.log(obj);
+        this.formData.mqtt_qiyong = Boolean(obj.mqtt_qiyong);
+        if (obj.mqtt_ip) {
+          this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.formData.mqtt_scms = obj.mqtt_scms;
+          this.formData.mqtt_sczq = obj.mqtt_sczq;
+          this.formData.mqtt_sjgl = obj.mqtt_sjgl;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      // console.log(result);
+    },
+    async getTree() {
+      console.log("12341");
+      let res = await GetTree({ user_id: this.user_id, type: "1" });
+      // console.log(res);
+      // console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getTree();
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .el-button {
+    width: 80px;
+    height: 30px;
+    line-height: 0.5;
+  }
+
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 54px;
+  }
+
+  // .el-form-item {
+  //   margin-bottom: 0px;
+  // }
+
+  .el-row {
+    height: 50px;
+    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: 377px;
+    top: 69px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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;
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+
+      .el-checkbox-group {
+        margin-top: -28px;
+      }
+    }
+
+    .con_left {
+      width: 708px;
+      height: 100%;
+      position: relative;
+      border-top: 1px solid rgba(187, 187, 187, 1);
+      border-right: 1px solid rgba(187, 187, 187, 1);
+    }
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .theme {
+  height: 80px !important;
+  display: flex;
+  align-items: flex-end !important;
+
+  .el-col:first-child {
+    .el-form-item__label {
+      float: none;
+    }
+
+    .el-form-item__content {
+      margin-left: 0px !important;
+    }
+  }
+}
+
+.con_left_footer {
+  position: absolute;
+  left: 499px;
+  top: 777px;
+}
+
+/deep/ .serveip {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
diff --git a/.history/src/components/CloneView_20231111182529.vue b/.history/src/components/CloneView_20231111182529.vue
new file mode 100644
index 0000000..47d2db6
--- /dev/null
+++ b/.history/src/components/CloneView_20231111182529.vue
@@ -0,0 +1,837 @@
+<!-- db——网关的数据采集MQTT云服务 -->
+<template>
+  <div class="Clone">
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage">
+      <div class="content" v-loading="loading">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">
+            MQTT Client
+          </h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启动</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveip">
+              <el-col :span="12">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip1">
+                        <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3">
+                        </el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip2">
+                        <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip3">
+                        <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip4">
+                        <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="网关SN号:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-divider></el-divider>
+            <el-row class="theme">
+              <el-col :span="12">
+                <el-form-item label="实时数据发布的主题" style="display: block" label-width="168px" prop="mqtt_sssjfbzt">
+                  <el-row>
+                    <el-col :span="15">
+                      <el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px"></el-input>
+                    </el-col>
+                    <el-col :span="9">
+                      <el-select v-model="formData.mqtt_qos" placeholder="请选择" style="width: 99px">
+                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <!-- <el-col :span="12">
+                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="mqtt_retained">
+                                    <el-switch v-model="formData.mqtt_retained"></el-switch>
+                                </el-form-item>
+                            </el-col> -->
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
+                  <el-input v-model="formData.mqtt_scms" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="上传周期(s):" label-width="108px" prop="mqtt_sczq">
+                  <el-input v-model="formData.mqtt_sczq" 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="mqtt_sjgl">
+                  <el-checkbox-group v-model="formData.mqtt_sjgl">
+                    <el-checkbox label="值改变"></el-checkbox>
+                    <el-checkbox label="采集成功"></el-checkbox>
+                    <el-checkbox label="时间戳改变"></el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="con_left_footer">
+              <el-button type="primary" @click="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">MQTT Client采集点</h3>
+            <el-divider></el-divider>
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                            <el-menu-item index="1">添加</el-menu-item>
+                            <el-menu-item index="2">保存</el-menu-item>
+                            <el-menu-item index="3">删除</el-menu-item>
+                        </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+  name: "CloneView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: true,
+        mqtt_ip: "",
+        mqtt_port: "",
+        mqtt_wgsn: "",
+        mqtt_sssjfbzt: "",
+        mqtt_qos: "qos1",
+        // mqtt_retained: false,
+        mqtt_scms: "",
+        mqtt_sczq: "",
+        mqtt_sjgl: [""],
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      options1: [
+        {
+          value: "qos0",
+          label: "qos0",
+        },
+        {
+          value: "qos1",
+          label: "qos1",
+        },
+        {
+          value: "qos2",
+          label: "qos2",
+        },
+      ],
+      options2: [
+        {
+          value: "周期上传",
+          label: "周期上传",
+        },
+        {
+          value: "整点上传",
+          label: "整点上传",
+        },
+      ],
+      points: [
+        {
+          id: 1,
+          label: "I/O点",
+          children: [
+            {
+              id: 2,
+              label: "Channel1",
+              children: [
+                {
+                  id: 3,
+                  label: "Device1",
+                  children: [
+                    {
+                      id: 4,
+                      label: "tag0001",
+                    },
+                    {
+                      id: 5,
+                      label: "tag0002",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      value: "qos0",
+      value1: 0,
+      labelPosition: "left",
+      formLabelWidth: "88px",
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              children: [
+                {
+                  label: "Modbus",
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              children: [
+                {
+                  label: "Mqtt Client",
+                },
+                {
+                  label: "Alink",
+                },
+                {
+                  label: "Tlink",
+                },
+                {
+                  label: "loTDDC",
+                },
+                {
+                  label: "Ulink",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      // 校验
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_port: [{ required: true, message: "请输入端口", trigger: "blur" }],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        mqtt_scms: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_sczq: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        mqtt_sjgl: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // IP地址的校验
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    // handleSelect(key) {
+    //     console.log(key);
+    //     if (key == 1 && this.isAdd == false) {
+    //         this.choose_point = true;
+    //     } else if (key == 1 && this.isAdd == true) {
+    //         this.$message({
+    //             message: '添加失败,只能添加一条数据',
+    //             type: 'error'
+    //         });
+    //         return false
+    //     }
+    // },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("answer");
+      this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.tableData),
+      });
+      // console.log(res);
+      sessionStorage.setItem("answer", JSON.stringify(this.tableData));
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    closeMenu(ev) {
+      // console.log({ ev });
+      this.dialogVisible = false;
+    },
+    async saveClone() {
+      var obj = {
+        mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_scms: this.formData.mqtt_scms,
+        mqtt_sczq: this.formData.mqtt_sczq,
+        mqtt_sjgl: this.formData.mqtt_sjgl,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      // console.log("1231");
+      // console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...obj };
+      // console.log(this.formData);
+
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+      // console.log(res);
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      // console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        // console.log(obj);
+        this.formData.mqtt_qiyong = Boolean(obj.mqtt_qiyong);
+        if (obj.mqtt_ip) {
+          this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.formData.mqtt_scms = obj.mqtt_scms;
+          this.formData.mqtt_sczq = obj.mqtt_sczq;
+          this.formData.mqtt_sjgl = obj.mqtt_sjgl;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      // console.log(result);
+    },
+    async getTree() {
+      console.log("12341");
+      let res = await GetTree({ user_id: this.user_id, type: "1" });
+      // console.log(res);
+      // console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getTree();
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .el-button {
+    width: 80px;
+    height: 30px;
+    line-height: 0.5;
+  }
+
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 54px;
+  }
+
+  // .el-form-item {
+  //   margin-bottom: 0px;
+  // }
+
+  .el-row {
+    height: 50px;
+    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: 377px;
+    top: 69px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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;
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+
+      .el-checkbox-group {
+        margin-top: -28px;
+      }
+    }
+
+    .con_left {
+      width: 708px;
+      height: 100%;
+      position: relative;
+      border-top: 1px solid rgba(187, 187, 187, 1);
+      border-right: 1px solid rgba(187, 187, 187, 1);
+    }
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .theme {
+  height: 80px !important;
+  display: flex;
+  align-items: flex-end !important;
+
+  .el-col:first-child {
+    .el-form-item__label {
+      float: none;
+    }
+
+    .el-form-item__content {
+      margin-left: 0px !important;
+    }
+  }
+}
+
+.con_left_footer {
+  position: absolute;
+  left: 499px;
+  top: 777px;
+}
+
+/deep/ .serveip {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
diff --git a/.history/src/components/CloneWifi_20231111180408.vue b/.history/src/components/CloneWifi_20231111180408.vue
new file mode 100644
index 0000000..0551f56
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231111180408.vue
@@ -0,0 +1,863 @@
+<!-- db——网关的数据采集MQTT云服务 -->
+<template>
+  <div class="Clone">
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage">
+      <div class="content" v-loading="loading">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">
+            MQTT Client
+          </h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启动</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveip">
+              <el-col :span="12">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip1">
+                        <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3">
+                        </el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip2">
+                        <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip3">
+                        <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip4">
+                        <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="网关SN号:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-divider></el-divider>
+            <el-row class="theme">
+              <el-col :span="12">
+                <el-form-item label="实时数据发布的主题" style="display: block" label-width="168px" prop="mqtt_sssjfbzt">
+                  <el-row>
+                    <el-col :span="15">
+                      <el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px"></el-input>
+                    </el-col>
+                    <el-col :span="9">
+                      <el-select v-model="formData.mqtt_qos" placeholder="请选择" style="width: 99px">
+                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <!-- <el-col :span="12">
+                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="mqtt_retained">
+                                    <el-switch v-model="formData.mqtt_retained"></el-switch>
+                                </el-form-item>
+                            </el-col> -->
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
+                  <el-input v-model="formData.mqtt_scms" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="上传周期(s):" label-width="108px" prop="mqtt_sczq">
+                  <el-input v-model="formData.mqtt_sczq" 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="mqtt_sjgl">
+                  <el-checkbox-group v-model="formData.mqtt_sjgl">
+                    <el-checkbox label="值改变"></el-checkbox>
+                    <el-checkbox label="采集成功"></el-checkbox>
+                    <el-checkbox label="时间戳改变"></el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="con_left_footer">
+              <el-button type="primary" @click="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">MQTT Client采集点</h3>
+            <el-divider></el-divider>
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                            <el-menu-item index="1">添加</el-menu-item>
+                            <el-menu-item index="2">保存</el-menu-item>
+                            <el-menu-item index="3">删除</el-menu-item>
+                        </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+  name: "CloneWifi",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: true,
+        mqtt_ip: "",
+        mqtt_port: "",
+        mqtt_wgsn: "",
+        mqtt_sssjfbzt: "",
+        mqtt_qos: "qos1",
+        // mqtt_retained: false,
+        mqtt_scms: "周期上传",
+        mqtt_sczq: "",
+        mqtt_sjgl: ["采集成功"],
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      options1: [
+        {
+          value: "qos0",
+          label: "qos0",
+        },
+        {
+          value: "qos1",
+          label: "qos1",
+        },
+        {
+          value: "qos2",
+          label: "qos2",
+        },
+      ],
+      options2: [
+        {
+          value: "周期上传",
+          label: "周期上传",
+        },
+        {
+          value: "整点上传",
+          label: "整点上传",
+        },
+      ],
+      points: [
+        {
+          id: 1,
+          label: "I/O点",
+          children: [
+            {
+              id: 2,
+              label: "Channel1",
+              children: [
+                {
+                  id: 3,
+                  label: "Device1",
+                  children: [
+                    {
+                      id: 4,
+                      label: "tag0001",
+                    },
+                    {
+                      id: 5,
+                      label: "tag0002",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      value: "qos0",
+      value1: 0,
+      labelPosition: "left",
+      formLabelWidth: "88px",
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              children: [
+                {
+                  label: "Modbus",
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              children: [
+                {
+                  label: "Mqtt Client",
+                },
+                {
+                  label: "Alink",
+                },
+                {
+                  label: "Tlink",
+                },
+                {
+                  label: "loTDDC",
+                },
+                {
+                  label: "Ulink",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      // 校验
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_port: [{ required: true, message: "请输入端口", trigger: "blur" }],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        mqtt_scms: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_sczq: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        mqtt_sjgl: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    // IP地址的校验
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    // handleSelect(key) {
+    //     console.log(key);
+    //     if (key == 1 && this.isAdd == false) {
+    //         this.choose_point = true;
+    //     } else if (key == 1 && this.isAdd == true) {
+    //         this.$message({
+    //             message: '添加失败,只能添加一条数据',
+    //             type: 'error'
+    //         });
+    //         return false
+    //     }
+    // },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("answer");
+      this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.tableData),
+      });
+      console.log(res);
+      sessionStorage.setItem("answer", JSON.stringify(this.tableData));
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    async saveClone() {
+      var obj = {
+        mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_scms: this.formData.mqtt_scms,
+        mqtt_sczq: this.formData.mqtt_sczq,
+        mqtt_sjgl: this.formData.mqtt_sjgl,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_wx");
+      // console.log("1231");
+      console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...obj };
+      // console.log(this.formData);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      });
+      // console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        this.formData.mqtt_qiyong = Boolean(obj.mqtt_qiyong);
+        if (obj.mqtt_ip) {
+          this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.formData.mqtt_scms = obj.mqtt_scms;
+          this.formData.mqtt_sczq = obj.mqtt_sczq;
+          this.formData.mqtt_sjgl = obj.mqtt_sjgl;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "2",
+      })
+      // console.log(result);
+    },
+    async getTree() {
+      console.log("12341")
+      let res = await GetTree({ user_id: this.user_id, type: "2", })
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    }
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getTree();
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .el-button {
+    width: 80px;
+    height: 30px;
+    line-height: 0.5;
+  }
+
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 54px;
+  }
+
+  // .el-form-item {
+  //   margin-bottom: 0px;
+  // }
+
+  .el-row {
+    height: 50px;
+    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: 377px;
+    top: 69px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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;
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+
+      .el-checkbox-group {
+        margin-top: -28px;
+      }
+    }
+
+    .con_left {
+      width: 708px;
+      height: 100%;
+      position: relative;
+      border-top: 1px solid rgba(187, 187, 187, 1);
+      border-right: 1px solid rgba(187, 187, 187, 1);
+    }
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .theme {
+  height: 80px !important;
+  display: flex;
+  align-items: flex-end !important;
+
+  .el-col:first-child {
+    .el-form-item__label {
+      float: none;
+    }
+
+    .el-form-item__content {
+      margin-left: 0px !important;
+    }
+  }
+}
+
+.con_left_footer {
+  position: absolute;
+  left: 499px;
+  top: 777px;
+}
+
+/deep/ .serveip {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231111182636.vue b/.history/src/components/CloneWifi_20231111182636.vue
new file mode 100644
index 0000000..4c831a0
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231111182636.vue
@@ -0,0 +1,863 @@
+<!-- db——网关的数据采集MQTT云服务 -->
+<template>
+  <div class="Clone">
+    <!-- <div v-click-outside="closeMenu"> -->
+    <!-- <el-button type="info" plain @click="dialogVisible = !dialogVisible">MQTT云</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-click="treeNodeClick"
+        ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+    </div>
+    <!-- </div> -->
+    <div class="pas_params" v-show="add_passage">
+      <div class="content" v-loading="loading">
+        <div class="con_left">
+          <h3 class="mqtt" style="margin-top: 20px; color: white">
+            MQTT Client
+          </h3>
+          <el-divider></el-divider>
+          <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item>
+                  <el-checkbox v-model="formData.mqtt_qiyong">启动</el-checkbox>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row class="serveip">
+              <el-col :span="12">
+                <el-form-item label="服务器IP:" :label-width="formLabelWidth" prop="mqtt_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip1">
+                        <el-input v-model="mqtt_ip1" style="width: 43px; height: 30px" maxlength="3">
+                        </el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip2">
+                        <el-input v-model="mqtt_ip2" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip3">
+                        <el-input v-model="mqtt_ip3" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-form-item prop="mqtt_ip4">
+                        <el-input v-model="mqtt_ip4" style="width: 43px; height: 30px" maxlength="3"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="端口号:" :label-width="formLabelWidth" prop="mqtt_port">
+                  <el-input v-model="formData.mqtt_port" 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="网关SN号:" :label-width="formLabelWidth" prop="mqtt_wgsn">
+                  <el-input v-model="formData.mqtt_wgsn" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-divider></el-divider>
+            <el-row class="theme">
+              <el-col :span="12">
+                <el-form-item label="实时数据发布的主题" style="display: block" label-width="168px" prop="mqtt_sssjfbzt">
+                  <el-row>
+                    <el-col :span="15">
+                      <el-input v-model="formData.mqtt_sssjfbzt" placeholder="" style="width: 200px"></el-input>
+                    </el-col>
+                    <el-col :span="9">
+                      <el-select v-model="formData.mqtt_qos" placeholder="请选择" style="width: 99px">
+                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <!-- <el-col :span="12">
+                                <el-form-item label="retained:" :label-width="formLabelWidth" prop="mqtt_retained">
+                                    <el-switch v-model="formData.mqtt_retained"></el-switch>
+                                </el-form-item>
+                            </el-col> -->
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="上传模式:" :label-width="formLabelWidth" prop="mqtt_scms">
+                  <el-input v-model="formData.mqtt_scms" placeholder="" style="width: 200px; height: 30px"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="上传周期(s):" label-width="108px" prop="mqtt_sczq">
+                  <el-input v-model="formData.mqtt_sczq" 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="mqtt_sjgl">
+                  <el-checkbox-group v-model="formData.mqtt_sjgl">
+                    <el-checkbox label="值改变"></el-checkbox>
+                    <el-checkbox label="采集成功"></el-checkbox>
+                    <el-checkbox label="时间戳改变"></el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="con_left_footer">
+              <el-button type="primary" @click="submitForm">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <h3 class="mqtt" style="margin-top: 20px; color: white">MQTT Client采集点</h3>
+            <el-divider></el-divider>
+            <!-- <el-button type="info" plain @click="handleSelect">保存</el-button> -->
+            <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                            <el-menu-item index="1">添加</el-menu-item>
+                            <el-menu-item index="2">保存</el-menu-item>
+                            <el-menu-item index="3">删除</el-menu-item>
+                        </el-menu> -->
+          </div>
+          <el-table ref="singleTable" :data="tableData" style="width: 100%">
+            <el-table-column type="index"> </el-table-column>
+            <el-table-column property="mqtt_cjd_sbmc" label="设备名称">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_sbmc" placeholder="">
+                  <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column property="mqtt_cjd_tagid" label="TagID">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.mqtt_cjd_tagid" placeholder="">
+                  <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                    :value="option.value"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <!-- 添加按钮下显示出来的弹框信息 -->
+    <div>
+      <el-dialog title="选择点" :visible.sync="choose_point" width="30%">
+        <el-tree :data="points" show-checkbox node-key="id" :default-expanded-keys="[1, 2]"
+          :default-checked-keys="[3, 4, 5, 6]" :props="defaultProps">
+        </el-tree>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="savePoint">保 存</el-button>
+          <el-button @click="choose_point = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+  name: "CloneWifi",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      trees: [],
+      user_id: "",
+      formData: {
+        mqtt_qiyong: true,
+        mqtt_ip: "",
+        mqtt_port: "",
+        mqtt_wgsn: "",
+        mqtt_sssjfbzt: "",
+        mqtt_qos: "qos1",
+        // mqtt_retained: false,
+        mqtt_scms: "周期上传",
+        mqtt_sczq: "",
+        mqtt_sjgl: ["采集成功"],
+      },
+      mqtt_ip1: "",
+      mqtt_ip2: "",
+      mqtt_ip3: "",
+      mqtt_ip4: "",
+      options1: [
+        {
+          value: "qos0",
+          label: "qos0",
+        },
+        {
+          value: "qos1",
+          label: "qos1",
+        },
+        {
+          value: "qos2",
+          label: "qos2",
+        },
+      ],
+      options2: [
+        {
+          value: "周期上传",
+          label: "周期上传",
+        },
+        {
+          value: "整点上传",
+          label: "整点上传",
+        },
+      ],
+      points: [
+        {
+          id: 1,
+          label: "I/O点",
+          children: [
+            {
+              id: 2,
+              label: "Channel1",
+              children: [
+                {
+                  id: 3,
+                  label: "Device1",
+                  children: [
+                    {
+                      id: 4,
+                      label: "tag0001",
+                    },
+                    {
+                      id: 5,
+                      label: "tag0002",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      choose_point: false,
+      value: "qos0",
+      value1: 0,
+      labelPosition: "left",
+      formLabelWidth: "88px",
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      isAdd: false,
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              children: [
+                {
+                  label: "Modbus",
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              children: [
+                {
+                  label: "Mqtt Client",
+                },
+                {
+                  label: "Alink",
+                },
+                {
+                  label: "Tlink",
+                },
+                {
+                  label: "loTDDC",
+                },
+                {
+                  label: "Ulink",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 右边添加设备的字段
+      options2: [
+        {
+          label: "有线区精雕1",
+          value: "有线区精雕1",
+        },
+        {
+          label: "无线区精雕1",
+          value: "无线区精雕1",
+        },
+      ],
+      options3: [
+        {
+          value: "MachinePamHID909",
+          label: "MachinePamHID909",
+        },
+        {
+          value: "MachinePamHID910",
+          label: "MachinePamHID910",
+        },
+        {
+          value: "MachinePamHID911",
+          label: "MachinePamHID911",
+        },
+        {
+          value: "MachinePamHID912",
+          label: "MachinePamHID912",
+        },
+        {
+          value: "MachinePamHID913",
+          label: "MachinePamHID913",
+        },
+        {
+          value: "MachinePamHID914",
+          label: "MachinePamHID914",
+        },
+        {
+          value: "MachinePamHID915",
+          label: "MachinePamHID915",
+        },
+        {
+          value: "MachinePamHID916",
+          label: "MachinePamHID916",
+        },
+        {
+          value: "MachinePamHID917",
+          label: "MachinePamHID917",
+        },
+        {
+          value: "MachinePamHID918",
+          label: "MachinePamHID918",
+        },
+        {
+          value: "MachinePamHID919",
+          label: "MachinePamHID919",
+        },
+        {
+          value: "MachinePamHID920",
+          label: "MachinePamHID920",
+        },
+        {
+          value: "MachinePamHID921",
+          label: "MachinePamHID921",
+        },
+        {
+          value: "MachinePamHID922",
+          label: "MachinePamHID922",
+        },
+        {
+          value: "MachinePamHID923",
+          label: "MachinePamHID923",
+        },
+        {
+          value: "MachinePamHID924",
+          label: "MachinePamHID924",
+        },
+        {
+          value: "MachinePamHID925",
+          label: "MachinePamHID925",
+        },
+        {
+          value: "MachinePamHID926",
+          label: "MachinePamHID926",
+        },
+        {
+          value: "MachinePamHID927",
+          label: "MachinePamHID927",
+        },
+        {
+          value: "MachinePamHID928",
+          label: "MachinePamHID928",
+        },
+        {
+          value: "MachinePamHID929",
+          label: "MachinePamHID929",
+        },
+        {
+          value: "MachinePamHID930",
+          label: "MachinePamHID930",
+        },
+        {
+          value: "MachinePamHID931",
+          label: "MachinePamHID931",
+        },
+        {
+          value: "MachinePamHID932",
+          label: "MachinePamHID932",
+        },
+        {
+          value: "MachinePamHID933",
+          label: "MachinePamHID933",
+        },
+        {
+          value: "MachinePamHID934",
+          label: "MachinePamHID934",
+        },
+        {
+          value: "MachinePamHID935",
+          label: "MachinePamHID935",
+        },
+        {
+          value: "MachinePamHID936",
+          label: "MachinePamHID936",
+        },
+        {
+          value: "MachinePamHID937",
+          label: "MachinePamHID937",
+        },
+        {
+          value: "MachinePamHID938",
+          label: "MachinePamHID938",
+        },
+      ],
+      tableData: [
+        {
+          mqtt_cjd_sbmc: "无线区精雕1",
+          mqtt_cjd_tagid: "MachinePamHID909",
+        },
+      ],
+      // 校验
+      rules: {
+        mqtt_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        mqtt_port: [{ required: true, message: "请输入端口", trigger: "blur" }],
+        mqtt_wgsn: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        mqtt_scms: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_sczq: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        mqtt_sjgl: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    // IP地址的校验
+    validateIp(rule, value, callback) {
+      if (
+        this.mqtt_ip1 +
+        "." +
+        this.mqtt_ip2 +
+        "." +
+        this.mqtt_ip3 +
+        "." +
+        this.mqtt_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveClone();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    treeNodeClick() {
+      this.add_passage = true;
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    // handleSelect(key) {
+    //     console.log(key);
+    //     if (key == 1 && this.isAdd == false) {
+    //         this.choose_point = true;
+    //     } else if (key == 1 && this.isAdd == true) {
+    //         this.$message({
+    //             message: '添加失败,只能添加一条数据',
+    //             type: 'error'
+    //         });
+    //         return false
+    //     }
+    // },
+    async handleSelect() {
+      let datas = sessionStorage.getItem("answer");
+      this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.tableData),
+      });
+      console.log(res);
+      sessionStorage.setItem("answer", JSON.stringify(this.tableData));
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    async saveClone() {
+      var obj = {
+        mqtt_qiyong: String(Number(this.formData.mqtt_qiyong)),
+        mqtt_ip:
+          this.mqtt_ip1 +
+          "." +
+          this.mqtt_ip2 +
+          "." +
+          this.mqtt_ip3 +
+          "." +
+          this.mqtt_ip4,
+        mqtt_port: this.formData.mqtt_port,
+        mqtt_wgsn: this.formData.mqtt_wgsn,
+        mqtt_sssjfbzt: this.formData.mqtt_sssjfbzt,
+        mqtt_qos: this.formData.mqtt_qos,
+        mqtt_scms: this.formData.mqtt_scms,
+        mqtt_sczq: this.formData.mqtt_sczq,
+        mqtt_sjgl: this.formData.mqtt_sjgl,
+        mqtt_cjd_sbmc: this.tableData[0].mqtt_cjd_sbmc,
+        mqtt_cjd_tagid: this.tableData[0].mqtt_cjd_tagid,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_wx");
+      // console.log("1231");
+      console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...obj };
+      // console.log(this.formData);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+      console.log(res);
+    },
+    savePoint() {
+      this.choose_point = false;
+      this.isAdd = true;
+      this.$message({
+        message: "添加成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      });
+      // console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        this.formData.mqtt_qiyong = Boolean(obj.mqtt_qiyong);
+        if (obj.mqtt_ip) {
+          this.formData.mqtt_qiyong = Boolean(Number(obj.mqtt_qiyong));
+          this.mqtt_ip1 = obj.mqtt_ip.split(".")[0];
+          this.mqtt_ip2 = obj.mqtt_ip.split(".")[1];
+          this.mqtt_ip3 = obj.mqtt_ip.split(".")[2];
+          this.mqtt_ip4 = obj.mqtt_ip.split(".")[3];
+          this.formData.mqtt_port = obj.mqtt_port;
+          this.formData.mqtt_sssjfbzt = obj.mqtt_sssjfbzt;
+          this.formData.mqtt_wgsn = obj.mqtt_wgsn;
+          this.formData.mqtt_qos = obj.mqtt_qos;
+          this.formData.mqtt_scms = obj.mqtt_scms;
+          this.formData.mqtt_sczq = obj.mqtt_sczq;
+          this.formData.mqtt_sjgl = obj.mqtt_sjgl;
+          this.tableData[0].mqtt_cjd_sbmc = obj.mqtt_cjd_sbmc;
+          this.tableData[0].mqtt_cjd_tagid = obj.mqtt_cjd_tagid;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "2",
+      })
+      // console.log(result);
+    },
+    async getTree() {
+      console.log("12341")
+      let res = await GetTree({ user_id: this.user_id, type: "2", })
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    }
+  },
+  directives: {
+    "click-outside": {
+      bind: function (el, binding, vnode) {
+        console.log("el", el);
+        console.log("binding", binding);
+        el.event = function (event) {
+          // 检查点击是否发生在节点之内（包括子节点）
+          if (!(el == event.target || el.contains(event.target))) {
+            // 如果没有，则触发调用
+            // 若绑定值为函数，则执行
+            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+            if (typeof vnode.context[binding.expression] == "function") {
+              vnode.context[binding.expression](event);
+            }
+          }
+        };
+        // 绑定事件
+        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+        document.body.addEventListener("click", el.event, true);
+      },
+      unbind: function (el) {
+        // 解绑事件
+        document.body.removeEventListener("click", el.event, true);
+      },
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getTree();
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .pas_params {
+  .el-button {
+    width: 80px;
+    height: 30px;
+    line-height: 0.5;
+  }
+
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 54px;
+  }
+
+  // .el-form-item {
+  //   margin-bottom: 0px;
+  // }
+
+  .el-row {
+    height: 50px;
+    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: 377px;
+    top: 69px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    padding-left: 36px;
+    background-image: url(../assets/image/bg.png);
+    background-size: 100% 100%;
+    // 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;
+
+    /deep/ .con_left {
+      .el-con-5 {
+        width: 43px;
+      }
+
+      .el-checkbox-group {
+        margin-top: -28px;
+      }
+    }
+
+    .con_left {
+      width: 708px;
+      height: 100%;
+      position: relative;
+      border-top: 1px solid rgba(187, 187, 187, 1);
+      border-right: 1px solid rgba(187, 187, 187, 1);
+    }
+
+    .con_right {
+      width: 480px;
+
+      .dialog-footer {
+        .el-button {
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .theme {
+  height: 80px !important;
+  display: flex;
+  align-items: flex-end !important;
+
+  .el-col:first-child {
+    .el-form-item__label {
+      float: none;
+    }
+
+    .el-form-item__content {
+      margin-left: 0px !important;
+    }
+  }
+}
+
+.con_left_footer {
+  position: absolute;
+  left: 499px;
+  top: 777px;
+}
+
+/deep/ .serveip {
+  .el-form-item__error {
+    padding-top: 0px !important;
+    line-height: 0px !important;
+  }
+}
+
+.mqtt {
+  margin-left: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111184314.vue b/.history/src/components/CollectionView_20231111184314.vue
new file mode 100644
index 0000000..45c5950
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111184314.vue
@@ -0,0 +1,945 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees,this.nodekey);
+                this.updateLabelById(this.nodekey,this.formdata.sbpz_sbmc);
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            // this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111184807.vue b/.history/src/components/CollectionView_20231111184807.vue
new file mode 100644
index 0000000..45c5950
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111184807.vue
@@ -0,0 +1,945 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees,this.nodekey);
+                this.updateLabelById(this.nodekey,this.formdata.sbpz_sbmc);
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            // this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111184809.vue b/.history/src/components/CollectionView_20231111184809.vue
new file mode 100644
index 0000000..45c5950
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111184809.vue
@@ -0,0 +1,945 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees,this.nodekey);
+                this.updateLabelById(this.nodekey,this.formdata.sbpz_sbmc);
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            // this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111184810.vue b/.history/src/components/CollectionView_20231111184810.vue
new file mode 100644
index 0000000..45c5950
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111184810.vue
@@ -0,0 +1,945 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees,this.nodekey);
+                this.updateLabelById(this.nodekey,this.formdata.sbpz_sbmc);
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            // this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111184812.vue b/.history/src/components/CollectionView_20231111184812.vue
new file mode 100644
index 0000000..1df8251
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111184812.vue
@@ -0,0 +1,945 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees, this.nodekey);
+                this.updateLabelById(this.nodekey, this.formdata.sbpz_sbmc);
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            // this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111184902.vue b/.history/src/components/CollectionView_20231111184902.vue
new file mode 100644
index 0000000..1df8251
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111184902.vue
@@ -0,0 +1,945 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees, this.nodekey);
+                this.updateLabelById(this.nodekey, this.formdata.sbpz_sbmc);
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            // this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111185108.vue b/.history/src/components/CollectionView_20231111185108.vue
new file mode 100644
index 0000000..e3ab13d
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111185108.vue
@@ -0,0 +1,945 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees, this.nodekey);
+                this.updateLabelById(this.nodekey, this.formdata.sbpz_sbmc);
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231111185242.vue b/.history/src/components/CollectionView_20231111185242.vue
new file mode 100644
index 0000000..97a182b
--- /dev/null
+++ b/.history/src/components/CollectionView_20231111185242.vue
@@ -0,0 +1,946 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            selectlabel: "",
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                console.log(data.label);
+                this.selectlabel = data.label;
+                // console.log(node);
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                this.add_passage = false;
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.findNodeById(this.trees, this.nodekey);
+                this.updateLabelById(this.nodekey, this.formdata.sbpz_sbmc);
+
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "1",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            this.findLabelById(this.trees, this.nodeKey);
+            let datas = sessionStorage.getItem("DB-IotLite_yx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            this.add_passage = false;
+            let res4 = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+            });
+            if (res4.data.state) {
+                console.log(res4.data.state);
+                this.$message({
+                    message: "更改成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                // 修改树形控件的值
+
+                // this.trees
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res4.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+        // 修改树形控件的名字
+        findNodeById(nodes, targetId) {
+            let foundNode = null;
+
+            const findNode = (nodes) => {
+                for (const node of nodes) {
+                    if (node.id === targetId) {
+                        // 找到节点
+                        foundNode = node;
+                        return;
+                    }
+                    if (node.children) {
+                        findNode(node.children);
+                    }
+                }
+            };
+
+            findNode(nodes);
+            return foundNode;
+        },
+
+        updateLabelById(targetId, newLabel) {
+            const targetNode = this.findNodeById(this.treeData, targetId);
+
+            if (targetNode) {
+                // 找到节点，更新label值
+                this.$set(targetNode, 'label', newLabel);
+
+                // 强制更新视图
+                this.$forceUpdate();
+            }
+        }
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "1",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionWifi_20231111184327.vue b/.history/src/components/CollectionWifi_20231111184327.vue
new file mode 100644
index 0000000..db3af70
--- /dev/null
+++ b/.history/src/components/CollectionWifi_20231111184327.vue
@@ -0,0 +1,907 @@
+<!-- 采集点配置-有线 -->
+<template>
+    <div>
+        <!-- <div v-click-outside="closeMenu"> -->
+        <!-- 设置树形控件 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
+        <div v-show="dialogVisible" class="tree_menu">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">编辑</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" style="font-size: 12px">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <!-- </div> -->
+        <div class="pas_params" v-show="add_passage">
+            <div>
+                <el-button type="info" plain @click="handleSelect">保存</el-button>
+                <!-- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
+                <!-- 添加时只支持一条，不能多次添加 -->
+                <!-- <el-menu-item index="1">保存</el-menu-item> -->
+                <!-- </el-menu> -->
+
+            </div>
+            <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading">
+                <el-table-column type="index">
+                </el-table-column>
+                <el-table-column property="cjdpz_tagid" label="TagID">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_tagid" placeholder="0X">
+                            <el-option v-for="(option, index) in options1" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_mc" label="名称">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_mc" placeholder="0X">
+                            <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_sjq" label="数据区">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_sjq" placeholder="0X">
+                            <el-option v-for="(option, index) in options3" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_jcqdz" label="寄存地址(十进制)" width="150px">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.cjdpz_jcqdz" placeholder="1-9999"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_cjsjlx" label="采集数据类型">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_cjsjlx" placeholder="0X">
+                            <el-option v-for="(option, index) in options5" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_zjx" label="自节序">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_zjx" placeholder="0X">
+                            <el-option v-for="(option, index) in options6" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_dxsx" label="读写属性">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_dxsx" placeholder="0X">
+                            <el-option v-for="(option, index) in options7" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column property="cjdpz_beilv" label="倍率">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.cjdpz_beilv" placeholder="0X">
+                            <el-option v-for="(option, index) in options8" :key="index" :label="option.label"
+                                :value="option.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="dev_attribute">
+            <el-dialog title="设备属性" :visible.sync="edit_device" width="382px" v-loading="loading">
+                <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options9" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="(item, index) in options10" :key="index" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                                <el-input v-model="formdata.sbpz_mac" placeholder=""
+                                    style="width: 200px; height: 30px"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item>
+                                <!-- 需要修改的地方 -->
+                                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="基地址选择:">
+                                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="edit_device = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from '@/api/user';
+export default {
+    name: 'CollectionView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            gateway: "",
+            user_id: "",
+            trees: [],
+            nodekey: "",
+            tableData: [{
+                cjdpz_tagid: 'MachinePamHID909',
+                cjdpz_mc: '急停状态',
+                cjdpz_sjq: "0X (Coil Status)",
+                cjdpz_jcqdz: '',
+                cjdpz_cjsjlx: 'bool',
+                cjdpz_zjx: "Null",
+                cjdpz_dxsx: "读写",
+                cjdpz_beilv: "1",
+            }],
+            options1: [{
+                value: "MachinePamHID909",
+                label: "MachinePamHID909",
+            }, {
+                value: "MachinePamHID910",
+                label: "MachinePamHID910",
+            }, {
+                value: "MachinePamHID911",
+                label: "MachinePamHID911",
+            }, {
+                value: "MachinePamHID912",
+                label: "MachinePamHID912",
+            }, {
+                value: "MachinePamHID913",
+                label: "MachinePamHID913",
+            }, {
+                value: "MachinePamHID914",
+                label: "MachinePamHID914",
+            }, {
+                value: "MachinePamHID915",
+                label: "MachinePamHID915",
+            }, {
+                value: "MachinePamHID916",
+                label: "MachinePamHID916",
+            }, {
+                value: "MachinePamHID917",
+                label: "MachinePamHID917",
+            }, {
+                value: "MachinePamHID918",
+                label: "MachinePamHID918",
+            }, {
+                value: "MachinePamHID919",
+                label: "MachinePamHID919",
+            }, {
+                value: "MachinePamHID920",
+                label: "MachinePamHID920",
+            }, {
+                value: "MachinePamHID921",
+                label: "MachinePamHID921",
+            }, {
+                value: "MachinePamHID922",
+                label: "MachinePamHID922",
+            }, {
+                value: "MachinePamHID923",
+                label: "MachinePamHID923",
+            }, {
+                value: "MachinePamHID924",
+                label: "MachinePamHID924",
+            }, {
+                value: "MachinePamHID925",
+                label: "MachinePamHID925",
+            }, {
+                value: "MachinePamHID926",
+                label: "MachinePamHID926",
+            }, {
+                value: "MachinePamHID927",
+                label: "MachinePamHID927",
+            }, {
+                value: "MachinePamHID928",
+                label: "MachinePamHID928",
+            }, {
+                value: "MachinePamHID929",
+                label: "MachinePamHID929",
+            }, {
+                value: "MachinePamHID930",
+                label: "MachinePamHID930",
+            }, {
+                value: "MachinePamHID931",
+                label: "MachinePamHID931",
+            }, {
+                value: "MachinePamHID932",
+                label: "MachinePamHID932",
+            }, {
+                value: "MachinePamHID933",
+                label: "MachinePamHID933",
+            }, {
+                value: "MachinePamHID934",
+                label: "MachinePamHID934",
+            }, {
+                value: "MachinePamHID935",
+                label: "MachinePamHID935",
+            }, {
+                value: "MachinePamHID936",
+                label: "MachinePamHID936",
+            }, {
+                value: "MachinePamHID937",
+                label: "MachinePamHID937",
+            }, {
+                value: "MachinePamHID938",
+                label: "MachinePamHID938",
+            }],
+            options2: [{
+                value: "急停状态",
+                label: "急停状态",
+            }, {
+                value: "产量",
+                label: "产量",
+            },
+            {
+                value: "相对位置X",
+                label: "相对位置X",
+            },
+            {
+                value: "相对位置Y",
+                label: "相对位置Y",
+            },
+            {
+                value: "相对位置Z",
+                label: "相对位置Z",
+            },
+            {
+                value: "实际位置X",
+                label: "实际位置X",
+            },
+            {
+                value: "实际位置Y",
+                label: "实际位置Y",
+            },
+            {
+                value: "实际位置Z",
+                label: "实际位置Z",
+            },
+            {
+                value: "主轴转速",
+                label: "主轴转速",
+            },
+            {
+                value: "当前刀具",
+                label: "当前刀具",
+            },
+            {
+                value: "预选刀具",
+                label: "预选刀具",
+            },
+            {
+                value: "报警信息",
+                label: "报警信息",
+            },
+            {
+                value: "驱动单元电流",
+                label: "驱动单元电流",
+            },
+            {
+                value: "负载电流",
+                label: "负载电流",
+            },
+            {
+                value: "额定电流",
+                label: "额定电流",
+            },
+            {
+                value: "运行时间",
+                label: "运行时间",
+            },
+            {
+                value: "加工产品用时",
+                label: "加工产品用时",
+            },
+            {
+                value: "工作模式",
+                label: "工作模式",
+            },
+            {
+                value: "切削速度",
+                label: "切削速度",
+            },
+            {
+                value: "任务信息",
+                label: "任务信息",
+            },
+            {
+                value: "使能状态",
+                label: "使能状态",
+            },
+            {
+                value: "系统状态",
+                label: "系统状态",
+            },
+            {
+                value: "执行任务信息",
+                label: "执行任务信息",
+            },
+            {
+                value: "进给倍军",
+                label: "进给倍军",
+            },
+            {
+                value: "轴速度",
+                label: "轴速度",
+            },
+            {
+                value: "轴角度",
+                label: "轴角度",
+            },
+            {
+                value: "进给速度",
+                label: "进给速度",
+            }],
+            options3: [{
+                value: "0X (Coil Status)",
+                label: "0X (Coil Status)"
+            },
+            {
+                value: "1X (Input Status)",
+                label: "1X (Input Status)"
+            }, {
+                value: "3X (Input Registers)",
+                label: "3X (Input Registers)"
+            },
+            {
+                value: "4X (Holding Register)",
+                label: "4X (Holding Register)"
+            }],
+            options5: [{
+                value: " bool",
+                label: "bool"
+            },
+            {
+                value: "bit",
+                label: "bit"
+            }, {
+                value: "uint16",
+                label: "uint16"
+            },
+            {
+                value: "int16",
+                label: "int16"
+            },
+            {
+                value: "uint32",
+                label: "uint32"
+            },
+            {
+                value: "int32",
+                label: "int32"
+            }, {
+                value: "float",
+                label: "float"
+            },
+            {
+                value: "double",
+                label: "double"
+            }],
+            options6: [{
+                value: " Null",
+                label: "Null"
+            },
+            {
+                value: "Big-endian（4321）",
+                label: "Big-endian（4321）"
+            }, {
+                value: "Little-endian（1234）",
+                label: "Little-endian（1234）"
+            },
+            {
+                value: "Big-endian byte swap（2143）",
+                label: "Big-endian byte swap（2143）"
+            },
+            {
+                value: "Little-endian byte swap（3412）",
+                label: "Little-endian byte swap（3412）"
+            }],
+            options7: [{
+                value: "读写",
+                label: "读写"
+            },
+            {
+                value: "只读",
+                label: "只读"
+            }, {
+                value: "只写",
+                label: "只写"
+            }],
+            options8: [{
+                value: " 0.1",
+                label: "0.1"
+            },
+            {
+                value: "1",
+                label: "1"
+            }, {
+                value: "10",
+                label: "10"
+            },
+            {
+                value: "100",
+                label: "100"
+            }],
+            options9: [
+                {
+                    value: "有线区加工设备1",
+                    label: "有线区加工设备1",
+                },
+                {
+                    value: "无线区加工设备1",
+                    label: "无线区加工设备1",
+                },
+            ],
+            options10: [
+                {
+                    value: "有线区精雕1",
+                    label: "有线区精雕1",
+                },
+                {
+                    value: "无线区精雕1",
+                    label: "无线区精雕1",
+                },
+            ],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            edit_device: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            formdata: {
+                sbpz_sbid: "",
+                sbpz_sbmc: "",
+                sbpz_mac: "3C:2D:50:20:30:3D",
+                sbpz_jysb: false,
+                sbpz_jdzxz: false,
+            },
+            datas: [{
+                label: 'Gateway',
+                children: [{
+                    label: '数据采集',
+                    children: [{
+                        label: 'I/O点'
+                    },
+                    {
+                        label: '用户点',
+                    },
+                    {
+                        label: '计算点',
+                    },
+                    {
+                        label: '系统点',
+                    },
+                    ]
+                },
+                {
+                    label: "数据服务",
+                    children: [{
+                        label: "Modbus"
+                    }]
+                },
+                {
+                    label: "IOT",
+                    children: [
+                        {
+                            label: "Mqtt Client"
+                        },
+                        {
+                            label: "Alink"
+                        },
+                        {
+                            label: "Tlink"
+                        },
+                        {
+                            label: "loTDDC"
+                        },
+                        {
+                            label: "Ulink"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_mac: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    mounted() {
+        console.log(this.$route.query.user_id);
+        this.user_id = this.$route.query.user_id;
+    },
+
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formdata"].validate((valid) => {
+                if (valid) {
+                    this.saveDevice();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            console.log(node);
+            if (node.level == 2) {
+                this.menuShow = false;
+                this.menuShow = true;
+                this.nodekey = data.id;
+                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();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为编辑
+        async selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.edit_device = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.sbpz_sbid) {
+                    this.formdata.sbpz_sbid = obj.sbpz_sbid;
+                    this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+                    this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+                    this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+                    this.formdata.sbpz_mac = obj.sbpz_mac;
+                }
+                this.add_passage = false;
+            } else if (index == 2) {
+                this.$refs["tree"].remove(this.nodekey);
+                this.sendTree();
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                });
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick(key, keyPath) {
+            console.log(key);
+            console.log(keyPath);
+            // if (keyPath.id == 10 || key.label == "Mqtt Client") {
+            //     this.$router.push("./mqttconfig")
+            // }
+            this.add_passage = true;
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        async handleSelect() {
+            // console.log(this.tableData);
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            this.tableData = { ...JSON.parse(datas), ...this.tableData[0] };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                console.log(res);
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.tableData));
+                console.log(this.tableData);
+            } else {
+                this.$message({
+                    message: `保存失败`,
+                    type: "error",
+                });
+            }
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: this.user_id,
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                if (obj.cjdpz_tagid) {
+                    this.tableData[0].cjdpz_tagid = obj.cjdpz_tagid;
+                    this.tableData[0].cjdpz_mc = obj.cjdpz_mc;
+                    this.tableData[0].cjdpz_sjq = obj.cjdpz_sjq;
+                    this.tableData[0].cjdpz_jcqdz = obj.cjdpz_jcqdz;
+                    this.tableData[0].cjdpz_cjsjlx = obj.cjdpz_cjsjlx;
+                    this.tableData[0].cjdpz_zjx = obj.cjdpz_zjx;
+                    this.tableData[0].cjdpz_dxsx = obj.cjdpz_dxsx;
+                    this.tableData[0].cjdpz_beilv = obj.cjdpz_beilv;
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "2",
+            })
+            console.log(result);
+        },
+        // 保存设备的属性
+        async saveDevice() {
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            console.log(datas);
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_mac: this.formdata.sbpz_mac,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            datas = { ...JSON.parse(datas), ...obj };
+            this.add_passage = false;
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "3",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(JSON.parse(res.data.data.mark_value));
+                this.$refs["tree"].append({
+                    id: this.nodekey + 10000,
+                    label: this.formdata.sbpz_sbmc,
+                }, this.nodekey);
+                // console.log(this.trees);
+                this.sendTree();
+            } else {
+                this.$message({
+                    message: `保存失败,原因是${res.data.message}`,
+                    type: "error",
+                });
+            }
+        },
+    },
+    created() {
+        GetTree({
+            user_id: this.user_id,
+            type: "2",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        })
+        this.loading = true;
+        this.GetUserAnswer();
+        this.loading = false
+    },
+};
+</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;
+}
+
+/deep/ .pas_params {
+    position: absolute;
+    left: 362px;
+    top: 125px;
+    width: 1066px;
+    height: 716px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    // text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+
+    .el-button {
+        width: 80px;
+        height: 30px;
+        line-height: 0.5;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 54px;
+    }
+
+    .el-row {
+        height: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 377px;
+        top: 69px;
+        width: 1220px;
+        height: 836px;
+        line-height: 20px;
+        padding-left: 36px;
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 14px;
+        border: 1px solid rgba(187, 187, 187, 1);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .el-form-item {
+            margin-bottom: 0px;
+        }
+
+        /deep/ .con_left {
+            .el-con-5 {
+                width: 43px;
+            }
+        }
+
+        .con_left {
+            width: 709px;
+            position: relative;
+
+            .con_left_footer {
+                position: absolute;
+                left: 499px;
+                top: 777px;
+            }
+        }
+
+        .con_right {
+            width: 480px;
+
+            .dialog-footer {
+                .el-button {
+                    width: 80px;
+                    height: 30px;
+                    line-height: 0.5;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/DataAcquire_20231111180451.vue b/.history/src/components/DataAcquire_20231111180451.vue
new file mode 100644
index 0000000..91089f6
--- /dev/null
+++ b/.history/src/components/DataAcquire_20231111180451.vue
@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <div>
+      <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px" v-loading="loading">
+        <el-form :model="formData" :rules="rules" ref="formData" label-width="85px" class="demo-ruleForm">
+          <el-form-item label="网关名称:" prop="wgpz_wgmc">
+            <el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网关ID:" prop="wgpz_wgid">
+            <el-select v-model="formData.wgpz_wgid" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网关类型:" prop="wgpz_wglx">
+            <el-select v-model="formData.wgpz_wglx" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+          <p class="inner_content" style="color: #fff !important">
+            请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
+          </p>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="innerConfirm('formData')">确定</el-button>
+            <el-button @click="innerVisible = false">取 消</el-button>
+          </div>
+        </el-dialog>
+        <div slot="footer" class="dialog-footer-outer">
+          <el-button type="primary" @click="saveInfo('formData')">保存</el-button>
+          <el-button @click="outerVisible = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  name: "DataAcquire",
+
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      options1: [
+        {
+          value: "有线区网关1",
+          label: "有线区网关1",
+        },
+        {
+          value: "无线区网关1",
+          label: "无线区网关1",
+        },
+      ],
+      options2: [
+        {
+          value: "LAN-BOX1",
+          label: "LAN-BOX1",
+        },
+        {
+          value: "WLAN-BOX1",
+          label: "WLAN-BOX1",
+        },
+      ],
+      options3: [
+        {
+          value: "loT Lite网关",
+          label: "loT Lite网关",
+        },
+        {
+          value: "MODBUS网关",
+          label: "MODBUS网关",
+        },
+        {
+          value: "BACNET网关",
+          label: "BACNET网关",
+        },
+        {
+          value: "OPC UA网关",
+          label: "OPC UA网关",
+        },
+        {
+          value: "OPC DA网关",
+          label: "OPC DA网关",
+        },
+        {
+          value: "loT网关",
+          label: "loT网关",
+        },
+      ],
+      value: "",
+      formData: {
+        wgpz_wgmc: "",
+        wgpz_wgid: "",
+        wgpz_wglx: "",
+      },
+      rules: {
+        wgpz_wgmc: [
+          { required: true, message: "请选择网关名称", trigger: "blur" },
+        ],
+        wgpz_wgid: [
+          { required: true, message: "请选择网关id", trigger: "blur" },
+        ],
+        wgpz_wglx: [
+          { required: true, message: "请选择网关类型", trigger: "blur" },
+        ],
+      },
+      outerVisible: true,
+      innerVisible: false,
+    };
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // console.log('submit!');
+          this.innerVisible = true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    async innerConfirm() {
+      this.outerVisible = false;
+      this.innerVisible = false;
+      let datas = sessionStorage.getItem("DB-IotLite_wx");
+      console.log(JSON.parse(datas));
+      this.formdata = { ...JSON.parse(datas), ...this.formdata };
+      // console.log(this.formdata);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formdata),
+        step:"1",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+        this.$router.replace(`/dbcollectserial?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      // console.log(res);
+      // console.log(JSON.parse(res.data.data.mark_value));
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        if (res2.data.data.step == 1) {
+          this.$router.push(`/dbcollectserial?user_id=${this.user_id}`)
+        } else if (res2.data.data.step == 2) {
+          this.$router.push(`/dbserialdevice?user_id=${this.user_id}`)
+        } else if (res2.data.data.step == 3) {
+          this.$router.push(`/dbwificollect?user_id=${this.user_id}`)
+        } else {
+          console.log(res2);
+          let res3 = JSON.parse(res2.data.data.mark_value);
+          if (res3.wgpz_wgid) {
+            this.formData.wgpz_wgid = res3.wgpz_wgid;
+            console.log(this.formData.wgpz_wgid);
+            this.formData.wgpz_wgmc = res3.wgpz_wgmc;
+            this.formData.wgpz_wglx = res3.wgpz_wglx;
+          }
+        }
+      }
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getUserAnswer();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+  font-size: 14px;
+}
+
+.inner_content {
+  margin-left: 30px;
+  width: 280px;
+  height: 40px;
+  // color: rgba(255, 255, 255, 0);
+  font-size: 14px;
+  text-align: left;
+  font-family: "SourceHanSansSC-regular";
+}
+</style>
diff --git a/.history/src/components/DataAcquisition_20231111180506.vue b/.history/src/components/DataAcquisition_20231111180506.vue
new file mode 100644
index 0000000..3d97a9f
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231111180506.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div>
+      <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px" v-loading="loading">
+        <el-form :model="formData" :rules="rules" ref="formData" label-width="85px" class="demo-ruleForm">
+          <el-form-item label="网关名称:" prop="wgpz_wgmc">
+            <el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网关ID:" prop="wgpz_wgid">
+            <el-select v-model="formData.wgpz_wgid" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网关类型:" prop="wgpz_wglx">
+            <el-select v-model="formData.wgpz_wglx" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+          <p class="inner_content" style="color: #fff !important">
+            请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
+          </p>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="innerConfirm">确定</el-button>
+            <el-button @click="innerVisible = false">取 消</el-button>
+          </div>
+        </el-dialog>
+        <div slot="footer" class="dialog-footer-outer">
+          <el-button type="primary" @click="saveInfo">保存</el-button>
+          <el-button @click="outerVisible = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree } from "@/api/user";
+export default {
+  name: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      options1: [
+        {
+          value: "有线区网关1",
+          label: "有线区网关1",
+        },
+        {
+          value: "无线区网关1",
+          label: "无线区网关1",
+        },
+      ],
+      options2: [
+        {
+          value: "LAN-BOX1",
+          label: "LAN-BOX1",
+        },
+        {
+          value: "WLAN-BOX1",
+          label: "WLAN-BOX1",
+        },
+      ],
+      options3: [
+        {
+          value: "loT Lite网关",
+          label: "loT Lite网关",
+        },
+        {
+          value: "MODBUS网关",
+          label: "MODBUS网关",
+        },
+        {
+          value: "BACNET网关",
+          label: "BACNET网关",
+        },
+        {
+          value: "OPC UA网关",
+          label: "OPC UA网关",
+        },
+        {
+          value: "OPC DA网关",
+          label: "OPC DA网关",
+        },
+        {
+          value: "loT网关",
+          label: "loT网关",
+        },
+      ],
+      value: "",
+      formData: {
+        wgpz_wgmc: "",
+        wgpz_wgid: "",
+        wgpz_wglx: "",
+      },
+      rules: {
+        wgpz_wgmc: [
+          { required: true, message: "请选择网关名称", trigger: "blur" },
+        ],
+        wgpz_wgid: [
+          { required: true, message: "请选择网关id", trigger: "blur" },
+        ],
+        wgpz_wglx: [
+          { required: true, message: "请选择网关类型", trigger: "blur" },
+        ],
+      },
+      outerVisible: true,
+      innerVisible: false,
+    };
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    saveInfo() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          // console.log('submit!');
+          this.innerVisible = true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    async innerConfirm() {
+      this.outerVisible = false;
+      this.innerVisible = false;
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      // console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...this.formData };
+      console.log(datas);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+        step: "1",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+        this.$router.push(`/channelconfig?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      // console.log(JSON.parse(res.data.data.mark_value));
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      console.log(res2);
+      // console.log(res2.data.data.step);
+
+      if (res2.data.data && res2.data.state) {
+        if (res2.data.data.step == 1) {
+          this.$router.push(`/channelconfig?user_id=${this.user_id}`)
+        } else if (res2.data.data.step == 2) {
+          this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`)
+        } else if (res2.data.data.step == 3) {
+          this.$router.push(`/dbcollect?user_id=${this.user_id}`)
+        } else {
+          console.log(res2.data.data.mark_value);
+          let res3 = JSON.parse(res2.data.data.mark_value);
+          if (res3.wgpz_wgid) {
+            this.formData.wgpz_wgid = res3.wgpz_wgid;
+            console.log(this.formData.wgpz_wgid);
+            this.formData.wgpz_wgmc = res3.wgpz_wgmc;
+            this.formData.wgpz_wglx = res3.wgpz_wglx;
+          }
+        }
+      }
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getUserAnswer();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+  font-size: 14px;
+}
+
+.inner_content {
+  margin-left: 30px;
+  width: 280px;
+  height: 40px;
+  // color: rgba(255, 255, 255, 0);
+  font-size: 14px;
+  text-align: left;
+  font-family: "SourceHanSansSC-regular";
+}
+</style>
diff --git a/.history/src/components/DataAcquisition_20231111180509.vue b/.history/src/components/DataAcquisition_20231111180509.vue
new file mode 100644
index 0000000..3d97a9f
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231111180509.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div>
+      <el-dialog title="新建网关" :visible.sync="outerVisible" width="382px" v-loading="loading">
+        <el-form :model="formData" :rules="rules" ref="formData" label-width="85px" class="demo-ruleForm">
+          <el-form-item label="网关名称:" prop="wgpz_wgmc">
+            <el-select v-model="formData.wgpz_wgmc" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网关ID:" prop="wgpz_wgid">
+            <el-select v-model="formData.wgpz_wgid" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网关类型:" prop="wgpz_wglx">
+            <el-select v-model="formData.wgpz_wglx" placeholder="请选择" style="width: 200px">
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-dialog width="382px" title="系统提示" :visible.sync="innerVisible" append-to-body>
+          <p class="inner_content" style="color: #fff !important">
+            请确认选择的网关类型与网关实体一致:否则该工程无法下载至实体网关
+          </p>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="innerConfirm">确定</el-button>
+            <el-button @click="innerVisible = false">取 消</el-button>
+          </div>
+        </el-dialog>
+        <div slot="footer" class="dialog-footer-outer">
+          <el-button type="primary" @click="saveInfo">保存</el-button>
+          <el-button @click="outerVisible = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree } from "@/api/user";
+export default {
+  name: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      user_id: "",
+      options1: [
+        {
+          value: "有线区网关1",
+          label: "有线区网关1",
+        },
+        {
+          value: "无线区网关1",
+          label: "无线区网关1",
+        },
+      ],
+      options2: [
+        {
+          value: "LAN-BOX1",
+          label: "LAN-BOX1",
+        },
+        {
+          value: "WLAN-BOX1",
+          label: "WLAN-BOX1",
+        },
+      ],
+      options3: [
+        {
+          value: "loT Lite网关",
+          label: "loT Lite网关",
+        },
+        {
+          value: "MODBUS网关",
+          label: "MODBUS网关",
+        },
+        {
+          value: "BACNET网关",
+          label: "BACNET网关",
+        },
+        {
+          value: "OPC UA网关",
+          label: "OPC UA网关",
+        },
+        {
+          value: "OPC DA网关",
+          label: "OPC DA网关",
+        },
+        {
+          value: "loT网关",
+          label: "loT网关",
+        },
+      ],
+      value: "",
+      formData: {
+        wgpz_wgmc: "",
+        wgpz_wgid: "",
+        wgpz_wglx: "",
+      },
+      rules: {
+        wgpz_wgmc: [
+          { required: true, message: "请选择网关名称", trigger: "blur" },
+        ],
+        wgpz_wgid: [
+          { required: true, message: "请选择网关id", trigger: "blur" },
+        ],
+        wgpz_wglx: [
+          { required: true, message: "请选择网关类型", trigger: "blur" },
+        ],
+      },
+      outerVisible: true,
+      innerVisible: false,
+    };
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    saveInfo() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          // console.log('submit!');
+          this.innerVisible = true;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    async innerConfirm() {
+      this.outerVisible = false;
+      this.innerVisible = false;
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      // console.log(JSON.parse(datas));
+      datas = { ...JSON.parse(datas), ...this.formData };
+      console.log(datas);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+        step: "1",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+        this.$router.push(`/channelconfig?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      // console.log(JSON.parse(res.data.data.mark_value));
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      console.log(res2);
+      // console.log(res2.data.data.step);
+
+      if (res2.data.data && res2.data.state) {
+        if (res2.data.data.step == 1) {
+          this.$router.push(`/channelconfig?user_id=${this.user_id}`)
+        } else if (res2.data.data.step == 2) {
+          this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`)
+        } else if (res2.data.data.step == 3) {
+          this.$router.push(`/dbcollect?user_id=${this.user_id}`)
+        } else {
+          console.log(res2.data.data.mark_value);
+          let res3 = JSON.parse(res2.data.data.mark_value);
+          if (res3.wgpz_wgid) {
+            this.formData.wgpz_wgid = res3.wgpz_wgid;
+            console.log(this.formData.wgpz_wgid);
+            this.formData.wgpz_wgmc = res3.wgpz_wgmc;
+            this.formData.wgpz_wglx = res3.wgpz_wglx;
+          }
+        }
+      }
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getUserAnswer();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.data_acquire {
+  font-size: 14px;
+}
+
+.inner_content {
+  margin-left: 30px;
+  width: 280px;
+  height: 40px;
+  // color: rgba(255, 255, 255, 0);
+  font-size: 14px;
+  text-align: left;
+  font-family: "SourceHanSansSC-regular";
+}
+</style>
diff --git a/.history/src/components/DataView_20231111180521.vue b/.history/src/components/DataView_20231111180521.vue
new file mode 100644
index 0000000..54d47cc
--- /dev/null
+++ b/.history/src/components/DataView_20231111180521.vue
@@ -0,0 +1,798 @@
+<!-- IP设置-网络方式 -->
+<template>
+  <div>
+    <!-- 无线网关 -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" v-loading="loading" :append-to-body="true" width="894px">
+      <div class="form_content">
+        <div>
+          <p class="netWay">网络方式</p>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="2" style="color:white;">WIFI</el-radio>
+          <el-divider></el-divider>
+        </div>
+        <!-- v-if="ippz_lwfs == 1 ? true : false" -->
+        <div>
+          <h2>有线</h2>
+          <div class="wired">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="rule">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ruleForm.ippz_wangkou" placeholder="" style="width: 200px; height: 30px">
+                      <el-option label="ETH0" value="ETH0"></el-option>
+                      <el-option label="ETH1" value="ETH1"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" maxlength="3"></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="ippz_zwym">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px; height: 30px" v-model="ruleForm.ippz_mac"></el-input><el-button
+                          v-copy="ruleForm.ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <div class="wifi">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="ruleForm.ippz_wifi_ssid" placeholder="请输入SSID"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="密码:" :label-width="formLabelWidth" prop="ippz_wifi_mm">
+                    <el-input v-model="ruleForm.ippz_wifi_mm" 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="IP地址:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="子网掩码:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px" v-model="ruleForm.ippz_mac" /><el-button v-copy="ruleForm.ippz_mac"
+                          @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { GetUserAnswer, SaveUserAnswer } from "../api/user";
+export default {
+  name: "DataView",
+  data() {
+    return {
+      user_id: "",
+      ruleForm: {
+        ippz_lwfs: "2",
+        ippz_wangkou: "",
+        ippz_zwym: "2",
+        ippz_mrwg: "3",
+        ippz_dns_sx: "4",
+        ippz_dns_by: "5",
+        ippz_ip: "6",
+        ippz_mac: "3C:2D:50:20:30:3D",
+        ippz_wifi_ssid: "",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      ippz_mac: "3C:2D:50:20:30:3D",
+      loading: false,
+      // 无线的数据
+      ippz_wifi_ssid: "",
+      ippz_wifi_mm: "",
+
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIp,
+          trigger: "blur"
+        }],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+      },
+
+      // rules_ippz_wifi: {
+
+      //   ippz_dns_sx: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsSx,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_dns_by: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsBy,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_mac: [
+      //     { required: true, message: "请输入mac地址", trigger: "blur" },
+      //   ],
+      // },
+    };
+  },
+  methods: {
+    // 表单的校验
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    // 登陆时进行校验
+    submitForm() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    SliceData(value) {
+      let res = value.split(".");
+      // console.log(res);
+      return res;
+    },
+    // 保存数据,发送请求
+    async saveAll() {
+      this.dialogFormVisible = false;
+      var obj = {
+        ippz_lwfs: this.ruleForm.ippz_lwfs,
+        ippz_wangkou: this.ruleForm.ippz_wangkou,
+        ippz_zwym: this.ippz_zwym1 + "." + this.ippz_zwym2 + "." + this.ippz_zwym3 + "." + this.ippz_zwym4,
+        ippz_ip: this.ippz_ip1 + "." + this.ippz_ip2 + "." + this.ippz_ip3 + "." + this.ippz_ip4,
+        ippz_mrwg: this.ippz_mrwg1 + "." + this.ippz_mrwg2 + "." + this.ippz_mrwg3 + "." + this.ippz_mrwg4,
+        ippz_dns_sx: this.ippz_dns_sx1 + "." + this.ippz_dns_sx2 + "." + this.ippz_dns_sx3 + "." + this.ippz_dns_sx4,
+        ippz_dns_by: this.ippz_dns_by1 + "." + this.ippz_dns_by2 + "." + this.ippz_dns_by3 + "." + this.ippz_dns_by4,
+        ippz_mac: this.ruleForm.ippz_mac,
+        ippz_wifi_ssid: this.ruleForm.ippz_wifi_ssid,
+        ippz_wifi_mm: this.ruleForm.ippz_wifi_mm,
+      }
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(obj),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(obj));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_mrwg) {
+          this.ruleForm.ippz_wangkou = res3.ippz_wangkou;
+          this.ruleForm.ippz_lwfs = res3.ippz_lwfs;
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+          this.ruleForm.ippz_mac = res3.ippz_mac;
+          this.ruleForm.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ruleForm.ippz_wifi_mm = res3.ippz_wifi_mm;
+        }
+      }
+    }
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231111180522.vue b/.history/src/components/DataView_20231111180522.vue
new file mode 100644
index 0000000..54d47cc
--- /dev/null
+++ b/.history/src/components/DataView_20231111180522.vue
@@ -0,0 +1,798 @@
+<!-- IP设置-网络方式 -->
+<template>
+  <div>
+    <!-- 无线网关 -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" v-loading="loading" :append-to-body="true" width="894px">
+      <div class="form_content">
+        <div>
+          <p class="netWay">网络方式</p>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="2" style="color:white;">WIFI</el-radio>
+          <el-divider></el-divider>
+        </div>
+        <!-- v-if="ippz_lwfs == 1 ? true : false" -->
+        <div>
+          <h2>有线</h2>
+          <div class="wired">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="rule">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ruleForm.ippz_wangkou" placeholder="" style="width: 200px; height: 30px">
+                      <el-option label="ETH0" value="ETH0"></el-option>
+                      <el-option label="ETH1" value="ETH1"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" maxlength="3"></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="ippz_zwym">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px; height: 30px" v-model="ruleForm.ippz_mac"></el-input><el-button
+                          v-copy="ruleForm.ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <div class="wifi">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="ruleForm.ippz_wifi_ssid" placeholder="请输入SSID"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="密码:" :label-width="formLabelWidth" prop="ippz_wifi_mm">
+                    <el-input v-model="ruleForm.ippz_wifi_mm" 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="IP地址:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="子网掩码:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px" v-model="ruleForm.ippz_mac" /><el-button v-copy="ruleForm.ippz_mac"
+                          @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { GetUserAnswer, SaveUserAnswer } from "../api/user";
+export default {
+  name: "DataView",
+  data() {
+    return {
+      user_id: "",
+      ruleForm: {
+        ippz_lwfs: "2",
+        ippz_wangkou: "",
+        ippz_zwym: "2",
+        ippz_mrwg: "3",
+        ippz_dns_sx: "4",
+        ippz_dns_by: "5",
+        ippz_ip: "6",
+        ippz_mac: "3C:2D:50:20:30:3D",
+        ippz_wifi_ssid: "",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      ippz_mac: "3C:2D:50:20:30:3D",
+      loading: false,
+      // 无线的数据
+      ippz_wifi_ssid: "",
+      ippz_wifi_mm: "",
+
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIp,
+          trigger: "blur"
+        }],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+      },
+
+      // rules_ippz_wifi: {
+
+      //   ippz_dns_sx: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsSx,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_dns_by: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsBy,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_mac: [
+      //     { required: true, message: "请输入mac地址", trigger: "blur" },
+      //   ],
+      // },
+    };
+  },
+  methods: {
+    // 表单的校验
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    // 登陆时进行校验
+    submitForm() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    SliceData(value) {
+      let res = value.split(".");
+      // console.log(res);
+      return res;
+    },
+    // 保存数据,发送请求
+    async saveAll() {
+      this.dialogFormVisible = false;
+      var obj = {
+        ippz_lwfs: this.ruleForm.ippz_lwfs,
+        ippz_wangkou: this.ruleForm.ippz_wangkou,
+        ippz_zwym: this.ippz_zwym1 + "." + this.ippz_zwym2 + "." + this.ippz_zwym3 + "." + this.ippz_zwym4,
+        ippz_ip: this.ippz_ip1 + "." + this.ippz_ip2 + "." + this.ippz_ip3 + "." + this.ippz_ip4,
+        ippz_mrwg: this.ippz_mrwg1 + "." + this.ippz_mrwg2 + "." + this.ippz_mrwg3 + "." + this.ippz_mrwg4,
+        ippz_dns_sx: this.ippz_dns_sx1 + "." + this.ippz_dns_sx2 + "." + this.ippz_dns_sx3 + "." + this.ippz_dns_sx4,
+        ippz_dns_by: this.ippz_dns_by1 + "." + this.ippz_dns_by2 + "." + this.ippz_dns_by3 + "." + this.ippz_dns_by4,
+        ippz_mac: this.ruleForm.ippz_mac,
+        ippz_wifi_ssid: this.ruleForm.ippz_wifi_ssid,
+        ippz_wifi_mm: this.ruleForm.ippz_wifi_mm,
+      }
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(obj),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(obj));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_mrwg) {
+          this.ruleForm.ippz_wangkou = res3.ippz_wangkou;
+          this.ruleForm.ippz_lwfs = res3.ippz_lwfs;
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+          this.ruleForm.ippz_mac = res3.ippz_mac;
+          this.ruleForm.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ruleForm.ippz_wifi_mm = res3.ippz_wifi_mm;
+        }
+      }
+    }
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231111182702.vue b/.history/src/components/DataView_20231111182702.vue
new file mode 100644
index 0000000..80f47be
--- /dev/null
+++ b/.history/src/components/DataView_20231111182702.vue
@@ -0,0 +1,798 @@
+<!-- IP设置-网络方式 -->
+<template>
+  <div>
+    <!-- 无线网关 -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" v-loading="loading" :append-to-body="true" width="894px">
+      <div class="form_content">
+        <div>
+          <p class="netWay">网络方式</p>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="2" style="color:white;">WIFI</el-radio>
+          <el-divider></el-divider>
+        </div>
+        <!-- v-if="ippz_lwfs == 1 ? true : false" -->
+        <div>
+          <h2>有线</h2>
+          <div class="wired">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="rule">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ruleForm.ippz_wangkou" placeholder="" style="width: 200px; height: 30px">
+                      <el-option label="ETH0" value="ETH0"></el-option>
+                      <el-option label="ETH1" value="ETH1"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" maxlength="3"></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="ippz_zwym">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px; height: 30px" v-model="ruleForm.ippz_mac"></el-input><el-button
+                          v-copy="ruleForm.ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <div class="wifi">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="ruleForm.ippz_wifi_ssid" placeholder="请输入SSID"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="密码:" :label-width="formLabelWidth" prop="ippz_wifi_mm">
+                    <el-input v-model="ruleForm.ippz_wifi_mm" 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="IP地址:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="子网掩码:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px" v-model="ruleForm.ippz_mac" /><el-button v-copy="ruleForm.ippz_mac"
+                          @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { GetUserAnswer, SaveUserAnswer } from "../api/user";
+export default {
+  name: "DataView",
+  data() {
+    return {
+      user_id: "",
+      ruleForm: {
+        ippz_lwfs: "2",
+        ippz_wangkou: "",
+        ippz_zwym: "2",
+        ippz_mrwg: "3",
+        ippz_dns_sx: "4",
+        ippz_dns_by: "5",
+        ippz_ip: "6",
+        ippz_mac: "3C:2D:50:20:30:3D",
+        ippz_wifi_ssid: "",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      ippz_mac: "3C:2D:50:20:30:3D",
+      loading: false,
+      // 无线的数据
+      ippz_wifi_ssid: "",
+      ippz_wifi_mm: "",
+
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIp,
+          trigger: "blur"
+        }],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+      },
+
+      // rules_ippz_wifi: {
+
+      //   ippz_dns_sx: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsSx,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_dns_by: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsBy,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_mac: [
+      //     { required: true, message: "请输入mac地址", trigger: "blur" },
+      //   ],
+      // },
+    };
+  },
+  methods: {
+    // 表单的校验
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    // 登陆时进行校验
+    submitForm() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    SliceData(value) {
+      let res = value.split(".");
+      // console.log(res);
+      return res;
+    },
+    // 保存数据,发送请求
+    async saveAll() {
+      this.dialogFormVisible = false;
+      var obj = {
+        ippz_lwfs: this.ruleForm.ippz_lwfs,
+        ippz_wangkou: this.ruleForm.ippz_wangkou,
+        ippz_zwym: this.ippz_zwym1 + "." + this.ippz_zwym2 + "." + this.ippz_zwym3 + "." + this.ippz_zwym4,
+        ippz_ip: this.ippz_ip1 + "." + this.ippz_ip2 + "." + this.ippz_ip3 + "." + this.ippz_ip4,
+        ippz_mrwg: this.ippz_mrwg1 + "." + this.ippz_mrwg2 + "." + this.ippz_mrwg3 + "." + this.ippz_mrwg4,
+        ippz_dns_sx: this.ippz_dns_sx1 + "." + this.ippz_dns_sx2 + "." + this.ippz_dns_sx3 + "." + this.ippz_dns_sx4,
+        ippz_dns_by: this.ippz_dns_by1 + "." + this.ippz_dns_by2 + "." + this.ippz_dns_by3 + "." + this.ippz_dns_by4,
+        ippz_mac: this.ruleForm.ippz_mac,
+        ippz_wifi_ssid: this.ruleForm.ippz_wifi_ssid,
+        ippz_wifi_mm: this.ruleForm.ippz_wifi_mm,
+      }
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(obj),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(obj));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_mrwg) {
+          this.ruleForm.ippz_wangkou = res3.ippz_wangkou;
+          this.ruleForm.ippz_lwfs = res3.ippz_lwfs;
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+          this.ruleForm.ippz_mac = res3.ippz_mac;
+          this.ruleForm.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ruleForm.ippz_wifi_mm = res3.ippz_wifi_mm;
+        }
+      }
+    }
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/DataView_20231111182849.vue b/.history/src/components/DataView_20231111182849.vue
new file mode 100644
index 0000000..80f47be
--- /dev/null
+++ b/.history/src/components/DataView_20231111182849.vue
@@ -0,0 +1,798 @@
+<!-- IP设置-网络方式 -->
+<template>
+  <div>
+    <!-- 无线网关 -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" v-loading="loading" :append-to-body="true" width="894px">
+      <div class="form_content">
+        <div>
+          <p class="netWay">网络方式</p>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="ruleForm.ippz_lwfs" label="2" style="color:white;">WIFI</el-radio>
+          <el-divider></el-divider>
+        </div>
+        <!-- v-if="ippz_lwfs == 1 ? true : false" -->
+        <div>
+          <h2>有线</h2>
+          <div class="wired">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="rule">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ruleForm.ippz_wangkou" placeholder="" style="width: 200px; height: 30px">
+                      <el-option label="ETH0" value="ETH0"></el-option>
+                      <el-option label="ETH1" value="ETH1"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" maxlength="3"></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="ippz_zwym">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_ip4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px; height: 30px" v-model="ruleForm.ippz_mac"></el-input><el-button
+                          v-copy="ruleForm.ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <div class="wifi">
+            <el-form :model="ruleForm" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+              ref="ruleForm">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="ruleForm.ippz_wifi_ssid" placeholder="请输入SSID"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="密码:" :label-width="formLabelWidth" prop="ippz_wifi_mm">
+                    <el-input v-model="ruleForm.ippz_wifi_mm" 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="IP地址:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="子网掩码:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym1"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="默认网关:" :label-width="formLabelWidth">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1"></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                    <el-row>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                    <el-row>
+                      <el-col :span="24" class="mac">
+                        <el-input style="width: 200px" v-model="ruleForm.ippz_mac" /><el-button v-copy="ruleForm.ippz_mac"
+                          @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { GetUserAnswer, SaveUserAnswer } from "../api/user";
+export default {
+  name: "DataView",
+  data() {
+    return {
+      user_id: "",
+      ruleForm: {
+        ippz_lwfs: "2",
+        ippz_wangkou: "",
+        ippz_zwym: "2",
+        ippz_mrwg: "3",
+        ippz_dns_sx: "4",
+        ippz_dns_by: "5",
+        ippz_ip: "6",
+        ippz_mac: "3C:2D:50:20:30:3D",
+        ippz_wifi_ssid: "",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      ippz_mac: "3C:2D:50:20:30:3D",
+      loading: false,
+      // 无线的数据
+      ippz_wifi_ssid: "",
+      ippz_wifi_mm: "",
+
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIp,
+          trigger: "blur"
+        }],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+      },
+
+      // rules_ippz_wifi: {
+
+      //   ippz_dns_sx: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsSx,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_dns_by: [
+      //     {
+      //       required: true,
+      //       message: "",
+      //       validator: this.validateDnsBy,
+      //       trigger: "blur"
+      //     },
+      //   ],
+      //   ippz_mac: [
+      //     { required: true, message: "请输入mac地址", trigger: "blur" },
+      //   ],
+      // },
+    };
+  },
+  methods: {
+    // 表单的校验
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    // 登陆时进行校验
+    submitForm() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    SliceData(value) {
+      let res = value.split(".");
+      // console.log(res);
+      return res;
+    },
+    // 保存数据,发送请求
+    async saveAll() {
+      this.dialogFormVisible = false;
+      var obj = {
+        ippz_lwfs: this.ruleForm.ippz_lwfs,
+        ippz_wangkou: this.ruleForm.ippz_wangkou,
+        ippz_zwym: this.ippz_zwym1 + "." + this.ippz_zwym2 + "." + this.ippz_zwym3 + "." + this.ippz_zwym4,
+        ippz_ip: this.ippz_ip1 + "." + this.ippz_ip2 + "." + this.ippz_ip3 + "." + this.ippz_ip4,
+        ippz_mrwg: this.ippz_mrwg1 + "." + this.ippz_mrwg2 + "." + this.ippz_mrwg3 + "." + this.ippz_mrwg4,
+        ippz_dns_sx: this.ippz_dns_sx1 + "." + this.ippz_dns_sx2 + "." + this.ippz_dns_sx3 + "." + this.ippz_dns_sx4,
+        ippz_dns_by: this.ippz_dns_by1 + "." + this.ippz_dns_by2 + "." + this.ippz_dns_by3 + "." + this.ippz_dns_by4,
+        ippz_mac: this.ruleForm.ippz_mac,
+        ippz_wifi_ssid: this.ruleForm.ippz_wifi_ssid,
+        ippz_wifi_mm: this.ruleForm.ippz_wifi_mm,
+      }
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(obj),
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(obj));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_mrwg) {
+          this.ruleForm.ippz_wangkou = res3.ippz_wangkou;
+          this.ruleForm.ippz_lwfs = res3.ippz_lwfs;
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+          this.ruleForm.ippz_mac = res3.ippz_mac;
+          this.ruleForm.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ruleForm.ippz_wifi_mm = res3.ippz_wifi_mm;
+        }
+      }
+    }
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/DeviceVIew_20231111182916.vue b/.history/src/components/DeviceVIew_20231111182916.vue
new file mode 100644
index 0000000..a90c16d
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231111182916.vue
@@ -0,0 +1,469 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+        @node-click="treeNodeClick" ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-item index="3" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </div>
+    <!-- </div> -->
+    <!-- 网口设备 -->
+    <div class="pas_params">
+      <el-dialog title="设备属性" :visible.sync="add_passage" width="382px" v-loading="loading">
+        <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                <el-input v-model="formdata.sbpz_mac" placeholder="" style="width: 200px; height: 30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <!-- 需要修改的地方 -->
+                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="基地址选择:">
+                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "DeviceView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      trees: [],
+      formdata: {
+        sbpz_sbid: "",
+        sbpz_sbmc: "",
+        sbpz_mac: "3C:2D:50:20:30:3D",
+        sbpz_jysb: false,
+        sbpz_jdzxz: false,
+      },
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      options1: [
+        {
+          value: "有线区加工设备1",
+          label: "有线区加工设备1",
+        },
+        {
+          value: "无线区加工设备1",
+          label: "无线区加工设备1",
+        },
+      ],
+      options2: [
+        {
+          value: "有线区精雕1",
+          label: "有线区精雕1",
+        },
+        {
+          value: "无线区精雕1",
+          label: "无线区精雕1",
+        },
+      ],
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "用户点",
+            },
+            {
+              label: "计算点",
+            },
+            {
+              label: "系统点",
+            },
+          ],
+        },
+        {
+          label: "数据服务",
+          children: [
+            {
+              label: "Modbus",
+            },
+          ],
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client",
+            },
+            {
+              label: "Alink",
+            },
+            {
+              label: "Tlink",
+            },
+            {
+              label: "loTDDC",
+            },
+            {
+              label: "Ulink",
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      nodekey: "",
+      rules: {
+        sbpz_sbid: [
+          { required: true, message: "请输入设备ID", trigger: "blur" },
+        ],
+        sbpz_sbmc: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        sbpz_mac: [
+          { required: true, message: "请输入设备地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formdata"].validate((valid) => {
+        if (valid) {
+          this.saveDevice();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(node);
+      if (node.level == 4) {
+        this.menuShow = false;
+        this.menuShow = true;
+        this.nodekey = data.id;
+        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;
+      } else if (index == 2) {
+        this.$refs["tree"].remove(this.nodekey);
+        this.sendTree();
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        });
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    async saveDevice() {
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      console.log(datas);
+      var obj = {
+        sbpz_sbid: this.formdata.sbpz_sbid,
+        sbpz_sbmc: this.formdata.sbpz_sbmc,
+        sbpz_mac: this.formdata.sbpz_mac,
+        sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+        sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+      }
+      datas = { ...JSON.parse(datas), ...obj };
+      this.add_passage = false;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step:"3",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+        // console.log(res);
+        // console.log(JSON.parse(res.data.data.mark_value));
+        this.$refs["tree"].append({
+          id: this.nodekey + 10000,
+          label: this.formdata.sbpz_sbmc,
+        }, this.nodekey);
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbcollect?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      })
+      console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        if (obj.sbpz_sbid) {
+          this.formdata.sbpz_sbid = obj.sbpz_sbid;
+          this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+          this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+          this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+          this.formdata.sbpz_mac = obj.sbpz_mac;
+        }
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    console.log(this.$route.query.user_id);
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "1",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/DeviceWirle_20231111184356.vue b/.history/src/components/DeviceWirle_20231111184356.vue
new file mode 100644
index 0000000..afb80b2
--- /dev/null
+++ b/.history/src/components/DeviceWirle_20231111184356.vue
@@ -0,0 +1,529 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+        @node-click="treeNodeClick" ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-item index="3" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </div>
+    <!-- </div> -->
+    <!-- 网口设备 -->
+    <div class="pas_params">
+      <el-dialog title="设备属性" :visible.sync="add_passage" width="382px" v-loading="loading">
+        <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                <el-input v-model="formdata.sbpz_mac" placeholder="" style="width: 200px; height: 30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <!-- 需要修改的地方 -->
+                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="基地址选择:">
+                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "DeviceView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      trees: [],
+      formdata: {
+        sbpz_sbid: "",
+        sbpz_sbmc: "",
+        sbpz_mac: "3C:2D:50:20:30:3D",
+        sbpz_jysb: false,
+        sbpz_jdzxz: false,
+      },
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      options1: [
+        {
+          value: "有线区加工设备1",
+          label: "有线区加工设备1",
+        },
+        {
+          value: "无线区加工设备1",
+          label: "无线区加工设备1",
+        },
+      ],
+      options2: [
+        {
+          value: "有线区精雕1",
+          label: "有线区精雕1",
+        },
+        {
+          value: "无线区精雕1",
+          label: "无线区精雕1",
+        },
+      ],
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "用户点",
+            },
+            {
+              label: "计算点",
+            },
+            {
+              label: "系统点",
+            },
+          ],
+        },
+        {
+          label: "数据服务",
+          children: [
+            {
+              label: "Modbus",
+            },
+          ],
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client",
+            },
+            {
+              label: "Alink",
+            },
+            {
+              label: "Tlink",
+            },
+            {
+              label: "loTDDC",
+            },
+            {
+              label: "Ulink",
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      nodekey: "",
+      rules: {
+        sbpz_sbid: [
+          { required: true, message: "请输入设备ID", trigger: "blur" },
+        ],
+        sbpz_sbmc: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        sbpz_mac: [
+          { required: true, message: "请输入设备地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formdata"].validate((valid) => {
+        if (valid) {
+          this.saveDevice();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(node);
+      if (node.level == 4) {
+        this.menuShow = false;
+        this.menuShow = true;
+        this.nodekey = data.id;
+        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();
+          }
+        })
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      } else if (index == 2) {
+        this.$refs["tree"].remove(this.nodekey);
+        this.sendTree();
+        this.$message({
+          message: "删除成功",
+          type: "success",
+        });
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    async saveDevice() {
+      let datas = sessionStorage.getItem("DB-IotLite_wx");
+      console.log(datas);
+      var obj = {
+        sbpz_sbid: this.formdata.sbpz_sbid,
+        sbpz_sbmc: this.formdata.sbpz_sbmc,
+        sbpz_mac: this.formdata.sbpz_mac,
+        sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+        sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+      }
+      datas = { ...JSON.parse(datas), ...obj };
+      this.add_passage = false;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step:"3",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+        // console.log(res);
+        // console.log(JSON.parse(res.data.data.mark_value));
+        this.$refs["tree"].append({
+          id: this.nodekey + 10000,
+          label: this.formdata.sbpz_sbmc,
+        }, this.nodekey);
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbwificollect?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      })
+      console.log(answer);
+      let obj = JSON.parse(answer.data.data.mark_value);
+      console.log(obj);
+      if (obj.sbpz_sbid) {
+        this.formdata.sbpz_sbid = obj.sbpz_sbid;
+        this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+        this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+        this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+        this.formdata.sbpz_mac = obj.sbpz_mac;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "2",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "2",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    });
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+}
+// 点击时候的判断,判断是否为新增设备
+//     async saveDevice() {
+//   let datas = sessionStorage.getItem("DB-IotLite_wx");
+//   console.log(datas);
+//   var obj = {
+//     sbpz_sbid: this.formdata.sbpz_sbid,
+//     sbpz_sbmc: this.formdata.sbpz_sbmc,
+//     sbpz_mac: this.formdata.sbpz_mac,
+//     sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+//     sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+//   };
+//   datas = { ...JSON.parse(datas), ...obj };
+//   this.add_passage = false;
+//   let res = await SaveUserAnswer({
+//     mark: "DB-IotLite_wx",
+//     user_id: this.user_id,
+//     mark_value: JSON.stringify(datas),
+//   });
+//   if (res.status == 200) {
+//     this.$message({
+//       message: "保存成功",
+//       type: "success",
+//     });
+//   }
+//   sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+//   // console.log(res);
+//   // console.log(JSON.parse(res.data.data.mark_value));
+//   this.$refs["tree"].append(
+//     {
+//       id: this.nodekey + 10000,
+//       label: this.formdata.sbpz_sbmc,
+//     },
+//     this.nodekey
+//   );
+//   // console.log(this.trees);
+//   this.sendTree();
+//   this.$router.push(`/dbwificollect?user_id=${this.user_id}`);
+// },
+//     async GetUserAnswer() {
+//   let answer = await GetUserAnswer({
+//     mark: "DB-IotLite_wx",
+//     user_id: this.user_id,
+//   });
+//   // console.log(answer);
+//   // console.log(obj);
+//   if (obj.sbpz_sbid) {
+//     let obj = JSON.parse(answer.data.data.mark_value);
+
+//     this.formdata.sbpz_sbid = obj.sbpz_sbid;
+//     this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+//     this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+//     this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+//     this.formdata.sbpz_mac = obj.sbpz_mac;
+//   }
+// },
+//     async sendTree() {
+//   let result = await SendTree({
+//     user_id: this.user_id,
+//     data: JSON.stringify(this.trees),
+//     type: "2",
+//   });
+//   console.log(result);
+// },
+//   },
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/DeviceWirle_20231111184357.vue b/.history/src/components/DeviceWirle_20231111184357.vue
new file mode 100644
index 0000000..afb80b2
--- /dev/null
+++ b/.history/src/components/DeviceWirle_20231111184357.vue
@@ -0,0 +1,529 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+        @node-click="treeNodeClick" ref="tree">
+        <!-- :render-content="renderContent" -->
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <template v-if="data.editing == 1">
+            <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+              @click.stop="done">完成</el-button>
+            <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+              @click.stop="edit">编辑</el-button>
+            <span v-if="!flag">{{ data.label }}</span>
+            <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+          </template>
+          <template v-else>{{ data.label }}</template>
+        </span>
+      </el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-item index="3" style="font-size: 12px">
+            <span slot="title">取 消</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </div>
+    <!-- </div> -->
+    <!-- 网口设备 -->
+    <div class="pas_params">
+      <el-dialog title="设备属性" :visible.sync="add_passage" width="382px" v-loading="loading">
+        <el-form :model="formdata" :label-position="labelPosition" :rules="rules" ref="formdata">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="设备ID:" :label-width="formLabelWidth" prop="sbpz_sbid">
+                <el-select v-model="formdata.sbpz_sbid" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="sbpz_sbmc">
+                <el-select v-model="formdata.sbpz_sbmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="sbpz_mac">
+                <el-input v-model="formdata.sbpz_mac" placeholder="" style="width: 200px; height: 30px"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <!-- 需要修改的地方 -->
+                <el-checkbox v-model="formdata.sbpz_jysb">禁用地址</el-checkbox>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="基地址选择:">
+                <el-switch v-model="formdata.sbpz_jdzxz"> </el-switch>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "DeviceView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      trees: [],
+      formdata: {
+        sbpz_sbid: "",
+        sbpz_sbmc: "",
+        sbpz_mac: "3C:2D:50:20:30:3D",
+        sbpz_jysb: false,
+        sbpz_jdzxz: false,
+      },
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      options1: [
+        {
+          value: "有线区加工设备1",
+          label: "有线区加工设备1",
+        },
+        {
+          value: "无线区加工设备1",
+          label: "无线区加工设备1",
+        },
+      ],
+      options2: [
+        {
+          value: "有线区精雕1",
+          label: "有线区精雕1",
+        },
+        {
+          value: "无线区精雕1",
+          label: "无线区精雕1",
+        },
+      ],
+      datas: [
+        {
+          label: "Gateway",
+          children: [
+            {
+              label: "数据采集",
+              children: [
+                {
+                  label: "I/O点",
+                },
+                {
+                  label: "用户点",
+                },
+                {
+                  label: "计算点",
+                },
+                {
+                  label: "系统点",
+                },
+              ],
+            },
+            {
+              label: "用户点",
+            },
+            {
+              label: "计算点",
+            },
+            {
+              label: "系统点",
+            },
+          ],
+        },
+        {
+          label: "数据服务",
+          children: [
+            {
+              label: "Modbus",
+            },
+          ],
+        },
+        {
+          label: "IOT",
+          children: [
+            {
+              label: "Mqtt Client",
+            },
+            {
+              label: "Alink",
+            },
+            {
+              label: "Tlink",
+            },
+            {
+              label: "loTDDC",
+            },
+            {
+              label: "Ulink",
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      nodekey: "",
+      rules: {
+        sbpz_sbid: [
+          { required: true, message: "请输入设备ID", trigger: "blur" },
+        ],
+        sbpz_sbmc: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        sbpz_mac: [
+          { required: true, message: "请输入设备地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 提交时进行校验
+    submitForm() {
+      this.$refs["formdata"].validate((valid) => {
+        if (valid) {
+          this.saveDevice();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(node);
+      if (node.level == 4) {
+        this.menuShow = false;
+        this.menuShow = true;
+        this.nodekey = data.id;
+        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();
+          }
+        })
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    closeMenu(ev) {
+      console.log({ ev });
+      this.dialogVisible = false;
+    },
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      } else if (index == 2) {
+        this.$refs["tree"].remove(this.nodekey);
+        this.sendTree();
+        this.$message({
+          message: "删除成功",
+          type: "success",
+        });
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    async saveDevice() {
+      let datas = sessionStorage.getItem("DB-IotLite_wx");
+      console.log(datas);
+      var obj = {
+        sbpz_sbid: this.formdata.sbpz_sbid,
+        sbpz_sbmc: this.formdata.sbpz_sbmc,
+        sbpz_mac: this.formdata.sbpz_mac,
+        sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+        sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+      }
+      datas = { ...JSON.parse(datas), ...obj };
+      this.add_passage = false;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step:"3",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+        // console.log(res);
+        // console.log(JSON.parse(res.data.data.mark_value));
+        this.$refs["tree"].append({
+          id: this.nodekey + 10000,
+          label: this.formdata.sbpz_sbmc,
+        }, this.nodekey);
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbwificollect?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: this.user_id,
+      })
+      console.log(answer);
+      let obj = JSON.parse(answer.data.data.mark_value);
+      console.log(obj);
+      if (obj.sbpz_sbid) {
+        this.formdata.sbpz_sbid = obj.sbpz_sbid;
+        this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+        this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+        this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+        this.formdata.sbpz_mac = obj.sbpz_mac;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "2",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "2",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    });
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+  },
+}
+// 点击时候的判断,判断是否为新增设备
+//     async saveDevice() {
+//   let datas = sessionStorage.getItem("DB-IotLite_wx");
+//   console.log(datas);
+//   var obj = {
+//     sbpz_sbid: this.formdata.sbpz_sbid,
+//     sbpz_sbmc: this.formdata.sbpz_sbmc,
+//     sbpz_mac: this.formdata.sbpz_mac,
+//     sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+//     sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+//   };
+//   datas = { ...JSON.parse(datas), ...obj };
+//   this.add_passage = false;
+//   let res = await SaveUserAnswer({
+//     mark: "DB-IotLite_wx",
+//     user_id: this.user_id,
+//     mark_value: JSON.stringify(datas),
+//   });
+//   if (res.status == 200) {
+//     this.$message({
+//       message: "保存成功",
+//       type: "success",
+//     });
+//   }
+//   sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+//   // console.log(res);
+//   // console.log(JSON.parse(res.data.data.mark_value));
+//   this.$refs["tree"].append(
+//     {
+//       id: this.nodekey + 10000,
+//       label: this.formdata.sbpz_sbmc,
+//     },
+//     this.nodekey
+//   );
+//   // console.log(this.trees);
+//   this.sendTree();
+//   this.$router.push(`/dbwificollect?user_id=${this.user_id}`);
+// },
+//     async GetUserAnswer() {
+//   let answer = await GetUserAnswer({
+//     mark: "DB-IotLite_wx",
+//     user_id: this.user_id,
+//   });
+//   // console.log(answer);
+//   // console.log(obj);
+//   if (obj.sbpz_sbid) {
+//     let obj = JSON.parse(answer.data.data.mark_value);
+
+//     this.formdata.sbpz_sbid = obj.sbpz_sbid;
+//     this.formdata.sbpz_jdzxz = Boolean(Number(obj.sbpz_jdzxz));
+//     this.formdata.sbpz_jysb = Boolean(Number(obj.sbpz_jysb));
+//     this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
+//     this.formdata.sbpz_mac = obj.sbpz_mac;
+//   }
+// },
+//     async sendTree() {
+//   let result = await SendTree({
+//     user_id: this.user_id,
+//     data: JSON.stringify(this.trees),
+//     type: "2",
+//   });
+//   console.log(result);
+// },
+//   },
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+  position: fixed;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 1000;
+}
+
+.super_parmams {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 5px;
+      left: 77px;
+      position: relative;
+      width: 50px;
+    }
+  }
+}
+
+.super_con {
+  .el-col-12:last-child {
+    padding-right: 28px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 42px;
+  }
+
+  .el-input__inner {
+    text-align: left;
+    padding: 0 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/GateWay_20231111180539.vue b/.history/src/components/GateWay_20231111180539.vue
new file mode 100644
index 0000000..73f1799
--- /dev/null
+++ b/.history/src/components/GateWay_20231111180539.vue
@@ -0,0 +1,645 @@
+<!-- 有线网关设置 -->
+<template>
+  <div>
+    <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px" v-loading="loading">
+      <div class="form_content">
+        <span class="title_center">注意：本页面涉及排错，请检查修改默认值</span>
+        <el-form :model="formData" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+          ref="formData">
+          <div class="wired">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                  <el-select v-model="formData.ippz_wangkou" style="width: 200px; height: 30px">
+                    <el-option label="ETH0" value="ETH0"></el-option>
+                    <el-option label="ETH1" value="ETH1"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip4" maxlength="3"></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="ippz_zwym">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                  <el-row>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg1" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg2" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg3" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg4" maxlength="3"></el-input></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                  <el-row>
+                    <el-col :span="24" class="mac">
+                      <el-input style="width: 200px; height: 30px" v-model="formData.ippz_mac"></el-input><el-button
+                        v-copy="formData.ippz_mac" @click="CopyText">复制</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "../api/user";
+export default {
+  name: "GateWay",
+  data() {
+    return {
+      // disabled: true,
+      user_id: "",
+      // 判断是否保存过
+      loading: false,
+      formData: {
+        ippz_wangkou: "ETH0",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_sx: "",
+        ippz_dns_by: "",
+        ippz_ip: "",
+        ippz_mac: "3C:2D:50:20:30:3D",
+      },
+      labelPosition: "left",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          {
+            required: true,
+            message: "请输入网口",
+            trigger: "change"
+          },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true, message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入MAC地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    // isSaveButtonDisabled() {
+    //   return (
+    //     !this.$refs.rules_ippz_wirle ||
+    //     this.$refs.rules_ippz_wirle.validateSync().length > 0
+    //   );
+    // },
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存数据, 发送请求
+    async saveAll() {
+      this.dialogFormVisible = false;
+      this.isSaveAnswer = true;
+      this.formData.ippz_ip = this.Merge(
+        this.formData.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formData.ippz_zwym = this.Merge(
+        this.formData.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formData.ippz_mrwg = this.Merge(
+        this.formData.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formData.ippz_dns_sx = this.Merge(
+        this.formData.ippz_dns_sx,
+        this.ippz_dns_sx1,
+        this.ippz_dns_sx2,
+        this.ippz_dns_sx3,
+        this.ippz_dns_sx4
+      );
+      this.formData.ippz_dns_by = this.Merge(
+        this.formData.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      console.log(this.formData);
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      let data = {
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res = await SaveUserAnswer(data);
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }else{
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        console.log("391");
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_wangkou) {
+          this.formData.ippz_wangkou = res3.ippz_wangkou;
+        }
+        if (res3.ippz_mac) {
+          this.formData.ippz_mac = res3.ippz_mac;
+        }
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+        }
+      }
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.title_center{
+  font-size: 18px;
+  color: red;
+  position: absolute;
+  left: 100px;
+  top: 20px;
+}
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/GateWay_20231111181922.vue b/.history/src/components/GateWay_20231111181922.vue
new file mode 100644
index 0000000..db6e662
--- /dev/null
+++ b/.history/src/components/GateWay_20231111181922.vue
@@ -0,0 +1,645 @@
+<!-- 有线网关设置 -->
+<template>
+  <div>
+    <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px" v-loading="loading">
+      <div class="form_content">
+        <span class="title_center">注意：本页面涉及排错，请检查修改默认值</span>
+        <el-form :model="formData" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+          ref="formData">
+          <div class="wired">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                  <el-select v-model="formData.ippz_wangkou" style="width: 200px; height: 30px">
+                    <el-option label="ETH0" value="ETH0"></el-option>
+                    <el-option label="ETH1" value="ETH1"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip4" maxlength="3"></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="ippz_zwym">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                  <el-row>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg1" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg2" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg3" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg4" maxlength="3"></el-input></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                  <el-row>
+                    <el-col :span="24" class="mac">
+                      <el-input style="width: 200px; height: 30px" v-model="formData.ippz_mac"></el-input><el-button
+                        v-copy="formData.ippz_mac" @click="CopyText">复制</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "../api/user";
+export default {
+  name: "GateWay",
+  data() {
+    return {
+      // disabled: true,
+      user_id: "",
+      // 判断是否保存过
+      loading: false,
+      formData: {
+        ippz_wangkou: "ETH0",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_sx: "",
+        ippz_dns_by: "",
+        ippz_ip: "",
+        ippz_mac: "3C:2D:50:20:30:3D",
+      },
+      labelPosition: "left",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          {
+            required: true,
+            message: "请输入网口",
+            trigger: "change"
+          },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true, message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入MAC地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    // isSaveButtonDisabled() {
+    //   return (
+    //     !this.$refs.rules_ippz_wirle ||
+    //     this.$refs.rules_ippz_wirle.validateSync().length > 0
+    //   );
+    // },
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存数据, 发送请求
+    async saveAll() {
+      // this.dialogFormVisible = false;
+      // this.isSaveAnswer = true;
+      this.formData.ippz_ip = this.Merge(
+        this.formData.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formData.ippz_zwym = this.Merge(
+        this.formData.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formData.ippz_mrwg = this.Merge(
+        this.formData.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formData.ippz_dns_sx = this.Merge(
+        this.formData.ippz_dns_sx,
+        this.ippz_dns_sx1,
+        this.ippz_dns_sx2,
+        this.ippz_dns_sx3,
+        this.ippz_dns_sx4
+      );
+      this.formData.ippz_dns_by = this.Merge(
+        this.formData.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      console.log(this.formData);
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      let data = {
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res = await SaveUserAnswer(data);
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }else{
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+      console.log(res);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        console.log("391");
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_wangkou) {
+          this.formData.ippz_wangkou = res3.ippz_wangkou;
+        }
+        if (res3.ippz_mac) {
+          this.formData.ippz_mac = res3.ippz_mac;
+        }
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+        }
+      }
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.title_center{
+  font-size: 18px;
+  color: red;
+  position: absolute;
+  left: 100px;
+  top: 20px;
+}
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/GateWay_20231111183151.vue b/.history/src/components/GateWay_20231111183151.vue
new file mode 100644
index 0000000..8528cbe
--- /dev/null
+++ b/.history/src/components/GateWay_20231111183151.vue
@@ -0,0 +1,645 @@
+<!-- 有线网关设置 -->
+<template>
+  <div>
+    <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px" v-loading="loading">
+      <div class="form_content">
+        <span class="title_center">注意：本页面涉及排错，请检查修改默认值</span>
+        <el-form :model="formData" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+          ref="formData">
+          <div class="wired">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                  <el-select v-model="formData.ippz_wangkou" style="width: 200px; height: 30px">
+                    <el-option label="ETH0" value="ETH0"></el-option>
+                    <el-option label="ETH1" value="ETH1"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip4" maxlength="3"></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="ippz_zwym">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                  <el-row>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg1" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg2" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg3" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg4" maxlength="3"></el-input></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                  <el-row>
+                    <el-col :span="24" class="mac">
+                      <el-input style="width: 200px; height: 30px" v-model="formData.ippz_mac"></el-input><el-button
+                        v-copy="formData.ippz_mac" @click="CopyText">复制</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "../api/user";
+export default {
+  name: "GateWay",
+  data() {
+    return {
+      // disabled: true,
+      user_id: "",
+      // 判断是否保存过
+      loading: false,
+      formData: {
+        ippz_wangkou: "ETH0",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_sx: "",
+        ippz_dns_by: "",
+        ippz_ip: "",
+        ippz_mac: "3C:2D:50:20:30:3D",
+      },
+      labelPosition: "left",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          {
+            required: true,
+            message: "请输入网口",
+            trigger: "change"
+          },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true, message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入MAC地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    // isSaveButtonDisabled() {
+    //   return (
+    //     !this.$refs.rules_ippz_wirle ||
+    //     this.$refs.rules_ippz_wirle.validateSync().length > 0
+    //   );
+    // },
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存数据, 发送请求
+    async saveAll() {
+      // this.dialogFormVisible = false;
+      // this.isSaveAnswer = true;
+      this.formData.ippz_ip = this.Merge(
+        this.formData.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formData.ippz_zwym = this.Merge(
+        this.formData.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formData.ippz_mrwg = this.Merge(
+        this.formData.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formData.ippz_dns_sx = this.Merge(
+        this.formData.ippz_dns_sx,
+        this.ippz_dns_sx1,
+        this.ippz_dns_sx2,
+        this.ippz_dns_sx3,
+        this.ippz_dns_sx4
+      );
+      this.formData.ippz_dns_by = this.Merge(
+        this.formData.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      console.log(this.formData);
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      let data = {
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res = await SaveUserAnswer(data);
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }else{
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+      console.log(res);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        console.log("391");
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_wangkou) {
+          this.formData.ippz_wangkou = res3.ippz_wangkou;
+        }
+        if (res3.ippz_mac) {
+          this.formData.ippz_mac = res3.ippz_mac;
+        }
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+        }
+      }
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.title_center{
+  font-size: 18px;
+  color: red;
+  position: absolute;
+  left: 100px;
+  top: 20px;
+}
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/GateWay_20231111183157.vue b/.history/src/components/GateWay_20231111183157.vue
new file mode 100644
index 0000000..6564d88
--- /dev/null
+++ b/.history/src/components/GateWay_20231111183157.vue
@@ -0,0 +1,646 @@
+<!-- 有线网关设置 -->
+<template>
+  <div>
+    <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
+    <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px" v-loading="loading">
+      <div class="form_content">
+        <span class="title_center">注意：本页面涉及排错，请检查修改默认值</span>
+        <el-form :model="formData" :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle"
+          ref="formData">
+          <div class="wired">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                  <el-select v-model="formData.ippz_wangkou" style="width: 200px; height: 30px">
+                    <el-option label="ETH0" value="ETH0"></el-option>
+                    <el-option label="ETH1" value="ETH1"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_ip4" maxlength="3"></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="ippz_zwym">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_zwym4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                  <el-row>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg1" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg2" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg3" maxlength="3"></el-input></el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5"><el-input v-model="ippz_mrwg4" maxlength="3"></el-input></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-row>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by1" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by2" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by3" maxlength="3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_by4" maxlength="3"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                  <el-row>
+                    <el-col :span="24" class="mac">
+                      <el-input style="width: 200px; height: 30px" v-model="formData.ippz_mac"></el-input><el-button
+                        v-copy="formData.ippz_mac" @click="CopyText">复制</el-button>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "../api/user";
+export default {
+  name: "GateWay",
+  data() {
+    return {
+      // disabled: true,
+      user_id: "",
+      // 判断是否保存过
+      loading: false,
+      formData: {
+        ippz_wangkou: "ETH0",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_sx: "",
+        ippz_dns_by: "",
+        ippz_ip: "",
+        ippz_mac: "3C:2D:50:20:30:3D",
+      },
+      labelPosition: "left",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+
+      ippz_dns_by1: "8",
+      ippz_dns_by2: "8",
+      ippz_dns_by3: "8",
+      ippz_dns_by4: "8",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          {
+            required: true,
+            message: "请输入网口",
+            trigger: "change"
+          },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateZwym,
+            trigger: "blur"
+          },
+        ],
+        ippz_ip: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateIp,
+            trigger: "blur"
+          },
+        ],
+        ippz_mrwg: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateMrwg,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_sx: [
+          {
+            required: true, message: "",
+            validator: this.validateDnsSx,
+            trigger: "blur"
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            message: "",
+            validator: this.validateDnsBy,
+            trigger: "blur"
+          },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入MAC地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    // isSaveButtonDisabled() {
+    //   return (
+    //     !this.$refs.rules_ippz_wirle ||
+    //     this.$refs.rules_ippz_wirle.validateSync().length > 0
+    //   );
+    // },
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["formData"].validate((valid) => {
+        if (valid) {
+          this.saveAll();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    //子网掩码验证
+    validateZwym(rule, value, callback) {
+      if (
+        this.ippz_zwym1 +
+        "." +
+        this.ippz_zwym2 +
+        "." +
+        this.ippz_zwym3 +
+        "." +
+        this.ippz_zwym4 ===
+        "..."
+      ) {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_zwym1 +
+          "." +
+          this.ippz_zwym2 +
+          "." +
+          this.ippz_zwym3 +
+          "." +
+          this.ippz_zwym4
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //ip地址验证
+    validateIp(rule, value, callback) {
+      if (
+        this.ippz_ip1 +
+        "." +
+        this.ippz_ip2 +
+        "." +
+        this.ippz_ip3 +
+        "." +
+        this.ippz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_ip1 +
+          "." +
+          this.ippz_ip2 +
+          "." +
+          this.ippz_ip3 +
+          "." +
+          this.ippz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //默认网关验证
+    validateMrwg(rule, value, callback) {
+      if (
+        this.ippz_mrwg1 +
+        "." +
+        this.ippz_mrwg2 +
+        "." +
+        this.ippz_mrwg3 +
+        "." +
+        this.ippz_mrwg4 ===
+        "..."
+      ) {
+        callback(new Error("请输入网关地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.ippz_mrwg1 +
+          "." +
+          this.ippz_mrwg2 +
+          "." +
+          this.ippz_mrwg3 +
+          "." +
+          this.ippz_mrwg4
+        )
+      ) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //首选DNS服务验证
+    validateDnsSx(rule, value, callback) {
+      if (
+        this.ippz_dns_sx1 +
+        "." +
+        this.ippz_dns_sx2 +
+        "." +
+        this.ippz_dns_sx3 +
+        "." +
+        this.ippz_dns_sx4 ===
+        "..."
+      ) {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_sx1 +
+          "." +
+          this.ippz_dns_sx2 +
+          "." +
+          this.ippz_dns_sx3 +
+          "." +
+          this.ippz_dns_sx4
+        )
+      ) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+    //备选dns服务验证
+    validateDnsBy(rule, value, callback) {
+      if (
+        this.ippz_dns_by1 +
+        "." +
+        this.ippz_dns_by2 +
+        "." +
+        this.ippz_dns_by3 +
+        "." +
+        this.ippz_dns_by4 ===
+        "..."
+      ) {
+        callback(new Error("请输入备用DNS服务器地址"));
+      } else if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test
+        (
+          this.ippz_dns_by1 +
+          "." +
+          this.ippz_dns_by2 +
+          "." +
+          this.ippz_dns_by3 +
+          "." +
+          this.ippz_dns_by4
+        )
+      ) {
+        callback(new Error("请输入有效的备用DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存数据, 发送请求
+    async saveAll() {
+      // this.dialogFormVisible = false;
+      // this.isSaveAnswer = true;
+      this.formData.ippz_ip = this.Merge(
+        this.formData.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formData.ippz_zwym = this.Merge(
+        this.formData.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formData.ippz_mrwg = this.Merge(
+        this.formData.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formData.ippz_dns_sx = this.Merge(
+        this.formData.ippz_dns_sx,
+        this.ippz_dns_sx1,
+        this.ippz_dns_sx2,
+        this.ippz_dns_sx3,
+        this.ippz_dns_sx4
+      );
+      this.formData.ippz_dns_by = this.Merge(
+        this.formData.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      console.log(this.formData);
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      let data = {
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res = await SaveUserAnswer(data);
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+      console.log(res);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+      });
+      this.loading = false;
+      console.log(res2);
+      if (res2.data.data && res2.data.state) {
+        console.log("391");
+        let res3 = JSON.parse(res2.data.data.mark_value);
+        console.log(res3);
+        if (res3.ippz_wangkou) {
+          this.formData.ippz_wangkou = res3.ippz_wangkou;
+        }
+        if (res3.ippz_mac) {
+          this.formData.ippz_mac = res3.ippz_mac;
+        }
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = res3.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = res3.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = res3.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = res3.ippz_mrwg.split(".")[3];
+          this.ippz_ip1 = res3.ippz_ip.split(".")[0];
+          this.ippz_ip2 = res3.ippz_ip.split(".")[1];
+          this.ippz_ip3 = res3.ippz_ip.split(".")[2];
+          this.ippz_ip4 = res3.ippz_ip.split(".")[3];
+          this.ippz_zwym1 = res3.ippz_zwym.split(".")[0];
+          this.ippz_zwym2 = res3.ippz_zwym.split(".")[1];
+          this.ippz_zwym3 = res3.ippz_zwym.split(".")[2];
+          this.ippz_zwym4 = res3.ippz_zwym.split(".")[3];
+          this.ippz_dns_sx1 = res3.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = res3.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = res3.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = res3.ippz_dns_sx.split(".")[3];
+          this.ippz_dns_by1 = res3.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = res3.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = res3.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = res3.ippz_dns_by.split(".")[3];
+        }
+      }
+    },
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.getUserAnswer();
+  },
+  mounted() { },
+  directives: {
+    copy: {
+      bind(el, { value }) {
+        // 给元素赋值一个$value值,即指令绑定的值
+        el.$value = value;
+        el.handler = () => {
+          // 如果可复制的值为空的时候，给出提示；
+          if (!el.$value) {
+            console.log("无复制内容");
+            return;
+          }
+          // 动态创建 textarea 标签
+          const textarea = document.createElement("textarea");
+          // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
+          textarea.readOnly = "readonly";
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          // 将要copy的值赋值给textarea 标签的value属性
+          textarea.value = el.$value;
+          // 将textarea 插入到body中
+          document.body.appendChild(textarea);
+          // 选中值并复制
+          textarea.select();
+          const result = document.execCommand("Copy");
+          if (result) {
+            console.log("复制成功");
+          }
+          document.body.removeChild(textarea);
+        };
+        // 绑定点击事件，点击的时候copy值
+        el.addEventListener("click", el.handler);
+      },
+      // 当传递进来的值更新的时候触发
+      componentUpdated(el, { value }) {
+        el.$value = value;
+      },
+      // 指令与元素解绑的时候，移除事件绑定
+      unbind(el) {
+        el.removeEventListener("click", el.handler);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.title_center {
+  font-size: 18px;
+  color: red;
+  position: absolute;
+  left: 100px;
+  top: 20px;
+}
+
+/deep/ .wired,
+/deep/ .wifi {
+  .el-row {
+    .el-col-12:last-child {
+      padding-right: 120px;
+    }
+
+    .el-col-12:first-child {
+      padding-right: 118px;
+    }
+
+    .el-input__inner {
+      height: 30px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .el-row {
+      display: flex;
+      align-items: flex-end;
+
+      .el-col-1 {
+        text-align: center;
+        line-height: 20px;
+        height: 20px;
+      }
+
+      .mac {
+        // display: flex;
+        align-items: center;
+
+        .el-button {
+          position: absolute;
+          left: 200px;
+          bottom: 5px;
+          margin-left: 10px;
+          margin-top: 10px;
+          width: 80px;
+          height: 30px;
+          line-height: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.netWay {
+  margin-bottom: 20px;
+  width: 80px;
+  color: rgba(16, 16, 16, 1);
+  font-size: 20px;
+  text-align: left;
+}
+
+.footer {
+  position: absolute;
+  left: 360px;
+  bottom: 2px;
+}
+</style>
diff --git a/.history/src/components/GatewayConfiguration_20231111180549.vue b/.history/src/components/GatewayConfiguration_20231111180549.vue
new file mode 100644
index 0000000..bef4792
--- /dev/null
+++ b/.history/src/components/GatewayConfiguration_20231111180549.vue
@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <el-dialog title="网关配置" :visible.sync="dialogVisible" width="70%">
+      <el-dialog title="详情" :visible.sync="xqFlag" width="30%">
+        <div class="xqbox">
+          <p>
+            <span class="s1">网关编号:</span> <span>{{ rowDate.wgbh }}</span>
+          </p>
+          <p>
+            <span class="s1">网关id:</span> <span>{{ rowDate.wgid }}</span>
+          </p>
+          <p>
+            <span class="s1">网关类型:</span> <span>{{ rowDate.wglx }}</span>
+          </p>
+          <p>
+            <span class="s1">网关名称:</span> <span>{{ rowDate.wgmc }}</span>
+          </p>
+        </div>
+      </el-dialog>
+
+      <div class="title">
+        <div class="left">
+          <el-button @click="flag = true">新建网关</el-button>
+          <el-button @click="deleteSelectedRows">删除</el-button>
+        </div>
+        <!-- <div class="right">
+          <el-input type="search" v-model="search"></el-input>
+          <el-button @click="select">筛选</el-button>
+        </div> -->
+      </div>
+      <el-table
+        ref="multipleTable"
+        :data="wgpz"
+        border
+        style="margin-top: 10px; width: 100%"
+        tooltip-effect="dark"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column label="序号">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template></el-table-column
+        >
+        <el-table-column type="selection" width="40"> </el-table-column>
+        <el-table-column prop="wgid" label="网关ID"> </el-table-column>
+        <el-table-column prop="wgbh" label="网关编号"> </el-table-column>
+        <el-table-column prop="wgmc" label="网关名称"> </el-table-column>
+        <el-table-column prop="wglx" label="网关类型"> </el-table-column>
+        <el-table-column prop="whr" label="维护人"> </el-table-column>
+        <el-table-column prop="whsj" label="维护时间"> </el-table-column>
+        <el-table-column label="修改">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="handleDelete(scope.$index, scope.row)"
+              >删除</el-button
+            >
+          </template></el-table-column
+        >
+        <el-table-column label="详细">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="chakan(scope.$index, scope.row)"
+              >查看</el-button
+            >
+          </template></el-table-column
+        >
+        <el-table-column label="参数配置">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="$router.push('/ntmaintenance?' + scope.row.wgbh)"
+              >参数配置</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog title="新建网关" :visible.sync="flag">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="150px"
+        class="demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item label="网关类型:" prop="wglx">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wglx">
+              <el-option label="box" value="box"></el-option>
+              <el-option label="server port" value="server port"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网关编号:" prop="wgbh">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wgbh">
+              <el-option label="2000808010" value="2000808010"></el-option>
+              <el-option label="2000808011" value="2000808011"></el-option>
+              <el-option label="2000808012" value="2000808012"></el-option>
+              <el-option label="2000808013" value="2000808013"></el-option>
+              <!-- <el-option label="2000808014" value="2000808014"></el-option>
+              <el-option label="2000808015" value="2000808015"></el-option> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网关ID:" prop="wgid">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wgid">
+              <el-option label="lan-box1" value="lan-box1"></el-option>
+              <el-option label="lan-box2" value="lan-box2"></el-option>
+              <el-option label="wlan-box1" value="wlan-box1"></el-option>
+              <el-option label="wlan-box2" value="wlan-box2"></el-option>
+              <!-- <el-option
+                label="lan- server port"
+                value="lan- server port"
+              ></el-option>
+              <el-option
+                label="wlan- server port"
+                value="wlan- server port"
+              ></el-option> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网关名称:" prop="wgmc">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wgmc">
+              <el-option label="有线区网关1" value="有线区网关1"></el-option>
+              <el-option label="有线区网关2" value="有线区网关2"></el-option>
+              <el-option label="无线区网关1" value="无线区网关1"></el-option>
+              <el-option label="无线区网关2" value="无线区网关2"></el-option>
+              <!-- <el-option
+                label="有线区串口服务器"
+                value="有线区串口服务器"
+              ></el-option>
+              <el-option
+                label="无线区串口服务器"
+                value="无线区串口服务器"
+              ></el-option> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveinfo">保存</el-button>
+        <el-button @click="flag = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  data() {
+    return {
+      dialogVisible: true,
+      xqFlag: false,
+      flag: false,
+      labelPosition: "left",
+      user_id: "",
+      wgpz: [],
+      FormData: [],
+      multipleSelection: [],
+      search: "",
+      rowDate: {},
+      ruleForm: {
+        wglx: "",
+        wgid: "",
+        wgbh: "",
+        wgmc: "",
+      },
+      rules: {
+        wglx: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+        wgid: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+        wgbh: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+        wgmc: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+    // this.wgpz = JSON.parse(localStorage.getItem("wgpz")) || [];
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    handleSelectionChange() {},
+    //新建网关保存
+    saveinfo() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (this.wgpz.length < 4) {
+            localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
+            this.SaveUserAnswer();
+            this.flag = false;
+          } else {
+            this.$message({
+              message: "抱歉，只能添加四条数据",
+              type: "error",
+            });
+            return false;
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //删除
+    handleDelete(a, b) {
+      this.wgpz.splice(a, 1);
+      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
+      this.SaveUserAnswer();
+    },
+    //多选
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    //多选删除
+    deleteSelectedRows() {
+      if (this.multipleSelection.length == 0) {
+        this.$message({
+          message: "请先选择数据",
+          type: "warning",
+        });
+        return false;
+      }
+      this.wgpz = this.wgpz.filter(
+        (row) => !this.multipleSelection.includes(row)
+      );
+      this.multipleSelection = [];
+      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
+      this.SaveUserAnswer();
+    },
+    //查看
+    chakan(a, b) {
+      this.rowDate = b;
+      this.xqFlag = true;
+    },
+    //读缓存
+    async GetUserAnswer() {
+      let { data } = await GetUserAnswer({
+        mark: "YDPZYM_wgpz",
+        user_id: `${this.user_id}`,
+      });
+      console.log(data.data);
+      if (data.data && data.state) {
+        this.wgpz = JSON.parse(data.data.mark_value);
+      }
+    },
+    //保存数据
+    async SaveUserAnswer() {
+      let { data } = await SaveUserAnswer({
+        mark: "YDPZYM_wgpz",
+        user_id: `${this.user_id}`,
+        mark_value: JSON.stringify(this.wgpz),
+      });
+      if (data.state) {
+        this.wgpz.push(this.ruleForm);
+        this.$message({
+          message: "操作成功",
+          type: "success",
+        });
+        this.flag = true;
+      } else {
+        this.$message.error(data.message);
+        return;
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.title {
+  display: flex;
+  justify-content: space-between;
+
+  div {
+    display: flex;
+  }
+}
+
+.el-table {
+  margin-top: 10px;
+}
+.xqbox {
+  p {
+    margin: 5px;
+    display: flex;
+    .s1 {
+      width: 70px;
+      color: #0275ff;
+    }
+  }
+}
+.el-table {
+  height: 400px;
+}
+</style>
diff --git a/.history/src/components/GatewayConfiguration_20231111181611.vue b/.history/src/components/GatewayConfiguration_20231111181611.vue
new file mode 100644
index 0000000..19db010
--- /dev/null
+++ b/.history/src/components/GatewayConfiguration_20231111181611.vue
@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <el-dialog title="网关配置" :visible.sync="dialogVisible" width="70%">
+      <el-dialog title="详情" :visible.sync="xqFlag" width="30%">
+        <div class="xqbox">
+          <p>
+            <span class="s1">网关编号:</span> <span>{{ rowDate.wgbh }}</span>
+          </p>
+          <p>
+            <span class="s1">网关id:</span> <span>{{ rowDate.wgid }}</span>
+          </p>
+          <p>
+            <span class="s1">网关类型:</span> <span>{{ rowDate.wglx }}</span>
+          </p>
+          <p>
+            <span class="s1">网关名称:</span> <span>{{ rowDate.wgmc }}</span>
+          </p>
+        </div>
+      </el-dialog>
+
+      <div class="title">
+        <div class="left">
+          <el-button @click="flag = true">新建网关</el-button>
+          <el-button @click="deleteSelectedRows">删除</el-button>
+        </div>
+        <!-- <div class="right">
+          <el-input type="search" v-model="search"></el-input>
+          <el-button @click="select">筛选</el-button>
+        </div> -->
+      </div>
+      <el-table ref="multipleTable" :data="wgpz" border style="margin-top: 10px; width: 100%" tooltip-effect="dark"
+        @selection-change="handleSelectionChange">
+        <el-table-column label="序号">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template></el-table-column>
+        <el-table-column type="selection" width="40"> </el-table-column>
+        <el-table-column prop="wgid" label="网关ID"> </el-table-column>
+        <el-table-column prop="wgbh" label="网关编号"> </el-table-column>
+        <el-table-column prop="wgmc" label="网关名称"> </el-table-column>
+        <el-table-column prop="wglx" label="网关类型"> </el-table-column>
+        <el-table-column prop="whr" label="维护人"> </el-table-column>
+        <el-table-column prop="whsj" label="维护时间"> </el-table-column>
+        <el-table-column label="修改">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template></el-table-column>
+        <el-table-column label="详细">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="chakan(scope.$index, scope.row)">查看</el-button>
+          </template></el-table-column>
+        <el-table-column label="参数配置">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="$router.push('/ntmaintenance?' + scope.row.wgbh)">参数配置</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog title="新建网关" :visible.sync="flag">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
+        :label-position="labelPosition">
+        <el-form-item label="网关类型:" prop="wglx">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wglx">
+              <el-option label="box" value="box"></el-option>
+              <el-option label="server port" value="server port"></el-option>
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网关编号:" prop="wgbh">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wgbh">
+              <el-option label="2000808010" value="2000808010"></el-option>
+              <el-option label="2000808011" value="2000808011"></el-option>
+              <el-option label="2000808012" value="2000808012"></el-option>
+              <el-option label="2000808013" value="2000808013"></el-option>
+              <!-- <el-option label="2000808014" value="2000808014"></el-option>
+              <el-option label="2000808015" value="2000808015"></el-option> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网关ID:" prop="wgid">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wgid">
+              <el-option label="lan-box1" value="lan-box1"></el-option>
+              <el-option label="lan-box2" value="lan-box2"></el-option>
+              <el-option label="wlan-box1" value="wlan-box1"></el-option>
+              <el-option label="wlan-box2" value="wlan-box2"></el-option>
+              <!-- <el-option
+                label="lan- server port"
+                value="lan- server port"
+              ></el-option>
+              <el-option
+                label="wlan- server port"
+                value="wlan- server port"
+              ></el-option> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="网关名称:" prop="wgmc">
+          <el-col :span="12">
+            <el-select v-model="ruleForm.wgmc">
+              <el-option label="有线区网关1" value="有线区网关1"></el-option>
+              <el-option label="有线区网关2" value="有线区网关2"></el-option>
+              <el-option label="无线区网关1" value="无线区网关1"></el-option>
+              <el-option label="无线区网关2" value="无线区网关2"></el-option>
+              <!-- <el-option
+                label="有线区串口服务器"
+                value="有线区串口服务器"
+              ></el-option>
+              <el-option
+                label="无线区串口服务器"
+                value="无线区串口服务器"
+              ></el-option> -->
+            </el-select>
+          </el-col>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveinfo">保存</el-button>
+        <el-button @click="flag = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+  data() {
+    return {
+      dialogVisible: true,
+      xqFlag: false,
+      flag: false,
+      labelPosition: "left",
+      user_id: "",
+      wgpz: [],
+      FormData: [],
+      multipleSelection: [],
+      search: "",
+      rowDate: {},
+      ruleForm: {
+        wglx: "",
+        wgid: "",
+        wgbh: "",
+        wgmc: "",
+      },
+      rules: {
+        wglx: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+        wgid: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+        wgbh: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+        wgmc: [
+          { required: true, trigger: "change", message: "请选择一个选项" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.user_id = window.location.href.split("?")[1];
+    this.GetUserAnswer();
+    // this.wgpz = JSON.parse(localStorage.getItem("wgpz")) || [];
+  },
+  methods: {
+    getParameter(data) {
+      console.log(data);
+      this.user_id = data;
+    },
+    handleSelectionChange() { },
+    //新建网关保存
+    saveinfo() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (this.wgpz.length < 4) {
+            localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
+            this.SaveUserAnswer();
+            this.flag = false;
+          } else {
+            this.$message({
+              message: "抱歉，只能添加四条数据",
+              type: "error",
+            });
+            return false;
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //删除
+    handleDelete(a, b) {
+      this.wgpz.splice(a, 1);
+      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
+      this.SaveUserAnswer();
+    },
+    //多选
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    //多选删除
+    deleteSelectedRows() {
+      if (this.multipleSelection.length == 0) {
+        this.$message({
+          message: "请先选择数据",
+          type: "warning",
+        });
+        return false;
+      }
+      this.wgpz = this.wgpz.filter(
+        (row) => !this.multipleSelection.includes(row)
+      );
+      this.multipleSelection = [];
+      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
+      this.SaveUserAnswer();
+    },
+    //查看
+    chakan(a, b) {
+      this.rowDate = b;
+      this.xqFlag = true;
+    },
+    //读缓存
+    async GetUserAnswer() {
+      let { data } = await GetUserAnswer({
+        mark: "YDPZYM_wgpz",
+        user_id: `${this.user_id}`,
+      });
+      console.log(data.data);
+      if (data.data && data.state) {
+        this.wgpz = JSON.parse(data.data.mark_value);
+      }
+    },
+    //保存数据
+    async SaveUserAnswer() {
+      let { data } = await SaveUserAnswer({
+        mark: "YDPZYM_wgpz",
+        user_id: `${this.user_id}`,
+        mark_value: JSON.stringify(this.wgpz),
+      });
+      if (data.state) {
+        this.wgpz.push(this.ruleForm);
+        this.$message({
+          message: "操作成功",
+          type: "success",
+        });
+        this.flag = true;
+      } else {
+        this.$message.error(data.message);
+        return;
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.title {
+  display: flex;
+  justify-content: space-between;
+
+  div {
+    display: flex;
+  }
+}
+
+.el-table {
+  margin-top: 10px;
+}
+
+.xqbox {
+  p {
+    margin: 5px;
+    display: flex;
+
+    .s1 {
+      width: 70px;
+      color: #0275ff;
+    }
+  }
+}
+
+.el-table {
+  height: 400px;
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231111183536.vue b/.history/src/components/SerialPort_20231111183536.vue
new file mode 100644
index 0000000..a39638e
--- /dev/null
+++ b/.history/src/components/SerialPort_20231111183536.vue
@@ -0,0 +1,1337 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </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" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                                <el-select v-model="formData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                                <el-select v-model="formData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.tdpz_qdmc" placeholder=""
+                                            style="width: 200px; height: 30px" disabled></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="串口号:" :label-width="formLabelWidth" prop="tdpz_chuankou">
+                                <el-select v-model="formData.tdpz_chuankou" placeholder=""
+                                    style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="波特率:" :label-width="formLabelWidth" prop="tdpz_btl">
+                                <el-select v-model="formData.tdpz_btl" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options4" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="数据位:" :label-width="formLabelWidth" prop="tdpz_sjw">
+                                <el-select v-model="formData.tdpz_sjw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options5" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="停止位:" :label-width="formLabelWidth" prop="tdpz_tzw">
+                                <el-select v-model="formData.tdpz_tzw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options6" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="tdpz_jojy">
+                                <el-select v-model="formData.tdpz_jojy" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options7" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cgsj">
+                                <el-input v-model="formData.tdpz_cgsj" 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="tdpz_jgsj">
+                                <el-input v-model="formData.tdpz_jgsj" 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="tdpz_lxsj">
+                                <el-input v-model="formData.tdpz_lxsj" 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="tdpz_cfcs">
+                                <el-input v-model="formData.tdpz_cfcs" 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;
+                border: none;
+                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="formData.tdpz_watchtime">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="formData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">: </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="tdpz_dxzkb2" 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="formData.tdpz_050F"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                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="formData.tdpz_0610"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" default-expand-all @node-click="handleDetailClick"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+    name: "TestTreeView",
+    data() {
+        return {
+            user_id: "",
+            loading: false,
+            flag: false,
+            gateway: "",
+            nodekey: "",
+            trees: [],
+            formData: {
+                tdpz_tdmc: "",
+                tdpz_td: "",
+                tdpz_qdmc: "",
+                tdpz_chuankou: "",
+                tdpz_btl: "",
+                tdpz_sjw: "8",
+                tdpz_tzw: "",
+                tdpz_jojy: "",
+                tdpz_cgsj: "",
+                tdpz_jgsj: "",
+                tdpz_lxsj: "",
+                tdpz_cfcs: "",
+                tdpz_watchtime: false,
+                tdpz_cjsylxdz: true,
+                tdpz_dxzkb: "",
+                tdpz_050F: "1",
+                tdpz_0610: "1",
+            },
+            tdpz_dxzkb1: "1",
+            tdpz_dxzkb2: "1",
+            diag_drive: false,
+            options1: [
+                {
+                    value: "有线区Channel1",
+                    label: "有线区Channel1",
+                },
+                {
+                    value: "无线区Channel1",
+                    label: "无线区Channel1",
+                },
+            ],
+            options2: [
+                {
+                    value: "网口",
+                    label: "网口",
+                },
+                {
+                    value: "串口",
+                    label: "串口",
+                },
+            ],
+            options3: [
+                {
+                    value: "com1",
+                    label: "com1",
+                },
+                {
+                    value: "com2",
+                    label: "com2",
+                },
+                {
+                    value: "com3",
+                    label: "com3",
+                },
+                {
+                    value: "com4",
+                    label: "com4",
+                },
+                {
+                    value: "com5",
+                    label: "com5",
+                },
+                {
+                    value: "com6",
+                    label: "com6",
+                },
+                {
+                    value: "com7",
+                    label: "com7",
+                },
+                {
+                    value: "com8",
+                    label: "com8",
+                },
+                {
+                    value: "com9",
+                    label: "com9",
+                },
+                {
+                    value: "com10",
+                    label: "com10",
+                },
+                {
+                    value: "com11",
+                    label: "com11",
+                },
+                {
+                    value: "com12",
+                    label: "com12",
+                },
+                {
+                    value: "com13",
+                    label: "com13",
+                },
+                {
+                    value: "com14",
+                    label: "com14",
+                },
+                {
+                    value: "com15",
+                    label: "com15",
+                },
+                {
+                    value: "com16",
+                    label: "com16",
+                },
+                {
+                    value: "com17",
+                    label: "com17",
+                },
+                {
+                    value: "com18",
+                    label: "com18",
+                },
+                {
+                    value: "com19",
+                    label: "com19",
+                },
+                {
+                    value: "com20",
+                    label: "com20",
+                },
+                {
+                    value: "com21",
+                    label: "com21",
+                },
+                {
+                    value: "com22",
+                    label: "com22",
+                },
+                {
+                    value: "com23",
+                    label: "com23",
+                },
+                {
+                    value: "com24",
+                    label: "com24",
+                },
+                {
+                    value: "com25",
+                    label: "com25",
+                },
+                {
+                    value: "com26",
+                    label: "com26",
+                },
+                {
+                    value: "com27",
+                    label: "com27",
+                },
+                {
+                    value: "com28",
+                    label: "com28",
+                },
+                {
+                    value: "com29",
+                    label: "com29",
+                },
+                {
+                    value: "com30",
+                    label: "com30",
+                },
+                {
+                    value: "com31",
+                    label: "com31",
+                },
+                {
+                    value: "com32",
+                    label: "com32",
+                },
+                {
+                    value: "com33",
+                    label: "com33",
+                },
+                {
+                    value: "com34",
+                    label: "com34",
+                },
+                {
+                    value: "com35",
+                    label: "com35",
+                },
+                {
+                    value: "com36",
+                    label: "com36",
+                },
+                {
+                    value: "com37",
+                    label: "com37",
+                },
+                {
+                    value: "com38",
+                    label: "com38",
+                },
+                {
+                    value: "com39",
+                    label: "com39",
+                },
+                {
+                    value: "com40",
+                    label: "com40",
+                },
+                {
+                    value: "com41",
+                    label: "com41",
+                },
+                {
+                    value: "com42",
+                    label: "com42",
+                },
+                {
+                    value: "com43",
+                    label: "com43",
+                },
+                {
+                    value: "com44",
+                    label: "com44",
+                },
+                {
+                    value: "com45",
+                    label: "com45",
+                },
+                {
+                    value: "com46",
+                    label: "com46",
+                },
+                {
+                    value: "com47",
+                    label: "com47",
+                },
+                {
+                    value: "com48",
+                    label: "com48",
+                },
+                {
+                    value: "com49",
+                    label: "com49",
+                },
+                {
+                    value: "com50",
+                    label: "com50",
+                },
+            ],
+            options4: [
+                {
+                    value: "1200",
+                    label: "1200",
+                },
+                {
+                    value: "2400",
+                    label: "2400",
+                },
+                {
+                    value: "4800",
+                    label: "4800",
+                },
+                {
+                    value: "9600",
+                    label: "9600",
+                },
+                {
+                    value: "115200",
+                    label: "115200",
+                },
+            ],
+            options5: [
+                {
+                    value: "8",
+                    label: "8",
+                },
+                {
+                    value: "7",
+                    label: "7",
+                },
+            ],
+            options6: [
+                {
+                    value: "1",
+                    label: "1",
+                },
+                {
+                    value: "2",
+                    label: "2",
+                },
+            ],
+            options7: [
+                {
+                    value: "奇校验",
+                    label: "奇校验",
+                },
+                {
+                    value: "偶校验",
+                    label: "偶校验",
+                },
+                {
+                    value: "无校验（none）",
+                    label: "无校验（none）",
+                },
+            ],
+            isdisabled: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 10,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [
+                {
+                    label: "Gateway",
+                    children: [
+                        {
+                            label: "数据采集",
+                            children: [
+                                {
+                                    label: "I/O点",
+                                },
+                                {
+                                    label: "用户点",
+                                },
+                                {
+                                    label: "计算点",
+                                },
+                                {
+                                    label: "系统点",
+                                },
+                            ],
+                        },
+                        {
+                            label: "数据服务",
+                            children: [
+                                {
+                                    label: "Modbus",
+                                },
+                            ],
+                        },
+                        {
+                            label: "IOT",
+                            children: [
+                                {
+                                    label: "Mqtt Client",
+                                },
+                                {
+                                    label: "Alink",
+                                },
+                                {
+                                    label: "Tlink",
+                                },
+                                {
+                                    label: "loTDDC",
+                                },
+                                {
+                                    label: "Ulink",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            datas2: [
+                {
+                    label: "通用标准",
+                    children: [
+                        {
+                            label: "ModbusTCPClient",
+                        },
+                        {
+                            label: "ModbusRTU_over_TCP",
+                        },
+                        {
+                            label: "OPCUAClient",
+                        },
+                        {
+                            label: "OPCDAClient",
+                        },
+                        {
+                            label: "MQTTClient",
+                        },
+                        {
+                            label: "OPCXMLDAClient",
+                        },
+                        {
+                            label: "环保212协议网口监听",
+                        },
+                    ],
+                },
+                {
+                    label: "PLC",
+                    children: [
+                        {
+                            label: "Slemens S7-200 Network",
+                        },
+                        {
+                            label: "Slemens S7-300 Network",
+                        },
+                        {
+                            label: "Slemens S7-400 Network",
+                        },
+                        {
+                            label: "Slemens S7-1200 Network",
+                        },
+                        {
+                            label: "Slemens S7-1500 Network",
+                        },
+                        {
+                            label: "EtherNet/IP CIP协议(AB OMR ON)",
+                        },
+                        {
+                            label: "MC_Qna-3E(三菱 基恩士 松下)",
+                        },
+                        {
+                            label: "MC_A-1E_Binary",
+                        },
+                        {
+                            label: "OMRON-FINS",
+                        },
+                        {
+                            label: "横河PLC",
+                        },
+                        {
+                            label: "西门子FetchWirte",
+                        },
+                        {
+                            label: "富机 FUJI_SPH_NET",
+                        },
+                        {
+                            label: "基恩士上位链路通讯",
+                        },
+                    ],
+                },
+                {
+                    label: "智能建筑",
+                    children: [],
+                },
+                {
+                    label: "厂家定制",
+                    children: [],
+                },
+                {
+                    label: "电力行业标准",
+                    children: [
+                        {
+                            label: "IEC104",
+                        },
+                        {
+                            label: "DLT645_over_TCP",
+                        },
+                    ],
+                },
+                {
+                    label: "CNC数控",
+                    children: [],
+                },
+                {
+                    label: "私有协议",
+                    children: [],
+                },
+            ],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+            rules: {
+                tdpz_tdmc: [
+                    { required: true, message: "请输入通道名称", trigger: "change" },
+                ],
+                tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+                tdpz_qdmc: [
+                    { required: true, message: "请输入驱动名称", trigger: "change" },
+                ],
+                tdpz_chuankou: [
+                    { required: true, message: "请输入串口号", trigger: "change" },
+                ],
+                tdpz_btl: [
+                    { required: true, message: "请输入波特率", trigger: "change" },
+                ],
+                tdpz_tzw: [
+                    { required: true, message: "请输入停止位", trigger: "change" },
+                ],
+                tdpz_sjw: [
+                    { required: true, message: "请输入数据位", trigger: "change" },
+                ],
+                tdpz_jojy: [
+                    { required: true, message: "请输入奇偶校验", trigger: "change" },
+                ],
+                tdpz_cgsj: [
+                    { required: true, message: "请输入超出时间", trigger: "blur" },
+                ],
+                tdpz_jgsj: [
+                    { required: true, message: "请输入间隔时间", trigger: "blur" },
+                ],
+                tdpz_lxsj: [
+                    { required: true, message: "请输入轮询时间", trigger: "blur" },
+                ],
+                tdpz_cfcs: [
+                    { required: true, message: "请输入重复次数", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveGate();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            if (node.level == 3) {
+                this.nodekey = data.id;
+                this.menuShow = false;
+                this.menuShow = true;
+                e.preventDefault(); //关闭浏览器右键默认事件
+                this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+                document.addEventListener("click", (ev) => {
+                    ev.stopImmediatePropagation();
+                    if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+                        this.foo();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo();
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.level == 2) {
+                this.formData.tdpz_qdmc = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveGate() {
+            var obj = {
+                tdpz_tdmc: this.formData.tdpz_tdmc,
+                tdpz_td: this.formData.tdpz_td,
+                tdpz_qdmc: this.formData.tdpz_qdmc,
+                tdpz_port: this.formData.tdpz_port,
+                tdpz_chuankou: this.formData.tdpz_chuankou,
+                tdpz_btl: this.formData.tdpz_btl,
+                tdpz_sjw: this.formData.tdpz_sjw,
+                tdpz_tzw: this.formData.tdpz_tzw,
+                tdpz_jojy: this.formData.tdpz_jojy,
+                tdpz_cgsj: this.formData.tdpz_cgsj,
+                tdpz_jgsj: this.formData.tdpz_jgsj,
+                tdpz_lxsj: this.formData.tdpz_lxsj,
+                tdpz_cfcs: this.formData.tdpz_cfcs,
+                tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                tdpz_050F: this.formData.tdpz_050F,
+                tdpz_0610: this.formData.tdpz_0610,
+            };
+            this.add_passage = false;
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            // console.log(this.formData);
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(res.data.data.mark_value);
+                this.$refs["tree"].append(
+                    {
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc,
+                    },
+                    this.nodekey
+                );
+                // console.log(this.trees);
+                this.sendTree();
+                this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+            } else {
+                this.$message({
+                    message: "保存失败",
+                    type: "error",
+                });
+            }
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(answer);
+            // console.log(answer.data);
+            if (answer.data.data && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                // console.log(obj);
+                if (obj.tdpz_dxzkb) {
+                    this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                    this.formData.tdpz_td = obj.tdpz_td;
+                    this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                    this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                    this.formData.tdpz_btl = obj.tdpz_btl;
+                    this.formData.tdpz_sjw = obj.tdpz_sjw;
+                    this.formData.tdpz_tzw = obj.tdpz_tzw;
+                    this.formData.tdpz_jojy = obj.tdpz_jojy;
+                    this.formData.tdpz_port = obj.tdpz_port;
+                    this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                    this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                    this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                    this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                    this.formData.tdpz_050F = obj.tdpz_050F;
+                    this.formData.tdpz_0610 = obj.tdpz_0610;
+                    this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                    this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                    this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                    this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "2",
+            });
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        GetTree({
+            user_id: this.user_id,
+            type: "2",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        });
+        this.GetUserAnswer();
+    },
+    directives: {
+        "click-outside": {
+            bind: function (el, binding, vnode) {
+                console.log("el", el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == "function") {
+                            vnode.context[binding.expression](event);
+                        }
+                    }
+                };
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener("click", el.event, true);
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener("click", el.event, true);
+            },
+        },
+        methods: {
+            // 提交时校验
+            submitForm() {
+                this.$refs["formData"].validate((valid) => {
+                    if (valid) {
+                        this.saveGate();
+                    } else {
+                        console.log("error submit!!");
+                        return false;
+                    }
+                });
+            },
+            edit(event) {
+                this.flag = true;
+            },
+            //完成编辑
+            done(event) {
+                this.flag = false;
+                this.trees[0].label = this.gateway;
+                this.sendTree();
+            },
+            rightClick(e, data, node) {
+                if (node.level == 3) {
+                    this.nodekey = data.id;
+                    this.menuShow = false
+                    this.menuShow = true
+                    e.preventDefault() //关闭浏览器右键默认事件
+                    this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+                    document.addEventListener('click', (ev) => {
+                        ev.stopImmediatePropagation()
+                        if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                            this.foo()
+                        }
+                    })
+                }
+            },
+            // 点击时候的判断,判断是否为新增网关
+            selectMenuNode(index, indexPath) {
+                console.log(index);
+                if (index == 1) {
+                    this.add_passage = true;
+                }
+            },
+            foo() {
+                // 取消鼠标监听事件 菜单栏
+                this.menuShow = false
+                document.removeEventListener('click', this.foo) // 关掉监听，
+            },
+            treeNodeClick() {
+                this.foo()
+            },
+            // 收起点击事件的判断
+            getRetract() {
+                if (this.is_retract == true) {
+                    this.is_retract = false;
+                } else {
+                    this.is_retract = true;
+                }
+            },
+            getDriveName() {
+                this.diag_drive = true;
+            },
+            closeMenu(ev) {
+                console.log({ ev });
+                this.dialogVisible = false;
+            },
+            handleDetailClick(data, node, value) {
+                console.log(data.label);
+                if (node.level == 2) {
+                    this.formData.tdpz_qdmc = data.label;
+                    this.diag_drive = false;
+                }
+
+            },
+            async saveGate() {
+                var obj = {
+                    tdpz_tdmc: this.formData.tdpz_tdmc,
+                    tdpz_td: this.formData.tdpz_td,
+                    tdpz_qdmc: this.formData.tdpz_qdmc,
+                    tdpz_port: this.formData.tdpz_port,
+                    tdpz_chuankou: this.formData.tdpz_chuankou,
+                    tdpz_btl: this.formData.tdpz_btl,
+                    tdpz_sjw: this.formData.tdpz_sjw,
+                    tdpz_tzw: this.formData.tdpz_tzw,
+                    tdpz_jojy: this.formData.tdpz_jojy,
+                    tdpz_cgsj: this.formData.tdpz_cgsj,
+                    tdpz_jgsj: this.formData.tdpz_jgsj,
+                    tdpz_lxsj: this.formData.tdpz_lxsj,
+                    tdpz_cfcs: this.formData.tdpz_cfcs,
+                    tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                    tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                    tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                    tdpz_050F: this.formData.tdpz_050F,
+                    tdpz_0610: this.formData.tdpz_0610,
+                }
+                this.add_passage = false;
+                let datas = sessionStorage.getItem("DB-IotLite_wx");
+                // console.log(this.formData);
+                datas = { ...JSON.parse(datas), ...obj };
+                let res = await SaveUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                    mark_value: JSON.stringify(datas),
+                });
+                if (res.data.state) {
+                    this.$message({
+                        message: "保存成功",
+                        type: "success",
+                    });
+                    sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                    // console.log(res);
+                    // console.log(res.data.data.mark_value);
+                    this.$refs["tree"].append({
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc
+                    }, this.nodekey);
+                    // console.log(this.trees);
+                    this.sendTree();
+                    this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+                } else {
+                    this.$message({
+                        message: `保存失败,原因是${res.data.message}`,
+                        type: "error",
+                    });
+                }
+
+            },
+            // 保存
+            async GetUserAnswer() {
+                this.loading = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                this.loading = false;
+                // console.log(answer);
+                // console.log(answer.data);
+                if (answer.data.data && answer.data.state) {
+                    // console.log(answer);
+                    let obj = JSON.parse(answer.data.data.mark_value);
+                    // console.log(obj);
+                    if (obj.tdpz_dxzkb) {
+                        this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                        this.formData.tdpz_td = obj.tdpz_td;
+                        this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                        this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                        this.formData.tdpz_btl = obj.tdpz_btl;
+                        this.formData.tdpz_sjw = obj.tdpz_sjw;
+                        this.formData.tdpz_tzw = obj.tdpz_tzw;
+                        this.formData.tdpz_jojy = obj.tdpz_jojy;
+                        this.formData.tdpz_port = obj.tdpz_port;
+                        this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                        this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                        this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                        this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                        this.formData.tdpz_050F = obj.tdpz_050F;
+                        this.formData.tdpz_0610 = obj.tdpz_0610;
+                        this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                        this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                        this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                        this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                    }
+                }
+            },
+            async sendTree() {
+                let result = await SendTree({
+                    user_id: this.user_id,
+                    data: JSON.stringify(this.trees),
+                    type: "2",
+                })
+                console.log(result);
+            },
+        },
+        mounted() {
+            this.user_id = this.$route.query.user_id;
+            GetTree({
+                user_id: this.user_id,
+                type: "2",
+            }).then((res) => {
+                console.log(res);
+                console.log(JSON.parse(res.data.data.data));
+                this.trees = JSON.parse(res.data.data.data);
+            })
+            this.GetUserAnswer();
+        },
+        directives: {
+            "click-outside": {
+                bind: function (el, binding, vnode) {
+                    console.log("el", el);
+                    console.log("binding", binding);
+                    el.event = function (event) {
+                        // 检查点击是否发生在节点之内（包括子节点）
+                        if (!(el == event.target || el.contains(event.target))) {
+                            // 如果没有，则触发调用
+                            // 若绑定值为函数，则执行
+                            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                            if (typeof vnode.context[binding.expression] == "function") {
+                                vnode.context[binding.expression](event);
+                            }
+                        }
+                    };
+                    // 绑定事件
+                    // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                    document.body.addEventListener("click", el.event, true);
+                },
+                unbind: function (el) {
+                    // 解绑事件
+                    document.body.removeEventListener("click", el.event, true);
+                },
+            },
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 38px;
+    }
+
+    .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: 6px;
+            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-dialog__footer {
+    padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 45px;
+    transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1408px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231111183611.vue b/.history/src/components/SerialPort_20231111183611.vue
new file mode 100644
index 0000000..a39638e
--- /dev/null
+++ b/.history/src/components/SerialPort_20231111183611.vue
@@ -0,0 +1,1337 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </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" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                                <el-select v-model="formData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                                <el-select v-model="formData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.tdpz_qdmc" placeholder=""
+                                            style="width: 200px; height: 30px" disabled></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="串口号:" :label-width="formLabelWidth" prop="tdpz_chuankou">
+                                <el-select v-model="formData.tdpz_chuankou" placeholder=""
+                                    style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="波特率:" :label-width="formLabelWidth" prop="tdpz_btl">
+                                <el-select v-model="formData.tdpz_btl" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options4" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="数据位:" :label-width="formLabelWidth" prop="tdpz_sjw">
+                                <el-select v-model="formData.tdpz_sjw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options5" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="停止位:" :label-width="formLabelWidth" prop="tdpz_tzw">
+                                <el-select v-model="formData.tdpz_tzw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options6" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="tdpz_jojy">
+                                <el-select v-model="formData.tdpz_jojy" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options7" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cgsj">
+                                <el-input v-model="formData.tdpz_cgsj" 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="tdpz_jgsj">
+                                <el-input v-model="formData.tdpz_jgsj" 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="tdpz_lxsj">
+                                <el-input v-model="formData.tdpz_lxsj" 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="tdpz_cfcs">
+                                <el-input v-model="formData.tdpz_cfcs" 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;
+                border: none;
+                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="formData.tdpz_watchtime">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="formData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">: </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="tdpz_dxzkb2" 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="formData.tdpz_050F"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                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="formData.tdpz_0610"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" default-expand-all @node-click="handleDetailClick"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+    name: "TestTreeView",
+    data() {
+        return {
+            user_id: "",
+            loading: false,
+            flag: false,
+            gateway: "",
+            nodekey: "",
+            trees: [],
+            formData: {
+                tdpz_tdmc: "",
+                tdpz_td: "",
+                tdpz_qdmc: "",
+                tdpz_chuankou: "",
+                tdpz_btl: "",
+                tdpz_sjw: "8",
+                tdpz_tzw: "",
+                tdpz_jojy: "",
+                tdpz_cgsj: "",
+                tdpz_jgsj: "",
+                tdpz_lxsj: "",
+                tdpz_cfcs: "",
+                tdpz_watchtime: false,
+                tdpz_cjsylxdz: true,
+                tdpz_dxzkb: "",
+                tdpz_050F: "1",
+                tdpz_0610: "1",
+            },
+            tdpz_dxzkb1: "1",
+            tdpz_dxzkb2: "1",
+            diag_drive: false,
+            options1: [
+                {
+                    value: "有线区Channel1",
+                    label: "有线区Channel1",
+                },
+                {
+                    value: "无线区Channel1",
+                    label: "无线区Channel1",
+                },
+            ],
+            options2: [
+                {
+                    value: "网口",
+                    label: "网口",
+                },
+                {
+                    value: "串口",
+                    label: "串口",
+                },
+            ],
+            options3: [
+                {
+                    value: "com1",
+                    label: "com1",
+                },
+                {
+                    value: "com2",
+                    label: "com2",
+                },
+                {
+                    value: "com3",
+                    label: "com3",
+                },
+                {
+                    value: "com4",
+                    label: "com4",
+                },
+                {
+                    value: "com5",
+                    label: "com5",
+                },
+                {
+                    value: "com6",
+                    label: "com6",
+                },
+                {
+                    value: "com7",
+                    label: "com7",
+                },
+                {
+                    value: "com8",
+                    label: "com8",
+                },
+                {
+                    value: "com9",
+                    label: "com9",
+                },
+                {
+                    value: "com10",
+                    label: "com10",
+                },
+                {
+                    value: "com11",
+                    label: "com11",
+                },
+                {
+                    value: "com12",
+                    label: "com12",
+                },
+                {
+                    value: "com13",
+                    label: "com13",
+                },
+                {
+                    value: "com14",
+                    label: "com14",
+                },
+                {
+                    value: "com15",
+                    label: "com15",
+                },
+                {
+                    value: "com16",
+                    label: "com16",
+                },
+                {
+                    value: "com17",
+                    label: "com17",
+                },
+                {
+                    value: "com18",
+                    label: "com18",
+                },
+                {
+                    value: "com19",
+                    label: "com19",
+                },
+                {
+                    value: "com20",
+                    label: "com20",
+                },
+                {
+                    value: "com21",
+                    label: "com21",
+                },
+                {
+                    value: "com22",
+                    label: "com22",
+                },
+                {
+                    value: "com23",
+                    label: "com23",
+                },
+                {
+                    value: "com24",
+                    label: "com24",
+                },
+                {
+                    value: "com25",
+                    label: "com25",
+                },
+                {
+                    value: "com26",
+                    label: "com26",
+                },
+                {
+                    value: "com27",
+                    label: "com27",
+                },
+                {
+                    value: "com28",
+                    label: "com28",
+                },
+                {
+                    value: "com29",
+                    label: "com29",
+                },
+                {
+                    value: "com30",
+                    label: "com30",
+                },
+                {
+                    value: "com31",
+                    label: "com31",
+                },
+                {
+                    value: "com32",
+                    label: "com32",
+                },
+                {
+                    value: "com33",
+                    label: "com33",
+                },
+                {
+                    value: "com34",
+                    label: "com34",
+                },
+                {
+                    value: "com35",
+                    label: "com35",
+                },
+                {
+                    value: "com36",
+                    label: "com36",
+                },
+                {
+                    value: "com37",
+                    label: "com37",
+                },
+                {
+                    value: "com38",
+                    label: "com38",
+                },
+                {
+                    value: "com39",
+                    label: "com39",
+                },
+                {
+                    value: "com40",
+                    label: "com40",
+                },
+                {
+                    value: "com41",
+                    label: "com41",
+                },
+                {
+                    value: "com42",
+                    label: "com42",
+                },
+                {
+                    value: "com43",
+                    label: "com43",
+                },
+                {
+                    value: "com44",
+                    label: "com44",
+                },
+                {
+                    value: "com45",
+                    label: "com45",
+                },
+                {
+                    value: "com46",
+                    label: "com46",
+                },
+                {
+                    value: "com47",
+                    label: "com47",
+                },
+                {
+                    value: "com48",
+                    label: "com48",
+                },
+                {
+                    value: "com49",
+                    label: "com49",
+                },
+                {
+                    value: "com50",
+                    label: "com50",
+                },
+            ],
+            options4: [
+                {
+                    value: "1200",
+                    label: "1200",
+                },
+                {
+                    value: "2400",
+                    label: "2400",
+                },
+                {
+                    value: "4800",
+                    label: "4800",
+                },
+                {
+                    value: "9600",
+                    label: "9600",
+                },
+                {
+                    value: "115200",
+                    label: "115200",
+                },
+            ],
+            options5: [
+                {
+                    value: "8",
+                    label: "8",
+                },
+                {
+                    value: "7",
+                    label: "7",
+                },
+            ],
+            options6: [
+                {
+                    value: "1",
+                    label: "1",
+                },
+                {
+                    value: "2",
+                    label: "2",
+                },
+            ],
+            options7: [
+                {
+                    value: "奇校验",
+                    label: "奇校验",
+                },
+                {
+                    value: "偶校验",
+                    label: "偶校验",
+                },
+                {
+                    value: "无校验（none）",
+                    label: "无校验（none）",
+                },
+            ],
+            isdisabled: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 10,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [
+                {
+                    label: "Gateway",
+                    children: [
+                        {
+                            label: "数据采集",
+                            children: [
+                                {
+                                    label: "I/O点",
+                                },
+                                {
+                                    label: "用户点",
+                                },
+                                {
+                                    label: "计算点",
+                                },
+                                {
+                                    label: "系统点",
+                                },
+                            ],
+                        },
+                        {
+                            label: "数据服务",
+                            children: [
+                                {
+                                    label: "Modbus",
+                                },
+                            ],
+                        },
+                        {
+                            label: "IOT",
+                            children: [
+                                {
+                                    label: "Mqtt Client",
+                                },
+                                {
+                                    label: "Alink",
+                                },
+                                {
+                                    label: "Tlink",
+                                },
+                                {
+                                    label: "loTDDC",
+                                },
+                                {
+                                    label: "Ulink",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            datas2: [
+                {
+                    label: "通用标准",
+                    children: [
+                        {
+                            label: "ModbusTCPClient",
+                        },
+                        {
+                            label: "ModbusRTU_over_TCP",
+                        },
+                        {
+                            label: "OPCUAClient",
+                        },
+                        {
+                            label: "OPCDAClient",
+                        },
+                        {
+                            label: "MQTTClient",
+                        },
+                        {
+                            label: "OPCXMLDAClient",
+                        },
+                        {
+                            label: "环保212协议网口监听",
+                        },
+                    ],
+                },
+                {
+                    label: "PLC",
+                    children: [
+                        {
+                            label: "Slemens S7-200 Network",
+                        },
+                        {
+                            label: "Slemens S7-300 Network",
+                        },
+                        {
+                            label: "Slemens S7-400 Network",
+                        },
+                        {
+                            label: "Slemens S7-1200 Network",
+                        },
+                        {
+                            label: "Slemens S7-1500 Network",
+                        },
+                        {
+                            label: "EtherNet/IP CIP协议(AB OMR ON)",
+                        },
+                        {
+                            label: "MC_Qna-3E(三菱 基恩士 松下)",
+                        },
+                        {
+                            label: "MC_A-1E_Binary",
+                        },
+                        {
+                            label: "OMRON-FINS",
+                        },
+                        {
+                            label: "横河PLC",
+                        },
+                        {
+                            label: "西门子FetchWirte",
+                        },
+                        {
+                            label: "富机 FUJI_SPH_NET",
+                        },
+                        {
+                            label: "基恩士上位链路通讯",
+                        },
+                    ],
+                },
+                {
+                    label: "智能建筑",
+                    children: [],
+                },
+                {
+                    label: "厂家定制",
+                    children: [],
+                },
+                {
+                    label: "电力行业标准",
+                    children: [
+                        {
+                            label: "IEC104",
+                        },
+                        {
+                            label: "DLT645_over_TCP",
+                        },
+                    ],
+                },
+                {
+                    label: "CNC数控",
+                    children: [],
+                },
+                {
+                    label: "私有协议",
+                    children: [],
+                },
+            ],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+            rules: {
+                tdpz_tdmc: [
+                    { required: true, message: "请输入通道名称", trigger: "change" },
+                ],
+                tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+                tdpz_qdmc: [
+                    { required: true, message: "请输入驱动名称", trigger: "change" },
+                ],
+                tdpz_chuankou: [
+                    { required: true, message: "请输入串口号", trigger: "change" },
+                ],
+                tdpz_btl: [
+                    { required: true, message: "请输入波特率", trigger: "change" },
+                ],
+                tdpz_tzw: [
+                    { required: true, message: "请输入停止位", trigger: "change" },
+                ],
+                tdpz_sjw: [
+                    { required: true, message: "请输入数据位", trigger: "change" },
+                ],
+                tdpz_jojy: [
+                    { required: true, message: "请输入奇偶校验", trigger: "change" },
+                ],
+                tdpz_cgsj: [
+                    { required: true, message: "请输入超出时间", trigger: "blur" },
+                ],
+                tdpz_jgsj: [
+                    { required: true, message: "请输入间隔时间", trigger: "blur" },
+                ],
+                tdpz_lxsj: [
+                    { required: true, message: "请输入轮询时间", trigger: "blur" },
+                ],
+                tdpz_cfcs: [
+                    { required: true, message: "请输入重复次数", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveGate();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            if (node.level == 3) {
+                this.nodekey = data.id;
+                this.menuShow = false;
+                this.menuShow = true;
+                e.preventDefault(); //关闭浏览器右键默认事件
+                this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+                document.addEventListener("click", (ev) => {
+                    ev.stopImmediatePropagation();
+                    if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+                        this.foo();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo();
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.level == 2) {
+                this.formData.tdpz_qdmc = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveGate() {
+            var obj = {
+                tdpz_tdmc: this.formData.tdpz_tdmc,
+                tdpz_td: this.formData.tdpz_td,
+                tdpz_qdmc: this.formData.tdpz_qdmc,
+                tdpz_port: this.formData.tdpz_port,
+                tdpz_chuankou: this.formData.tdpz_chuankou,
+                tdpz_btl: this.formData.tdpz_btl,
+                tdpz_sjw: this.formData.tdpz_sjw,
+                tdpz_tzw: this.formData.tdpz_tzw,
+                tdpz_jojy: this.formData.tdpz_jojy,
+                tdpz_cgsj: this.formData.tdpz_cgsj,
+                tdpz_jgsj: this.formData.tdpz_jgsj,
+                tdpz_lxsj: this.formData.tdpz_lxsj,
+                tdpz_cfcs: this.formData.tdpz_cfcs,
+                tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                tdpz_050F: this.formData.tdpz_050F,
+                tdpz_0610: this.formData.tdpz_0610,
+            };
+            this.add_passage = false;
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            // console.log(this.formData);
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(res.data.data.mark_value);
+                this.$refs["tree"].append(
+                    {
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc,
+                    },
+                    this.nodekey
+                );
+                // console.log(this.trees);
+                this.sendTree();
+                this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+            } else {
+                this.$message({
+                    message: "保存失败",
+                    type: "error",
+                });
+            }
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(answer);
+            // console.log(answer.data);
+            if (answer.data.data && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                // console.log(obj);
+                if (obj.tdpz_dxzkb) {
+                    this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                    this.formData.tdpz_td = obj.tdpz_td;
+                    this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                    this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                    this.formData.tdpz_btl = obj.tdpz_btl;
+                    this.formData.tdpz_sjw = obj.tdpz_sjw;
+                    this.formData.tdpz_tzw = obj.tdpz_tzw;
+                    this.formData.tdpz_jojy = obj.tdpz_jojy;
+                    this.formData.tdpz_port = obj.tdpz_port;
+                    this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                    this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                    this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                    this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                    this.formData.tdpz_050F = obj.tdpz_050F;
+                    this.formData.tdpz_0610 = obj.tdpz_0610;
+                    this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                    this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                    this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                    this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "2",
+            });
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        GetTree({
+            user_id: this.user_id,
+            type: "2",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        });
+        this.GetUserAnswer();
+    },
+    directives: {
+        "click-outside": {
+            bind: function (el, binding, vnode) {
+                console.log("el", el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == "function") {
+                            vnode.context[binding.expression](event);
+                        }
+                    }
+                };
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener("click", el.event, true);
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener("click", el.event, true);
+            },
+        },
+        methods: {
+            // 提交时校验
+            submitForm() {
+                this.$refs["formData"].validate((valid) => {
+                    if (valid) {
+                        this.saveGate();
+                    } else {
+                        console.log("error submit!!");
+                        return false;
+                    }
+                });
+            },
+            edit(event) {
+                this.flag = true;
+            },
+            //完成编辑
+            done(event) {
+                this.flag = false;
+                this.trees[0].label = this.gateway;
+                this.sendTree();
+            },
+            rightClick(e, data, node) {
+                if (node.level == 3) {
+                    this.nodekey = data.id;
+                    this.menuShow = false
+                    this.menuShow = true
+                    e.preventDefault() //关闭浏览器右键默认事件
+                    this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+                    document.addEventListener('click', (ev) => {
+                        ev.stopImmediatePropagation()
+                        if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                            this.foo()
+                        }
+                    })
+                }
+            },
+            // 点击时候的判断,判断是否为新增网关
+            selectMenuNode(index, indexPath) {
+                console.log(index);
+                if (index == 1) {
+                    this.add_passage = true;
+                }
+            },
+            foo() {
+                // 取消鼠标监听事件 菜单栏
+                this.menuShow = false
+                document.removeEventListener('click', this.foo) // 关掉监听，
+            },
+            treeNodeClick() {
+                this.foo()
+            },
+            // 收起点击事件的判断
+            getRetract() {
+                if (this.is_retract == true) {
+                    this.is_retract = false;
+                } else {
+                    this.is_retract = true;
+                }
+            },
+            getDriveName() {
+                this.diag_drive = true;
+            },
+            closeMenu(ev) {
+                console.log({ ev });
+                this.dialogVisible = false;
+            },
+            handleDetailClick(data, node, value) {
+                console.log(data.label);
+                if (node.level == 2) {
+                    this.formData.tdpz_qdmc = data.label;
+                    this.diag_drive = false;
+                }
+
+            },
+            async saveGate() {
+                var obj = {
+                    tdpz_tdmc: this.formData.tdpz_tdmc,
+                    tdpz_td: this.formData.tdpz_td,
+                    tdpz_qdmc: this.formData.tdpz_qdmc,
+                    tdpz_port: this.formData.tdpz_port,
+                    tdpz_chuankou: this.formData.tdpz_chuankou,
+                    tdpz_btl: this.formData.tdpz_btl,
+                    tdpz_sjw: this.formData.tdpz_sjw,
+                    tdpz_tzw: this.formData.tdpz_tzw,
+                    tdpz_jojy: this.formData.tdpz_jojy,
+                    tdpz_cgsj: this.formData.tdpz_cgsj,
+                    tdpz_jgsj: this.formData.tdpz_jgsj,
+                    tdpz_lxsj: this.formData.tdpz_lxsj,
+                    tdpz_cfcs: this.formData.tdpz_cfcs,
+                    tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                    tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                    tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                    tdpz_050F: this.formData.tdpz_050F,
+                    tdpz_0610: this.formData.tdpz_0610,
+                }
+                this.add_passage = false;
+                let datas = sessionStorage.getItem("DB-IotLite_wx");
+                // console.log(this.formData);
+                datas = { ...JSON.parse(datas), ...obj };
+                let res = await SaveUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                    mark_value: JSON.stringify(datas),
+                });
+                if (res.data.state) {
+                    this.$message({
+                        message: "保存成功",
+                        type: "success",
+                    });
+                    sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                    // console.log(res);
+                    // console.log(res.data.data.mark_value);
+                    this.$refs["tree"].append({
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc
+                    }, this.nodekey);
+                    // console.log(this.trees);
+                    this.sendTree();
+                    this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+                } else {
+                    this.$message({
+                        message: `保存失败,原因是${res.data.message}`,
+                        type: "error",
+                    });
+                }
+
+            },
+            // 保存
+            async GetUserAnswer() {
+                this.loading = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                this.loading = false;
+                // console.log(answer);
+                // console.log(answer.data);
+                if (answer.data.data && answer.data.state) {
+                    // console.log(answer);
+                    let obj = JSON.parse(answer.data.data.mark_value);
+                    // console.log(obj);
+                    if (obj.tdpz_dxzkb) {
+                        this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                        this.formData.tdpz_td = obj.tdpz_td;
+                        this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                        this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                        this.formData.tdpz_btl = obj.tdpz_btl;
+                        this.formData.tdpz_sjw = obj.tdpz_sjw;
+                        this.formData.tdpz_tzw = obj.tdpz_tzw;
+                        this.formData.tdpz_jojy = obj.tdpz_jojy;
+                        this.formData.tdpz_port = obj.tdpz_port;
+                        this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                        this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                        this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                        this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                        this.formData.tdpz_050F = obj.tdpz_050F;
+                        this.formData.tdpz_0610 = obj.tdpz_0610;
+                        this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                        this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                        this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                        this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                    }
+                }
+            },
+            async sendTree() {
+                let result = await SendTree({
+                    user_id: this.user_id,
+                    data: JSON.stringify(this.trees),
+                    type: "2",
+                })
+                console.log(result);
+            },
+        },
+        mounted() {
+            this.user_id = this.$route.query.user_id;
+            GetTree({
+                user_id: this.user_id,
+                type: "2",
+            }).then((res) => {
+                console.log(res);
+                console.log(JSON.parse(res.data.data.data));
+                this.trees = JSON.parse(res.data.data.data);
+            })
+            this.GetUserAnswer();
+        },
+        directives: {
+            "click-outside": {
+                bind: function (el, binding, vnode) {
+                    console.log("el", el);
+                    console.log("binding", binding);
+                    el.event = function (event) {
+                        // 检查点击是否发生在节点之内（包括子节点）
+                        if (!(el == event.target || el.contains(event.target))) {
+                            // 如果没有，则触发调用
+                            // 若绑定值为函数，则执行
+                            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                            if (typeof vnode.context[binding.expression] == "function") {
+                                vnode.context[binding.expression](event);
+                            }
+                        }
+                    };
+                    // 绑定事件
+                    // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                    document.body.addEventListener("click", el.event, true);
+                },
+                unbind: function (el) {
+                    // 解绑事件
+                    document.body.removeEventListener("click", el.event, true);
+                },
+            },
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 38px;
+    }
+
+    .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: 6px;
+            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-dialog__footer {
+    padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 45px;
+    transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1408px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231111183730.vue b/.history/src/components/SerialPort_20231111183730.vue
new file mode 100644
index 0000000..96eeb5f
--- /dev/null
+++ b/.history/src/components/SerialPort_20231111183730.vue
@@ -0,0 +1,1337 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </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" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                                <el-select v-model="formData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                                <el-select v-model="formData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.tdpz_qdmc" placeholder=""
+                                            style="width: 200px; height: 30px" disabled></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="串口号:" :label-width="formLabelWidth" prop="tdpz_chuankou">
+                                <el-select v-model="formData.tdpz_chuankou" placeholder=""
+                                    style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="波特率:" :label-width="formLabelWidth" prop="tdpz_btl">
+                                <el-select v-model="formData.tdpz_btl" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options4" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="数据位:" :label-width="formLabelWidth" prop="tdpz_sjw">
+                                <el-select v-model="formData.tdpz_sjw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options5" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="停止位:" :label-width="formLabelWidth" prop="tdpz_tzw">
+                                <el-select v-model="formData.tdpz_tzw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options6" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="tdpz_jojy">
+                                <el-select v-model="formData.tdpz_jojy" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options7" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cgsj">
+                                <el-input v-model="formData.tdpz_cgsj" 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="tdpz_jgsj">
+                                <el-input v-model="formData.tdpz_jgsj" 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="tdpz_lxsj">
+                                <el-input v-model="formData.tdpz_lxsj" 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="tdpz_cfcs">
+                                <el-input v-model="formData.tdpz_cfcs" 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;
+                border: none;
+                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="formData.tdpz_watchtime">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="formData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">: </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="tdpz_dxzkb2" 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="formData.tdpz_050F"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                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="formData.tdpz_0610"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" default-expand-all @node-click="handleDetailClick"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+    name: "TestTreeView",
+    data() {
+        return {
+            user_id: "",
+            loading: false,
+            flag: false,
+            gateway: "",
+            nodekey: "",
+            trees: [],
+            formData: {
+                tdpz_tdmc: "",
+                tdpz_td: "",
+                tdpz_qdmc: "",
+                tdpz_chuankou: "",
+                tdpz_btl: "",
+                tdpz_sjw: "8",
+                tdpz_tzw: "",
+                tdpz_jojy: "",
+                tdpz_cgsj: "",
+                tdpz_jgsj: "",
+                tdpz_lxsj: "",
+                tdpz_cfcs: "",
+                tdpz_watchtime: false,
+                tdpz_cjsylxdz: true,
+                tdpz_dxzkb: "",
+                tdpz_050F: "1",
+                tdpz_0610: "1",
+            },
+            tdpz_dxzkb1: "1",
+            tdpz_dxzkb2: "1",
+            diag_drive: false,
+            options1: [
+                {
+                    value: "有线区Channel1",
+                    label: "有线区Channel1",
+                },
+                {
+                    value: "无线区Channel1",
+                    label: "无线区Channel1",
+                },
+            ],
+            options2: [
+                {
+                    value: "网口",
+                    label: "网口",
+                },
+                {
+                    value: "串口",
+                    label: "串口",
+                },
+            ],
+            options3: [
+                {
+                    value: "com1",
+                    label: "com1",
+                },
+                {
+                    value: "com2",
+                    label: "com2",
+                },
+                {
+                    value: "com3",
+                    label: "com3",
+                },
+                {
+                    value: "com4",
+                    label: "com4",
+                },
+                {
+                    value: "com5",
+                    label: "com5",
+                },
+                {
+                    value: "com6",
+                    label: "com6",
+                },
+                {
+                    value: "com7",
+                    label: "com7",
+                },
+                {
+                    value: "com8",
+                    label: "com8",
+                },
+                {
+                    value: "com9",
+                    label: "com9",
+                },
+                {
+                    value: "com10",
+                    label: "com10",
+                },
+                {
+                    value: "com11",
+                    label: "com11",
+                },
+                {
+                    value: "com12",
+                    label: "com12",
+                },
+                {
+                    value: "com13",
+                    label: "com13",
+                },
+                {
+                    value: "com14",
+                    label: "com14",
+                },
+                {
+                    value: "com15",
+                    label: "com15",
+                },
+                {
+                    value: "com16",
+                    label: "com16",
+                },
+                {
+                    value: "com17",
+                    label: "com17",
+                },
+                {
+                    value: "com18",
+                    label: "com18",
+                },
+                {
+                    value: "com19",
+                    label: "com19",
+                },
+                {
+                    value: "com20",
+                    label: "com20",
+                },
+                {
+                    value: "com21",
+                    label: "com21",
+                },
+                {
+                    value: "com22",
+                    label: "com22",
+                },
+                {
+                    value: "com23",
+                    label: "com23",
+                },
+                {
+                    value: "com24",
+                    label: "com24",
+                },
+                {
+                    value: "com25",
+                    label: "com25",
+                },
+                {
+                    value: "com26",
+                    label: "com26",
+                },
+                {
+                    value: "com27",
+                    label: "com27",
+                },
+                {
+                    value: "com28",
+                    label: "com28",
+                },
+                {
+                    value: "com29",
+                    label: "com29",
+                },
+                {
+                    value: "com30",
+                    label: "com30",
+                },
+                {
+                    value: "com31",
+                    label: "com31",
+                },
+                {
+                    value: "com32",
+                    label: "com32",
+                },
+                {
+                    value: "com33",
+                    label: "com33",
+                },
+                {
+                    value: "com34",
+                    label: "com34",
+                },
+                {
+                    value: "com35",
+                    label: "com35",
+                },
+                {
+                    value: "com36",
+                    label: "com36",
+                },
+                {
+                    value: "com37",
+                    label: "com37",
+                },
+                {
+                    value: "com38",
+                    label: "com38",
+                },
+                {
+                    value: "com39",
+                    label: "com39",
+                },
+                {
+                    value: "com40",
+                    label: "com40",
+                },
+                {
+                    value: "com41",
+                    label: "com41",
+                },
+                {
+                    value: "com42",
+                    label: "com42",
+                },
+                {
+                    value: "com43",
+                    label: "com43",
+                },
+                {
+                    value: "com44",
+                    label: "com44",
+                },
+                {
+                    value: "com45",
+                    label: "com45",
+                },
+                {
+                    value: "com46",
+                    label: "com46",
+                },
+                {
+                    value: "com47",
+                    label: "com47",
+                },
+                {
+                    value: "com48",
+                    label: "com48",
+                },
+                {
+                    value: "com49",
+                    label: "com49",
+                },
+                {
+                    value: "com50",
+                    label: "com50",
+                },
+            ],
+            options4: [
+                {
+                    value: "1200",
+                    label: "1200",
+                },
+                {
+                    value: "2400",
+                    label: "2400",
+                },
+                {
+                    value: "4800",
+                    label: "4800",
+                },
+                {
+                    value: "9600",
+                    label: "9600",
+                },
+                {
+                    value: "115200",
+                    label: "115200",
+                },
+            ],
+            options5: [
+                {
+                    value: "8",
+                    label: "8",
+                },
+                {
+                    value: "7",
+                    label: "7",
+                },
+            ],
+            options6: [
+                {
+                    value: "1",
+                    label: "1",
+                },
+                {
+                    value: "2",
+                    label: "2",
+                },
+            ],
+            options7: [
+                {
+                    value: "奇校验",
+                    label: "奇校验",
+                },
+                {
+                    value: "偶校验",
+                    label: "偶校验",
+                },
+                {
+                    value: "无校验（none）",
+                    label: "无校验（none）",
+                },
+            ],
+            isdisabled: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 10,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [
+                {
+                    label: "Gateway",
+                    children: [
+                        {
+                            label: "数据采集",
+                            children: [
+                                {
+                                    label: "I/O点",
+                                },
+                                {
+                                    label: "用户点",
+                                },
+                                {
+                                    label: "计算点",
+                                },
+                                {
+                                    label: "系统点",
+                                },
+                            ],
+                        },
+                        {
+                            label: "数据服务",
+                            children: [
+                                {
+                                    label: "Modbus",
+                                },
+                            ],
+                        },
+                        {
+                            label: "IOT",
+                            children: [
+                                {
+                                    label: "Mqtt Client",
+                                },
+                                {
+                                    label: "Alink",
+                                },
+                                {
+                                    label: "Tlink",
+                                },
+                                {
+                                    label: "loTDDC",
+                                },
+                                {
+                                    label: "Ulink",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            datas2: [
+                {
+                    label: "通用标准",
+                    children: [
+                        {
+                            label: "ModbusTCPClient",
+                        },
+                        {
+                            label: "ModbusRTU_over_TCP",
+                        },
+                        {
+                            label: "OPCUAClient",
+                        },
+                        {
+                            label: "OPCDAClient",
+                        },
+                        {
+                            label: "MQTTClient",
+                        },
+                        {
+                            label: "OPCXMLDAClient",
+                        },
+                        {
+                            label: "环保212协议网口监听",
+                        },
+                    ],
+                },
+                {
+                    label: "PLC",
+                    children: [
+                        {
+                            label: "Slemens S7-200 Network",
+                        },
+                        {
+                            label: "Slemens S7-300 Network",
+                        },
+                        {
+                            label: "Slemens S7-400 Network",
+                        },
+                        {
+                            label: "Slemens S7-1200 Network",
+                        },
+                        {
+                            label: "Slemens S7-1500 Network",
+                        },
+                        {
+                            label: "EtherNet/IP CIP协议(AB OMR ON)",
+                        },
+                        {
+                            label: "MC_Qna-3E(三菱 基恩士 松下)",
+                        },
+                        {
+                            label: "MC_A-1E_Binary",
+                        },
+                        {
+                            label: "OMRON-FINS",
+                        },
+                        {
+                            label: "横河PLC",
+                        },
+                        {
+                            label: "西门子FetchWirte",
+                        },
+                        {
+                            label: "富机 FUJI_SPH_NET",
+                        },
+                        {
+                            label: "基恩士上位链路通讯",
+                        },
+                    ],
+                },
+                {
+                    label: "智能建筑",
+                    children: [],
+                },
+                {
+                    label: "厂家定制",
+                    children: [],
+                },
+                {
+                    label: "电力行业标准",
+                    children: [
+                        {
+                            label: "IEC104",
+                        },
+                        {
+                            label: "DLT645_over_TCP",
+                        },
+                    ],
+                },
+                {
+                    label: "CNC数控",
+                    children: [],
+                },
+                {
+                    label: "私有协议",
+                    children: [],
+                },
+            ],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+            rules: {
+                tdpz_tdmc: [
+                    { required: true, message: "请输入通道名称", trigger: "change" },
+                ],
+                tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+                tdpz_qdmc: [
+                    { required: true, message: "请输入驱动名称", trigger: "change" },
+                ],
+                tdpz_chuankou: [
+                    { required: true, message: "请输入串口号", trigger: "change" },
+                ],
+                tdpz_btl: [
+                    { required: true, message: "请输入波特率", trigger: "change" },
+                ],
+                tdpz_tzw: [
+                    { required: true, message: "请输入停止位", trigger: "change" },
+                ],
+                tdpz_sjw: [
+                    { required: true, message: "请输入数据位", trigger: "change" },
+                ],
+                tdpz_jojy: [
+                    { required: true, message: "请输入奇偶校验", trigger: "change" },
+                ],
+                tdpz_cgsj: [
+                    { required: true, message: "请输入超出时间", trigger: "blur" },
+                ],
+                tdpz_jgsj: [
+                    { required: true, message: "请输入间隔时间", trigger: "blur" },
+                ],
+                tdpz_lxsj: [
+                    { required: true, message: "请输入轮询时间", trigger: "blur" },
+                ],
+                tdpz_cfcs: [
+                    { required: true, message: "请输入重复次数", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveGate();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            if (node.level == 3) {
+                this.nodekey = data.id;
+                this.menuShow = false;
+                this.menuShow = true;
+                e.preventDefault(); //关闭浏览器右键默认事件
+                this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+                document.addEventListener("click", (ev) => {
+                    ev.stopImmediatePropagation();
+                    if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+                        this.foo();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo();
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.level == 2) {
+                this.formData.tdpz_qdmc = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveGate() {
+            var obj = {
+                tdpz_tdmc: this.formData.tdpz_tdmc,
+                tdpz_td: this.formData.tdpz_td,
+                tdpz_qdmc: this.formData.tdpz_qdmc,
+                tdpz_port: this.formData.tdpz_port,
+                tdpz_chuankou: this.formData.tdpz_chuankou,
+                tdpz_btl: this.formData.tdpz_btl,
+                tdpz_sjw: this.formData.tdpz_sjw,
+                tdpz_tzw: this.formData.tdpz_tzw,
+                tdpz_jojy: this.formData.tdpz_jojy,
+                tdpz_cgsj: this.formData.tdpz_cgsj,
+                tdpz_jgsj: this.formData.tdpz_jgsj,
+                tdpz_lxsj: this.formData.tdpz_lxsj,
+                tdpz_cfcs: this.formData.tdpz_cfcs,
+                tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                tdpz_050F: this.formData.tdpz_050F,
+                tdpz_0610: this.formData.tdpz_0610,
+            };
+            this.add_passage = false;
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            // console.log(this.formData);
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(res.data.data.mark_value);
+                this.$refs["tree"].append(
+                    {
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc,
+                    },
+                    this.nodekey
+                );
+                // console.log(this.trees);
+                this.sendTree();
+                this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+            } else {
+                this.$message({
+                    message: "保存失败",
+                    type: "error",
+                });
+            }
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(answer);
+            // console.log(answer.data);
+            if (answer.data.data && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                // console.log(obj);
+                if (obj.tdpz_dxzkb) {
+                    this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                    this.formData.tdpz_td = obj.tdpz_td;
+                    this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                    this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                    this.formData.tdpz_btl = obj.tdpz_btl;
+                    this.formData.tdpz_sjw = obj.tdpz_sjw;
+                    this.formData.tdpz_tzw = obj.tdpz_tzw;
+                    this.formData.tdpz_jojy = obj.tdpz_jojy;
+                    this.formData.tdpz_port = obj.tdpz_port;
+                    this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                    this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                    this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                    this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                    this.formData.tdpz_050F = obj.tdpz_050F;
+                    this.formData.tdpz_0610 = obj.tdpz_0610;
+                    this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                    this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                    this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                    this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "2",
+            });
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        GetTree({
+            user_id: this.user_id,
+            type: "2",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        });
+        this.GetUserAnswer();
+    },
+    directives: {
+        "click-outside": {
+            bind: function (el, binding, vnode) {
+                console.log("el", el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == "function") {
+                            vnode.context[binding.expression](event);
+                        }
+                    }
+                };
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener("click", el.event, true);
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener("click", el.event, true);
+            },
+        },
+        methods: {
+            // 提交时校验
+            submitForm() {
+                this.$refs["formData"].validate((valid) => {
+                    if (valid) {
+                        this.saveGate();
+                    } else {
+                        console.log("error submit!!");
+                        return false;
+                    }
+                });
+            },
+            edit(event) {
+                this.flag = true;
+            },
+            //完成编辑
+            done(event) {
+                this.flag = false;
+                this.trees[0].label = this.gateway;
+                this.sendTree();
+            },
+            rightClick(e, data, node) {
+                if (node.level == 3) {
+                    this.nodekey = data.id;
+                    this.menuShow = false
+                    this.menuShow = true
+                    e.preventDefault() //关闭浏览器右键默认事件
+                    this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+                    document.addEventListener('click', (ev) => {
+                        ev.stopImmediatePropagation()
+                        if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                            this.foo()
+                        }
+                    })
+                }
+            },
+            // 点击时候的判断,判断是否为新增网关
+            selectMenuNode(index, indexPath) {
+                console.log(index);
+                if (index == 1) {
+                    this.add_passage = true;
+                }
+            },
+            foo() {
+                // 取消鼠标监听事件 菜单栏
+                this.menuShow = false
+                document.removeEventListener('click', this.foo) // 关掉监听，
+            },
+            treeNodeClick() {
+                this.foo()
+            },
+            // 收起点击事件的判断
+            getRetract() {
+                if (this.is_retract == true) {
+                    this.is_retract = false;
+                } else {
+                    this.is_retract = true;
+                }
+            },
+            getDriveName() {
+                this.diag_drive = true;
+            },
+            closeMenu(ev) {
+                console.log({ ev });
+                this.dialogVisible = false;
+            },
+            handleDetailClick(data, node, value) {
+                console.log(data.label);
+                if (node.level == 2) {
+                    this.formData.tdpz_qdmc = data.label;
+                    this.diag_drive = false;
+                }
+
+            },
+            async saveGate() {
+                var obj = {
+                    tdpz_tdmc: this.formData.tdpz_tdmc,
+                    tdpz_td: this.formData.tdpz_td,
+                    tdpz_qdmc: this.formData.tdpz_qdmc,
+                    tdpz_port: this.formData.tdpz_port,
+                    tdpz_chuankou: this.formData.tdpz_chuankou,
+                    tdpz_btl: this.formData.tdpz_btl,
+                    tdpz_sjw: this.formData.tdpz_sjw,
+                    tdpz_tzw: this.formData.tdpz_tzw,
+                    tdpz_jojy: this.formData.tdpz_jojy,
+                    tdpz_cgsj: this.formData.tdpz_cgsj,
+                    tdpz_jgsj: this.formData.tdpz_jgsj,
+                    tdpz_lxsj: this.formData.tdpz_lxsj,
+                    tdpz_cfcs: this.formData.tdpz_cfcs,
+                    tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                    tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                    tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                    tdpz_050F: this.formData.tdpz_050F,
+                    tdpz_0610: this.formData.tdpz_0610,
+                }
+                let datas = sessionStorage.getItem("DB-IotLite_wx");
+                // console.log(this.formData);
+                datas = { ...JSON.parse(datas), ...obj };
+                let res = await SaveUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                    mark_value: JSON.stringify(datas),
+                });
+                if (res.data.state) {
+                    this.$message({
+                        message: "保存成功",
+                        type: "success",
+                    });
+                    sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                    // console.log(res);
+                    // console.log(res.data.data.mark_value);
+                    this.$refs["tree"].append({
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc
+                    }, this.nodekey);
+                    // console.log(this.trees);
+                    this.sendTree();
+                    this.add_passage = false;
+                    this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+                } else {
+                    this.$message({
+                        message: `保存失败,原因是${res.data.message}`,
+                        type: "error",
+                    });
+                }
+
+            },
+            // 保存
+            async GetUserAnswer() {
+                this.loading = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                this.loading = false;
+                // console.log(answer);
+                // console.log(answer.data);
+                if (answer.data.data && answer.data.state) {
+                    // console.log(answer);
+                    let obj = JSON.parse(answer.data.data.mark_value);
+                    // console.log(obj);
+                    if (obj.tdpz_dxzkb) {
+                        this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                        this.formData.tdpz_td = obj.tdpz_td;
+                        this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                        this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                        this.formData.tdpz_btl = obj.tdpz_btl;
+                        this.formData.tdpz_sjw = obj.tdpz_sjw;
+                        this.formData.tdpz_tzw = obj.tdpz_tzw;
+                        this.formData.tdpz_jojy = obj.tdpz_jojy;
+                        this.formData.tdpz_port = obj.tdpz_port;
+                        this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                        this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                        this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                        this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                        this.formData.tdpz_050F = obj.tdpz_050F;
+                        this.formData.tdpz_0610 = obj.tdpz_0610;
+                        this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                        this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                        this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                        this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                    }
+                }
+            },
+            async sendTree() {
+                let result = await SendTree({
+                    user_id: this.user_id,
+                    data: JSON.stringify(this.trees),
+                    type: "2",
+                })
+                console.log(result);
+            },
+        },
+        mounted() {
+            this.user_id = this.$route.query.user_id;
+            GetTree({
+                user_id: this.user_id,
+                type: "2",
+            }).then((res) => {
+                console.log(res);
+                console.log(JSON.parse(res.data.data.data));
+                this.trees = JSON.parse(res.data.data.data);
+            })
+            this.GetUserAnswer();
+        },
+        directives: {
+            "click-outside": {
+                bind: function (el, binding, vnode) {
+                    console.log("el", el);
+                    console.log("binding", binding);
+                    el.event = function (event) {
+                        // 检查点击是否发生在节点之内（包括子节点）
+                        if (!(el == event.target || el.contains(event.target))) {
+                            // 如果没有，则触发调用
+                            // 若绑定值为函数，则执行
+                            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                            if (typeof vnode.context[binding.expression] == "function") {
+                                vnode.context[binding.expression](event);
+                            }
+                        }
+                    };
+                    // 绑定事件
+                    // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                    document.body.addEventListener("click", el.event, true);
+                },
+                unbind: function (el) {
+                    // 解绑事件
+                    document.body.removeEventListener("click", el.event, true);
+                },
+            },
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 38px;
+    }
+
+    .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: 6px;
+            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-dialog__footer {
+    padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 45px;
+    transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1408px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231111183732.vue b/.history/src/components/SerialPort_20231111183732.vue
new file mode 100644
index 0000000..96eeb5f
--- /dev/null
+++ b/.history/src/components/SerialPort_20231111183732.vue
@@ -0,0 +1,1337 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </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" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                                <el-select v-model="formData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                                <el-select v-model="formData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.tdpz_qdmc" placeholder=""
+                                            style="width: 200px; height: 30px" disabled></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="串口号:" :label-width="formLabelWidth" prop="tdpz_chuankou">
+                                <el-select v-model="formData.tdpz_chuankou" placeholder=""
+                                    style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="波特率:" :label-width="formLabelWidth" prop="tdpz_btl">
+                                <el-select v-model="formData.tdpz_btl" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options4" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="数据位:" :label-width="formLabelWidth" prop="tdpz_sjw">
+                                <el-select v-model="formData.tdpz_sjw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options5" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="停止位:" :label-width="formLabelWidth" prop="tdpz_tzw">
+                                <el-select v-model="formData.tdpz_tzw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options6" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="tdpz_jojy">
+                                <el-select v-model="formData.tdpz_jojy" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options7" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cgsj">
+                                <el-input v-model="formData.tdpz_cgsj" 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="tdpz_jgsj">
+                                <el-input v-model="formData.tdpz_jgsj" 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="tdpz_lxsj">
+                                <el-input v-model="formData.tdpz_lxsj" 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="tdpz_cfcs">
+                                <el-input v-model="formData.tdpz_cfcs" 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;
+                border: none;
+                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="formData.tdpz_watchtime">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="formData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">: </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="tdpz_dxzkb2" 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="formData.tdpz_050F"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                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="formData.tdpz_0610"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" default-expand-all @node-click="handleDetailClick"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+    name: "TestTreeView",
+    data() {
+        return {
+            user_id: "",
+            loading: false,
+            flag: false,
+            gateway: "",
+            nodekey: "",
+            trees: [],
+            formData: {
+                tdpz_tdmc: "",
+                tdpz_td: "",
+                tdpz_qdmc: "",
+                tdpz_chuankou: "",
+                tdpz_btl: "",
+                tdpz_sjw: "8",
+                tdpz_tzw: "",
+                tdpz_jojy: "",
+                tdpz_cgsj: "",
+                tdpz_jgsj: "",
+                tdpz_lxsj: "",
+                tdpz_cfcs: "",
+                tdpz_watchtime: false,
+                tdpz_cjsylxdz: true,
+                tdpz_dxzkb: "",
+                tdpz_050F: "1",
+                tdpz_0610: "1",
+            },
+            tdpz_dxzkb1: "1",
+            tdpz_dxzkb2: "1",
+            diag_drive: false,
+            options1: [
+                {
+                    value: "有线区Channel1",
+                    label: "有线区Channel1",
+                },
+                {
+                    value: "无线区Channel1",
+                    label: "无线区Channel1",
+                },
+            ],
+            options2: [
+                {
+                    value: "网口",
+                    label: "网口",
+                },
+                {
+                    value: "串口",
+                    label: "串口",
+                },
+            ],
+            options3: [
+                {
+                    value: "com1",
+                    label: "com1",
+                },
+                {
+                    value: "com2",
+                    label: "com2",
+                },
+                {
+                    value: "com3",
+                    label: "com3",
+                },
+                {
+                    value: "com4",
+                    label: "com4",
+                },
+                {
+                    value: "com5",
+                    label: "com5",
+                },
+                {
+                    value: "com6",
+                    label: "com6",
+                },
+                {
+                    value: "com7",
+                    label: "com7",
+                },
+                {
+                    value: "com8",
+                    label: "com8",
+                },
+                {
+                    value: "com9",
+                    label: "com9",
+                },
+                {
+                    value: "com10",
+                    label: "com10",
+                },
+                {
+                    value: "com11",
+                    label: "com11",
+                },
+                {
+                    value: "com12",
+                    label: "com12",
+                },
+                {
+                    value: "com13",
+                    label: "com13",
+                },
+                {
+                    value: "com14",
+                    label: "com14",
+                },
+                {
+                    value: "com15",
+                    label: "com15",
+                },
+                {
+                    value: "com16",
+                    label: "com16",
+                },
+                {
+                    value: "com17",
+                    label: "com17",
+                },
+                {
+                    value: "com18",
+                    label: "com18",
+                },
+                {
+                    value: "com19",
+                    label: "com19",
+                },
+                {
+                    value: "com20",
+                    label: "com20",
+                },
+                {
+                    value: "com21",
+                    label: "com21",
+                },
+                {
+                    value: "com22",
+                    label: "com22",
+                },
+                {
+                    value: "com23",
+                    label: "com23",
+                },
+                {
+                    value: "com24",
+                    label: "com24",
+                },
+                {
+                    value: "com25",
+                    label: "com25",
+                },
+                {
+                    value: "com26",
+                    label: "com26",
+                },
+                {
+                    value: "com27",
+                    label: "com27",
+                },
+                {
+                    value: "com28",
+                    label: "com28",
+                },
+                {
+                    value: "com29",
+                    label: "com29",
+                },
+                {
+                    value: "com30",
+                    label: "com30",
+                },
+                {
+                    value: "com31",
+                    label: "com31",
+                },
+                {
+                    value: "com32",
+                    label: "com32",
+                },
+                {
+                    value: "com33",
+                    label: "com33",
+                },
+                {
+                    value: "com34",
+                    label: "com34",
+                },
+                {
+                    value: "com35",
+                    label: "com35",
+                },
+                {
+                    value: "com36",
+                    label: "com36",
+                },
+                {
+                    value: "com37",
+                    label: "com37",
+                },
+                {
+                    value: "com38",
+                    label: "com38",
+                },
+                {
+                    value: "com39",
+                    label: "com39",
+                },
+                {
+                    value: "com40",
+                    label: "com40",
+                },
+                {
+                    value: "com41",
+                    label: "com41",
+                },
+                {
+                    value: "com42",
+                    label: "com42",
+                },
+                {
+                    value: "com43",
+                    label: "com43",
+                },
+                {
+                    value: "com44",
+                    label: "com44",
+                },
+                {
+                    value: "com45",
+                    label: "com45",
+                },
+                {
+                    value: "com46",
+                    label: "com46",
+                },
+                {
+                    value: "com47",
+                    label: "com47",
+                },
+                {
+                    value: "com48",
+                    label: "com48",
+                },
+                {
+                    value: "com49",
+                    label: "com49",
+                },
+                {
+                    value: "com50",
+                    label: "com50",
+                },
+            ],
+            options4: [
+                {
+                    value: "1200",
+                    label: "1200",
+                },
+                {
+                    value: "2400",
+                    label: "2400",
+                },
+                {
+                    value: "4800",
+                    label: "4800",
+                },
+                {
+                    value: "9600",
+                    label: "9600",
+                },
+                {
+                    value: "115200",
+                    label: "115200",
+                },
+            ],
+            options5: [
+                {
+                    value: "8",
+                    label: "8",
+                },
+                {
+                    value: "7",
+                    label: "7",
+                },
+            ],
+            options6: [
+                {
+                    value: "1",
+                    label: "1",
+                },
+                {
+                    value: "2",
+                    label: "2",
+                },
+            ],
+            options7: [
+                {
+                    value: "奇校验",
+                    label: "奇校验",
+                },
+                {
+                    value: "偶校验",
+                    label: "偶校验",
+                },
+                {
+                    value: "无校验（none）",
+                    label: "无校验（none）",
+                },
+            ],
+            isdisabled: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 10,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [
+                {
+                    label: "Gateway",
+                    children: [
+                        {
+                            label: "数据采集",
+                            children: [
+                                {
+                                    label: "I/O点",
+                                },
+                                {
+                                    label: "用户点",
+                                },
+                                {
+                                    label: "计算点",
+                                },
+                                {
+                                    label: "系统点",
+                                },
+                            ],
+                        },
+                        {
+                            label: "数据服务",
+                            children: [
+                                {
+                                    label: "Modbus",
+                                },
+                            ],
+                        },
+                        {
+                            label: "IOT",
+                            children: [
+                                {
+                                    label: "Mqtt Client",
+                                },
+                                {
+                                    label: "Alink",
+                                },
+                                {
+                                    label: "Tlink",
+                                },
+                                {
+                                    label: "loTDDC",
+                                },
+                                {
+                                    label: "Ulink",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            datas2: [
+                {
+                    label: "通用标准",
+                    children: [
+                        {
+                            label: "ModbusTCPClient",
+                        },
+                        {
+                            label: "ModbusRTU_over_TCP",
+                        },
+                        {
+                            label: "OPCUAClient",
+                        },
+                        {
+                            label: "OPCDAClient",
+                        },
+                        {
+                            label: "MQTTClient",
+                        },
+                        {
+                            label: "OPCXMLDAClient",
+                        },
+                        {
+                            label: "环保212协议网口监听",
+                        },
+                    ],
+                },
+                {
+                    label: "PLC",
+                    children: [
+                        {
+                            label: "Slemens S7-200 Network",
+                        },
+                        {
+                            label: "Slemens S7-300 Network",
+                        },
+                        {
+                            label: "Slemens S7-400 Network",
+                        },
+                        {
+                            label: "Slemens S7-1200 Network",
+                        },
+                        {
+                            label: "Slemens S7-1500 Network",
+                        },
+                        {
+                            label: "EtherNet/IP CIP协议(AB OMR ON)",
+                        },
+                        {
+                            label: "MC_Qna-3E(三菱 基恩士 松下)",
+                        },
+                        {
+                            label: "MC_A-1E_Binary",
+                        },
+                        {
+                            label: "OMRON-FINS",
+                        },
+                        {
+                            label: "横河PLC",
+                        },
+                        {
+                            label: "西门子FetchWirte",
+                        },
+                        {
+                            label: "富机 FUJI_SPH_NET",
+                        },
+                        {
+                            label: "基恩士上位链路通讯",
+                        },
+                    ],
+                },
+                {
+                    label: "智能建筑",
+                    children: [],
+                },
+                {
+                    label: "厂家定制",
+                    children: [],
+                },
+                {
+                    label: "电力行业标准",
+                    children: [
+                        {
+                            label: "IEC104",
+                        },
+                        {
+                            label: "DLT645_over_TCP",
+                        },
+                    ],
+                },
+                {
+                    label: "CNC数控",
+                    children: [],
+                },
+                {
+                    label: "私有协议",
+                    children: [],
+                },
+            ],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+            rules: {
+                tdpz_tdmc: [
+                    { required: true, message: "请输入通道名称", trigger: "change" },
+                ],
+                tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+                tdpz_qdmc: [
+                    { required: true, message: "请输入驱动名称", trigger: "change" },
+                ],
+                tdpz_chuankou: [
+                    { required: true, message: "请输入串口号", trigger: "change" },
+                ],
+                tdpz_btl: [
+                    { required: true, message: "请输入波特率", trigger: "change" },
+                ],
+                tdpz_tzw: [
+                    { required: true, message: "请输入停止位", trigger: "change" },
+                ],
+                tdpz_sjw: [
+                    { required: true, message: "请输入数据位", trigger: "change" },
+                ],
+                tdpz_jojy: [
+                    { required: true, message: "请输入奇偶校验", trigger: "change" },
+                ],
+                tdpz_cgsj: [
+                    { required: true, message: "请输入超出时间", trigger: "blur" },
+                ],
+                tdpz_jgsj: [
+                    { required: true, message: "请输入间隔时间", trigger: "blur" },
+                ],
+                tdpz_lxsj: [
+                    { required: true, message: "请输入轮询时间", trigger: "blur" },
+                ],
+                tdpz_cfcs: [
+                    { required: true, message: "请输入重复次数", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveGate();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            if (node.level == 3) {
+                this.nodekey = data.id;
+                this.menuShow = false;
+                this.menuShow = true;
+                e.preventDefault(); //关闭浏览器右键默认事件
+                this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+                document.addEventListener("click", (ev) => {
+                    ev.stopImmediatePropagation();
+                    if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+                        this.foo();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo();
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.level == 2) {
+                this.formData.tdpz_qdmc = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveGate() {
+            var obj = {
+                tdpz_tdmc: this.formData.tdpz_tdmc,
+                tdpz_td: this.formData.tdpz_td,
+                tdpz_qdmc: this.formData.tdpz_qdmc,
+                tdpz_port: this.formData.tdpz_port,
+                tdpz_chuankou: this.formData.tdpz_chuankou,
+                tdpz_btl: this.formData.tdpz_btl,
+                tdpz_sjw: this.formData.tdpz_sjw,
+                tdpz_tzw: this.formData.tdpz_tzw,
+                tdpz_jojy: this.formData.tdpz_jojy,
+                tdpz_cgsj: this.formData.tdpz_cgsj,
+                tdpz_jgsj: this.formData.tdpz_jgsj,
+                tdpz_lxsj: this.formData.tdpz_lxsj,
+                tdpz_cfcs: this.formData.tdpz_cfcs,
+                tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                tdpz_050F: this.formData.tdpz_050F,
+                tdpz_0610: this.formData.tdpz_0610,
+            };
+            this.add_passage = false;
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            // console.log(this.formData);
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(res.data.data.mark_value);
+                this.$refs["tree"].append(
+                    {
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc,
+                    },
+                    this.nodekey
+                );
+                // console.log(this.trees);
+                this.sendTree();
+                this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+            } else {
+                this.$message({
+                    message: "保存失败",
+                    type: "error",
+                });
+            }
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(answer);
+            // console.log(answer.data);
+            if (answer.data.data && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                // console.log(obj);
+                if (obj.tdpz_dxzkb) {
+                    this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                    this.formData.tdpz_td = obj.tdpz_td;
+                    this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                    this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                    this.formData.tdpz_btl = obj.tdpz_btl;
+                    this.formData.tdpz_sjw = obj.tdpz_sjw;
+                    this.formData.tdpz_tzw = obj.tdpz_tzw;
+                    this.formData.tdpz_jojy = obj.tdpz_jojy;
+                    this.formData.tdpz_port = obj.tdpz_port;
+                    this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                    this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                    this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                    this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                    this.formData.tdpz_050F = obj.tdpz_050F;
+                    this.formData.tdpz_0610 = obj.tdpz_0610;
+                    this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                    this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                    this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                    this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "2",
+            });
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        GetTree({
+            user_id: this.user_id,
+            type: "2",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        });
+        this.GetUserAnswer();
+    },
+    directives: {
+        "click-outside": {
+            bind: function (el, binding, vnode) {
+                console.log("el", el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == "function") {
+                            vnode.context[binding.expression](event);
+                        }
+                    }
+                };
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener("click", el.event, true);
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener("click", el.event, true);
+            },
+        },
+        methods: {
+            // 提交时校验
+            submitForm() {
+                this.$refs["formData"].validate((valid) => {
+                    if (valid) {
+                        this.saveGate();
+                    } else {
+                        console.log("error submit!!");
+                        return false;
+                    }
+                });
+            },
+            edit(event) {
+                this.flag = true;
+            },
+            //完成编辑
+            done(event) {
+                this.flag = false;
+                this.trees[0].label = this.gateway;
+                this.sendTree();
+            },
+            rightClick(e, data, node) {
+                if (node.level == 3) {
+                    this.nodekey = data.id;
+                    this.menuShow = false
+                    this.menuShow = true
+                    e.preventDefault() //关闭浏览器右键默认事件
+                    this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+                    document.addEventListener('click', (ev) => {
+                        ev.stopImmediatePropagation()
+                        if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                            this.foo()
+                        }
+                    })
+                }
+            },
+            // 点击时候的判断,判断是否为新增网关
+            selectMenuNode(index, indexPath) {
+                console.log(index);
+                if (index == 1) {
+                    this.add_passage = true;
+                }
+            },
+            foo() {
+                // 取消鼠标监听事件 菜单栏
+                this.menuShow = false
+                document.removeEventListener('click', this.foo) // 关掉监听，
+            },
+            treeNodeClick() {
+                this.foo()
+            },
+            // 收起点击事件的判断
+            getRetract() {
+                if (this.is_retract == true) {
+                    this.is_retract = false;
+                } else {
+                    this.is_retract = true;
+                }
+            },
+            getDriveName() {
+                this.diag_drive = true;
+            },
+            closeMenu(ev) {
+                console.log({ ev });
+                this.dialogVisible = false;
+            },
+            handleDetailClick(data, node, value) {
+                console.log(data.label);
+                if (node.level == 2) {
+                    this.formData.tdpz_qdmc = data.label;
+                    this.diag_drive = false;
+                }
+
+            },
+            async saveGate() {
+                var obj = {
+                    tdpz_tdmc: this.formData.tdpz_tdmc,
+                    tdpz_td: this.formData.tdpz_td,
+                    tdpz_qdmc: this.formData.tdpz_qdmc,
+                    tdpz_port: this.formData.tdpz_port,
+                    tdpz_chuankou: this.formData.tdpz_chuankou,
+                    tdpz_btl: this.formData.tdpz_btl,
+                    tdpz_sjw: this.formData.tdpz_sjw,
+                    tdpz_tzw: this.formData.tdpz_tzw,
+                    tdpz_jojy: this.formData.tdpz_jojy,
+                    tdpz_cgsj: this.formData.tdpz_cgsj,
+                    tdpz_jgsj: this.formData.tdpz_jgsj,
+                    tdpz_lxsj: this.formData.tdpz_lxsj,
+                    tdpz_cfcs: this.formData.tdpz_cfcs,
+                    tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                    tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                    tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                    tdpz_050F: this.formData.tdpz_050F,
+                    tdpz_0610: this.formData.tdpz_0610,
+                }
+                let datas = sessionStorage.getItem("DB-IotLite_wx");
+                // console.log(this.formData);
+                datas = { ...JSON.parse(datas), ...obj };
+                let res = await SaveUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                    mark_value: JSON.stringify(datas),
+                });
+                if (res.data.state) {
+                    this.$message({
+                        message: "保存成功",
+                        type: "success",
+                    });
+                    sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                    // console.log(res);
+                    // console.log(res.data.data.mark_value);
+                    this.$refs["tree"].append({
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc
+                    }, this.nodekey);
+                    // console.log(this.trees);
+                    this.sendTree();
+                    this.add_passage = false;
+                    this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+                } else {
+                    this.$message({
+                        message: `保存失败,原因是${res.data.message}`,
+                        type: "error",
+                    });
+                }
+
+            },
+            // 保存
+            async GetUserAnswer() {
+                this.loading = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                this.loading = false;
+                // console.log(answer);
+                // console.log(answer.data);
+                if (answer.data.data && answer.data.state) {
+                    // console.log(answer);
+                    let obj = JSON.parse(answer.data.data.mark_value);
+                    // console.log(obj);
+                    if (obj.tdpz_dxzkb) {
+                        this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                        this.formData.tdpz_td = obj.tdpz_td;
+                        this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                        this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                        this.formData.tdpz_btl = obj.tdpz_btl;
+                        this.formData.tdpz_sjw = obj.tdpz_sjw;
+                        this.formData.tdpz_tzw = obj.tdpz_tzw;
+                        this.formData.tdpz_jojy = obj.tdpz_jojy;
+                        this.formData.tdpz_port = obj.tdpz_port;
+                        this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                        this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                        this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                        this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                        this.formData.tdpz_050F = obj.tdpz_050F;
+                        this.formData.tdpz_0610 = obj.tdpz_0610;
+                        this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                        this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                        this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                        this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                    }
+                }
+            },
+            async sendTree() {
+                let result = await SendTree({
+                    user_id: this.user_id,
+                    data: JSON.stringify(this.trees),
+                    type: "2",
+                })
+                console.log(result);
+            },
+        },
+        mounted() {
+            this.user_id = this.$route.query.user_id;
+            GetTree({
+                user_id: this.user_id,
+                type: "2",
+            }).then((res) => {
+                console.log(res);
+                console.log(JSON.parse(res.data.data.data));
+                this.trees = JSON.parse(res.data.data.data);
+            })
+            this.GetUserAnswer();
+        },
+        directives: {
+            "click-outside": {
+                bind: function (el, binding, vnode) {
+                    console.log("el", el);
+                    console.log("binding", binding);
+                    el.event = function (event) {
+                        // 检查点击是否发生在节点之内（包括子节点）
+                        if (!(el == event.target || el.contains(event.target))) {
+                            // 如果没有，则触发调用
+                            // 若绑定值为函数，则执行
+                            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                            if (typeof vnode.context[binding.expression] == "function") {
+                                vnode.context[binding.expression](event);
+                            }
+                        }
+                    };
+                    // 绑定事件
+                    // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                    document.body.addEventListener("click", el.event, true);
+                },
+                unbind: function (el) {
+                    // 解绑事件
+                    document.body.removeEventListener("click", el.event, true);
+                },
+            },
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 38px;
+    }
+
+    .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: 6px;
+            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-dialog__footer {
+    padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 45px;
+    transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1408px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231111183801.vue b/.history/src/components/SerialPort_20231111183801.vue
new file mode 100644
index 0000000..96eeb5f
--- /dev/null
+++ b/.history/src/components/SerialPort_20231111183801.vue
@@ -0,0 +1,1337 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </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" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                                <el-select v-model="formData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                                <el-select v-model="formData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.tdpz_qdmc" placeholder=""
+                                            style="width: 200px; height: 30px" disabled></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="串口号:" :label-width="formLabelWidth" prop="tdpz_chuankou">
+                                <el-select v-model="formData.tdpz_chuankou" placeholder=""
+                                    style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="波特率:" :label-width="formLabelWidth" prop="tdpz_btl">
+                                <el-select v-model="formData.tdpz_btl" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options4" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="数据位:" :label-width="formLabelWidth" prop="tdpz_sjw">
+                                <el-select v-model="formData.tdpz_sjw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options5" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="停止位:" :label-width="formLabelWidth" prop="tdpz_tzw">
+                                <el-select v-model="formData.tdpz_tzw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options6" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="tdpz_jojy">
+                                <el-select v-model="formData.tdpz_jojy" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options7" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cgsj">
+                                <el-input v-model="formData.tdpz_cgsj" 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="tdpz_jgsj">
+                                <el-input v-model="formData.tdpz_jgsj" 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="tdpz_lxsj">
+                                <el-input v-model="formData.tdpz_lxsj" 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="tdpz_cfcs">
+                                <el-input v-model="formData.tdpz_cfcs" 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;
+                border: none;
+                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="formData.tdpz_watchtime">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="formData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">: </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="tdpz_dxzkb2" 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="formData.tdpz_050F"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                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="formData.tdpz_0610"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" default-expand-all @node-click="handleDetailClick"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+    name: "TestTreeView",
+    data() {
+        return {
+            user_id: "",
+            loading: false,
+            flag: false,
+            gateway: "",
+            nodekey: "",
+            trees: [],
+            formData: {
+                tdpz_tdmc: "",
+                tdpz_td: "",
+                tdpz_qdmc: "",
+                tdpz_chuankou: "",
+                tdpz_btl: "",
+                tdpz_sjw: "8",
+                tdpz_tzw: "",
+                tdpz_jojy: "",
+                tdpz_cgsj: "",
+                tdpz_jgsj: "",
+                tdpz_lxsj: "",
+                tdpz_cfcs: "",
+                tdpz_watchtime: false,
+                tdpz_cjsylxdz: true,
+                tdpz_dxzkb: "",
+                tdpz_050F: "1",
+                tdpz_0610: "1",
+            },
+            tdpz_dxzkb1: "1",
+            tdpz_dxzkb2: "1",
+            diag_drive: false,
+            options1: [
+                {
+                    value: "有线区Channel1",
+                    label: "有线区Channel1",
+                },
+                {
+                    value: "无线区Channel1",
+                    label: "无线区Channel1",
+                },
+            ],
+            options2: [
+                {
+                    value: "网口",
+                    label: "网口",
+                },
+                {
+                    value: "串口",
+                    label: "串口",
+                },
+            ],
+            options3: [
+                {
+                    value: "com1",
+                    label: "com1",
+                },
+                {
+                    value: "com2",
+                    label: "com2",
+                },
+                {
+                    value: "com3",
+                    label: "com3",
+                },
+                {
+                    value: "com4",
+                    label: "com4",
+                },
+                {
+                    value: "com5",
+                    label: "com5",
+                },
+                {
+                    value: "com6",
+                    label: "com6",
+                },
+                {
+                    value: "com7",
+                    label: "com7",
+                },
+                {
+                    value: "com8",
+                    label: "com8",
+                },
+                {
+                    value: "com9",
+                    label: "com9",
+                },
+                {
+                    value: "com10",
+                    label: "com10",
+                },
+                {
+                    value: "com11",
+                    label: "com11",
+                },
+                {
+                    value: "com12",
+                    label: "com12",
+                },
+                {
+                    value: "com13",
+                    label: "com13",
+                },
+                {
+                    value: "com14",
+                    label: "com14",
+                },
+                {
+                    value: "com15",
+                    label: "com15",
+                },
+                {
+                    value: "com16",
+                    label: "com16",
+                },
+                {
+                    value: "com17",
+                    label: "com17",
+                },
+                {
+                    value: "com18",
+                    label: "com18",
+                },
+                {
+                    value: "com19",
+                    label: "com19",
+                },
+                {
+                    value: "com20",
+                    label: "com20",
+                },
+                {
+                    value: "com21",
+                    label: "com21",
+                },
+                {
+                    value: "com22",
+                    label: "com22",
+                },
+                {
+                    value: "com23",
+                    label: "com23",
+                },
+                {
+                    value: "com24",
+                    label: "com24",
+                },
+                {
+                    value: "com25",
+                    label: "com25",
+                },
+                {
+                    value: "com26",
+                    label: "com26",
+                },
+                {
+                    value: "com27",
+                    label: "com27",
+                },
+                {
+                    value: "com28",
+                    label: "com28",
+                },
+                {
+                    value: "com29",
+                    label: "com29",
+                },
+                {
+                    value: "com30",
+                    label: "com30",
+                },
+                {
+                    value: "com31",
+                    label: "com31",
+                },
+                {
+                    value: "com32",
+                    label: "com32",
+                },
+                {
+                    value: "com33",
+                    label: "com33",
+                },
+                {
+                    value: "com34",
+                    label: "com34",
+                },
+                {
+                    value: "com35",
+                    label: "com35",
+                },
+                {
+                    value: "com36",
+                    label: "com36",
+                },
+                {
+                    value: "com37",
+                    label: "com37",
+                },
+                {
+                    value: "com38",
+                    label: "com38",
+                },
+                {
+                    value: "com39",
+                    label: "com39",
+                },
+                {
+                    value: "com40",
+                    label: "com40",
+                },
+                {
+                    value: "com41",
+                    label: "com41",
+                },
+                {
+                    value: "com42",
+                    label: "com42",
+                },
+                {
+                    value: "com43",
+                    label: "com43",
+                },
+                {
+                    value: "com44",
+                    label: "com44",
+                },
+                {
+                    value: "com45",
+                    label: "com45",
+                },
+                {
+                    value: "com46",
+                    label: "com46",
+                },
+                {
+                    value: "com47",
+                    label: "com47",
+                },
+                {
+                    value: "com48",
+                    label: "com48",
+                },
+                {
+                    value: "com49",
+                    label: "com49",
+                },
+                {
+                    value: "com50",
+                    label: "com50",
+                },
+            ],
+            options4: [
+                {
+                    value: "1200",
+                    label: "1200",
+                },
+                {
+                    value: "2400",
+                    label: "2400",
+                },
+                {
+                    value: "4800",
+                    label: "4800",
+                },
+                {
+                    value: "9600",
+                    label: "9600",
+                },
+                {
+                    value: "115200",
+                    label: "115200",
+                },
+            ],
+            options5: [
+                {
+                    value: "8",
+                    label: "8",
+                },
+                {
+                    value: "7",
+                    label: "7",
+                },
+            ],
+            options6: [
+                {
+                    value: "1",
+                    label: "1",
+                },
+                {
+                    value: "2",
+                    label: "2",
+                },
+            ],
+            options7: [
+                {
+                    value: "奇校验",
+                    label: "奇校验",
+                },
+                {
+                    value: "偶校验",
+                    label: "偶校验",
+                },
+                {
+                    value: "无校验（none）",
+                    label: "无校验（none）",
+                },
+            ],
+            isdisabled: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 10,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [
+                {
+                    label: "Gateway",
+                    children: [
+                        {
+                            label: "数据采集",
+                            children: [
+                                {
+                                    label: "I/O点",
+                                },
+                                {
+                                    label: "用户点",
+                                },
+                                {
+                                    label: "计算点",
+                                },
+                                {
+                                    label: "系统点",
+                                },
+                            ],
+                        },
+                        {
+                            label: "数据服务",
+                            children: [
+                                {
+                                    label: "Modbus",
+                                },
+                            ],
+                        },
+                        {
+                            label: "IOT",
+                            children: [
+                                {
+                                    label: "Mqtt Client",
+                                },
+                                {
+                                    label: "Alink",
+                                },
+                                {
+                                    label: "Tlink",
+                                },
+                                {
+                                    label: "loTDDC",
+                                },
+                                {
+                                    label: "Ulink",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            datas2: [
+                {
+                    label: "通用标准",
+                    children: [
+                        {
+                            label: "ModbusTCPClient",
+                        },
+                        {
+                            label: "ModbusRTU_over_TCP",
+                        },
+                        {
+                            label: "OPCUAClient",
+                        },
+                        {
+                            label: "OPCDAClient",
+                        },
+                        {
+                            label: "MQTTClient",
+                        },
+                        {
+                            label: "OPCXMLDAClient",
+                        },
+                        {
+                            label: "环保212协议网口监听",
+                        },
+                    ],
+                },
+                {
+                    label: "PLC",
+                    children: [
+                        {
+                            label: "Slemens S7-200 Network",
+                        },
+                        {
+                            label: "Slemens S7-300 Network",
+                        },
+                        {
+                            label: "Slemens S7-400 Network",
+                        },
+                        {
+                            label: "Slemens S7-1200 Network",
+                        },
+                        {
+                            label: "Slemens S7-1500 Network",
+                        },
+                        {
+                            label: "EtherNet/IP CIP协议(AB OMR ON)",
+                        },
+                        {
+                            label: "MC_Qna-3E(三菱 基恩士 松下)",
+                        },
+                        {
+                            label: "MC_A-1E_Binary",
+                        },
+                        {
+                            label: "OMRON-FINS",
+                        },
+                        {
+                            label: "横河PLC",
+                        },
+                        {
+                            label: "西门子FetchWirte",
+                        },
+                        {
+                            label: "富机 FUJI_SPH_NET",
+                        },
+                        {
+                            label: "基恩士上位链路通讯",
+                        },
+                    ],
+                },
+                {
+                    label: "智能建筑",
+                    children: [],
+                },
+                {
+                    label: "厂家定制",
+                    children: [],
+                },
+                {
+                    label: "电力行业标准",
+                    children: [
+                        {
+                            label: "IEC104",
+                        },
+                        {
+                            label: "DLT645_over_TCP",
+                        },
+                    ],
+                },
+                {
+                    label: "CNC数控",
+                    children: [],
+                },
+                {
+                    label: "私有协议",
+                    children: [],
+                },
+            ],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+            rules: {
+                tdpz_tdmc: [
+                    { required: true, message: "请输入通道名称", trigger: "change" },
+                ],
+                tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+                tdpz_qdmc: [
+                    { required: true, message: "请输入驱动名称", trigger: "change" },
+                ],
+                tdpz_chuankou: [
+                    { required: true, message: "请输入串口号", trigger: "change" },
+                ],
+                tdpz_btl: [
+                    { required: true, message: "请输入波特率", trigger: "change" },
+                ],
+                tdpz_tzw: [
+                    { required: true, message: "请输入停止位", trigger: "change" },
+                ],
+                tdpz_sjw: [
+                    { required: true, message: "请输入数据位", trigger: "change" },
+                ],
+                tdpz_jojy: [
+                    { required: true, message: "请输入奇偶校验", trigger: "change" },
+                ],
+                tdpz_cgsj: [
+                    { required: true, message: "请输入超出时间", trigger: "blur" },
+                ],
+                tdpz_jgsj: [
+                    { required: true, message: "请输入间隔时间", trigger: "blur" },
+                ],
+                tdpz_lxsj: [
+                    { required: true, message: "请输入轮询时间", trigger: "blur" },
+                ],
+                tdpz_cfcs: [
+                    { required: true, message: "请输入重复次数", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveGate();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            if (node.level == 3) {
+                this.nodekey = data.id;
+                this.menuShow = false;
+                this.menuShow = true;
+                e.preventDefault(); //关闭浏览器右键默认事件
+                this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+                document.addEventListener("click", (ev) => {
+                    ev.stopImmediatePropagation();
+                    if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+                        this.foo();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo();
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.level == 2) {
+                this.formData.tdpz_qdmc = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveGate() {
+            var obj = {
+                tdpz_tdmc: this.formData.tdpz_tdmc,
+                tdpz_td: this.formData.tdpz_td,
+                tdpz_qdmc: this.formData.tdpz_qdmc,
+                tdpz_port: this.formData.tdpz_port,
+                tdpz_chuankou: this.formData.tdpz_chuankou,
+                tdpz_btl: this.formData.tdpz_btl,
+                tdpz_sjw: this.formData.tdpz_sjw,
+                tdpz_tzw: this.formData.tdpz_tzw,
+                tdpz_jojy: this.formData.tdpz_jojy,
+                tdpz_cgsj: this.formData.tdpz_cgsj,
+                tdpz_jgsj: this.formData.tdpz_jgsj,
+                tdpz_lxsj: this.formData.tdpz_lxsj,
+                tdpz_cfcs: this.formData.tdpz_cfcs,
+                tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                tdpz_050F: this.formData.tdpz_050F,
+                tdpz_0610: this.formData.tdpz_0610,
+            };
+            this.add_passage = false;
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            // console.log(this.formData);
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(res.data.data.mark_value);
+                this.$refs["tree"].append(
+                    {
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc,
+                    },
+                    this.nodekey
+                );
+                // console.log(this.trees);
+                this.sendTree();
+                this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+            } else {
+                this.$message({
+                    message: "保存失败",
+                    type: "error",
+                });
+            }
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(answer);
+            // console.log(answer.data);
+            if (answer.data.data && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                // console.log(obj);
+                if (obj.tdpz_dxzkb) {
+                    this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                    this.formData.tdpz_td = obj.tdpz_td;
+                    this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                    this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                    this.formData.tdpz_btl = obj.tdpz_btl;
+                    this.formData.tdpz_sjw = obj.tdpz_sjw;
+                    this.formData.tdpz_tzw = obj.tdpz_tzw;
+                    this.formData.tdpz_jojy = obj.tdpz_jojy;
+                    this.formData.tdpz_port = obj.tdpz_port;
+                    this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                    this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                    this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                    this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                    this.formData.tdpz_050F = obj.tdpz_050F;
+                    this.formData.tdpz_0610 = obj.tdpz_0610;
+                    this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                    this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                    this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                    this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "2",
+            });
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        GetTree({
+            user_id: this.user_id,
+            type: "2",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        });
+        this.GetUserAnswer();
+    },
+    directives: {
+        "click-outside": {
+            bind: function (el, binding, vnode) {
+                console.log("el", el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == "function") {
+                            vnode.context[binding.expression](event);
+                        }
+                    }
+                };
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener("click", el.event, true);
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener("click", el.event, true);
+            },
+        },
+        methods: {
+            // 提交时校验
+            submitForm() {
+                this.$refs["formData"].validate((valid) => {
+                    if (valid) {
+                        this.saveGate();
+                    } else {
+                        console.log("error submit!!");
+                        return false;
+                    }
+                });
+            },
+            edit(event) {
+                this.flag = true;
+            },
+            //完成编辑
+            done(event) {
+                this.flag = false;
+                this.trees[0].label = this.gateway;
+                this.sendTree();
+            },
+            rightClick(e, data, node) {
+                if (node.level == 3) {
+                    this.nodekey = data.id;
+                    this.menuShow = false
+                    this.menuShow = true
+                    e.preventDefault() //关闭浏览器右键默认事件
+                    this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+                    document.addEventListener('click', (ev) => {
+                        ev.stopImmediatePropagation()
+                        if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                            this.foo()
+                        }
+                    })
+                }
+            },
+            // 点击时候的判断,判断是否为新增网关
+            selectMenuNode(index, indexPath) {
+                console.log(index);
+                if (index == 1) {
+                    this.add_passage = true;
+                }
+            },
+            foo() {
+                // 取消鼠标监听事件 菜单栏
+                this.menuShow = false
+                document.removeEventListener('click', this.foo) // 关掉监听，
+            },
+            treeNodeClick() {
+                this.foo()
+            },
+            // 收起点击事件的判断
+            getRetract() {
+                if (this.is_retract == true) {
+                    this.is_retract = false;
+                } else {
+                    this.is_retract = true;
+                }
+            },
+            getDriveName() {
+                this.diag_drive = true;
+            },
+            closeMenu(ev) {
+                console.log({ ev });
+                this.dialogVisible = false;
+            },
+            handleDetailClick(data, node, value) {
+                console.log(data.label);
+                if (node.level == 2) {
+                    this.formData.tdpz_qdmc = data.label;
+                    this.diag_drive = false;
+                }
+
+            },
+            async saveGate() {
+                var obj = {
+                    tdpz_tdmc: this.formData.tdpz_tdmc,
+                    tdpz_td: this.formData.tdpz_td,
+                    tdpz_qdmc: this.formData.tdpz_qdmc,
+                    tdpz_port: this.formData.tdpz_port,
+                    tdpz_chuankou: this.formData.tdpz_chuankou,
+                    tdpz_btl: this.formData.tdpz_btl,
+                    tdpz_sjw: this.formData.tdpz_sjw,
+                    tdpz_tzw: this.formData.tdpz_tzw,
+                    tdpz_jojy: this.formData.tdpz_jojy,
+                    tdpz_cgsj: this.formData.tdpz_cgsj,
+                    tdpz_jgsj: this.formData.tdpz_jgsj,
+                    tdpz_lxsj: this.formData.tdpz_lxsj,
+                    tdpz_cfcs: this.formData.tdpz_cfcs,
+                    tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                    tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                    tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                    tdpz_050F: this.formData.tdpz_050F,
+                    tdpz_0610: this.formData.tdpz_0610,
+                }
+                let datas = sessionStorage.getItem("DB-IotLite_wx");
+                // console.log(this.formData);
+                datas = { ...JSON.parse(datas), ...obj };
+                let res = await SaveUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                    mark_value: JSON.stringify(datas),
+                });
+                if (res.data.state) {
+                    this.$message({
+                        message: "保存成功",
+                        type: "success",
+                    });
+                    sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                    // console.log(res);
+                    // console.log(res.data.data.mark_value);
+                    this.$refs["tree"].append({
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc
+                    }, this.nodekey);
+                    // console.log(this.trees);
+                    this.sendTree();
+                    this.add_passage = false;
+                    this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+                } else {
+                    this.$message({
+                        message: `保存失败,原因是${res.data.message}`,
+                        type: "error",
+                    });
+                }
+
+            },
+            // 保存
+            async GetUserAnswer() {
+                this.loading = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                this.loading = false;
+                // console.log(answer);
+                // console.log(answer.data);
+                if (answer.data.data && answer.data.state) {
+                    // console.log(answer);
+                    let obj = JSON.parse(answer.data.data.mark_value);
+                    // console.log(obj);
+                    if (obj.tdpz_dxzkb) {
+                        this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                        this.formData.tdpz_td = obj.tdpz_td;
+                        this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                        this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                        this.formData.tdpz_btl = obj.tdpz_btl;
+                        this.formData.tdpz_sjw = obj.tdpz_sjw;
+                        this.formData.tdpz_tzw = obj.tdpz_tzw;
+                        this.formData.tdpz_jojy = obj.tdpz_jojy;
+                        this.formData.tdpz_port = obj.tdpz_port;
+                        this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                        this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                        this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                        this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                        this.formData.tdpz_050F = obj.tdpz_050F;
+                        this.formData.tdpz_0610 = obj.tdpz_0610;
+                        this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                        this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                        this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                        this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                    }
+                }
+            },
+            async sendTree() {
+                let result = await SendTree({
+                    user_id: this.user_id,
+                    data: JSON.stringify(this.trees),
+                    type: "2",
+                })
+                console.log(result);
+            },
+        },
+        mounted() {
+            this.user_id = this.$route.query.user_id;
+            GetTree({
+                user_id: this.user_id,
+                type: "2",
+            }).then((res) => {
+                console.log(res);
+                console.log(JSON.parse(res.data.data.data));
+                this.trees = JSON.parse(res.data.data.data);
+            })
+            this.GetUserAnswer();
+        },
+        directives: {
+            "click-outside": {
+                bind: function (el, binding, vnode) {
+                    console.log("el", el);
+                    console.log("binding", binding);
+                    el.event = function (event) {
+                        // 检查点击是否发生在节点之内（包括子节点）
+                        if (!(el == event.target || el.contains(event.target))) {
+                            // 如果没有，则触发调用
+                            // 若绑定值为函数，则执行
+                            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                            if (typeof vnode.context[binding.expression] == "function") {
+                                vnode.context[binding.expression](event);
+                            }
+                        }
+                    };
+                    // 绑定事件
+                    // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                    document.body.addEventListener("click", el.event, true);
+                },
+                unbind: function (el) {
+                    // 解绑事件
+                    document.body.removeEventListener("click", el.event, true);
+                },
+            },
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 38px;
+    }
+
+    .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: 6px;
+            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-dialog__footer {
+    padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 45px;
+    transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1408px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231111183802.vue b/.history/src/components/SerialPort_20231111183802.vue
new file mode 100644
index 0000000..96eeb5f
--- /dev/null
+++ b/.history/src/components/SerialPort_20231111183802.vue
@@ -0,0 +1,1337 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+                @node-click="treeNodeClick" ref="tree">
+                <!-- :render-content="renderContent" -->
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <template v-if="data.editing == 1">
+                        <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                            @click.stop="done">完成</el-button>
+                        <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                            @click.stop="edit">编辑</el-button>
+                        <span v-if="!flag">{{ data.label }}</span>
+                        <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+                    </template>
+                    <template v-else>{{ data.label }}</template>
+                </span>
+            </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" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="formData">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                                <el-select v-model="formData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                                <el-select v-model="formData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
+                                <el-row>
+                                    <el-col :span="18">
+                                        <el-input v-model="formData.tdpz_qdmc" placeholder=""
+                                            style="width: 200px; height: 30px" disabled></el-input>
+                                    </el-col>
+                                    <el-col :span="6">
+                                        <el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="串口号:" :label-width="formLabelWidth" prop="tdpz_chuankou">
+                                <el-select v-model="formData.tdpz_chuankou" placeholder=""
+                                    style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="波特率:" :label-width="formLabelWidth" prop="tdpz_btl">
+                                <el-select v-model="formData.tdpz_btl" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options4" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="数据位:" :label-width="formLabelWidth" prop="tdpz_sjw">
+                                <el-select v-model="formData.tdpz_sjw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options5" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="停止位:" :label-width="formLabelWidth" prop="tdpz_tzw">
+                                <el-select v-model="formData.tdpz_tzw" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options6" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="奇偶校验:" :label-width="formLabelWidth" prop="tdpz_jojy">
+                                <el-select v-model="formData.tdpz_jojy" placeholder="" style="width: 200px; height: 30px">
+                                    <el-option v-for="item in options7" :key="item.value" :label="item.label"
+                                        :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cgsj">
+                                <el-input v-model="formData.tdpz_cgsj" 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="tdpz_jgsj">
+                                <el-input v-model="formData.tdpz_jgsj" 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="tdpz_lxsj">
+                                <el-input v-model="formData.tdpz_lxsj" 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="tdpz_cfcs">
+                                <el-input v-model="formData.tdpz_cfcs" 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;
+                border: none;
+                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="formData.tdpz_watchtime">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="formData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                                        </el-col>
+                                        <el-col :span="4">: </el-col>
+                                        <el-col :span="10">
+                                            <el-input v-model="tdpz_dxzkb2" 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="formData.tdpz_050F"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                label="2">05</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_050F"
+                                                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="formData.tdpz_0610"
+                                                label="1">auto</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="2">06</el-radio></el-col>
+                                        <el-col :span="8"><el-radio v-model="formData.tdpz_0610"
+                                                label="3">10</el-radio></el-col>
+                                    </el-row>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <div class="drvieName_All" v-show="diag_drive">
+            <div class="title">
+                <p class="title_l">协议选择</p>
+                <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+            </div>
+            <el-divider></el-divider>
+            <el-tree :data="datas2" :props="defaultProps" default-expand-all @node-click="handleDetailClick"></el-tree>
+        </div>
+    </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+export default {
+    name: "TestTreeView",
+    data() {
+        return {
+            user_id: "",
+            loading: false,
+            flag: false,
+            gateway: "",
+            nodekey: "",
+            trees: [],
+            formData: {
+                tdpz_tdmc: "",
+                tdpz_td: "",
+                tdpz_qdmc: "",
+                tdpz_chuankou: "",
+                tdpz_btl: "",
+                tdpz_sjw: "8",
+                tdpz_tzw: "",
+                tdpz_jojy: "",
+                tdpz_cgsj: "",
+                tdpz_jgsj: "",
+                tdpz_lxsj: "",
+                tdpz_cfcs: "",
+                tdpz_watchtime: false,
+                tdpz_cjsylxdz: true,
+                tdpz_dxzkb: "",
+                tdpz_050F: "1",
+                tdpz_0610: "1",
+            },
+            tdpz_dxzkb1: "1",
+            tdpz_dxzkb2: "1",
+            diag_drive: false,
+            options1: [
+                {
+                    value: "有线区Channel1",
+                    label: "有线区Channel1",
+                },
+                {
+                    value: "无线区Channel1",
+                    label: "无线区Channel1",
+                },
+            ],
+            options2: [
+                {
+                    value: "网口",
+                    label: "网口",
+                },
+                {
+                    value: "串口",
+                    label: "串口",
+                },
+            ],
+            options3: [
+                {
+                    value: "com1",
+                    label: "com1",
+                },
+                {
+                    value: "com2",
+                    label: "com2",
+                },
+                {
+                    value: "com3",
+                    label: "com3",
+                },
+                {
+                    value: "com4",
+                    label: "com4",
+                },
+                {
+                    value: "com5",
+                    label: "com5",
+                },
+                {
+                    value: "com6",
+                    label: "com6",
+                },
+                {
+                    value: "com7",
+                    label: "com7",
+                },
+                {
+                    value: "com8",
+                    label: "com8",
+                },
+                {
+                    value: "com9",
+                    label: "com9",
+                },
+                {
+                    value: "com10",
+                    label: "com10",
+                },
+                {
+                    value: "com11",
+                    label: "com11",
+                },
+                {
+                    value: "com12",
+                    label: "com12",
+                },
+                {
+                    value: "com13",
+                    label: "com13",
+                },
+                {
+                    value: "com14",
+                    label: "com14",
+                },
+                {
+                    value: "com15",
+                    label: "com15",
+                },
+                {
+                    value: "com16",
+                    label: "com16",
+                },
+                {
+                    value: "com17",
+                    label: "com17",
+                },
+                {
+                    value: "com18",
+                    label: "com18",
+                },
+                {
+                    value: "com19",
+                    label: "com19",
+                },
+                {
+                    value: "com20",
+                    label: "com20",
+                },
+                {
+                    value: "com21",
+                    label: "com21",
+                },
+                {
+                    value: "com22",
+                    label: "com22",
+                },
+                {
+                    value: "com23",
+                    label: "com23",
+                },
+                {
+                    value: "com24",
+                    label: "com24",
+                },
+                {
+                    value: "com25",
+                    label: "com25",
+                },
+                {
+                    value: "com26",
+                    label: "com26",
+                },
+                {
+                    value: "com27",
+                    label: "com27",
+                },
+                {
+                    value: "com28",
+                    label: "com28",
+                },
+                {
+                    value: "com29",
+                    label: "com29",
+                },
+                {
+                    value: "com30",
+                    label: "com30",
+                },
+                {
+                    value: "com31",
+                    label: "com31",
+                },
+                {
+                    value: "com32",
+                    label: "com32",
+                },
+                {
+                    value: "com33",
+                    label: "com33",
+                },
+                {
+                    value: "com34",
+                    label: "com34",
+                },
+                {
+                    value: "com35",
+                    label: "com35",
+                },
+                {
+                    value: "com36",
+                    label: "com36",
+                },
+                {
+                    value: "com37",
+                    label: "com37",
+                },
+                {
+                    value: "com38",
+                    label: "com38",
+                },
+                {
+                    value: "com39",
+                    label: "com39",
+                },
+                {
+                    value: "com40",
+                    label: "com40",
+                },
+                {
+                    value: "com41",
+                    label: "com41",
+                },
+                {
+                    value: "com42",
+                    label: "com42",
+                },
+                {
+                    value: "com43",
+                    label: "com43",
+                },
+                {
+                    value: "com44",
+                    label: "com44",
+                },
+                {
+                    value: "com45",
+                    label: "com45",
+                },
+                {
+                    value: "com46",
+                    label: "com46",
+                },
+                {
+                    value: "com47",
+                    label: "com47",
+                },
+                {
+                    value: "com48",
+                    label: "com48",
+                },
+                {
+                    value: "com49",
+                    label: "com49",
+                },
+                {
+                    value: "com50",
+                    label: "com50",
+                },
+            ],
+            options4: [
+                {
+                    value: "1200",
+                    label: "1200",
+                },
+                {
+                    value: "2400",
+                    label: "2400",
+                },
+                {
+                    value: "4800",
+                    label: "4800",
+                },
+                {
+                    value: "9600",
+                    label: "9600",
+                },
+                {
+                    value: "115200",
+                    label: "115200",
+                },
+            ],
+            options5: [
+                {
+                    value: "8",
+                    label: "8",
+                },
+                {
+                    value: "7",
+                    label: "7",
+                },
+            ],
+            options6: [
+                {
+                    value: "1",
+                    label: "1",
+                },
+                {
+                    value: "2",
+                    label: "2",
+                },
+            ],
+            options7: [
+                {
+                    value: "奇校验",
+                    label: "奇校验",
+                },
+                {
+                    value: "偶校验",
+                    label: "偶校验",
+                },
+                {
+                    value: "无校验（none）",
+                    label: "无校验（none）",
+                },
+            ],
+            isdisabled: true,
+            is_retract: true,
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            input1: 10,
+            add_passage: false,
+            rightMenu: "",
+            dialogVisible: true,
+            menuShow: false,
+            datas: [
+                {
+                    label: "Gateway",
+                    children: [
+                        {
+                            label: "数据采集",
+                            children: [
+                                {
+                                    label: "I/O点",
+                                },
+                                {
+                                    label: "用户点",
+                                },
+                                {
+                                    label: "计算点",
+                                },
+                                {
+                                    label: "系统点",
+                                },
+                            ],
+                        },
+                        {
+                            label: "数据服务",
+                            children: [
+                                {
+                                    label: "Modbus",
+                                },
+                            ],
+                        },
+                        {
+                            label: "IOT",
+                            children: [
+                                {
+                                    label: "Mqtt Client",
+                                },
+                                {
+                                    label: "Alink",
+                                },
+                                {
+                                    label: "Tlink",
+                                },
+                                {
+                                    label: "loTDDC",
+                                },
+                                {
+                                    label: "Ulink",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            datas2: [
+                {
+                    label: "通用标准",
+                    children: [
+                        {
+                            label: "ModbusTCPClient",
+                        },
+                        {
+                            label: "ModbusRTU_over_TCP",
+                        },
+                        {
+                            label: "OPCUAClient",
+                        },
+                        {
+                            label: "OPCDAClient",
+                        },
+                        {
+                            label: "MQTTClient",
+                        },
+                        {
+                            label: "OPCXMLDAClient",
+                        },
+                        {
+                            label: "环保212协议网口监听",
+                        },
+                    ],
+                },
+                {
+                    label: "PLC",
+                    children: [
+                        {
+                            label: "Slemens S7-200 Network",
+                        },
+                        {
+                            label: "Slemens S7-300 Network",
+                        },
+                        {
+                            label: "Slemens S7-400 Network",
+                        },
+                        {
+                            label: "Slemens S7-1200 Network",
+                        },
+                        {
+                            label: "Slemens S7-1500 Network",
+                        },
+                        {
+                            label: "EtherNet/IP CIP协议(AB OMR ON)",
+                        },
+                        {
+                            label: "MC_Qna-3E(三菱 基恩士 松下)",
+                        },
+                        {
+                            label: "MC_A-1E_Binary",
+                        },
+                        {
+                            label: "OMRON-FINS",
+                        },
+                        {
+                            label: "横河PLC",
+                        },
+                        {
+                            label: "西门子FetchWirte",
+                        },
+                        {
+                            label: "富机 FUJI_SPH_NET",
+                        },
+                        {
+                            label: "基恩士上位链路通讯",
+                        },
+                    ],
+                },
+                {
+                    label: "智能建筑",
+                    children: [],
+                },
+                {
+                    label: "厂家定制",
+                    children: [],
+                },
+                {
+                    label: "电力行业标准",
+                    children: [
+                        {
+                            label: "IEC104",
+                        },
+                        {
+                            label: "DLT645_over_TCP",
+                        },
+                    ],
+                },
+                {
+                    label: "CNC数控",
+                    children: [],
+                },
+                {
+                    label: "私有协议",
+                    children: [],
+                },
+            ],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+            rules: {
+                tdpz_tdmc: [
+                    { required: true, message: "请输入通道名称", trigger: "change" },
+                ],
+                tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+                tdpz_qdmc: [
+                    { required: true, message: "请输入驱动名称", trigger: "change" },
+                ],
+                tdpz_chuankou: [
+                    { required: true, message: "请输入串口号", trigger: "change" },
+                ],
+                tdpz_btl: [
+                    { required: true, message: "请输入波特率", trigger: "change" },
+                ],
+                tdpz_tzw: [
+                    { required: true, message: "请输入停止位", trigger: "change" },
+                ],
+                tdpz_sjw: [
+                    { required: true, message: "请输入数据位", trigger: "change" },
+                ],
+                tdpz_jojy: [
+                    { required: true, message: "请输入奇偶校验", trigger: "change" },
+                ],
+                tdpz_cgsj: [
+                    { required: true, message: "请输入超出时间", trigger: "blur" },
+                ],
+                tdpz_jgsj: [
+                    { required: true, message: "请输入间隔时间", trigger: "blur" },
+                ],
+                tdpz_lxsj: [
+                    { required: true, message: "请输入轮询时间", trigger: "blur" },
+                ],
+                tdpz_cfcs: [
+                    { required: true, message: "请输入重复次数", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    methods: {
+        // 提交时校验
+        submitForm() {
+            this.$refs["formData"].validate((valid) => {
+                if (valid) {
+                    this.saveGate();
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
+        },
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        rightClick(e, data, node) {
+            if (node.level == 3) {
+                this.nodekey = data.id;
+                this.menuShow = false;
+                this.menuShow = true;
+                e.preventDefault(); //关闭浏览器右键默认事件
+                this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+                document.addEventListener("click", (ev) => {
+                    ev.stopImmediatePropagation();
+                    if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+                        this.foo();
+                    }
+                });
+            }
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo();
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        handleDetailClick(data, node, value) {
+            console.log(data.label);
+            if (node.level == 2) {
+                this.formData.tdpz_qdmc = data.label;
+                this.diag_drive = false;
+            }
+        },
+        async saveGate() {
+            var obj = {
+                tdpz_tdmc: this.formData.tdpz_tdmc,
+                tdpz_td: this.formData.tdpz_td,
+                tdpz_qdmc: this.formData.tdpz_qdmc,
+                tdpz_port: this.formData.tdpz_port,
+                tdpz_chuankou: this.formData.tdpz_chuankou,
+                tdpz_btl: this.formData.tdpz_btl,
+                tdpz_sjw: this.formData.tdpz_sjw,
+                tdpz_tzw: this.formData.tdpz_tzw,
+                tdpz_jojy: this.formData.tdpz_jojy,
+                tdpz_cgsj: this.formData.tdpz_cgsj,
+                tdpz_jgsj: this.formData.tdpz_jgsj,
+                tdpz_lxsj: this.formData.tdpz_lxsj,
+                tdpz_cfcs: this.formData.tdpz_cfcs,
+                tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                tdpz_050F: this.formData.tdpz_050F,
+                tdpz_0610: this.formData.tdpz_0610,
+            };
+            this.add_passage = false;
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            // console.log(this.formData);
+            datas = { ...JSON.parse(datas), ...obj };
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+                mark_value: JSON.stringify(datas),
+                step: "2",
+            });
+            if (res.data.state) {
+                this.$message({
+                    message: "保存成功",
+                    type: "success",
+                });
+                sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                // console.log(res);
+                // console.log(res.data.data.mark_value);
+                this.$refs["tree"].append(
+                    {
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc,
+                    },
+                    this.nodekey
+                );
+                // console.log(this.trees);
+                this.sendTree();
+                this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+            } else {
+                this.$message({
+                    message: "保存失败",
+                    type: "error",
+                });
+            }
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: this.user_id,
+            });
+            this.loading = false;
+            // console.log(answer);
+            // console.log(answer.data);
+            if (answer.data.data && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                // console.log(obj);
+                if (obj.tdpz_dxzkb) {
+                    this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                    this.formData.tdpz_td = obj.tdpz_td;
+                    this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                    this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                    this.formData.tdpz_btl = obj.tdpz_btl;
+                    this.formData.tdpz_sjw = obj.tdpz_sjw;
+                    this.formData.tdpz_tzw = obj.tdpz_tzw;
+                    this.formData.tdpz_jojy = obj.tdpz_jojy;
+                    this.formData.tdpz_port = obj.tdpz_port;
+                    this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                    this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                    this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                    this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                    this.formData.tdpz_050F = obj.tdpz_050F;
+                    this.formData.tdpz_0610 = obj.tdpz_0610;
+                    this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                    this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                    this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                    this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                }
+            }
+        },
+        async sendTree() {
+            let result = await SendTree({
+                user_id: this.user_id,
+                data: JSON.stringify(this.trees),
+                type: "2",
+            });
+            console.log(result);
+        },
+    },
+    mounted() {
+        this.user_id = this.$route.query.user_id;
+        GetTree({
+            user_id: this.user_id,
+            type: "2",
+        }).then((res) => {
+            console.log(res);
+            console.log(JSON.parse(res.data.data.data));
+            this.trees = JSON.parse(res.data.data.data);
+        });
+        this.GetUserAnswer();
+    },
+    directives: {
+        "click-outside": {
+            bind: function (el, binding, vnode) {
+                console.log("el", el);
+                console.log("binding", binding);
+                el.event = function (event) {
+                    // 检查点击是否发生在节点之内（包括子节点）
+                    if (!(el == event.target || el.contains(event.target))) {
+                        // 如果没有，则触发调用
+                        // 若绑定值为函数，则执行
+                        // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                        if (typeof vnode.context[binding.expression] == "function") {
+                            vnode.context[binding.expression](event);
+                        }
+                    }
+                };
+                // 绑定事件
+                // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                document.body.addEventListener("click", el.event, true);
+            },
+            unbind: function (el) {
+                // 解绑事件
+                document.body.removeEventListener("click", el.event, true);
+            },
+        },
+        methods: {
+            // 提交时校验
+            submitForm() {
+                this.$refs["formData"].validate((valid) => {
+                    if (valid) {
+                        this.saveGate();
+                    } else {
+                        console.log("error submit!!");
+                        return false;
+                    }
+                });
+            },
+            edit(event) {
+                this.flag = true;
+            },
+            //完成编辑
+            done(event) {
+                this.flag = false;
+                this.trees[0].label = this.gateway;
+                this.sendTree();
+            },
+            rightClick(e, data, node) {
+                if (node.level == 3) {
+                    this.nodekey = data.id;
+                    this.menuShow = false
+                    this.menuShow = true
+                    e.preventDefault() //关闭浏览器右键默认事件
+                    this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+                    document.addEventListener('click', (ev) => {
+                        ev.stopImmediatePropagation()
+                        if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                            this.foo()
+                        }
+                    })
+                }
+            },
+            // 点击时候的判断,判断是否为新增网关
+            selectMenuNode(index, indexPath) {
+                console.log(index);
+                if (index == 1) {
+                    this.add_passage = true;
+                }
+            },
+            foo() {
+                // 取消鼠标监听事件 菜单栏
+                this.menuShow = false
+                document.removeEventListener('click', this.foo) // 关掉监听，
+            },
+            treeNodeClick() {
+                this.foo()
+            },
+            // 收起点击事件的判断
+            getRetract() {
+                if (this.is_retract == true) {
+                    this.is_retract = false;
+                } else {
+                    this.is_retract = true;
+                }
+            },
+            getDriveName() {
+                this.diag_drive = true;
+            },
+            closeMenu(ev) {
+                console.log({ ev });
+                this.dialogVisible = false;
+            },
+            handleDetailClick(data, node, value) {
+                console.log(data.label);
+                if (node.level == 2) {
+                    this.formData.tdpz_qdmc = data.label;
+                    this.diag_drive = false;
+                }
+
+            },
+            async saveGate() {
+                var obj = {
+                    tdpz_tdmc: this.formData.tdpz_tdmc,
+                    tdpz_td: this.formData.tdpz_td,
+                    tdpz_qdmc: this.formData.tdpz_qdmc,
+                    tdpz_port: this.formData.tdpz_port,
+                    tdpz_chuankou: this.formData.tdpz_chuankou,
+                    tdpz_btl: this.formData.tdpz_btl,
+                    tdpz_sjw: this.formData.tdpz_sjw,
+                    tdpz_tzw: this.formData.tdpz_tzw,
+                    tdpz_jojy: this.formData.tdpz_jojy,
+                    tdpz_cgsj: this.formData.tdpz_cgsj,
+                    tdpz_jgsj: this.formData.tdpz_jgsj,
+                    tdpz_lxsj: this.formData.tdpz_lxsj,
+                    tdpz_cfcs: this.formData.tdpz_cfcs,
+                    tdpz_watchtime: String(Number(this.formData.tdpz_watchtime)),
+                    tdpz_cjsylxdz: String(Number(this.formData.tdpz_cjsylxdz)),
+                    tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+                    tdpz_050F: this.formData.tdpz_050F,
+                    tdpz_0610: this.formData.tdpz_0610,
+                }
+                let datas = sessionStorage.getItem("DB-IotLite_wx");
+                // console.log(this.formData);
+                datas = { ...JSON.parse(datas), ...obj };
+                let res = await SaveUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                    mark_value: JSON.stringify(datas),
+                });
+                if (res.data.state) {
+                    this.$message({
+                        message: "保存成功",
+                        type: "success",
+                    });
+                    sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(datas));
+                    // console.log(res);
+                    // console.log(res.data.data.mark_value);
+                    this.$refs["tree"].append({
+                        id: this.nodekey + 1000,
+                        label: this.formData.tdpz_tdmc
+                    }, this.nodekey);
+                    // console.log(this.trees);
+                    this.sendTree();
+                    this.add_passage = false;
+                    this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
+                } else {
+                    this.$message({
+                        message: `保存失败,原因是${res.data.message}`,
+                        type: "error",
+                    });
+                }
+
+            },
+            // 保存
+            async GetUserAnswer() {
+                this.loading = true;
+                let answer = await GetUserAnswer({
+                    mark: "DB-IotLite_wx",
+                    user_id: this.user_id,
+                })
+                this.loading = false;
+                // console.log(answer);
+                // console.log(answer.data);
+                if (answer.data.data && answer.data.state) {
+                    // console.log(answer);
+                    let obj = JSON.parse(answer.data.data.mark_value);
+                    // console.log(obj);
+                    if (obj.tdpz_dxzkb) {
+                        this.formData.tdpz_tdmc = obj.tdpz_tdmc;
+                        this.formData.tdpz_td = obj.tdpz_td;
+                        this.formData.tdpz_qdmc = obj.tdpz_qdmc;
+                        this.formData.tdpz_chuankou = obj.tdpz_chuankou;
+                        this.formData.tdpz_btl = obj.tdpz_btl;
+                        this.formData.tdpz_sjw = obj.tdpz_sjw;
+                        this.formData.tdpz_tzw = obj.tdpz_tzw;
+                        this.formData.tdpz_jojy = obj.tdpz_jojy;
+                        this.formData.tdpz_port = obj.tdpz_port;
+                        this.formData.tdpz_cgsj = obj.tdpz_cgsj;
+                        this.formData.tdpz_jgsj = obj.tdpz_jgsj;
+                        this.formData.tdpz_lxsj = obj.tdpz_lxsj;
+                        this.formData.tdpz_cfcs = obj.tdpz_cfcs;
+                        this.formData.tdpz_050F = obj.tdpz_050F;
+                        this.formData.tdpz_0610 = obj.tdpz_0610;
+                        this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+                        this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+                        this.formData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+                        this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+                    }
+                }
+            },
+            async sendTree() {
+                let result = await SendTree({
+                    user_id: this.user_id,
+                    data: JSON.stringify(this.trees),
+                    type: "2",
+                })
+                console.log(result);
+            },
+        },
+        mounted() {
+            this.user_id = this.$route.query.user_id;
+            GetTree({
+                user_id: this.user_id,
+                type: "2",
+            }).then((res) => {
+                console.log(res);
+                console.log(JSON.parse(res.data.data.data));
+                this.trees = JSON.parse(res.data.data.data);
+            })
+            this.GetUserAnswer();
+        },
+        directives: {
+            "click-outside": {
+                bind: function (el, binding, vnode) {
+                    console.log("el", el);
+                    console.log("binding", binding);
+                    el.event = function (event) {
+                        // 检查点击是否发生在节点之内（包括子节点）
+                        if (!(el == event.target || el.contains(event.target))) {
+                            // 如果没有，则触发调用
+                            // 若绑定值为函数，则执行
+                            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
+                            if (typeof vnode.context[binding.expression] == "function") {
+                                vnode.context[binding.expression](event);
+                            }
+                        }
+                    };
+                    // 绑定事件
+                    // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
+                    document.body.addEventListener("click", el.event, true);
+                },
+                unbind: function (el) {
+                    // 解绑事件
+                    document.body.removeEventListener("click", el.event, true);
+                },
+            },
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+    position: absolute;
+    width: 286px;
+    left: 64px;
+    top: 104px;
+    width: 286px;
+    height: 753px;
+    line-height: 20px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
+    border: 1px solid rgba(220, 220, 220, 1);
+}
+
+.tree_rightmenu {
+    position: fixed;
+    width: 120px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    z-index: 1000;
+}
+
+.super_parmams {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 668px;
+
+    i {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+    }
+}
+
+/deep/ .pas_params {
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 38px;
+    }
+
+    .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: 6px;
+            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-dialog__footer {
+    padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+    position: absolute;
+    left: 50%;
+    bottom: 45px;
+    transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+    position: absolute;
+    left: 1408px;
+    top: 140px;
+    width: 435px;
+    max-height: 720px;
+    z-index: 10000;
+    border: 1px solid #f5f5f5;
+
+    .title {
+        background-color: #fff;
+        padding: 5px 6px 5px 25px;
+        display: flex;
+        justify-content: space-between;
+
+        .title_l {
+            width: 103px;
+            height: 26px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 18px;
+            text-align: left;
+        }
+
+        .title_r {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            color: rgba(111, 103, 103, 1);
+        }
+    }
+
+    // h3 {
+    //   padding-bottom: 10px;
+    //   background-color: #fff;
+    // }
+
+    .el-divider--horizontal {
+        margin: 0px;
+    }
+}
+</style>
diff --git a/.history/src/components/TreeView_20231111180632.vue b/.history/src/components/TreeView_20231111180632.vue
new file mode 100644
index 0000000..4f43ec1
--- /dev/null
+++ b/.history/src/components/TreeView_20231111180632.vue
@@ -0,0 +1,822 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+          @node-click="treeNodeClick" ref="tree">
+          <!-- :render-content="renderContent" -->
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <template v-if="data.editing == 1">
+              <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                @click.stop="done">完成</el-button>
+              <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                @click.stop="edit">编辑</el-button>
+              <span v-if="!flag">{{ data.label }}</span>
+              <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+            </template>
+            <template v-else>{{ data.label }}</template>
+          </span>
+        </el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+        <el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="FormData">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                <el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                <el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :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="tdpz_qdmc">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="FormData.tdpz_qdmc" 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="tdpz_ip">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">. </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip4" 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="tdpz_port">
+                <el-input v-model="FormData.tdpz_port" 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="tdpz_cssj">
+                <el-input v-model="FormData.tdpz_cssj" 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="tdpz_jgsj">
+                <el-input v-model="FormData.tdpz_jgsj" 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="tdpz_lxsj">
+                <el-input v-model="FormData.tdpz_lxsj" 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="tdpz_cfcs">
+                <el-input v-model="FormData.tdpz_cfcs" 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;
+                border: none;
+                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="FormData.tdpz_watchtime">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="FormData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="tdpz_dxzkb2" 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="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">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="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <div class="title">
+        <p class="title_l">协议选择</p>
+        <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      FormData: {
+        tdpz_tdmc: "",
+        tdpz_td: "",
+        tdpz_qdmc: "",
+        tdpz_port: "",
+        tdpz_cssj: "",
+        tdpz_jgsj: "",
+        tdpz_lxsj: "",
+        tdpz_cfcs: "",
+        tdpz_watchtime: false,
+        tdpz_cjsylxdz: true,
+        tdpz_dxzkb: "",
+        tdpz_050F: "auto",
+        tdpz_0610: "auto",
+      },
+      tdpz_dxzkb1: "1",
+      tdpz_dxzkb2: "1",
+      tdpz_ip1: "",
+      tdpz_ip2: "",
+      tdpz_ip3: "",
+      tdpz_ip4: "",
+      options1: [
+        {
+          value: "有线区Channel1",
+          label: "有线区Channel1",
+        },
+        {
+          value: "无线区Channel1",
+          label: "无线区Channel1",
+        },
+      ],
+      options2: [
+        {
+          value: "网口",
+          label: "网口",
+        },
+        {
+          value: "串口",
+          label: "串口",
+        },
+      ],
+      value1: "有线区Channel1",
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 10,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      trees: [],
+      nodekey: "",
+      datas2: [
+        {
+          label: "通用标准",
+          children: [
+            {
+              label: "ModbusTCPClient",
+            },
+            {
+              label: "ModbusRTU_over_TCP",
+            },
+            {
+              label: "OPCUAClient",
+            },
+            {
+              label: "OPCDAClient",
+            },
+            {
+              label: "MQTTClient",
+            },
+            {
+              label: "OPCXMLDAClient",
+            },
+            {
+              label: "环保212协议网口监听",
+            },
+          ],
+        },
+        {
+          label: "PLC",
+          children: [
+            {
+              label: "Slemens S7-200 Network",
+            },
+            {
+              label: "Slemens S7-300 Network",
+            },
+            {
+              label: "Slemens S7-400 Network",
+            },
+            {
+              label: "Slemens S7-1200 Network",
+            },
+            {
+              label: "Slemens S7-1500 Network",
+            },
+            {
+              label: "EtherNet/IP CIP协议(AB OMR ON)",
+            },
+            {
+              label: "MC_Qna-3E(三菱 基恩士 松下)",
+            },
+            {
+              label: "MC_A-1E_Binary",
+            },
+            {
+              label: "OMRON-FINS",
+            },
+            {
+              label: "横河PLC",
+            },
+            {
+              label: "西门子FetchWirte",
+            },
+            {
+              label: "富机 FUJI_SPH_NET",
+            },
+            {
+              label: "基恩士上位链路通讯",
+            },
+          ],
+        },
+        {
+          label: "智能建筑",
+          children: [],
+        },
+        {
+          label: "厂家定制",
+          children: [],
+        },
+        {
+          label: "电力行业标准",
+          children: [
+            {
+              label: "IEC104",
+            },
+            {
+              label: "DLT645_over_TCP",
+            },
+          ],
+        },
+        {
+          label: "CNC数控",
+          children: [],
+        },
+        {
+          label: "私有协议",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        tdpz_tdmc: [
+          { required: true, message: "请输入通道名称", trigger: "change" },
+        ],
+        tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+        tdpz_qdmc: [
+          { required: true, message: "请输入驱动名称", trigger: "change" },
+        ],
+        tdpz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIpAddress,
+          trigger: "blur"
+        }],
+        tdpz_port: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        tdpz_cssj: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        tdpz_jgsj: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        tdpz_lxsj: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        tdpz_cfcs: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (
+        this.tdpz_ip1 +
+        "." +
+        this.tdpz_ip2 +
+        "." +
+        this.tdpz_ip3 +
+        "." +
+        this.tdpz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["FormData"].validate((valid) => {
+        if (valid) {
+          this.saveGate();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.level == 3) {
+        this.nodekey = data.id;
+        // if (data.id == 111 || data.label == "I/O点") {
+        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;
+      }
+      this.menuShow = false;
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick(key) {
+      // console.log
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    async saveGate() {
+      this.add_passage = false;
+      var obj = {
+        tdpz_tdmc: this.FormData.tdpz_tdmc,
+        tdpz_td: this.FormData.tdpz_td,
+        tdpz_qdmc: this.FormData.tdpz_qdmc,
+        tdpz_port: this.FormData.tdpz_port,
+        tdpz_cssj: this.FormData.tdpz_cssj,
+        tdpz_jgsj: this.FormData.tdpz_jgsj,
+        tdpz_ip:
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4,
+        tdpz_lxsj: this.FormData.tdpz_lxsj,
+        tdpz_cfcs: this.FormData.tdpz_cfcs,
+        tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
+        tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
+        tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+        tdpz_050F: this.FormData.tdpz_050F,
+        tdpz_0610: this.FormData.tdpz_0610,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        // user_id: "USER202307301114011710",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step: "2",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+        console.log(res);
+        // console.log(res.data.data.mark_value);
+        // this.$nextTick(() => {
+        this.$refs["tree"].append(
+          {
+            id: this.nodekey + 1000,
+            label: this.FormData.tdpz_tdmc,
+          },
+          this.nodekey
+        );
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+    },
+    handleDetailClick(data, node, value) {
+      console.log(data.label);
+      console.log(data);
+      if (node.level == 2) {
+        this.FormData.tdpz_qdmc = data.label;
+        this.diag_drive = false;
+        console.log(result);
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+      });
+      console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        // this.FormData.
+        if (obj.tdpz_dxzkb) {
+          this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+          this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+        }
+        this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+        if (obj.tdpz_cjsylxdz) {
+          this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+        }
+        if (obj.tdpz_ip) {
+          this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
+          this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
+          this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
+          this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
+        }
+        if (obj.tdpz_tdmc) {
+          this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
+        }
+        if (obj.tdpz_td) {
+          this.FormData.tdpz_td = obj.tdpz_td;
+        }
+        this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
+        if (obj.tdpz_050F) {
+          this.FormData.tdpz_050F = obj.tdpz_050F;
+        }
+        if (obj.tdpz_0610) {
+          this.FormData.tdpz_0610 = obj.tdpz_0610;
+        }
+        this.FormData.tdpz_port = obj.tdpz_port;
+        this.FormData.tdpz_cssj = obj.tdpz_cssj;
+        this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
+        this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
+        this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      console.log(result);
+    },
+  },
+  created() {
+    console.log(this.$route.query.user_id);
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "1",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    });
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    "FormData.tdpz_watchtime"(newval) {
+      console.log(newval);
+      if (newval) {
+        this.isdisabled = true;
+      } else {
+        this.isdisabled = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  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;
+  color: #fff !important;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 38px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      color: #fff !important;
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 6px;
+      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 {
+    color: #fff !important;
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.el-dialog__footer {
+  padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 45px;
+  transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+  position: absolute;
+  left: 1408px;
+  top: 140px;
+  width: 435px;
+  max-height: 720px;
+  z-index: 10000;
+  border: 1px solid #f5f5f5;
+
+  .title {
+    background-color: #fff;
+    padding: 5px 6px 5px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 103px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
+    }
+  }
+
+  // h3 {
+  //   padding-bottom: 10px;
+  //   background-color: #fff;
+  // }
+
+  .el-divider--horizontal {
+    margin: 0px;
+  }
+}
+</style>
diff --git a/.history/src/components/TreeView_20231111183108.vue b/.history/src/components/TreeView_20231111183108.vue
new file mode 100644
index 0000000..4f43ec1
--- /dev/null
+++ b/.history/src/components/TreeView_20231111183108.vue
@@ -0,0 +1,822 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+          @node-click="treeNodeClick" ref="tree">
+          <!-- :render-content="renderContent" -->
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <template v-if="data.editing == 1">
+              <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                @click.stop="done">完成</el-button>
+              <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                @click.stop="edit">编辑</el-button>
+              <span v-if="!flag">{{ data.label }}</span>
+              <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+            </template>
+            <template v-else>{{ data.label }}</template>
+          </span>
+        </el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+        <el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="FormData">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                <el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                <el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :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="tdpz_qdmc">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="FormData.tdpz_qdmc" 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="tdpz_ip">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">. </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip4" 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="tdpz_port">
+                <el-input v-model="FormData.tdpz_port" 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="tdpz_cssj">
+                <el-input v-model="FormData.tdpz_cssj" 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="tdpz_jgsj">
+                <el-input v-model="FormData.tdpz_jgsj" 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="tdpz_lxsj">
+                <el-input v-model="FormData.tdpz_lxsj" 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="tdpz_cfcs">
+                <el-input v-model="FormData.tdpz_cfcs" 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;
+                border: none;
+                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="FormData.tdpz_watchtime">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="FormData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="tdpz_dxzkb2" 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="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">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="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <div class="title">
+        <p class="title_l">协议选择</p>
+        <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      FormData: {
+        tdpz_tdmc: "",
+        tdpz_td: "",
+        tdpz_qdmc: "",
+        tdpz_port: "",
+        tdpz_cssj: "",
+        tdpz_jgsj: "",
+        tdpz_lxsj: "",
+        tdpz_cfcs: "",
+        tdpz_watchtime: false,
+        tdpz_cjsylxdz: true,
+        tdpz_dxzkb: "",
+        tdpz_050F: "auto",
+        tdpz_0610: "auto",
+      },
+      tdpz_dxzkb1: "1",
+      tdpz_dxzkb2: "1",
+      tdpz_ip1: "",
+      tdpz_ip2: "",
+      tdpz_ip3: "",
+      tdpz_ip4: "",
+      options1: [
+        {
+          value: "有线区Channel1",
+          label: "有线区Channel1",
+        },
+        {
+          value: "无线区Channel1",
+          label: "无线区Channel1",
+        },
+      ],
+      options2: [
+        {
+          value: "网口",
+          label: "网口",
+        },
+        {
+          value: "串口",
+          label: "串口",
+        },
+      ],
+      value1: "有线区Channel1",
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 10,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      trees: [],
+      nodekey: "",
+      datas2: [
+        {
+          label: "通用标准",
+          children: [
+            {
+              label: "ModbusTCPClient",
+            },
+            {
+              label: "ModbusRTU_over_TCP",
+            },
+            {
+              label: "OPCUAClient",
+            },
+            {
+              label: "OPCDAClient",
+            },
+            {
+              label: "MQTTClient",
+            },
+            {
+              label: "OPCXMLDAClient",
+            },
+            {
+              label: "环保212协议网口监听",
+            },
+          ],
+        },
+        {
+          label: "PLC",
+          children: [
+            {
+              label: "Slemens S7-200 Network",
+            },
+            {
+              label: "Slemens S7-300 Network",
+            },
+            {
+              label: "Slemens S7-400 Network",
+            },
+            {
+              label: "Slemens S7-1200 Network",
+            },
+            {
+              label: "Slemens S7-1500 Network",
+            },
+            {
+              label: "EtherNet/IP CIP协议(AB OMR ON)",
+            },
+            {
+              label: "MC_Qna-3E(三菱 基恩士 松下)",
+            },
+            {
+              label: "MC_A-1E_Binary",
+            },
+            {
+              label: "OMRON-FINS",
+            },
+            {
+              label: "横河PLC",
+            },
+            {
+              label: "西门子FetchWirte",
+            },
+            {
+              label: "富机 FUJI_SPH_NET",
+            },
+            {
+              label: "基恩士上位链路通讯",
+            },
+          ],
+        },
+        {
+          label: "智能建筑",
+          children: [],
+        },
+        {
+          label: "厂家定制",
+          children: [],
+        },
+        {
+          label: "电力行业标准",
+          children: [
+            {
+              label: "IEC104",
+            },
+            {
+              label: "DLT645_over_TCP",
+            },
+          ],
+        },
+        {
+          label: "CNC数控",
+          children: [],
+        },
+        {
+          label: "私有协议",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        tdpz_tdmc: [
+          { required: true, message: "请输入通道名称", trigger: "change" },
+        ],
+        tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+        tdpz_qdmc: [
+          { required: true, message: "请输入驱动名称", trigger: "change" },
+        ],
+        tdpz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIpAddress,
+          trigger: "blur"
+        }],
+        tdpz_port: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        tdpz_cssj: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        tdpz_jgsj: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        tdpz_lxsj: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        tdpz_cfcs: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (
+        this.tdpz_ip1 +
+        "." +
+        this.tdpz_ip2 +
+        "." +
+        this.tdpz_ip3 +
+        "." +
+        this.tdpz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["FormData"].validate((valid) => {
+        if (valid) {
+          this.saveGate();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.level == 3) {
+        this.nodekey = data.id;
+        // if (data.id == 111 || data.label == "I/O点") {
+        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;
+      }
+      this.menuShow = false;
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick(key) {
+      // console.log
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    async saveGate() {
+      this.add_passage = false;
+      var obj = {
+        tdpz_tdmc: this.FormData.tdpz_tdmc,
+        tdpz_td: this.FormData.tdpz_td,
+        tdpz_qdmc: this.FormData.tdpz_qdmc,
+        tdpz_port: this.FormData.tdpz_port,
+        tdpz_cssj: this.FormData.tdpz_cssj,
+        tdpz_jgsj: this.FormData.tdpz_jgsj,
+        tdpz_ip:
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4,
+        tdpz_lxsj: this.FormData.tdpz_lxsj,
+        tdpz_cfcs: this.FormData.tdpz_cfcs,
+        tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
+        tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
+        tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+        tdpz_050F: this.FormData.tdpz_050F,
+        tdpz_0610: this.FormData.tdpz_0610,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        // user_id: "USER202307301114011710",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step: "2",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+        console.log(res);
+        // console.log(res.data.data.mark_value);
+        // this.$nextTick(() => {
+        this.$refs["tree"].append(
+          {
+            id: this.nodekey + 1000,
+            label: this.FormData.tdpz_tdmc,
+          },
+          this.nodekey
+        );
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败,原因是${res.data.message}`,
+          type: "error",
+        });
+      }
+    },
+    handleDetailClick(data, node, value) {
+      console.log(data.label);
+      console.log(data);
+      if (node.level == 2) {
+        this.FormData.tdpz_qdmc = data.label;
+        this.diag_drive = false;
+        console.log(result);
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+      });
+      console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        // this.FormData.
+        if (obj.tdpz_dxzkb) {
+          this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+          this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+        }
+        this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+        if (obj.tdpz_cjsylxdz) {
+          this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+        }
+        if (obj.tdpz_ip) {
+          this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
+          this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
+          this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
+          this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
+        }
+        if (obj.tdpz_tdmc) {
+          this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
+        }
+        if (obj.tdpz_td) {
+          this.FormData.tdpz_td = obj.tdpz_td;
+        }
+        this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
+        if (obj.tdpz_050F) {
+          this.FormData.tdpz_050F = obj.tdpz_050F;
+        }
+        if (obj.tdpz_0610) {
+          this.FormData.tdpz_0610 = obj.tdpz_0610;
+        }
+        this.FormData.tdpz_port = obj.tdpz_port;
+        this.FormData.tdpz_cssj = obj.tdpz_cssj;
+        this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
+        this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
+        this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      console.log(result);
+    },
+  },
+  created() {
+    console.log(this.$route.query.user_id);
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "1",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    });
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    "FormData.tdpz_watchtime"(newval) {
+      console.log(newval);
+      if (newval) {
+        this.isdisabled = true;
+      } else {
+        this.isdisabled = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  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;
+  color: #fff !important;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 38px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      color: #fff !important;
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 6px;
+      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 {
+    color: #fff !important;
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.el-dialog__footer {
+  padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 45px;
+  transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+  position: absolute;
+  left: 1408px;
+  top: 140px;
+  width: 435px;
+  max-height: 720px;
+  z-index: 10000;
+  border: 1px solid #f5f5f5;
+
+  .title {
+    background-color: #fff;
+    padding: 5px 6px 5px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 103px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
+    }
+  }
+
+  // h3 {
+  //   padding-bottom: 10px;
+  //   background-color: #fff;
+  // }
+
+  .el-divider--horizontal {
+    margin: 0px;
+  }
+}
+</style>
diff --git a/.history/src/components/TreeView_20231111183301.vue b/.history/src/components/TreeView_20231111183301.vue
new file mode 100644
index 0000000..3abf66a
--- /dev/null
+++ b/.history/src/components/TreeView_20231111183301.vue
@@ -0,0 +1,822 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+          @node-click="treeNodeClick" ref="tree">
+          <!-- :render-content="renderContent" -->
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <template v-if="data.editing == 1">
+              <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                @click.stop="done">完成</el-button>
+              <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                @click.stop="edit">编辑</el-button>
+              <span v-if="!flag">{{ data.label }}</span>
+              <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+            </template>
+            <template v-else>{{ data.label }}</template>
+          </span>
+        </el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+        <el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="FormData">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                <el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                <el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :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="tdpz_qdmc">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="FormData.tdpz_qdmc" 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="tdpz_ip">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">. </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip4" 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="tdpz_port">
+                <el-input v-model="FormData.tdpz_port" 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="tdpz_cssj">
+                <el-input v-model="FormData.tdpz_cssj" 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="tdpz_jgsj">
+                <el-input v-model="FormData.tdpz_jgsj" 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="tdpz_lxsj">
+                <el-input v-model="FormData.tdpz_lxsj" 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="tdpz_cfcs">
+                <el-input v-model="FormData.tdpz_cfcs" 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;
+                border: none;
+                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="FormData.tdpz_watchtime">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="FormData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="tdpz_dxzkb2" 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="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">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="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <div class="title">
+        <p class="title_l">协议选择</p>
+        <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      FormData: {
+        tdpz_tdmc: "",
+        tdpz_td: "",
+        tdpz_qdmc: "",
+        tdpz_port: "",
+        tdpz_cssj: "",
+        tdpz_jgsj: "",
+        tdpz_lxsj: "",
+        tdpz_cfcs: "",
+        tdpz_watchtime: false,
+        tdpz_cjsylxdz: true,
+        tdpz_dxzkb: "",
+        tdpz_050F: "auto",
+        tdpz_0610: "auto",
+      },
+      tdpz_dxzkb1: "1",
+      tdpz_dxzkb2: "1",
+      tdpz_ip1: "",
+      tdpz_ip2: "",
+      tdpz_ip3: "",
+      tdpz_ip4: "",
+      options1: [
+        {
+          value: "有线区Channel1",
+          label: "有线区Channel1",
+        },
+        {
+          value: "无线区Channel1",
+          label: "无线区Channel1",
+        },
+      ],
+      options2: [
+        {
+          value: "网口",
+          label: "网口",
+        },
+        {
+          value: "串口",
+          label: "串口",
+        },
+      ],
+      value1: "有线区Channel1",
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 10,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      trees: [],
+      nodekey: "",
+      datas2: [
+        {
+          label: "通用标准",
+          children: [
+            {
+              label: "ModbusTCPClient",
+            },
+            {
+              label: "ModbusRTU_over_TCP",
+            },
+            {
+              label: "OPCUAClient",
+            },
+            {
+              label: "OPCDAClient",
+            },
+            {
+              label: "MQTTClient",
+            },
+            {
+              label: "OPCXMLDAClient",
+            },
+            {
+              label: "环保212协议网口监听",
+            },
+          ],
+        },
+        {
+          label: "PLC",
+          children: [
+            {
+              label: "Slemens S7-200 Network",
+            },
+            {
+              label: "Slemens S7-300 Network",
+            },
+            {
+              label: "Slemens S7-400 Network",
+            },
+            {
+              label: "Slemens S7-1200 Network",
+            },
+            {
+              label: "Slemens S7-1500 Network",
+            },
+            {
+              label: "EtherNet/IP CIP协议(AB OMR ON)",
+            },
+            {
+              label: "MC_Qna-3E(三菱 基恩士 松下)",
+            },
+            {
+              label: "MC_A-1E_Binary",
+            },
+            {
+              label: "OMRON-FINS",
+            },
+            {
+              label: "横河PLC",
+            },
+            {
+              label: "西门子FetchWirte",
+            },
+            {
+              label: "富机 FUJI_SPH_NET",
+            },
+            {
+              label: "基恩士上位链路通讯",
+            },
+          ],
+        },
+        {
+          label: "智能建筑",
+          children: [],
+        },
+        {
+          label: "厂家定制",
+          children: [],
+        },
+        {
+          label: "电力行业标准",
+          children: [
+            {
+              label: "IEC104",
+            },
+            {
+              label: "DLT645_over_TCP",
+            },
+          ],
+        },
+        {
+          label: "CNC数控",
+          children: [],
+        },
+        {
+          label: "私有协议",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        tdpz_tdmc: [
+          { required: true, message: "请输入通道名称", trigger: "change" },
+        ],
+        tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+        tdpz_qdmc: [
+          { required: true, message: "请输入驱动名称", trigger: "change" },
+        ],
+        tdpz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIpAddress,
+          trigger: "blur"
+        }],
+        tdpz_port: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        tdpz_cssj: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        tdpz_jgsj: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        tdpz_lxsj: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        tdpz_cfcs: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (
+        this.tdpz_ip1 +
+        "." +
+        this.tdpz_ip2 +
+        "." +
+        this.tdpz_ip3 +
+        "." +
+        this.tdpz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["FormData"].validate((valid) => {
+        if (valid) {
+          this.saveGate();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.level == 3) {
+        this.nodekey = data.id;
+        // if (data.id == 111 || data.label == "I/O点") {
+        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;
+      }
+      this.menuShow = false;
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick(key) {
+      // console.log
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    async saveGate() {
+      this.add_passage = false;
+      var obj = {
+        tdpz_tdmc: this.FormData.tdpz_tdmc,
+        tdpz_td: this.FormData.tdpz_td,
+        tdpz_qdmc: this.FormData.tdpz_qdmc,
+        tdpz_port: this.FormData.tdpz_port,
+        tdpz_cssj: this.FormData.tdpz_cssj,
+        tdpz_jgsj: this.FormData.tdpz_jgsj,
+        tdpz_ip:
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4,
+        tdpz_lxsj: this.FormData.tdpz_lxsj,
+        tdpz_cfcs: this.FormData.tdpz_cfcs,
+        tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
+        tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
+        tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+        tdpz_050F: this.FormData.tdpz_050F,
+        tdpz_0610: this.FormData.tdpz_0610,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        // user_id: "USER202307301114011710",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step: "2",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+        console.log(res);
+        // console.log(res.data.data.mark_value);
+        // this.$nextTick(() => {
+        this.$refs["tree"].append(
+          {
+            id: this.nodekey + 1000,
+            label: this.FormData.tdpz_tdmc,
+          },
+          this.nodekey
+        );
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+    },
+    handleDetailClick(data, node, value) {
+      console.log(data.label);
+      console.log(data);
+      if (node.level == 2) {
+        this.FormData.tdpz_qdmc = data.label;
+        this.diag_drive = false;
+        console.log(result);
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+      });
+      console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        // this.FormData.
+        if (obj.tdpz_dxzkb) {
+          this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+          this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+        }
+        this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+        if (obj.tdpz_cjsylxdz) {
+          this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+        }
+        if (obj.tdpz_ip) {
+          this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
+          this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
+          this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
+          this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
+        }
+        if (obj.tdpz_tdmc) {
+          this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
+        }
+        if (obj.tdpz_td) {
+          this.FormData.tdpz_td = obj.tdpz_td;
+        }
+        this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
+        if (obj.tdpz_050F) {
+          this.FormData.tdpz_050F = obj.tdpz_050F;
+        }
+        if (obj.tdpz_0610) {
+          this.FormData.tdpz_0610 = obj.tdpz_0610;
+        }
+        this.FormData.tdpz_port = obj.tdpz_port;
+        this.FormData.tdpz_cssj = obj.tdpz_cssj;
+        this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
+        this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
+        this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      console.log(result);
+    },
+  },
+  created() {
+    console.log(this.$route.query.user_id);
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "1",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    });
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    "FormData.tdpz_watchtime"(newval) {
+      console.log(newval);
+      if (newval) {
+        this.isdisabled = true;
+      } else {
+        this.isdisabled = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  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;
+  color: #fff !important;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 38px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      color: #fff !important;
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 6px;
+      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 {
+    color: #fff !important;
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.el-dialog__footer {
+  padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 45px;
+  transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+  position: absolute;
+  left: 1408px;
+  top: 140px;
+  width: 435px;
+  max-height: 720px;
+  z-index: 10000;
+  border: 1px solid #f5f5f5;
+
+  .title {
+    background-color: #fff;
+    padding: 5px 6px 5px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 103px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
+    }
+  }
+
+  // h3 {
+  //   padding-bottom: 10px;
+  //   background-color: #fff;
+  // }
+
+  .el-divider--horizontal {
+    margin: 0px;
+  }
+}
+</style>
diff --git a/.history/src/components/TreeView_20231111183328.vue b/.history/src/components/TreeView_20231111183328.vue
new file mode 100644
index 0000000..f34a810
--- /dev/null
+++ b/.history/src/components/TreeView_20231111183328.vue
@@ -0,0 +1,822 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+          @node-click="treeNodeClick" ref="tree">
+          <!-- :render-content="renderContent" -->
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <template v-if="data.editing == 1">
+              <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                @click.stop="done">完成</el-button>
+              <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                @click.stop="edit">编辑</el-button>
+              <span v-if="!flag">{{ data.label }}</span>
+              <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+            </template>
+            <template v-else>{{ data.label }}</template>
+          </span>
+        </el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+        <el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="FormData">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                <el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                <el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :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="tdpz_qdmc">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="FormData.tdpz_qdmc" 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="tdpz_ip">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">. </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip4" 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="tdpz_port">
+                <el-input v-model="FormData.tdpz_port" 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="tdpz_cssj">
+                <el-input v-model="FormData.tdpz_cssj" 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="tdpz_jgsj">
+                <el-input v-model="FormData.tdpz_jgsj" 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="tdpz_lxsj">
+                <el-input v-model="FormData.tdpz_lxsj" 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="tdpz_cfcs">
+                <el-input v-model="FormData.tdpz_cfcs" 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;
+                border: none;
+                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="FormData.tdpz_watchtime">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="FormData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="tdpz_dxzkb2" 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="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">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="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <div class="title">
+        <p class="title_l">协议选择</p>
+        <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      FormData: {
+        tdpz_tdmc: "",
+        tdpz_td: "",
+        tdpz_qdmc: "",
+        tdpz_port: "",
+        tdpz_cssj: "",
+        tdpz_jgsj: "",
+        tdpz_lxsj: "",
+        tdpz_cfcs: "",
+        tdpz_watchtime: false,
+        tdpz_cjsylxdz: true,
+        tdpz_dxzkb: "",
+        tdpz_050F: "auto",
+        tdpz_0610: "auto",
+      },
+      tdpz_dxzkb1: "1",
+      tdpz_dxzkb2: "1",
+      tdpz_ip1: "",
+      tdpz_ip2: "",
+      tdpz_ip3: "",
+      tdpz_ip4: "",
+      options1: [
+        {
+          value: "有线区Channel1",
+          label: "有线区Channel1",
+        },
+        {
+          value: "无线区Channel1",
+          label: "无线区Channel1",
+        },
+      ],
+      options2: [
+        {
+          value: "网口",
+          label: "网口",
+        },
+        {
+          value: "串口",
+          label: "串口",
+        },
+      ],
+      value1: "有线区Channel1",
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 10,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      trees: [],
+      nodekey: "",
+      datas2: [
+        {
+          label: "通用标准",
+          children: [
+            {
+              label: "ModbusTCPClient",
+            },
+            {
+              label: "ModbusRTU_over_TCP",
+            },
+            {
+              label: "OPCUAClient",
+            },
+            {
+              label: "OPCDAClient",
+            },
+            {
+              label: "MQTTClient",
+            },
+            {
+              label: "OPCXMLDAClient",
+            },
+            {
+              label: "环保212协议网口监听",
+            },
+          ],
+        },
+        {
+          label: "PLC",
+          children: [
+            {
+              label: "Slemens S7-200 Network",
+            },
+            {
+              label: "Slemens S7-300 Network",
+            },
+            {
+              label: "Slemens S7-400 Network",
+            },
+            {
+              label: "Slemens S7-1200 Network",
+            },
+            {
+              label: "Slemens S7-1500 Network",
+            },
+            {
+              label: "EtherNet/IP CIP协议(AB OMR ON)",
+            },
+            {
+              label: "MC_Qna-3E(三菱 基恩士 松下)",
+            },
+            {
+              label: "MC_A-1E_Binary",
+            },
+            {
+              label: "OMRON-FINS",
+            },
+            {
+              label: "横河PLC",
+            },
+            {
+              label: "西门子FetchWirte",
+            },
+            {
+              label: "富机 FUJI_SPH_NET",
+            },
+            {
+              label: "基恩士上位链路通讯",
+            },
+          ],
+        },
+        {
+          label: "智能建筑",
+          children: [],
+        },
+        {
+          label: "厂家定制",
+          children: [],
+        },
+        {
+          label: "电力行业标准",
+          children: [
+            {
+              label: "IEC104",
+            },
+            {
+              label: "DLT645_over_TCP",
+            },
+          ],
+        },
+        {
+          label: "CNC数控",
+          children: [],
+        },
+        {
+          label: "私有协议",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        tdpz_tdmc: [
+          { required: true, message: "请输入通道名称", trigger: "change" },
+        ],
+        tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+        tdpz_qdmc: [
+          { required: true, message: "请输入驱动名称", trigger: "change" },
+        ],
+        tdpz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIpAddress,
+          trigger: "blur"
+        }],
+        tdpz_port: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        tdpz_cssj: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        tdpz_jgsj: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        tdpz_lxsj: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        tdpz_cfcs: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (
+        this.tdpz_ip1 +
+        "." +
+        this.tdpz_ip2 +
+        "." +
+        this.tdpz_ip3 +
+        "." +
+        this.tdpz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["FormData"].validate((valid) => {
+        if (valid) {
+          this.saveGate();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.level == 3) {
+        this.nodekey = data.id;
+        // if (data.id == 111 || data.label == "I/O点") {
+        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;
+      }
+      this.menuShow = false;
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick(key) {
+      // console.log
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    async saveGate() {
+      var obj = {
+        tdpz_tdmc: this.FormData.tdpz_tdmc,
+        tdpz_td: this.FormData.tdpz_td,
+        tdpz_qdmc: this.FormData.tdpz_qdmc,
+        tdpz_port: this.FormData.tdpz_port,
+        tdpz_cssj: this.FormData.tdpz_cssj,
+        tdpz_jgsj: this.FormData.tdpz_jgsj,
+        tdpz_ip:
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4,
+        tdpz_lxsj: this.FormData.tdpz_lxsj,
+        tdpz_cfcs: this.FormData.tdpz_cfcs,
+        tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
+        tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
+        tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+        tdpz_050F: this.FormData.tdpz_050F,
+        tdpz_0610: this.FormData.tdpz_0610,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        // user_id: "USER202307301114011710",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step: "2",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+        console.log(res);
+        this.add_passage = false;
+        // console.log(res.data.data.mark_value);
+        // this.$nextTick(() => {
+        this.$refs["tree"].append(
+          {
+            id: this.nodekey + 1000,
+            label: this.FormData.tdpz_tdmc,
+          },
+          this.nodekey
+        );
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+    },
+    handleDetailClick(data, node, value) {
+      console.log(data.label);
+      console.log(data);
+      if (node.level == 2) {
+        this.FormData.tdpz_qdmc = data.label;
+        this.diag_drive = false;
+        console.log(result);
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+      });
+      console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        // this.FormData.
+        if (obj.tdpz_dxzkb) {
+          this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+          this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+        }
+        this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+        if (obj.tdpz_cjsylxdz) {
+          this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+        }
+        if (obj.tdpz_ip) {
+          this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
+          this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
+          this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
+          this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
+        }
+        if (obj.tdpz_tdmc) {
+          this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
+        }
+        if (obj.tdpz_td) {
+          this.FormData.tdpz_td = obj.tdpz_td;
+        }
+        this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
+        if (obj.tdpz_050F) {
+          this.FormData.tdpz_050F = obj.tdpz_050F;
+        }
+        if (obj.tdpz_0610) {
+          this.FormData.tdpz_0610 = obj.tdpz_0610;
+        }
+        this.FormData.tdpz_port = obj.tdpz_port;
+        this.FormData.tdpz_cssj = obj.tdpz_cssj;
+        this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
+        this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
+        this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      console.log(result);
+    },
+  },
+  created() {
+    console.log(this.$route.query.user_id);
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "1",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    });
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    "FormData.tdpz_watchtime"(newval) {
+      console.log(newval);
+      if (newval) {
+        this.isdisabled = true;
+      } else {
+        this.isdisabled = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  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;
+  color: #fff !important;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 38px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      color: #fff !important;
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 6px;
+      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 {
+    color: #fff !important;
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.el-dialog__footer {
+  padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 45px;
+  transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+  position: absolute;
+  left: 1408px;
+  top: 140px;
+  width: 435px;
+  max-height: 720px;
+  z-index: 10000;
+  border: 1px solid #f5f5f5;
+
+  .title {
+    background-color: #fff;
+    padding: 5px 6px 5px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 103px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
+    }
+  }
+
+  // h3 {
+  //   padding-bottom: 10px;
+  //   background-color: #fff;
+  // }
+
+  .el-divider--horizontal {
+    margin: 0px;
+  }
+}
+</style>
diff --git a/.history/src/components/TreeView_20231111184416.vue b/.history/src/components/TreeView_20231111184416.vue
new file mode 100644
index 0000000..f34a810
--- /dev/null
+++ b/.history/src/components/TreeView_20231111184416.vue
@@ -0,0 +1,822 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" node-key="id" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+          @node-click="treeNodeClick" ref="tree">
+          <!-- :render-content="renderContent" -->
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <template v-if="data.editing == 1">
+              <el-button type="mini" v-if="flag" style="right: 50px; top: 0; position: absolute; border: none"
+                @click.stop="done">完成</el-button>
+              <el-button type="mini" style="right: 0; top: 0; position: absolute; border: none"
+                @click.stop="edit">编辑</el-button>
+              <span v-if="!flag">{{ data.label }}</span>
+              <el-input v-else style="width: 150px" v-model="gateway"></el-input>
+            </template>
+            <template v-else>{{ data.label }}</template>
+          </span>
+        </el-tree>
+        <!-- 树形控件右键组件 -->
+        <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+          <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+            <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+              <span slot="title">新建通道</span>
+            </el-menu-item>
+            <el-menu-item index="2" style="font-size: 12px">
+              <span slot="title">取 消</span>
+            </el-menu-item>
+          </el-menu>
+        </div>
+      </div>
+    </div>
+    <div class="pas_params">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+        <el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="FormData">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
+                <el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
+                <el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
+                  <el-option v-for="(item, index) in options2" :key="index" :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="tdpz_qdmc">
+                <el-row>
+                  <el-col :span="18">
+                    <el-input v-model="FormData.tdpz_qdmc" 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="tdpz_ip">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">. </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
+                  </el-col>
+                  <el-col :span="1" style="color: #fff">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="tdpz_ip4" 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="tdpz_port">
+                <el-input v-model="FormData.tdpz_port" 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="tdpz_cssj">
+                <el-input v-model="FormData.tdpz_cssj" 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="tdpz_jgsj">
+                <el-input v-model="FormData.tdpz_jgsj" 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="tdpz_lxsj">
+                <el-input v-model="FormData.tdpz_lxsj" 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="tdpz_cfcs">
+                <el-input v-model="FormData.tdpz_cfcs" 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;
+                border: none;
+                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="FormData.tdpz_watchtime">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="FormData.tdpz_cjsylxdz">采集使用连续地址</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="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
+                    </el-col>
+                    <el-col :span="4">: </el-col>
+                    <el-col :span="10">
+                      <el-input v-model="tdpz_dxzkb2" 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="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">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="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
+                    <el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    <div class="drvieName_All" v-show="diag_drive">
+      <div class="title">
+        <p class="title_l">协议选择</p>
+        <i class="el-icon-close title_r" @click="diag_drive = false"></i>
+      </div>
+      <el-divider></el-divider>
+      <el-tree :data="datas2" :props="defaultProps" @node-click="handleDetailClick" default-expand-all></el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: "",
+      user_id: "",
+      FormData: {
+        tdpz_tdmc: "",
+        tdpz_td: "",
+        tdpz_qdmc: "",
+        tdpz_port: "",
+        tdpz_cssj: "",
+        tdpz_jgsj: "",
+        tdpz_lxsj: "",
+        tdpz_cfcs: "",
+        tdpz_watchtime: false,
+        tdpz_cjsylxdz: true,
+        tdpz_dxzkb: "",
+        tdpz_050F: "auto",
+        tdpz_0610: "auto",
+      },
+      tdpz_dxzkb1: "1",
+      tdpz_dxzkb2: "1",
+      tdpz_ip1: "",
+      tdpz_ip2: "",
+      tdpz_ip3: "",
+      tdpz_ip4: "",
+      options1: [
+        {
+          value: "有线区Channel1",
+          label: "有线区Channel1",
+        },
+        {
+          value: "无线区Channel1",
+          label: "无线区Channel1",
+        },
+      ],
+      options2: [
+        {
+          value: "网口",
+          label: "网口",
+        },
+        {
+          value: "串口",
+          label: "串口",
+        },
+      ],
+      value1: "有线区Channel1",
+      value2: "网口",
+      diag_drive: false,
+      isdisabled: true,
+      radio: "1",
+      is_retract: true,
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      input1: 10,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      trees: [],
+      nodekey: "",
+      datas2: [
+        {
+          label: "通用标准",
+          children: [
+            {
+              label: "ModbusTCPClient",
+            },
+            {
+              label: "ModbusRTU_over_TCP",
+            },
+            {
+              label: "OPCUAClient",
+            },
+            {
+              label: "OPCDAClient",
+            },
+            {
+              label: "MQTTClient",
+            },
+            {
+              label: "OPCXMLDAClient",
+            },
+            {
+              label: "环保212协议网口监听",
+            },
+          ],
+        },
+        {
+          label: "PLC",
+          children: [
+            {
+              label: "Slemens S7-200 Network",
+            },
+            {
+              label: "Slemens S7-300 Network",
+            },
+            {
+              label: "Slemens S7-400 Network",
+            },
+            {
+              label: "Slemens S7-1200 Network",
+            },
+            {
+              label: "Slemens S7-1500 Network",
+            },
+            {
+              label: "EtherNet/IP CIP协议(AB OMR ON)",
+            },
+            {
+              label: "MC_Qna-3E(三菱 基恩士 松下)",
+            },
+            {
+              label: "MC_A-1E_Binary",
+            },
+            {
+              label: "OMRON-FINS",
+            },
+            {
+              label: "横河PLC",
+            },
+            {
+              label: "西门子FetchWirte",
+            },
+            {
+              label: "富机 FUJI_SPH_NET",
+            },
+            {
+              label: "基恩士上位链路通讯",
+            },
+          ],
+        },
+        {
+          label: "智能建筑",
+          children: [],
+        },
+        {
+          label: "厂家定制",
+          children: [],
+        },
+        {
+          label: "电力行业标准",
+          children: [
+            {
+              label: "IEC104",
+            },
+            {
+              label: "DLT645_over_TCP",
+            },
+          ],
+        },
+        {
+          label: "CNC数控",
+          children: [],
+        },
+        {
+          label: "私有协议",
+          children: [],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      rules: {
+        tdpz_tdmc: [
+          { required: true, message: "请输入通道名称", trigger: "change" },
+        ],
+        tdpz_td: [{ required: true, message: "请输入通道", trigger: "change" }],
+        tdpz_qdmc: [
+          { required: true, message: "请输入驱动名称", trigger: "change" },
+        ],
+        tdpz_ip: [{
+          required: true,
+          message: "",
+          validator: this.validateIpAddress,
+          trigger: "blur"
+        }],
+        tdpz_port: [
+          { required: true, message: "请输入端口号", trigger: "blur" },
+        ],
+        tdpz_cssj: [
+          { required: true, message: "请输入超出时间", trigger: "blur" },
+        ],
+        tdpz_jgsj: [
+          { required: true, message: "请输入间隔时间", trigger: "blur" },
+        ],
+        tdpz_lxsj: [
+          { required: true, message: "请输入轮询时间", trigger: "blur" },
+        ],
+        tdpz_cfcs: [
+          { required: true, message: "请输入重复次数", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (
+        this.tdpz_ip1 +
+        "." +
+        this.tdpz_ip2 +
+        "." +
+        this.tdpz_ip3 +
+        "." +
+        this.tdpz_ip4 ===
+        "..."
+      ) {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    // 提交时的校验
+    submitForm() {
+      this.$refs["FormData"].validate((valid) => {
+        if (valid) {
+          this.saveGate();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.level == 3) {
+        this.nodekey = data.id;
+        // if (data.id == 111 || data.label == "I/O点") {
+        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;
+      }
+      this.menuShow = false;
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick(key) {
+      // console.log
+      this.foo();
+    },
+    // 收起点击事件的判断
+    getRetract() {
+      if (this.is_retract == true) {
+        this.is_retract = false;
+      } else {
+        this.is_retract = true;
+      }
+    },
+    getDriveName() {
+      this.diag_drive = true;
+    },
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    async saveGate() {
+      var obj = {
+        tdpz_tdmc: this.FormData.tdpz_tdmc,
+        tdpz_td: this.FormData.tdpz_td,
+        tdpz_qdmc: this.FormData.tdpz_qdmc,
+        tdpz_port: this.FormData.tdpz_port,
+        tdpz_cssj: this.FormData.tdpz_cssj,
+        tdpz_jgsj: this.FormData.tdpz_jgsj,
+        tdpz_ip:
+          this.tdpz_ip1 +
+          "." +
+          this.tdpz_ip2 +
+          "." +
+          this.tdpz_ip3 +
+          "." +
+          this.tdpz_ip4,
+        tdpz_lxsj: this.FormData.tdpz_lxsj,
+        tdpz_cfcs: this.FormData.tdpz_cfcs,
+        tdpz_watchtime: String(Number(this.FormData.tdpz_watchtime)),
+        tdpz_cjsylxdz: String(Number(this.FormData.tdpz_cjsylxdz)),
+        tdpz_dxzkb: this.tdpz_dxzkb1 + ":" + this.tdpz_dxzkb2,
+        tdpz_050F: this.FormData.tdpz_050F,
+        tdpz_0610: this.FormData.tdpz_0610,
+      };
+      let datas = sessionStorage.getItem("DB-IotLite_yx");
+      datas = { ...JSON.parse(datas), ...obj };
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        // user_id: "USER202307301114011710",
+        user_id: this.user_id,
+        mark_value: JSON.stringify(datas),
+        step: "2",
+      });
+      if (res.data.state) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+        console.log(res);
+        this.add_passage = false;
+        // console.log(res.data.data.mark_value);
+        // this.$nextTick(() => {
+        this.$refs["tree"].append(
+          {
+            id: this.nodekey + 1000,
+            label: this.FormData.tdpz_tdmc,
+          },
+          this.nodekey
+        );
+        // console.log(this.trees);
+        this.sendTree();
+        this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`);
+      } else {
+        this.$message({
+          message: `保存失败`,
+          type: "error",
+        });
+      }
+    },
+    handleDetailClick(data, node, value) {
+      console.log(data.label);
+      console.log(data);
+      if (node.level == 2) {
+        this.FormData.tdpz_qdmc = data.label;
+        this.diag_drive = false;
+        console.log(result);
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: this.user_id,
+        // user_id: "USER202307301114011710",
+      });
+      console.log(answer);
+      if (answer.data.data && answer.data.state) {
+        let obj = JSON.parse(answer.data.data.mark_value);
+        console.log(obj);
+        // this.FormData.
+        if (obj.tdpz_dxzkb) {
+          this.tdpz_dxzkb1 = obj.tdpz_dxzkb.split(":")[0];
+          this.tdpz_dxzkb2 = obj.tdpz_dxzkb.split(":")[1];
+        }
+        this.FormData.tdpz_watchtime = Boolean(Number(obj.tdpz_watchtime));
+        if (obj.tdpz_cjsylxdz) {
+          this.FormData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+        }
+        if (obj.tdpz_ip) {
+          this.tdpz_ip1 = obj.tdpz_ip.split(".")[0];
+          this.tdpz_ip2 = obj.tdpz_ip.split(".")[1];
+          this.tdpz_ip3 = obj.tdpz_ip.split(".")[2];
+          this.tdpz_ip4 = obj.tdpz_ip.split(".")[3];
+        }
+        if (obj.tdpz_tdmc) {
+          this.FormData.tdpz_tdmc = obj.tdpz_tdmc;
+        }
+        if (obj.tdpz_td) {
+          this.FormData.tdpz_td = obj.tdpz_td;
+        }
+        this.FormData.tdpz_qdmc = obj.tdpz_qdmc;
+        if (obj.tdpz_050F) {
+          this.FormData.tdpz_050F = obj.tdpz_050F;
+        }
+        if (obj.tdpz_0610) {
+          this.FormData.tdpz_0610 = obj.tdpz_0610;
+        }
+        this.FormData.tdpz_port = obj.tdpz_port;
+        this.FormData.tdpz_cssj = obj.tdpz_cssj;
+        this.FormData.tdpz_jgsj = obj.tdpz_jgsj;
+        this.FormData.tdpz_lxsj = obj.tdpz_lxsj;
+        this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: this.user_id,
+        data: JSON.stringify(this.trees),
+        type: "1",
+      });
+      console.log(result);
+    },
+  },
+  created() {
+    console.log(this.$route.query.user_id);
+    this.user_id = this.$route.query.user_id;
+    GetTree({
+      user_id: this.user_id,
+      type: "1",
+    }).then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+      this.trees = JSON.parse(res.data.data.data);
+    });
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    "FormData.tdpz_watchtime"(newval) {
+      console.log(newval);
+      if (newval) {
+        this.isdisabled = true;
+      } else {
+        this.isdisabled = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  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;
+  color: #fff !important;
+  justify-content: space-between;
+  align-items: center;
+  width: 668px;
+
+  i {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+  }
+}
+
+/deep/ .pas_params {
+  .el-col-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 38px;
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      color: #fff !important;
+      text-align: center;
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .el-col-6 {
+      height: 40px;
+      top: 6px;
+      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 {
+    color: #fff !important;
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-4 {
+      padding-left: 5px;
+      width: 14px;
+      text-align: center;
+      line-height: 4px;
+      height: 20px;
+    }
+  }
+}
+
+.el-dialog__footer {
+  padding: 18px 1.25rem 50px;
+}
+
+.dialog-footer {
+  position: absolute;
+  left: 50%;
+  bottom: 45px;
+  transform: translateX(-50%);
+}
+
+/deep/ .drvieName_All {
+  position: absolute;
+  left: 1408px;
+  top: 140px;
+  width: 435px;
+  max-height: 720px;
+  z-index: 10000;
+  border: 1px solid #f5f5f5;
+
+  .title {
+    background-color: #fff;
+    padding: 5px 6px 5px 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title_l {
+      width: 103px;
+      height: 26px;
+      color: rgba(16, 16, 16, 1);
+      font-size: 18px;
+      text-align: left;
+    }
+
+    .title_r {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      cursor: pointer;
+      color: rgba(111, 103, 103, 1);
+    }
+  }
+
+  // h3 {
+  //   padding-bottom: 10px;
+  //   background-color: #fff;
+  // }
+
+  .el-divider--horizontal {
+    margin: 0px;
+  }
+}
+</style>
diff --git a/.history/src/router/index_20231111181600.js b/.history/src/router/index_20231111181600.js
new file mode 100644
index 0000000..0d11bec
--- /dev/null
+++ b/.history/src/router/index_20231111181600.js
@@ -0,0 +1,230 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    component: () => import("../views/Index.vue"),
+  },
+  {
+    path: "/cockpit",
+    name: "cockpit",
+    component: () => import("../views/Cockpit.vue"),
+  },
+  {
+    path: "/datacollect",
+    name: "datacollect",
+    component: () => import("../views/DataCollect.vue"),
+  },
+
+  // 刘龙龙新加的全部路由
+  //db网关-ip配置-无线网关
+  {
+    path: "/wirelessgatewayip",
+    name: "wirelessgatewayip",
+    component: () => import("../views/WirelessGatewayIP.vue"),
+  },
+  //db网关-ip配置-有线网关
+  {
+    path: "/wiredgatewayip",
+    name: "wiredgatewayip",
+    component: () => import("../views/WiredGatewayIP.vue"),
+  },
+  //db网关-数据采集配置-有线网关配置
+  {
+    path: "/dbcollectiongate",
+    name: "dbcollectiongate",
+    component: () => import("../views/DbCollectiongate.vue"),
+  },
+  //db网关-数据采集配置-无线网关配置
+  {
+    path: "/dbcollectionwifi",
+    name: "dbcollectionwifi",
+    component: () => import("../views/DbCollectionwifi.vue"),
+  },
+  // db网关-数据采集配置-网口配置
+  {
+    path: "/channelconfig",
+    name: "channelconfig",
+    component: () => import("../views/ChannelConfig.vue"),
+  },
+  // db网关-数据采集配置-串口配置
+  {
+    path: "/dbcollectserial",
+    name: "dbcollectserial",
+    component: () => import("../views/DbCollectserial.vue"),
+  },
+  // db网关-数据采集配置-网口设备配置
+  {
+    path: "/dbcollectdevice",
+    name: "dbcollectdevice",
+    component: () => import("../views/DbCollectdevice.vue"),
+  },
+  // db网关-数据采集配置-串口设备配置
+  {
+    path: "/dbserialdevice",
+    name: "dbserialdevice",
+    component: () => import("../views/DbSerialdevice.vue"),
+  },
+  // db网关-有线-数据采集配置-采集点配置
+  {
+    path: "/dbcollect",
+    name: "dbcollect",
+    component: () => import("../views/DbCollection.vue"),
+  },
+  // db网关-无线-数据采集配置-采集点配置
+  {
+    path: "/dbwificollect",
+    name: "dbWificollect",
+    component: () => import("../views/DbWificollect.vue"),
+  },
+  //db网关-有线-MQTT上云-MQTT1配置
+  {
+    path: "/mqttconfig",
+    name: "mqttconfig",
+    component: () => import("../views/MqttConfig.vue"),
+  },
+  // db网关-无线-MQTT上云-MQTT1配置
+  {
+    path: "/mqttconfigwifi",
+    name: "mqttconfigwifi",
+    component: () => import("../views/MqttConfigwifi.vue"),
+  },
+  //斥候工业网关-ip配置-无线网关
+  {
+    path: "/chwirelessgatewayip",
+    name: "chwirelessgatewayip",
+    component: () => import("../views/ChWirelessGatewayIP.vue"),
+  },
+  //斥候工业网关-ip配置-有线网关
+  {
+    path: "/chwiredgatewayip",
+    name: "chwiredgatewayip",
+    component: () => import("../views/ChWiredGatewayIP.vue"),
+  },
+  //斥候工业网关-数据采集配置-无线网关配置
+  {
+    path: "/chiwifigate",
+    name: "chiwifigate",
+    component: () => import("../views/ChWifigate.vue"),
+  },
+
+  //斥候工业网关-数据采集配置-有线网关配置
+  {
+    path: "/gatewayconfiguration",
+    name: "gatewayconfiguration",
+    component: () => import("../views/GatewayConfiguration.vue"),
+  },
+  //斥候无线工业网关-数据采集配置-设备配置
+  {
+    path: "/chiwifidevice",
+    name: "chiwifidevice",
+    component: () => import("../views/ChiWifidevice.vue"),
+  },
+  //斥候有线工业网关-数据采集配置-设备配置
+  {
+    path: "/configuration",
+    name: "configuration",
+    component: () => import("../views/Configuration.vue"),
+  },
+  // ChiWificollect
+  //斥候工业无线网关-数据采集配置-采集点配置
+  {
+    path: "/chiwificollect",
+    name: "chiwificollect",
+    component: () => import("../views/ChiWificollect.vue"),
+  },
+  //斥候工业有线网关-数据采集配置-采集点配置
+  {
+    path: "/collectionpoint",
+    name: "collectionpoint",
+    component: () => import("../views/CollectionPoint.vue"),
+  },
+  //斥候无线工业网关-数据上云配置-MQTT上云
+  {
+    path: "/chiwifimqtt",
+    name: "chiwifimqtt",
+    component: () => import("../views/ChiWifimqtt.vue"),
+  },
+  //斥候有线工业网关-数据上云配置-MQTT上云
+  {
+    path: "/chmqtt",
+    name: "chmqtt",
+    component: () => import("../views/ChMqtt.vue"),
+  },
+  //串口服务器-Ip配置
+  {
+    path: "/ckipconfig",
+    name: "ckipconfig",
+    component: () => import("../views/CkIpConfig.vue"),
+  },
+  //串口服务器-端口配置
+  {
+    path: "/ckportconfig",
+    name: "ckportconfig",
+    component: () => import("../views/CkPortConfig.vue"),
+  },
+  //串口服务器-485towifi-串口及网络协议设置
+  {
+    path: "/towifi",
+    name: "towifi",
+    component: () => import("../views/ToWifi.vue"),
+  },
+  //串口服务器-485towifi-网口配置
+  {
+    path: "/cknet",
+    name: "cknet",
+    component: () => import("../views/CkNet.vue"),
+  },
+  //串口服务器-485towifi-无线配置
+  {
+    path: "/ckwireless",
+    name: "ckwireless",
+    component: () => import("../views/CkWireless.vue"),
+  },
+  //工业网闸配置-网络管理
+  {
+    path: "/networkmanagement",
+    name: "networkmanagement",
+    component: () => import("../views/NetworkManagement.vue"),
+  },
+  //工业网闸配置-对象管理
+  {
+    path: "/objmanagement",
+    name: "objmanagement",
+    component: () => import("../views/ObjManagement.vue"),
+  },
+  //工业网闸配置-策略管理
+  {
+    path: "/strategyManagement",
+    name: "strategyManagement",
+    component: () => import("../views/StrategyManagement.vue"),
+  },
+  //工业网闸配置-策略管理-添加策略
+  {
+    path: "/addstrategy",
+    name: "addstrategy",
+    component: () => import("../views/AddStrategy.vue"),
+  },
+  //网络优化-网关配置
+  {
+    path: "/ntconfig",
+    name: "ntconfig",
+    component: () => import("../views/NtConfig.vue"),
+  },
+  //网络优化-网关维护
+  {
+    path: "/ntmaintenance",
+    name: "ntmaintenance",
+    component: () => import("../views/NtMaintenance.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/src/components/ChiClone.vue b/src/components/ChiClone.vue
index 985b6f6..6e27b03 100644
--- a/src/components/ChiClone.vue
+++ b/src/components/ChiClone.vue
@@ -144,7 +144,7 @@
                           </el-row> -->
             <div class="con_left_footer">
               <el-button type="primary" @click="submitForm">保 存</el-button>
-              <el-button @click="add_passage = false">取 消</el-button>
+              <el-button @click="add_passage = true">取 消</el-button>
             </div>
           </el-form>
         </div>
@@ -499,6 +499,7 @@ export default {
     };
   },
   created() {
+    this.user_id = window.location.href.split("?")[1];
     GetTree({
       user_id: this.user_id,
       type: "3",
@@ -507,8 +508,6 @@ export default {
       console.log(JSON.parse(res.data.data.data));
       this.trees = JSON.parse(res.data.data.data);
     })
-    let that = this;
-    window.getParameter = that.getParameter;
   },
   methods: {
     //ip地址验证
@@ -643,7 +642,7 @@ export default {
         sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
diff --git a/src/components/ChiClonewifi.vue b/src/components/ChiClonewifi.vue
index ca06a95..4f94f1d 100644
--- a/src/components/ChiClonewifi.vue
+++ b/src/components/ChiClonewifi.vue
@@ -496,6 +496,7 @@ export default {
     };
   },
   created() {
+    this.user_id = window.location.href.split("?")[1];
     GetTree({
       user_id: this.user_id,
       type: "4",
@@ -504,8 +505,6 @@ export default {
       console.log(JSON.parse(res.data.data.data));
       this.trees = JSON.parse(res.data.data.data);
     })
-    let that = this;
-    window.getParameter = that.getParameter;
   },
   methods: {
     //ip地址验证
@@ -640,7 +639,7 @@ export default {
         });
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
diff --git a/src/components/ChiCollection.vue b/src/components/ChiCollection.vue
index 8eae0d2..e59dcb0 100644
--- a/src/components/ChiCollection.vue
+++ b/src/components/ChiCollection.vue
@@ -587,7 +587,7 @@ export default {
       sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
diff --git a/src/components/ChiCollectionwifi.vue b/src/components/ChiCollectionwifi.vue
index 50b6f26..29e07cd 100644
--- a/src/components/ChiCollectionwifi.vue
+++ b/src/components/ChiCollectionwifi.vue
@@ -585,7 +585,7 @@ export default {
       sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
       }else{
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
diff --git a/src/components/ChiDevice.vue b/src/components/ChiDevice.vue
index e736a28..2365932 100644
--- a/src/components/ChiDevice.vue
+++ b/src/components/ChiDevice.vue
@@ -567,7 +567,7 @@ export default {
                 this.$router.push(`/collectionpoint?user_id=${this.user_id}`)
             } else {
                 this.$message({
-                    message: `保存失败,原因是${res.data.message}`,
+                    message: `保存失败`,
                     type: "error",
                 });
             }
diff --git a/src/components/ChiDevicewifi.vue b/src/components/ChiDevicewifi.vue
index ebe994c..fe86ffd 100644
--- a/src/components/ChiDevicewifi.vue
+++ b/src/components/ChiDevicewifi.vue
@@ -554,7 +554,7 @@ export default {
                 this.$router.push(`/chiwificollect?user_id=${this.user_id}`)
             } else {
                 this.$message({
-                    message: `保存失败,原因是${res.data.message}`,
+                    message: `保存失败`,
                     type: "error",
                 });
             }
diff --git a/src/components/ChiGate.vue b/src/components/ChiGate.vue
index ed0fc69..af81527 100644
--- a/src/components/ChiGate.vue
+++ b/src/components/ChiGate.vue
@@ -127,8 +127,7 @@ export default {
     };
   },
   created() {
-    let that = this;
-    window.getParameter = that.getParameter;
+    this.user_id = window.location.href.split("?")[1];
   },
   methods: {
     // 登陆时进行校验
diff --git a/src/components/ChiGateway.vue b/src/components/ChiGateway.vue
index a40a2be..cb5b7e5 100644
--- a/src/components/ChiGateway.vue
+++ b/src/components/ChiGateway.vue
@@ -99,9 +99,8 @@ export default {
   },
 
   mounted() {
+    this.user_id = window.location.href.split("?")[1];
     this.GetUserAnswer();
-    let that = this;
-    window.getParameter = that.getParameter;
   },
   methods: {
     // 登陆时进行校验
diff --git a/src/components/ChiGatewifi.vue b/src/components/ChiGatewifi.vue
index dd905d0..af92197 100644
--- a/src/components/ChiGatewifi.vue
+++ b/src/components/ChiGatewifi.vue
@@ -101,8 +101,7 @@ export default {
     };
   },
   created() {
-    let that = this;
-    window.getParameter = that.getParameter;
+    this.user_id = window.location.href.split("?")[1];
   },
   methods: {
     // 登陆时进行校验
@@ -127,7 +126,7 @@ export default {
         mark: "CHGYWG_wx",
         user_id: this.user_id,
         mark_value: JSON.stringify(this.formData),
-        step:"1",
+        step: "1",
       });
       if (res.data.state) {
         this.$message({
diff --git a/src/components/ChiWireld.vue b/src/components/ChiWireld.vue
index 3404fea..318d0dd 100644
--- a/src/components/ChiWireld.vue
+++ b/src/components/ChiWireld.vue
@@ -213,9 +213,8 @@ export default {
     };
   },
   created() {
+    this.user_id = window.location.href.split("?")[1];
     this.GetUserAnswer();
-    let that = this;
-    window.getParameter = that.getParameter;
   },
   mounted() { },
 
@@ -413,7 +412,7 @@ export default {
       sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
       }else{
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
diff --git a/src/components/CloneView.vue b/src/components/CloneView.vue
index 08f8b1b..47d2db6 100644
--- a/src/components/CloneView.vue
+++ b/src/components/CloneView.vue
@@ -627,7 +627,7 @@ export default {
         sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
@@ -685,36 +685,9 @@ export default {
       this.trees = JSON.parse(res.data.data.data);
     },
   },
-  directives: {
-    "click-outside": {
-      bind: function (el, binding, vnode) {
-        console.log("el", el);
-        console.log("binding", binding);
-        el.event = function (event) {
-          // 检查点击是否发生在节点之内（包括子节点）
-          if (!(el == event.target || el.contains(event.target))) {
-            // 如果没有，则触发调用
-            // 若绑定值为函数，则执行
-            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
-            if (typeof vnode.context[binding.expression] == "function") {
-              vnode.context[binding.expression](event);
-            }
-          }
-        };
-        // 绑定事件
-        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
-        document.body.addEventListener("click", el.event, true);
-      },
-      unbind: function (el) {
-        // 解绑事件
-        document.body.removeEventListener("click", el.event, true);
-      },
-    },
-  },
   created() {
+    this.user_id = window.location.href.split("?")[1];
     this.getTree();
-    let that = this;
-    window.getParameter = that.getParameter;
     this.loading = true;
     this.GetUserAnswer();
     this.loading = false;
diff --git a/src/components/CloneWifi.vue b/src/components/CloneWifi.vue
index 2aa6618..4c831a0 100644
--- a/src/components/CloneWifi.vue
+++ b/src/components/CloneWifi.vue
@@ -627,7 +627,7 @@ export default {
         });
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
@@ -712,9 +712,8 @@ export default {
     },
   },
   created() {
+    this.user_id = window.location.href.split("?")[1];
     this.getTree();
-    let that = this;
-    window.getParameter = that.getParameter;
     this.loading = true;
     this.GetUserAnswer();
     this.loading = false;
diff --git a/src/components/CollectionView.vue b/src/components/CollectionView.vue
index 9d6adf8..97a182b 100644
--- a/src/components/CollectionView.vue
+++ b/src/components/CollectionView.vue
@@ -633,6 +633,7 @@ export default {
                     mark: "DB-IotLite_wx",
                     user_id: this.user_id,
                 })
+                this.add_passage = false;
                 console.log(answer);
                 let obj = JSON.parse(answer.data.data.mark_value);
                 console.log(obj);
@@ -643,9 +644,9 @@ export default {
                     this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
                     this.formdata.sbpz_mac = obj.sbpz_mac;
                 }
-                this.findNodeById(this.trees,this.nodekey);
-                this.updateLabelById(this.nodekey,this.formdata.sbpz_sbmc);
-                this.add_passage = false;
+                this.findNodeById(this.trees, this.nodekey);
+                this.updateLabelById(this.nodekey, this.formdata.sbpz_sbmc);
+
             } else if (index == 2) {
                 this.$refs["tree"].remove(this.nodekey);
                 this.sendTree();
@@ -690,7 +691,7 @@ export default {
                 console.log(this.tableData);
             } else {
                 this.$message({
-                    message: `保存失败,原因是${res.data.message}`,
+                    message: `保存失败`,
                     type: "error",
                 });
             }
@@ -742,7 +743,7 @@ export default {
                 sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
             }
             datas = { ...JSON.parse(datas), ...obj };
-            // this.add_passage = false;
+            this.add_passage = false;
             let res4 = await SaveUserAnswer({
                 mark: "DB-IotLite_yx",
                 user_id: this.user_id,
diff --git a/src/components/CollectionWifi.vue b/src/components/CollectionWifi.vue
index 77dc4b3..db3af70 100644
--- a/src/components/CollectionWifi.vue
+++ b/src/components/CollectionWifi.vue
@@ -684,7 +684,7 @@ export default {
                 console.log(this.tableData);
             } else {
                 this.$message({
-                    message: `保存失败,原因是${res.data.message}`,
+                    message: `保存失败`,
                     type: "error",
                 });
             }
diff --git a/src/components/DataAcquire.vue b/src/components/DataAcquire.vue
index f03e322..91089f6 100644
--- a/src/components/DataAcquire.vue
+++ b/src/components/DataAcquire.vue
@@ -189,8 +189,7 @@ export default {
     },
   },
   created() {
-    let that = this;
-    window.getParameter = that.getParameter;
+    this.user_id = window.location.href.split("?")[1];
     this.getUserAnswer();
   },
 };
diff --git a/src/components/DataAcquisition.vue b/src/components/DataAcquisition.vue
index dbc3c73..3d97a9f 100644
--- a/src/components/DataAcquisition.vue
+++ b/src/components/DataAcquisition.vue
@@ -194,8 +194,7 @@ export default {
     },
   },
   created() {
-    let that = this;
-    window.getParameter = that.getParameter;
+    this.user_id = window.location.href.split("?")[1];
     this.getUserAnswer();
   },
 };
diff --git a/src/components/DataView.vue b/src/components/DataView.vue
index 79db140..80f47be 100644
--- a/src/components/DataView.vue
+++ b/src/components/DataView.vue
@@ -631,7 +631,7 @@ export default {
         });
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
@@ -686,8 +686,7 @@ export default {
     }
   },
   created() {
-    let that = this
-    window.getParameter = that.getParameter
+    this.user_id = window.location.href.split("?")[1];
     this.GetUserAnswer();
   },
   mounted() { },
diff --git a/src/components/DeviceVIew.vue b/src/components/DeviceVIew.vue
index 6904150..a90c16d 100644
--- a/src/components/DeviceVIew.vue
+++ b/src/components/DeviceVIew.vue
@@ -317,7 +317,7 @@ export default {
         this.$router.push(`/dbcollect?user_id=${this.user_id}`);
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
@@ -364,32 +364,6 @@ export default {
     this.GetUserAnswer();
     this.loading = false;
   },
-  directives: {
-    "click-outside": {
-      bind: function (el, binding, vnode) {
-        console.log("el", el);
-        console.log("binding", binding);
-        el.event = function (event) {
-          // 检查点击是否发生在节点之内（包括子节点）
-          if (!(el == event.target || el.contains(event.target))) {
-            // 如果没有，则触发调用
-            // 若绑定值为函数，则执行
-            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
-            if (typeof vnode.context[binding.expression] == "function") {
-              vnode.context[binding.expression](event);
-            }
-          }
-        };
-        // 绑定事件
-        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
-        document.body.addEventListener("click", el.event, true);
-      },
-      unbind: function (el) {
-        // 解绑事件
-        document.body.removeEventListener("click", el.event, true);
-      },
-    },
-  },
 };
 </script>
 
diff --git a/src/components/DeviceWirle.vue b/src/components/DeviceWirle.vue
index dfff18e..afb80b2 100644
--- a/src/components/DeviceWirle.vue
+++ b/src/components/DeviceWirle.vue
@@ -316,7 +316,7 @@ export default {
         this.$router.push(`/dbwificollect?user_id=${this.user_id}`);
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
diff --git a/src/components/GateWay.vue b/src/components/GateWay.vue
index d0b9650..6564d88 100644
--- a/src/components/GateWay.vue
+++ b/src/components/GateWay.vue
@@ -418,8 +418,8 @@ export default {
 
     // 保存数据, 发送请求
     async saveAll() {
-      this.dialogFormVisible = false;
-      this.isSaveAnswer = true;
+      // this.dialogFormVisible = false;
+      // this.isSaveAnswer = true;
       this.formData.ippz_ip = this.Merge(
         this.formData.ippz_ip,
         this.ippz_ip1,
@@ -468,9 +468,9 @@ export default {
           message: "保存成功",
           type: "success",
         });
-      }else{
+      } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }
@@ -526,8 +526,7 @@ export default {
     },
   },
   created() {
-    let that = this;
-    window.getParameter = that.getParameter;
+    this.user_id = window.location.href.split("?")[1];
     this.getUserAnswer();
   },
   mounted() { },
@@ -577,13 +576,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.title_center{
+.title_center {
   font-size: 18px;
   color: red;
   position: absolute;
   left: 100px;
   top: 20px;
 }
+
 /deep/ .wired,
 /deep/ .wifi {
   .el-row {
diff --git a/src/components/GatewayConfiguration.vue b/src/components/GatewayConfiguration.vue
index 578ba30..3c4f249 100644
--- a/src/components/GatewayConfiguration.vue
+++ b/src/components/GatewayConfiguration.vue
@@ -296,16 +296,19 @@ export default {
 .el-table {
   margin-top: 10px;
 }
+
 .xqbox {
   p {
     margin: 5px;
     display: flex;
+
     .s1 {
       width: 70px;
       color: #0275ff;
     }
   }
 }
+
 .el-table {
   height: 400px;
 }
diff --git a/src/components/SerialPort.vue b/src/components/SerialPort.vue
index f68b132..96eeb5f 100644
--- a/src/components/SerialPort.vue
+++ b/src/components/SerialPort.vue
@@ -858,7 +858,7 @@ export default {
                 mark: "DB-IotLite_wx",
                 user_id: this.user_id,
                 mark_value: JSON.stringify(datas),
-                step:"2",
+                step: "2",
             });
             if (res.data.state) {
                 this.$message({
@@ -1063,7 +1063,6 @@ export default {
                     tdpz_050F: this.formData.tdpz_050F,
                     tdpz_0610: this.formData.tdpz_0610,
                 }
-                this.add_passage = false;
                 let datas = sessionStorage.getItem("DB-IotLite_wx");
                 // console.log(this.formData);
                 datas = { ...JSON.parse(datas), ...obj };
@@ -1086,6 +1085,7 @@ export default {
                     }, this.nodekey);
                     // console.log(this.trees);
                     this.sendTree();
+                    this.add_passage = false;
                     this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
                 } else {
                     this.$message({
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index 4f43ec1..f34a810 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -513,7 +513,6 @@ export default {
       return value;
     },
     async saveGate() {
-      this.add_passage = false;
       var obj = {
         tdpz_tdmc: this.FormData.tdpz_tdmc,
         tdpz_td: this.FormData.tdpz_td,
@@ -553,6 +552,7 @@ export default {
         });
         sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
         console.log(res);
+        this.add_passage = false;
         // console.log(res.data.data.mark_value);
         // this.$nextTick(() => {
         this.$refs["tree"].append(
@@ -567,7 +567,7 @@ export default {
         this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`);
       } else {
         this.$message({
-          message: `保存失败,原因是${res.data.message}`,
+          message: `保存失败`,
           type: "error",
         });
       }