From 11367b90bfbfef7d0da16447b5367c02c3d6ad84 Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Thu, 9 Nov 2023 19:32:28 +0800
Subject: [PATCH] zyh

---
 .history/src/api/user_20231109151145.js       |   21 +
 .history/src/api/user_20231109155538.js       |   25 +
 .history/src/api/user_20231109155542.js       |   25 +
 .history/src/api/user_20231109155615.js       |   25 +
 .history/src/api/user_20231109170443.js       |   30 +
 .history/src/api/user_20231109170447.js       |   30 +
 .history/src/api/user_20231109170448.js       |   30 +
 .history/src/api/user_20231109174252.js       |   30 +
 .history/src/api/user_20231109174303.js       |   30 +
 .history/src/api/user_20231109174609.js       |   30 +
 .history/src/api/user_20231109174618.js       |   30 +
 .history/src/api/user_20231109174654.js       |   30 +
 .../components/ChiClone_20231109150656.vue    |  732 ++++++++++++
 .../components/ChiClone_20231109150747.vue    |  732 ++++++++++++
 .../components/ChiClone_20231109150756.vue    |  732 ++++++++++++
 .../components/ChiClone_20231109150812.vue    |  732 ++++++++++++
 .../components/ChiClone_20231109174130.vue    |  732 ++++++++++++
 .../components/ChiClone_20231109174201.vue    |  732 ++++++++++++
 .../ChiClonewifi_20231109175951.vue           |  758 ++++++++++++
 .../ChiClonewifi_20231109180003.vue           |  758 ++++++++++++
 .../components/ChiDevice_20231109173529.vue   |  731 ++++++++++++
 .../ChiDevicewifi_20231109171151.vue          |  720 ++++++++++++
 .../ChiDevicewifi_20231109173514.vue          |  720 ++++++++++++
 .../src/components/ChiGate_20231109145223.vue |  227 ++++
 .../src/components/ChiGate_20231109145225.vue |  227 ++++
 .../src/components/ChiGate_20231109145258.vue |  227 ++++
 .../src/components/ChiGate_20231109145338.vue |  228 ++++
 .../src/components/ChiGate_20231109145344.vue |  228 ++++
 .../src/components/ChiGate_20231109145347.vue |  228 ++++
 .../src/components/ChiGate_20231109145407.vue |  228 ++++
 .../src/components/ChiGate_20231109145413.vue |  228 ++++
 .../src/components/ChiGate_20231109145414.vue |  228 ++++
 .../src/components/ChiGate_20231109145440.vue |  228 ++++
 .../src/components/ChiGate_20231109145442.vue |  228 ++++
 .../components/ChiGateway_20231109145742.vue  |  200 ++++
 .../components/ChiGateway_20231109145805.vue  |  201 ++++
 .../components/ChiGateway_20231109150041.vue  |  201 ++++
 .../components/ChiGateway_20231109150051.vue  |  201 ++++
 .../components/ChiGateway_20231109150052.vue  |  201 ++++
 .../components/ChiGatewifi_20231109145844.vue |  211 ++++
 .../components/ChiWireld_20231109145542.vue   |  373 ++++++
 .../components/ChiWireld_20231109173336.vue   |  375 ++++++
 .../components/CloneView_20231109144812.vue   |  715 ++++++++++++
 .../components/CloneWifi_20231109144021.vue   |  710 +++++++++++
 .../components/CloneWifi_20231109144119.vue   |  717 ++++++++++++
 .../components/CloneWifi_20231109144124.vue   |  717 ++++++++++++
 .../components/CloneWifi_20231109144242.vue   |  717 ++++++++++++
 .../components/CloneWifi_20231109144353.vue   |  718 ++++++++++++
 .../components/CloneWifi_20231109144427.vue   |  718 ++++++++++++
 .../components/CloneWifi_20231109144644.vue   |  721 ++++++++++++
 .../components/CloneWifi_20231109144649.vue   |  722 ++++++++++++
 .../components/CloneWifi_20231109144657.vue   |  722 ++++++++++++
 .../components/CloneWifi_20231109144719.vue   |  722 ++++++++++++
 .../CollectionView_20231109143806.vue         |  665 +++++++++++
 .../CollectionView_20231109143807.vue         |  665 +++++++++++
 .../CollectionView_20231109143821.vue         |  665 +++++++++++
 .../CollectionView_20231109143825.vue         |  665 +++++++++++
 .../CollectionView_20231109155914.vue         |  667 +++++++++++
 .../CollectionView_20231109192854.vue         |  667 +++++++++++
 .../CollectionView_20231109192940.vue         |  681 +++++++++++
 .../CollectionView_20231109193019.vue         |  691 +++++++++++
 .../CollectionView_20231109193128.vue         |  692 +++++++++++
 .../CollectionWifi_20231109143709.vue         |  661 +++++++++++
 .../CollectionWifi_20231109143711.vue         |  661 +++++++++++
 .../components/DataAcquire_20231109142434.vue |  193 +++
 .../DataAcquisition_20231109152742.vue        |  194 +++
 .../DataAcquisition_20231109152749.vue        |  195 ++++
 .../DataAcquisition_20231109152751.vue        |  195 ++++
 .../DataAcquisition_20231109152909.vue        |  196 ++++
 .../DataAcquisition_20231109153030.vue        |  196 ++++
 .../DataAcquisition_20231109153042.vue        |  196 ++++
 .../DataAcquisition_20231109153101.vue        |  196 ++++
 .../DataAcquisition_20231109153106.vue        |  196 ++++
 .../DataAcquisition_20231109153112.vue        |  196 ++++
 .../DataAcquisition_20231109153113.vue        |  196 ++++
 .../DataAcquisition_20231109153322.vue        |  196 ++++
 .../DataAcquisition_20231109153416.vue        |  196 ++++
 .../DataAcquisition_20231109153847.vue        |  196 ++++
 .../DataAcquisition_20231109153937.vue        |  196 ++++
 .../DataAcquisition_20231109153944.vue        |  196 ++++
 .../DataAcquisition_20231109153950.vue        |  196 ++++
 .../DataAcquisition_20231109153953.vue        |  196 ++++
 .../components/DataView_20231109141910.vue    |  625 ++++++++++
 .../components/DataView_20231109141956.vue    |  625 ++++++++++
 .../components/DataView_20231109141957.vue    |  625 ++++++++++
 .../components/DataView_20231109142048.vue    |  625 ++++++++++
 .../components/DataView_20231109142049.vue    |  625 ++++++++++
 .../components/DataView_20231109142051.vue    |  625 ++++++++++
 .../components/DataView_20231109142200.vue    |  625 ++++++++++
 .../components/DataView_20231109142245.vue    |  625 ++++++++++
 .../components/DataView_20231109142313.vue    |  625 ++++++++++
 .../components/DataView_20231109142325.vue    |  625 ++++++++++
 .../components/DataView_20231109160105.vue    |  625 ++++++++++
 .../components/DataView_20231109160108.vue    |  625 ++++++++++
 .../components/DataView_20231109160415.vue    |  624 ++++++++++
 .../components/DataView_20231109160421.vue    |  624 ++++++++++
 .../components/DeviceVIew_20231109181218.vue  |  414 +++++++
 .../components/DeviceVIew_20231109181256.vue  |  422 +++++++
 .../components/DeviceVIew_20231109181309.vue  |  422 +++++++
 .../components/DeviceVIew_20231109181508.vue  |  422 +++++++
 .../components/DeviceVIew_20231109181641.vue  |  426 +++++++
 .../components/DeviceVIew_20231109182521.vue  |  436 +++++++
 .../components/DeviceVIew_20231109182524.vue  |  436 +++++++
 .../components/DeviceVIew_20231109182542.vue  |  436 +++++++
 .../components/DeviceVIew_20231109182628.vue  |  436 +++++++
 .../components/DeviceVIew_20231109182630.vue  |  436 +++++++
 .../components/DeviceVIew_20231109182632.vue  |  436 +++++++
 .../components/DeviceVIew_20231109191309.vue  |  437 +++++++
 .../components/DeviceVIew_20231109191421.vue  |  445 +++++++
 .../components/DeviceVIew_20231109191629.vue  |  447 +++++++
 .../components/DeviceVIew_20231109191636.vue  |  447 +++++++
 .../components/DeviceVIew_20231109191657.vue  |  448 +++++++
 .../components/DeviceVIew_20231109191717.vue  |  448 +++++++
 .../components/DeviceVIew_20231109191725.vue  |  448 +++++++
 .../components/DeviceVIew_20231109191743.vue  |  448 +++++++
 .../components/DeviceVIew_20231109191746.vue  |  448 +++++++
 .../components/DeviceVIew_20231109191800.vue  |  448 +++++++
 .../components/DeviceVIew_20231109191801.vue  |  448 +++++++
 .../components/DeviceVIew_20231109191914.vue  |  461 ++++++++
 .../components/DeviceVIew_20231109191917.vue  |  461 ++++++++
 .../components/DeviceVIew_20231109192009.vue  |  461 ++++++++
 .../components/DeviceVIew_20231109192214.vue  |  461 ++++++++
 .../components/DeviceVIew_20231109192613.vue  |  467 ++++++++
 .../components/DeviceVIew_20231109192627.vue  |  467 ++++++++
 .../components/DeviceVIew_20231109192702.vue  |  467 ++++++++
 .../components/DeviceVIew_20231109193115.vue  |  468 ++++++++
 .../components/DeviceWirle_20231109143407.vue |  420 +++++++
 .../src/components/GateWay_20231109151637.vue |  533 +++++++++
 .../src/components/GateWay_20231109151747.vue |  534 +++++++++
 .../src/components/GateWay_20231109151756.vue |  475 ++++++++
 .../src/components/GateWay_20231109152029.vue |  476 ++++++++
 .../src/components/GateWay_20231109152207.vue |  476 ++++++++
 .../src/components/GateWay_20231109152340.vue |  476 ++++++++
 .../IpConfiguration_20231109151434.vue        |  449 +++++++
 .../IpConfiguration_20231109152557.vue        |  449 +++++++
 .../PortConfiguration_20231109152557.vue      |  284 +++++
 .../components/SerialPort_20231109142603.vue  | 1033 ++++++++++++++++
 .../components/SerialPort_20231109142604.vue  | 1033 ++++++++++++++++
 .../components/SerialPort_20231109142713.vue  | 1033 ++++++++++++++++
 .../components/SerialPort_20231109142730.vue  | 1034 ++++++++++++++++
 .../components/SerialPort_20231109142802.vue  | 1033 ++++++++++++++++
 .../components/SerialPort_20231109142900.vue  | 1034 ++++++++++++++++
 .../components/SerialPort_20231109142916.vue  | 1034 ++++++++++++++++
 .../components/SerialPort_20231109142919.vue  | 1034 ++++++++++++++++
 .../components/SerialPort_20231109142927.vue  | 1034 ++++++++++++++++
 .../components/SerialPort_20231109143009.vue  | 1034 ++++++++++++++++
 .../components/SerialPort_20231109143036.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109143437.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109160643.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109160702.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109160704.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109160911.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109161038.vue  | 1038 +++++++++++++++++
 .../components/SerialPort_20231109161046.vue  | 1038 +++++++++++++++++
 .../components/SerialPort_20231109161229.vue  | 1038 +++++++++++++++++
 .../components/SerialPort_20231109161259.vue  | 1038 +++++++++++++++++
 .../components/SerialPort_20231109161334.vue  | 1038 +++++++++++++++++
 .../components/SerialPort_20231109161521.vue  | 1038 +++++++++++++++++
 .../components/SerialPort_20231109161541.vue  | 1038 +++++++++++++++++
 .../components/SerialPort_20231109162034.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109162035.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109162625.vue  | 1036 ++++++++++++++++
 .../components/SerialPort_20231109162650.vue  | 1036 ++++++++++++++++
 .../components/TreeView_20231109154956.vue    |  757 ++++++++++++
 .../components/TreeView_20231109155014.vue    |  756 ++++++++++++
 .../components/TreeView_20231109155034.vue    |  757 ++++++++++++
 .../components/TreeView_20231109155038.vue    |  757 ++++++++++++
 .../components/TreeView_20231109162950.vue    |  758 ++++++++++++
 .../components/TreeView_20231109162953.vue    |  758 ++++++++++++
 .../components/TreeView_20231109163115.vue    |  758 ++++++++++++
 .../components/TreeView_20231109163208.vue    |  758 ++++++++++++
 .../components/TreeView_20231109163225.vue    |  759 ++++++++++++
 .../components/TreeView_20231109163317.vue    |  760 ++++++++++++
 .../components/TreeView_20231109163929.vue    |  761 ++++++++++++
 .../components/TreeView_20231109163932.vue    |  761 ++++++++++++
 .../components/TreeView_20231109164014.vue    |  762 ++++++++++++
 .../components/TreeView_20231109164214.vue    |  762 ++++++++++++
 .../components/TreeView_20231109164217.vue    |  762 ++++++++++++
 .../components/TreeView_20231109164626.vue    |  763 ++++++++++++
 .../components/TreeView_20231109164630.vue    |  763 ++++++++++++
 .../components/TreeView_20231109164719.vue    |  766 ++++++++++++
 .../components/TreeView_20231109164835.vue    |  766 ++++++++++++
 .../components/TreeView_20231109164948.vue    |  767 ++++++++++++
 .../components/TreeView_20231109165508.vue    |  768 ++++++++++++
 .../components/TreeView_20231109165825.vue    |  771 ++++++++++++
 .../components/TreeView_20231109170158.vue    |  772 ++++++++++++
 .../components/TreeView_20231109170225.vue    |  771 ++++++++++++
 .../components/TreeView_20231109170527.vue    |  771 ++++++++++++
 .../components/TreeView_20231109171335.vue    |  773 ++++++++++++
 .../components/TreeView_20231109171414.vue    |  774 ++++++++++++
 .../components/TreeView_20231109171530.vue    |  774 ++++++++++++
 .../components/TreeView_20231109171537.vue    |  775 ++++++++++++
 .../components/TreeView_20231109171555.vue    |  768 ++++++++++++
 .../components/TreeView_20231109171701.vue    |  768 ++++++++++++
 .../components/TreeView_20231109171757.vue    |  770 ++++++++++++
 .../components/TreeView_20231109172108.vue    |  770 ++++++++++++
 .../components/TreeView_20231109172137.vue    |  770 ++++++++++++
 .../components/TreeView_20231109172200.vue    |  770 ++++++++++++
 .../components/TreeView_20231109174328.vue    |  773 ++++++++++++
 .../components/TreeView_20231109174337.vue    |  773 ++++++++++++
 .../components/TreeView_20231109174357.vue    |  774 ++++++++++++
 .../components/TreeView_20231109175043.vue    |  775 ++++++++++++
 .../components/TreeView_20231109175834.vue    |  775 ++++++++++++
 .../components/TreeView_20231109180057.vue    |  775 ++++++++++++
 .../components/TreeView_20231109180427.vue    |  777 ++++++++++++
 .../components/TreeView_20231109180436.vue    |  777 ++++++++++++
 .../components/TreeView_20231109180454.vue    |  777 ++++++++++++
 .../components/TreeView_20231109180500.vue    |  778 ++++++++++++
 .../components/TreeView_20231109180507.vue    |  775 ++++++++++++
 .../components/TreeView_20231109180512.vue    |  774 ++++++++++++
 .../components/TreeView_20231109180527.vue    |  774 ++++++++++++
 .../components/TreeView_20231109180731.vue    |  773 ++++++++++++
 .../components/TreeView_20231109180752.vue    |  772 ++++++++++++
 .../components/TreeView_20231109181057.vue    |  772 ++++++++++++
 .../components/TreeView_20231109182514.vue    |  771 ++++++++++++
 .../components/TreeView_20231109182613.vue    |  771 ++++++++++++
 .../components/TreeView_20231109182614.vue    |  771 ++++++++++++
 .../components/TreeView_20231109191853.vue    |  771 ++++++++++++
 .../components/TreeView_20231109191856.vue    |  771 ++++++++++++
 .../components/TreeView_20231109192113.vue    |  771 ++++++++++++
 .../src/components/ceshi_20231109180139.vue   |    0
 .../src/components/ceshi_20231109180140.vue   |    0
 .../src/components/ceshi_20231109180150.vue   |  492 ++++++++
 .../ChWirelessGatewayIP_20231109152603.vue    |   33 +
 .../ChWirelessGatewayIP_20231109152604.vue    |   33 +
 .history/src/views/Index_20231109180206.vue   |  191 +++
 .history/src/views/Index_20231109180209.vue   |  191 +++
 .history/src/views/Index_20231109180217.vue   |  191 +++
 .history/src/views/Index_20231109180226.vue   |  193 +++
 src/api/user.js                               |   11 +-
 src/components/ChiClone.vue                   |   28 +-
 src/components/ChiClonewifi.vue               |   25 +-
 src/components/ChiDevice.vue                  |    6 +-
 src/components/ChiDevicewifi.vue              |   19 +-
 src/components/ChiWireld.vue                  |   34 +-
 src/components/CollectionView.vue             |   47 +-
 src/components/DataView.vue                   |   21 +-
 src/components/DeviceVIew.vue                 |   82 +-
 src/components/SerialPort.vue                 |   38 +-
 src/components/TreeView.vue                   |   66 +-
 src/views/Index.vue                           |  152 +--
 241 files changed, 131742 insertions(+), 219 deletions(-)
 create mode 100644 .history/src/api/user_20231109151145.js
 create mode 100644 .history/src/api/user_20231109155538.js
 create mode 100644 .history/src/api/user_20231109155542.js
 create mode 100644 .history/src/api/user_20231109155615.js
 create mode 100644 .history/src/api/user_20231109170443.js
 create mode 100644 .history/src/api/user_20231109170447.js
 create mode 100644 .history/src/api/user_20231109170448.js
 create mode 100644 .history/src/api/user_20231109174252.js
 create mode 100644 .history/src/api/user_20231109174303.js
 create mode 100644 .history/src/api/user_20231109174609.js
 create mode 100644 .history/src/api/user_20231109174618.js
 create mode 100644 .history/src/api/user_20231109174654.js
 create mode 100644 .history/src/components/ChiClone_20231109150656.vue
 create mode 100644 .history/src/components/ChiClone_20231109150747.vue
 create mode 100644 .history/src/components/ChiClone_20231109150756.vue
 create mode 100644 .history/src/components/ChiClone_20231109150812.vue
 create mode 100644 .history/src/components/ChiClone_20231109174130.vue
 create mode 100644 .history/src/components/ChiClone_20231109174201.vue
 create mode 100644 .history/src/components/ChiClonewifi_20231109175951.vue
 create mode 100644 .history/src/components/ChiClonewifi_20231109180003.vue
 create mode 100644 .history/src/components/ChiDevice_20231109173529.vue
 create mode 100644 .history/src/components/ChiDevicewifi_20231109171151.vue
 create mode 100644 .history/src/components/ChiDevicewifi_20231109173514.vue
 create mode 100644 .history/src/components/ChiGate_20231109145223.vue
 create mode 100644 .history/src/components/ChiGate_20231109145225.vue
 create mode 100644 .history/src/components/ChiGate_20231109145258.vue
 create mode 100644 .history/src/components/ChiGate_20231109145338.vue
 create mode 100644 .history/src/components/ChiGate_20231109145344.vue
 create mode 100644 .history/src/components/ChiGate_20231109145347.vue
 create mode 100644 .history/src/components/ChiGate_20231109145407.vue
 create mode 100644 .history/src/components/ChiGate_20231109145413.vue
 create mode 100644 .history/src/components/ChiGate_20231109145414.vue
 create mode 100644 .history/src/components/ChiGate_20231109145440.vue
 create mode 100644 .history/src/components/ChiGate_20231109145442.vue
 create mode 100644 .history/src/components/ChiGateway_20231109145742.vue
 create mode 100644 .history/src/components/ChiGateway_20231109145805.vue
 create mode 100644 .history/src/components/ChiGateway_20231109150041.vue
 create mode 100644 .history/src/components/ChiGateway_20231109150051.vue
 create mode 100644 .history/src/components/ChiGateway_20231109150052.vue
 create mode 100644 .history/src/components/ChiGatewifi_20231109145844.vue
 create mode 100644 .history/src/components/ChiWireld_20231109145542.vue
 create mode 100644 .history/src/components/ChiWireld_20231109173336.vue
 create mode 100644 .history/src/components/CloneView_20231109144812.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144021.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144119.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144124.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144242.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144353.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144427.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144644.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144649.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144657.vue
 create mode 100644 .history/src/components/CloneWifi_20231109144719.vue
 create mode 100644 .history/src/components/CollectionView_20231109143806.vue
 create mode 100644 .history/src/components/CollectionView_20231109143807.vue
 create mode 100644 .history/src/components/CollectionView_20231109143821.vue
 create mode 100644 .history/src/components/CollectionView_20231109143825.vue
 create mode 100644 .history/src/components/CollectionView_20231109155914.vue
 create mode 100644 .history/src/components/CollectionView_20231109192854.vue
 create mode 100644 .history/src/components/CollectionView_20231109192940.vue
 create mode 100644 .history/src/components/CollectionView_20231109193019.vue
 create mode 100644 .history/src/components/CollectionView_20231109193128.vue
 create mode 100644 .history/src/components/CollectionWifi_20231109143709.vue
 create mode 100644 .history/src/components/CollectionWifi_20231109143711.vue
 create mode 100644 .history/src/components/DataAcquire_20231109142434.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109152742.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109152749.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109152751.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109152909.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153030.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153042.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153101.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153106.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153112.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153113.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153322.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153416.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153847.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153937.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153944.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153950.vue
 create mode 100644 .history/src/components/DataAcquisition_20231109153953.vue
 create mode 100644 .history/src/components/DataView_20231109141910.vue
 create mode 100644 .history/src/components/DataView_20231109141956.vue
 create mode 100644 .history/src/components/DataView_20231109141957.vue
 create mode 100644 .history/src/components/DataView_20231109142048.vue
 create mode 100644 .history/src/components/DataView_20231109142049.vue
 create mode 100644 .history/src/components/DataView_20231109142051.vue
 create mode 100644 .history/src/components/DataView_20231109142200.vue
 create mode 100644 .history/src/components/DataView_20231109142245.vue
 create mode 100644 .history/src/components/DataView_20231109142313.vue
 create mode 100644 .history/src/components/DataView_20231109142325.vue
 create mode 100644 .history/src/components/DataView_20231109160105.vue
 create mode 100644 .history/src/components/DataView_20231109160108.vue
 create mode 100644 .history/src/components/DataView_20231109160415.vue
 create mode 100644 .history/src/components/DataView_20231109160421.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109181218.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109181256.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109181309.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109181508.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109181641.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109182521.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109182524.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109182542.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109182628.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109182630.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109182632.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191309.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191421.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191629.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191636.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191657.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191717.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191725.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191743.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191746.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191800.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191801.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191914.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109191917.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109192009.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109192214.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109192613.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109192627.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109192702.vue
 create mode 100644 .history/src/components/DeviceVIew_20231109193115.vue
 create mode 100644 .history/src/components/DeviceWirle_20231109143407.vue
 create mode 100644 .history/src/components/GateWay_20231109151637.vue
 create mode 100644 .history/src/components/GateWay_20231109151747.vue
 create mode 100644 .history/src/components/GateWay_20231109151756.vue
 create mode 100644 .history/src/components/GateWay_20231109152029.vue
 create mode 100644 .history/src/components/GateWay_20231109152207.vue
 create mode 100644 .history/src/components/GateWay_20231109152340.vue
 create mode 100644 .history/src/components/IpConfiguration_20231109151434.vue
 create mode 100644 .history/src/components/IpConfiguration_20231109152557.vue
 create mode 100644 .history/src/components/PortConfiguration_20231109152557.vue
 create mode 100644 .history/src/components/SerialPort_20231109142603.vue
 create mode 100644 .history/src/components/SerialPort_20231109142604.vue
 create mode 100644 .history/src/components/SerialPort_20231109142713.vue
 create mode 100644 .history/src/components/SerialPort_20231109142730.vue
 create mode 100644 .history/src/components/SerialPort_20231109142802.vue
 create mode 100644 .history/src/components/SerialPort_20231109142900.vue
 create mode 100644 .history/src/components/SerialPort_20231109142916.vue
 create mode 100644 .history/src/components/SerialPort_20231109142919.vue
 create mode 100644 .history/src/components/SerialPort_20231109142927.vue
 create mode 100644 .history/src/components/SerialPort_20231109143009.vue
 create mode 100644 .history/src/components/SerialPort_20231109143036.vue
 create mode 100644 .history/src/components/SerialPort_20231109143437.vue
 create mode 100644 .history/src/components/SerialPort_20231109160643.vue
 create mode 100644 .history/src/components/SerialPort_20231109160702.vue
 create mode 100644 .history/src/components/SerialPort_20231109160704.vue
 create mode 100644 .history/src/components/SerialPort_20231109160911.vue
 create mode 100644 .history/src/components/SerialPort_20231109161038.vue
 create mode 100644 .history/src/components/SerialPort_20231109161046.vue
 create mode 100644 .history/src/components/SerialPort_20231109161229.vue
 create mode 100644 .history/src/components/SerialPort_20231109161259.vue
 create mode 100644 .history/src/components/SerialPort_20231109161334.vue
 create mode 100644 .history/src/components/SerialPort_20231109161521.vue
 create mode 100644 .history/src/components/SerialPort_20231109161541.vue
 create mode 100644 .history/src/components/SerialPort_20231109162034.vue
 create mode 100644 .history/src/components/SerialPort_20231109162035.vue
 create mode 100644 .history/src/components/SerialPort_20231109162625.vue
 create mode 100644 .history/src/components/SerialPort_20231109162650.vue
 create mode 100644 .history/src/components/TreeView_20231109154956.vue
 create mode 100644 .history/src/components/TreeView_20231109155014.vue
 create mode 100644 .history/src/components/TreeView_20231109155034.vue
 create mode 100644 .history/src/components/TreeView_20231109155038.vue
 create mode 100644 .history/src/components/TreeView_20231109162950.vue
 create mode 100644 .history/src/components/TreeView_20231109162953.vue
 create mode 100644 .history/src/components/TreeView_20231109163115.vue
 create mode 100644 .history/src/components/TreeView_20231109163208.vue
 create mode 100644 .history/src/components/TreeView_20231109163225.vue
 create mode 100644 .history/src/components/TreeView_20231109163317.vue
 create mode 100644 .history/src/components/TreeView_20231109163929.vue
 create mode 100644 .history/src/components/TreeView_20231109163932.vue
 create mode 100644 .history/src/components/TreeView_20231109164014.vue
 create mode 100644 .history/src/components/TreeView_20231109164214.vue
 create mode 100644 .history/src/components/TreeView_20231109164217.vue
 create mode 100644 .history/src/components/TreeView_20231109164626.vue
 create mode 100644 .history/src/components/TreeView_20231109164630.vue
 create mode 100644 .history/src/components/TreeView_20231109164719.vue
 create mode 100644 .history/src/components/TreeView_20231109164835.vue
 create mode 100644 .history/src/components/TreeView_20231109164948.vue
 create mode 100644 .history/src/components/TreeView_20231109165508.vue
 create mode 100644 .history/src/components/TreeView_20231109165825.vue
 create mode 100644 .history/src/components/TreeView_20231109170158.vue
 create mode 100644 .history/src/components/TreeView_20231109170225.vue
 create mode 100644 .history/src/components/TreeView_20231109170527.vue
 create mode 100644 .history/src/components/TreeView_20231109171335.vue
 create mode 100644 .history/src/components/TreeView_20231109171414.vue
 create mode 100644 .history/src/components/TreeView_20231109171530.vue
 create mode 100644 .history/src/components/TreeView_20231109171537.vue
 create mode 100644 .history/src/components/TreeView_20231109171555.vue
 create mode 100644 .history/src/components/TreeView_20231109171701.vue
 create mode 100644 .history/src/components/TreeView_20231109171757.vue
 create mode 100644 .history/src/components/TreeView_20231109172108.vue
 create mode 100644 .history/src/components/TreeView_20231109172137.vue
 create mode 100644 .history/src/components/TreeView_20231109172200.vue
 create mode 100644 .history/src/components/TreeView_20231109174328.vue
 create mode 100644 .history/src/components/TreeView_20231109174337.vue
 create mode 100644 .history/src/components/TreeView_20231109174357.vue
 create mode 100644 .history/src/components/TreeView_20231109175043.vue
 create mode 100644 .history/src/components/TreeView_20231109175834.vue
 create mode 100644 .history/src/components/TreeView_20231109180057.vue
 create mode 100644 .history/src/components/TreeView_20231109180427.vue
 create mode 100644 .history/src/components/TreeView_20231109180436.vue
 create mode 100644 .history/src/components/TreeView_20231109180454.vue
 create mode 100644 .history/src/components/TreeView_20231109180500.vue
 create mode 100644 .history/src/components/TreeView_20231109180507.vue
 create mode 100644 .history/src/components/TreeView_20231109180512.vue
 create mode 100644 .history/src/components/TreeView_20231109180527.vue
 create mode 100644 .history/src/components/TreeView_20231109180731.vue
 create mode 100644 .history/src/components/TreeView_20231109180752.vue
 create mode 100644 .history/src/components/TreeView_20231109181057.vue
 create mode 100644 .history/src/components/TreeView_20231109182514.vue
 create mode 100644 .history/src/components/TreeView_20231109182613.vue
 create mode 100644 .history/src/components/TreeView_20231109182614.vue
 create mode 100644 .history/src/components/TreeView_20231109191853.vue
 create mode 100644 .history/src/components/TreeView_20231109191856.vue
 create mode 100644 .history/src/components/TreeView_20231109192113.vue
 create mode 100644 .history/src/components/ceshi_20231109180139.vue
 create mode 100644 .history/src/components/ceshi_20231109180140.vue
 create mode 100644 .history/src/components/ceshi_20231109180150.vue
 create mode 100644 .history/src/views/ChWirelessGatewayIP_20231109152603.vue
 create mode 100644 .history/src/views/ChWirelessGatewayIP_20231109152604.vue
 create mode 100644 .history/src/views/Index_20231109180206.vue
 create mode 100644 .history/src/views/Index_20231109180209.vue
 create mode 100644 .history/src/views/Index_20231109180217.vue
 create mode 100644 .history/src/views/Index_20231109180226.vue

