From 1db7db4bf02259e47d5d906d6b21ecc6451b0a09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期一, 23 十月 2023 15:26:46 +0800
Subject: [PATCH] 添加集群手动选主节点, 无线网络显示ip

---
 src/pages/settings/views/NetSettings.vue |  625 +++++++++++++++++++++++++-------------------------------
 1 files changed, 284 insertions(+), 341 deletions(-)

diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 4a76ee3..aec11cf 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -20,28 +20,15 @@
       <div class="net-right" v-loading="configLoading">
         <div class="net-set" v-if="activePage == 0">
           <div class="title">缃戠粶璁剧疆</div>
-          <el-form
-            :model="ruleForm"
-            :rules="rules"
-            ref="joinForm"
-            class="join-form"
-          >
+          <el-form :model="ruleForm" :rules="rules" ref="joinForm" class="join-form">
             <el-form-item prop="deviceName">
               <div class="p-title">璁惧鍚嶇О</div>
-              <el-input
-                v-model="ruleForm.deviceName"
-                size="small"
-                placeholder="蹇呭~"
-              ></el-input>
+              <el-input v-model="ruleForm.deviceName" size="small" placeholder="蹇呭~"></el-input>
             </el-form-item>
 
             <el-form-item prop="port">
               <div class="p-title">绔彛</div>
-              <el-input
-                v-model="ruleForm.port"
-                placeholder="閫夊~锛屽閮ㄨ闂殑绔彛"
-                size="small"
-              ></el-input>
+              <el-input v-model="ruleForm.port" placeholder="閫夊~锛屽閮ㄨ闂殑绔彛" size="small"></el-input>
             </el-form-item>
           </el-form>
           <!-- <div class="save-btn" @click="saveServerName">淇濆瓨</div> -->
@@ -53,89 +40,66 @@
         <div class="wifi-set" v-if="activePage == 1 && !inWifiDetail">
           <div class="title">鏃犵嚎缃戠粶</div>
 
-          <switchBar
-            :barName="`鏃犵嚎缃戝崱`"
-            @switchChange="wifiControl"
-            :value="isOpenWifi"
-          ></switchBar>
+          <switchBar :barName="`鏃犵嚎缃戝崱`" @switchChange="wifiControl" :value="true"></switchBar>
 
-          <div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
+          <div class="wifi-option" v-for="(item, i) in wifiList" :key="i" @click="checkWifi(item)">
             <div class="name">
-              <span class="icon iconfont" v-if="item.isConnected"
-                >&#xe676;</span
-              >
-              <span
-                :style="!item.isConnected ? { 'margin-left': '24px' } : {}"
-                >{{ item.name }}</span
-              >
+              <span class="icon iconfont" v-if="item.connected">&#xe676;</span>
+              <span :style="!item.connected ? { 'margin-left': '24px' } : {}">{{ item.essid | escape }}</span>
             </div>
 
             <div class="more-detail">
-              <span class="icon iconfont lock">&#xe726;</span>
+              <span class="icon iconfont lock" v-if="item.encryption_key">&#xe726;</span>
               <span class="icon iconfont signal">&#xe6e5;</span>
-              <span class="icon iconfont more-icon" @click="checkWifi(item)"
-                >&#xe640;</span
-              >
+              <span class="icon iconfont more-icon">&#xe640;</span>
             </div>
           </div>
+
+          <el-button type="text" @click="wirelessScan" :loading="wifiScanning">鎵弿鏃犵嚎缃戠粶</el-button>
         </div>
-        <div
-          class="wifi-detail"
-          v-if="activePage == 1 && inWifiDetail"
-          ref="ipvHolder"
-        >
+        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">
           <div class="title">鏃犵嚎缃戠粶</div>
-          <div class="btns">
-            <div class="cancel">鍒犻櫎</div>
-            <div class="ok">鏂紑杩炴帴</div>
-          </div>
-
           <div class="general-box">
-            <div class="in-title">閫氱敤</div>
+            <!-- <div class="in-title">閫氱敤</div> -->
 
