web/apsDashboard-1.git

parent: e7de3ae6 | 补丁 | 提交 | ignore whitespace

ZZJ

2021-10-19 49a8a78f9ee54592a501ea4c94eb738ce5e284fd

网络设置v0

4个文件已添加

3个文件已修改

	src/pages/settings/asset/common.scss	132 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/settings/components/LoraGateway.vue	145 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/settings/components/MqttGateway.vue	107 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/settings/components/WifiGateway.vue	226 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/settings/components/switchBar.vue	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/settings/views/NetSettings.vue	35 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/settings/views/generalSettings.vue	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/pages/settings/asset/common.scss

New file
@@ -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);
    }
  }

 src/pages/settings/components/LoraGateway.vue

New file
@@ -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="请输入设备ID"
                  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="请输入APPID"
                  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>

 src/pages/settings/components/MqttGateway.vue

New file
@@ -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>

 src/pages/settings/components/WifiGateway.vue

New file
@@ -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>

 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;


 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;


 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 {

New file
			@@ -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);
			}
			}

New file
			@@ -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="请输入设备ID"
			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="请输入APPID"
			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>

New file
			@@ -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>

New file
			@@ -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>

			@@ -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;

			@@ -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;

			@@ -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 {