From 49a8a78f9ee54592a501ea4c94eb738ce5e284fd Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 19 十月 2021 10:13:37 +0800
Subject: [PATCH] 网络设置v0
---
src/pages/settings/asset/common.scss | 132 ++++++++++++
src/pages/settings/components/switchBar.vue | 2
src/pages/settings/components/LoraGateway.vue | 145 +++++++++++++
src/pages/settings/components/WifiGateway.vue | 226 ++++++++++++++++++++
src/pages/settings/components/MqttGateway.vue | 107 +++++++++
src/pages/settings/views/generalSettings.vue | 3
src/pages/settings/views/NetSettings.vue | 35 ++-
7 files changed, 636 insertions(+), 14 deletions(-)
diff --git a/src/pages/settings/asset/common.scss b/src/pages/settings/asset/common.scss
new file mode 100644
index 0000000..d9b943a
--- /dev/null
+++ b/src/pages/settings/asset/common.scss
@@ -0,0 +1,132 @@
+.form-item {
+ margin: 0 auto;
+ width: 456px;
+ height: 48px;
+ margin-bottom: 4px;
+ background-color: #F2F2F7;
+ border-radius: 8px;
+
+ ::v-deep .el-form-item__content {
+ display: flex;
+ justify-content: space-between;
+ padding-right: 20px;
+ }
+
+ .switch-bar {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+
+ ::v-deep .name {
+ font-size: 14px;
+ }
+ }
+
+ .item-title {
+ font-size: 14px;
+ color: #4F4F4F;
+ font-weight: 700;
+ }
+
+ .inputContain, .el-slider {
+ flex:1;
+ margin-left: 32px;
+ }
+
+ .inputContain {
+ display: flex;
+ justify-content: end;
+ }
+
+ .el-input, .ip-input-container {
+ width: 305px ;
+ }
+
+ .el-select {
+ max-width: 305px;
+ }
+
+ .el-radio-group {
+ flex: 1;
+ margin-left: 60px;
+ text-align: left;
+ }
+
+ .el-radio-group ::v-deep .el-radio__label{
+ font-size: 12px;
+ font-weight: 700;
+ color: #4F4F4F;
+ }
+
+ .ip-input-container {
+ border-radius: 20px;
+ }
+
+
+
+ ::v-deep .el-slider__button {
+ margin-top: -25px !important;
+ border: none !important;
+ &::after {
+ display: block;
+ position: relative;
+ content: "\e75d";
+ color: var(--colorCard);
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ }
+
+ .slider-info {
+ margin-left: 5px;
+ font-size: 12px;
+ color: #4F4F4F;
+ font-weight: 700;
+ }
+
+ ::v-deep .el-slider__bar {
+ z-index: 999999999 !important;
+ background-color: var(--colorCard) !important;
+ }
+ }
+
+.title {
+ color: #4F4F4F;
+ font-size: 16px;
+ text-align: center;
+}
+
+.form-data {
+ margin-top: 16px;
+ width: 456px;
+ margin: 0 auto;
+}
+
+.ok {
+ margin: 0 auto;
+ margin-top: 36px;
+ width: 188px;
+ height: 40px;
+ cursor: pointer;
+ border-radius: 25px;
+ background-color: var(--colorCard);
+ color: #fff;
+ line-height: 40px;
+ font-weight: bold;
+ font-size: 16px;
+}
+
+.channel {
+ margin-left: 34px;
+ font-size: 12px;
+ font-weight: 700;
+ .channelCount {
+ color: rgb(78, 148, 255);
+ }
+ }
\ No newline at end of file
diff --git a/src/pages/settings/components/LoraGateway.vue b/src/pages/settings/components/LoraGateway.vue
new file mode 100644
index 0000000..62e06d6
--- /dev/null
+++ b/src/pages/settings/components/LoraGateway.vue
@@ -0,0 +1,145 @@
+<template>
+ <div class="lora-gateway">
+ <el-form :model="loraForm" ref="loraForm">
+ <div class="title form-item">缃戠粶璁剧疆</div>
+
+ <el-form-item class="form-item">
+ <div class="item-title">璁惧ID</div>
+ <div class="inputContain">
+ <el-input
+ v-model="loraForm.deviceId"
+ placeholder="璇疯緭鍏ヨ澶嘔D"
+ size="small"
+ ></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">APPID</div>
+ <div class="inputContain">
+ <el-input
+ v-model="loraForm.appId"
+ placeholder="璇疯緭鍏PPID"
+ size="small"
+ ></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">瀵嗙爜</div>
+ <div class="inputContain">
+ <el-input
+ v-model="loraForm.password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ size="small"
+ show-password
+ auto-complete="new-password"
+ ></el-input>
+ </div>
+ </el-form-item>
+
+ <div class="block">
+ <el-form-item class="form-item channel-sele">
+ <div class="item-title">棰戦亾</div>
+ <el-select v-model="loraForm.channel" placeholder="璇烽�夋嫨" size="small"
+ :popper-append-to-body="false">
+ <el-option
+ v-for="item in channel_option"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ <div class="channel">褰撳墠杩炴帴閫氶亾锛�<span class="channelCount">{{channelCount}}</span></div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">宸ヤ綔棰戠巼</div>
+ <el-radio-group v-model="loraForm.workFre">
+ <el-radio :label="0">475.5MHz</el-radio>
+ <el-radio :label="1">868.5MHz</el-radio>
+ <el-radio :label="2">915.5MHz</el-radio>
+ </el-radio-group>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">閫氫俊妯″紡</div>
+ <div class="inputContain">
+ <el-input
+ v-model="loraForm.mode"
+ placeholder="鍏ㄥ弻宸�"
+ size="small"
+ ></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">宸ヤ綔棰戠巼</div>
+ <el-radio-group v-model="loraForm.workFre2">
+ <el-radio :label="0">鏄�</el-radio>
+ <el-radio :label="1">鍚�</el-radio>
+ <el-radio :label="2">绌洪棽涓嶅伐浣滄ā寮�</el-radio>
+ </el-radio-group>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">鍙戝皠鍔熺巼璋冩暣</div>
+ <el-slider
+ v-model="loraForm.frequency"
+ id="loraForm_frequency"
+ :min="0"
+ :max="100"
+ :show-tooltip="false"
+ ></el-slider>
+ <div class="slider-info">鑺傝兘</div>
+ </el-form-item>
+
+ <div class="ok">淇濆瓨</div>
+
+ </div>
+
+
+
+
+
+ </el-form>
+ </div>
+</template>
+
+<script>
+export default {
+ name:"loraGateway",
+ data(){
+ return {
+ channel_option:[],
+ channelCount:20,
+ loraForm:{
+ deviceId: "",
+ appId: "",
+ password: "",
+ workFre: "",
+ mode: "",
+ workFre2: "",
+ frequency: 20
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../asset/common.scss';
+ .lora-gateway {
+ display: flex;
+ flex-direction: column;
+ .block {
+ margin-top: 16px;
+ }
+ .channel-sele {
+ .el-select {
+ flex: 1;
+ margin-left: 88px;
+ }
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/settings/components/MqttGateway.vue b/src/pages/settings/components/MqttGateway.vue
new file mode 100644
index 0000000..8ec8f31
--- /dev/null
+++ b/src/pages/settings/components/MqttGateway.vue
@@ -0,0 +1,107 @@
+<template>
+ <div class="mqtt-gateway">
+ <el-form :model="mqttForm" ref="mqttForm">
+ <div class="title form-item">缃戠粶璁剧疆</div>
+
+ <el-form-item class="form-item">
+ <switchBar
+ :barName="`MOTT缃戝叧`"
+ :value="accessible"
+ ></switchBar>
+ </el-form-item>
+
+ <div class="block">
+ <el-form-item class="form-item">
+ <div class="item-title">IP鍦板潃</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="mqttForm.ip"
+ @on-blur="mqttForm.ip = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">绔彛鍙�</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="mqttForm.port"
+ @on-blur="mqttForm.port = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+ </div>
+
+ <div class="block">
+ <el-form-item class="form-item">
+ <div class="item-title">鍚嶇О</div>
+ <div class="inputContain">
+ <el-input
+ v-model="mqttForm.name"
+ placeholder="璇疯緭鍏ョ敤鎴峰悕"
+ size="small"
+ ></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">瀵嗙爜</div>
+ <div class="inputContain">
+ <el-input
+ v-model="mqttForm.password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ size="small"
+ show-password
+ auto-complete="new-password"
+ ></el-input>
+ </div>
+ </el-form-item>
+ </div>
+
+ <div class="block">
+ <el-form-item class="form-item">
+ <switchBar
+ :barName="`MOTT缃戝叧`"
+ :value="accessible"
+ ></switchBar>
+ </el-form-item>
+ </div>
+ </el-form>
+
+ <div class="ok">淇濆瓨</div>
+ </div>
+</template>
+
+<script>
+import ipInput from "../components/IPInput";
+import switchBar from "../components/switchBar";
+export default {
+ name:"mqttGateway",
+ data(){
+ return {
+ accessible: false,
+ mqttForm:{
+ ip:"",
+ port:"",
+ name:"",
+ password:""
+ }
+ }
+ },
+ components :{
+ switchBar,
+ ipInput
+ }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../asset/common.scss';
+ .mqtt-gateway {
+ display: flex;
+ flex-direction: column;
+ .block {
+ margin-top: 16px;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/settings/components/WifiGateway.vue b/src/pages/settings/components/WifiGateway.vue
new file mode 100644
index 0000000..85b7673
--- /dev/null
+++ b/src/pages/settings/components/WifiGateway.vue
@@ -0,0 +1,226 @@
+<template>
+ <div class="wifi-gateway">
+ <el-form :model="wifiForm" ref="wifiForm">
+ <div class="title form-item">缃戠粶璁剧疆</div>
+ <el-form-item class="form-item">
+ <switchBar
+ :barName="`鍏佽澶栫綉璁块棶`"
+ :value="accessible"
+ ></switchBar>
+ </el-form-item>
+
+ <div class="block">
+ <el-form-item class="form-item">
+ <div class="item-title">鍚嶇О</div>
+ <div class="inputContain">
+ <el-input
+ v-model="wifiForm.name"
+ placeholder="璇疯緭鍏ユ棤绾垮悕绉�"
+ size="small"
+ ></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">瀵嗙爜</div>
+ <div class="inputContain">
+ <el-input
+ v-model="wifiForm.password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ size="small"
+ show-password
+ auto-complete="new-password"
+ ></el-input>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">WPS鍔犲瘑</div>
+ <div class="inputContain">
+ <el-select v-model="wifiForm.wps" placeholder="璇烽�夋嫨" size="small"
+ :popper-append-to-body="false">
+ <el-option
+ v-for="item in wps_option"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">鎺堟潈鏂瑰紡</div>
+ <div class="inputContain">
+ <el-select v-model="wifiForm.auth" placeholder="璇烽�夋嫨" size="small"
+ :popper-append-to-body="false">
+ <el-option
+ v-for="item in auth_option"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">鍙戝皠鍔熺巼璋冩暣</div>
+ <el-slider
+ v-model="wifiForm.frequency"
+ id="wifiForm_frequency"
+ :min="0"
+ :max="100"
+ :show-tooltip="false"
+ ></el-slider>
+ <div class="slider-info">鑺傝兘</div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">IP鍦板潃</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.ip"
+ @on-blur="wifiForm.ip = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">瀛愮綉鎺╃爜</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.child"
+ @on-blur="wifiForm.ip = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">缃戝叧</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.gateway"
+ @on-blur="wifiForm.ip = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">DNS</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dns"
+ @on-blur="wifiForm.ip = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <div class="DHCP">DHCP鏈嶅姟鍣ㄨ缃�</div>
+
+ <el-form-item class="form-item">
+ <div class="item-title">IP姹犺捣濮嬪湴鍧�</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dns"
+ @on-blur="wifiForm.ipStart = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">IP姹犵粨鏉熷湴鍧�</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dns"
+ @on-blur="wifiForm.ipEnd = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">榛樿缃戝叧</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dns"
+ @on-blur="wifiForm.gateDefault = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ <el-form-item class="form-item">
+ <div class="item-title">DNS</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dns"
+ @on-blur="wifiForm.dns2 = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
+
+ </div>
+ </el-form>
+
+ <div class="ok">淇濆瓨</div>
+
+ </div>
+</template>
+
+<script>
+
+import ipInput from "../components/IPInput";
+import switchBar from "../components/switchBar";
+
+export default {
+ name:"wifiGateway",
+ data(){
+ return{
+ accessible:false,
+ wps_option:[],
+ auth_option:[],
+ wifiRules:[],
+ wifiForm:{
+ name:"",
+ password:"",
+ wps:"",
+ auth:"",
+ frequency:50,
+ ip:"",
+ child:"",
+ gateway:"",
+ dns:"",
+ ipStart:"",
+ ipEnd:"",
+ gateDefault:"",
+ dns2:"",
+ },
+ }
+ },
+ components :{
+ switchBar,
+ ipInput
+ }
+}
+</script>
+<style scoped lang="scss">
+@import '../asset/common.scss';
+ .wifi-gateway {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .block {
+ margin-top: 20px;
+ }
+
+ .DHCP {
+ text-align: left;
+ padding-left: 20px;
+ height: 56px;
+ line-height: 56px;
+ font-weight: bold;
+ font-size: 14px;
+ color: #4F4F4F;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/settings/components/switchBar.vue b/src/pages/settings/components/switchBar.vue
index c5f5db1..831d56c 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -30,7 +30,7 @@
justify-content: space-between;
border-radius: 8px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
.el-switch.is-checked .el-switch__core::after {
left: 100%;
margin-left: -12px;
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index a8262ae..46e370c 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -330,6 +330,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>
@@ -349,10 +352,17 @@
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'
+
export default {
components: {
ipInput,
switchBar,
+ WifiGateway,
+ LoraGateway,
+ MqttGateway
},
data() {
const checkPwd = (rule, value, callback) => {
@@ -406,6 +416,9 @@
{ name: "缃戠粶璁剧疆", icon: "\ue6dd" },
{ name: "鏃犵嚎缃戠粶", icon: "\uea13" },
{ name: "鏈夌嚎缃戠粶", icon: "\ue73b" },
+ { name: "WiFi缃戝叧", icon: "\ue73b" },
+ { name: "LORA缃戝叧", icon: "\ue73b" },
+ { name: "MQTT缃戝叧", icon: "\ue73b" },
],
ipv6FormRules: {},
options: [
@@ -422,10 +435,6 @@
IPV4_hid: false,
IPV6_hid: false
};
- },
- components: {
- ipInput,
- switchBar,
},
mounted() {
this.getCurServer();
@@ -589,11 +598,11 @@
width: 100%;
}
.wire{
- width: 460px;
+ width: 456px;
margin: 0 auto;
}
.wire-detail {
- width: 460px;
+ width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -631,7 +640,7 @@
}
}
.net-set {
- max-width: 600px;
+ max-width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -711,6 +720,8 @@
padding: 10px;
padding-top: 6px;
border-top: 4px solid #f2f2f7;
+ overflow-y: overlay;
+
.title {
height: 48px;
font-size: 16px;
@@ -718,7 +729,7 @@
color: #4F4F4F;
font-weight: bold; background: #F2F2F7;
border-radius: 8px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
}
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
@@ -731,7 +742,7 @@
width: 100%;
}
.el-form-item {
- margin-bottom: 16px;
+ margin-bottom: 4px;
}
.el-form-item__content {
line-height: 48px;
@@ -803,7 +814,7 @@
max-width: none !important;
}
.wifi-set {
- max-width: 600px;
+ max-width: 456px;
margin: 0 auto;
.switch-bar {
background: #f2f2f7;
@@ -822,7 +833,7 @@
align-items: center;
box-sizing: border-box;
padding: 0 20px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
background: #f2f2f7;
border-radius: 8px;
.name {
@@ -948,7 +959,7 @@
align-items: center;
box-sizing: border-box;
padding: 0 20px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
border-radius: 8px;
.name {
font-size: 15px;
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 08f0d9e..648d193 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -1124,7 +1124,7 @@
.videoTime .el-input-number.el-input-number--small {
width: 90px;
- height: 24px;
+ height: 24px !important;
border-radius: 4px;
line-height: 24px !important;
font-weight: 700 !important;
@@ -1133,6 +1133,7 @@
.videoTime .el-input-number.el-input-number--small .el-input__inner {
font-size: 12px !important;
+height: 24px !important;
}
.el-input-number__decrease {
--
Gitblit v1.8.0