-            <el-form :model="wifiForm" ref="wifiForm" class="join-form">
+            <el-form :model="selectedWifi" ref="wifiForm" class="join-form">
               <el-form-item prop="name">
                 <div class="p-title">鍚嶇О</div>
                 <!-- <div class="wifi-name">{{ 12123 }}</div> -->
-                <el-input
-                  v-model="wifiForm.name"
-                  placeholder=""
-                  size="small"
-                ></el-input>
+                <el-input v-model="selectedWifi.essid" placeholder="" size="small"></el-input>
               </el-form-item>
 
               <el-form-item prop="password">
                 <div class="p-title">瀵嗙爜</div>
+                <el-input value="******" v-if="selectedWifi.connected"></el-input>
                 <el-input
-                  v-model="wifiForm.password"
+                  v-model="selectedWifi.password"
                   placeholder="璇疯緭鍏ュ瘑鐮�"
                   size="small"
                   show-password
+                  v-else
                 ></el-input>
               </el-form-item>
             </el-form>
           </div>
 
-          <switchBar :barName="`楂樼骇璁剧疆`" :value="isHighClass"></switchBar>
+          <!-- <switchBar :barName="`楂樼骇璁剧疆`" :value="isHighClass"></switchBar> -->
 
           <div class="general-box fold" :class="{ hidden: IPV4_hid }">
             <div class="in-title">
               IPV4
-              <span
-                class="icon iconfont icon-fold"
-                @click="toggleFold('IPV4_hid')"
-                >&#xe757;</span
-              >
+              <span class="icon iconfont icon-fold" @click="toggleFold('IPV4_hid')">&#xe757;</span>
             </div>
 
-            <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">
+            <el-form :model="wirelessForm" ref="wirelessForm">
               <el-form-item>
                 <div class="p-title">鏂规硶</div>
                 <el-select
-                  v-model="value"
+                  v-model="wifiProto"
                   placeholder="璇烽�夋嫨"
                   size="small"
                   :popper-append-to-body="false"
+                  :disabled="wifiProto == 'dhcp'"
                 >
                   <el-option
                     v-for="item in options"
@@ -148,126 +112,42 @@
               <el-form-item prop="ip">
                 <div class="p-title">IP</div>
                 <ip-input
-                  :ip="ipv4Form.ip"
-                  @on-blur="ipv4Form.ip = arguments[0]"
+                  :ip="wirelessForm.ip"
+                  @on-blur="wirelessForm.ip = arguments[0]"
+                  :disabled="wifiProto == 'dhcp'"
                 ></ip-input>
               </el-form-item>
               <el-form-item prop="subMask">
                 <div class="p-title">瀛愮綉鎺╃爜</div>
                 <ip-input
-                  :ip="ipv4Form.subMask"
-                  @on-blur="ipv4Form.subMask = arguments[0]"
+                  :ip="wirelessForm.subMask"
+                  @on-blur="wirelessForm.subMask = arguments[0]"
+                  :disabled="wifiProto == 'dhcp'"
                 ></ip-input>
               </el-form-item>
 
               <el-form-item prop="gateway">
                 <div class="p-title">缃戝叧</div>
                 <ip-input
-                  :ip="ipv4Form.gateway"
-                  @on-blur="ipv4Form.gateway = arguments[0]"
+                  :ip="wirelessForm.gateway"
+                  @on-blur="wirelessForm.gateway = arguments[0]"
+                  :disabled="wifiProto == 'dhcp'"
                 ></ip-input>
               </el-form-item>
               <el-form-item prop="dns">
                 <div class="p-title">棣栭�塂NS</div>
                 <ip-input
-                  :ip="ipv4Form.dns1"
-                  @on-blur="ipv4Form.dns1 = arguments[0]"
+                  :ip="wirelessForm.dns1"
+                  @on-blur="wirelessForm.dns1 = arguments[0]"
+                  :disabled="wifiProto == 'dhcp'"
                 ></ip-input>
               </el-form-item>
               <el-form-item prop="dns">
                 <div class="p-title">澶囩敤DNS</div>
                 <ip-input
