恢复测试前的代码

zhangzengfei

2021-11-24 e921f14f600ed33bb24c921968a048a0b39e882c

 src/pages/settings/views/NetSettings.vue

@@ -79,7 +79,7 @@
            </div>

          </div>

        </div>

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

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

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

          <div class="btns">

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

@@ -91,7 +91,6 @@


            <el-form

              :model="wifiForm"

              :rules="wifiFormRules"

              ref="wifiForm"

              class="join-form"

            >

@@ -119,17 +118,20 @@


          <switchBar

            :barName="`高级设置`"

            @switchChange="highClassSetting"

            :value="isHighClass"

          ></switchBar>



          <div class="general-box">

            <div class="in-title">IPV4</div>

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

            <div class="in-title">IPV4 
              <span class="icon iconfont icon-fold"

               @click="toggleFold('IPV4_hid')">&#xe757;</span>

            </div>



            <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">

              <el-form-item>

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

                <el-select v-model="value" placeholder="请选择" size="small">

                <el-select v-model="value" placeholder="请选择" size="small"

                :popper-append-to-body="false">

                  <el-option

                    v-for="item in options"

                    :key="item.value"

@@ -177,13 +179,16 @@
            </el-form>

          </div>



          <div class="general-box">

            <div class="in-title">IPV6</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="ipv4Form">

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

              <el-form-item>

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

                <el-select v-model="value" placeholder="请选择" size="small">

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

                  <el-option

                    v-for="item in options"

                    :key="item.value"

@@ -203,18 +208,18 @@
                <div class="p-title">前缀</div>

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

                  <el-input

                    v-model="wifiForm.password"

                    v-model="ipv6Form.prefix"

                    placeholder

                    size="small"

                  ></el-input>



                  <div class="ad">

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

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

                  </div>

                  <div class="ad">

                    <i class="el-icon-circle-plus-outline"></i>

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

                  </div>

                  <div class="ad"><i class="el-icon-refresh-left"></i></div>

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

                </div>

              </el-form-item>



@@ -281,38 +286,38 @@
        <div class="wire-detail" v-if="activePage == 2 && inWireDetail">

          <div class="title">网络设置</div>

          <el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">

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

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

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

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

              <div class="wifi-name">{{ "网络" + activeWireItem.index }}</div>

            </el-form-item>

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

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

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

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

              <div class="wifi-name">{{ activeWireItem.name }}</div>

            </el-form-item>

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

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

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

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

              <ip-input

                :ip="wireForm.ip"

                @on-blur="wireForm.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

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

                <div class="p-title">子网掩码</div>

              <div class="p-title">子网掩码</div>

              <ip-input

                :ip="wireForm.subMask"

                @on-blur="wireForm.subMask = arguments[0]"

              ></ip-input>

            </el-form-item>



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

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

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

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

              <ip-input

                :ip="wireForm.gateway"

                @on-blur="wireForm.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

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

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

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

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

              <ip-input

                :ip="wireForm.dns"

                @on-blur="wireForm.dns = arguments[0]"

@@ -325,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>

