From f36337a2fb5442241cca477f6b994948dd4d123f Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期日, 08 十月 2023 18:49:45 +0800
Subject: [PATCH] 添加debuggtool
---
src/pages/settings/views/NetSettings.vue | 286 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 153 insertions(+), 133 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index f115a26..0f7b891 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -17,7 +17,7 @@
<!-- <span v-if="showStatus && i == 2" class="status">宸茶繛鎺�</span> -->
</div>
</div>
- <div class="net-right">
+ <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">
@@ -40,46 +40,50 @@
<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="wifiList.length > 0"></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">鎵弿鏃犵嚎缃戠粶</el-button>
</div>
<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 v-model="wifiForm.password" placeholder="璇疯緭鍏ュ瘑鐮�" size="small" show-password></el-input>
+ <el-input value="******" v-if="selectedWifi.connected"></el-input>
+ <el-input
+ 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">
@@ -121,65 +125,12 @@
<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-input>
- </el-form-item>
- </el-form>
- </div>
+ </div> -->
<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>
@@ -251,7 +202,9 @@
getNetWorkCardInfo,
getDevInfo,
downNetCard,
- upNetCard
+ upNetCard,
+ getWifiList,
+ connectWifi
} from "@/api/system"
import ipInput from "../components/IPInput"
@@ -270,6 +223,11 @@
WifiGateway,
LoraGateway,
MqttGateway
+ },
+ filters: {
+ escape(val) {
+ return unescape(val)
+ }
},
data() {
const checkPwd = (rule, value, callback) => {
@@ -296,11 +254,10 @@
},
wireArr: [],
inWifiDetail: false,
- wifiList: [
- { name: "鏃犵嚎缃戠粶1", isConnected: false },
- { name: "鏃犵嚎缃戠粶2", isConnected: true }
- ],
+ selectedWifi: {},
+ wifiList: [],
isOpenWifi: false,
+ wifiIfname: "",
inWireDetail: false,
wireForm: {
dns: "",
@@ -373,8 +330,9 @@
}
],
value: "",
- IPV4_hid: false,
- IPV6_hid: false
+ IPV4_hid: true,
+ IPV6_hid: false,
+ configLoading: false
}
},
mounted() {
@@ -382,8 +340,17 @@
this.fetchWireList()
},
methods: {
+ wirelessScan() {
+ this.wifiList = []
+ getWifiList({ ifname: this.wifiIfname }).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.wifiList = rsp.data.filter((e) => {
+ return e.essid != ""
+ })
+ }
+ })
+ },
minusPrefix() {
- debugger
this.ipv6Form.prefix
},
switchNetCard(item) {
@@ -425,9 +392,20 @@
getWireList().then((res) => {
if (res && res.success) {
this.wireArr = res.data
+
+ // 杩囨护缃戠粶鎺ュ彛鐘舵��
this.wireArr.forEach((x) => {
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
})
}
})
@@ -458,28 +436,11 @@
}
if (i == 1) {
this.inWifiDetail = false
+ this.wirelessScan()
}
this.activePage = i
},
saveWire(ifname) {
- // let data = {
- // ip: this.wireForm.ip,
- // gateway: this.wireForm.gateway,
- // dns: this.wireForm.dns,
- // subMask: this.wireForm.subMask,
- // ifname: this.activeWireItem.name,
- // };
- // setNetWorkCard(data).then(
- // (res) => {
- // if (res && res.success) {
- // this.$message.success(res.data);
- // }
- // },
- // (err) => {
- // this.$message.error("淇濆瓨澶辫触锛�" + err.msg);
- // }
- // );
-
this.$refs["wireForm"].validate((valid) => {
if (valid) {
let data = {
@@ -490,24 +451,7 @@
ifname: this.activeWireItem.name
}
- let newUri = location.protocol + "//" + data.ip + location.port == 80 ? "" : ":" + location.port
-
- if (this.wireForm.ip !== this.originalConfig.ip) {
- var changeIPTimer = setTimeout(() => {
- this.$alert(
- '<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒ip, 璇烽噸鏂扮櫥褰�</strong><a target="_parent" href="' +
- newUri +
- '"> ' +
- newUri +
- "<a/>",
- "鎻愮ず",
- {
- dangerouslyUseHTMLString: true,
- customClass: "noticeBox"
- }
- )
- }, 10000)
- }
+ let newUri = location.protocol + "//" + data.ip + (location.port == 80 ? "" : ":" + location.port)
this.$confirm("纭闇�瑕佷慨鏀规湇鍔″櫒閰嶇疆鍚楋紵", {
center: true,
@@ -515,8 +459,29 @@
confirmButtonClass: "comfirm-class-sure"
})
.then(() => {
+ this.configLoading = true
+ if (this.wireForm.ip !== this.originalConfig.ip) {
+ this.configLoading = false
+ console.log("set time out")
+ var changeIPTimer = setTimeout(() => {
+ this.$alert(
+ '<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒ip, 璇烽噸鏂扮櫥褰�</strong><a target="_parent" href="' +
+ newUri +
+ '"> ' +
+ newUri +
+ "<a/>",
+ "鎻愮ず",
+ {
+ dangerouslyUseHTMLString: true,
+ customClass: "noticeBox"
+ }
+ )
+ }, 10000)
+ }
+
setNetWorkCard(data)
.then((rsp) => {
+ this.configLoading = false
if (rsp && rsp.success) {
this.$notify({
type: "success",
@@ -524,13 +489,7 @@
})
}
})
- .catch((err) => {
- clearTimeout(changeIPTimer)
- this.$notify({
- type: "error",
- message: "淇濆瓨澶辫触"
- })
- })
+ .catch((err) => {})
this.$message({
message: "鎿嶄綔瀹屾垚,璇风◢鍚�",
type: "success"
@@ -543,8 +502,9 @@
})
},
wifiControl(val) {},
- checkWifi() {
+ checkWifi(item) {
this.inWifiDetail = true
+ this.selectedWifi = item
},
openWireDetail(item) {
this.inWireDetail = true
@@ -592,6 +552,57 @@
}, 300)
}
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: {
@@ -606,11 +617,11 @@
width: 100%;
}
.wire {
- width: 456px;
+ // width: 456px;
margin: 0 auto;
}
.wire-detail {
- width: 456px;
+ // width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -648,7 +659,7 @@
}
}
.net-set {
- max-width: 456px;
+ // max-width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -821,7 +832,7 @@
max-width: none !important;
}
.wifi-set {
- max-width: 456px;
+ // max-width: 456px;
margin: 0 auto;
.switch-bar {
background: #f2f2f7;
@@ -843,6 +854,7 @@
margin-bottom: 4px;
background: #f2f2f7;
border-radius: 8px;
+ cursor: pointer;
.name {
font-size: 14px;
color: #4f4f4f;
@@ -872,7 +884,7 @@
}
}
.wifi-detail {
- max-width: 454px;
+ // max-width: 454px;
margin: 0 auto;
transition: all 0.3s linear 0s;
.general-box {
@@ -884,10 +896,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;
}
@@ -979,14 +996,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