-                  :ip="ipv4Form.dns2"
-                  @on-blur="ipv4Form.dns2 = arguments[0]"
-                ></ip-input>
-              </el-form-item>
-            </el-form>
-          </div>
-
-          <div
-            class="general-box fold"
-            :class="{ hidden: IPV6_hid }"
-            ref="ipv6Holder"
-          >
-            <div class="in-title">
-              IPV6
-              <span
-                class="icon iconfont icon-fold"
-                @click="toggleFold('IPV6_hid')"
-                >&#xe757;</span
-              >
-            </div>
-
-            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">
-              <el-form-item>
-                <div class="p-title">鏂规硶</div>
-                <el-select
-                  v-model="value"
-                  placeholder="璇烽�夋嫨"
-                  size="small"
-                  :popper-append-to-body="false"
-                >
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item prop="ip">
-                <div class="p-title">IP</div>
-                <ip-input
-                  :ip="ipv6Form.ip"
-                  @on-blur="ipv6Form.ip = arguments[0]"
-                ></ip-input>
-              </el-form-item>
-              <el-form-item prop="subMask">
-                <div class="p-title">鍓嶇紑</div>
-                <div style="display: flex; width: 100%">
-                  <el-input
-                    v-model="ipv6Form.prefix"
-                    placeholder
-                    size="small"
-                  ></el-input>
-
-                  <div class="ad">
-                    <i class="el-icon-remove-outline" @click="minusPrefix"></i>
-                  </div>
-                  <div class="ad">
-                    <i
-                      class="el-icon-circle-plus-outline"
-                      @click="+ipv6Form.prefix++;"
-                    ></i>
-                  </div>
-                  <div class="ad">
-                    <i
-                      class="el-icon-refresh-left"
-                      @click="ipv6Form.prefix = ''"
-                    ></i>
-                  </div>
-                </div>
-              </el-form-item>
-
-              <el-form-item prop="gateway">
-                <div class="p-title">缃戝叧</div>
-                <ip-input
-                  :ip="ipv6Form.gateway"
-                  @on-blur="ipv6Form.gateway = arguments[0]"
-                ></ip-input>
-              </el-form-item>
-              <el-form-item prop="dns">
-                <div class="p-title">棣栭�塂NS</div>
-                <ip-input
-                  :ip="ipv6Form.dns1"
-                  @on-blur="ipv6Form.dns1 = arguments[0]"
-                ></ip-input>
-              </el-form-item>
-              <el-form-item prop="dns">
-                <div class="p-title">澶囩敤DNS</div>
-                <ip-input
-                  :ip="ipv6Form.dns2"
-                  @on-blur="ipv6Form.dns2 = arguments[0]"
+                  :ip="wirelessForm.dns2"
+                  @on-blur="wirelessForm.dns2 = arguments[0]"
+                  :disabled="wifiProto == 'dhcp'"
                 ></ip-input>
               </el-form-item>
             </el-form>
@@ -275,31 +155,19 @@
 
           <div class="btns">
             <div class="cancel" @click="inWifiDetail = false">鍙栨秷</div>
-            <div class="ok">淇濆瓨</div>
+            <div class="ok" v-if="selectedWifi.connected" @click="disconectedWifi">鏂紑杩炴帴</div>
+            <div class="ok" v-else @click="saveWifi">淇濆瓨</div>
           </div>
         </div>
 
         <div class="wire" v-if="activePage == 2 && !inWireDetail">
           <div class="title">鏈夌嚎缃戠粶</div>
-          <div
-            class="wire-bar"
-            v-for="(item, i) in wireArr"
-            :key="i"
-            @click.self="checkWire(item)"
-          >
+          <div class="wire-bar" v-for="(item, i) in wireArr" :key="i" @click.self="checkWire(item)">
             <div class="name">{{ "缃戠粶" + item.index }}</div>
 
             <div class="right">
