From 804d59e162b72be684d0087a8cd74dbd6fecbf4d Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 30 十二月 2022 16:57:18 +0800
Subject: [PATCH] 添加投影配置页面
---
src/pages/settings/views/NetSettings.vue | 648 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 338 insertions(+), 310 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 5d283e1..b23ecd6 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -17,31 +17,18 @@
<!-- <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"
- >
+ <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,29 +40,18 @@
<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>
@@ -89,48 +65,32 @@
<div class="general-box">
<div class="in-title">閫氱敤</div>
- <el-form
- :model="wifiForm"
- 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> -->
- <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>
- <switchBar
- :barName="`楂樼骇璁剧疆`"
- :value="isHighClass"
- ></switchBar>
+ <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 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">
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false">
<el-option
v-for="item in options"
:key="item.value"
@@ -141,53 +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="in-title">IPV6
- <span class="icon iconfont icon-fold"
- @click="toggleFold('IPV6_hid')"></span>
+ <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">
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false">
<el-option
v-for="item in options"
:key="item.value"
@@ -198,50 +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="wifiForm.password"
- 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"></i>
+ <i class="el-icon-remove-outline" @click="minusPrefix"></i>
</div>
<div class="ad">
- <i class="el-icon-circle-plus-outline"></i>
+ <i class="el-icon-circle-plus-outline" @click=";+ipv6Form.prefix++"></i>
</div>
- <div class="ad"><i class="el-icon-refresh-left"></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>
+ <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>
@@ -254,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"
@@ -285,42 +203,30 @@
<div class="wire-detail" v-if="activePage == 2 && inWireDetail">
<div class="title">缃戠粶璁剧疆</div>
<el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">
- <el-form-item prop="name">
- <div class="p-title">缃戠粶鍚嶇О</div>
+ <el-form-item prop="name">
+ <div class="p-title">缃戠粶鍚嶇О</div>
<div class="wifi-name">{{ "缃戠粶" + activeWireItem.index }}</div>
</el-form-item>
- <el-form-item prop="ifname">
- <div class="p-title">缃戝崱</div>
+ <el-form-item prop="ifname">
+ <div class="p-title">缃戝崱</div>
<div class="wifi-name">{{ activeWireItem.name }}</div>
</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>
+ <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 prop="subMask">
- <div class="p-title">瀛愮綉鎺╃爜</div>
- <ip-input
- :ip="wireForm.subMask"
- @on-blur="wireForm.subMask = arguments[0]"
- ></ip-input>
+ <div class="p-title">瀛愮綉鎺╃爜</div>
+ <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>
+ <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 prop="dns">
- <div class="p-title">DNS</div>
- <ip-input
- :ip="wireForm.dns"
- @on-blur="wireForm.dns = arguments[0]"
- ></ip-input>
+ <el-form-item prop="dns">
+ <div class="p-title">DNS</div>
+ <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>
</el-form-item>
</el-form>
@@ -329,6 +235,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>
@@ -342,45 +251,54 @@
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 { isIPv4 } from "@/scripts/validate"
export default {
components: {
ipInput,
switchBar,
+ WifiGateway,
+ LoraGateway,
+ 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,
@@ -388,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: {},
@@ -405,200 +357,256 @@
{ 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: "",
IPV4_hid: false,
- IPV6_hid: false
- };
- },
- components: {
- ipInput,
- switchBar,
+ IPV6_hid: false,
+ configLoading: false
+ }
},
mounted() {
- this.getCurServer();
- this.fetchWireList();
+ this.getCurServer()
+ this.fetchWireList()
},
methods: {
+ minusPrefix() {
+ 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.ruleForm.deviceName = ""
+ this.ruleForm.port = ""
this.getCurServer()
- }
- if (i == 1) {
- this.inWifiDetail = false;
}
- this.activePage = i;
+ 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);
+ 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)
+
+ 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
+ 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",
+ message: "鏈嶅姟鍣ㄩ厤缃垚鍔�"
+ })
+ }
+ })
+ .catch((err) => {})
+ 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
- if(!(this.IPV4_hid&&!this.IPV6_hid)){
- setTimeout(() => {
- demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})
- }, 300);
+ 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]
}
- 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 {
width: 100%;
}
+.wire {
+ // width: 456px;
+ margin: 0 auto;
+}
.wire-detail {
+ // 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;
-
- }
+ 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;
justify-content: space-between;
@@ -620,7 +628,7 @@
}
}
.net-set {
- max-width: 600px;
+ // max-width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -653,10 +661,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;
@@ -667,6 +676,11 @@
padding: 0 20px;
display: flex;
justify-content: space-between;
+
+ &:hover {
+ background: #f2f2f7;
+ }
+
.item-left {
display: flex;
align-items: center;
@@ -681,7 +695,7 @@
}
}
.menu-item-active {
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
color: #ffffff;
}
}
@@ -692,25 +706,30 @@
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;
+ 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)
- .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: 16px;
+ margin-bottom: 14px;
}
.el-form-item__content {
line-height: 48px;
@@ -724,7 +743,7 @@
border: 2px solid #409eff !important;
}
.el-select-dropdown__item {
- color: #333333;
+ color: #4f4f4f;
height: 32px;
font-size: 12px;
line-height: 32px;
@@ -758,11 +777,10 @@
background-color: #ffffff;
border: 2px solid transparent;
border-radius: 20px;
- height: 32px;
+ height: 32px !important;
padding: 0 15px;
font-size: 14px;
line-height: 32px;
-
font-weight: bold;
}
.el-input__inner::placeholder {
@@ -774,7 +792,7 @@
width: 100%;
}
.el-select .el-input .el-select__caret {
- color: #333333;
+ color: #4f4f4f;
font-size: 14px;
font-weight: 600;
}
@@ -783,7 +801,7 @@
max-width: none !important;
}
.wifi-set {
- max-width: 600px;
+ // max-width: 456px;
margin: 0 auto;
.switch-bar {
background: #f2f2f7;
@@ -791,7 +809,7 @@
}
.switch-bar .name {
font-size: 14px;
- color: #333;
+ color: #4f4f4f;
font-weight: bold;
}
.wifi-option {
@@ -802,12 +820,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;
@@ -834,7 +852,7 @@
}
}
.wifi-detail {
- max-width: 600px;
+ // max-width: 454px;
margin: 0 auto;
transition: all 0.3s linear 0s;
.general-box {
@@ -845,20 +863,25 @@
padding-bottom: 10px;
margin-bottom: 20px;
&.fold {
- height: 342px;
+ 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;
}
}
&.hidden {
- height: 34px;
- .icon-fold {
- transform: rotate(180deg);
- }
+ height: 34px;
+ .icon-fold {
+ transform: rotate(180deg);
+ }
}
.el-form-item {
margin-bottom: 0px;
@@ -868,7 +891,7 @@
padding: 14px 20px;
font-weight: bold;
font-size: 14px;
- color: #333333;
+ color: #4f4f4f;
}
.ip-input-container {
max-width: none !important;
@@ -893,21 +916,12 @@
margin-top: 0;
display: flex;
justify-content: space-between;
- margin-bottom: 20px;
- .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 {
@@ -920,15 +934,9 @@
line-height: 48px;
}
.ad {
- margin-top: 10px;
height: 32px;
- /* margin: 4px 0px 4px 5px; */
- /* border-radius: 5px; */
- line-height: 31px;
- /* width: 27px; */
text-align: center;
font-size: 17px;
- /* font-weight: bold; */
margin-left: 10px;
cursor: pointer;
}
@@ -943,13 +951,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;
@@ -960,6 +968,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 {
@@ -978,7 +991,7 @@
margin-right: 15px;
}
.good {
- color: #4e94ff;
+ color: var(--colorCard);
font-size: 16px;
}
.bad {
@@ -997,4 +1010,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