bug修复

ZZJ

2022-06-23 feaf0a9778879ef211c5587a513ba4cbdabb52d0

 src/pages/settings/views/NetSettings.vue

@@ -17,7 +17,7 @@
          <!-- <span v-if="showStatus && i == 2" class="status">已连接</span> -->

        </div>

      </div>

      <div class="net-right">

      <div class="net-right" v-loading="configLoading">

        <div class="net-set" v-if="activePage == 0">

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

          <el-form

@@ -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,6 +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>

      </div>

    </div>

  </div>

@@ -349,10 +378,19 @@
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 { isIPv4 } from "@/scripts/validate";



export default {

  components: {

    ipInput,

    switchBar,

    WifiGateway,

    LoraGateway,

    MqttGateway,

  },

  data() {

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

@@ -391,7 +429,43 @@
        gateway: "",

        ip: "",

      },

      wireFormRules: {},

      originalConfig: {},

      wireFormRules: {

        ip: [

          {

            required: true,

            message: "请输入IP地址",

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" },

        ],



        gateway: [

          {

            required: true,

            message: "请输入网关",

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" },

        ],

        dns: [

          {

            required: true,

            message: "请输入dns地址",

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" },

        ],



        subMask: [

          {

            required: true,

            message: "请输入子网掩码",

            trigger: "change",

          },

          { validator: isIPv4, trigger: "change" },

        ],

      },

      activePage: 0,

      activeWireItem: {},

      rules: {

@@ -406,6 +480,9 @@
        { name: "网络设置", icon: "\ue6dd" },

        { name: "无线网络", icon: "\uea13" },

        { name: "有线网络", icon: "\ue73b" },

        { name: "WiFi网关", icon: "\ue73b" },

        { name: "LORA网关", icon: "\ue73b" },

        { name: "MQTT网关", icon: "\ue73b" },

      ],

      ipv6FormRules: {},

      options: [

@@ -420,21 +497,18 @@
      ],

      value: "",

      IPV4_hid: false,

      IPV6_hid: false

      IPV6_hid: false,

      configLoading: false,

    };

  },

  components: {

    ipInput,

    switchBar,

  },

  mounted() {

    this.getCurServer();

    this.fetchWireList();

  },

  methods: {

    minusPrefix(){

      debugger

      this.ipv6Form.prefix

    minusPrefix() {

      debugger;

      this.ipv6Form.prefix;

    },

    switchNetCard(item) {

      if (item.active) {

@@ -488,6 +562,7 @@
      this.wireForm.gateway = "";

      this.wireForm.dns = "";

      this.wireForm.subMask = "";

      this.originalConfig = this.wireForm;

    },

    saveServerName() {

      setServerName({

@@ -503,31 +578,83 @@
      if (i == 0) {

        this.ruleForm.deviceName = "";

        this.ruleForm.port = "";

        this.getCurServer()

      }      
        this.getCurServer();

      }

      if (i == 1) {

        this.inWifiDetail = false;

      }

      this.activePage = i;

    },

    saveWire(ifname) {

      let data = {

        ip: this.wireForm.ip,

        gateway: this.wireForm.gateway,

        dns: this.wireForm.dns,

        subMask: this.wireForm.subMask,

        ifname: this.activeWireItem.name,

      };

      setNetWorkCard(data).then(

        (res) => {

          if (res && res.success) {

            this.$message.success(res.data);

          }

        },

        (err) => {

          this.$message.error("保存失败：" + err.msg);

      this.$refs["wireForm"].validate((valid) => {

        if (valid) {

          let data = {

            ip: this.wireForm.ip,

            gateway: this.wireForm.gateway,

            dns: this.wireForm.dns,

            subMask: this.wireForm.subMask,

            ifname: this.activeWireItem.name,

          };



          let newUri =

            location.protocol +

            "//" +

            data.ip +

            (location.port == 80 ? "" : ":" + location.port);



          this.$confirm("确认需要修改服务器配置吗？", {

            center: true,

            cancelButtonClass: "comfirm-class-cancle",

            confirmButtonClass: "comfirm-class-sure",

          })

            .then(() => {

              this.configLoading = true;

              if (this.wireForm.ip !== this.originalConfig.ip) {

                this.configLoading = false;

                var changeIPTimer = setTimeout(() => {

                  this.$alert(

                    '<strong>您已修改了服务器ip, 请重新登录</strong><a target="_parent" href="' +

                      newUri +

                      '"> ' +

                      newUri +

                      "<a/>",

                    "提示",

                    {

                      dangerouslyUseHTMLString: true,

                      customClass: "noticeBox",

                    }

                  );

                }, 10000);

              }



              setNetWorkCard(data)

                .then((rsp) => {

                  this.configLoading = false;

                  if (rsp && rsp.success) {

                    this.$notify({

                      type: "success",

                      message: "服务器配置成功",

                    });

                  }

                })

                .catch((err) => {

                  clearTimeout(changeIPTimer);

                  this.configLoading = false;

                  this.$notify({

                    type: "error",

                    message: "保存失败",

                  });

                });

              this.$message({

                message: "操作完成,请稍后",

                type: "success",

              });

            })

            .catch((err) => {});

        } else {

          return false;

        }

      );

      });

    },

    wifiControl(val) {},

    checkWifi() {

@@ -545,6 +672,7 @@
            this.wireForm.gateway = res.data.gateway;

            this.wireForm.dns = res.data.dns;

            this.wireForm.subMask = res.data.subMask;

            this.originalConfig = JSON.parse(JSON.stringify(this.wireForm));

          }

        },

        (err) => {

@@ -561,21 +689,24 @@
        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

        customClass: "confirmBox",

      }).then(() => {

        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]

     
     
     }

      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() {

@@ -588,12 +719,12 @@
.all {

  width: 100%;

}

.wire{

  width: 460px;

.wire {

  width: 456px;

  margin: 0 auto;

}

.wire-detail {

  width: 460px;

  width: 456px;

  margin: 0 auto;

  .title {

    font-size: 16px;

@@ -631,7 +762,7 @@
  }

}

.net-set {

  max-width: 600px;

  max-width: 456px;

  margin: 0 auto;

  .title {

    font-size: 16px;

@@ -711,14 +842,18 @@
    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: #4F4F4F;

      font-weight: bold;    background: #F2F2F7;

    border-radius: 8px;

    margin-bottom: 10px;

      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,

@@ -731,7 +866,7 @@
      width: 100%;

    }

    .el-form-item {

      margin-bottom: 16px;

      margin-bottom: 14px;

    }

    .el-form-item__content {

      line-height: 48px;

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

      }

      .el-select-dropdown__item {

        color: #4F4F4F;

        color: #4f4f4f;

        height: 32px;

        font-size: 12px;

        line-height: 32px;

@@ -794,7 +929,7 @@
        width: 100%;

      }

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

        color: #4F4F4F;

        color: #4f4f4f;

        font-size: 14px;

        font-weight: 600;

      }

@@ -803,7 +938,7 @@
      max-width: none !important;

    }

    .wifi-set {

      max-width: 600px;

      max-width: 456px;

      margin: 0 auto;

      .switch-bar {

        background: #f2f2f7;

@@ -811,7 +946,7 @@
      }

      .switch-bar .name {

        font-size: 14px;

        color: #4F4F4F;

        color: #4f4f4f;

        font-weight: bold;

      }

      .wifi-option {

@@ -822,12 +957,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: #4F4F4F;

          color: #4f4f4f;

          font-weight: bold;

          .icon {

            color: #4e94ff;

@@ -865,7 +1000,7 @@
        padding-bottom: 10px;

        margin-bottom: 20px;

        &.fold {

        height: 342px;

          height: 342px;

          .icon-fold {

            display: inline-block;

            font-size: 14px;

@@ -875,10 +1010,10 @@
          }

        }

        &.hidden {

        height: 34px;

         .icon-fold {

           transform: rotate(180deg);

         }

          height: 34px;

          .icon-fold {

            transform: rotate(180deg);

          }

        }

        .el-form-item {

          margin-bottom: 0px;

@@ -888,7 +1023,7 @@
          padding: 14px 20px;

          font-weight: bold;

          font-size: 14px;

          color: #4F4F4F;

          color: #4f4f4f;

        }

        .ip-input-container {

          max-width: none !important;

@@ -948,13 +1083,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: #4F4F4F;

          color: #4f4f4f;

        }

        .right {

          display: flex;

@@ -965,6 +1100,11 @@
          .el-switch.is-checked .el-switch__core::after {

            left: 100%;

            margin-left: -12px;

          }



          .el-switch.is-checked .el-switch__core {

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

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

          }



          .el-switch__core:after {

@@ -983,7 +1123,7 @@
            margin-right: 15px;

          }

          .good {

            color: #4e94ff;

            color: var(--colorCard);

            font-size: 16px;

          }

          .bad {

@@ -1002,4 +1142,19 @@
    }

  }

}

.noticeBox p {

  text-align: center;

}



.confirmBox {

  text-align: center;



  p {

    text-align: center;

  }



  .el-message-box__status.el-icon-warning {

    margin-left: 75px;

  }

}

</style>