From 337cef48da80230fcd1a4386d8927fb7e33a223b Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期二, 31 五月 2022 13:38:30 +0800 Subject: [PATCH] 统计查询切换tab --- src/pages/settings/views/NetSettings.vue | 438 +++++++++++++++++++++++++++++++++++------------------- 1 files changed, 284 insertions(+), 154 deletions(-) diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue index bb45387..4a76ee3 100644 --- a/src/pages/settings/views/NetSettings.vue +++ b/src/pages/settings/views/NetSettings.vue @@ -20,15 +20,28 @@ <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> --> @@ -40,22 +53,37 @@ <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> @@ -69,12 +97,21 @@ <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> @@ -84,13 +121,22 @@ <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" @@ -101,38 +147,66 @@ </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" @@ -143,36 +217,58 @@ </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> @@ -185,12 +281,25 @@ <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" @@ -213,20 +322,32 @@ </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> @@ -251,17 +372,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" +import { isIPv4 } from "@/scripts/validate"; export default { components: { @@ -269,36 +390,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, @@ -306,7 +427,7 @@ dns: "", subMask: "", gateway: "", - ip: "" + ip: "", }, originalConfig: {}, wireFormRules: { @@ -314,41 +435,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: {}, ipv6Form: {}, @@ -359,108 +482,108 @@ { 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, - configLoading: false - } + configLoading: 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.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.activePage = i + this.activePage = i; }, saveWire(ifname) { this.$refs["wireForm"].validate((valid) => { @@ -470,20 +593,24 @@ 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; var changeIPTimer = setTimeout(() => { this.$alert( '<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒ip, 璇烽噸鏂扮櫥褰�</strong><a target="_parent" href="' + @@ -494,99 +621,99 @@ "鎻愮ず", { 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 + clearTimeout(changeIPTimer); + this.configLoading = false; this.$notify({ type: "error", - message: "淇濆瓨澶辫触" - }) - }) + message: "淇濆瓨澶辫触", + }); + }); this.$message({ message: "鎿嶄綔瀹屾垚,璇风◢鍚�", - type: "success" - }) + type: "success", + }); }) - .catch((err) => {}) + .catch((err) => {}); } else { - return false + 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.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]; + }, }, 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 { @@ -728,8 +855,11 @@ 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 { -- Gitblit v1.8.0