-              <span
-                class="icon iconfont good"
-                v-if="item.lower_up && item.active"
-                >&#xe6f1;</span
-              >
-              <span
-                class="icon iconfont bad"
-                v-if="!item.lower_up && item.active"
-                >&#xe6e6;</span
-              >
+              <span class="icon iconfont good" v-if="item.lower_up && item.active">&#xe6f1;</span>
+              <span class="icon iconfont bad" v-if="!item.lower_up && item.active">&#xe6e6;</span>
               <el-switch
                 v-model="item.active"
                 active-color="#4E94FF"
@@ -322,32 +190,20 @@
             </el-form-item>
             <el-form-item prop="ip">
               <div class="p-title">IP</div>
-              <ip-input
-                :ip="wireForm.ip"
-                @on-blur="wireForm.ip = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.ip" @on-blur="wireForm.ip = arguments[0]"></ip-input>
             </el-form-item>
             <el-form-item prop="subMask">
               <div class="p-title">瀛愮綉鎺╃爜</div>
-              <ip-input
-                :ip="wireForm.subMask"
-                @on-blur="wireForm.subMask = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.subMask" @on-blur="wireForm.subMask = arguments[0]"></ip-input>
             </el-form-item>
 
             <el-form-item prop="gateway">
               <div class="p-title">缃戝叧</div>
-              <ip-input
-                :ip="wireForm.gateway"
-                @on-blur="wireForm.gateway = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.gateway" @on-blur="wireForm.gateway = arguments[0]"></ip-input>
             </el-form-item>
             <el-form-item prop="dns">
               <div class="p-title">DNS</div>
-              <ip-input
-                :ip="wireForm.dns"
-                @on-blur="wireForm.dns = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>
             </el-form-item>
           </el-form>
 
@@ -373,16 +229,18 @@
   getDevInfo,
   downNetCard,
   upNetCard,
-} from "@/api/system";
+  getWifiList,
+  connectWifi
+} from "@/api/system"
 
-import ipInput from "../components/IPInput";
-import switchBar from "../components/switchBar";
+import ipInput from "../components/IPInput"
+import switchBar from "../components/switchBar"
 
-import WifiGateway from "../components/WifiGateway";
-import LoraGateway from "../components/LoraGateway";
-import MqttGateway from "../components/MqttGateway";
+import WifiGateway from "../components/WifiGateway"
+import LoraGateway from "../components/LoraGateway"
+import MqttGateway from "../components/MqttGateway"
 
