From a3f357e8a60443b74b64c7479113c68eb35ce1f5 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期五, 15 七月 2022 19:44:57 +0800
Subject: [PATCH] 控制轮询
---
src/pages/settings/views/NetSettings.vue | 355 ++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 279 insertions(+), 76 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index e7fe2d8..fa61b0f 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
@@ -79,7 +79,11 @@
</div>
</div>
</div>
- <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail">
+ <div
+ class="wifi-detail"
+ v-if="activePage == 1 && inWifiDetail"
+ ref="ipvHolder"
+ >
<div class="title">鏃犵嚎缃戠粶</div>
<div class="btns">
<div class="cancel">鍒犻櫎</div>
@@ -89,12 +93,7 @@
<div class="general-box">
<div class="in-title">閫氱敤</div>
- <el-form
- :model="wifiForm"
- :rules="wifiFormRules"
- ref="wifiForm"
- class="join-form"
- >
+ <el-form :model="wifiForm" ref="wifiForm" class="join-form">
<el-form-item prop="name">
<div class="p-title">鍚嶇О</div>
<!-- <div class="wifi-name">{{ 12123 }}</div> -->
@@ -117,20 +116,27 @@
</el-form>
</div>
- <switchBar
- :barName="`楂樼骇璁剧疆`"
- @switchChange="highClassSetting"
- :value="isHighClass"
- ></switchBar>
+ <switchBar :barName="`楂樼骇璁剧疆`" :value="isHighClass"></switchBar>
- <div class="general-box" style="margin-bottom: 20px">
- <div class="in-title">IPV4</div>
+ <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
+ >
+ </div>
<el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">
<el-form-item>
<div class="p-title">鏂规硶</div>
- <el-select v-model="value" placeholder="璇烽�夋嫨" size="small"
- :popper-append-to-body="false">
+ <el-select
+ v-model="value"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ :popper-append-to-body="false"
+ >
<el-option
v-for="item in options"
:key="item.value"
@@ -178,13 +184,29 @@
</el-form>
</div>
- <div class="general-box" style="margin-bottom: 20px">
- <div class="in-title">IPV6</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="ipv4Form">
+ <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-select
+ v-model="value"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ :popper-append-to-body="false"
+ >
<el-option
v-for="item in options"
:key="item.value"
@@ -213,9 +235,17 @@
<i class="el-icon-remove-outline" @click="minusPrefix"></i>
</div>
<div class="ad">
- <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>
+ <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 class="ad">
+ <i
+ class="el-icon-refresh-left"
+ @click="ipv6Form.prefix = ''"
+ ></i>
+ </div>
</div>
</el-form-item>
@@ -326,6 +356,9 @@
<div class="ok" @click="saveWire">淇濆瓨</div>
</div>
</div>
+ <WifiGateway v-if="activePage == 3"></WifiGateway>
+ <LoraGateway v-if="activePage == 4"></LoraGateway>
+ <MqttGateway v-if="activePage == 5"></MqttGateway>
</div>
</div>
</div>
@@ -345,10 +378,19 @@
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 { isIPv4 } from "@/scripts/validate";
+
export default {
components: {
ipInput,
switchBar,
+ WifiGateway,
+ LoraGateway,
+ MqttGateway,
},
data() {
const checkPwd = (rule, value, callback) => {
@@ -387,7 +429,43 @@
gateway: "",
ip: "",
},
- wireFormRules: {},
+ originalConfig: {},
+ wireFormRules: {
+ ip: [
+ {
+ required: true,
+ message: "璇疯緭鍏P鍦板潃",
+ trigger: "change",
+ },
+ { validator: isIPv4, trigger: "change" },
+ ],
+
+ gateway: [
+ {
+ required: true,
+ message: "璇疯緭鍏ョ綉鍏�",
+ trigger: "change",
+ },
+ { validator: isIPv4, trigger: "change" },
+ ],
+ dns: [
+ {
+ required: true,
+ message: "璇疯緭鍏ns鍦板潃",
+ trigger: "change",
+ },
+ { validator: isIPv4, trigger: "change" },
+ ],
+
+ subMask: [
+ {
+ required: true,
+ message: "璇疯緭鍏ュ瓙缃戞帺鐮�",
+ trigger: "change",
+ },
+ { validator: isIPv4, trigger: "change" },
+ ],
+ },
activePage: 0,
activeWireItem: {},
rules: {
@@ -402,6 +480,9 @@
{ name: "缃戠粶璁剧疆", icon: "\ue6dd" },
{ name: "鏃犵嚎缃戠粶", icon: "\uea13" },
{ name: "鏈夌嚎缃戠粶", icon: "\ue73b" },
+ { name: "WiFi缃戝叧", icon: "\ue73b" },
+ { name: "LORA缃戝叧", icon: "\ue73b" },
+ { name: "MQTT缃戝叧", icon: "\ue73b" },
],
ipv6FormRules: {},
options: [
@@ -415,20 +496,19 @@
},
],
value: "",
+ IPV4_hid: false,
+ IPV6_hid: false,
+ configLoading: false,
};
- },
- components: {
- ipInput,
- switchBar,
},
mounted() {
this.getCurServer();
this.fetchWireList();
},
methods: {
- minusPrefix(){
- debugger
- this.ipv6Form.prefix
+ minusPrefix() {
+ debugger;
+ this.ipv6Form.prefix;
},
switchNetCard(item) {
if (item.active) {
@@ -482,6 +562,7 @@
this.wireForm.gateway = "";
this.wireForm.dns = "";
this.wireForm.subMask = "";
+ this.originalConfig = this.wireForm;
},
saveServerName() {
setServerName({
@@ -494,29 +575,86 @@
});
},
openRight(i) {
- this.activePage = i;
+ if (i == 0) {
+ this.ruleForm.deviceName = "";
+ this.ruleForm.port = "";
+ this.getCurServer();
+ }
if (i == 1) {
this.inWifiDetail = false;
}
+ 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 = {
+ ip: this.wireForm.ip,
+ gateway: this.wireForm.gateway,
+ dns: this.wireForm.dns,
+ subMask: this.wireForm.subMask,
+ ifname: this.activeWireItem.name,
+ };
+
+ let newUri =
+ location.protocol +
+ "//" +
+ data.ip +
+ (location.port == 80 ? "" : ":" + location.port);
+
+ this.$confirm("纭闇�瑕佷慨鏀规湇鍔″櫒閰嶇疆鍚楋紵", {
+ center: true,
+ cancelButtonClass: "comfirm-class-cancle",
+ confirmButtonClass: "comfirm-class-sure",
+ })
+ .then(() => {
+ this.configLoading = true;
+ if (this.wireForm.ip !== this.originalConfig.ip) {
+ this.configLoading = false;
+ 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",
+ message: "鏈嶅姟鍣ㄩ厤缃垚鍔�",
+ });
+ }
+ })
+ .catch((err) => {
+ clearTimeout(changeIPTimer);
+ this.configLoading = false;
+ this.$notify({
+ type: "error",
+ message: "淇濆瓨澶辫触",
+ });
+ });
+ this.$message({
+ message: "鎿嶄綔瀹屾垚,璇风◢鍚�",
+ type: "success",
+ });
+ })
+ .catch((err) => {});
+ } else {
+ return false;
}
- );
+ });
},
wifiControl(val) {},
checkWifi() {
@@ -534,6 +672,7 @@
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) => {
@@ -550,9 +689,23 @@
confirmButtonText: "纭畾",
cancelButtonText: "鍙栨秷",
type: "warning",
+ customClass: "confirmBox",
}).then(() => {
this.openWireDetail(item);
});
+ },
+ toggleFold(tog) {
+ const demo = this.$refs.ipvHolder;
+ if (!(this.IPV4_hid && !this.IPV6_hid)) {
+ setTimeout(() => {
+ demo.scrollIntoView({
+ block: "end",
+ inline: "nearest",
+ behavior: "smooth",
+ });
+ }, 300);
+ }
+ this[tog] = !this[tog];
},
},
computed: {
@@ -566,12 +719,12 @@
.all {
width: 100%;
}
-.wire{
- width: 460px;
+.wire {
+ // width: 456px;
margin: 0 auto;
}
.wire-detail {
- width: 460px;
+ // width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -609,7 +762,7 @@
}
}
.net-set {
- max-width: 600px;
+ // max-width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -642,10 +795,11 @@
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
+ padding-top: 6px;
border-right: 4px solid #f2f2f7;
border-left: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
.menu-item {
- background: #f2f2f7;
height: 56px;
margin-bottom: 4px;
border-radius: 8px;
@@ -656,6 +810,11 @@
padding: 0 20px;
display: flex;
justify-content: space-between;
+
+ &:hover {
+ background: #f2f2f7;
+ }
+
.item-left {
display: flex;
align-items: center;
@@ -670,7 +829,7 @@
}
}
.menu-item-active {
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
color: #ffffff;
}
}
@@ -681,14 +840,20 @@
box-sizing: border-box;
position: relative;
padding: 10px;
+ padding-top: 6px;
+ border-top: 4px solid #f2f2f7;
+ overflow-y: overlay;
+ overflow-x: hidden;
+
.title {
height: 48px;
font-size: 16px;
line-height: 48px;
- color: #333333;
- font-weight: bold; background: #F2F2F7;
- border-radius: 8px;
- margin-bottom: 10px;
+ color: #4f4f4f;
+ font-weight: bold;
+ background: #f2f2f7;
+ border-radius: 8px;
+ margin-bottom: 4px;
}
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
@@ -701,7 +866,7 @@
width: 100%;
}
.el-form-item {
- margin-bottom: 16px;
+ margin-bottom: 14px;
}
.el-form-item__content {
line-height: 48px;
@@ -715,7 +880,7 @@
border: 2px solid #409eff !important;
}
.el-select-dropdown__item {
- color: #333333;
+ color: #4f4f4f;
height: 32px;
font-size: 12px;
line-height: 32px;
@@ -764,7 +929,7 @@
width: 100%;
}
.el-select .el-input .el-select__caret {
- color: #333333;
+ color: #4f4f4f;
font-size: 14px;
font-weight: 600;
}
@@ -773,7 +938,7 @@
max-width: none !important;
}
.wifi-set {
- max-width: 600px;
+ // max-width: 456px;
margin: 0 auto;
.switch-bar {
background: #f2f2f7;
@@ -781,7 +946,7 @@
}
.switch-bar .name {
font-size: 14px;
- color: #333;
+ color: #4f4f4f;
font-weight: bold;
}
.wifi-option {
@@ -792,12 +957,12 @@
align-items: center;
box-sizing: border-box;
padding: 0 20px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
background: #f2f2f7;
border-radius: 8px;
.name {
font-size: 14px;
- color: #333;
+ color: #4f4f4f;
font-weight: bold;
.icon {
color: #4e94ff;
@@ -824,19 +989,37 @@
}
}
.wifi-detail {
- max-width: 454px;
+ // max-width: 454px;
margin: 0 auto;
- .title {
- background: #f2f2f7;
- border-radius: 8px;
- height: 48px;
- margin-bottom: 4px;
- }
+ transition: all 0.3s linear 0s;
.general-box {
+ overflow: hidden;
+ transition: all 0.3s linear 0s;
background: #f2f2f7;
border-radius: 8px;
padding-bottom: 10px;
+ margin-bottom: 20px;
+ &.fold {
+ height: 342px;
+ .in-title {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .icon-fold {
+ display: inline-block;
+ font-size: 14px;
+ transition: all 0.3s linear 0s;
+ cursor: pointer;
+ }
+ }
+ &.hidden {
+ height: 34px;
+ .icon-fold {
+ transform: rotate(180deg);
+ }
+ }
.el-form-item {
margin-bottom: 0px;
}
@@ -845,7 +1028,7 @@
padding: 14px 20px;
font-weight: bold;
font-size: 14px;
- color: #333333;
+ color: #4f4f4f;
}
.ip-input-container {
max-width: none !important;
@@ -905,13 +1088,13 @@
align-items: center;
box-sizing: border-box;
padding: 0 20px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
border-radius: 8px;
.name {
font-size: 15px;
font-weight: bold;
font-size: 14px;
- color: #333333;
+ color: #4f4f4f;
}
.right {
display: flex;
@@ -922,6 +1105,11 @@
.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 {
@@ -940,7 +1128,7 @@
margin-right: 15px;
}
.good {
- color: #4e94ff;
+ color: var(--colorCard);
font-size: 16px;
}
.bad {
@@ -959,4 +1147,19 @@
}
}
}
+.noticeBox p {
+ text-align: center;
+}
+
+.confirmBox {
+ text-align: center;
+
+ p {
+ text-align: center;
+ }
+
+ .el-message-box__status.el-icon-warning {
+ margin-left: 75px;
+ }
+}
</style>
--
Gitblit v1.8.0