diff --git a/.history/src/api/user_20231109151145.js b/.history/src/api/user_20231109151145.js
new file mode 100644
index 0000000..edabdc9
--- /dev/null
+++ b/.history/src/api/user_20231109151145.js
@@ -0,0 +1,21 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109155538.js b/.history/src/api/user_20231109155538.js
new file mode 100644
index 0000000..eb62c61
--- /dev/null
+++ b/.history/src/api/user_20231109155538.js
@@ -0,0 +1,25 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (user_id) => {
+  return axios.get(
+    `action=queryacquisition&user_id=${user_id}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109155542.js b/.history/src/api/user_20231109155542.js
new file mode 100644
index 0000000..eb62c61
--- /dev/null
+++ b/.history/src/api/user_20231109155542.js
@@ -0,0 +1,25 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (user_id) => {
+  return axios.get(
+    `action=queryacquisition&user_id=${user_id}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109155615.js b/.history/src/api/user_20231109155615.js
new file mode 100644
index 0000000..005fa4a
--- /dev/null
+++ b/.history/src/api/user_20231109155615.js
@@ -0,0 +1,25 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (user_id) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${user_id}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109170443.js b/.history/src/api/user_20231109170443.js
new file mode 100644
index 0000000..3c0c525
--- /dev/null
+++ b/.history/src/api/user_20231109170443.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (user_id) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${user_id}`
+  )
+}
+export const SendTree = (data)=>{
+  return axios.get(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109170447.js b/.history/src/api/user_20231109170447.js
new file mode 100644
index 0000000..4df8383
--- /dev/null
+++ b/.history/src/api/user_20231109170447.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (user_id) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${user_id}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.get(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109170448.js b/.history/src/api/user_20231109170448.js
new file mode 100644
index 0000000..4df8383
--- /dev/null
+++ b/.history/src/api/user_20231109170448.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (user_id) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${user_id}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.get(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109174252.js b/.history/src/api/user_20231109174252.js
new file mode 100644
index 0000000..56ddc20
--- /dev/null
+++ b/.history/src/api/user_20231109174252.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (data) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${data.user_id}&type=${data.type}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.get(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109174303.js b/.history/src/api/user_20231109174303.js
new file mode 100644
index 0000000..762d6be
--- /dev/null
+++ b/.history/src/api/user_20231109174303.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (data) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${data.user_id}&type=${data.type}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.get(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}&type=${data.type}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109174609.js b/.history/src/api/user_20231109174609.js
new file mode 100644
index 0000000..c66fc0d
--- /dev/null
+++ b/.history/src/api/user_20231109174609.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (data) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${data.user_id}&type=${data.type}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.post(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}&type=${data.type}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109174618.js b/.history/src/api/user_20231109174618.js
new file mode 100644
index 0000000..c66fc0d
--- /dev/null
+++ b/.history/src/api/user_20231109174618.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (data) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${data.user_id}&type=${data.type}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.post(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}&type=${data.type}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/api/user_20231109174654.js b/.history/src/api/user_20231109174654.js
new file mode 100644
index 0000000..762d6be
--- /dev/null
+++ b/.history/src/api/user_20231109174654.js
@@ -0,0 +1,30 @@
+import axios from "axios";
+export const GetDbwirldList = () => {
+  return axios.get("/wangguan?action=queryanswer&mark=DB-IotLite_yx");
+};
+export const SaveUserAnswer = (data) => {
+  return axios.post(
+    `/wangguan?action=updatecache&mark=${data.mark}&user_id=${data.user_id}&mark_value=${data.mark_value}`
+  );
+};
+export const GetUserAnswer = (data) => {
+  return axios.get(
+    `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+  );
+};
+export const GetTree = (data) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${data.user_id}&type=${data.type}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.get(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}&type=${data.type}`
+  )
+}
+//最新拿缓存请求接口
+// export let GetUserAnswer = (data) => {
+//   return axios.get(
+//     `/Handler/Config.ash?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
+//   );
+// };
diff --git a/.history/src/components/ChiClone_20231109150656.vue b/.history/src/components/ChiClone_20231109150656.vue
new file mode 100644
index 0000000..22c7e0e
--- /dev/null
+++ b/.history/src/components/ChiClone_20231109150656.vue
@@ -0,0 +1,732 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      mqtt_qiyong: false,
+      formData: {
+        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: "134px",
+      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: {
+        server_ip: [
+          { required: true, message: "请输入服务器IP", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        gateway_id: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        data_theme: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        upload_mode: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        upload_week: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        data_filter: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      // this.formData.mqtt_ip = this.mqtt_ip1 + "." + this.mqtt_ip2 + "." + this.mqtt_ip3 + "." + this.mqtt_ip4;
+      // this.formData.mqtt_qiyong = String(Number(this.formData.mqtt_qiyong));
+      // let mqtt_qiyong = this.formData.mqtt_qiyong;
+      // let obj = {
+      // mqtt_qiyong: String(Number(mqtt_qiyong))
+      // }
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/components/ChiClone_20231109150747.vue b/.history/src/components/ChiClone_20231109150747.vue
new file mode 100644
index 0000000..d0dabf6
--- /dev/null
+++ b/.history/src/components/ChiClone_20231109150747.vue
@@ -0,0 +1,732 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      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: "134px",
+      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: {
+        server_ip: [
+          { required: true, message: "请输入服务器IP", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        gateway_id: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        data_theme: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        upload_mode: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        upload_week: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        data_filter: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      // this.formData.mqtt_ip = this.mqtt_ip1 + "." + this.mqtt_ip2 + "." + this.mqtt_ip3 + "." + this.mqtt_ip4;
+      // this.formData.mqtt_qiyong = String(Number(this.formData.mqtt_qiyong));
+      // let mqtt_qiyong = this.formData.mqtt_qiyong;
+      // let obj = {
+      // mqtt_qiyong: String(Number(mqtt_qiyong))
+      // }
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/components/ChiClone_20231109150756.vue b/.history/src/components/ChiClone_20231109150756.vue
new file mode 100644
index 0000000..306c542
--- /dev/null
+++ b/.history/src/components/ChiClone_20231109150756.vue
@@ -0,0 +1,732 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      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: "134px",
+      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: {
+        server_ip: [
+          { required: true, message: "请输入服务器IP", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        gateway_id: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        data_theme: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        upload_mode: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        upload_week: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        data_filter: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      // this.formData.mqtt_ip = this.mqtt_ip1 + "." + this.mqtt_ip2 + "." + this.mqtt_ip3 + "." + this.mqtt_ip4;
+      // this.formData.mqtt_qiyong = String(Number(this.formData.mqtt_qiyong));
+      // let mqtt_qiyong = this.formData.mqtt_qiyong;
+      // let obj = {
+      // mqtt_qiyong: String(Number(mqtt_qiyong))
+      // }
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/components/ChiClone_20231109150812.vue b/.history/src/components/ChiClone_20231109150812.vue
new file mode 100644
index 0000000..e9c5808
--- /dev/null
+++ b/.history/src/components/ChiClone_20231109150812.vue
@@ -0,0 +1,732 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      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: "134px",
+      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: {
+        server_ip: [
+          { required: true, message: "请输入服务器IP", trigger: "blur" },
+        ],
+        port_number: [
+          { required: true, message: "请输入端口", trigger: "blur" },
+        ],
+        gateway_id: [
+          { required: true, message: "请输入网关ID", trigger: "blur" },
+        ],
+        data_theme: [
+          { required: true, message: "请输入主题", trigger: "blur" },
+        ],
+        upload_mode: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        upload_week: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        data_filter: [
+          { required: true, message: "请输入数据过滤", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      // this.formData.mqtt_ip = this.mqtt_ip1 + "." + this.mqtt_ip2 + "." + this.mqtt_ip3 + "." + this.mqtt_ip4;
+      // this.formData.mqtt_qiyong = String(Number(this.formData.mqtt_qiyong));
+      // let mqtt_qiyong = this.formData.mqtt_qiyong;
+      // let obj = {
+      // mqtt_qiyong: String(Number(mqtt_qiyong))
+      // }
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/components/ChiClone_20231109174130.vue b/.history/src/components/ChiClone_20231109174130.vue
new file mode 100644
index 0000000..7a5337e
--- /dev/null
+++ b/.history/src/components/ChiClone_20231109174130.vue
@@ -0,0 +1,732 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      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: "134px",
+      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: "", trigger: "blur" },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        // data_filter: [
+        //   { required: true, message: "请输入数据过滤", trigger: "blur" },
+        // ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      // this.formData.mqtt_ip = this.mqtt_ip1 + "." + this.mqtt_ip2 + "." + this.mqtt_ip3 + "." + this.mqtt_ip4;
+      // this.formData.mqtt_qiyong = String(Number(this.formData.mqtt_qiyong));
+      // let mqtt_qiyong = this.formData.mqtt_qiyong;
+      // let obj = {
+      // mqtt_qiyong: String(Number(mqtt_qiyong))
+      // }
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/components/ChiClone_20231109174201.vue b/.history/src/components/ChiClone_20231109174201.vue
new file mode 100644
index 0000000..1e12fb1
--- /dev/null
+++ b/.history/src/components/ChiClone_20231109174201.vue
@@ -0,0 +1,732 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      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: "138px",
+      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: "", trigger: "blur" },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+        // data_filter: [
+        //   { required: true, message: "请输入数据过滤", trigger: "blur" },
+        // ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async saveClone() {
+      // this.formData.mqtt_ip = this.mqtt_ip1 + "." + this.mqtt_ip2 + "." + this.mqtt_ip3 + "." + this.mqtt_ip4;
+      // this.formData.mqtt_qiyong = String(Number(this.formData.mqtt_qiyong));
+      // let mqtt_qiyong = this.formData.mqtt_qiyong;
+      // let obj = {
+      // mqtt_qiyong: String(Number(mqtt_qiyong))
+      // }
+      // this.formData.mqtt_tls = String(Number(this.formData.mqtt_tls));
+      // this.formData.mqtt_clearsession = String(Number(this.formData.mqtt_clearsession));
+      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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/components/ChiClonewifi_20231109175951.vue b/.history/src/components/ChiClonewifi_20231109175951.vue
new file mode 100644
index 0000000..cefc2ad
--- /dev/null
+++ b/.history/src/components/ChiClonewifi_20231109175951.vue
@@ -0,0 +1,758 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      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: "134px",
+      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: "", trigger: "blur" },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      console.log(JSON.parse(data.data.mark_value));
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/ChiClonewifi_20231109180003.vue b/.history/src/components/ChiClonewifi_20231109180003.vue
new file mode 100644
index 0000000..2725014
--- /dev/null
+++ b/.history/src/components/ChiClonewifi_20231109180003.vue
@@ -0,0 +1,758 @@
+<!-- 斥候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="datas" :props="defaultProps" @node-click="treeNodeClick" default-expand-all></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="ruleForm">
+            <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>
+              <el-col :span="12">
+                <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="saveClone">保 存</el-button>
+              <el-button @click="add_passage = false">取 消</el-button>
+            </div>
+          </el-form>
+        </div>
+        <div>
+          <div class="con_right">
+            <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 } 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,
+      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: "138px",
+      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: "", trigger: "blur" },
+        ],
+        mqtt_wgsn: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_port: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_keepalive: [
+          { required: true, message: "", trigger: "blur" },
+        ],
+        mqtt_sssjfbzt: [
+          { required: true, message: "请输入上传模式", trigger: "blur" },
+        ],
+        mqtt_qos: [
+          { required: true, message: "请输入上传周期", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    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: "USER202307301114011710",
+        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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      console.log(JSON.parse(data.data.mark_value));
+      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;
+      }
+    },
+  },
+  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-12:last-child {
+    padding-right: 150px;
+  }
+
+  .el-col-12:first-child {
+    padding-right: 8px;
+  }
+
+  .el-row {
+    height: 40px;
+    display: flex;
+    align-items: flex-start;
+
+    .el-col-1 {
+      text-align: center;
+      line-height: 52px;
+      height: 20px;
+    }
+
+    .el-col-9 {
+      padding-left: 30px;
+    }
+  }
+
+  .el-input__inner {
+    height: 30px;
+    text-align: left;
+    padding: 0px 8px;
+  }
+
+  .content {
+    position: absolute;
+    left: 362px;
+    top: 104px;
+    width: 1220px;
+    height: 836px;
+    line-height: 20px;
+    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: 0px;
+    }
+
+    /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;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/components/ChiDevice_20231109173529.vue b/.history/src/components/ChiDevice_20231109173529.vue
new file mode 100644
index 0000000..f6855a2
--- /dev/null
+++ b/.history/src/components/ChiDevice_20231109173529.vue
@@ -0,0 +1,731 @@
+<!-- 斥候有线的新建设备配置 -->
+<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="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"
+                default-expand-all></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="ruleForm">
+                    <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" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-125</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="采集超过时间(ms):" label-width="140px" prop="sbpz_cjcgsj">
+                                    <el-input v-model="formData.sbpz_cjcgsj" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-60000</div>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="周期上报OnChange数据:" label-width="186px" prop="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" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">0-1000</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <div class="footer_con">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;"
+                                        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>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="saveDevice">保 存</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 } from '@/api/user';
+export default {
+    name: 'ChiDevice',
+    data() {
+        return {
+            loading: false,
+            formData: {
+                sbpz_sbmc: "有线区精雕2",
+                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: '请输入IP地址', 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: {
+        rightClick(e, data, node) {
+            this.menuShow = false
+            this.menuShow = true
+            e.preventDefault() //关闭浏览器右键默认事件
+            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+            document.addEventListener('click', (ev) => {
+                ev.stopImmediatePropagation()
+                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                    this.foo()
+                }
+            })
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false
+            document.removeEventListener('click', this.foo) // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo()
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("CHGYWG_yx", JSON.stringify(datas));
+            this.$router.push("/collectionpoint")
+        },
+        async GetUserAnswer() {
+            this.loading = true;
+            let { data } = await GetUserAnswer({
+                mark: "CHGYWG_yx",
+                user_id: "USER202307301114011710",
+            });
+            this.loading = false;
+            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;
+            }
+        }
+    },
+    mounted() {
+        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: 0px;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 102px;
+    }
+
+    .el-divider--horizontal {
+        margin: 8px 0px;
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+    .el-row {
+        display: flex;
+        align-items: flex-end;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .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_20231109171151.vue b/.history/src/components/ChiDevicewifi_20231109171151.vue
new file mode 100644
index 0000000..391aae2
--- /dev/null
+++ b/.history/src/components/ChiDevicewifi_20231109171151.vue
@@ -0,0 +1,720 @@
+<!-- 斥候有线的新建设备配置 -->
+<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="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"
+                default-expand-all></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="ruleForm">
+                    <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" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-125</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="采集超过时间(ms):" label-width="140px" prop="sbpz_cjcgsj">
+                                    <el-input v-model="formData.sbpz_cjcgsj" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-60000</div>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="周期上报OnChange数据:" label-width="186px" prop="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" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">0-1000</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <div class="footer_con">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;"
+                                        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>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="saveDevice">保 存</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 } from '@/api/user';
+export default {
+    name: 'ChiDevicewifi',
+    data() {
+        return {
+            loading: false,
+            formData: {
+                sbpz_sbmc: "有线区精雕2",
+                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: '请输入IP地址', 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: {
+        rightClick(e, data, node) {
+            this.menuShow = false
+            this.menuShow = true
+            e.preventDefault() //关闭浏览器右键默认事件
+            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+            document.addEventListener('click', (ev) => {
+                ev.stopImmediatePropagation()
+                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                    this.foo()
+                }
+            })
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false
+            document.removeEventListener('click', this.foo) // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo()
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        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.sbpz_port,
+                sbpz_czdz: this.sbpz_czdz,
+                sbpz_lxzq: this.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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+            this.$router.push("/chiwificollect")
+        },
+        async GetUserAnswer() {
+            this.loading = true;
+            let { data } = await GetUserAnswer({
+                mark: "CHGYWG_wx",
+                user_id: "USER202307301114011710",
+            });
+            this.loading = false;
+            console.log(JSON.parse(data.data.mark_value));
+            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;
+            }
+        }
+    },
+    mounted() {
+        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: 0px;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 102px;
+    }
+
+    .el-divider--horizontal {
+        margin: 8px 0px;
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+    .el-row {
+        display: flex;
+        align-items: flex-end;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .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_20231109173514.vue b/.history/src/components/ChiDevicewifi_20231109173514.vue
new file mode 100644
index 0000000..378fa8e
--- /dev/null
+++ b/.history/src/components/ChiDevicewifi_20231109173514.vue
@@ -0,0 +1,720 @@
+<!-- 斥候有线的新建设备配置 -->
+<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="datas" :props="defaultProps" @node-contextmenu="rightClick" @node-click="treeNodeClick"
+                default-expand-all></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="ruleForm">
+                    <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" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-125</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="采集超过时间(ms):" label-width="140px" prop="sbpz_cjcgsj">
+                                    <el-input v-model="formData.sbpz_cjcgsj" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">2-60000</div>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="周期上报OnChange数据:" label-width="186px" prop="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" placeholder="64"
+                                        style="width: 200px;height:30px"></el-input>
+                                    <div class="infos">0-1000</div>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <div class="footer_con">
+                            <el-row>
+                                <el-col :span="12">
+                                    <el-form-item label="线圈寄存器写入功能码:" label-width="120px" style="line-height: 20px;"
+                                        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>
+                    </el-form>
+                </div>
+                <span slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="saveDevice">保 存</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 } from '@/api/user';
+export default {
+    name: 'ChiDevicewifi',
+    data() {
+        return {
+            loading: false,
+            formData: {
+                sbpz_sbmc: "有线区精雕2",
+                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: '请输入IP地址', 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: {
+        rightClick(e, data, node) {
+            this.menuShow = false
+            this.menuShow = true
+            e.preventDefault() //关闭浏览器右键默认事件
+            this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+            document.addEventListener('click', (ev) => {
+                ev.stopImmediatePropagation()
+                if (ev.target !== document.querySelector('.el-menu-item.is-active')) {
+                    this.foo()
+                }
+            })
+        },
+        // 点击时候的判断,判断是否为新增网关
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false
+            document.removeEventListener('click', this.foo) // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo()
+        },
+        // 收起点击事件的判断
+        getRetract() {
+            if (this.is_retract == true) {
+                this.is_retract = false;
+            } else {
+                this.is_retract = true;
+            }
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+            this.$router.push("/chiwificollect")
+        },
+        async GetUserAnswer() {
+            this.loading = true;
+            let { data } = await GetUserAnswer({
+                mark: "CHGYWG_wx",
+                user_id: "USER202307301114011710",
+            });
+            this.loading = false;
+            console.log(JSON.parse(data.data.mark_value));
+            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;
+            }
+        }
+    },
+    mounted() {
+        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: 0px;
+    }
+
+    .el-col-12:last-child {
+        padding-right: 150px;
+    }
+
+    .el-col-12:first-child {
+        padding-right: 102px;
+    }
+
+    .el-divider--horizontal {
+        margin: 8px 0px;
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+    .el-row {
+        display: flex;
+        align-items: flex-end;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 20px;
+            height: 20px;
+        }
+
+        .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_20231109145223.vue b/.history/src/components/ChiGate_20231109145223.vue
new file mode 100644
index 0000000..3a96144
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145223.vue
@@ -0,0 +1,227 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+      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/ChiGate_20231109145225.vue b/.history/src/components/ChiGate_20231109145225.vue
new file mode 100644
index 0000000..273942a
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145225.vue
@@ -0,0 +1,227 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+      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/ChiGate_20231109145258.vue b/.history/src/components/ChiGate_20231109145258.vue
new file mode 100644
index 0000000..b6dd365
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145258.vue
@@ -0,0 +1,227 @@
+<!-- 斥候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>
+        <i class="el-icon-close title_r" @click="isShow = false" style="color: white;"></i>
+      </div>
+      <el-divider></el-divider>
+      <div class="content">
+        <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+      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/ChiGate_20231109145338.vue b/.history/src/components/ChiGate_20231109145338.vue
new file mode 100644
index 0000000..d4e53a8
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145338.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+    color: #fff;!important
+      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/ChiGate_20231109145344.vue b/.history/src/components/ChiGate_20231109145344.vue
new file mode 100644
index 0000000..c36f32a
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145344.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+    color: #fff !important;
+      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/ChiGate_20231109145347.vue b/.history/src/components/ChiGate_20231109145347.vue
new file mode 100644
index 0000000..f1933db
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145347.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+      color: #fff !important;
+      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/ChiGate_20231109145407.vue b/.history/src/components/ChiGate_20231109145407.vue
new file mode 100644
index 0000000..91796e3
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145407.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+      color: #fff !important;
+      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/ChiGate_20231109145413.vue b/.history/src/components/ChiGate_20231109145413.vue
new file mode 100644
index 0000000..91796e3
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145413.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+      color: #fff !important;
+      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/ChiGate_20231109145414.vue b/.history/src/components/ChiGate_20231109145414.vue
new file mode 100644
index 0000000..91796e3
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145414.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_r {
+      color: #fff !important;
+      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/ChiGate_20231109145440.vue b/.history/src/components/ChiGate_20231109145440.vue
new file mode 100644
index 0000000..428b7bc
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145440.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_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/ChiGate_20231109145442.vue b/.history/src/components/ChiGate_20231109145442.vue
new file mode 100644
index 0000000..428b7bc
--- /dev/null
+++ b/.history/src/components/ChiGate_20231109145442.vue
@@ -0,0 +1,228 @@
+<!-- 斥候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>
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      formData: {
+        ippz_ssid: "",
+        ippz_rzfs: "开放式", //答案：WPA2-PSK
+        ippz_jmfs: "NONE", //答案：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" }],
+      },
+    };
+  },
+
+
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      datas = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(datas));
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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_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_20231109145742.vue b/.history/src/components/ChiGateway_20231109145742.vue
new file mode 100644
index 0000000..7782883
--- /dev/null
+++ b/.history/src/components/ChiGateway_20231109145742.vue
@@ -0,0 +1,200 @@
+<!-- 斥候数据采集——有线网关配置 -->
+<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="ruleForm">
+          <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="innerVisible = true">保 存</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,
+      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: "有线区网关2",
+        wgpz_wgid: "LAN-BOX2",
+      },
+      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.GetUserAnswer();
+  },
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+      this.$router.push("/configuration");
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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);
+    }
+  }
+
+  .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/ChiGateway_20231109145805.vue b/.history/src/components/ChiGateway_20231109145805.vue
new file mode 100644
index 0000000..5d6248b
--- /dev/null
+++ b/.history/src/components/ChiGateway_20231109145805.vue
@@ -0,0 +1,201 @@
+<!-- 斥候数据采集——有线网关配置 -->
+<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="ruleForm">
+          <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="innerVisible = true">保 存</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,
+      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: "有线区网关2",
+        wgpz_wgid: "LAN-BOX2",
+      },
+      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.GetUserAnswer();
+  },
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+      this.$router.push("/configuration");
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/ChiGateway_20231109150041.vue b/.history/src/components/ChiGateway_20231109150041.vue
new file mode 100644
index 0000000..a76c9a5
--- /dev/null
+++ b/.history/src/components/ChiGateway_20231109150041.vue
@@ -0,0 +1,201 @@
+<!-- 斥候数据采集——有线网关配置 -->
+<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="ruleForm">
+          <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="innerVisible = true">保 存</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,
+      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: "有线区网关2",
+        wgpz_wgid: "LAN-BOX2",
+      },
+      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.GetUserAnswer();
+  },
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+      this.$router.push("/configuration");
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/ChiGateway_20231109150051.vue b/.history/src/components/ChiGateway_20231109150051.vue
new file mode 100644
index 0000000..a76c9a5
--- /dev/null
+++ b/.history/src/components/ChiGateway_20231109150051.vue
@@ -0,0 +1,201 @@
+<!-- 斥候数据采集——有线网关配置 -->
+<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="ruleForm">
+          <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="innerVisible = true">保 存</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,
+      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: "有线区网关2",
+        wgpz_wgid: "LAN-BOX2",
+      },
+      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.GetUserAnswer();
+  },
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+      this.$router.push("/configuration");
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/ChiGateway_20231109150052.vue b/.history/src/components/ChiGateway_20231109150052.vue
new file mode 100644
index 0000000..a76c9a5
--- /dev/null
+++ b/.history/src/components/ChiGateway_20231109150052.vue
@@ -0,0 +1,201 @@
+<!-- 斥候数据采集——有线网关配置 -->
+<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="ruleForm">
+          <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="innerVisible = true">保 存</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,
+      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: "有线区网关2",
+        wgpz_wgid: "LAN-BOX2",
+      },
+      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.GetUserAnswer();
+  },
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_yx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+      this.$router.push("/configuration");
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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_20231109145844.vue b/.history/src/components/ChiGatewifi_20231109145844.vue
new file mode 100644
index 0000000..2f39334
--- /dev/null
+++ b/.history/src/components/ChiGatewifi_20231109145844.vue
@@ -0,0 +1,211 @@
+<!-- 斥候无线数据采集——网关配置 -->
+<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="ruleForm">
+          <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="innerVisible = true">保 存</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,
+      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: "有线区网关2",
+        wgpz_wgid: "LAN-BOX2",
+      },
+      innerVisible: false,
+      labelPosition: "left",
+      formLabelWidth: "96px",
+      count: 0,
+      isShow: true,
+      options: [{
+        value: '选项1',
+        label: '测试1'
+      }, {
+        value: '选项2',
+        label: '测试2'
+      }, {
+        value: '选项3',
+        label: '测试3'
+      }, {
+        value: '选项4',
+        label: '测试4'
+      }, {
+        value: '选项5',
+        label: '测试5'
+      }],
+      rules: {
+        gateway_id: [
+          { required: true, message: '请输入网关ID', trigger: 'blur' },
+        ],
+        gateway_name: [
+          { required: true, message: '请输入网关名称', trigger: 'blur' },
+        ],
+      },
+    };
+  },
+  methods: {
+    async saveGate() {
+      let datas = sessionStorage.getItem("CHGYWG_wx");
+      this.formData = { ...JSON.parse(datas), ...this.formData };
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_wx", JSON.stringify(this.formData));
+      this.$router.push("/chiwifidevice");
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_wx",
+        user_id: "USER202307301114011710",
+      });
+      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.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_20231109145542.vue b/.history/src/components/ChiWireld_20231109145542.vue
new file mode 100644
index 0000000..141384d
--- /dev/null
+++ b/.history/src/components/ChiWireld_20231109145542.vue
@@ -0,0 +1,373 @@
+<!-- 斥候有线网关页面 -->
+<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="ruleForm">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
+                  <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="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">
+                  <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" prop="ip">
+                  <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-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_dns_sx1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="footer">
+          <el-button type="primary" @click="saveAll">保 存</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,
+      formData: {
+        ippz_wllx: "静态IP",
+        ippz_ip: "",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_sx: "",
+        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_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",
+      radio: "1",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      count: 0,
+      isShow: true,
+      rules: {
+        ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        mask: [{ required: true, message: "请输入子网掩码", trigger: "blur" }],
+        type: [{ required: true, message: "请输入网络类型", trigger: "blur" }],
+        // client_id: [
+        //     { required: true, message: '请输入客户端SSID', trigger: 'blur' },
+        // ],
+        // passage: [
+        //     { required: true, message: '请输入通道', trigger: 'blur' },
+        // ],
+      },
+    };
+  },
+  created() {
+    this.GetUserAnswer();
+  },
+  mounted() { },
+
+  methods: {
+    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_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
+      );
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+    },
+    //读取缓存
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      console.log(data);
+      if (data.data && data.state) {
+        var obj = JSON.parse(data.data.mark_value);
+        this.formData.ippz_wllx = obj.ippz_wllx;
+        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_mrwg1 = obj.ippz_mrwg.split(".")[0];
+        this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
+        this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
+        this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
+        this.ippz_dns_sx1 = obj.ippz_dns_sx.split(".")[0];
+        this.ippz_dns_sx2 = obj.ippz_dns_sx.split(".")[1];
+        this.ippz_dns_sx3 = obj.ippz_dns_sx.split(".")[2];
+        this.ippz_dns_sx4 = obj.ippz_dns_sx.split(".")[3];
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gateway {
+  position: absolute;
+  top: 145px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 470px;
+  // height:358px;
+  height: 458px;
+  // 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_20231109173336.vue b/.history/src/components/ChiWireld_20231109173336.vue
new file mode 100644
index 0000000..6c97630
--- /dev/null
+++ b/.history/src/components/ChiWireld_20231109173336.vue
@@ -0,0 +1,375 @@
+<!-- 斥候有线网关页面 -->
+<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="ruleForm">
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
+                  <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="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">
+                  <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" prop="ip">
+                  <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-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_dns_sx1"></el-input>
+                    </el-col>
+                    <el-col :span="1">. </el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx2"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx3"></el-input>
+                    </el-col>
+                    <el-col :span="1">.</el-col>
+                    <el-col :span="5">
+                      <el-input v-model="ippz_dns_sx4"></el-input>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="footer">
+          <el-button type="primary" @click="saveAll">保 存</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,
+      formData: {
+        ippz_wllx: "静态IP",
+        ippz_ip: "",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_sx: "",
+        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_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",
+      radio: "1",
+      labelPosition: "left",
+      formLabelWidth: "116px",
+      count: 0,
+      isShow: true,
+      rules: {
+        ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        mask: [{ required: true, message: "请输入子网掩码", trigger: "blur" }],
+        type: [{ required: true, message: "请输入网络类型", trigger: "blur" }],
+        // client_id: [
+        //     { required: true, message: '请输入客户端SSID', trigger: 'blur' },
+        // ],
+        // passage: [
+        //     { required: true, message: '请输入通道', trigger: 'blur' },
+        // ],
+      },
+    };
+  },
+  created() {
+    this.GetUserAnswer();
+  },
+  mounted() { },
+
+  methods: {
+    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_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
+      );
+      let res = await SaveUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
+    },
+    //读取缓存
+    async GetUserAnswer() {
+      this.loading = true;
+      let { data } = await GetUserAnswer({
+        mark: "CHGYWG_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      console.log(data);
+      if (data.data && data.state) {
+        var obj = JSON.parse(data.data.mark_value);
+        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_mrwg1 = obj.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
+          this.ippz_dns_sx1 = obj.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = obj.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = obj.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = obj.ippz_dns_sx.split(".")[3];
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.gateway {
+  position: absolute;
+  top: 145px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 470px;
+  // height:358px;
+  height: 458px;
+  // 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_20231109144812.vue b/.history/src/components/CloneView_20231109144812.vue
new file mode 100644
index 0000000..a424442
--- /dev/null
+++ b/.history/src/components/CloneView_20231109144812.vue
@@ -0,0 +1,715 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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-select v-model="formData.mqtt_scms" placeholder="">
+                                        <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                            :value="option.value"></el-option>
+                                    </el-select>
+                                </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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 options3" :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 options4" :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 } from "@/api/user";
+export default {
+    name: 'CloneView',
+
+    data() {
+        return {
+            loading: false,
+            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'
+            },
+            // 右边添加设备的字段
+            options3: [
+                {
+                    label: "有线区精雕1",
+                    value: "有线区精雕1",
+                },
+                {
+                    label: "无线区精雕1",
+                    value: "无线区精雕1",
+                }
+            ],
+            options4: [{
+                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: '请输入服务器IP', 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: {
+        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: "USER202307301114011710",
+                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);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144021.vue b/.history/src/components/CloneWifi_20231109144021.vue
new file mode 100644
index 0000000..7b00e0d
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144021.vue
@@ -0,0 +1,710 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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: '', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', 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: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144119.vue b/.history/src/components/CloneWifi_20231109144119.vue
new file mode 100644
index 0000000..8d1d113
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144119.vue
@@ -0,0 +1,717 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144124.vue b/.history/src/components/CloneWifi_20231109144124.vue
new file mode 100644
index 0000000..8d1d113
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144124.vue
@@ -0,0 +1,717 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144242.vue b/.history/src/components/CloneWifi_20231109144242.vue
new file mode 100644
index 0000000..8d1d113
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144242.vue
@@ -0,0 +1,717 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144353.vue b/.history/src/components/CloneWifi_20231109144353.vue
new file mode 100644
index 0000000..492f584
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144353.vue
@@ -0,0 +1,718 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144427.vue b/.history/src/components/CloneWifi_20231109144427.vue
new file mode 100644
index 0000000..1991167
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144427.vue
@@ -0,0 +1,718 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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'
+            },
+            // 右边添加设备的字段
+            options3: [
+                {
+                    label: "有线区精雕1",
+                    value: "有线区精雕1",
+                },
+                {
+                    label: "无线区精雕1",
+                    value: "无线区精雕1",
+                }
+            ],
+            options4: [{
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144644.vue b/.history/src/components/CloneWifi_20231109144644.vue
new file mode 100644
index 0000000..815df7e
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144644.vue
@@ -0,0 +1,721 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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-select v-model="formData.mqtt_scms" placeholder="">
+                                      <el-option v-for="(option,index) in options2" :key="index" :label="option.label" :value="option.value"></el-option>
+                                    </el-select>
+                                </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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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'
+            },
+            // 右边添加设备的字段
+            options3: [
+                {
+                    label: "有线区精雕1",
+                    value: "有线区精雕1",
+                },
+                {
+                    label: "无线区精雕1",
+                    value: "无线区精雕1",
+                }
+            ],
+            options4: [{
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144649.vue b/.history/src/components/CloneWifi_20231109144649.vue
new file mode 100644
index 0000000..cf63c1f
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144649.vue
@@ -0,0 +1,722 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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-select v-model="formData.mqtt_scms" placeholder="">
+                                        <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                            :value="option.value"></el-option>
+                                    </el-select>
+                                </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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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'
+            },
+            // 右边添加设备的字段
+            options3: [
+                {
+                    label: "有线区精雕1",
+                    value: "有线区精雕1",
+                },
+                {
+                    label: "无线区精雕1",
+                    value: "无线区精雕1",
+                }
+            ],
+            options4: [{
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144657.vue b/.history/src/components/CloneWifi_20231109144657.vue
new file mode 100644
index 0000000..cf63c1f
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144657.vue
@@ -0,0 +1,722 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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-select v-model="formData.mqtt_scms" placeholder="">
+                                        <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                            :value="option.value"></el-option>
+                                    </el-select>
+                                </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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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'
+            },
+            // 右边添加设备的字段
+            options3: [
+                {
+                    label: "有线区精雕1",
+                    value: "有线区精雕1",
+                },
+                {
+                    label: "无线区精雕1",
+                    value: "无线区精雕1",
+                }
+            ],
+            options4: [{
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CloneWifi_20231109144719.vue b/.history/src/components/CloneWifi_20231109144719.vue
new file mode 100644
index 0000000..cf63c1f
--- /dev/null
+++ b/.history/src/components/CloneWifi_20231109144719.vue
@@ -0,0 +1,722 @@
+<!-- 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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></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="ruleForm">
+                        <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>
+                            <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-select v-model="formData.mqtt_scms" placeholder="">
+                                        <el-option v-for="(option, index) in options2" :key="index" :label="option.label"
+                                            :value="option.value"></el-option>
+                                    </el-select>
+                                </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="saveClone">保 存</el-button>
+                            <el-button @click="add_passage = false">取 消</el-button>
+                        </div>
+                    </el-form>
+                </div>
+                <div>
+                    <div class="con_right">
+                        <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 } from "@/api/user";
+export default {
+    name: 'CloneWifi',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                mqtt_qiyong: true,
+                mqtt_ip: "",
+                mqtt_port: "",
+                mqtt_wgsn: "",
+                mqtt_sssjfbzt: "",
+                mqtt_qos: "qos1",
+                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'
+            },
+            // 右边添加设备的字段
+            options3: [
+                {
+                    label: "有线区精雕1",
+                    value: "有线区精雕1",
+                },
+                {
+                    label: "无线区精雕1",
+                    value: "无线区精雕1",
+                }
+            ],
+            options4: [{
+                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: '', trigger: 'blur' },
+                    // { required: true, message: '请输入服务器IP', trigger: 'blur' },
+                ],
+                mqtt_port: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入端口', trigger: 'blur' },
+                ],
+                mqtt_wgsn: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入网关ID', trigger: 'blur' },
+                ],
+                mqtt_sssjfbzt: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入主题', trigger: 'blur' },
+                ],
+                mqtt_scms: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传模式', trigger: 'blur' },
+                ],
+                mqtt_sczq: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入上传周期', trigger: 'blur' },
+                ],
+                mqtt_sjgl: [
+                    { required: true, message: '', trigger: 'blur' },
+                    // { required: true, message: '请输入数据过滤', trigger: 'blur' },
+                ],
+            },
+        };
+    },
+    methods: {
+        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: "USER202307301114011710",
+                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: "USER202307301114011710",
+                mark_value: JSON.stringify(datas),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            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: "USER202307301114011710",
+            })
+            console.log(answer);
+            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;
+            }
+        }
+    },
+    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.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: 40px;
+        display: flex;
+        align-items: flex-start;
+
+        .el-col-1 {
+            text-align: center;
+            line-height: 52px;
+            height: 20px;
+        }
+
+        .el-col-9 {
+            padding-left: 30px;
+        }
+    }
+
+    .el-input__inner {
+        height: 30px;
+        text-align: left;
+        padding: 0px 8px;
+    }
+
+
+
+    .content {
+        position: absolute;
+        left: 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;
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/components/CollectionView_20231109143806.vue b/.history/src/components/CollectionView_20231109143806.vue
new file mode 100644
index 0000000..2341df6
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109143806.vue
@@ -0,0 +1,665 @@
+<!-- 采集点配置-有线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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;
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109143807.vue b/.history/src/components/CollectionView_20231109143807.vue
new file mode 100644
index 0000000..2341df6
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109143807.vue
@@ -0,0 +1,665 @@
+<!-- 采集点配置-有线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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;
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109143821.vue b/.history/src/components/CollectionView_20231109143821.vue
new file mode 100644
index 0000000..2341df6
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109143821.vue
@@ -0,0 +1,665 @@
+<!-- 采集点配置-有线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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;
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109143825.vue b/.history/src/components/CollectionView_20231109143825.vue
new file mode 100644
index 0000000..2341df6
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109143825.vue
@@ -0,0 +1,665 @@
+<!-- 采集点配置-有线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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;
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109155914.vue b/.history/src/components/CollectionView_20231109155914.vue
new file mode 100644
index 0000000..6d4c301
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109155914.vue
@@ -0,0 +1,667 @@
+<!-- 采集点配置-有线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            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;
+                }
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109192854.vue b/.history/src/components/CollectionView_20231109192854.vue
new file mode 100644
index 0000000..d64c1d2
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109192854.vue
@@ -0,0 +1,667 @@
+<!-- 采集点配置-有线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            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;
+                }
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109192940.vue b/.history/src/components/CollectionView_20231109192940.vue
new file mode 100644
index 0000000..f81acef
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109192940.vue
@@ -0,0 +1,681 @@
+<!-- 采集点配置-有线 -->
+<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" 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>
+        <!-- </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            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;
+                }
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109193019.vue b/.history/src/components/CollectionView_20231109193019.vue
new file mode 100644
index 0000000..afc119b
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109193019.vue
@@ -0,0 +1,691 @@
+<!-- 采集点配置-有线 -->
+<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" 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>
+        <!-- </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            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;
+                }
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109193128.vue b/.history/src/components/CollectionView_20231109193128.vue
new file mode 100644
index 0000000..c62ecc4
--- /dev/null
+++ b/.history/src/components/CollectionView_20231109193128.vue
@@ -0,0 +1,692 @@
+<!-- 采集点配置-有线 -->
+<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" 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>
+        <!-- </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from '@/api/user';
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            loading: false,
+            flag: false,
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            add_passage: true,
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
+        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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_yx",
+                user_id: "USER202307301114011710",
+            })
+            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;
+                }
+            }
+        }
+    },
+    created() {
+        this.loading = true;
+        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>
+
+<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: 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_20231109143709.vue b/.history/src/components/CollectionWifi_20231109143709.vue
new file mode 100644
index 0000000..eb3342f
--- /dev/null
+++ b/.history/src/components/CollectionWifi_20231109143709.vue
@@ -0,0 +1,661 @@
+<!-- 采集点配置-无线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer,GetUserAnswer} from "@/api/user";
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+    methods: {
+        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);
+            // console.log("123111");
+            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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            // localStorage.setItem("CollectionWifi",true);
+            sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            this.loading=true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading=false;
+            if(answer.data.state && answer.data.data){
+            console.log(answer);
+            let obj = JSON.parse(answer.data.data.mark_value);
+            console.log(obj);
+            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;
+        }
+    }
+    },
+    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 {
+    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_20231109143711.vue b/.history/src/components/CollectionWifi_20231109143711.vue
new file mode 100644
index 0000000..9f0e0f4
--- /dev/null
+++ b/.history/src/components/CollectionWifi_20231109143711.vue
@@ -0,0 +1,661 @@
+<!-- 采集点配置-无线 -->
+<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="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+        </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>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+export default {
+    name: 'DeviceView',
+
+    data() {
+        return {
+            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"
+            }],
+            labelPosition: "left",
+            formLabelWidth: "116px",
+            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"
+                        },
+                    ]
+                }
+                ]
+            }],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+
+        };
+    },
+    methods: {
+        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);
+            // console.log("123111");
+            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: "USER202307301114011710",
+                mark_value: JSON.stringify(this.tableData),
+            });
+            if (res.status == 200) {
+                this.$message({
+                    message: '保存成功',
+                    type: 'success'
+                });
+            }
+            console.log(res);
+            // localStorage.setItem("CollectionWifi",true);
+            sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.tableData));
+            console.log(this.tableData);
+            // }
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.state && answer.data.data) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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;
+            }
+        }
+    },
+    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 {
+    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_20231109142434.vue b/.history/src/components/DataAcquire_20231109142434.vue
new file mode 100644
index 0000000..3a0c18a
--- /dev/null
+++ b/.history/src/components/DataAcquire_20231109142434.vue
@@ -0,0 +1,193 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      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.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_20231109152742.vue b/.history/src/components/DataAcquisition_20231109152742.vue
new file mode 100644
index 0000000..91af7c2
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109152742.vue
@@ -0,0 +1,194 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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));
+      this.formdata = { ...JSON.parse(datas), ...this.formdata };
+      console.log(this.formdata);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if(res2.data.data && res2.data.state)
+      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.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_20231109152749.vue b/.history/src/components/DataAcquisition_20231109152749.vue
new file mode 100644
index 0000000..c9833e9
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109152749.vue
@@ -0,0 +1,195 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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));
+      this.formdata = { ...JSON.parse(datas), ...this.formdata };
+      console.log(this.formdata);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        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.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_20231109152751.vue b/.history/src/components/DataAcquisition_20231109152751.vue
new file mode 100644
index 0000000..c9833e9
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109152751.vue
@@ -0,0 +1,195 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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));
+      this.formdata = { ...JSON.parse(datas), ...this.formdata };
+      console.log(this.formdata);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        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.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_20231109152909.vue b/.history/src/components/DataAcquisition_20231109152909.vue
new file mode 100644
index 0000000..66d31c1
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109152909.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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));
+      this.formdata = { ...JSON.parse(datas), ...this.formdata };
+      console.log(this.formdata);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153030.vue b/.history/src/components/DataAcquisition_20231109153030.vue
new file mode 100644
index 0000000..94a8db4
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153030.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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(this.formdata);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153042.vue b/.history/src/components/DataAcquisition_20231109153042.vue
new file mode 100644
index 0000000..94a8db4
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153042.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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(this.formdata);
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153101.vue b/.history/src/components/DataAcquisition_20231109153101.vue
new file mode 100644
index 0000000..4a5f6a1
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153101.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153106.vue b/.history/src/components/DataAcquisition_20231109153106.vue
new file mode 100644
index 0000000..98e2fcd
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153106.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153112.vue b/.history/src/components/DataAcquisition_20231109153112.vue
new file mode 100644
index 0000000..98e2fcd
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153112.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153113.vue b/.history/src/components/DataAcquisition_20231109153113.vue
new file mode 100644
index 0000000..98e2fcd
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153113.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153322.vue b/.history/src/components/DataAcquisition_20231109153322.vue
new file mode 100644
index 0000000..652c6f8
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153322.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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('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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153416.vue b/.history/src/components/DataAcquisition_20231109153416.vue
new file mode 100644
index 0000000..124921e
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153416.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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('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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153847.vue b/.history/src/components/DataAcquisition_20231109153847.vue
new file mode 100644
index 0000000..4c42633
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153847.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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('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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153937.vue b/.history/src/components/DataAcquisition_20231109153937.vue
new file mode 100644
index 0000000..4c42633
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153937.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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('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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formdata));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153944.vue b/.history/src/components/DataAcquisition_20231109153944.vue
new file mode 100644
index 0000000..e9d66d5
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153944.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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('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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153950.vue b/.history/src/components/DataAcquisition_20231109153950.vue
new file mode 100644
index 0000000..e9d66d5
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153950.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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('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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109153953.vue b/.history/src/components/DataAcquisition_20231109153953.vue
new file mode 100644
index 0000000..e9d66d5
--- /dev/null
+++ b/.history/src/components/DataAcquisition_20231109153953.vue
@@ -0,0 +1,196 @@
+<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="有线区网关1" 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="LAN-BOX1" 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="lot Life 网关" 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('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: "TestDataAcquisition",
+
+  data() {
+    return {
+      loading: false,
+      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: "有线区网关1",
+        wgpz_wgid: "LAN-BOX1",
+        wgpz_wglx: "loT网关",
+      },
+      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,
+    };
+  },
+
+  mounted() { },
+
+  methods: {
+    saveInfo(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      this.$router.replace("/channelconfig");
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      if (res2.data.data && res2.data.state) {
+        console.log(res2);
+        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.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_20231109141910.vue b/.history/src/components/DataView_20231109141910.vue
new file mode 100644
index 0000000..814643b
--- /dev/null
+++ b/.history/src/components/DataView_20231109141910.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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"></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-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"></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-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"></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="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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      this.loading = false;
+      console.log(res2);
+      let res3 = JSON.parse(res2.data.data.mark_value);
+      console.log(res3);
+      if (res3.data.data && res3.data.state) {
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109141956.vue b/.history/src/components/DataView_20231109141956.vue
new file mode 100644
index 0000000..e590ab9
--- /dev/null
+++ b/.history/src/components/DataView_20231109141956.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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"></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-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"></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-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"></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="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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109141957.vue b/.history/src/components/DataView_20231109141957.vue
new file mode 100644
index 0000000..e590ab9
--- /dev/null
+++ b/.history/src/components/DataView_20231109141957.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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"></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-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"></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-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"></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="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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg1" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109142048.vue b/.history/src/components/DataView_20231109142048.vue
new file mode 100644
index 0000000..80365f9
--- /dev/null
+++ b/.history/src/components/DataView_20231109142048.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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"></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-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"></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-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"></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="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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109142049.vue b/.history/src/components/DataView_20231109142049.vue
new file mode 100644
index 0000000..80365f9
--- /dev/null
+++ b/.history/src/components/DataView_20231109142049.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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"></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-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"></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-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"></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="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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109142051.vue b/.history/src/components/DataView_20231109142051.vue
new file mode 100644
index 0000000..80365f9
--- /dev/null
+++ b/.history/src/components/DataView_20231109142051.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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"></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-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"></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-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"></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="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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109142200.vue b/.history/src/components/DataView_20231109142200.vue
new file mode 100644
index 0000000..142adef
--- /dev/null
+++ b/.history/src/components/DataView_20231109142200.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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"></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-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"></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-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"></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="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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109142245.vue b/.history/src/components/DataView_20231109142245.vue
new file mode 100644
index 0000000..8a4ed85
--- /dev/null
+++ b/.history/src/components/DataView_20231109142245.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx2"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx3"></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_dns_sx4"></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109142313.vue b/.history/src/components/DataView_20231109142313.vue
new file mode 100644
index 0000000..ff9b4de
--- /dev/null
+++ b/.history/src/components/DataView_20231109142313.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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"></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-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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109142325.vue b/.history/src/components/DataView_20231109142325.vue
new file mode 100644
index 0000000..4f6407c
--- /dev/null
+++ b/.history/src/components/DataView_20231109142325.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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);
+        this.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+        if (res3.ippz_mrwg) {
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109160105.vue b/.history/src/components/DataView_20231109160105.vue
new file mode 100644
index 0000000..adca767
--- /dev/null
+++ b/.history/src/components/DataView_20231109160105.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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.ippz_wangkou = res3.ippz_wangkou;
+        this.ippz_mrwg = res3.ippz_mrwg;
+        this.ippz_ip = res3.ippz_ip;
+        this.ippz_zwym = res3.ippz_zwym;
+        this.ippz_dns_sx = res3.ippz_dns_sx;
+        this.ippz_dns_by = res3.ippz_dns_by;
+        this.ippz_mac = res3.ippz_mac;
+        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+        this.ippz_wifi_mm = res3.ippz_wifi_mm;
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109160108.vue b/.history/src/components/DataView_20231109160108.vue
new file mode 100644
index 0000000..c8e5549
--- /dev/null
+++ b/.history/src/components/DataView_20231109160108.vue
@@ -0,0 +1,625 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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="ippz_mac" /><el-button
+                          v-copy="formdata.ippz_mac">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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.ippz_wangkou = res3.ippz_wangkou;
+          this.ippz_mrwg = res3.ippz_mrwg;
+          this.ippz_ip = res3.ippz_ip;
+          this.ippz_zwym = res3.ippz_zwym;
+          this.ippz_dns_sx = res3.ippz_dns_sx;
+          this.ippz_dns_by = res3.ippz_dns_by;
+          this.ippz_mac = res3.ippz_mac;
+          this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ippz_wifi_mm = res3.ippz_wifi_mm;
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109160415.vue b/.history/src/components/DataView_20231109160415.vue
new file mode 100644
index 0000000..da7b8a2
--- /dev/null
+++ b/.history/src/components/DataView_20231109160415.vue
@@ -0,0 +1,624 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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="ippz_mac" /><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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.ippz_wangkou = res3.ippz_wangkou;
+          this.ippz_mrwg = res3.ippz_mrwg;
+          this.ippz_ip = res3.ippz_ip;
+          this.ippz_zwym = res3.ippz_zwym;
+          this.ippz_dns_sx = res3.ippz_dns_sx;
+          this.ippz_dns_by = res3.ippz_dns_by;
+          this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ippz_wifi_mm = res3.ippz_wifi_mm;
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109160421.vue b/.history/src/components/DataView_20231109160421.vue
new file mode 100644
index 0000000..b1f34cc
--- /dev/null
+++ b/.history/src/components/DataView_20231109160421.vue
@@ -0,0 +1,624 @@
+<!-- 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="ippz_lwfs" label="1" style="color:white;">有线</el-radio>
+          <el-radio v-model="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>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+            <div class="wired">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                    <el-select v-model="ippz_wangkou" placeholder="ETHO" 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="ippz_mac"></el-input><el-button
+                          v-copy="ippz_mac" @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <!-- v-if="ippz_lwfs == 2 ? true : false" -->
+        <div>
+          <h2>WIFI</h2>
+          <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+            <div class="wifi">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                    <el-input v-model="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="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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model.number="ippz_ip4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_zwym4" disabled></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" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">. </el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg2" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg3" disabled></el-input>
+                      </el-col>
+                      <el-col :span="1">.</el-col>
+                      <el-col :span="5">
+                        <el-input v-model="ippz_mrwg4" disabled></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="ippz_mac" /><el-button v-copy="ippz_mac"
+                          @click="CopyText">复制</el-button>
+                      </el-col>
+                    </el-row>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer footer">
+          <el-button type="primary" @click="saveAll">保 存</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 {
+      formdata: {
+        ippz_wangkou: "ETH1",
+        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: "1+X",
+        ippz_wifi_mm: "",
+      },
+
+      labelPosition: "left",
+      ippz_wangkou: "ETH1",
+      ippz_zwym: "",
+      ippz_zwym1: "255",
+      ippz_zwym2: "255",
+      ippz_zwym3: "255",
+      ippz_zwym4: "0",
+      ippz_ip: "",
+      ippz_ip1: "",
+      ippz_ip2: "",
+      ippz_ip3: "",
+      ippz_ip4: "",
+      ippz_mrwg: "",
+      ippz_mrwg1: "192",
+      ippz_mrwg2: "168",
+      ippz_mrwg3: "1",
+      ippz_mrwg4: "1",
+      ippz_dns_sx: "",
+      ippz_dns_sx1: "8",
+      ippz_dns_sx2: "8",
+      ippz_dns_sx3: "8",
+      ippz_dns_sx4: "8",
+      ippz_dns_by: "",
+      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: "",
+      ippz_lwfs: "2",
+      dialogFormVisible: true,
+      formLabelWidth: "100px",
+      // 测试数据的变量
+      answer_datas: "",
+      // 有线的规则校验
+      rules_ippz_wirle: {
+        ippz_wangkou: [
+          { required: true, message: "请输入网口", trigger: "change" },
+        ],
+        ippz_zwym: [
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+      },
+      rules_ippz_wifi: {
+        ippz_wifi_ssid: [
+          { required: true, message: "请输入SSID", trigger: "blur" },
+        ],
+        ippz_wifi_mm: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+        ],
+        ippz_mac: [
+          { required: true, message: "请输入mac地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.formdata.ippz_wangkou = this.ippz_wangkou;
+      this.formdata.ippz_ip = this.Merge(
+        this.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.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.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      this.formdata.ippz_mac = this.ippz_mac;
+      this.formdata.ippz_wifi_ssid = this.ippz_wifi_ssid;
+      this.formdata.ippz_wifi_mm = this.ippz_wifi_mm;
+      let res = await SaveUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formdata),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      console.log(res);
+      sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formdata));
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async GetUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_wx",
+        user_id: "USER202307301114011710",
+      });
+      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.ippz_wangkou = res3.ippz_wangkou;
+          this.ippz_mrwg = res3.ippz_mrwg;
+          this.ippz_ip = res3.ippz_ip;
+          this.ippz_zwym = res3.ippz_zwym;
+          this.ippz_dns_sx = res3.ippz_dns_sx;
+          this.ippz_dns_by = res3.ippz_dns_by;
+          this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ippz_wifi_mm = res3.ippz_wifi_mm;
+          this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
+          this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
+          this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
+          this.ippz_mrwg4 = this.SliceData(this.ippz_mrwg)[3];
+          this.ippz_ip1 = this.SliceData(this.ippz_ip)[0];
+          this.ippz_ip2 = this.SliceData(this.ippz_ip)[1];
+          this.ippz_ip3 = this.SliceData(this.ippz_ip)[2];
+          this.ippz_ip4 = this.SliceData(this.ippz_ip)[3];
+          this.ippz_zwym1 = this.SliceData(this.ippz_zwym)[0];
+          this.ippz_zwym2 = this.SliceData(this.ippz_zwym)[1];
+          this.ippz_zwym3 = this.SliceData(this.ippz_zwym)[2];
+          this.ippz_zwym4 = this.SliceData(this.ippz_zwym)[3];
+          this.ippz_dns_sx1 = this.SliceData(this.ippz_dns_sx)[0];
+          this.ippz_dns_sx2 = this.SliceData(this.ippz_dns_sx)[1];
+          this.ippz_dns_sx3 = this.SliceData(this.ippz_dns_sx)[2];
+          this.ippz_dns_sx4 = this.SliceData(this.ippz_dns_sx)[3];
+          this.ippz_dns_by1 = this.SliceData(this.ippz_dns_by)[0];
+          this.ippz_dns_by2 = this.SliceData(this.ippz_dns_by)[1];
+          this.ippz_dns_by3 = this.SliceData(this.ippz_dns_by)[2];
+          this.ippz_dns_by4 = this.SliceData(this.ippz_dns_by)[3];
+        }
+      }
+    }
+  },
+  created() {
+    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_20231109181218.vue b/.history/src/components/DeviceVIew_20231109181218.vue
new file mode 100644
index 0000000..47c9efb
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109181218.vue
@@ -0,0 +1,414 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+        @node-click="treeNodeClick"></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-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="ruleForm">
+          <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="saveDevice">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+
+export default {
+  name: "DeviceView",
+
+  data() {
+    return {
+      loading: false,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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",
+      },
+      rules: {
+        sbpz_sbid: [
+          { required: true, message: "请输入设备ID", trigger: "blur" },
+        ],
+        sbpz_sbmc: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        sbpz_mac: [
+          { required: true, message: "请输入设备地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增设备
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    this.loading = true;
+    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>
+
+<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/DeviceVIew_20231109181256.vue b/.history/src/components/DeviceVIew_20231109181256.vue
new file mode 100644
index 0000000..300566c
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109181256.vue
@@ -0,0 +1,422 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+        @node-click="treeNodeClick"></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-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="ruleForm">
+          <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="saveDevice">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+
+export default {
+  name: "DeviceView",
+
+  data() {
+    return {
+      loading: false,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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",
+      },
+      rules: {
+        sbpz_sbid: [
+          { required: true, message: "请输入设备ID", trigger: "blur" },
+        ],
+        sbpz_sbmc: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        sbpz_mac: [
+          { required: true, message: "请输入设备地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增设备
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109181309.vue b/.history/src/components/DeviceVIew_20231109181309.vue
new file mode 100644
index 0000000..e5bea64
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109181309.vue
@@ -0,0 +1,422 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+        @node-click="treeNodeClick"></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-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="ruleForm">
+          <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="saveDevice">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SaveUserAnswer, GetUserAnswer,GetTree} from "@/api/user";
+
+export default {
+  name: "DeviceView",
+
+  data() {
+    return {
+      loading: false,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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",
+      },
+      rules: {
+        sbpz_sbid: [
+          { required: true, message: "请输入设备ID", trigger: "blur" },
+        ],
+        sbpz_sbmc: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        sbpz_mac: [
+          { required: true, message: "请输入设备地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增设备
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109181508.vue b/.history/src/components/DeviceVIew_20231109181508.vue
new file mode 100644
index 0000000..7340e84
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109181508.vue
@@ -0,0 +1,422 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+        @node-click="treeNodeClick"></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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",
+      },
+      rules: {
+        sbpz_sbid: [
+          { required: true, message: "请输入设备ID", trigger: "blur" },
+        ],
+        sbpz_sbmc: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        sbpz_mac: [
+          { required: true, message: "请输入设备地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    rightClick(e, data, node) {
+      this.menuShow = false;
+      this.menuShow = true;
+      e.preventDefault(); //关闭浏览器右键默认事件
+      this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+      document.addEventListener("click", (ev) => {
+        ev.stopImmediatePropagation();
+        if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+          this.foo();
+        }
+      });
+    },
+    // 点击时候的判断,判断是否为新增设备
+    selectMenuNode(index, indexPath) {
+      console.log(index);
+      if (index == 1) {
+        this.add_passage = true;
+      }
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuShow = false;
+      document.removeEventListener("click", this.foo); // 关掉监听，
+    },
+    treeNodeClick() {
+      this.foo();
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109181641.vue b/.history/src/components/DeviceVIew_20231109181641.vue
new file mode 100644
index 0000000..294404b
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109181641.vue
@@ -0,0 +1,426 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+        @node-click="treeNodeClick"></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    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;
+      }else{
+
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109182521.vue b/.history/src/components/DeviceVIew_20231109182521.vue
new file mode 100644
index 0000000..b6b2d1c
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109182521.vue
@@ -0,0 +1,436 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+        @node-click="treeNodeClick"></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+        //编辑
+        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;
+      }else{
+
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109182524.vue b/.history/src/components/DeviceVIew_20231109182524.vue
new file mode 100644
index 0000000..7f73e09
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109182524.vue
@@ -0,0 +1,436 @@
+<!-- 设备配置----网口设备 -->
+<template>
+  <div>
+    <div class="tree_menu" v-show="dialogVisible">
+      <el-tree :data="trees" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+        @node-click="treeNodeClick"></el-tree>
+      <!-- 树形控件右键组件 -->
+      <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+        <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+          <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+            <span slot="title">新建设备</span>
+          </el-menu-item>
+          <el-menu-item index="2" style="font-size: 12px">
+            <span slot="title">删 除</span>
+          </el-menu-item>
+          <el-menu-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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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;
+      } else {
+
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109182542.vue b/.history/src/components/DeviceVIew_20231109182542.vue
new file mode 100644
index 0000000..31bd29e
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109182542.vue
@@ -0,0 +1,436 @@
+<!-- 设备配置----网口设备 -->
+<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">
+      <!-- 树形控件右键组件 -->
+      <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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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;
+      } else {
+
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109182628.vue b/.history/src/components/DeviceVIew_20231109182628.vue
new file mode 100644
index 0000000..31bd29e
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109182628.vue
@@ -0,0 +1,436 @@
+<!-- 设备配置----网口设备 -->
+<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">
+      <!-- 树形控件右键组件 -->
+      <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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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;
+      } else {
+
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109182630.vue b/.history/src/components/DeviceVIew_20231109182630.vue
new file mode 100644
index 0000000..8e76631
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109182630.vue
@@ -0,0 +1,436 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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;
+      } else {
+
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109182632.vue b/.history/src/components/DeviceVIew_20231109182632.vue
new file mode 100644
index 0000000..8e76631
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109182632.vue
@@ -0,0 +1,436 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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;
+      } else {
+
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191309.vue b/.history/src/components/DeviceVIew_20231109191309.vue
new file mode 100644
index 0000000..0f02c34
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191309.vue
@@ -0,0 +1,437 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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;
+      } else if(index==2){
+        this.$refs["tree"].remove(this.nodekey);
+        this.sendTree();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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;
+      }
+    }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191421.vue b/.history/src/components/DeviceVIew_20231109191421.vue
new file mode 100644
index 0000000..268bf3b
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191421.vue
@@ -0,0 +1,445 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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;
+      } else if (index == 2) {
+        this.$refs["tree"].remove(this.nodekey);
+        this.sendTree();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191629.vue b/.history/src/components/DeviceVIew_20231109191629.vue
new file mode 100644
index 0000000..39d9932
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191629.vue
@@ -0,0 +1,447 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      if (data.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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191636.vue b/.history/src/components/DeviceVIew_20231109191636.vue
new file mode 100644
index 0000000..15d3d5e
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191636.vue
@@ -0,0 +1,447 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      this.trees[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      if (data.level == 3) {
+        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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191657.vue b/.history/src/components/DeviceVIew_20231109191657.vue
new file mode 100644
index 0000000..91c25b6
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191657.vue
@@ -0,0 +1,448 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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);
+      if (data.level == 3) {
+        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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191717.vue b/.history/src/components/DeviceVIew_20231109191717.vue
new file mode 100644
index 0000000..17accc3
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191717.vue
@@ -0,0 +1,448 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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 == 3) {
+        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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191725.vue b/.history/src/components/DeviceVIew_20231109191725.vue
new file mode 100644
index 0000000..17accc3
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191725.vue
@@ -0,0 +1,448 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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 == 3) {
+        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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191743.vue b/.history/src/components/DeviceVIew_20231109191743.vue
new file mode 100644
index 0000000..4412f1f
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191743.vue
@@ -0,0 +1,448 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191746.vue b/.history/src/components/DeviceVIew_20231109191746.vue
new file mode 100644
index 0000000..4412f1f
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191746.vue
@@ -0,0 +1,448 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191800.vue b/.history/src/components/DeviceVIew_20231109191800.vue
new file mode 100644
index 0000000..4412f1f
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191800.vue
@@ -0,0 +1,448 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191801.vue b/.history/src/components/DeviceVIew_20231109191801.vue
new file mode 100644
index 0000000..4412f1f
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191801.vue
@@ -0,0 +1,448 @@
+<!-- 设备配置----网口设备 -->
+<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"></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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191914.vue b/.history/src/components/DeviceVIew_20231109191914.vue
new file mode 100644
index 0000000..99f2311
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191914.vue
@@ -0,0 +1,461 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109191917.vue b/.history/src/components/DeviceVIew_20231109191917.vue
new file mode 100644
index 0000000..32e517f
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109191917.vue
@@ -0,0 +1,461 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109192009.vue b/.history/src/components/DeviceVIew_20231109192009.vue
new file mode 100644
index 0000000..32e517f
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109192009.vue
@@ -0,0 +1,461 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109192214.vue b/.history/src/components/DeviceVIew_20231109192214.vue
new file mode 100644
index 0000000..32e517f
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109192214.vue
@@ -0,0 +1,461 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109192613.vue b/.history/src/components/DeviceVIew_20231109192613.vue
new file mode 100644
index 0000000..ab83a3e
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109192613.vue
@@ -0,0 +1,467 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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 + 1000,
+        label: this.formdata.sbpz_sbmc,
+      }, this.nodekey);
+      console.log(this.trees);
+      this.sendTree();
+      this.$router.push("/dbcollect");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109192627.vue b/.history/src/components/DeviceVIew_20231109192627.vue
new file mode 100644
index 0000000..2eb6350
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109192627.vue
@@ -0,0 +1,467 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109192702.vue b/.history/src/components/DeviceVIew_20231109192702.vue
new file mode 100644
index 0000000..2eb6350
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109192702.vue
@@ -0,0 +1,467 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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/DeviceVIew_20231109193115.vue b/.history/src/components/DeviceVIew_20231109193115.vue
new file mode 100644
index 0000000..ac8f577
--- /dev/null
+++ b/.history/src/components/DeviceVIew_20231109193115.vue
@@ -0,0 +1,468 @@
+<!-- 设备配置----网口设备 -->
+<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="ruleForm">
+          <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="saveDevice">保 存</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,
+      formdata: {
+        sbpz_sbid: "有线区加工设备1",
+        sbpz_sbmc: "有线区精雕1",
+        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" },
+        ],
+      },
+    };
+  },
+  mounted() { },
+  methods: {
+    //编辑
+    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();
+      }
+    },
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      })
+      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: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
+  },
+  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-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_20231109143407.vue b/.history/src/components/DeviceWirle_20231109143407.vue
new file mode 100644
index 0000000..98289fc
--- /dev/null
+++ b/.history/src/components/DeviceWirle_20231109143407.vue
@@ -0,0 +1,420 @@
+<!-- 设备配置----无线设备 -->
+<template>
+    <div>
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px">
+                        <span slot="title">新建设备</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px">
+                        <span slot="title">删 除</span>
+                    </el-menu-item>
+                    <el-menu-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="ruleForm">
+                    <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="设备地址:" :label-width="formLabelWidth" prop="sbpz_sbdz">
+                                <el-input v-model="formdata.sbpz_sbdz" 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="saveDevice">保 存</el-button>
+                    <el-button @click="add_passage = false">取 消</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+
+export default {
+    name: "DeviceWirle",
+
+    data() {
+        return {
+            loading: false,
+            formdata: {
+                sbpz_sbid: "有线区加工设备1",
+                sbpz_sbmc: "有线区精雕1",
+                sbpz_sbdz: "",
+                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",
+            },
+            rules: {
+                sbpz_sbid: [
+                    { required: true, message: "请输入设备ID", trigger: "blur" },
+                ],
+                sbpz_sbmc: [
+                    { required: true, message: "请输入设备名称", trigger: "blur" },
+                ],
+                sbpz_sbdz: [
+                    { required: true, message: "请输入设备地址", trigger: "blur" },
+                ],
+            },
+        };
+    },
+    methods: {
+        rightClick(e, data, node) {
+            this.menuShow = false;
+            this.menuShow = true;
+            e.preventDefault(); //关闭浏览器右键默认事件
+            this.rightMenu = { top: e.pageY + "px", left: e.pageX + "px" };
+            document.addEventListener("click", (ev) => {
+                ev.stopImmediatePropagation();
+                if (ev.target !== document.querySelector(".el-menu-item.is-active")) {
+                    this.foo();
+                }
+            });
+        },
+        // 点击时候的判断,判断是否为新增设备
+        selectMenuNode(index, indexPath) {
+            console.log(index);
+            if (index == 1) {
+                this.add_passage = true;
+            }
+        },
+        foo() {
+            // 取消鼠标监听事件 菜单栏
+            this.menuShow = false;
+            document.removeEventListener("click", this.foo); // 关掉监听，
+        },
+        treeNodeClick() {
+            this.foo();
+        },
+        getDriveName() {
+            this.diag_drive = true;
+        },
+        closeMenu(ev) {
+            console.log({ ev });
+            this.dialogVisible = false;
+        },
+        async saveDevice() {
+            var obj = {
+                sbpz_sbid: this.formdata.sbpz_sbid,
+                sbpz_sbmc: this.formdata.sbpz_sbmc,
+                sbpz_sbdz: this.formdata.sbpz_sbdz,
+                sbpz_jysb: String(Number(this.formdata.sbpz_jysb)),
+                sbpz_jdzxz: String(Number(this.formdata.sbpz_jdzxz)),
+            }
+            let datas = sessionStorage.getItem("DB-IotLite_wx");
+            console.log(datas);
+            datas = { ...JSON.parse(datas), ...obj };
+            this.add_passage = false;
+            let res = await SaveUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+                mark_value: JSON.stringify(obj),
+            });
+            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.$router.push("/dbwificollect");
+        },
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.data && answer.data.state) {
+                // 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_sbdz = obj.sbpz_sbdz;
+                }
+            }
+        },
+    },
+    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);
+}
+
+.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>
+  
\ No newline at end of file
diff --git a/.history/src/components/GateWay_20231109151637.vue b/.history/src/components/GateWay_20231109151637.vue
new file mode 100644
index 0000000..2c45a60
--- /dev/null
+++ b/.history/src/components/GateWay_20231109151637.vue
@@ -0,0 +1,533 @@
+<!-- 有线网关设置 -->
+<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">
+        <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="默认网关:"
+                  :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"
+                        type="number"
+                      ></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="saveAll()">保 存</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: "DataView",
+  data() {
+    return {
+      // disabled: true,
+      // 判断是否保存过
+      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: "请输入子网掩码", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [
+          { required: true, message: "请输入IP地址", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+          { type: "number", message: "默认网关必须为数字值" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+          { type: "number", message: "首选DNS必须为数字值" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+          { type: "number", message: "备选DNS必须为数字值" },
+        ],
+        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: {
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    // handleInput(index) {
+    //   // 在输入框输入时，限制每个部分的值在0到255之间
+    //   let value = this.formdata.ippz_mrwg[index];
+    //   if (value !== '' && (isNaN(value) || parseInt(value) < 0 || parseInt(value) > 255)) {
+    //     this.formdata.ippz_mrwg[index] = '';
+    //   }
+    // },
+    // saveAll(formName) {
+    //   // this.$refs.validate((valid) => {
+    //   //   if (valid) {
+    //   //     alert('submit!');
+    //   //   } else {
+    //   //     console.log('error submit!!');
+    //   //     return false;
+    //   //   }
+    //   // });
+    //   this.$refs[formName].validate(valid => {
+    //     if (valid) {
+    //       // 校验通过，可以提交表单数据
+    //       const ipAddress = this.formdata.ippz_mrwg.join('.');
+    //       alert('IP 地址校验通过:', ipAddress);
+    //       console.log(ipAddress);
+    //       // 这里可以处理表单提交逻辑
+    //     } else {
+    //       // 校验未通过，不提交表单数据
+    //       alert('请检查输入的 IP 地址');
+    //     }
+    //   });
+    // },
+
+    // 保存数据, 发送请求
+    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
+      );
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      let data = {
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301109254198",
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res1 = await SaveUserAnswer(data);
+      if (res1.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res1);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      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_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.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/GateWay_20231109151747.vue b/.history/src/components/GateWay_20231109151747.vue
new file mode 100644
index 0000000..21ed7fd
--- /dev/null
+++ b/.history/src/components/GateWay_20231109151747.vue
@@ -0,0 +1,534 @@
+<!-- 有线网关设置 -->
+<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">
+        <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="默认网关:"
+                  :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"
+                        type="number"
+                      ></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="saveAll()">保 存</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: "DataView",
+  data() {
+    return {
+      // disabled: true,
+      // 判断是否保存过
+      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: "请输入子网掩码", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [
+          { required: true, message: "请输入IP地址", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+          { type: "number", message: "默认网关必须为数字值" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+          { type: "number", message: "首选DNS必须为数字值" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+          { type: "number", message: "备选DNS必须为数字值" },
+        ],
+        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: {
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    // handleInput(index) {
+    //   // 在输入框输入时，限制每个部分的值在0到255之间
+    //   let value = this.formdata.ippz_mrwg[index];
+    //   if (value !== '' && (isNaN(value) || parseInt(value) < 0 || parseInt(value) > 255)) {
+    //     this.formdata.ippz_mrwg[index] = '';
+    //   }
+    // },
+    // saveAll(formName) {
+    //   // this.$refs.validate((valid) => {
+    //   //   if (valid) {
+    //   //     alert('submit!');
+    //   //   } else {
+    //   //     console.log('error submit!!');
+    //   //     return false;
+    //   //   }
+    //   // });
+    //   this.$refs[formName].validate(valid => {
+    //     if (valid) {
+    //       // 校验通过，可以提交表单数据
+    //       const ipAddress = this.formdata.ippz_mrwg.join('.');
+    //       alert('IP 地址校验通过:', ipAddress);
+    //       console.log(ipAddress);
+    //       // 这里可以处理表单提交逻辑
+    //     } else {
+    //       // 校验未通过，不提交表单数据
+    //       alert('请检查输入的 IP 地址');
+    //     }
+    //   });
+    // },
+
+    // 保存数据, 发送请求
+    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
+      );
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      let data = {
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301109254198",
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res1 = await SaveUserAnswer(data);
+      if (res1.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res1);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/GateWay_20231109151756.vue b/.history/src/components/GateWay_20231109151756.vue
new file mode 100644
index 0000000..676252b
--- /dev/null
+++ b/.history/src/components/GateWay_20231109151756.vue
@@ -0,0 +1,475 @@
+<!-- 有线网关设置 -->
+<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">
+        <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="默认网关:" :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" type="number"></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="saveAll()">保 存</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: "DataView",
+  data() {
+    return {
+      // disabled: true,
+      // 判断是否保存过
+      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: "请输入子网掩码", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [
+          { required: true, message: "请输入IP地址", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+          { type: "number", message: "默认网关必须为数字值" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+          { type: "number", message: "首选DNS必须为数字值" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+          { type: "number", message: "备选DNS必须为数字值" },
+        ],
+        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: {
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    // handleInput(index) {
+    //   // 在输入框输入时，限制每个部分的值在0到255之间
+    //   let value = this.formdata.ippz_mrwg[index];
+    //   if (value !== '' && (isNaN(value) || parseInt(value) < 0 || parseInt(value) > 255)) {
+    //     this.formdata.ippz_mrwg[index] = '';
+    //   }
+    // },
+    // saveAll(formName) {
+    //   // this.$refs.validate((valid) => {
+    //   //   if (valid) {
+    //   //     alert('submit!');
+    //   //   } else {
+    //   //     console.log('error submit!!');
+    //   //     return false;
+    //   //   }
+    //   // });
+    //   this.$refs[formName].validate(valid => {
+    //     if (valid) {
+    //       // 校验通过，可以提交表单数据
+    //       const ipAddress = this.formdata.ippz_mrwg.join('.');
+    //       alert('IP 地址校验通过:', ipAddress);
+    //       console.log(ipAddress);
+    //       // 这里可以处理表单提交逻辑
+    //     } else {
+    //       // 校验未通过，不提交表单数据
+    //       alert('请检查输入的 IP 地址');
+    //     }
+    //   });
+    // },
+
+    // 保存数据, 发送请求
+    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
+      );
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(this.formData));
+      let data = {
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301109254198",
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res1 = await SaveUserAnswer(data);
+      if (res1.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res1);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/GateWay_20231109152029.vue b/.history/src/components/GateWay_20231109152029.vue
new file mode 100644
index 0000000..f5172e7
--- /dev/null
+++ b/.history/src/components/GateWay_20231109152029.vue
@@ -0,0 +1,476 @@
+<!-- 有线网关设置 -->
+<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">
+        <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="默认网关:" :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" type="number"></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="saveAll()">保 存</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: "DataView",
+  data() {
+    return {
+      // disabled: true,
+      // 判断是否保存过
+      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: "请输入子网掩码", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [
+          { required: true, message: "请输入IP地址", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+          { type: "number", message: "默认网关必须为数字值" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+          { type: "number", message: "首选DNS必须为数字值" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+          { type: "number", message: "备选DNS必须为数字值" },
+        ],
+        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: {
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    // handleInput(index) {
+    //   // 在输入框输入时，限制每个部分的值在0到255之间
+    //   let value = this.formdata.ippz_mrwg[index];
+    //   if (value !== '' && (isNaN(value) || parseInt(value) < 0 || parseInt(value) > 255)) {
+    //     this.formdata.ippz_mrwg[index] = '';
+    //   }
+    // },
+    // saveAll(formName) {
+    //   // this.$refs.validate((valid) => {
+    //   //   if (valid) {
+    //   //     alert('submit!');
+    //   //   } else {
+    //   //     console.log('error submit!!');
+    //   //     return false;
+    //   //   }
+    //   // });
+    //   this.$refs[formName].validate(valid => {
+    //     if (valid) {
+    //       // 校验通过，可以提交表单数据
+    //       const ipAddress = this.formdata.ippz_mrwg.join('.');
+    //       alert('IP 地址校验通过:', ipAddress);
+    //       console.log(ipAddress);
+    //       // 这里可以处理表单提交逻辑
+    //     } else {
+    //       // 校验未通过，不提交表单数据
+    //       alert('请检查输入的 IP 地址');
+    //     }
+    //   });
+    // },
+
+    // 保存数据, 发送请求
+    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: "USER202307301109254198",
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res1 = await SaveUserAnswer(data);
+      if (res1.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res1);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/GateWay_20231109152207.vue b/.history/src/components/GateWay_20231109152207.vue
new file mode 100644
index 0000000..ee99a7a
--- /dev/null
+++ b/.history/src/components/GateWay_20231109152207.vue
@@ -0,0 +1,476 @@
+<!-- 有线网关设置 -->
+<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">
+        <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="默认网关:" :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" type="number"></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="saveAll()">保 存</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: "DataView",
+  data() {
+    return {
+      // disabled: true,
+      // 判断是否保存过
+      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: "请输入子网掩码", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [
+          { required: true, message: "请输入IP地址", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+          { type: "number", message: "默认网关必须为数字值" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+          { type: "number", message: "首选DNS必须为数字值" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+          { type: "number", message: "备选DNS必须为数字值" },
+        ],
+        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: {
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    // handleInput(index) {
+    //   // 在输入框输入时，限制每个部分的值在0到255之间
+    //   let value = this.formdata.ippz_mrwg[index];
+    //   if (value !== '' && (isNaN(value) || parseInt(value) < 0 || parseInt(value) > 255)) {
+    //     this.formdata.ippz_mrwg[index] = '';
+    //   }
+    // },
+    // saveAll(formName) {
+    //   // this.$refs.validate((valid) => {
+    //   //   if (valid) {
+    //   //     alert('submit!');
+    //   //   } else {
+    //   //     console.log('error submit!!');
+    //   //     return false;
+    //   //   }
+    //   // });
+    //   this.$refs[formName].validate(valid => {
+    //     if (valid) {
+    //       // 校验通过，可以提交表单数据
+    //       const ipAddress = this.formdata.ippz_mrwg.join('.');
+    //       alert('IP 地址校验通过:', ipAddress);
+    //       console.log(ipAddress);
+    //       // 这里可以处理表单提交逻辑
+    //     } else {
+    //       // 校验未通过，不提交表单数据
+    //       alert('请检查输入的 IP 地址');
+    //     }
+    //   });
+    // },
+
+    // 保存数据, 发送请求
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res1 = await SaveUserAnswer(data);
+      if (res1.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res1);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/GateWay_20231109152340.vue b/.history/src/components/GateWay_20231109152340.vue
new file mode 100644
index 0000000..f5dbf35
--- /dev/null
+++ b/.history/src/components/GateWay_20231109152340.vue
@@ -0,0 +1,476 @@
+<!-- 有线网关设置 -->
+<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">
+        <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="默认网关:" :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="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="saveAll()">保 存</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: "DataView",
+  data() {
+    return {
+      // disabled: true,
+      // 判断是否保存过
+      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: "请输入子网掩码", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [
+          { required: true, message: "请输入IP地址", trigger: "blur" },
+          { type: "number", message: "子网掩码必须为数字值" },
+        ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
+        ippz_mrwg: [
+          { required: true, message: "请输入默认网关", trigger: "blur" },
+          { type: "number", message: "默认网关必须为数字值" },
+        ],
+        ippz_dns_sx: [
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
+          { type: "number", message: "首选DNS必须为数字值" },
+        ],
+        ippz_dns_by: [
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
+          { type: "number", message: "备选DNS必须为数字值" },
+        ],
+        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: {
+    // 封装合并输入框的数据
+    Merge(value, value1, value2, value3, value4) {
+      value = value1 + "." + value2 + "." + value3 + "." + value4;
+      return value;
+    },
+    // handleInput(index) {
+    //   // 在输入框输入时，限制每个部分的值在0到255之间
+    //   let value = this.formdata.ippz_mrwg[index];
+    //   if (value !== '' && (isNaN(value) || parseInt(value) < 0 || parseInt(value) > 255)) {
+    //     this.formdata.ippz_mrwg[index] = '';
+    //   }
+    // },
+    // saveAll(formName) {
+    //   // this.$refs.validate((valid) => {
+    //   //   if (valid) {
+    //   //     alert('submit!');
+    //   //   } else {
+    //   //     console.log('error submit!!');
+    //   //     return false;
+    //   //   }
+    //   // });
+    //   this.$refs[formName].validate(valid => {
+    //     if (valid) {
+    //       // 校验通过，可以提交表单数据
+    //       const ipAddress = this.formdata.ippz_mrwg.join('.');
+    //       alert('IP 地址校验通过:', ipAddress);
+    //       console.log(ipAddress);
+    //       // 这里可以处理表单提交逻辑
+    //     } else {
+    //       // 校验未通过，不提交表单数据
+    //       alert('请检查输入的 IP 地址');
+    //     }
+    //   });
+    // },
+
+    // 保存数据, 发送请求
+    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: "USER202307301114011710",
+        mark_value: JSON.stringify(this.formData),
+      };
+      let res1 = await SaveUserAnswer(data);
+      if (res1.status == 200) {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      }
+      console.log(res1);
+    },
+    CopyText() {
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+    async getUserAnswer() {
+      this.loading = true;
+      let res2 = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        user_id: "USER202307301114011710",
+      });
+      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.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/IpConfiguration_20231109151434.vue b/.history/src/components/IpConfiguration_20231109151434.vue
new file mode 100644
index 0000000..e9eddf5
--- /dev/null
+++ b/.history/src/components/IpConfiguration_20231109151434.vue
@@ -0,0 +1,449 @@
+<!-- ip设置页面 -->
+<template>
+  <div>
+    <el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%" v-loading="loading">
+      <p class="txt">本页面涉及排错，请检查修改默认值</p>
+      <div class="ip_setting">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"
+          :label-position="labelPosition">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="IP获取方式" prop="ippz_ip_hqfs">
+                <el-select v-model="ruleForm.ippz_ip_hqfs" style="width: 200px">
+                  <el-option label="Static IP" value="Static IP"></el-option>
+                  <el-option label="DHCP" value="DHCP"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="DNS获取方式" prop="ippz_dns_hqfs">
+                <el-select v-model="ruleForm.ippz_dns_hqfs" style="width: 200px">
+                  <el-option label="自动获取" value="自动获取"></el-option>
+                  <el-option label="手动设定" value="手动设定"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="本机IP" 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="子网掩码" 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="网关地址" prop="ippz_mrwg">
+                <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-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="主DNS服务器" prop="ippz_dns_zy">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy1"></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy2"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy3"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy4"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备用DNS服务器" 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>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveAll">保存</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+import { isValidPrimaryDNS } from "../validate";
+import { Loading } from "element-ui";
+export default {
+  data() {
+    return {
+      loading: false,
+      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_mrwg1: "",
+      ippz_mrwg2: "",
+      ippz_mrwg3: "",
+      ippz_mrwg4: "",
+      ippz_dns_zy1: "",
+      ippz_dns_zy2: "",
+      ippz_dns_zy3: "",
+      ippz_dns_zy4: "",
+      ippz_dns_by1: "",
+      ippz_dns_by2: "",
+      ippz_dns_by3: "",
+      ippz_dns_by4: "",
+      dialogVisible: true,
+      labelPosition: "left",
+      ruleForm: {
+        ippz_ip_hqfs: "Static IP",
+        ippz_dns_hqfs: "自动获取",
+        ippz_ip: "",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_zy: "",
+        ippz_dns_by: "",
+      },
+      rules: {
+        ippz_ip_hqfs: [{ required: true, message: "", trigger: "blur" }],
+        ippz_dns_hqfs: [{ required: true, message: "", trigger: "blur" }],
+        ippz_ip: [
+          {
+            required: true,
+            validator: this.validateIpAddress,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            validator: this.validateSubnetMask,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_mrwg: [
+          {
+            required: true,
+            validator: this.validateGateway,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_dns_zy: [
+          {
+            required: true,
+            validator: this.validatePrimaryDNS,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            validator: this.validatePrimaryDNS,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.dialogVisible = false;
+      this.ruleForm.ippz_ip = this.Merge(
+        this.ruleForm.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.ruleForm.ippz_zwym = this.Merge(
+        this.ruleForm.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.ruleForm.ippz_mrwg = this.Merge(
+        this.ruleForm.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.ruleForm.ippz_dns_zy = this.Merge(
+        this.ruleForm.ippz_dns_zy,
+        this.ippz_dns_zy1,
+        this.ippz_dns_zy2,
+        this.ippz_dns_zy3,
+        this.ippz_dns_zy4
+      );
+      this.ruleForm.ippz_dns_by = this.Merge(
+        this.ruleForm.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      let datas = sessionStorage.getItem("CKFWQ_yx");
+      datas = { ...JSON.parse(datas), ...this.ruleForm };
+      let res = await SaveUserAnswer({
+        mark: "CKFWQ_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      if (res.status == 200) {
+        sessionStorage.setItem("CKFWQ_yx", JSON.stringify(datas));
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message.error("保存失败");
+      }
+    },
+    async GetUserAnswer() {
+      let answers = await GetUserAnswer({
+        mark: "CKFWQ_yx",
+        user_id: "USER202307301109254198",
+      });
+      console.log(answers);
+      if (answers.data.data && answers.data.state) {
+        let obj = JSON.parse(answers.data.data.mark_value);
+        console.log(obj);
+        this.ruleForm.ippz_ip_hqfs = obj.ippz_ip_hqfs;
+        this.ruleForm.ippz_dns_hqfs = obj.ippz_dns_hqfs;
+        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_mrwg1 = obj.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
+          this.ippz_dns_zy1 = obj.ippz_dns_zy.split(".")[0];
+          this.ippz_dns_zy2 = obj.ippz_dns_zy.split(".")[1];
+          this.ippz_dns_zy3 = obj.ippz_dns_zy.split(".")[2];
+          this.ippz_dns_zy4 = obj.ippz_dns_zy.split(".")[3];
+          this.ippz_dns_by1 = obj.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = obj.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = obj.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = obj.ippz_dns_by.split(".")[3];
+        }
+      }
+    },
+    submitForm() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+          value
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //子网掩码验证
+    validateSubnetMask(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
+          value
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //网关地址验证
+    validateGateway(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入网关地址"));
+      } else if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //dns服务验证
+    validatePrimaryDNS(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!isValidPrimaryDNS(value)) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+  },
+  created() {
+    this.Loading = true;
+    this.GetUserAnswer();
+    this.Loading = false;
+  },
+};
+</script>
+<style scoped lang="less">
+/deep/ .ip_setting {
+  .el-input__inner {
+    height: 30px;
+    text-align: center;
+    padding: 0;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      padding: 0px 2px;
+      color: black;
+      text-align: left;
+      line-height: 32px;
+      height: 20px;
+    }
+
+    .el-col-5 {
+      width: 43px;
+      height: 30px;
+    }
+
+    .el-col-24 {
+      padding-right: 152px;
+    }
+  }
+}
+
+.el-dialog {
+  position: relative;
+}
+
+.txt {
+  position: absolute;
+  top: 22px;
+  left: 100px;
+  color: red;
+}
+</style>
diff --git a/.history/src/components/IpConfiguration_20231109152557.vue b/.history/src/components/IpConfiguration_20231109152557.vue
new file mode 100644
index 0000000..1b57b6d
--- /dev/null
+++ b/.history/src/components/IpConfiguration_20231109152557.vue
@@ -0,0 +1,449 @@
+<!-- ip设置页面 -->
+<template>
+  <div>
+    <el-dialog title="IP配置" :visible.sync="dialogVisible" width="30%" v-loading="loading">
+      <p class="txt">本页面涉及排错，请检查修改默认值</p>
+      <div class="ip_setting">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"
+          :label-position="labelPosition">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="IP获取方式" prop="ippz_ip_hqfs">
+                <el-select v-model="ruleForm.ippz_ip_hqfs" style="width: 200px">
+                  <el-option label="Static IP" value="Static IP"></el-option>
+                  <el-option label="DHCP" value="DHCP"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="DNS获取方式" prop="ippz_dns_hqfs">
+                <el-select v-model="ruleForm.ippz_dns_hqfs" style="width: 200px">
+                  <el-option label="自动获取" value="自动获取"></el-option>
+                  <el-option label="手动设定" value="手动设定"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="本机IP" 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="子网掩码" 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="网关地址" prop="ippz_mrwg">
+                <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-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="主DNS服务器" prop="ippz_dns_zy">
+                <el-row>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy1"></el-input>
+                  </el-col>
+                  <el-col :span="1">. </el-col>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy2"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy3"></el-input>
+                  </el-col>
+                  <el-col :span="1">.</el-col>
+                  <el-col :span="5">
+                    <el-input v-model="ippz_dns_zy4"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备用DNS服务器" 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>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveAll">保存</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+import { isValidPrimaryDNS } from "../validate";
+import { Loading } from "element-ui";
+export default {
+  data() {
+    return {
+      loading: false,
+      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_mrwg1: "",
+      ippz_mrwg2: "",
+      ippz_mrwg3: "",
+      ippz_mrwg4: "",
+      ippz_dns_zy1: "",
+      ippz_dns_zy2: "",
+      ippz_dns_zy3: "",
+      ippz_dns_zy4: "",
+      ippz_dns_by1: "",
+      ippz_dns_by2: "",
+      ippz_dns_by3: "",
+      ippz_dns_by4: "",
+      dialogVisible: true,
+      labelPosition: "left",
+      ruleForm: {
+        ippz_ip_hqfs: "Static IP",
+        ippz_dns_hqfs: "自动获取",
+        ippz_ip: "",
+        ippz_zwym: "",
+        ippz_mrwg: "",
+        ippz_dns_zy: "",
+        ippz_dns_by: "",
+      },
+      rules: {
+        ippz_ip_hqfs: [{ required: true, message: "", trigger: "blur" }],
+        ippz_dns_hqfs: [{ required: true, message: "", trigger: "blur" }],
+        ippz_ip: [
+          {
+            required: true,
+            validator: this.validateIpAddress,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_zwym: [
+          {
+            required: true,
+            validator: this.validateSubnetMask,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_mrwg: [
+          {
+            required: true,
+            validator: this.validateGateway,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_dns_zy: [
+          {
+            required: true,
+            validator: this.validatePrimaryDNS,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+        ippz_dns_by: [
+          {
+            required: true,
+            validator: this.validatePrimaryDNS,
+            trigger: "blur",
+            message: "",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 封装合并输入框的数据
+    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.dialogVisible = false;
+      this.ruleForm.ippz_ip = this.Merge(
+        this.ruleForm.ippz_ip,
+        this.ippz_ip1,
+        this.ippz_ip2,
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.ruleForm.ippz_zwym = this.Merge(
+        this.ruleForm.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.ruleForm.ippz_mrwg = this.Merge(
+        this.ruleForm.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.ruleForm.ippz_dns_zy = this.Merge(
+        this.ruleForm.ippz_dns_zy,
+        this.ippz_dns_zy1,
+        this.ippz_dns_zy2,
+        this.ippz_dns_zy3,
+        this.ippz_dns_zy4
+      );
+      this.ruleForm.ippz_dns_by = this.Merge(
+        this.ruleForm.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
+      let datas = sessionStorage.getItem("CKFWQ_yx");
+      datas = { ...JSON.parse(datas), ...this.ruleForm };
+      let res = await SaveUserAnswer({
+        mark: "CKFWQ_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      });
+      console.log(res);
+      if (res.status == 200) {
+        sessionStorage.setItem("CKFWQ_yx", JSON.stringify(datas));
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+      } else {
+        this.$message.error("保存失败");
+      }
+    },
+    async GetUserAnswer() {
+      let answers = await GetUserAnswer({
+        mark: "CKFWQ_yx",
+        user_id: "USER202307301114011710",
+      });
+      console.log(answers);
+      if (answers.data.data && answers.data.state) {
+        let obj = JSON.parse(answers.data.data.mark_value);
+        console.log(obj);
+        this.ruleForm.ippz_ip_hqfs = obj.ippz_ip_hqfs;
+        this.ruleForm.ippz_dns_hqfs = obj.ippz_dns_hqfs;
+        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_mrwg1 = obj.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
+          this.ippz_dns_zy1 = obj.ippz_dns_zy.split(".")[0];
+          this.ippz_dns_zy2 = obj.ippz_dns_zy.split(".")[1];
+          this.ippz_dns_zy3 = obj.ippz_dns_zy.split(".")[2];
+          this.ippz_dns_zy4 = obj.ippz_dns_zy.split(".")[3];
+          this.ippz_dns_by1 = obj.ippz_dns_by.split(".")[0];
+          this.ippz_dns_by2 = obj.ippz_dns_by.split(".")[1];
+          this.ippz_dns_by3 = obj.ippz_dns_by.split(".")[2];
+          this.ippz_dns_by4 = obj.ippz_dns_by.split(".")[3];
+        }
+      }
+    },
+    submitForm() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    //ip地址验证
+    validateIpAddress(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入IP地址"));
+      } else if (
+        !/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+          value
+        )
+      ) {
+        callback(new Error("请输入有效的IP地址"));
+      } else {
+        callback();
+      }
+    },
+    //子网掩码验证
+    validateSubnetMask(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入子网掩码"));
+      } else if (
+        !/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
+          value
+        )
+      ) {
+        callback(new Error("请输入有效的子网掩码"));
+      } else {
+        callback();
+      }
+    },
+    //网关地址验证
+    validateGateway(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入网关地址"));
+      } else if (!/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) {
+        callback(new Error("请输入有效的网关地址"));
+      } else {
+        callback();
+      }
+    },
+    //dns服务验证
+    validatePrimaryDNS(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入主DNS服务器地址"));
+      } else if (!isValidPrimaryDNS(value)) {
+        callback(new Error("请输入有效的主DNS服务器地址"));
+      } else {
+        callback();
+      }
+    },
+  },
+  created() {
+    this.Loading = true;
+    this.GetUserAnswer();
+    this.Loading = false;
+  },
+};
+</script>
+<style scoped lang="less">
+/deep/ .ip_setting {
+  .el-input__inner {
+    height: 30px;
+    text-align: center;
+    padding: 0;
+  }
+
+  .el-row {
+    display: flex;
+    align-items: flex-end;
+
+    .el-col-1 {
+      padding: 0px 2px;
+      color: black;
+      text-align: left;
+      line-height: 32px;
+      height: 20px;
+    }
+
+    .el-col-5 {
+      width: 43px;
+      height: 30px;
+    }
+
+    .el-col-24 {
+      padding-right: 152px;
+    }
+  }
+}
+
+.el-dialog {
+  position: relative;
+}
+
+.txt {
+  position: absolute;
+  top: 22px;
+  left: 100px;
+  color: red;
+}
+</style>
diff --git a/.history/src/components/PortConfiguration_20231109152557.vue b/.history/src/components/PortConfiguration_20231109152557.vue
new file mode 100644
index 0000000..b369a2f
--- /dev/null
+++ b/.history/src/components/PortConfiguration_20231109152557.vue
@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <!-- <el-button @click="dialogVisible = true">端口配置</el-button> -->
+    <div v-show="dialogVisible" class="tree_menu">
+      <el-tree
+        :data="datas"
+        :props="defaultProps"
+        :default-expanded-keys="['keyOfNodeToExpand']"
+        :default-checked-keys="['keyOfNodeToSelect']"
+      ></el-tree>
+      <!-- 树形控件右键组件 -->
+    </div>
+
+    <div class="port_content">
+      <el-dialog title="端口配置" :visible.sync="dialogVisible" width="30%">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="150px"
+          class="demo-ruleForm"
+          :label-position="labelPosition"
+        >
+          <el-form-item label="波特率(bps)" prop="dkpz_btl">
+            <el-col :span="15">
+              <el-select v-model="ruleForm.dkpz_btl">
+                <el-option label="9600" value="9600"></el-option>
+                <el-option label="19200" value="19200"></el-option>
+                <el-option label="28800" value="28800"></el-option>
+                <el-option label="38400" value="38400"></el-option>
+                <el-option label="48000" value="48000"></el-option>
+                <el-option label="57600" value="57600"></el-option>
+                <el-option label="67200" value="67200"></el-option>
+                <el-option label="76800" value="76800"></el-option>
+                <el-option label="86400" value="86400"></el-option>
+                <el-option label="96000" value="96000"></el-option>
+                <el-option label="105600" value="105600"></el-option>
+                <el-option label="115200" value="115200"></el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="数据位(bit)" prop="dkpz_sjw">
+            <el-col :span="15">
+              <el-select v-model="ruleForm.dkpz_sjw">
+                <el-option label="8" value="8"></el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="检验位" prop="dkpz_jyw">
+            <el-col :span="15">
+              <el-select v-model="ruleForm.dkpz_jyw">
+                <el-option
+                  label="无校验(None)"
+                  value="无校验(None)"
+                ></el-option>
+                <el-option label="奇校验" value="奇校验"></el-option>
+                <el-option label="偶校验" value="偶校验"></el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="停止位" prop="dkpz_tzw">
+            <el-col :span="15">
+              <el-select v-model="ruleForm.dkpz_tzw">
+                <el-option label="1" value="1"></el-option>
+                <el-option label="2" value="2"></el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="流控模式" prop="dkpz_lkms">
+            <el-col :span="15">
+              <el-select v-model="ruleForm.dkpz_lkms">
+                <el-option label="None" value="None"></el-option>
+                <el-option label="XON/XOF" value="XON/XOF"></el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="打包长度(bytes)" prop="dkpz_dbcd">
+            <el-col :span="15">
+              <el-input
+                v-model="ruleForm.dkpz_dbcd"
+                placeholder="0-1460"
+              ></el-input>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="打包时间(ms)" prop="dkpz_dbsj">
+            <el-col :span="15">
+              <el-input
+                v-model="ruleForm.dkpz_dbsj"
+                placeholder="0-255"
+              ></el-input>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="同步波特率(RF2217)" prop="dkpz_tbbtl">
+            <el-col :span="15">
+              <el-select v-model="ruleForm.dkpz_tbbtl">
+                <el-option label="None" value="None"></el-option>
+                <el-option label="启用" value="启用"></el-option>
+              </el-select>
+            </el-col>
+          </el-form-item>
+          <el-checkbox
+            label="使能串口心跳包"
+            name="type"
+            v-model="ruleForm.dkpz_snckxtb"
+          ></el-checkbox>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <!-- <el-button type="primary" @click="submitForm('ruleForm'), (dialogVisible = false)">保存</el-button> -->
+          <el-button type="primary" @click="savePort">保 存</el-button>
+          <el-button @click="dialogVisible = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+import { isValidPrimaryDNS } from "../validate";
+export default {
+  data() {
+    return {
+      datas: [
+        {
+          name: "端口",
+          children: [
+            {
+              name: "端口1",
+            },
+            {
+              name: "端口2",
+            },
+            {
+              name: "端口3",
+            },
+            {
+              name: "端口4",
+            },
+            {
+              name: "网页转串口",
+            },
+          ],
+        },
+      ],
+
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      dialogVisible: true,
+      labelPosition: "left",
+      ruleForm: {
+        dkpz_btl: "",
+        dkpz_sjw: "",
+        dkpz_jyw: "",
+        dkpz_tzw: "",
+        dkpz_lkms: "",
+        dkpz_dbcd: "",
+        dkpz_dbsj: "",
+        dkpz_tbbtl: "",
+        dkpz_snckxtb: false,
+      },
+      rules: {
+        dkpz_btl: [
+          { required: true, message: "请选择波特率", trigger: "change" },
+        ],
+        dkpz_sjw: [
+          { required: true, message: "请选择数据位", trigger: "change" },
+        ],
+        dkpz_tzw: [
+          { required: true, message: "请选择停止位", trigger: "change" },
+        ],
+        dkpz_jyw: [
+          { required: true, message: "请选择检验位", trigger: "change" },
+        ],
+        dkpz_lkms: [
+          { required: true, message: "请选择流控模式", trigger: "blur" },
+        ],
+        dkpz_dbcd: [
+          { required: true, message: "请输入打包长度", trigger: "blur" },
+          // 自定义校验规则，这里限制最大长度为1000
+          { validator: this.validatePackagingLength, trigger: "blur" },
+          { type: "number", message: "打包长度必须为数字值", trigger: "blur" },
+        ],
+        dkpz_tbbtl: [
+          { required: true, message: "请输入打包时间", trigger: "blur" },
+          { type: "number", message: "打包时间必须为数字值", trigger: "blur" },
+          // 自定义校验规则，这里限制最大长度为1000
+          { validator: this.validatTime, trigger: "blur" },
+        ],
+        dkpz_tbbtl: [
+          { required: true, message: "请选择同步波特率", trigger: "change" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.GetUserAnswer();
+  },
+  methods: {
+    async GetUserAnswer() {
+      let { data } = await GetUserAnswer({
+        mark: "CKFWQ_yx",
+        user_id: "USER202307301114011710",
+      });
+      if (data.data) {
+        let obj = JSON.parse(data.data.mark_value);
+        this.ruleForm.dkpz_btl = obj.dkpz_btl;
+        this.ruleForm.dkpz_sjw = obj.dkpz_sjw;
+        this.ruleForm.dkpz_jyw = obj.dkpz_jyw;
+        this.ruleForm.dkpz_tzw = obj.dkpz_tzw;
+        this.ruleForm.dkpz_lkms = obj.dkpz_lkms;
+        this.ruleForm.dkpz_dbcd = obj.dkpz_dbcd;
+        this.ruleForm.dkpz_dbsj = obj.dkpz_dbsj;
+        this.ruleForm.dkpz_tbbtl = obj.dkpz_tbbtl;
+        this.ruleForm.dkpz_snckxtb = Boolean(obj.dkpz_snckxtb);
+      }
+    },
+    savePort() {
+      this.ruleForm.dkpz_snckxtb = String(Number(this.ruleForm.dkpz_snckxtb));
+      let datas = localStorage.getItem("CKFWQ_yx");
+      datas = { ...JSON.parse(datas), ...this.ruleForm };
+      SaveUserAnswer({
+        mark: "CKFWQ_yx",
+        user_id: "USER202307301114011710",
+        mark_value: JSON.stringify(datas),
+      }).then((res) => {
+        console.log(res);
+      });
+      localStorage.setItem("CKFWQ_yx", JSON.stringify(datas));
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    validatePackagingLength(rule, value, callback) {
+      if (value && parseInt(value, 10) > 1460) {
+        callback(new Error("打包长度不能超过1000"));
+      } else {
+        callback();
+      }
+    },
+    validatTime(rule, value, callback) {
+      if (value && parseInt(value, 10) > 255) {
+        callback(new Error("打包时间不能超过255"));
+      } else {
+        callback();
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.tree_menu {
+  position: absolute;
+  width: 286px;
+  height: 753px;
+  z-index: 99999999999999;
+  left: 64px;
+  top: 104px;
+  width: 286px;
+  height: 753px;
+  line-height: 20px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  border: 1px solid rgba(220, 220, 220, 1);
+}
+
+/deep/ .port_content {
+  .el-input {
+    width: 200px;
+    height: 30px;
+  }
+}
+</style>
diff --git a/.history/src/components/SerialPort_20231109142603.vue b/.history/src/components/SerialPort_20231109142603.vue
new file mode 100644
index 0000000..cc76bb3
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142603.vue
@@ -0,0 +1,1033 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            console.log(answer);
+            if (answer.data.data && answer.data.state) {
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_050F = obj.tdpz_050F;
+                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;
+                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));
+                this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142604.vue b/.history/src/components/SerialPort_20231109142604.vue
new file mode 100644
index 0000000..cc76bb3
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142604.vue
@@ -0,0 +1,1033 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            console.log(answer);
+            if (answer.data.data && answer.data.state) {
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_050F = obj.tdpz_050F;
+                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;
+                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));
+                this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142713.vue b/.history/src/components/SerialPort_20231109142713.vue
new file mode 100644
index 0000000..d1013a4
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142713.vue
@@ -0,0 +1,1033 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            console.log(answer);
+            if (answer.data.data !="null" && answer.data.state) {
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_050F = obj.tdpz_050F;
+                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;
+                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));
+                this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142730.vue b/.history/src/components/SerialPort_20231109142730.vue
new file mode 100644
index 0000000..cb06532
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142730.vue
@@ -0,0 +1,1034 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+
+            if (answer.data.data != "null" && answer.data.state) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_050F = obj.tdpz_050F;
+                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;
+                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));
+                this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142802.vue b/.history/src/components/SerialPort_20231109142802.vue
new file mode 100644
index 0000000..14a3ab2
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142802.vue
@@ -0,0 +1,1033 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.data != "null" && answer.data.state) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_050F = obj.tdpz_050F;
+                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;
+                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));
+                this.formData.tdpz_cjsylxdz = Boolean(Number(obj.tdpz_cjsylxdz));
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142900.vue b/.history/src/components/SerialPort_20231109142900.vue
new file mode 100644
index 0000000..26c59a7
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142900.vue
@@ -0,0 +1,1034 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.data != "null" && answer.data.state) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142916.vue b/.history/src/components/SerialPort_20231109142916.vue
new file mode 100644
index 0000000..b0bf535
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142916.vue
@@ -0,0 +1,1034 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.data != "null" && answer.data.state) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142919.vue b/.history/src/components/SerialPort_20231109142919.vue
new file mode 100644
index 0000000..bb1910b
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142919.vue
@@ -0,0 +1,1034 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.data != "null" && answer.data.state) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109142927.vue b/.history/src/components/SerialPort_20231109142927.vue
new file mode 100644
index 0000000..bb1910b
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109142927.vue
@@ -0,0 +1,1034 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.data != "null" && answer.data.state) {
+                console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109143009.vue b/.history/src/components/SerialPort_20231109143009.vue
new file mode 100644
index 0000000..c76502b
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109143009.vue
@@ -0,0 +1,1034 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            if (answer.data.data != "null" && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109143036.vue b/.history/src/components/SerialPort_20231109143036.vue
new file mode 100644
index 0000000..0cc2167
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109143036.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            isdisabled: true,
+            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: "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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            console.log(answer);
+            console.log(answer.data);
+            if (answer.data.data != "null" && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109143437.vue b/.history/src/components/SerialPort_20231109143437.vue
new file mode 100644
index 0000000..59f6bdd
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109143437.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            this.loading = false;
+            console.log(answer);
+            console.log(answer.data);
+            if (answer.data.data != "null" && answer.data.state) {
+                // console.log(answer);
+                let obj = JSON.parse(answer.data.data.mark_value);
+                console.log(obj);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109160643.vue b/.history/src/components/SerialPort_20231109160643.vue
new file mode 100644
index 0000000..732e32c
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109160643.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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);
+                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_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;
+                if (obj.tdpz_dxzkb) {
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109160702.vue b/.history/src/components/SerialPort_20231109160702.vue
new file mode 100644
index 0000000..4d9b2aa
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109160702.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_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;
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109160704.vue b/.history/src/components/SerialPort_20231109160704.vue
new file mode 100644
index 0000000..f3f607c
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109160704.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_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;
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109160911.vue b/.history/src/components/SerialPort_20231109160911.vue
new file mode 100644
index 0000000..f3f607c
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109160911.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_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;
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109161038.vue b/.history/src/components/SerialPort_20231109161038.vue
new file mode 100644
index 0000000..a29abab
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109161038.vue
@@ -0,0 +1,1038 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_cssj = obj.tdpz_cssj;
+                    console.log(this.formData.tdpz_cssj);
+                    console.log(obj.tdpz_ccsj);
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109161046.vue b/.history/src/components/SerialPort_20231109161046.vue
new file mode 100644
index 0000000..bb350ce
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109161046.vue
@@ -0,0 +1,1038 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_cssj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_cssj = obj.tdpz_cssj;
+                    console.log(this.formData.tdpz_cssj);
+                    console.log(obj.tdpz_cssj);
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109161229.vue b/.history/src/components/SerialPort_20231109161229.vue
new file mode 100644
index 0000000..dd848a2
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109161229.vue
@@ -0,0 +1,1038 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_ccsj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_ccsj = obj.tdpz_ccsj;
+                    console.log(this.formData.tdpz_cssj);
+                    console.log(obj.tdpz_cssj);
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109161259.vue b/.history/src/components/SerialPort_20231109161259.vue
new file mode 100644
index 0000000..dd848a2
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109161259.vue
@@ -0,0 +1,1038 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_ccsj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_cssj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_ccsj = obj.tdpz_ccsj;
+                    console.log(this.formData.tdpz_cssj);
+                    console.log(obj.tdpz_cssj);
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109161334.vue b/.history/src/components/SerialPort_20231109161334.vue
new file mode 100644
index 0000000..aebfbc5
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109161334.vue
@@ -0,0 +1,1038 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                tdpz_ccsj: "",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: this.formData.tdpz_ccsj,
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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_ccsj = obj.tdpz_ccsj;
+                    console.log(this.formData.tdpz_cssj);
+                    console.log(obj.tdpz_cssj);
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109161521.vue b/.history/src/components/SerialPort_20231109161521.vue
new file mode 100644
index 0000000..5fbc219
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109161521.vue
@@ -0,0 +1,1038 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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;
+                    console.log(this.formData.tdpz_cssj);
+                    console.log(obj.tdpz_cssj);
+                    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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109161541.vue b/.history/src/components/SerialPort_20231109161541.vue
new file mode 100644
index 0000000..a38ee48
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109161541.vue
@@ -0,0 +1,1038 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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_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="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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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_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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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;
+                    console.log(this.formData.tdpz_cgsj);
+                    console.log(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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109162034.vue b/.history/src/components/SerialPort_20231109162034.vue
new file mode 100644
index 0000000..9357729
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109162034.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: 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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109162035.vue b/.history/src/components/SerialPort_20231109162035.vue
new file mode 100644
index 0000000..9357729
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109162035.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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_ccsj: 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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109162625.vue b/.history/src/components/SerialPort_20231109162625.vue
new file mode 100644
index 0000000..6605808
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109162625.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109162650.vue b/.history/src/components/SerialPort_20231109162650.vue
new file mode 100644
index 0000000..6605808
--- /dev/null
+++ b/.history/src/components/SerialPort_20231109162650.vue
@@ -0,0 +1,1036 @@
+<!-- 串口通道配置 -->
+<template>
+    <div>
+        <!-- 设置树形控件 -->
+        <!-- 串口通道的页面 -->
+        <!-- <el-button type="info" plain @click="dialogVisible = true">串口通道</el-button> -->
+        <div class="tree_menu" v-show="dialogVisible">
+            <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
+                @node-click="treeNodeClick"></el-tree>
+            <!-- 树形控件右键组件 -->
+            <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
+                <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" default-active="#0078FE">
+                    <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
+                        <span slot="title">新建通道</span>
+                    </el-menu-item>
+                    <el-menu-item index="2" style="font-size: 12px;">
+                        <span slot="title">取 消</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+        <div class="pas_params">
+            <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
+                <el-form :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
+                    <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="saveGate">保 存</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 } from '@/api/user';
+export default {
+    name: 'TestTreeView',
+
+    data() {
+        return {
+            loading: false,
+            formData: {
+                tdpz_tdmc: "有线区Channel1",
+                tdpz_td: "网口",
+                tdpz_qdmc: "ModbusTCPClient",
+                tdpz_chuankou: "com1",
+                tdpz_btl: "9600",
+                tdpz_sjw: "8",
+                tdpz_tzw: "1",
+                tdpz_jojy: "无校验（none）",
+                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）"
+            }],
+            // tdpz_tdmc: "有线区Channel1",
+            // tdpz_td: "网口",
+            // tdpz_qdmc: "ModbusTCPClient",
+            // tdpz_watchtime: false,
+            // tdpz_cjsylxdz: true,
+            // tdpz_dxzkb: "",
+            // tdpz_dxzkb1: "1",
+            // tdpz_dxzkb2: "1",
+            // tdpz_050F: "1",
+            // tdpz_0610: "1",
+            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: {
+        rightClick(e, data, node) {
+            if (node.childNodes.length == 0) {
+                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: "USER202307301114011710",
+                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(res.data.data.mark_value);
+            this.$router.push("/dbserialdevice");
+        },
+        // 保存
+        async GetUserAnswer() {
+            this.loading = true;
+            let answer = await GetUserAnswer({
+                mark: "DB-IotLite_wx",
+                user_id: "USER202307301114011710",
+            })
+            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));
+                }
+
+            }
+        }
+    },
+    mounted() {
+        this.GetUserAnswer();
+    },
+    watch: {
+        "formData.tdpz_watchtime"(newval) {
+            console.log(newval);
+            if (newval) {
+                this.isdisabled = true;
+            } else {
+                this.isdisabled = 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>
+
+<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_20231109154956.vue b/.history/src/components/TreeView_20231109154956.vue
new file mode 100644
index 0000000..6eef96f
--- /dev/null
+++ b/.history/src/components/TreeView_20231109154956.vue
@@ -0,0 +1,757 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="$store.state.tree" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+import { Loading } from "element-ui";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+    })
+    this.Loading = true;
+    this.GetUserAnswer();
+    this.Loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109155014.vue b/.history/src/components/TreeView_20231109155014.vue
new file mode 100644
index 0000000..60b4c37
--- /dev/null
+++ b/.history/src/components/TreeView_20231109155014.vue
@@ -0,0 +1,756 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="$store.state.tree" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109155034.vue b/.history/src/components/TreeView_20231109155034.vue
new file mode 100644
index 0000000..831d6a7
--- /dev/null
+++ b/.history/src/components/TreeView_20231109155034.vue
@@ -0,0 +1,757 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="$store.state.tree" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading:false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109155038.vue b/.history/src/components/TreeView_20231109155038.vue
new file mode 100644
index 0000000..b4fd229
--- /dev/null
+++ b/.history/src/components/TreeView_20231109155038.vue
@@ -0,0 +1,757 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="$store.state.tree" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109162950.vue b/.history/src/components/TreeView_20231109162950.vue
new file mode 100644
index 0000000..14ad23e
--- /dev/null
+++ b/.history/src/components/TreeView_20231109162950.vue
@@ -0,0 +1,758 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="$store.state.tree" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value))
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109162953.vue b/.history/src/components/TreeView_20231109162953.vue
new file mode 100644
index 0000000..fbbf8ef
--- /dev/null
+++ b/.history/src/components/TreeView_20231109162953.vue
@@ -0,0 +1,758 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="$store.state.tree" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.mark_value));
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109163115.vue b/.history/src/components/TreeView_20231109163115.vue
new file mode 100644
index 0000000..73ab97d
--- /dev/null
+++ b/.history/src/components/TreeView_20231109163115.vue
@@ -0,0 +1,758 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="$store.state.tree" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109163208.vue b/.history/src/components/TreeView_20231109163208.vue
new file mode 100644
index 0000000..b4fb4a8
--- /dev/null
+++ b/.history/src/components/TreeView_20231109163208.vue
@@ -0,0 +1,758 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109163225.vue b/.history/src/components/TreeView_20231109163225.vue
new file mode 100644
index 0000000..ba9aae4
--- /dev/null
+++ b/.history/src/components/TreeView_20231109163225.vue
@@ -0,0 +1,759 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      trees:[],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").then((res) => {
+      console.log(res);
+      console.log(JSON.parse(res.data.data.data));
+    })
+    this.loading = true;
+    this.GetUserAnswer();
+    this.loading = false;
+    // let res2 = GetUserAnswer()
+  },
+
+  watch: {
+    // "FormData.tdpz_watchtime": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109163317.vue b/.history/src/components/TreeView_20231109163317.vue
new file mode 100644
index 0000000..59a57d7
--- /dev/null
+++ b/.history/src/components/TreeView_20231109163317.vue
@@ -0,0 +1,760 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      trees:[],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109163929.vue b/.history/src/components/TreeView_20231109163929.vue
new file mode 100644
index 0000000..fa6a432
--- /dev/null
+++ b/.history/src/components/TreeView_20231109163929.vue
@@ -0,0 +1,761 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109163932.vue b/.history/src/components/TreeView_20231109163932.vue
new file mode 100644
index 0000000..c49fc54
--- /dev/null
+++ b/.history/src/components/TreeView_20231109163932.vue
@@ -0,0 +1,761 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        // 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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164014.vue b/.history/src/components/TreeView_20231109164014.vue
new file mode 100644
index 0000000..c4dfd34
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164014.vue
@@ -0,0 +1,762 @@
+<!-- 网关通道 -->
+<template>
+  <div>
+    <!-- v-click-outside="closeMenu" -->
+    <div>
+      <div class="tree_menu" v-show="dialogVisible">
+        <el-tree :data="trees" :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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164214.vue b/.history/src/components/TreeView_20231109164214.vue
new file mode 100644
index 0000000..23b1b65
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164214.vue
@@ -0,0 +1,762 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164217.vue b/.history/src/components/TreeView_20231109164217.vue
new file mode 100644
index 0000000..e82f086
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164217.vue
@@ -0,0 +1,762 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164626.vue b/.history/src/components/TreeView_20231109164626.vue
new file mode 100644
index 0000000..f8de394
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164626.vue
@@ -0,0 +1,763 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164630.vue b/.history/src/components/TreeView_20231109164630.vue
new file mode 100644
index 0000000..f8de394
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164630.vue
@@ -0,0 +1,763 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+      }
+      sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
+      console.log(res);
+      console.log(res.data.data.mark_value);
+      this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164719.vue b/.history/src/components/TreeView_20231109164719.vue
new file mode 100644
index 0000000..792768b
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164719.vue
@@ -0,0 +1,766 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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_ccsj: 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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      })
+
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164835.vue b/.history/src/components/TreeView_20231109164835.vue
new file mode 100644
index 0000000..a72616b
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164835.vue
@@ -0,0 +1,766 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      })
+
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+        </span>);
+    }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109164948.vue b/.history/src/components/TreeView_20231109164948.vue
new file mode 100644
index 0000000..984a80c
--- /dev/null
+++ b/.history/src/components/TreeView_20231109164948.vue
@@ -0,0 +1,767 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+        console.log(this.trees);
+      })
+
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109165508.vue b/.history/src/components/TreeView_20231109165508.vue
new file mode 100644
index 0000000..e943ddc
--- /dev/null
+++ b/.history/src/components/TreeView_20231109165508.vue
@@ -0,0 +1,768 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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(this.FormData.tdpz_tdmc,this.nodekey);
+        // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+        console.log(this.trees);
+      })
+
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109165825.vue b/.history/src/components/TreeView_20231109165825.vue
new file mode 100644
index 0000000..22c43f0
--- /dev/null
+++ b/.history/src/components/TreeView_20231109165825.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109170158.vue b/.history/src/components/TreeView_20231109170158.vue
new file mode 100644
index 0000000..34ec796
--- /dev/null
+++ b/.history/src/components/TreeView_20231109170158.vue
@@ -0,0 +1,772 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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(() => {
+      let trre=this.$refs["tree"].append({
+        id: this.nodekey + 1000,
+        label: this.FormData.tdpz_tdmc
+      }, this.nodekey);
+      console.log(trre);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109170225.vue b/.history/src/components/TreeView_20231109170225.vue
new file mode 100644
index 0000000..22c43f0
--- /dev/null
+++ b/.history/src/components/TreeView_20231109170225.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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 } from "@/api/user";
+
+export default {
+  name: "TestTreeView",
+
+  data() {
+    return {
+      loading: false,
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109170527.vue b/.history/src/components/TreeView_20231109170527.vue
new file mode 100644
index 0000000..acc82ad
--- /dev/null
+++ b/.history/src/components/TreeView_20231109170527.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      sendTree
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109171335.vue b/.history/src/components/TreeView_20231109171335.vue
new file mode 100644
index 0000000..b805874
--- /dev/null
+++ b/.history/src/components/TreeView_20231109171335.vue
@@ -0,0 +1,773 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        
+      })
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109171414.vue b/.history/src/components/TreeView_20231109171414.vue
new file mode 100644
index 0000000..f414530
--- /dev/null
+++ b/.history/src/components/TreeView_20231109171414.vue
@@ -0,0 +1,774 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id:"USER202307301114011710",
+        
+      })
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109171530.vue b/.history/src/components/TreeView_20231109171530.vue
new file mode 100644
index 0000000..2c5a332
--- /dev/null
+++ b/.history/src/components/TreeView_20231109171530.vue
@@ -0,0 +1,774 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id:"USER202307301114011710",
+        data:JSON.stringify(this.trees),
+      })
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109171537.vue b/.history/src/components/TreeView_20231109171537.vue
new file mode 100644
index 0000000..64d51b9
--- /dev/null
+++ b/.history/src/components/TreeView_20231109171537.vue
@@ -0,0 +1,775 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id:"USER202307301114011710",
+        data:JSON.stringify(this.trees)
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
+      // if (!data.children) {
+      //   this.$set(data, 'children', []);
+      // }
+      // data.children.push(newChild);
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109171555.vue b/.history/src/components/TreeView_20231109171555.vue
new file mode 100644
index 0000000..8f7c379
--- /dev/null
+++ b/.history/src/components/TreeView_20231109171555.vue
@@ -0,0 +1,768 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id:"USER202307301114011710",
+        data:JSON.stringify(this.trees)
+      })
+      console.log(result);
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109171701.vue b/.history/src/components/TreeView_20231109171701.vue
new file mode 100644
index 0000000..3054ab5
--- /dev/null
+++ b/.history/src/components/TreeView_20231109171701.vue
@@ -0,0 +1,768 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees)
+      })
+      console.log(result);
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109171757.vue b/.history/src/components/TreeView_20231109171757.vue
new file mode 100644
index 0000000..e132965
--- /dev/null
+++ b/.history/src/components/TreeView_20231109171757.vue
@@ -0,0 +1,770 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id:"USER202307301114011710",
+        data:JSON.stringify(this.trees)
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109172108.vue b/.history/src/components/TreeView_20231109172108.vue
new file mode 100644
index 0000000..45ef3a0
--- /dev/null
+++ b/.history/src/components/TreeView_20231109172108.vue
@@ -0,0 +1,770 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees)
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109172137.vue b/.history/src/components/TreeView_20231109172137.vue
new file mode 100644
index 0000000..45ef3a0
--- /dev/null
+++ b/.history/src/components/TreeView_20231109172137.vue
@@ -0,0 +1,770 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await sendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees)
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109172200.vue b/.history/src/components/TreeView_20231109172200.vue
new file mode 100644
index 0000000..7f16966
--- /dev/null
+++ b/.history/src/components/TreeView_20231109172200.vue
@@ -0,0 +1,770 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees)
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree("USER202307301114011710").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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109174328.vue b/.history/src/components/TreeView_20231109174328.vue
new file mode 100644
index 0000000..c1f9436
--- /dev/null
+++ b/.history/src/components/TreeView_20231109174328.vue
@@ -0,0 +1,773 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees)
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id:"USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109174337.vue b/.history/src/components/TreeView_20231109174337.vue
new file mode 100644
index 0000000..c05a22f
--- /dev/null
+++ b/.history/src/components/TreeView_20231109174337.vue
@@ -0,0 +1,773 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees)
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109174357.vue b/.history/src/components/TreeView_20231109174357.vue
new file mode 100644
index 0000000..c0083e4
--- /dev/null
+++ b/.history/src/components/TreeView_20231109174357.vue
@@ -0,0 +1,774 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type:"1",
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109175043.vue b/.history/src/components/TreeView_20231109175043.vue
new file mode 100644
index 0000000..c37944b
--- /dev/null
+++ b/.history/src/components/TreeView_20231109175043.vue
@@ -0,0 +1,775 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      console.log(JSON.stringify(this.trees));
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type:"1",
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109175834.vue b/.history/src/components/TreeView_20231109175834.vue
new file mode 100644
index 0000000..1437fcb
--- /dev/null
+++ b/.history/src/components/TreeView_20231109175834.vue
@@ -0,0 +1,775 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      console.log(JSON.stringify(this.trees));
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type:1,
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180057.vue b/.history/src/components/TreeView_20231109180057.vue
new file mode 100644
index 0000000..c21cac8
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180057.vue
@@ -0,0 +1,775 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      // console.log(JSON.stringify(this.trees));
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180427.vue b/.history/src/components/TreeView_20231109180427.vue
new file mode 100644
index 0000000..90eb543
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180427.vue
@@ -0,0 +1,777 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      // console.log(JSON.stringify(this.trees));
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async SendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180436.vue b/.history/src/components/TreeView_20231109180436.vue
new file mode 100644
index 0000000..fcc67bd
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180436.vue
@@ -0,0 +1,777 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      // })
+      // console.log(JSON.stringify(this.trees));
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180454.vue b/.history/src/components/TreeView_20231109180454.vue
new file mode 100644
index 0000000..302ef13
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180454.vue
@@ -0,0 +1,777 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      this.sendTree();
+      // console.log(JSON.stringify(this.trees));
+      // this.$router.push("/dbcollectdevice");
+
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180500.vue b/.history/src/components/TreeView_20231109180500.vue
new file mode 100644
index 0000000..608fab8
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180500.vue
@@ -0,0 +1,778 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      this.sendTree();
+      this.$router.push("/dbcollectdevice");
+      // console.log(JSON.stringify(this.trees));
+
+
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180507.vue b/.history/src/components/TreeView_20231109180507.vue
new file mode 100644
index 0000000..9f42de9
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180507.vue
@@ -0,0 +1,775 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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);
+      // this.$refs["tree"].updateKeyChildren(this.nodekey, this.FormData.tdpz_tdmc);
+      console.log(this.trees);
+      this.sendTree();
+      // this.$router.push("/dbcollectdevice");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180512.vue b/.history/src/components/TreeView_20231109180512.vue
new file mode 100644
index 0000000..19f5f25
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180512.vue
@@ -0,0 +1,774 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.$store.commit("setTree", tree);
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180527.vue b/.history/src/components/TreeView_20231109180527.vue
new file mode 100644
index 0000000..761b293
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180527.vue
@@ -0,0 +1,774 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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,
+      // datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180731.vue b/.history/src/components/TreeView_20231109180731.vue
new file mode 100644
index 0000000..8348696
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180731.vue
@@ -0,0 +1,773 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    edit(event) {
+      this.flag = true;
+    },
+    //完成编辑
+    done(event) {
+      this.flag = false;
+      let tree = this.$store.state.tree;
+      tree[0].label = this.gateway;
+      this.sendTree();
+    },
+    rightClick(e, data, node) {
+      console.log(data);
+      // console.log(node);
+      if (node.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109180752.vue b/.history/src/components/TreeView_20231109180752.vue
new file mode 100644
index 0000000..c5dfad8
--- /dev/null
+++ b/.history/src/components/TreeView_20231109180752.vue
@@ -0,0 +1,772 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109181057.vue b/.history/src/components/TreeView_20231109181057.vue
new file mode 100644
index 0000000..0698336
--- /dev/null
+++ b/.history/src/components/TreeView_20231109181057.vue
@@ -0,0 +1,772 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109182514.vue b/.history/src/components/TreeView_20231109182514.vue
new file mode 100644
index 0000000..0495da9
--- /dev/null
+++ b/.history/src/components/TreeView_20231109182514.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109182613.vue b/.history/src/components/TreeView_20231109182613.vue
new file mode 100644
index 0000000..d71cc15
--- /dev/null
+++ b/.history/src/components/TreeView_20231109182613.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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"></el-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>
+        
+        <!-- 树形控件右键组件 -->
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109182614.vue b/.history/src/components/TreeView_20231109182614.vue
new file mode 100644
index 0000000..d71cc15
--- /dev/null
+++ b/.history/src/components/TreeView_20231109182614.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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"></el-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>
+        
+        <!-- 树形控件右键组件 -->
+        <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="ruleForm">
+          <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="saveGate">保 存</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,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109191853.vue b/.history/src/components/TreeView_20231109191853.vue
new file mode 100644
index 0000000..0495da9
--- /dev/null
+++ b/.history/src/components/TreeView_20231109191853.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109191856.vue b/.history/src/components/TreeView_20231109191856.vue
new file mode 100644
index 0000000..0495da9
--- /dev/null
+++ b/.history/src/components/TreeView_20231109191856.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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_20231109192113.vue b/.history/src/components/TreeView_20231109192113.vue
new file mode 100644
index 0000000..0495da9
--- /dev/null
+++ b/.history/src/components/TreeView_20231109192113.vue
@@ -0,0 +1,771 @@
+<!-- 网关通道 -->
+<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="ruleForm">
+          <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="saveGate">保 存</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,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        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: "请输入ip地址", 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" },
+        ],
+      },
+    };
+  },
+  created() {
+    console.log(this.$store.state.tree);
+  },
+  methods: {
+    //编辑
+    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.childNodes.length == 0) {
+        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",
+        mark_value: JSON.stringify(datas),
+      });
+      if (res.status == 200) {
+        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");
+    },
+    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;
+      }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
+    async GetUserAnswer() {
+      let answer = await GetUserAnswer({
+        mark: "DB-IotLite_yx",
+        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;
+      }
+    },
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
+  },
+  created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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": {
+    //   handler(old) {
+    //     if (old) {
+    //       this.isdisabled = false;
+    //     } else {
+    //       this.isdisabled = true;
+    //     }
+    //   },
+    // },
+    "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/ceshi_20231109180139.vue b/.history/src/components/ceshi_20231109180139.vue
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/components/ceshi_20231109180140.vue b/.history/src/components/ceshi_20231109180140.vue
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/components/ceshi_20231109180150.vue b/.history/src/components/ceshi_20231109180150.vue
new file mode 100644
index 0000000..5533e3f
--- /dev/null
+++ b/.history/src/components/ceshi_20231109180150.vue
@@ -0,0 +1,492 @@
+<!-- <template>
+  <div>
+    <el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick" @check="treeCheck">
+    </el-tree>
+    <div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
+      <ul>
+        <li @click="add_passage = true">新增通道</li>
+        <li>取消</li>
+      </ul>
+    </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="ruleForm">
+          <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="saveGate">保 存</el-button>
+          <el-button @click="add_passage = false">取 消</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      flag: false,
+      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
+      FormData: {
+        tdpz_tdmc: "有线区Channel1",
+        tdpz_td: "网口",
+        tdpz_qdmc: "ModbusTCPClient",
+        tdpz_port: "",
+        tdpz_cssj: "",
+        tdpz_jgsj: "",
+        tdpz_lxsj: "",
+        tdpz_cfcs: "",
+        tdpz_watchtime: true,
+        tdpz_cjsylxdz: false,
+        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: 192,
+      add_passage: false,
+      rightMenu: "",
+      dialogVisible: true,
+      menuShow: false,
+      datas: [],
+      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: "请输入ip地址", 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" },
+        ],
+      },
+      tmDisplay: false,
+      rightMenu: {},
+      node: "",
+      data: [
+        {
+          label: "Gateway",
+          id: 1,
+          editing: true,
+          children: [
+            {
+              label: "数据采集",
+              id: 11,
+              children: [
+                {
+                  label: "I/O点",
+                  id: 111,
+                },
+                {
+                  label: "用户点",
+                  id: 112,
+                },
+                {
+                  label: "计算点",
+                  id: 113,
+                },
+                {
+                  label: "系统点",
+                  id: 114,
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              id: 12,
+              children: [
+                {
+                  label: "Modbus",
+                  id: 121,
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              id: 13,
+              children: [
+                {
+                  label: "Mqtt Client",
+                  id: 131,
+                },
+                {
+                  label: "Alink",
+                  id: 132,
+                },
+                {
+                  label: "Tlink",
+                  id: 133,
+                },
+                {
+                  label: "loTDDC",
+                  id: 134,
+                },
+                {
+                  label: "Ulink",
+                  id: 135,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      dialogVisible: false,
+      newNodeData: {
+        // 新节点的数据，可以根据需求定义
+        // ...
+      },
+    };
+  },
+  methods: {
+    rightClick(e, data, node, comp) {
+      console.log('e:', e, 'data', data)
+      // this.node = node;
+      // console.log(this.node)
+      console.log(data.id);
+      console.log(comp);
+      this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
+      this.tmDisplay = true
+      const self = this
+      document.onclick = function (ev) {
+        if (ev.target !== document.getElementById('perTreeMenu')) {
+          self.tmDisplay = false
+        }
+      }
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+.tree_menu {
+  position: fixed;
+  display: block;
+  z-index: 20000;
+  background-color: #fff;
+  padding: 5px 0;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul li {
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+  }
+
+  ul li:hover {
+    background-color: #ebeef5
+  }
+}
+</style> -->
+
diff --git a/.history/src/views/ChWirelessGatewayIP_20231109152603.vue b/.history/src/views/ChWirelessGatewayIP_20231109152603.vue
new file mode 100644
index 0000000..e73e598
--- /dev/null
+++ b/.history/src/views/ChWirelessGatewayIP_20231109152603.vue
@@ -0,0 +1,33 @@
+<!-- <template>
+  <div>斥候工业网关-ip配置-无线网关</div>
+</template> -->
+<template>
+  <div>
+    <ChiGate></ChiGate>
+  </div>
+</template>
+
+<script>
+import ChiGate from '@/components/ChiGate.vue';
+export default {
+  name: 'InternetCompetitionChWirelessGatewayIP',
+  components: {
+    ChiGate
+  },
+  data() {
+    return {
+
+    };
+  },
+
+  mounted() {
+
+  },
+
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/.history/src/views/ChWirelessGatewayIP_20231109152604.vue b/.history/src/views/ChWirelessGatewayIP_20231109152604.vue
new file mode 100644
index 0000000..e73e598
--- /dev/null
+++ b/.history/src/views/ChWirelessGatewayIP_20231109152604.vue
@@ -0,0 +1,33 @@
+<!-- <template>
+  <div>斥候工业网关-ip配置-无线网关</div>
+</template> -->
+<template>
+  <div>
+    <ChiGate></ChiGate>
+  </div>
+</template>
+
+<script>
+import ChiGate from '@/components/ChiGate.vue';
+export default {
+  name: 'InternetCompetitionChWirelessGatewayIP',
+  components: {
+    ChiGate
+  },
+  data() {
+    return {
+
+    };
+  },
+
+  mounted() {
+
+  },
+
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/.history/src/views/Index_20231109180206.vue b/.history/src/views/Index_20231109180206.vue
new file mode 100644
index 0000000..a36e63f
--- /dev/null
+++ b/.history/src/views/Index_20231109180206.vue
@@ -0,0 +1,191 @@
+<template>
+  <div id="app">
+    <!-- 所有路由跳转链接 -->
+
+    <div class="db_lite" style="background-color: aqua; height: 100px">
+      <router-link to="/cockpit">驾驶舱</router-link>
+      <!-- <router-link to="/ipsetting">IP设置</router-link> -->
+      <router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
+      <router-link to="/dbcollectiongate">db有线网关-数据采集配置-有线网关配置</router-link>
+      <router-link to="/channelconfig">db有线网关-数据采集配置-网口通道配置</router-link>
+      <router-link to="/dbcollectdevice">db有线网关-数据采集配置-网口设备配置</router-link>
+      <router-link to="/dbcollect">db有线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfig">db有线网关-MQTT上云-网口MQTT1配置</router-link>
+      <!--db无线网关配置  -->
+      <router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
+      <router-link to="/dbcollectionwifi">db无线网关-数据采集配置-网关配置配置</router-link>
+      <router-link to="/dbcollectserial">db无线网关-数据采集配置-串口通道配置</router-link>
+      <router-link to="/dbserialdevice">db无线网关-数据采集配置-串口设备配置</router-link>
+      <router-link to="/dbwificollect">db无线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfigwifi">db无线网关-MQTT上云-网口MQTT1配置</router-link>
+    </div>
+    <div class="chihou" style="background-color: aqua; height: 100px">
+      <router-link to="/chwiredgatewayip">斥候工业网关-ip配置-有线网关</router-link>
+      <router-link to="/gatewayconfiguration">斥候有线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/configuration">斥候有线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/collectionpoint">斥候有线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chmqtt">斥候有线工业网关-数据上云配置-MQTT上云</router-link>
+
+      <router-link to="/chwirelessgatewayip">斥候工业网关-ip配置-无线网关</router-link>
+      <router-link to="/chiwifigate">斥候无线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/chiwifidevice">斥候无线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/chiwificollect">斥候无线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chiwifimqtt">斥候无线工业网关-数据上云配置-MQTT上云</router-link>
+    </div>
+    <div class="serial" style="background-color: aqua; height: 100px">
+      <router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
+      <router-link to="/ckportconfig">串口服务器-端口配置</router-link>
+      <router-link to="/towifi">串口服务器-485towifi-串口及网络协议设置</router-link>
+      <router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
+      <router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
+      <router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
+      <router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
+      <router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
+      <router-link to="/addstrategy">工业网闸配置-策略管理-添加策略</router-link>
+      <router-link to="/ntconfig">网络优化-网关配置</router-link>
+      <router-link to="/ntmaintenance">网络优化-网关维护</router-link>
+    </div>
+    <ceshi></ceshi>
+  </div>
+</template>
+<script>
+// import Ceshi from '@/components/ceshi.vue';
+// import ceshi from '@/components/ceshi.vue';
+export default {
+  name: "App",
+  components: {
+    ceshi
+  },
+  data() {
+    return {
+      tmDisplay: false,
+      rightMenu: {},
+    };
+  },
+  created() {
+    localStorage.setItem(
+      "tree",
+      JSON.stringify([
+        {
+          label: "Gateway",
+          id: 1,
+          editing: true,
+          children: [
+            {
+              label: "数据采集",
+              id: 11,
+              children: [
+                {
+                  label: "I/O点",
+                  id: 111,
+                },
+                {
+                  label: "用户点",
+                  id: 112,
+                },
+                {
+                  label: "计算点",
+                  id: 113,
+                },
+                {
+                  label: "系统点",
+                  id: 114,
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              id: 12,
+              children: [
+                {
+                  label: "Modbus",
+                  id: 121,
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              id: 13,
+              children: [
+                {
+                  label: "Mqtt Client",
+                  id: 131,
+                },
+                {
+                  label: "Alink",
+                  id: 132,
+                },
+                {
+                  label: "Tlink",
+                  id: 133,
+                },
+                {
+                  label: "loTDDC",
+                  id: 134,
+                },
+                {
+                  label: "Ulink",
+                  id: 135,
+                },
+              ],
+            },
+          ],
+        },
+      ])
+    );
+  },
+  methods: {},
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: transparent;
+}
+
+.db_lite,
+.chihou,
+.serial {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+
+.tree_menu {
+  position: fixed;
+  display: block;
+  z-index: 20000;
+  background-color: #fff;
+  padding: 5px 0;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  ul li {
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+  }
+  ul li:hover {
+    background-color: #ebeef5;
+  }
+}
+</style>
diff --git a/.history/src/views/Index_20231109180209.vue b/.history/src/views/Index_20231109180209.vue
new file mode 100644
index 0000000..0b376be
--- /dev/null
+++ b/.history/src/views/Index_20231109180209.vue
@@ -0,0 +1,191 @@
+<template>
+  <div id="app">
+    <!-- 所有路由跳转链接 -->
+
+    <div class="db_lite" style="background-color: aqua; height: 100px">
+      <router-link to="/cockpit">驾驶舱</router-link>
+      <!-- <router-link to="/ipsetting">IP设置</router-link> -->
+      <router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
+      <router-link to="/dbcollectiongate">db有线网关-数据采集配置-有线网关配置</router-link>
+      <router-link to="/channelconfig">db有线网关-数据采集配置-网口通道配置</router-link>
+      <router-link to="/dbcollectdevice">db有线网关-数据采集配置-网口设备配置</router-link>
+      <router-link to="/dbcollect">db有线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfig">db有线网关-MQTT上云-网口MQTT1配置</router-link>
+      <!--db无线网关配置  -->
+      <router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
+      <router-link to="/dbcollectionwifi">db无线网关-数据采集配置-网关配置配置</router-link>
+      <router-link to="/dbcollectserial">db无线网关-数据采集配置-串口通道配置</router-link>
+      <router-link to="/dbserialdevice">db无线网关-数据采集配置-串口设备配置</router-link>
+      <router-link to="/dbwificollect">db无线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfigwifi">db无线网关-MQTT上云-网口MQTT1配置</router-link>
+    </div>
+    <div class="chihou" style="background-color: aqua; height: 100px">
+      <router-link to="/chwiredgatewayip">斥候工业网关-ip配置-有线网关</router-link>
+      <router-link to="/gatewayconfiguration">斥候有线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/configuration">斥候有线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/collectionpoint">斥候有线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chmqtt">斥候有线工业网关-数据上云配置-MQTT上云</router-link>
+
+      <router-link to="/chwirelessgatewayip">斥候工业网关-ip配置-无线网关</router-link>
+      <router-link to="/chiwifigate">斥候无线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/chiwifidevice">斥候无线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/chiwificollect">斥候无线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chiwifimqtt">斥候无线工业网关-数据上云配置-MQTT上云</router-link>
+    </div>
+    <div class="serial" style="background-color: aqua; height: 100px">
+      <router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
+      <router-link to="/ckportconfig">串口服务器-端口配置</router-link>
+      <router-link to="/towifi">串口服务器-485towifi-串口及网络协议设置</router-link>
+      <router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
+      <router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
+      <router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
+      <router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
+      <router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
+      <router-link to="/addstrategy">工业网闸配置-策略管理-添加策略</router-link>
+      <router-link to="/ntconfig">网络优化-网关配置</router-link>
+      <router-link to="/ntmaintenance">网络优化-网关维护</router-link>
+    </div>
+    <!-- <ceshi></ceshi> -->
+  </div>
+</template>
+<script>
+// import Ceshi from '@/components/ceshi.vue';
+// import ceshi from '@/components/ceshi.vue';
+export default {
+  name: "App",
+  components: {
+    ceshi
+  },
+  data() {
+    return {
+      tmDisplay: false,
+      rightMenu: {},
+    };
+  },
+  created() {
+    localStorage.setItem(
+      "tree",
+      JSON.stringify([
+        {
+          label: "Gateway",
+          id: 1,
+          editing: true,
+          children: [
+            {
+              label: "数据采集",
+              id: 11,
+              children: [
+                {
+                  label: "I/O点",
+                  id: 111,
+                },
+                {
+                  label: "用户点",
+                  id: 112,
+                },
+                {
+                  label: "计算点",
+                  id: 113,
+                },
+                {
+                  label: "系统点",
+                  id: 114,
+                },
+              ],
+            },
+            {
+              label: "数据服务",
+              id: 12,
+              children: [
+                {
+                  label: "Modbus",
+                  id: 121,
+                },
+              ],
+            },
+            {
+              label: "IOT",
+              id: 13,
+              children: [
+                {
+                  label: "Mqtt Client",
+                  id: 131,
+                },
+                {
+                  label: "Alink",
+                  id: 132,
+                },
+                {
+                  label: "Tlink",
+                  id: 133,
+                },
+                {
+                  label: "loTDDC",
+                  id: 134,
+                },
+                {
+                  label: "Ulink",
+                  id: 135,
+                },
+              ],
+            },
+          ],
+        },
+      ])
+    );
+  },
+  methods: {},
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: transparent;
+}
+
+.db_lite,
+.chihou,
+.serial {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+
+.tree_menu {
+  position: fixed;
+  display: block;
+  z-index: 20000;
+  background-color: #fff;
+  padding: 5px 0;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  ul li {
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+  }
+  ul li:hover {
+    background-color: #ebeef5;
+  }
+}
+</style>
diff --git a/.history/src/views/Index_20231109180217.vue b/.history/src/views/Index_20231109180217.vue
new file mode 100644
index 0000000..4d22c2a
--- /dev/null
+++ b/.history/src/views/Index_20231109180217.vue
@@ -0,0 +1,191 @@
+<template>
+  <div id="app">
+    <!-- 所有路由跳转链接 -->
+
+    <div class="db_lite" style="background-color: aqua; height: 100px">
+      <router-link to="/cockpit">驾驶舱</router-link>
+      <!-- <router-link to="/ipsetting">IP设置</router-link> -->
+      <router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
+      <router-link to="/dbcollectiongate">db有线网关-数据采集配置-有线网关配置</router-link>
+      <router-link to="/channelconfig">db有线网关-数据采集配置-网口通道配置</router-link>
+      <router-link to="/dbcollectdevice">db有线网关-数据采集配置-网口设备配置</router-link>
+      <router-link to="/dbcollect">db有线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfig">db有线网关-MQTT上云-网口MQTT1配置</router-link>
+      <!--db无线网关配置  -->
+      <router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
+      <router-link to="/dbcollectionwifi">db无线网关-数据采集配置-网关配置配置</router-link>
+      <router-link to="/dbcollectserial">db无线网关-数据采集配置-串口通道配置</router-link>
+      <router-link to="/dbserialdevice">db无线网关-数据采集配置-串口设备配置</router-link>
+      <router-link to="/dbwificollect">db无线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfigwifi">db无线网关-MQTT上云-网口MQTT1配置</router-link>
+    </div>
+    <div class="chihou" style="background-color: aqua; height: 100px">
+      <router-link to="/chwiredgatewayip">斥候工业网关-ip配置-有线网关</router-link>
+      <router-link to="/gatewayconfiguration">斥候有线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/configuration">斥候有线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/collectionpoint">斥候有线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chmqtt">斥候有线工业网关-数据上云配置-MQTT上云</router-link>
+
+      <router-link to="/chwirelessgatewayip">斥候工业网关-ip配置-无线网关</router-link>
+      <router-link to="/chiwifigate">斥候无线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/chiwifidevice">斥候无线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/chiwificollect">斥候无线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chiwifimqtt">斥候无线工业网关-数据上云配置-MQTT上云</router-link>
+    </div>
+    <div class="serial" style="background-color: aqua; height: 100px">
+      <router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
+      <router-link to="/ckportconfig">串口服务器-端口配置</router-link>
+      <router-link to="/towifi">串口服务器-485towifi-串口及网络协议设置</router-link>
+      <router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
+      <router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
+      <router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
+      <router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
+      <router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
+      <router-link to="/addstrategy">工业网闸配置-策略管理-添加策略</router-link>
+      <router-link to="/ntconfig">网络优化-网关配置</router-link>
+      <router-link to="/ntmaintenance">网络优化-网关维护</router-link>
+    </div>
+    <!-- <ceshi></ceshi> -->
+  </div>
+</template>
+<script>
+// import Ceshi from '@/components/ceshi.vue';
+// import ceshi from '@/components/ceshi.vue';
+export default {
+  name: "App",
+  components: {
+    ceshi
+  },
+  data() {
+    return {
+      tmDisplay: false,
+      rightMenu: {},
+    };
+  },
+  created() {
+    // localStorage.setItem(
+    //   "tree",
+    //   JSON.stringify([
+    //     {
+    //       label: "Gateway",
+    //       id: 1,
+    //       editing: true,
+    //       children: [
+    //         {
+    //           label: "数据采集",
+    //           id: 11,
+    //           children: [
+    //             {
+    //               label: "I/O点",
+    //               id: 111,
+    //             },
+    //             {
+    //               label: "用户点",
+    //               id: 112,
+    //             },
+    //             {
+    //               label: "计算点",
+    //               id: 113,
+    //             },
+    //             {
+    //               label: "系统点",
+    //               id: 114,
+    //             },
+    //           ],
+    //         },
+    //         {
+    //           label: "数据服务",
+    //           id: 12,
+    //           children: [
+    //             {
+    //               label: "Modbus",
+    //               id: 121,
+    //             },
+    //           ],
+    //         },
+    //         {
+    //           label: "IOT",
+    //           id: 13,
+    //           children: [
+    //             {
+    //               label: "Mqtt Client",
+    //               id: 131,
+    //             },
+    //             {
+    //               label: "Alink",
+    //               id: 132,
+    //             },
+    //             {
+    //               label: "Tlink",
+    //               id: 133,
+    //             },
+    //             {
+    //               label: "loTDDC",
+    //               id: 134,
+    //             },
+    //             {
+    //               label: "Ulink",
+    //               id: 135,
+    //             },
+    //           ],
+    //         },
+    //       ],
+    //     },
+    //   ])
+    // );
+  },
+  methods: {},
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: transparent;
+}
+
+.db_lite,
+.chihou,
+.serial {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+
+.tree_menu {
+  position: fixed;
+  display: block;
+  z-index: 20000;
+  background-color: #fff;
+  padding: 5px 0;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  ul li {
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+  }
+  ul li:hover {
+    background-color: #ebeef5;
+  }
+}
+</style>
diff --git a/.history/src/views/Index_20231109180226.vue b/.history/src/views/Index_20231109180226.vue
new file mode 100644
index 0000000..4817657
--- /dev/null
+++ b/.history/src/views/Index_20231109180226.vue
@@ -0,0 +1,193 @@
+<template>
+  <div id="app">
+    <!-- 所有路由跳转链接 -->
+
+    <div class="db_lite" style="background-color: aqua; height: 100px">
+      <router-link to="/cockpit">驾驶舱</router-link>
+      <!-- <router-link to="/ipsetting">IP设置</router-link> -->
+      <router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
+      <router-link to="/dbcollectiongate">db有线网关-数据采集配置-有线网关配置</router-link>
+      <router-link to="/channelconfig">db有线网关-数据采集配置-网口通道配置</router-link>
+      <router-link to="/dbcollectdevice">db有线网关-数据采集配置-网口设备配置</router-link>
+      <router-link to="/dbcollect">db有线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfig">db有线网关-MQTT上云-网口MQTT1配置</router-link>
+      <!--db无线网关配置  -->
+      <router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
+      <router-link to="/dbcollectionwifi">db无线网关-数据采集配置-网关配置配置</router-link>
+      <router-link to="/dbcollectserial">db无线网关-数据采集配置-串口通道配置</router-link>
+      <router-link to="/dbserialdevice">db无线网关-数据采集配置-串口设备配置</router-link>
+      <router-link to="/dbwificollect">db无线网关-数据采集配置-网口采集点配置</router-link>
+      <router-link to="/mqttconfigwifi">db无线网关-MQTT上云-网口MQTT1配置</router-link>
+    </div>
+    <div class="chihou" style="background-color: aqua; height: 100px">
+      <router-link to="/chwiredgatewayip">斥候工业网关-ip配置-有线网关</router-link>
+      <router-link to="/gatewayconfiguration">斥候有线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/configuration">斥候有线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/collectionpoint">斥候有线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chmqtt">斥候有线工业网关-数据上云配置-MQTT上云</router-link>
+
+      <router-link to="/chwirelessgatewayip">斥候工业网关-ip配置-无线网关</router-link>
+      <router-link to="/chiwifigate">斥候无线工业网关-数据采集配置-网关配置</router-link>
+      <router-link to="/chiwifidevice">斥候无线工业网关-数据采集配置-设备配置</router-link>
+      <router-link to="/chiwificollect">斥候无线工业网关-数据采集配置-采集点配置</router-link>
+      <router-link to="/chiwifimqtt">斥候无线工业网关-数据上云配置-MQTT上云</router-link>
+    </div>
+    <div class="serial" style="background-color: aqua; height: 100px">
+      <router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
+      <router-link to="/ckportconfig">串口服务器-端口配置</router-link>
+      <router-link to="/towifi">串口服务器-485towifi-串口及网络协议设置</router-link>
+      <router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
+      <router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
+      <router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
+      <router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
+      <router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
+      <router-link to="/addstrategy">工业网闸配置-策略管理-添加策略</router-link>
+      <router-link to="/ntconfig">网络优化-网关配置</router-link>
+      <router-link to="/ntmaintenance">网络优化-网关维护</router-link>
+    </div>
+    <!-- <ceshi></ceshi> -->
+  </div>
+</template>
+<script>
+// import Ceshi from '@/components/ceshi.vue';
+// import ceshi from '@/components/ceshi.vue';
+export default {
+  name: "App",
+  // components: {
+  //   ceshi
+  // },
+  data() {
+    return {
+      tmDisplay: false,
+      rightMenu: {},
+    };
+  },
+  created() {
+    // localStorage.setItem(
+    //   "tree",
+    //   JSON.stringify([
+    //     {
+    //       label: "Gateway",
+    //       id: 1,
+    //       editing: true,
+    //       children: [
+    //         {
+    //           label: "数据采集",
+    //           id: 11,
+    //           children: [
+    //             {
+    //               label: "I/O点",
+    //               id: 111,
+    //             },
+    //             {
+    //               label: "用户点",
+    //               id: 112,
+    //             },
+    //             {
+    //               label: "计算点",
+    //               id: 113,
+    //             },
+    //             {
+    //               label: "系统点",
+    //               id: 114,
+    //             },
+    //           ],
+    //         },
+    //         {
+    //           label: "数据服务",
+    //           id: 12,
+    //           children: [
+    //             {
+    //               label: "Modbus",
+    //               id: 121,
+    //             },
+    //           ],
+    //         },
+    //         {
+    //           label: "IOT",
+    //           id: 13,
+    //           children: [
+    //             {
+    //               label: "Mqtt Client",
+    //               id: 131,
+    //             },
+    //             {
+    //               label: "Alink",
+    //               id: 132,
+    //             },
+    //             {
+    //               label: "Tlink",
+    //               id: 133,
+    //             },
+    //             {
+    //               label: "loTDDC",
+    //               id: 134,
+    //             },
+    //             {
+    //               label: "Ulink",
+    //               id: 135,
+    //             },
+    //           ],
+    //         },
+    //       ],
+    //     },
+    //   ])
+    // );
+  },
+  methods: {},
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  background-color: transparent;
+}
+
+.db_lite,
+.chihou,
+.serial {
+  font-size: 18px;
+  width: 100%;
+  color: white;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+
+.tree_menu {
+  position: fixed;
+  display: block;
+  z-index: 20000;
+  background-color: #fff;
+  padding: 5px 0;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul li {
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+  }
+
+  ul li:hover {
+    background-color: #ebeef5;
+  }
+}
+</style>
diff --git a/src/api/user.js b/src/api/user.js
index edabdc9..762d6be 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -12,7 +12,16 @@ export const GetUserAnswer = (data) => {
     `/wangguan?action=querycache&mark=${data.mark}&user_id=${data.user_id}`
   );
 };
-
+export const GetTree = (data) => {
+  return axios.get(
+    `/wangguan?action=queryacquisition&user_id=${data.user_id}&type=${data.type}`
+  )
+}
+export const SendTree = (data) => {
+  return axios.get(
+    `/wangguan?action=updateacquisition&user_id=${data.user_id}&data=${data.data}&type=${data.type}`
+  )
+}
 //最新拿缓存请求接口
 // export let GetUserAnswer = (data) => {
 //   return axios.get(
diff --git a/src/components/ChiClone.vue b/src/components/ChiClone.vue
index e9c5808..1e12fb1 100644
--- a/src/components/ChiClone.vue
+++ b/src/components/ChiClone.vue
@@ -263,7 +263,7 @@ export default {
         },
       ],
       labelPosition: "left",
-      formLabelWidth: "134px",
+      formLabelWidth: "138px",
       input1: 192,
       add_passage: false,
       rightMenu: "",
@@ -417,27 +417,27 @@ export default {
         },
       ],
       rules: {
-        server_ip: [
-          { required: true, message: "请输入服务器IP", trigger: "blur" },
+        mqtt_ip: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        port_number: [
-          { required: true, message: "请输入端口", trigger: "blur" },
+        mqtt_wgsn: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        gateway_id: [
-          { required: true, message: "请输入网关ID", trigger: "blur" },
+        mqtt_port: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        data_theme: [
-          { required: true, message: "请输入主题", trigger: "blur" },
+        mqtt_keepalive: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        upload_mode: [
+        mqtt_sssjfbzt: [
           { required: true, message: "请输入上传模式", trigger: "blur" },
         ],
-        upload_week: [
+        mqtt_qos: [
           { required: true, message: "请输入上传周期", trigger: "blur" },
         ],
-        data_filter: [
-          { required: true, message: "请输入数据过滤", trigger: "blur" },
-        ],
+        // data_filter: [
+        //   { required: true, message: "请输入数据过滤", trigger: "blur" },
+        // ],
       },
     };
   },
diff --git a/src/components/ChiClonewifi.vue b/src/components/ChiClonewifi.vue
index 7b196f5..2725014 100644
--- a/src/components/ChiClonewifi.vue
+++ b/src/components/ChiClonewifi.vue
@@ -263,7 +263,7 @@ export default {
         },
       ],
       labelPosition: "left",
-      formLabelWidth: "134px",
+      formLabelWidth: "138px",
       input1: 192,
       add_passage: false,
       rightMenu: "",
@@ -448,27 +448,24 @@ export default {
         },
       ],
       rules: {
-        server_ip: [
-          { required: true, message: "请输入服务器IP", trigger: "blur" },
+        mqtt_ip: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        port_number: [
-          { required: true, message: "请输入端口", trigger: "blur" },
+        mqtt_wgsn: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        gateway_id: [
-          { required: true, message: "请输入网关ID", trigger: "blur" },
+        mqtt_port: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        data_theme: [
-          { required: true, message: "请输入主题", trigger: "blur" },
+        mqtt_keepalive: [
+          { required: true, message: "", trigger: "blur" },
         ],
-        upload_mode: [
+        mqtt_sssjfbzt: [
           { required: true, message: "请输入上传模式", trigger: "blur" },
         ],
-        upload_week: [
+        mqtt_qos: [
           { required: true, message: "请输入上传周期", trigger: "blur" },
         ],
-        data_filter: [
-          { required: true, message: "请输入数据过滤", trigger: "blur" },
-        ],
       },
     };
   },
diff --git a/src/components/ChiDevice.vue b/src/components/ChiDevice.vue
index ca66b18..f6855a2 100644
--- a/src/components/ChiDevice.vue
+++ b/src/components/ChiDevice.vue
@@ -462,9 +462,9 @@ export default {
                 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.sbpz_port,
-                sbpz_czdz: this.sbpz_czdz,
-                sbpz_lxzq: this.sbpz_lxzq,
+                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,
diff --git a/src/components/ChiDevicewifi.vue b/src/components/ChiDevicewifi.vue
index 59f8621..378fa8e 100644
--- a/src/components/ChiDevicewifi.vue
+++ b/src/components/ChiDevicewifi.vue
@@ -261,19 +261,6 @@ export default {
                 label: 'Gateway',
                 children: [{
                     label: '数据采集',
-                    children: [{
-                        label: 'I/O点'
-                    },
-                    {
-                        label: '用户点',
-                    },
-                    {
-                        label: '计算点',
-                    },
-                    {
-                        label: '系统点',
-                    },
-                    ]
                 },
                 {
                     label: "上云服务",
@@ -462,9 +449,9 @@ export default {
                 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.sbpz_port,
-                sbpz_czdz: this.sbpz_czdz,
-                sbpz_lxzq: this.sbpz_lxzq,
+                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,
diff --git a/src/components/ChiWireld.vue b/src/components/ChiWireld.vue
index 141384d..6c97630 100644
--- a/src/components/ChiWireld.vue
+++ b/src/components/ChiWireld.vue
@@ -259,22 +259,24 @@ export default {
       if (data.data && data.state) {
         var obj = JSON.parse(data.data.mark_value);
         this.formData.ippz_wllx = obj.ippz_wllx;
-        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_mrwg1 = obj.ippz_mrwg.split(".")[0];
-        this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
-        this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
-        this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
-        this.ippz_dns_sx1 = obj.ippz_dns_sx.split(".")[0];
-        this.ippz_dns_sx2 = obj.ippz_dns_sx.split(".")[1];
-        this.ippz_dns_sx3 = obj.ippz_dns_sx.split(".")[2];
-        this.ippz_dns_sx4 = obj.ippz_dns_sx.split(".")[3];
+        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_mrwg1 = obj.ippz_mrwg.split(".")[0];
+          this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
+          this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
+          this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
+          this.ippz_dns_sx1 = obj.ippz_dns_sx.split(".")[0];
+          this.ippz_dns_sx2 = obj.ippz_dns_sx.split(".")[1];
+          this.ippz_dns_sx3 = obj.ippz_dns_sx.split(".")[2];
+          this.ippz_dns_sx4 = obj.ippz_dns_sx.split(".")[3];
+        }
       }
     },
   },
diff --git a/src/components/CollectionView.vue b/src/components/CollectionView.vue
index 2341df6..c62ecc4 100644
--- a/src/components/CollectionView.vue
+++ b/src/components/CollectionView.vue
@@ -5,7 +5,21 @@
         <!-- 设置树形控件 -->
         <!-- <el-button type="info" plain @click="dialogVisible = true">采集点设置</el-button> -->
         <div v-show="dialogVisible" class="tree_menu">
-            <el-tree :data="datas" :props="defaultProps" default-expand-all @node-click="treeNodeClick"></el-tree>
+            <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>
         <!-- </div> -->
@@ -94,6 +108,7 @@ export default {
     data() {
         return {
             loading: false,
+            flag: false,
             tableData: [{
                 cjdpz_tagid: 'MachinePamHID909',
                 cjdpz_mc: '急停状态',
@@ -394,7 +409,7 @@ export default {
             }],
             labelPosition: "left",
             formLabelWidth: "116px",
-            add_passage: false,
+            add_passage: true,
             rightMenu: "",
             dialogVisible: true,
             menuShow: false,
@@ -457,6 +472,16 @@ export default {
     },
 
     methods: {
+        //编辑
+        edit(event) {
+            this.flag = true;
+        },
+        //完成编辑
+        done(event) {
+            this.flag = false;
+            this.trees[0].label = this.gateway;
+            this.sendTree();
+        },
         treeNodeClick(key, keyPath) {
             console.log(key);
             console.log(keyPath);
@@ -501,14 +526,16 @@ export default {
                 console.log(answer);
                 let obj = JSON.parse(answer.data.data.mark_value);
                 console.log(obj);
-                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;
+                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;
+                }
             }
         }
     },
diff --git a/src/components/DataView.vue b/src/components/DataView.vue
index 4f6407c..b1f34cc 100644
--- a/src/components/DataView.vue
+++ b/src/components/DataView.vue
@@ -280,8 +280,8 @@
                   <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="ippz_mac" /><el-button
-                          v-copy="formdata.ippz_mac">复制</el-button>
+                        <el-input style="width: 200px" v-model="ippz_mac" /><el-button v-copy="ippz_mac"
+                          @click="CopyText">复制</el-button>
                       </el-col>
                     </el-row>
                   </el-form-item>
@@ -479,16 +479,15 @@ export default {
       if (res2.data.data && res2.data.state) {
         let res3 = JSON.parse(res2.data.data.mark_value);
         console.log(res3);
-        this.ippz_wangkou = res3.ippz_wangkou;
-        this.ippz_mrwg = res3.ippz_mrwg;
-        this.ippz_ip = res3.ippz_ip;
-        this.ippz_zwym = res3.ippz_zwym;
-        this.ippz_dns_sx = res3.ippz_dns_sx;
-        this.ippz_dns_by = res3.ippz_dns_by;
-        this.ippz_mac = res3.ippz_mac;
-        this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
-        this.ippz_wifi_mm = res3.ippz_wifi_mm;
         if (res3.ippz_mrwg) {
+          this.ippz_wangkou = res3.ippz_wangkou;
+          this.ippz_mrwg = res3.ippz_mrwg;
+          this.ippz_ip = res3.ippz_ip;
+          this.ippz_zwym = res3.ippz_zwym;
+          this.ippz_dns_sx = res3.ippz_dns_sx;
+          this.ippz_dns_by = res3.ippz_dns_by;
+          this.ippz_wifi_ssid = res3.ippz_wifi_ssid;
+          this.ippz_wifi_mm = res3.ippz_wifi_mm;
           this.ippz_mrwg1 = this.SliceData(this.ippz_mrwg)[0];
           this.ippz_mrwg2 = this.SliceData(this.ippz_mrwg)[1];
           this.ippz_mrwg3 = this.SliceData(this.ippz_mrwg)[2];
diff --git a/src/components/DeviceVIew.vue b/src/components/DeviceVIew.vue
index 6c7c7ec..ac8f577 100644
--- a/src/components/DeviceVIew.vue
+++ b/src/components/DeviceVIew.vue
@@ -2,8 +2,21 @@
 <template>
   <div>
     <div class="tree_menu" v-show="dialogVisible">
-      <el-tree :data="datas" :props="defaultProps" @node-contextmenu="rightClick" default-expand-all
-        @node-click="treeNodeClick"></el-tree>
+      <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">
@@ -77,7 +90,7 @@
 </template>
 
 <script>
-import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
 
 export default {
   name: "DeviceView",
@@ -85,6 +98,7 @@ export default {
   data() {
     return {
       loading: false,
+      flag: false,
       formdata: {
         sbpz_sbid: "有线区加工设备1",
         sbpz_sbmc: "有线区精雕1",
@@ -184,6 +198,7 @@ export default {
         children: "children",
         label: "label",
       },
+      nodekey: "",
       rules: {
         sbpz_sbid: [
           { required: true, message: "请输入设备ID", trigger: "blur" },
@@ -199,23 +214,40 @@ export default {
   },
   mounted() { },
   methods: {
+    //编辑
+    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;
-      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();
-        }
-      });
+      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();
       }
     },
     foo() {
@@ -259,6 +291,12 @@ export default {
       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");
     },
     async GetUserAnswer() {
@@ -276,9 +314,25 @@ export default {
         this.formdata.sbpz_sbmc = obj.sbpz_sbmc;
         this.formdata.sbpz_mac = obj.sbpz_mac;
       }
-    }
+    },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
   },
   created() {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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;
diff --git a/src/components/SerialPort.vue b/src/components/SerialPort.vue
index 59f6bdd..6605808 100644
--- a/src/components/SerialPort.vue
+++ b/src/components/SerialPort.vue
@@ -110,8 +110,8 @@
                     </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=""
+                            <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>
@@ -241,7 +241,7 @@ export default {
                 tdpz_sjw: "8",
                 tdpz_tzw: "1",
                 tdpz_jojy: "无校验（none）",
-                tdpz_cssj: "",
+                tdpz_cgsj: "",
                 tdpz_jgsj: "",
                 tdpz_lxsj: "",
                 tdpz_cfcs: "",
@@ -690,7 +690,7 @@ export default {
                 tdpz_jojy: [
                     { required: true, message: "请输入奇偶校验", trigger: "change" },
                 ],
-                tdpz_cssj: [
+                tdpz_cgsj: [
                     { required: true, message: "请输入超出时间", trigger: "blur" },
                 ],
                 tdpz_jgsj: [
@@ -769,7 +769,7 @@ export default {
                 tdpz_sjw: this.formData.tdpz_sjw,
                 tdpz_tzw: this.formData.tdpz_tzw,
                 tdpz_jojy: this.formData.tdpz_jojy,
-                tdpz_ccsj: this.formData.tdpz_cssj,
+                tdpz_cgsj: this.formData.tdpz_cgsj,
                 tdpz_jgsj: this.formData.tdpz_jgsj,
                 tdpz_lxsj: this.formData.tdpz_lxsj,
                 tdpz_cfcs: this.formData.tdpz_cfcs,
@@ -809,24 +809,24 @@ export default {
             this.loading = false;
             console.log(answer);
             console.log(answer.data);
-            if (answer.data.data != "null" && answer.data.state) {
+            if (answer.data.data && answer.data.state) {
                 // console.log(answer);
                 let obj = JSON.parse(answer.data.data.mark_value);
                 console.log(obj);
-                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_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;
                 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];
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index b37eb64..0495da9 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -4,7 +4,7 @@
     <!-- v-click-outside="closeMenu" -->
     <div>
       <div class="tree_menu" v-show="dialogVisible">
-        <el-tree :data="$store.state.tree" :props="defaultProps" default-expand-all @node-contextmenu="rightClick"
+        <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 }">
@@ -33,7 +33,7 @@
       </div>
     </div>
     <div class="pas_params">
-      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
+      <el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="loading">
         <el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
           <el-row>
             <el-col :span="12">
@@ -208,16 +208,15 @@
 </template>
 
 <script>
-import { SaveUserAnswer, GetUserAnswer, GetTree } from "@/api/user";
-import { Loading } from "element-ui";
+import { SaveUserAnswer, GetUserAnswer, GetTree, SendTree } from "@/api/user";
 
 export default {
   name: "TestTreeView",
 
   data() {
     return {
+      loading: false,
       flag: false,
-      gateway: JSON.parse(localStorage.getItem("tree"))[0].label,
       FormData: {
         tdpz_tdmc: "有线区Channel1",
         tdpz_td: "网口",
@@ -272,7 +271,8 @@ export default {
       rightMenu: "",
       dialogVisible: true,
       menuShow: false,
-      datas: [],
+      trees: [],
+      nodekey: "",
       datas2: [
         {
           label: "通用标准",
@@ -414,14 +414,14 @@ export default {
     //完成编辑
     done(event) {
       this.flag = false;
-      let tree = this.$store.state.tree;
-      tree[0].label = this.gateway;
-      this.$store.commit("setTree", tree);
+      this.trees[0].label = this.gateway;
+      this.sendTree();
     },
     rightClick(e, data, node) {
       console.log(data);
       // console.log(node);
       if (node.childNodes.length == 0) {
+        this.nodekey = data.id;
         // if (data.id == 111 || data.label == "I/O点") {
         this.menuShow = false;
         this.menuShow = true;
@@ -474,7 +474,7 @@ export default {
         tdpz_td: this.FormData.tdpz_td,
         tdpz_qdmc: this.FormData.tdpz_qdmc,
         tdpz_port: this.FormData.tdpz_port,
-        tdpz_ccsj: this.FormData.tdpz_cssj,
+        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,
@@ -501,13 +501,14 @@ export default {
       sessionStorage.setItem("DB-IotLite_yx", JSON.stringify(datas));
       console.log(res);
       console.log(res.data.data.mark_value);
-      // this.$router.push("/dbcollectdevice");
-      // const newChild = { id: id++, label: `${this.$store.state.tree}`, children: [] };
-      // if (!data.children) {
-      //   this.$set(data, 'children', []);
-      // }
-      // data.children.push(newChild);
-
+      // 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");
     },
     handleDetailClick(data, node, value) {
       console.log(data.label);
@@ -517,6 +518,14 @@ export default {
         this.diag_drive = false;
       }
     },
+    async sendTree() {
+      let result = await SendTree({
+        user_id: "USER202307301114011710",
+        data: JSON.stringify(this.trees),
+        type: "1",
+      })
+      console.log(result);
+    },
     async GetUserAnswer() {
       let answer = await GetUserAnswer({
         mark: "DB-IotLite_yx",
@@ -561,20 +570,25 @@ export default {
         this.FormData.tdpz_cfcs = obj.tdpz_cfcs;
       }
     },
-    renderContent(h, { node, data, store }) {
-      return (
-        <span class="custom-tree-node">
-          <span>{node.label}</span>
-        </span>);
-    }
+    // renderContent(h, { node, data, store }) {
+    //   return (
+    //     <span class="custom-tree-node">
+    //       <span>{node.label}</span>
+    //     </span>);
+    // }
   },
   created() {
-    GetTree("USER202307301114011710").then((res) => {
+    GetTree({
+      user_id: "USER202307301114011710",
+      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.loading = true;
     this.GetUserAnswer();
-    this.Loading = false;
+    this.loading = false;
     // let res2 = GetUserAnswer()
   },
 
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 3b3292c..4817657 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -45,17 +45,17 @@
       <router-link to="/ntconfig">网络优化-网关配置</router-link>
       <router-link to="/ntmaintenance">网络优化-网关维护</router-link>
     </div>
-    <ceshi></ceshi>
+    <!-- <ceshi></ceshi> -->
   </div>
 </template>
 <script>
 // import Ceshi from '@/components/ceshi.vue';
-import ceshi from '@/components/ceshi.vue';
+// import ceshi from '@/components/ceshi.vue';
 export default {
   name: "App",
-  components: {
-    ceshi
-  },
+  // components: {
+  //   ceshi
+  // },
   data() {
     return {
       tmDisplay: false,
@@ -63,76 +63,76 @@ export default {
     };
   },
   created() {
-    localStorage.setItem(
-      "tree",
-      JSON.stringify([
-        {
-          label: "Gateway",
-          id: 1,
-          editing: true,
-          children: [
-            {
-              label: "数据采集",
-              id: 11,
-              children: [
-                {
-                  label: "I/O点",
-                  id: 111,
-                },
-                {
-                  label: "用户点",
-                  id: 112,
-                },
-                {
-                  label: "计算点",
-                  id: 113,
-                },
-                {
-                  label: "系统点",
-                  id: 114,
-                },
-              ],
-            },
-            {
-              label: "数据服务",
-              id: 12,
-              children: [
-                {
-                  label: "Modbus",
-                  id: 121,
-                },
-              ],
-            },
-            {
-              label: "IOT",
-              id: 13,
-              children: [
-                {
-                  label: "Mqtt Client",
-                  id: 131,
-                },
-                {
-                  label: "Alink",
-                  id: 132,
-                },
-                {
-                  label: "Tlink",
-                  id: 133,
-                },
-                {
-                  label: "loTDDC",
-                  id: 134,
-                },
-                {
-                  label: "Ulink",
-                  id: 135,
-                },
-              ],
-            },
-          ],
-        },
-      ])
-    );
+    // localStorage.setItem(
+    //   "tree",
+    //   JSON.stringify([
+    //     {
+    //       label: "Gateway",
+    //       id: 1,
+    //       editing: true,
+    //       children: [
+    //         {
+    //           label: "数据采集",
+    //           id: 11,
+    //           children: [
+    //             {
+    //               label: "I/O点",
+    //               id: 111,
+    //             },
+    //             {
+    //               label: "用户点",
+    //               id: 112,
+    //             },
+    //             {
+    //               label: "计算点",
+    //               id: 113,
+    //             },
+    //             {
+    //               label: "系统点",
+    //               id: 114,
+    //             },
+    //           ],
+    //         },
+    //         {
+    //           label: "数据服务",
+    //           id: 12,
+    //           children: [
+    //             {
+    //               label: "Modbus",
+    //               id: 121,
+    //             },
+    //           ],
+    //         },
+    //         {
+    //           label: "IOT",
+    //           id: 13,
+    //           children: [
+    //             {
+    //               label: "Mqtt Client",
+    //               id: 131,
+    //             },
+    //             {
+    //               label: "Alink",
+    //               id: 132,
+    //             },
+    //             {
+    //               label: "Tlink",
+    //               id: 133,
+    //             },
+    //             {
+    //               label: "loTDDC",
+    //               id: 134,
+    //             },
+    //             {
+    //               label: "Ulink",
+    //               id: 135,
+    //             },
+    //           ],
+    //         },
+    //       ],
+    //     },
+    //   ])
+    // );
   },
   methods: {},
 };
@@ -176,6 +176,7 @@ export default {
     margin: 0;
     padding: 0;
   }
+
   ul li {
     list-style: none;
     margin: 0;
@@ -184,6 +185,7 @@ export default {
     line-height: 30px;
     cursor: pointer;
   }
+
   ul li:hover {
     background-color: #ebeef5;
   }