heyujie
2022-01-26 46588b9183c0067fd5fc570c36cfd5ff02dad223
src/pages/settings/views/NetSettings.vue
@@ -79,7 +79,11 @@
            </div>
          </div>
        </div>
        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">
        <div
          class="wifi-detail"
          v-if="activePage == 1 && inWifiDetail"
          ref="ipvHolder"
        >
          <div class="title">无线网络</div>
          <div class="btns">
            <div class="cancel">删除</div>
@@ -89,11 +93,7 @@
          <div class="general-box">
            <div class="in-title">通用</div>
            <el-form
              :model="wifiForm"
              ref="wifiForm"
              class="join-form"
            >
            <el-form :model="wifiForm" ref="wifiForm" class="join-form">
              <el-form-item prop="name">
                <div class="p-title">名称</div>
                <!-- <div class="wifi-name">{{ 12123 }}</div> -->
@@ -116,22 +116,27 @@
            </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">IPV4
              <span class="icon iconfont icon-fold"
               @click="toggleFold('IPV4_hid')">&#xe757;</span>
          <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"
                :popper-append-to-body="false">
                <el-select
                  v-model="value"
                  placeholder="请选择"
                  size="small"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
@@ -179,16 +184,29 @@
            </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
            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-select
                  v-model="value"
                  placeholder="请选择"
                  size="small"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
@@ -217,9 +235,17 @@
                    <i class="el-icon-remove-outline" @click="minusPrefix"></i>
                  </div>
                  <div class="ad">
                    <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>
                    <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 class="ad">
                    <i
                      class="el-icon-refresh-left"
                      @click="ipv6Form.prefix = ''"
                    ></i>
                  </div>
                </div>
              </el-form-item>
@@ -330,9 +356,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>
        <WifiGateway v-if="activePage == 3"></WifiGateway>
        <LoraGateway v-if="activePage == 4"></LoraGateway>
        <MqttGateway v-if="activePage == 5"></MqttGateway>
      </div>
    </div>
  </div>
@@ -352,9 +378,9 @@
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'
import WifiGateway from "../components/WifiGateway";
import LoraGateway from "../components/LoraGateway";
import MqttGateway from "../components/MqttGateway";
export default {
  components: {
@@ -362,7 +388,7 @@
    switchBar,
    WifiGateway,
    LoraGateway,
    MqttGateway
    MqttGateway,
  },
  data() {
    const checkPwd = (rule, value, callback) => {
@@ -433,7 +459,7 @@
      ],
      value: "",
      IPV4_hid: false,
      IPV6_hid: false
      IPV6_hid: false,
    };
  },
  mounted() {
@@ -441,9 +467,9 @@
    this.fetchWireList();
  },
  methods: {
    minusPrefix(){
      debugger
      this.ipv6Form.prefix
    minusPrefix() {
      debugger;
      this.ipv6Form.prefix;
    },
    switchNetCard(item) {
      if (item.active) {
@@ -512,8 +538,8 @@
      if (i == 0) {
        this.ruleForm.deviceName = "";
        this.ruleForm.port = "";
        this.getCurServer()
      }
        this.getCurServer();
      }
      if (i == 1) {
        this.inWifiDetail = false;
      }
@@ -575,16 +601,18 @@
      });
    },
    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]
     }
      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() {
@@ -597,7 +625,7 @@
.all {
  width: 100%;
}
.wire{
.wire {
  width: 456px;
  margin: 0 auto;
}
@@ -727,10 +755,11 @@
      height: 48px;
      font-size: 16px;
      line-height: 48px;
      color: #4F4F4F;
      font-weight: bold;    background: #F2F2F7;
    border-radius: 8px;
    margin-bottom: 4px;
      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,
@@ -757,7 +786,7 @@
        border: 2px solid #409eff !important;
      }
      .el-select-dropdown__item {
        color: #4F4F4F;
        color: #4f4f4f;
        height: 32px;
        font-size: 12px;
        line-height: 32px;
@@ -806,7 +835,7 @@
        width: 100%;
      }
      .el-select .el-input .el-select__caret {
        color: #4F4F4F;
        color: #4f4f4f;
        font-size: 14px;
        font-weight: 600;
      }
@@ -823,7 +852,7 @@
      }
      .switch-bar .name {
        font-size: 14px;
        color: #4F4F4F;
        color: #4f4f4f;
        font-weight: bold;
      }
      .wifi-option {
@@ -839,7 +868,7 @@
        border-radius: 8px;
        .name {
          font-size: 14px;
          color: #4F4F4F;
          color: #4f4f4f;
          font-weight: bold;
          .icon {
            color: #4e94ff;
@@ -877,7 +906,7 @@
        padding-bottom: 10px;
        margin-bottom: 20px;
        &.fold {
        height: 342px;
          height: 342px;
          .icon-fold {
            display: inline-block;
            font-size: 14px;
@@ -887,10 +916,10 @@
          }
        }
        &.hidden {
        height: 34px;
         .icon-fold {
           transform: rotate(180deg);
         }
          height: 34px;
          .icon-fold {
            transform: rotate(180deg);
          }
        }
        .el-form-item {
          margin-bottom: 0px;
@@ -900,7 +929,7 @@
          padding: 14px 20px;
          font-weight: bold;
          font-size: 14px;
          color: #4F4F4F;
          color: #4f4f4f;
        }
        .ip-input-container {
          max-width: none !important;
@@ -966,13 +995,15 @@
          font-size: 15px;
          font-weight: bold;
          font-size: 14px;
          color: #4F4F4F;
          color: #4f4f4f;
        }
        .right {
          display: flex;
          align-items: center;
          .el-switch__core {
            height: 14px;
            background-color: var(--colorCard) !important;
            border-color: var(--colorCard) !important;
          }
          .el-switch.is-checked .el-switch__core::after {
            left: 100%;
@@ -995,7 +1026,7 @@
            margin-right: 15px;
          }
          .good {
            color: #4e94ff;
            color: var(--colorCard);
            font-size: 16px;
          }
          .bad {