修改wifi配置

zhangzengfei

2023-09-12 a366f39aa6484628511eb14e38b461de087f4733

修改wifi配置

 src/api/system.ts

@@ -544,3 +544,19 @@
    data: qs.stringify(data)
  })
}

export const getWifiList = (query: any) => {
  return request({
    url: "/data/api-v/sysset/getWifiList",
    method: "post",
    data: qs.stringify(query)
  })
}

export const connectWifi = (query: any) => {
  return request({
    url: "/data/api-v/sysset/connectWifi",
    method: "post",
    data: qs.stringify(query)
  })
}

 src/pages/settings/views/NetSettings.vue

@@ -40,46 +40,50 @@
        <div class="wifi-set" v-if="activePage == 1 && !inWifiDetail">

          <div class="title">无线网络</div>



          <switchBar :barName="`无线网卡`" @switchChange="wifiControl" :value="isOpenWifi"></switchBar>

          <switchBar :barName="`无线网卡`" @switchChange="wifiControl" :value="wifiList.length > 0"></switchBar>



          <div class="wifi-option" v-for="(item, i) in wifiList" :key="i">

          <div class="wifi-option" v-for="(item, i) in wifiList" :key="i" @click="checkWifi(item)">

            <div class="name">

              <span class="icon iconfont" v-if="item.isConnected">&#xe676;</span>

              <span :style="!item.isConnected ? { 'margin-left': '24px' } : {}">{{ item.name }}</span>

              <span class="icon iconfont" v-if="item.connected">&#xe676;</span>

              <span :style="!item.connected ? { 'margin-left': '24px' } : {}">{{ item.essid | escape }}</span>

            </div>



            <div class="more-detail">

              <span class="icon iconfont lock">&#xe726;</span>

              <span class="icon iconfont lock" v-if="item.encryption_key">&#xe726;</span>

              <span class="icon iconfont signal">&#xe6e5;</span>

              <span class="icon iconfont more-icon" @click="checkWifi(item)">&#xe640;</span>

              <span class="icon iconfont more-icon">&#xe640;</span>

            </div>

          </div>



          <el-button type="text" @click="wirelessScan">扫描无线网络</el-button>

        </div>

        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">

          <div class="title">无线网络</div>

          <div class="btns">

            <div class="cancel">删除</div>

            <div class="ok">断开连接</div>

          </div>



          <div class="general-box">

            <div class="in-title">通用</div>

            <!-- <div class="in-title">通用</div> -->



            <el-form :model="wifiForm" ref="wifiForm" class="join-form">

            <el-form :model="selectedWifi" ref="wifiForm" class="join-form">

              <el-form-item prop="name">

                <div class="p-title">名称</div>

                <!-- <div class="wifi-name">{{ 12123 }}</div> -->

                <el-input v-model="wifiForm.name" placeholder="" size="small"></el-input>

                <el-input v-model="selectedWifi.essid" placeholder="" size="small"></el-input>

              </el-form-item>



              <el-form-item prop="password">

                <div class="p-title">密码</div>

                <el-input v-model="wifiForm.password" placeholder="请输入密码" size="small" show-password></el-input>

                <el-input value="******" v-if="selectedWifi.connected"></el-input>

                <el-input

                  v-model="selectedWifi.password"

                  placeholder="请输入密码"

                  size="small"

                  show-password

                  v-else

                ></el-input>

              </el-form-item>

            </el-form>

          </div>



          <switchBar :barName="`高级设置`" :value="isHighClass"></switchBar>

          <!-- <switchBar :barName="`高级设置`" :value="isHighClass"></switchBar>



          <div class="general-box fold" :class="{ hidden: IPV4_hid }">

            <div class="in-title">

@@ -121,65 +125,12 @@
                <ip-input :ip="ipv4Form.dns2" @on-blur="ipv4Form.dns2 = arguments[0]"></ip-input>

              </el-form-item>

            </el-form>

          </div>



          <div class="general-box fold" :class="{ hidden: IPV6_hid }" ref="ipv6Holder">

            <div class="in-title">

              IPV6

              <span class="icon iconfont icon-fold" @click="toggleFold('IPV6_hid')">&#xe757;</span>

            </div>



            <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">

              <el-form-item>

                <div class="p-title">方法</div>

                <el-select v-model="value" placeholder="请选择" size="small" :popper-append-to-body="false">

                  <el-option

                    v-for="item in options"

                    :key="item.value"

                    :label="item.label"

                    :value="item.value"

                  ></el-option>

                </el-select>

              </el-form-item>

              <el-form-item prop="ip">

                <div class="p-title">IP</div>

                <ip-input :ip="ipv6Form.ip" @on-blur="ipv6Form.ip = arguments[0]"></ip-input>

              </el-form-item>

              <el-form-item prop="subMask">

                <div class="p-title">前缀</div>

                <div style="display: flex; width: 100%">

                  <el-input v-model="ipv6Form.prefix" placeholder size="small"></el-input>



                  <div class="ad">

                    <i class="el-icon-remove-outline" @click="minusPrefix"></i>

                  </div>

                  <div class="ad">

                    <i class="el-icon-circle-plus-outline" @click=";+ipv6Form.prefix++"></i>

                  </div>

                  <div class="ad">

                    <i class="el-icon-refresh-left" @click="ipv6Form.prefix = ''"></i>

                  </div>

                </div>

              </el-form-item>



              <el-form-item prop="gateway">

                <div class="p-title">网关</div>

                <ip-input :ip="ipv6Form.gateway" @on-blur="ipv6Form.gateway = arguments[0]"></ip-input>

              </el-form-item>

              <el-form-item prop="dns">

                <div class="p-title">首选DNS</div>

                <ip-input :ip="ipv6Form.dns1" @on-blur="ipv6Form.dns1 = arguments[0]"></ip-input>

              </el-form-item>

              <el-form-item prop="dns">

                <div class="p-title">备用DNS</div>

                <ip-input :ip="ipv6Form.dns2" @on-blur="ipv6Form.dns2 = arguments[0]"></ip-input>

              </el-form-item>

            </el-form>

          </div>

          </div> -->



          <div class="btns">

            <div class="cancel" @click="inWifiDetail = false">取消</div>

            <div class="ok">保存</div>

            <div class="ok" v-if="selectedWifi.connected" @click="disconectedWifi">断开连接</div>

            <div class="ok" v-else @click="saveWifi">保存</div>

          </div>

        </div>