-import { isIPv4 } from "@/scripts/validate";
+import { isIPv4 } from "@/scripts/validate"
 
 export default {
   components: {
@@ -390,44 +248,45 @@
     switchBar,
     WifiGateway,
     LoraGateway,
-    MqttGateway,
+    MqttGateway
+  },
+  filters: {
+    escape(val) {
+      return unescape(val)
+    }
   },
   data() {
     const checkPwd = (rule, value, callback) => {
       if (!value) {
-        return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+        return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"))
       }
       setTimeout(() => {
         if (value.length != 6) {
-          callback(new Error("瀵嗙爜搴斾负6浣�!"));
+          callback(new Error("瀵嗙爜搴斾负6浣�!"))
         } else {
-          callback();
+          callback()
         }
-      }, 1000);
-    };
+      }, 1000)
+    }
     return {
       isHighClass: false,
       ruleForm: {
         deviceName: "",
-        port: "",
-      },
-      wifiForm: {
-        name: "",
-        password: "",
+        port: ""
       },
       wireArr: [],
       inWifiDetail: false,
-      wifiList: [
-        { name: "鏃犵嚎缃戠粶1", isConnected: false },
-        { name: "鏃犵嚎缃戠粶2", isConnected: true },
-      ],
+      selectedWifi: {},
+      wifiList: [],
+      wifiScanning: false,
       isOpenWifi: false,
+      wifiIfname: "",
       inWireDetail: false,
       wireForm: {
         dns: "",
         subMask: "",
         gateway: "",
-        ip: "",
+        ip: ""
       },
       originalConfig: {},
       wireFormRules: {
@@ -435,45 +294,43 @@
           {
             required: true,
             message: "璇疯緭鍏P鍦板潃",
-            trigger: "change",
+            trigger: "change"
           },
-          { validator: isIPv4, trigger: "change" },
+          { validator: isIPv4, trigger: "change" }
         ],
 
         gateway: [
           {
             required: true,
             message: "璇疯緭鍏ョ綉鍏�",
-            trigger: "change",
+            trigger: "change"
           },
-          { validator: isIPv4, trigger: "change" },
+          { validator: isIPv4, trigger: "change" }
         ],
         dns: [
           {
             required: true,
             message: "璇疯緭鍏ns鍦板潃",
-            trigger: "change",
+            trigger: "change"
           },
-          { validator: isIPv4, trigger: "change" },
+          { validator: isIPv4, trigger: "change" }
         ],
 
         subMask: [
           {
             required: true,
             message: "璇疯緭鍏ュ瓙缃戞帺鐮�",
-            trigger: "change",
+            trigger: "change"
           },
-          { validator: isIPv4, trigger: "change" },
-        ],
+          { validator: isIPv4, trigger: "change" }
+        ]
       },
       activePage: 0,
       activeWireItem: {},
       rules: {
-        deviceName: [
-          { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
-        ],
+        deviceName: [{ required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" }]
       },
-      ipv4Form: {},
+      wirelessForm: {},
       ipv6Form: {},
       ipv4FormRules: {},
       tabList: [
@@ -482,108 +339,136 @@
         { name: "鏈夌嚎缃戠粶", icon: "\ue73b" },
         { name: "WiFi缃戝叧", icon: "\ue73b" },
         { name: "LORA缃戝叧", icon: "\ue73b" },
-        { name: "MQTT缃戝叧", icon: "\ue73b" },
+        { name: "MQTT缃戝叧", icon: "\ue73b" }
       ],
       ipv6FormRules: {},
       options: [
         {
-          value: "閫夐」1",
-          label: "鑷姩",
+          value: "dhcp",
+          label: "鑷姩"
         },
         {
-          value: "閫夐」2",
-          label: "鎵嬪姩",
-        },
+          value: "static",
+          label: "鎵嬪姩"
+        }
       ],
-      value: "",
-      IPV4_hid: false,
+      wifiProto: "dhcp",
+      IPV4_hid: true,
       IPV6_hid: false,
-      configLoading: false,
-    };
+      configLoading: false
+    }
   },
   mounted() {
-    this.getCurServer();
-    this.fetchWireList();
+    this.getCurServer()
+    this.fetchWireList()
   },
   methods: {
+    wirelessScan() {
+      this.wifiList = []
+      this.wifiScanning = true
+      getWifiList({ ifname: this.wifiIfname })
+        .then((rsp) => {
+          if (rsp && rsp.success) {
+            this.wifiList = rsp.data.filter((e) => {
+              return e.essid != ""
+            })
+          }
+
+          this.wifiScanning = false
+        })
+        .catch(() => {
+          this.wifiScanning = false
+        })
+    },
     minusPrefix() {
-      debugger;
-      this.ipv6Form.prefix;
+      this.ipv6Form.prefix
     },
     switchNetCard(item) {
       if (item.active) {
         upNetCard({ ifname: item.name }).then(
           (res) => {
             if (res.success) {
-              this.$message.success(res.data);
-              this.fetchWireList();
+              this.$message.success(res.data)
+              this.fetchWireList()
             }
           },
           (err) => {
-            item.active = false;
-            this.$message.error(err.msg);
+            item.active = false
+            this.$message.error(err.msg)
           }
-        );
+        )
       } else {
         downNetCard({ ifname: item.name }).then(
           (res) => {
             if (res.success) {
-              this.$message.success(res.data);
-              this.fetchWireList();
+              this.$message.success(res.data)
+              this.fetchWireList()
             }
           },
           (err) => {
-            item.active = true;
-            this.$message.error(err.msg);
+            item.active = true
+            this.$message.error(err.msg)
           }
-        );
+        )
       }
     },
     getCurServer() {
       getDevInfo().then((res) => {
-        this.ruleForm.deviceName = res.data.server_name;
-        this.ruleForm.port = res.data.server_port;
-      });
+        this.ruleForm.deviceName = res.data.server_name
+        this.ruleForm.port = res.data.server_port
+      })
     },
     fetchWireList() {
       getWireList().then((res) => {
         if (res && res.success) {
-          this.wireArr = res.data;
+          this.wireArr = res.data
+
+          // 杩囨护缃戠粶鎺ュ彛鐘舵��
           this.wireArr.forEach((x) => {
-            let t = x.flags.split("|")[0] == "up";
-            this.$set(x, "active", t);
-          });
+            let t = x.flags.split("|")[0] == "up"
+            this.$set(x, "active", t)
+
+            if (x.wireless) {
+              this.wifiIfname = x.name
+            }
+          })
+
+          // 杩囨护鎺墂ifi鎺ュ彛
+          this.wireArr = res.data.filter((e) => {
+            return !e.wireless
+          })
         }
-      });
+      })
     },
     cancelSaveWire() {
-      this.inWireDetail = false;
-      this.wireForm.ip = "";
-      this.wireForm.gateway = "";
-      this.wireForm.dns = "";
-      this.wireForm.subMask = "";
-      this.originalConfig = this.wireForm;
+      this.inWireDetail = false
+      this.wireForm.ip = ""
+      this.wireForm.gateway = ""
+      this.wireForm.dns = ""
+      this.wireForm.subMask = ""
+      this.originalConfig = this.wireForm
     },
     saveServerName() {
       setServerName({
         server_name: this.ruleForm.deviceName,
-        server_port: this.ruleForm.port,
+        server_port: this.ruleForm.port
       }).then((res) => {
         if (res && res.success) {
-          this.$message.success(res.data);
+          this.$message.success(res.data)
         }
-      });
+      })
     },
     openRight(i) {
       if (i == 0) {
-        this.ruleForm.deviceName = "";
-        this.ruleForm.port = "";
-        this.getCurServer();
+        this.ruleForm.deviceName = ""
+        this.ruleForm.port = ""
+        this.getCurServer()
       }
       if (i == 1) {
-        this.inWifiDetail = false;
+        this.inWifiDetail = false
+        this.wirelessScan()
       }
-      this.activePage = i;
+      this.activePage = i
     },
     saveWire(ifname) {
       this.$refs["wireForm"].validate((valid) => {
@@ -593,24 +478,21 @@
             gateway: this.wireForm.gateway,
             dns: this.wireForm.dns,
             subMask: this.wireForm.subMask,
-            ifname: this.activeWireItem.name,
-          };
+            ifname: this.activeWireItem.name
+          }
 
-          let newUri =
-            location.protocol +
-            "//" +
-            data.ip +
-            (location.port == 80 ? "" : ":" + location.port);
+          let newUri = location.protocol + "//" + data.ip + (location.port == 80 ? "" : ":" + location.port)
 
           this.$confirm("纭闇�瑕佷慨鏀规湇鍔″櫒閰嶇疆鍚楋紵", {
             center: true,
             cancelButtonClass: "comfirm-class-cancle",
-            confirmButtonClass: "comfirm-class-sure",
+            confirmButtonClass: "comfirm-class-sure"
           })
             .then(() => {
-              this.configLoading = true;
+              this.configLoading = true
               if (this.wireForm.ip !== this.originalConfig.ip) {
-                this.configLoading = false;
+                this.configLoading = false
+                console.log("set time out")
                 var changeIPTimer = setTimeout(() => {
                   this.$alert(
                     '<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒ip, 璇烽噸鏂扮櫥褰�</strong><a target="_parent" href="' +
@@ -621,110 +503,165 @@
                     "鎻愮ず",
                     {
                       dangerouslyUseHTMLString: true,
-                      customClass: "noticeBox",
+                      customClass: "noticeBox"
                     }
-                  );
-                }, 10000);
+                  )
+                }, 10000)
               }
 
               setNetWorkCard(data)
                 .then((rsp) => {
-                  this.configLoading = false;
+                  this.configLoading = false
                   if (rsp && rsp.success) {
                     this.$notify({
                       type: "success",
-                      message: "鏈嶅姟鍣ㄩ厤缃垚鍔�",
-                    });
+                      message: "鏈嶅姟鍣ㄩ厤缃垚鍔�"
+                    })
                   }
                 })
