暂存

ZZJ

2021-11-19 ddb4dda6ed6069253afb8b1e05fe52b56c681f35

暂存

 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",

 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);
    }
  }
  margin-left: 34px;
  font-size: 12px;
  font-weight: 700;
  .channelCount {
    color: rgb(78, 148, 255);
  }
}

 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="请输入设备ID"
                  size="small"
                ></el-input>
              </div>
        <div class="item-title">设备ID</div>
        <div class="inputContain">
          <el-input
            v-model="loraForm.devId"
            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>
        <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>
        <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>

 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>

 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>

 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 {


 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",