@@ -251,7 +202,9 @@
  getNetWorkCardInfo,

  getDevInfo,

  downNetCard,

  upNetCard

  upNetCard,

  getWifiList,

  connectWifi

} from "@/api/system"



import ipInput from "../components/IPInput"

@@ -270,6 +223,11 @@
    WifiGateway,

    LoraGateway,

    MqttGateway

  },

  filters: {

    escape(val) {

      return unescape(val)

    }

  },

  data() {

    const checkPwd = (rule, value, callback) => {

@@ -296,11 +254,10 @@
      },

      wireArr: [],

      inWifiDetail: false,

      wifiList: [

        { name: "无线网络1", isConnected: false },

        { name: "无线网络2", isConnected: true }

      ],

      selectedWifi: {},

      wifiList: [],

      isOpenWifi: false,

      wifiIfname: "",

      inWireDetail: false,

      wireForm: {

        dns: "",

@@ -373,7 +330,7 @@
        }

      ],

      value: "",

      IPV4_hid: false,

      IPV4_hid: true,

      IPV6_hid: false,

      configLoading: false

    }

@@ -383,6 +340,16 @@
    this.fetchWireList()

  },

  methods: {

    wirelessScan() {

      this.wifiList = []

      getWifiList({ ifname: this.wifiIfname }).then((rsp) => {

        if (rsp && rsp.success) {

          this.wifiList = rsp.data.filter((e) => {

            return e.essid != ""

          })

        }

      })

    },

    minusPrefix() {

      this.ipv6Form.prefix

    },

@@ -425,9 +392,20 @@
      getWireList().then((res) => {

        if (res && res.success) {

          this.wireArr = res.data



          // 过滤网络接口状态

          this.wireArr.forEach((x) => {

            let t = x.flags.split("|")[0] == "up"

            this.$set(x, "active", t)



            if (x.wireless) {

              this.wifiIfname = x.name

            }

          })



          // 过滤掉wifi接口

          this.wireArr = res.data.filter((e) => {

            return !e.wireless

          })

        }

      })

@@ -458,6 +436,7 @@
      }

      if (i == 1) {

        this.inWifiDetail = false

        this.wirelessScan()

      }

      this.activePage = i

    },

@@ -523,8 +502,9 @@
      })

    },

    wifiControl(val) {},

    checkWifi() {

    checkWifi(item) {

      this.inWifiDetail = true

      this.selectedWifi = item

    },

    openWireDetail(item) {

      this.inWireDetail = true

@@ -572,6 +552,57 @@
        }, 300)

      }

      this[tog] = !this[tog]

    },

    disconectedWifi() {

      let param = {

        ifname: this.wifiIfname,

        ssid: "del",

        passwd: ""

      }



      this.configLoading = true

      connectWifi(param)

        .then((rsp) => {

          if (rsp && rsp.success) {

            this.$message.success("配置成功")

          } else {

            this.$message.error("配置失败")

          }



          this.configLoading = false

          this.wirelessScan()

        })

        .catch(() => {

          this.configLoading = false

        })

    },

    saveWifi() {

      let param = {

        ifname: this.wifiIfname,

        ssid: this.selectedWifi.essid,

        passwd: this.selectedWifi.password

      }



      if (this.selectedWifi.password.length < 8) {

        this.$message.warning("密码不能少于8位")

        return

      }



      this.configLoading = true

      connectWifi(param)

        .then((rsp) => {

          if (rsp && rsp.success) {

            this.$message.success("配置成功")

          } else {

            this.$message.error("配置失败")

          }



          this.configLoading = false

          this.wirelessScan()

        })

        .catch(() => {

          this.configLoading = false

        })

    }

  },

  computed: {

@@ -823,6 +854,7 @@
        margin-bottom: 4px;

        background: #f2f2f7;

        border-radius: 8px;

        cursor: pointer;

        .name {

          font-size: 14px;

          color: #4f4f4f;