-                .catch((err) => {
-                  clearTimeout(changeIPTimer);
-                  this.configLoading = false;
-                  this.$notify({
-                    type: "error",
-                    message: "淇濆瓨澶辫触",
-                  });
-                });
+                .catch((err) => {})
               this.$message({
                 message: "鎿嶄綔瀹屾垚,璇风◢鍚�",
-                type: "success",
-              });
+                type: "success"
+              })
             })
-            .catch((err) => {});
+            .catch((err) => {})
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     wifiControl(val) {},
-    checkWifi() {
-      this.inWifiDetail = true;
+    checkWifi(item) {
+      this.inWifiDetail = true
+      this.selectedWifi = item
+      getNetWorkCardInfo({
+        ifname: this.wifiIfname
+      }).then((res) => {
+        if (res && res.success) {
+          this.wirelessForm.ip = res.data.ip
+          this.wirelessForm.gateway = res.data.gateway
+          this.wirelessForm.dns = res.data.dns
+          this.wirelessForm.subMask = res.data.subMask
+        }
+      })
     },
     openWireDetail(item) {
-      this.inWireDetail = true;
-      this.activeWireItem = item;
+      this.inWireDetail = true
+      this.activeWireItem = item
       getNetWorkCardInfo({
-        ifname: item.name,
+        ifname: item.name
       }).then(
         (res) => {
           if (res && res.success) {
-            this.wireForm.ip = res.data.ip;
-            this.wireForm.gateway = res.data.gateway;
-            this.wireForm.dns = res.data.dns;
-            this.wireForm.subMask = res.data.subMask;
-            this.originalConfig = JSON.parse(JSON.stringify(this.wireForm));
+            this.wireForm.ip = res.data.ip
+            this.wireForm.gateway = res.data.gateway
+            this.wireForm.dns = res.data.dns
+            this.wireForm.subMask = res.data.subMask
+            this.originalConfig = JSON.parse(JSON.stringify(this.wireForm))
           }
         },
         (err) => {
-          this.$message.error("鏌ユ壘涓嶅埌鏁版嵁: " + err.msg);
+          this.$message.error("鏌ユ壘涓嶅埌鏁版嵁: " + err.msg)
         }
-      );
+      )
     },
     checkWire(item) {
       if (item.addrs) {
-        this.openWireDetail(item);
-        return;
+        this.openWireDetail(item)
+        return
       }
       this.$confirm("鎮ㄨ繕鏈厤缃綉缁滀俊鎭紝鏄惁鐜板湪閰嶇疆锛�", "鎻愮ず", {
         confirmButtonText: "纭畾",
         cancelButtonText: "鍙栨秷",
         type: "warning",
-        customClass: "confirmBox",
+        customClass: "confirmBox"
       }).then(() => {
-        this.openWireDetail(item);
-      });
+        this.openWireDetail(item)
+      })
     },
     toggleFold(tog) {
-      const demo = this.$refs.ipvHolder;
+      const demo = this.$refs.ipvHolder
       if (!(this.IPV4_hid && !this.IPV6_hid)) {
         setTimeout(() => {
           demo.scrollIntoView({
             block: "end",
             inline: "nearest",
-            behavior: "smooth",
-          });
-        }, 300);
+            behavior: "smooth"
+          })
+        }, 300)
       }