@@ -344,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) => {

@@ -401,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: [

@@ -414,17 +432,19 @@
        },

      ],

      value: "",

      IPV4_hid: false,

      IPV6_hid: false

    };

  },

  components: {

    ipInput,

    switchBar,

  },

  mounted() {

    this.getCurServer();

    this.fetchWireList();

  },

  methods: {

    minusPrefix(){

      debugger

      this.ipv6Form.prefix

    },

    switchNetCard(item) {

      if (item.active) {

        upNetCard({ ifname: item.name }).then(

@@ -489,10 +509,15 @@
      });

    },

    openRight(i) {

      this.activePage = i;

      if (i == 0) {

        this.ruleForm.deviceName = "";

        this.ruleForm.port = "";

        this.getCurServer()

      }      
      if (i == 1) {

        this.inWifiDetail = false;

      }

      this.activePage = i;

    },

    saveWire(ifname) {

      let data = {

@@ -549,6 +574,17 @@
        this.openWireDetail(item);

      });

    },

    toggleFold(tog) {

    const demo = this.$refs.ipvHolder

    if(!(this.IPV4_hid&&!this.IPV6_hid)){

       setTimeout(() => {

       demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})

       }, 300);

    }

    this[tog] = !this[tog]

     
     
     }

  },

  computed: {

    showStatus() {

@@ -561,22 +597,28 @@
.all {

  width: 100%;

}

.wire{

  width: 456px;

  margin: 0 auto;

}

.wire-detail {

  width: 456px;

  margin: 0 auto;

  .title {

    font-size: 16px;

    margin-bottom: 10px;

  }

  .ip-input-container {

          max-width: none !important;

          height: 32px;

          line-height: normal;

          box-sizing: border-box;

          // background-color: #f2f2f7;

          text-align: left;

          border-radius: 20px;

          border: 2px solid transparent;    display: flex;



        }

    max-width: none !important;

    height: 32px;

    line-height: normal;

    box-sizing: border-box;

    // background-color: #f2f2f7;

    text-align: left;

    border-radius: 20px;

    border: 2px solid transparent;

    display: flex;

  }

  .btns {

    display: flex;

    justify-content: space-between;

@@ -598,7 +640,7 @@
  }

}

.net-set {

  max-width: 600px;

  max-width: 456px;

  margin: 0 auto;

  .title {

    font-size: 16px;

@@ -631,10 +673,11 @@
    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    .menu-item {

      background: #f2f2f7;

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

@@ -645,6 +688,11 @@
      padding: 0 20px;

      display: flex;

      justify-content: space-between;



      &:hover {

        background: #f2f2f7;

      }



      .item-left {

        display: flex;

        align-items: center;

@@ -659,7 +707,7 @@
      }

    }

    .menu-item-active {

      background-color: var(--colorCard);

      background-color: var(--colorCard) !important;

      color: #ffffff;

    }

  }

@@ -670,12 +718,19 @@
    box-sizing: border-box;

    position: relative;

    padding: 10px;

    padding-top: 6px;

    border-top: 4px solid #f2f2f7;

    overflow-y: overlay;

    overflow-x: hidden;



    .title {

      height: 48px;

      font-size: 16px;

      line-height: 48px;

      color: #333333;

      font-weight: bold;

      color: #4F4F4F;

      font-weight: bold;    background: #F2F2F7;

    border-radius: 8px;

    margin-bottom: 4px;

    }

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

@@ -688,7 +743,7 @@
      width: 100%;

    }

    .el-form-item {

      margin-bottom: 16px;

      margin-bottom: 4px;

    }

    .el-form-item__content {

      line-height: 48px;

@@ -702,7 +757,7 @@
        border: 2px solid #409eff !important;

      }

      .el-select-dropdown__item {

        color: #333333;

        color: #4F4F4F;

        height: 32px;

        font-size: 12px;

        line-height: 32px;

@@ -736,11 +791,10 @@
        background-color: #ffffff;

        border: 2px solid transparent;

        border-radius: 20px;

        height: 32px;

        height: 32px !important;

        padding: 0 15px;

        font-size: 14px;

        line-height: 32px;



        font-weight: bold;

      }

      .el-input__inner::placeholder {

@@ -752,7 +806,7 @@
        width: 100%;

      }

      .el-select .el-input .el-select__caret {

        color: #333333;

        color: #4F4F4F;

        font-size: 14px;

        font-weight: 600;

      }

@@ -761,7 +815,7 @@
      max-width: none !important;

    }

    .wifi-set {

      max-width: 600px;

      max-width: 456px;

      margin: 0 auto;

      .switch-bar {

        background: #f2f2f7;

@@ -769,7 +823,7 @@
      }

      .switch-bar .name {

        font-size: 14px;

        color: #333;

        color: #4F4F4F;

        font-weight: bold;

      }

      .wifi-option {

@@ -780,12 +834,12 @@
        align-items: center;

        box-sizing: border-box;

        padding: 0 20px;

        margin-bottom: 10px;

        margin-bottom: 4px;

        background: #f2f2f7;

        border-radius: 8px;

        .name {

          font-size: 14px;

          color: #333;

          color: #4F4F4F;

          font-weight: bold;

          .icon {

            color: #4e94ff;

@@ -812,13 +866,32 @@
      }

    }

    .wifi-detail {

      max-width: 600px;

      max-width: 454px;

      margin: 0 auto;

      transition: all 0.3s linear 0s;

      .general-box {

        overflow: hidden;

        transition: all 0.3s linear 0s;

        background: #f2f2f7;

        border-radius: 8px;

        padding-bottom: 10px;

        margin-bottom: 20px;

        &.fold {

        height: 342px;

          .icon-fold {

            display: inline-block;

            font-size: 14px;

            margin-left: 360px;

            transition: all 0.3s linear 0s;

            cursor: pointer;

          }

        }

        &.hidden {

        height: 34px;

         .icon-fold {

           transform: rotate(180deg);

         }

        }

        .el-form-item {

          margin-bottom: 0px;

        }

@@ -827,7 +900,7 @@
          padding: 14px 20px;

          font-weight: bold;

          font-size: 14px;

          color: #333333;

          color: #4F4F4F;

        }

        .ip-input-container {

          max-width: none !important;

@@ -852,21 +925,12 @@
        margin-top: 0;

        display: flex;

        justify-content: space-between;

        margin-bottom: 20px;

        .left {

          background-color: rgba(240, 240, 240, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          border-radius: 10px;

        margin-bottom: 4px;

        .cancel {

          width: 218px;

        }

        .right {

          background-color: rgba(61, 104, 225, 1);

          height: 40px;

          line-height: 40px;

          width: 48%;

          color: #fff;

          border-radius: 10px;

        .ok {

          width: 218px;

        }

      }

      .wifi-name {

@@ -880,13 +944,8 @@
      }

      .ad {

        height: 32px;

        /* margin: 4px 0px 4px 5px; */

        /* border-radius: 5px; */

        line-height: 31px;

        /* width: 27px; */

        text-align: center;

        font-size: 17px;

        /* font-weight: bold; */

        margin-left: 10px;

        cursor: pointer;

      }

@@ -901,13 +960,13 @@
        align-items: center;

        box-sizing: border-box;

        padding: 0 20px;

        margin-bottom: 10px;

        margin-bottom: 4px;

        border-radius: 8px;

        .name {

          font-size: 15px;

          font-weight: bold;

          font-size: 14px;

          color: #333333;

          color: #4F4F4F;

        }

        .right {

          display: flex;