From 5d9d45b9ddc4d99aba2d9dd9d75fc4d7ebf639d1 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期五, 20 五月 2022 18:10:37 +0800 Subject: [PATCH] 修改ip配置的交互 --- src/pages/settings/views/NetSettings.vue | 516 ++++++++++++++++++++++++++++----------------------------- 1 files changed, 254 insertions(+), 262 deletions(-) diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue index 93686c5..f115a26 100644 --- a/src/pages/settings/views/NetSettings.vue +++ b/src/pages/settings/views/NetSettings.vue @@ -20,28 +20,15 @@ <div class="net-right"> <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,37 +40,22 @@ <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="isOpenWifi"></switchBar> <div class="wifi-option" v-for="(item, i) in wifiList" :key="i"> <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.isConnected"></span> + <span :style="!item.isConnected ? { 'margin-left': '24px' } : {}">{{ item.name }}</span> </div> <div class="more-detail"> <span class="icon iconfont lock"></span> <span class="icon iconfont signal"></span> - <span class="icon iconfont more-icon" @click="checkWifi(item)" - ></span - > + <span class="icon iconfont more-icon" @click="checkWifi(item)"></span> </div> </div> </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> @@ -97,21 +69,12 @@ <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="wifiForm.name" 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 v-model="wifiForm.password" placeholder="璇疯緭鍏ュ瘑鐮�" size="small" show-password></el-input> </el-form-item> </el-form> </div> @@ -121,22 +84,13 @@ <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-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" @@ -147,66 +101,38 @@ </el-form-item> <el-form-item prop="ip"> <div class="p-title">IP</div> - <ip-input - :ip="ipv4Form.ip" - @on-blur="ipv4Form.ip = arguments[0]" - ></ip-input> + <ip-input :ip="ipv4Form.ip" @on-blur="ipv4Form.ip = arguments[0]"></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-input> + <ip-input :ip="ipv4Form.subMask" @on-blur="ipv4Form.subMask = arguments[0]"></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-input> + <ip-input :ip="ipv4Form.gateway" @on-blur="ipv4Form.gateway = arguments[0]"></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-input> + <ip-input :ip="ipv4Form.dns1" @on-blur="ipv4Form.dns1 = arguments[0]"></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> + <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="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 - > + <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-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false"> <el-option v-for="item in options" :key="item.value" @@ -217,58 +143,36 @@ </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> + <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> + <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> + <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> + <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> + <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> + <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> + <ip-input :ip="ipv6Form.dns2" @on-blur="ipv6Form.dns2 = arguments[0]"></ip-input> </el-form-item> </el-form> </div> @@ -281,25 +185,12 @@ <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 +213,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> @@ -372,15 +251,17 @@ getNetWorkCardInfo, getDevInfo, downNetCard, - upNetCard, -} from "@/api/system"; + upNetCard +} 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" export default { components: { @@ -388,36 +269,36 @@ switchBar, WifiGateway, LoraGateway, - MqttGateway, + MqttGateway }, 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: "", + port: "" }, wifiForm: { name: "", - password: "", + password: "" }, wireArr: [], inWifiDetail: false, wifiList: [ { name: "鏃犵嚎缃戠粶1", isConnected: false }, - { name: "鏃犵嚎缃戠粶2", isConnected: true }, + { name: "鏃犵嚎缃戠粶2", isConnected: true } ], isOpenWifi: false, inWireDetail: false, @@ -425,15 +306,49 @@ dns: "", subMask: "", gateway: "", - ip: "", + 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: { - deviceName: [ - { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" }, - ], + deviceName: [{ required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" }] }, ipv4Form: {}, ipv6Form: {}, @@ -444,182 +359,247 @@ { name: "鏈夌嚎缃戠粶", icon: "\ue73b" }, { name: "WiFi缃戝叧", icon: "\ue73b" }, { name: "LORA缃戝叧", icon: "\ue73b" }, - { name: "MQTT缃戝叧", icon: "\ue73b" }, + { name: "MQTT缃戝叧", icon: "\ue73b" } ], ipv6FormRules: {}, options: [ { value: "閫夐」1", - label: "鑷姩", + label: "鑷姩" }, { value: "閫夐」2", - label: "鎵嬪姩", - }, + label: "鎵嬪姩" + } ], value: "", IPV4_hid: false, - IPV6_hid: false, - }; + IPV6_hid: false + } }, mounted() { - this.getCurServer(); - this.fetchWireList(); + this.getCurServer() + this.fetchWireList() }, methods: { minusPrefix() { - debugger; - this.ipv6Form.prefix; + debugger + 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) + }) } - }); + }) }, cancelSaveWire() { - this.inWireDetail = false; - this.wireForm.ip = ""; - this.wireForm.gateway = ""; - this.wireForm.dns = ""; - this.wireForm.subMask = ""; + 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.activePage = i; + 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); + // 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 } - }, - (err) => { - this.$message.error("淇濆瓨澶辫触锛�" + err.msg); + + 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) + } + + this.$confirm("纭闇�瑕佷慨鏀规湇鍔″櫒閰嶇疆鍚楋紵", { + center: true, + cancelButtonClass: "comfirm-class-cancle", + confirmButtonClass: "comfirm-class-sure" + }) + .then(() => { + setNetWorkCard(data) + .then((rsp) => { + if (rsp && rsp.success) { + this.$notify({ + type: "success", + message: "鏈嶅姟鍣ㄩ厤缃垚鍔�" + }) + } + }) + .catch((err) => { + clearTimeout(changeIPTimer) + this.$notify({ + type: "error", + message: "淇濆瓨澶辫触" + }) + }) + this.$message({ + message: "鎿嶄綔瀹屾垚,璇风◢鍚�", + type: "success" + }) + }) + .catch((err) => {}) + } else { + return false } - ); + }) }, wifiControl(val) {}, checkWifi() { - this.inWifiDetail = true; + this.inWifiDetail = true }, 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.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" }).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] + } }, 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 { @@ -761,18 +741,15 @@ 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 { width: 100%; } .el-form-item { - margin-bottom: 4px; + margin-bottom: 14px; } .el-form-item__content { line-height: 48px; @@ -1045,4 +1022,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