-      this[tog] = !this[tog];
+      this[tog] = !this[tog]
     },
+    disconectedWifi() {
+      let param = {
+        ifname: this.wifiIfname,
+        ssid: "del",
+        passwd: ""
+      }
+
+      this.configLoading = true
+      connectWifi(param)
+        .then((rsp) => {
+          if (rsp && rsp.success) {
+            this.$message.success("閰嶇疆鎴愬姛")
+          } else {
+            this.$message.error("閰嶇疆澶辫触")
+          }
+
+          this.configLoading = false
+          this.wirelessScan()
+        })
+        .catch(() => {
+          this.configLoading = false
+        })
+    },
+    saveWifi() {
+      let param = {
+        ifname: this.wifiIfname,
+        ssid: this.selectedWifi.essid,
+        passwd: this.selectedWifi.password
+      }
+
+      if (this.selectedWifi.password.length < 8) {
+        this.$message.warning("瀵嗙爜涓嶈兘灏戜簬8浣�")
+        return
+      }
+
+      this.configLoading = true
+      connectWifi(param)
+        .then((rsp) => {
+          if (rsp && rsp.success) {
+            this.$message.success("閰嶇疆鎴愬姛")
+          } else {
+            this.$message.error("閰嶇疆澶辫触")
+          }
+
+          this.configLoading = false
+          this.wirelessScan()
+        })
+        .catch(() => {
+          this.configLoading = false
+        })
+    }
   },
   computed: {
     showStatus() {
-      return this.wireArr.some((item) => item.lower_up == true);
-    },
-  },
-};
+      return this.wireArr.some((item) => item.lower_up == true)
+    }
+  }
+}
 </script>
 <style lang="scss">
 .all {
   width: 100%;
 }
 .wire {
-  width: 456px;
+  //  width: 456px;
   margin: 0 auto;
 }
 .wire-detail {
-  width: 456px;
+  //  width: 456px;
   margin: 0 auto;
   .title {
     font-size: 16px;
@@ -762,7 +699,7 @@
   }
 }
 .net-set {
-  max-width: 456px;
+  // max-width: 456px;
   margin: 0 auto;
   .title {
     font-size: 16px;
@@ -855,11 +792,8 @@
       border-radius: 8px;
       margin-bottom: 4px;
     }
-    .el-form-item.is-required:not(.is-no-asterisk)
-      > .el-form-item__label:before,
-    .el-form-item.is-required:not(.is-no-asterisk)
-      .el-form-item__label-wrap
-      > .el-form-item__label:before {
+    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
+    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
       display: none;
     }
     .el-select {
@@ -938,7 +872,7 @@
       max-width: none !important;
     }
     .wifi-set {
-      max-width: 456px;
+      //   max-width: 456px;
       margin: 0 auto;
       .switch-bar {
         background: #f2f2f7;
@@ -960,6 +894,7 @@
         margin-bottom: 4px;
         background: #f2f2f7;
         border-radius: 8px;
+        cursor: pointer;
         .name {
           font-size: 14px;
           color: #4f4f4f;
@@ -989,7 +924,7 @@
       }
     }
     .wifi-detail {
-      max-width: 454px;
+      //  max-width: 454px;
       margin: 0 auto;
       transition: all 0.3s linear 0s;
       .general-box {
@@ -1001,10 +936,15 @@
         margin-bottom: 20px;
         &.fold {
           height: 342px;
+
+          .in-title {
+            display: flex;
+            justify-content: space-between;
+          }
+
           .icon-fold {
             display: inline-block;
             font-size: 14px;
-            margin-left: 360px;
             transition: all 0.3s linear 0s;
             cursor: pointer;
           }
@@ -1096,14 +1036,17 @@
           align-items: center;
           .el-switch__core {
             height: 14px;
-            background-color: var(--colorCard) !important;
-            border-color: var(--colorCard) !important;
           }
           .el-switch.is-checked .el-switch__core::after {
             left: 100%;
             margin-left: -12px;
           }
 
+          .el-switch.is-checked .el-switch__core {
+            background-color: var(--colorCard) !important;
+            border-color: var(--colorCard) !important;
+          }
+
           .el-switch__core:after {
             content: "";
             position: absolute;

--
Gitblit v1.8.0