From 0b737708e696c45720499759b5c31aced87fdbb6 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期三, 07 七月 2021 14:10:03 +0800
Subject: [PATCH] merge master
---
src/pages/systemSettings/views/NetSettings.vue | 430 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 241 insertions(+), 189 deletions(-)
diff --git a/src/pages/systemSettings/views/NetSettings.vue b/src/pages/systemSettings/views/NetSettings.vue
index b2e0eac..3ef0dec 100644
--- a/src/pages/systemSettings/views/NetSettings.vue
+++ b/src/pages/systemSettings/views/NetSettings.vue
@@ -2,21 +2,22 @@
<div class="all">
<div class="cluster-content">
<div class="cluster-center" ref="left">
- <div class="menu-item" @click="openRight('net')">
- <div><span class="icon iconfont"></span>缃戠粶璁剧疆</div>
- <div class="status">宸茶繛鎺�</div>
- </div>
- <div class="menu-item" @click="openRight('wifi')">
- <div><span class="icon iconfont"></span>鏃犵嚎缃戠粶</div>
- <div class="status">宸茶繛鎺�</div>
- </div>
- <div class="menu-item" @click="openRight('wire')">
- <div><span class="icon iconfont"></span>鏈夌嚎缃戠粶</div>
+ <div
+ class="menu-item"
+ v-for="(item, i) in tabList"
+ :key="i"
+ @click="openRight(item, i)"
+ ref="leftbar"
+ >
+ <div>
+ <span class="icon iconfont"></span>
+ {{ item.name }}
+ </div>
<div class="status">宸茶繛鎺�</div>
</div>
</div>
<div class="cluster-right">
- <div class="net-set" v-if="activePage == 'net'">
+ <div class="net-set" v-if="activePage == '缃戠粶璁剧疆'">
<div class="title">缃戠粶璁剧疆</div>
<el-form
:model="ruleForm"
@@ -24,52 +25,38 @@
ref="joinForm"
class="join-form"
label-width="150px"
- v-loading="joinLoading"
>
<el-form-item label="璁惧鍚嶇О" prop="deviceName">
- <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 label="绔彛" prop="port">
- <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>
- <div class="save-btn">淇濆瓨</div>
</el-form>
+ <div class="save-btn" @click="saveServerName">淇濆瓨</div>
</div>
- <div class="wifi" v-if="activePage == 'wifi' && !inWifiDetail">
- <switchBar
- :barName="`鏃犵嚎缃戝崱`"
- @switchChange="wifiControl"
- :value="isOpenWifi"
- ></switchBar>
+ <div class="wifi" v-if="activePage == '鏃犵嚎缃戠粶' && !inWifiDetail">
+ <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"></span>
- <span> {{ item.name }} </span>
+ <span>{{ item.name }}</span>
</div>
<div class="more-detail">
<span class="icon iconfont"></span>
<span
class="icon iconfont"
- style="margin-left: 10px"
+ style="margin-left: 10px; cursor: pointer"
@click="checkWifi(item)"
- ></span
- >
+ ></span>
</div>
</div>
</div>
- <div class="wifi-detail" v-if="activePage == 'wifi' && inWifiDetail">
+ <div class="wifi-detail" v-if="activePage == '鏃犵嚎缃戠粶' && inWifiDetail">
<div class="btns">
<div class="left">鍒犻櫎</div>
<div class="right">鏂紑杩炴帴</div>
@@ -84,51 +71,19 @@
class="join-form"
label-width="150px"
>
- <!-- v-loading="joinLoading" -->
<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-input v-model="wifiForm.password" placeholder="璇疯緭鍏ュ瘑鐮�" size="small" show-password></el-input>
</el-form-item>
</el-form>
- <switchBar
- :barName="`楂樼骇璁剧疆`"
- @switchChange="highClassSetting"
- :value="isHighClass"
- ></switchBar>
+ <switchBar :barName="`楂樼骇璁剧疆`" @switchChange="highClassSetting" :value="isHighClass"></switchBar>
<div class="title">IPV4</div>
- <!-- <el-form
- :model="ipv4Form"
- :rules="ipv4FormRules"
- ref="ipv4Form"
- class="join-form"
- label-width="150px"
- >
- <el-form-item label="瀵嗙爜" prop="password">
- <el-input
- v-model="wifiForm.password"
- placeholder="璇疯緭鍏ュ瘑鐮�"
- size="small"
- show-password
- ></el-input>
- </el-form-item>
- </el-form> -->
-
- <el-form
- :model="ipv4Form"
- :rules="ipv4FormRules"
- ref="ipv4Form"
- label-width="150px"
- >
+ <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
@@ -136,51 +91,30 @@
:key="item.value"
:label="item.label"
:value="item.value"
- >
- </el-option>
+ ></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>
+ <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>
+ <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>
+ <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>
+ <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>
+ <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 :model="ipv6Form" :rules="ipv6FormRules" ref="ipv4Form" label-width="150px">
<el-form-item label="鏂规硶">
<el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
<el-option
@@ -188,23 +122,15 @@
:key="item.value"
:label="item.label"
:value="item.value"
- >
- </el-option>
+ ></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>
+ <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-input
- v-model="wifiForm.password"
- placeholder=""
- size="small"
- ></el-input>
+ <el-input v-model="wifiForm.password" placeholder size="small"></el-input>
<div class="ad">-</div>
<div class="ad">+</div>
@@ -213,98 +139,65 @@
</el-form-item>
<el-form-item label="缃戝叧" prop="gateway">
- <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 label="棣栭�塂NS" prop="dns">
- <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 label="澶囩敤DNS" prop="dns">
- <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 class="btns">
- <div class="left">鍙栨秷</div>
+ <div class="left" @click="inWifiDetail = false">鍙栨秷</div>
<div class="right">淇濆瓨</div>
</div>
</div>
- <div class="wire" v-if="activePage == 'wire' && !inWireDetail">
- <div
- class="wire-bar"
- v-for="(item, i) in wireArr"
- :key="i"
- @click="checkWire(item)"
- >
- <div class="name">{{ item.name }}</div>
+ <div class="wire" v-if="activePage == '鏈夌嚎缃戠粶' && !inWireDetail">
+ <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"></span>
<el-switch
- v-model="value"
+ v-model="item.active"
active-color="rgba(61, 104, 225, 1)"
- @change="switchChange"
- >
- </el-switch>
+ @change="switchNetCard"
+ ></el-switch>
</div>
</div>
</div>
- <div class="wire-detail" v-if="activePage == 'wire' && inWireDetail">
- <div class="title">缃戠粶璁剧疆</div>
- <el-form
- :model="wireForm"
- :rules="wireFormRules"
- ref="wireForm"
- label-width="150px"
- >
- <el-form-item label="缃戠粶鍚嶇О" prop="name">
- <div class="wifi-name">{{ 12123 }}</div>
+ <div class="wire-detail" v-if="activePage == '鏈夌嚎缃戠粶' && inWireDetail">
+ <div class="title">缃戠粶璁剧疆</div>
+ <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm" label-width="150px">
+ <el-form-item label="缃戠粶鍚嶇О" prop="name">
+ <div class="wifi-name">{{ "缃戠粶" + activeWireItem.index }}</div>
</el-form-item>
- <el-form-item label="缃戝崱" prop="name">
- <div class="wifi-name">{{ 12123 }}</div>
+ <el-form-item label="缃戝崱" prop="ifname">
+ <div class="wifi-name">{{ activeWireItem.name }}</div>
</el-form-item>
<el-form-item label="IP" prop="ip">
- <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 label="瀛愮綉鎺╃爜" prop="subMask">
- <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 label="缃戝叧" prop="gateway">
- <ip-input
- :ip="ipv4Form.gateway"
- @on-blur="ipv4Form.gateway = arguments[0]"
- ></ip-input>
+ <ip-input :ip="wireForm.gateway" @on-blur="wireForm.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 label="DNS" prop="dns">
+ <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>
</el-form-item>
</el-form>
+
+ <div class="btns">
+ <div class="cancel" @click="cancelSaveWire">鍙栨秷</div>
+ <div class="ok" @click="saveWire">淇濆瓨</div>
+ </div>
</div>
</div>
</div>
@@ -328,12 +221,24 @@
addESNode,
getEsClusterInfo,
} from "@/api/clusterManage";
+import {
+ setServerName,
+ getWireList,
+ setNetWorkCard,
+ getNetWorkCardInfo,
+ getDevInfo,
+} from "@/api/system";
+
import cloudNode from "../components/CloudNode";
import ipInput from "@/components/subComponents/IPInput";
import { isIPv4 } from "@/scripts/validate";
import switchBar from "../components/switchBar";
export default {
+ components: {
+ ipInput,
+ switchBar,
+ },
data() {
const checkPwd = (rule, value, callback) => {
if (!value) {
@@ -358,18 +263,20 @@
name: "",
password: "",
},
- wireArr: [{ name: "鏈夌嚎缃戠粶1" }, { name: "鏈夌嚎缃戠粶2" }],
+ wireArr: [],
inWifiDetail: false,
wifiList: [{ name: "鏃犵嚎缃戠粶1" }, { name: "鏃犵嚎缃戠粶2" }],
isOpenWifi: false,
inWireDetail: false,
- wireForm:{
-
+ wireForm: {
+ dns: "",
+ subMask: "",
+ gateway: "",
+ ip: "",
},
- wireFormRules:{
-
- },
- activePage: "net",
+ wireFormRules: {},
+ activePage: "缃戠粶璁剧疆",
+ activeWireItem: {},
rules: {
deviceName: [
{ required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
@@ -378,6 +285,11 @@
ipv4Form: {},
ipv6Form: {},
ipv4FormRules: {},
+ tabList: [
+ { name: "缃戠粶璁剧疆" },
+ { name: "鏃犵嚎缃戠粶" },
+ { name: "鏈夌嚎缃戠粶" },
+ ],
ipv6FormRules: {},
options: [
{
@@ -390,6 +302,7 @@
},
],
value: "",
+ netCardValue: "",
};
},
components: {
@@ -397,19 +310,121 @@
ipInput,
switchBar,
},
- mounted() {},
- beforeDestroy() {},
+ mounted() {
+ this.getCurServer();
+ this.fetchWireList();
+ },
+ beforeDestroy() { },
props: ["barName"],
methods: {
- openRight(typ) {
- this.activePage = typ;
+ // parseFlags(flags) {
+ // let arr = flags.split("|");
+ // if (arr.length) {
+ // return arr[0] == "up";
+ // }
+ // return false;
+ // },
+ getCurServer() {
+ getDevInfo().then((res) => {
+ this.ruleForm.deviceName = res.data.server_name;
+ this.ruleForm.port = res.data.server_port;
+ });
},
- wifiControl(val) {},
+ fetchWireList() {
+ getWireList().then((res) => {
+ if (res && res.success) {
+ this.wireArr = res.data
+ .filter((x) => x.wireless == false)
+ .map((itm) => {
+ let arr = itm.flags.split("|");
+ let f = false;
+ if (arr.length) {
+ f = arr[0] == "up";
+ }
+ return {
+ flags: itm.flags,
+ index: itm.index,
+ mtu: itm.mtu,
+ name: itm.name,
+ wireless: itm.wireless,
+ active: f
+ }
+ });
+ }
+ });
+ },
+ cancelSaveWire() {
+ this.inWireDetail = false;
+ this.wireForm.ip = "";
+ this.wireForm.gateway = "";
+ this.wireForm.dns = "";
+ this.wireForm.subMask = "";
+ },
+ saveServerName() {
+ setServerName({
+ server_name: this.ruleForm.deviceName,
+ server_port: this.ruleForm.port,
+ }).then((res) => {
+ console.log(res);
+ if (res && res.success) {
+ this.$message.success(res.data);
+ }
+ });
+ },
+ openRight(item, i) {
+ this.activePage = item.name;
+ 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";
+ },
+ saveWire(ifname) {
+ debugger;
+ 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);
+ }
+ );
+ },
+ wifiControl(val) { },
checkWifi() {
this.inWifiDetail = true;
},
checkWire(item) {
this.inWireDetail = true;
+ this.activeWireItem = item;
+ getNetWorkCardInfo({
+ 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;
+ }
+ },
+ (err) => {
+ this.$message.error("鏌ユ壘涓嶅埌鏁版嵁: " + err.msg);
+ }
+ );
},
},
};
@@ -418,7 +433,42 @@
.all {
width: 100%;
}
-
+.wire-detail {
+ .btns {
+ display: flex;
+ justify-content: space-between;
+ .cancel {
+ background-color: rgba(240, 240, 240, 1);
+ height: 40px;
+ line-height: 40px;
+ width: 48%;
+ border-radius: 10px;
+ }
+ .ok {
+ background-color: rgba(61, 104, 225, 1);
+ height: 40px;
+ line-height: 40px;
+ width: 48%;
+ color: #fff;
+ border-radius: 10px;
+ }
+ }
+}
+.net-set {
+ .title {
+ font-size: 16px;
+ margin-bottom: 12px;
+ }
+ .el-input--small .el-input__inner {
+ height: 35px;
+ line-height: 35px;
+ background-color: rgba(240, 240, 240, 1);
+ border: none;
+ }
+ .el-input__inner::placeholder {
+ color: rgba(134, 134, 134, 1);
+ }
+}
.cluster-content {
height: 100%;
display: flex;
@@ -428,12 +478,13 @@
box-sizing: border-box;
.cluster-center {
height: 100%;
- width: 260px;
+ width: 280px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
- background-color: lavender;
+ border-right: 5px solid #f8f8f8;
+
.menu-item {
background-color: #f8f8f8;
height: 40px;
@@ -468,9 +519,9 @@
}
.el-form-item {
margin-bottom: 10px;
- height: 50px;
+ height: 54px;
+ padding: 6px 20px;
background: #f8f8f8;
- padding: 4px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
@@ -482,7 +533,7 @@
.el-form-item__content {
line-height: 40px;
position: relative;
- font-size: 14px;
+ font-size: 15px;
}
.ip-input-container {
max-width: none !important;
@@ -539,12 +590,13 @@
.wire {
.wire-bar {
height: 50px;
- background-color: aliceblue;
+ background-color: #f8f8f8;
display: flex;
justify-content: space-between;
+ align-items: center;
box-sizing: border-box;
padding: 0 20px;
- align-items: center;
+ margin-bottom: 10px;
}
.wifi-name {
height: 40px;
@@ -563,7 +615,7 @@
color: #fff;
line-height: 40px;
font-size: 14px;
- margin-top: 20px;
+ margin-top: 30px;
}
}
}
--
Gitblit v1.8.0