From feaf0a9778879ef211c5587a513ba4cbdabb52d0 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 23 六月 2022 17:42:58 +0800
Subject: [PATCH] bug修复
---
src/pages/settings/views/NetSettings.vue | 1102 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 760 insertions(+), 342 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index fad8495..a318da7 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -1,32 +1,33 @@
<template>
<div class="all">
- <div class="cluster-content">
- <div class="cluster-center" ref="left">
+ <div class="net-content">
+ <div class="net-center" ref="left">
<div
class="menu-item"
+ :class="activePage == i ? 'menu-item-active' : ''"
v-for="(item, i) in tabList"
:key="i"
- @click="openRight(item, i)"
+ @click="openRight(i)"
ref="leftbar"
>
- <div>
- <span class="icon iconfont"></span>
- {{ item.name }}
+ <div class="item-left">
+ <span class="icon iconfont">{{ item.icon }}</span>
+ <span class="text">{{ item.name }}</span>
</div>
- <div class="status">宸茶繛鎺�</div>
+ <!-- <span v-if="showStatus && i == 2" class="status">宸茶繛鎺�</span> -->
</div>
</div>
- <div class="cluster-right">
- <div class="net-set" v-if="activePage == '缃戠粶璁剧疆'">
+ <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"
- label-width="150px"
>
- <el-form-item label="璁惧鍚嶇О" prop="deviceName">
+ <el-form-item prop="deviceName">
+ <div class="p-title">璁惧鍚嶇О</div>
<el-input
v-model="ruleForm.deviceName"
size="small"
@@ -34,7 +35,8 @@
></el-input>
</el-form-item>
- <el-form-item label="绔彛" prop="port">
+ <el-form-item prop="port">
+ <div class="p-title">绔彛</div>
<el-input
v-model="ruleForm.port"
placeholder="閫夊～锛屽閮ㄨ闂殑绔彛"
@@ -42,10 +44,15 @@
></el-input>
</el-form-item>
</el-form>
- <div class="save-btn" @click="saveServerName">淇濆瓨</div>
+ <!-- <div class="save-btn" @click="saveServerName">淇濆瓨</div> -->
+ <div class="btns">
+ <div class="ok" @click="saveServerName">淇濆瓨</div>
+ </div>
</div>
- <div class="wifi" v-if="activePage == '鏃犵嚎缃戠粶' && !inWifiDetail">
+ <div class="wifi-set" v-if="activePage == 1 && !inWifiDetail">
+ <div class="title">鏃犵嚎缃戠粶</div>
+
<switchBar
:barName="`鏃犵嚎缃戝崱`"
@switchChange="wifiControl"
@@ -54,16 +61,19 @@
<div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
<div class="name">
- <span class="icon iconfont"></span>
- <span>{{ 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"></span>
- <span
- class="icon iconfont"
- style="margin-left: 10px; cursor: pointer"
- @click="checkWifi(item)"
+ <span class="icon iconfont lock"></span>
+ <span class="icon iconfont signal"></span>
+ <span class="icon iconfont more-icon" @click="checkWifi(item)"
></span
>
</div>
@@ -71,157 +81,205 @@
</div>
<div
class="wifi-detail"
- v-if="activePage == '鏃犵嚎缃戠粶' && inWifiDetail"
+ v-if="activePage == 1 && inWifiDetail"
+ ref="ipvHolder"
>
+ <div class="title">鏃犵嚎缃戠粶</div>
<div class="btns">
- <div class="left">鍒犻櫎</div>
- <div class="right">鏂紑杩炴帴</div>
+ <div class="cancel">鍒犻櫎</div>
+ <div class="ok">鏂紑杩炴帴</div>
</div>
- <div class="title">閫氱敤</div>
+ <div class="general-box">
+ <div class="in-title">閫氱敤</div>
- <el-form
- :model="wifiForm"
- :rules="wifiFormRules"
- ref="wifiForm"
- class="join-form"
- label-width="150px"
- >
- <el-form-item label="鍚嶇О" prop="name">
- <div class="wifi-name">{{ 12123 }}</div>
- </el-form-item>
-
- <el-form-item label="瀵嗙爜" prop="password">
- <el-input
- v-model="wifiForm.password"
- placeholder="璇疯緭鍏ュ瘑鐮�"
- size="small"
- show-password
- ></el-input>
- </el-form-item>
- </el-form>
-
- <switchBar
- :barName="`楂樼骇璁剧疆`"
- @switchChange="highClassSetting"
- :value="isHighClass"
- ></switchBar>
- <div class="title">IPV4</div>
-
- <el-form
- :model="ipv4Form"
- :rules="ipv4FormRules"
- ref="ipv4Form"
- label-width="150px"
- >
- <el-form-item label="鏂规硶">
- <el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
- <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 label="IP" prop="ip">
- <ip-input
- :ip="ipv4Form.ip"
- @on-blur="ipv4Form.ip = arguments[0]"
- ></ip-input>
- </el-form-item>
- <el-form-item label="瀛愮綉鎺╃爜" prop="subMask">
- <ip-input
- :ip="ipv4Form.subMask"
- @on-blur="ipv4Form.subMask = arguments[0]"
- ></ip-input>
- </el-form-item>
-
- <el-form-item label="缃戝叧" prop="gateway">
- <ip-input
- :ip="ipv4Form.gateway"
- @on-blur="ipv4Form.gateway = arguments[0]"
- ></ip-input>
- </el-form-item>
- <el-form-item label="棣栭�塂NS" prop="dns">
- <ip-input
- :ip="ipv4Form.dns1"
- @on-blur="ipv4Form.dns1 = arguments[0]"
- ></ip-input>
- </el-form-item>
- <el-form-item label="澶囩敤DNS" prop="dns">
- <ip-input
- :ip="ipv4Form.dns2"
- @on-blur="ipv4Form.dns2 = arguments[0]"
- ></ip-input>
- </el-form-item>
- </el-form>
-
- <div class="title">IPV6</div>
-
- <el-form
- :model="ipv6Form"
- :rules="ipv6FormRules"
- ref="ipv4Form"
- label-width="150px"
- >
- <el-form-item label="鏂规硶">
- <el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
- <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 label="IP鍦板潃" prop="ip">
- <ip-input
- :ip="ipv6Form.ip"
- @on-blur="ipv6Form.ip = arguments[0]"
- ></ip-input>
- </el-form-item>
- <el-form-item label="鍓嶇紑" prop="subMask">
- <div style="display: flex">
+ <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> -->
<el-input
- v-model="wifiForm.password"
- placeholder
+ v-model="wifiForm.name"
+ placeholder=""
size="small"
></el-input>
+ </el-form-item>
- <div class="ad">-</div>
- <div class="ad">+</div>
- <div class="ad">閲嶇疆</div>
- </div>
- </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-form-item>
+ </el-form>
+ </div>
- <el-form-item label="缃戝叧" prop="gateway">
- <ip-input
- :ip="ipv6Form.gateway"
- @on-blur="ipv6Form.gateway = arguments[0]"
- ></ip-input>
- </el-form-item>
- <el-form-item label="棣栭�塂NS" prop="dns">
- <ip-input
- :ip="ipv6Form.dns1"
- @on-blur="ipv6Form.dns1 = arguments[0]"
- ></ip-input>
- </el-form-item>
- <el-form-item label="澶囩敤DNS" prop="dns">
- <ip-input
- :ip="ipv6Form.dns2"
- @on-blur="ipv6Form.dns2 = arguments[0]"
- ></ip-input>
- </el-form-item>
- </el-form>
+ <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
+ >
+ </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-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="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>
+ </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>
+ </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>
+ </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-input>
+ </el-form-item>
+ </el-form>
+ </div>
<div class="btns">
- <div class="left" @click="inWifiDetail = false">鍙栨秷</div>
- <div class="right">淇濆瓨</div>
+ <div class="cancel" @click="inWifiDetail = false">鍙栨秷</div>
+ <div class="ok">淇濆瓨</div>
</div>
</div>
- <div class="wire" v-if="activePage == '鏈夌嚎缃戠粶' && !inWireDetail">
+ <div class="wire" v-if="activePage == 2 && !inWireDetail">
<div class="title">鏈夌嚎缃戠粶</div>
<div
class="wire-bar"
@@ -232,53 +290,60 @@
<div class="name">{{ "缃戠粶" + item.index }}</div>
<div class="right">
- <span class="icon iconfont good" v-if="item.lower_up"></span>
- <span class="icon iconfont bad" v-else></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="rgba(61, 104, 225, 1)"
+ active-color="#4E94FF"
@change="switchNetCard(item)"
+ :width="30"
></el-switch>
</div>
</div>
</div>
- <div
- class="wire-detail"
- v-if="activePage == '鏈夌嚎缃戠粶' && inWireDetail"
- >
+ <div class="wire-detail" v-if="activePage == 2 && inWireDetail">
<div class="title">缃戠粶璁剧疆</div>
- <el-form
- :model="wireForm"
- :rules="wireFormRules"
- ref="wireForm"
- label-width="150px"
- >
- <el-form-item label="缃戠粶鍚嶇О" prop="name">
+ <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">
+ <el-form-item prop="name">
+ <div class="p-title">缃戠粶鍚嶇О</div>
<div class="wifi-name">{{ "缃戠粶" + activeWireItem.index }}</div>
</el-form-item>
- <el-form-item label="缃戝崱" prop="ifname">
+ <el-form-item prop="ifname">
+ <div class="p-title">缃戝崱</div>
<div class="wifi-name">{{ activeWireItem.name }}</div>
</el-form-item>
- <el-form-item label="IP" prop="ip">
+ <el-form-item prop="ip">
+ <div class="p-title">IP</div>
<ip-input
:ip="wireForm.ip"
@on-blur="wireForm.ip = arguments[0]"
></ip-input>
</el-form-item>
- <el-form-item label="瀛愮綉鎺╃爜" prop="subMask">
+ <el-form-item prop="subMask">
+ <div class="p-title">瀛愮綉鎺╃爜</div>
<ip-input
:ip="wireForm.subMask"
@on-blur="wireForm.subMask = arguments[0]"
></ip-input>
</el-form-item>
- <el-form-item label="缃戝叧" prop="gateway">
+ <el-form-item prop="gateway">
+ <div class="p-title">缃戝叧</div>
<ip-input
:ip="wireForm.gateway"
@on-blur="wireForm.gateway = arguments[0]"
></ip-input>
</el-form-item>
- <el-form-item label="DNS" prop="dns">
+ <el-form-item prop="dns">
+ <div class="p-title">DNS</div>
<ip-input
:ip="wireForm.dns"
@on-blur="wireForm.dns = arguments[0]"
@@ -291,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>
@@ -298,36 +366,31 @@
<script>
import {
- createSerfCluster,
- randomPwd,
- search,
- getSearchNodes,
- stopSearching,
- findCluster,
- updateClusterName,
- joinCluster,
- leave,
- getVrrp,
- setVrrp,
- createESNode,
- addESNode,
- getEsClusterInfo,
-} from "@/api/clusterManage";
-import {
setServerName,
getWireList,
setNetWorkCard,
getNetWorkCardInfo,
- getDevInfo,downNetCard,upNetCard,
+ getDevInfo,
+ downNetCard,
+ upNetCard,
} from "@/api/system";
-import ipInput from "@/components/subComponents/IPInput";
+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) => {
@@ -354,7 +417,10 @@
},
wireArr: [],
inWifiDetail: false,
- wifiList: [{ name: "鏃犵嚎缃戠粶1" }, { name: "鏃犵嚎缃戠粶2" }],
+ wifiList: [
+ { name: "鏃犵嚎缃戠粶1", isConnected: false },
+ { name: "鏃犵嚎缃戠粶2", isConnected: true },
+ ],
isOpenWifi: false,
inWireDetail: false,
wireForm: {
@@ -363,8 +429,44 @@
gateway: "",
ip: "",
},
- wireFormRules: {},
- activePage: "缃戠粶璁剧疆",
+ 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: [
@@ -375,55 +477,67 @@
ipv6Form: {},
ipv4FormRules: {},
tabList: [
- { name: "缃戠粶璁剧疆" },
- { name: "鏃犵嚎缃戠粶" },
- { name: "鏈夌嚎缃戠粶" },
+ { name: "缃戠粶璁剧疆", icon: "\ue6dd" },
+ { name: "鏃犵嚎缃戠粶", icon: "\uea13" },
+ { name: "鏈夌嚎缃戠粶", icon: "\ue73b" },
+ { name: "WiFi缃戝叧", icon: "\ue73b" },
+ { name: "LORA缃戝叧", icon: "\ue73b" },
+ { name: "MQTT缃戝叧", icon: "\ue73b" },
],
ipv6FormRules: {},
options: [
{
value: "閫夐」1",
- label: "鎵嬪姩",
+ label: "鑷姩",
},
{
value: "閫夐」2",
- label: "鑷姩",
+ label: "鎵嬪姩",
},
],
value: "",
- netCardValue: "",
+ IPV4_hid: false,
+ IPV6_hid: false,
+ configLoading: false,
};
- },
- components: {
- ipInput,
- switchBar,
},
mounted() {
this.getCurServer();
this.fetchWireList();
},
- beforeDestroy() {},
- props: ["barName"],
methods: {
- switchNetCard(item){
+ minusPrefix() {
+ 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();
+ upNetCard({ ifname: item.name }).then(
+ (res) => {
+ if (res.success) {
+ this.$message.success(res.data);
+ this.fetchWireList();
+ }
+ },
+ (err) => {
+ 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();
+ downNetCard({ ifname: item.name }).then(
+ (res) => {
+ if (res.success) {
+ this.$message.success(res.data);
+ this.fetchWireList();
+ }
+ },
+ (err) => {
+ item.active = true;
+ this.$message.error(err.msg);
}
- })
+ );
}
-
},
getCurServer() {
getDevInfo().then((res) => {
@@ -448,56 +562,105 @@
this.wireForm.gateway = "";
this.wireForm.dns = "";
this.wireForm.subMask = "";
+ this.originalConfig = this.wireForm;
},
saveServerName() {
- debugger
setServerName({
server_name: this.ruleForm.deviceName,
server_port: this.ruleForm.port,
}).then((res) => {
- debugger
- console.log(res);
if (res && res.success) {
this.$message.success(res.data);
}
});
},
- openRight(item, i) {
- this.activePage = item.name;
+ openRight(i) {
+ if (i == 0) {
+ this.ruleForm.deviceName = "";
+ this.ruleForm.port = "";
+ this.getCurServer();
+ }
if (i == 1) {
this.inWifiDetail = false;
}
- this.$refs["leftbar"].forEach((x) => {
- x.style.backgroundColor = "rgba(248, 248, 248, 1)";
- x.style.color = "#333";
- });
- this.$refs["leftbar"][i].style.backgroundColor = "rgb(61, 104, 225)";
- this.$refs["leftbar"][i].style.color = "white";
+ 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() {
this.inWifiDetail = true;
},
- checkWire(item) {
+ openWireDetail(item) {
this.inWireDetail = true;
this.activeWireItem = item;
getNetWorkCardInfo({
@@ -509,12 +672,45 @@
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);
}
);
+ },
+ checkWire(item) {
+ if (item.addrs) {
+ this.openWireDetail(item);
+ return;
+ }
+ this.$confirm("鎮ㄨ繕鏈厤缃綉缁滀俊鎭紝鏄惁鐜板湪閰嶇疆锛�", "鎻愮ず", {
+ 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: {
+ showStatus() {
+ return this.wireArr.some((item) => item.lower_up == true);
},
},
};
@@ -523,10 +719,27 @@
.all {
width: 100%;
}
+.wire {
+ width: 456px;
+ margin: 0 auto;
+}
.wire-detail {
- .title{
+ width: 456px;
+ margin: 0 auto;
+ .title {
font-size: 16px;
margin-bottom: 10px;
+ }
+ .ip-input-container {
+ max-width: none !important;
+ height: 32px;
+ line-height: normal;
+ box-sizing: border-box;
+ // background-color: #f2f2f7;
+ text-align: left;
+ border-radius: 20px;
+ border: 2px solid transparent;
+ display: flex;
}
.btns {
display: flex;
@@ -549,9 +762,13 @@
}
}
.net-set {
+ max-width: 456px;
+ margin: 0 auto;
.title {
font-size: 16px;
- margin-bottom: 12px;
+ margin-bottom: 10px;
+ height: 30px;
+ line-height: 30px;
}
.el-input--small .el-input__inner {
height: 35px;
@@ -563,44 +780,81 @@
color: rgba(134, 134, 134, 1);
}
}
-.cluster-content {
+.net-content {
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- .cluster-center {
+ background-color: #fbfaff;
+ .net-center {
height: 100%;
- width: 280px;
+ width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
- border-right: 5px solid #f8f8f8;
-
+ padding-top: 6px;
+ border-right: 4px solid #f2f2f7;
+ border-left: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
.menu-item {
- background-color: #f8f8f8;
- height: 40px;
- margin-bottom: 10px;
+ height: 56px;
+ margin-bottom: 4px;
border-radius: 8px;
- line-height: 40px;
+ line-height: 56px;
box-sizing: border-box;
font-size: 14px;
+ cursor: pointer;
padding: 0 20px;
display: flex;
justify-content: space-between;
+
+ &:hover {
+ background: #f2f2f7;
+ }
+
+ .item-left {
+ display: flex;
+ align-items: center;
+ }
+ .icon {
+ margin-right: 8px;
+ font-size: 23px;
+ }
+ .text {
+ font-weight: bold;
+ font-size: 16px;
+ }
+ }
+ .menu-item-active {
+ background-color: var(--colorCard) !important;
+ color: #ffffff;
}
}
- .cluster-right {
+ .net-right {
flex: 1;
flex-basis: auto;
overflow: auto;
- // background-color: rgba(240, 242, 245, 1);
box-sizing: border-box;
position: relative;
- padding: 20px 40px;
- // .create-new .join-exist {
+ 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: #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,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -612,108 +866,269 @@
width: 100%;
}
.el-form-item {
- margin-bottom: 10px;
- height: 54px;
- padding: 6px 20px;
- background: #f8f8f8;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 10px;
- .el-form-item__label {
- text-align: left;
- line-height: 42px;
- }
+ margin-bottom: 14px;
}
.el-form-item__content {
- line-height: 40px;
- position: relative;
- font-size: 15px;
+ line-height: 48px;
+ display: flex;
+ align-items: center;
+ background: #f2f2f7;
+ border-radius: 8px;
+ padding: 0 15px 0 20px;
+ .el-input.is-active .el-input__inner,
+ .el-input__inner:focus {
+ border: 2px solid #409eff !important;
+ }
+ .el-select-dropdown__item {
+ color: #4f4f4f;
+ height: 32px;
+ font-size: 12px;
+ line-height: 32px;
+ text-align: center;
+ }
+ .el-popper {
+ margin-top: 0;
+ background: #fbfaff;
+ box-shadow: 0px 2px 6px rgb(0 0 0 / 18%);
+ border-radius: 2px;
+ .el-select-dropdown__item.hover,
+ .el-select-dropdown__item:hover {
+ background-color: #f2f2f7;
+ color: #4e94ff;
+ }
+ }
+ }
+ .el-form-item__error {
+ line-height: 0.7;
+ left: 20px;
+ }
+ .p-title {
+ height: 48px;
+ text-align: left;
+ line-height: 48px;
+ width: 90px;
+ font-weight: 600;
+ }
+ .el-form-item {
+ .el-input__inner {
+ background-color: #ffffff;
+ border: 2px solid transparent;
+ border-radius: 20px;
+ height: 32px !important;
+ padding: 0 15px;
+ font-size: 14px;
+ line-height: 32px;
+ font-weight: bold;
+ }
+ .el-input__inner::placeholder {
+ color: #c0c4cc;
+ font-size: 12px;
+ font-weight: normal;
+ }
+ .el-select {
+ width: 100%;
+ }
+ .el-select .el-input .el-select__caret {
+ color: #4f4f4f;
+ font-size: 14px;
+ font-weight: 600;
+ }
}
.ip-input-container {
max-width: none !important;
}
- // }
- .wifi {
+ .wifi-set {
+ max-width: 456px;
+ margin: 0 auto;
+ .switch-bar {
+ background: #f2f2f7;
+ padding: 0 20px;
+ }
+ .switch-bar .name {
+ font-size: 14px;
+ color: #4f4f4f;
+ font-weight: bold;
+ }
.wifi-option {
- height: 50px;
- background-color: #f8f8f8;
+ height: 48px;
+ line-height: 48px;
display: flex;
justify-content: space-between;
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: #4f4f4f;
+ font-weight: bold;
+ .icon {
+ color: #4e94ff;
+ margin-right: 8px;
+ font-size: 16px;
+ }
+ }
+ .more-detail {
+ display: flex;
+ align-items: center;
+ .signal {
+ margin-right: 10px;
+ font-size: 20px;
+ }
+ .lock {
+ font-size: 20px;
+ margin-right: 10px;
+ }
+ .more-icon {
+ font-weight: bold;
+ cursor: pointer;
+ }
+ }
}
}
.wifi-detail {
+ max-width: 454px;
+ margin: 0 auto;
+ 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;
+ .icon-fold {
+ display: inline-block;
+ font-size: 14px;
+ margin-left: 360px;
+ transition: all 0.3s linear 0s;
+ cursor: pointer;
+ }
+ }
+ &.hidden {
+ height: 34px;
+ .icon-fold {
+ transform: rotate(180deg);
+ }
+ }
+ .el-form-item {
+ margin-bottom: 0px;
+ }
+ .in-title {
+ text-align: left;
+ padding: 14px 20px;
+ font-weight: bold;
+ font-size: 14px;
+ color: #4f4f4f;
+ }
+ .ip-input-container {
+ max-width: none !important;
+ height: 32px;
+ line-height: normal;
+ box-sizing: border-box;
+ // background-color: #f2f2f7;
+ text-align: left;
+ border-radius: 20px;
+ border: 2px solid transparent;
+ }
+ }
+ .switch-bar {
+ margin-bottom: 0;
+ }
+ .switch-bar .name {
+ font-size: 14px;
+ color: #4f4f4f;
+ font-weight: bold;
+ }
.btns {
+ margin-top: 0;
display: flex;
justify-content: space-between;
- .left {
- background-color: rgba(240, 240, 240, 1);
- height: 40px;
- line-height: 40px;
- width: 48%;
- border-radius: 10px;
+ margin-bottom: 4px;
+ .cancel {
+ width: 218px;
}
- .right {
- background-color: rgba(61, 104, 225, 1);
- height: 40px;
- line-height: 40px;
- width: 48%;
- color: #fff;
- border-radius: 10px;
+ .ok {
+ width: 218px;
}
}
.wifi-name {
- height: 40px;
+ height: 48px;
background-color: #f0f0f0;
text-align: left;
box-sizing: border-box;
- padding: 0 20px;
+ padding: 0 10px;
+
+ line-height: 48px;
}
.ad {
- min-width: 35px;
- background-color: rgba(240, 240, 240, 1);
- height: 35px;
- margin: 4px 0px 4px 5px;
- border-radius: 5px;
- line-height: 35px;
+ height: 32px;
+ text-align: center;
+ font-size: 17px;
+ margin-left: 10px;
+ cursor: pointer;
}
}
.wire {
- .title{
- line-height: 30px;
- height: 30px;
- font-size: 16px;
- margin-bottom: 10px;
- }
.wire-bar {
- height: 50px;
- background-color: #f8f8f8;
+ height: 48px;
+ background-color: #f2f2f7;
+ cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 20px;
- margin-bottom: 10px;
- border-radius:10px ;
- .name{
- font-size: 16px;
+ margin-bottom: 4px;
+ border-radius: 8px;
+ .name {
+ font-size: 15px;
+ font-weight: bold;
+ font-size: 14px;
+ color: #4f4f4f;
}
- .right{
- display: flex;
- align-items: center;
- .icon{
- margin-right: 15px;
- }
- .good{
- color: #3d68e1;
- font-size: 18px;
+ .right {
+ display: flex;
+ align-items: center;
+ .el-switch__core {
+ height: 14px;
}
- .bad{
- color: orangered;
- font-size: 18px;
+ .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;
+ top: 0px;
+ left: 1px;
+ border-radius: 100%;
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ }
+ .icon {
+ margin-right: 15px;
+ }
+ .good {
+ color: var(--colorCard);
+ font-size: 16px;
+ }
+ .bad {
+ color: #f44620;
+ font-size: 16px;
}
}
}
@@ -725,18 +1140,21 @@
padding: 0 20px;
}
}
- .save-btn {
- background-color: #3d68e1;
- width: 240px;
- height: 40px;
- margin: 0 auto;
- border-radius: 10px;
- color: #fff;
- line-height: 40px;
- cursor: pointer;
- font-size: 14px;
- margin-top: 30px;
- }
+ }
+}
+.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