From ddb4dda6ed6069253afb8b1e05fe52b56c681f35 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 19 十一月 2021 18:58:38 +0800
Subject: [PATCH] 暂存
---
vue.config.js | 4
src/pages/settings/asset/common.scss | 204 +++++-----
src/pages/settings/components/switchBar.vue | 15
src/api/system.ts | 46 ++
src/pages/settings/components/LoraGateway.vue | 239 +++++++------
src/pages/settings/components/WifiGateway.vue | 406 ++++++++++++----------
src/pages/settings/components/MqttGateway.vue | 144 ++++---
7 files changed, 588 insertions(+), 470 deletions(-)
diff --git a/src/api/system.ts b/src/api/system.ts
index 91216d5..e1cc118 100644
--- a/src/api/system.ts
+++ b/src/api/system.ts
@@ -1,6 +1,52 @@
import request from "@/scripts/httpRequest";
import qs from "qs";
+export const getMqtt = () => {
+ return request({
+ url: "/data/api-v/mqtt/conf",
+ method: "get"
+ });
+};
+
+export const saveMqtt = (data) => {
+ return request({
+ url: "/data/api-v/mqtt/saveConf",
+ method: "post",
+ data
+ });
+};
+
+export const getWifi = () => {
+ return request({
+ url: "/data/api-v/wifi/conf",
+ method: "get"
+ });
+};
+
+export const saveWifi = (data) => {
+ return request({
+ url: "/data/api-v/wifi/saveConf",
+ method: "post",
+ data
+ });
+};
+
+export const getLora = () => {
+ return request({
+ url: "/data/api-v/lora/conf",
+ method: "get"
+ });
+};
+
+export const saveLora = (data) => {
+ return request({
+ url: "/data/api-v/lora/saveConf",
+ method: "post",
+ data
+ });
+};
+
+
export const getDevInfo = () => {
return request({
url: "/data/api-v/sysset/getDevInfo",
diff --git a/src/pages/settings/asset/common.scss b/src/pages/settings/asset/common.scss
index d9b943a..e8189f0 100644
--- a/src/pages/settings/asset/common.scss
+++ b/src/pages/settings/asset/common.scss
@@ -1,111 +1,111 @@
.form-item {
- margin: 0 auto;
- width: 456px;
- height: 48px;
- margin-bottom: 4px;
- background-color: #F2F2F7;
- border-radius: 8px;
+ 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;
- }
- }
+ ::v-deep .el-form-item__content {
+ display: flex;
+ justify-content: space-between;
+ padding-right: 20px;
+ }
- .item-title {
- font-size: 14px;
- color: #4F4F4F;
- font-weight: 700;
- }
+ .switch-bar {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
- .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;
+ ::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: 1;
+ background-color: var(--colorCard) !important;
+ }
+}
+
.title {
- color: #4F4F4F;
+ color: #4f4f4f;
font-size: 16px;
text-align: center;
}
.form-data {
- margin-top: 16px;
- width: 456px;
- margin: 0 auto;
+ margin-top: 16px;
+ width: 456px;
+ margin: 0 auto;
}
.ok {
@@ -123,10 +123,10 @@
}
.channel {
- margin-left: 34px;
- font-size: 12px;
- font-weight: 700;
- .channelCount {
- color: rgb(78, 148, 255);
- }
- }
\ No newline at end of file
+ margin-left: 34px;
+ font-size: 12px;
+ font-weight: 700;
+ .channelCount {
+ color: rgb(78, 148, 255);
+ }
+}
diff --git a/src/pages/settings/components/LoraGateway.vue b/src/pages/settings/components/LoraGateway.vue
index 62e06d6..f6720ed 100644
--- a/src/pages/settings/components/LoraGateway.vue
+++ b/src/pages/settings/components/LoraGateway.vue
@@ -4,142 +4,159 @@
<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>
+ <div class="item-title">璁惧ID</div>
+ <div class="inputContain">
+ <el-input
+ v-model="loraForm.devId"
+ 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>
+ <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>
+ <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>
+ <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>
- <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.hz">
+ <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>
- <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>
+ <div class="inputContain">
+ <el-input
+ v-model="loraForm.netMode"
+ placeholder="鍏ㄥ弻宸�"
+ size="small"
+ ></el-input>
+ </div>
+ </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>
+ <el-form-item class="form-item">
+ <div class="item-title">宸ヤ綔妯″紡</div>
+ <el-radio-group v-model="loraForm.workMode">
+ <el-radio :label="0">鏄�</el-radio>
+ <el-radio :label="1">鍚�</el-radio>
+ <el-radio :label="2">绌洪棽涓嶅伐浣滄ā寮�</el-radio>
+ </el-radio-group>
+ </el-form-item>
- <div class="ok">淇濆瓨</div>
+ <el-form-item class="form-item">
+ <div class="item-title">鍙戝皠鍔熺巼璋冩暣</div>
+ <el-slider
+ v-model="loraForm.powerRate"
+ id="loraForm_frequency"
+ :min="0"
+ :max="100"
+ :show-tooltip="false"
+ ></el-slider>
+ <div class="slider-info">鑺傝兘</div>
+ </el-form-item>
+ <div class="ok" @click="saveList">淇濆瓨</div>
</div>
-
-
-
-
-
</el-form>
</div>
</template>
<script>
+import { getLora, saveLora } from "@/api/system";
export default {
- name:"loraGateway",
- data(){
- return {
- channel_option:[],
- channelCount:20,
- loraForm:{
- deviceId: "",
- appId: "",
- password: "",
- workFre: "",
- mode: "",
- workFre2: "",
- frequency: 20
- }
- }
- }
-}
+ name: "loraGateway",
+ created() {
+ this.getList();
+ },
+ data() {
+ return {
+ channel_option: [
+ { label: "棰戦亾1", value: "棰戦亾1" },
+ { label: "棰戦亾2", value: "棰戦亾2" },
+ ],
+ channelCount: 20,
+ loraForm: {
+ devId: "",
+ appId: "",
+ password: "",
+ hz: "",
+ netMode: "",
+ workMode: "",
+ powerRate: 20,
+ },
+ };
+ },
+ methods: {
+ async getList() {
+ const res = await getLora();
+ console.log(res);
+ },
+ async saveList() {
+ const res = await saveLora(this.loraForm);
+ console.log(res);
+ },
+ },
+};
</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;
- }
- }
+@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
index 8ec8f31..5cc4ad5 100644
--- a/src/pages/settings/components/MqttGateway.vue
+++ b/src/pages/settings/components/MqttGateway.vue
@@ -4,104 +4,122 @@
<div class="title form-item">缃戠粶璁剧疆</div>
<el-form-item class="form-item">
- <switchBar
- :barName="`MOTT缃戝叧`"
- :value="accessible"
- ></switchBar>
+ <switchBar
+ :barName="`MOTT缃戝叧`"
+ :value="mqttForm.enable"
+ @switchChange="switchChange('enable', arguments)"
+ ></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>
+ <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>
+ <div class="item-title">绔彛鍙�</div>
+ <div class="inputContain">
+ <el-input
+ v-model="mqttForm.port"
+ placeholder="璇疯緭鍏ョ敤鎴峰悕"
+ size="small"
+ ></el-input>
+ </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>
+ <div class="item-title">鍚嶇О</div>
+ <div class="inputContain">
+ <el-input
+ v-model="mqttForm.username"
+ 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>
+ <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"
+ :barName="`鍖垮悕鐢ㄦ埛`"
+ :value="mqttForm.anonymousEnable"
+ @switchChange="switchChange('anonymousEnable', arguments)"
></switchBar>
</el-form-item>
</div>
</el-form>
- <div class="ok">淇濆瓨</div>
+ <div class="ok" @click="saveList">淇濆瓨</div>
</div>
</template>
<script>
import ipInput from "../components/IPInput";
import switchBar from "../components/switchBar";
+import { getMqtt, saveMqtt } from "@/api/system";
export default {
- name:"mqttGateway",
- data(){
+ name: "mqttGateway",
+ created() {
+ this.getList();
+ },
+ data() {
return {
accessible: false,
- mqttForm:{
- ip:"",
- port:"",
- name:"",
- password:""
- }
- }
+ mqttForm: {
+ enable: "",
+ anonymousEnable: "",
+ },
+ };
},
- components :{
- switchBar,
- ipInput
- }
-}
+ components: {
+ switchBar,
+ ipInput,
+ },
+ methods: {
+ async getList() {
+ const res = await getMqtt();
+ this.mqttForm = { ...res.data };
+ },
+ async saveList() {
+ const res = await saveMqtt(this.mqttForm);
+ console.log(res);
+ },
+ switchChange(tar, arr) {
+ this.mqttForm[tar] = arr[0];
+ },
+ },
+};
</script>
<style scoped lang="scss">
-@import '../asset/common.scss';
- .mqtt-gateway {
- display: flex;
- flex-direction: column;
- .block {
- margin-top: 16px;
- }
+@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
index 68b8b3a..13086cf 100644
--- a/src/pages/settings/components/WifiGateway.vue
+++ b/src/pages/settings/components/WifiGateway.vue
@@ -3,226 +3,252 @@
<el-form :model="wifiForm" ref="wifiForm">
<div class="title form-item">缃戠粶璁剧疆</div>
<el-form-item class="form-item">
- <switchBar
- :barName="`鍏佽澶栫綉璁块棶`"
- :value="accessible"
- ></switchBar>
+ <switchBar
+ :barName="`鍏佽澶栫綉璁块棶`"
+ :value="wifiForm.wanEnable"
+ ></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.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">瀵嗙爜</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">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>
+ <div class="inputContain">
+ <el-select
+ v-model="wifiForm.authType"
+ 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">鍙戝皠鍔熺巼璋冩暣</div>
+ <el-slider
+ v-model="wifiForm.powerRate"
+ 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">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.mask"
+ @on-blur="wifiForm.mask = 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">缃戝叧</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.gateway"
+ @on-blur="wifiForm.gateway = 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>
+ <el-form-item class="form-item">
+ <div class="item-title">DNS</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dns"
+ @on-blur="wifiForm.dns = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
- <div class="DHCP">DHCP鏈嶅姟鍣ㄨ缃�</div>
+ <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.dhcpIpFrom"
+ @on-blur="wifiForm.dhcpIpFrom = 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">IP姹犵粨鏉熷湴鍧�</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dhcpIpTo"
+ @on-blur="wifiForm.dhcpIpTo = 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">榛樿缃戝叧</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dhcpGateway"
+ @on-blur="wifiForm.dhcpGateway = 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>
-
+ <el-form-item class="form-item">
+ <div class="item-title">DNS</div>
+ <div class="inputContain">
+ <ipInput
+ :ip="wifiForm.dhcpDns"
+ @on-blur="wifiForm.dhcpDns = arguments[0]"
+ ></ipInput>
+ </div>
+ </el-form-item>
</div>
</el-form>
- <div class="ok">淇濆瓨</div>
-
+ <div class="ok" @click="saveList">淇濆瓨</div>
</div>
</template>
<script>
-
import ipInput from "../components/IPInput";
import switchBar from "../components/switchBar";
+import { getWifi, saveWifi } from "@/api/system";
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:"",
- },
- }
+ name: "wifiGateway",
+ created() {
+ this.getlist();
+ },
+ data() {
+ return {
+ accessible: false,
+ wps_option: [
+ { label: "鍔犲瘑1", value: "鍔犲瘑1" },
+ { label: "鍔犲瘑2", value: "鍔犲瘑2" },
+ ],
+ auth_option: [
+ { label: "鎺堟潈1", value: "鎺堟潈1" },
+ { label: "鎺堟潈2", value: "鎺堟潈2" },
+ ],
+ wifiRules: [],
+ wifiForm: {
+ wanEnable: true,
+ name: "",
+ password: "",
+ wps: "",
+ authType: "",
+ powerRate: 50,
+ ip: "",
+ mask: "",
+ gateway: "",
+ dns: "",
+ dhcpIpFrom: "",
+ dhcpIpTo: "",
+ dhcpGateway: "",
+ dhcpDns: "",
+ },
+ };
+ },
+ components: {
+ switchBar,
+ ipInput,
+ },
+ methods: {
+ async getlist() {
+ const res = await getWifi();
+ console.log(res);
},
- components :{
- switchBar,
- ipInput
- }
-}
+
+ async saveList() {
+ const res = await saveWifi(this.wifiForm);
+ console.log(res);
+ },
+ },
+};
</script>
<style scoped lang="scss">
-@import '../asset/common.scss';
- .wifi-gateway {
- display: flex;
- flex-direction: column;
- }
-
- .block {
- margin-top: 20px;
- }
-
- .DHCP {
- text-align: left;
- margin: 0 auto;
- padding-left: 20px;
- height: 56px;
- width: 450px;
- line-height: 56px;
- font-weight: bold;
- font-size: 14px;
- color: #4F4F4F;
+@import "../asset/common.scss";
+.wifi-gateway {
+ display: flex;
+ flex-direction: column;
}
+.block {
+ margin-top: 20px;
+}
+
+.DHCP {
+ text-align: left;
+ margin: 0 auto;
+ padding-left: 20px;
+ height: 56px;
+ width: 450px;
+ 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 831d56c..d68bec7 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -2,7 +2,7 @@
<div class="switch-bar">
<div class="name">{{ barName }}</div>
<el-switch
- v-model="value"
+ v-model="barValue"
active-color="var(--colorCard)"
:width="30"
@change="switchChange"
@@ -13,10 +13,21 @@
<script>
export default {
+ name: "switchBar",
props: ["barName", "value"],
methods: {
switchChange(val) {
this.$emit("switchChange", val);
+ },
+ },
+ computed: {
+ barValue: {
+ get() {
+ return this.value;
+ },
+ set(newValue) {
+ return newValue;
+ },
},
},
};
@@ -28,7 +39,7 @@
height: 50px;
padding: 0 25px;
justify-content: space-between;
-border-radius: 8px;
+ border-radius: 8px;
margin-bottom: 4px;
.el-switch.is-checked .el-switch__core::after {
diff --git a/vue.config.js b/vue.config.js
index c021ded..3faacbf 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -41,7 +41,7 @@
});
// const serverUrl = "http://58.118.225.79:41243" // 缇婁簲
-const serverUrl = "http://192.168.20.189:7009";
+const serverUrl = "http://192.168.8.10:7009";
//const serverUrl = "http://192.168.20.10:9000";
// const cir = require("circular-dependency-plugin");
@@ -91,7 +91,7 @@
},
"/data/api-v/app/findAllApp": {
// target: '/',
- target: "http://localhost:8080/",
+ target: "http://localhost:8081/",
changeOrigin: true,
pathRewrite: {
"^/data/api-v/app/findAllApp": "apps.json",
--
Gitblit v1.8.0