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" - ></span - > - <span - :style="!item.isConnected ? { 'margin-left': '24px' } : {}" - >{{ item.name }}</span - > + <span class="icon iconfont" v-if="item.connected"></span> + <span :style="!item.connected ? { 'margin-left': '24px' } : {}">{{ item.essid | escape }}</span> </div> <div class="more-detail"> - <span class="icon iconfont lock"></span> + <span class="icon iconfont lock" v-if="item.encryption_key"></span> <span class="icon iconfont signal"></span> - <span class="icon iconfont more-icon" @click="checkWifi(item)" - ></span - > + <span class="icon iconfont more-icon"></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')" - ></span - > + <span class="icon iconfont icon-fold" @click="toggleFold('IPV4_hid')"></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')" - ></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" - ></span - > - <span - class="icon iconfont bad" - v-if="!item.lower_up && item.active" - ></span - > + <span class="icon iconfont good" v-if="item.lower_up && item.active"></span> + <span class="icon iconfont bad" v-if="!item.lower_up && item.active"></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