问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/systemSettings/views/NetSettings.vue

@@ -2,21 +2,19 @@
  <div class="all">

    <div class="cluster-content">

      <div class="cluster-center" ref="left">

        <div class="menu-item" @click="openRight('net')">

          <div><span class="icon iconfont">&#xe646;</span>网络设置</div>

          <div class="status">已连接</div>

        </div>

        <div class="menu-item" @click="openRight('wifi')">

          <div><span class="icon iconfont">&#xe646;</span>无线网络</div>

          <div class="status">已连接</div>

        </div>

        <div class="menu-item" @click="openRight('wire')">

          <div><span class="icon iconfont">&#xe646;</span>有线网络</div>

        <div

          class="menu-item"

          v-for="(item, i) in tabList"

          :key="i"

          @click="openRight(item, i)"

          ref="leftbar"

        >

          <div><span class="icon iconfont">&#xe646;</span>{{ item.name }}</div>

          <div class="status">已连接</div>

        </div>

      </div>

      <div class="cluster-right">

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

        <div class="net-set" v-if="activePage == '网络设置'">

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

          <el-form

            :model="ruleForm"

@@ -24,7 +22,6 @@
            ref="joinForm"

            class="join-form"

            label-width="150px"

            v-loading="joinLoading"

          >

            <el-form-item label="设备名称" prop="deviceName">

              <el-input

@@ -41,11 +38,11 @@
                size="small"

              ></el-input>

            </el-form-item>

            <div class="save-btn" @click="saveServerName">保存</div>

          </el-form>

          <div class="save-btn" @click="saveServerName">保存</div>

        </div>



        <div class="wifi" v-if="activePage == 'wifi' && !inWifiDetail">

        <div class="wifi" v-if="activePage == '无线网络' && !inWifiDetail">

          <switchBar

            :barName="`无线网卡`"

            @switchChange="wifiControl"

@@ -62,14 +59,17 @@
              <span class="icon iconfont">&#xe676;</span>

              <span

                class="icon iconfont"

                style="margin-left: 10px"

                style="margin-left: 10px; cursor: pointer"

                @click="checkWifi(item)"

                >&#xe640;</span

              >

            </div>

          </div>

        </div>

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

        <div

          class="wifi-detail"

          v-if="activePage == '无线网络' && inWifiDetail"

        >

          <div class="btns">

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

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

@@ -84,7 +84,6 @@
            class="join-form"

            label-width="150px"

          >

            <!-- v-loading="joinLoading" -->

            <el-form-item label="名称" prop="name">

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

            </el-form-item>

@@ -105,23 +104,6 @@
            :value="isHighClass"

          ></switchBar>

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



          <!-- <el-form

            :model="ipv4Form"

            :rules="ipv4FormRules"

            ref="ipv4Form"

            class="join-form"

            label-width="150px"

          >

            <el-form-item label="密码" prop="password">

              <el-input

                v-model="wifiForm.password"

                placeholder="请输入密码"

                size="small"

                show-password

              ></el-input>

            </el-form-item>

          </el-form> -->



          <el-form

            :model="ipv4Form"

@@ -233,14 +215,13 @@
          </el-form>



          <div class="btns">

            <div class="left">取消</div>

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

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

          </div>

        </div>



        <div class="wire" v-if="activePage == 'wire' && !inWireDetail">

        <div class="wire" v-if="activePage == '有线网络' && !inWireDetail">

          <div

            
            class="wire-bar"

            v-for="(item, i) in wireArr"

            :key="i"

@@ -252,15 +233,21 @@
              <span class="icon iconfont">&#xe676;</span>



              <el-switch

                v-model="value"

                v-model="item.active"

                active-color="rgba(61, 104, 225, 1)"

                @change="switchChange"

                @change="switchNetCard"

              >

              </el-switch>

            </div>





            
          </div>

        </div>

        <div class="wire-detail" v-if="activePage == 'wire' && inWireDetail">

        <div

          class="wire-detail"

          v-if="activePage == '有线网络' && inWireDetail"

        >

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

          <el-form

            :model="wireForm"

@@ -269,7 +256,7 @@
            label-width="150px"

          >

            <el-form-item label="网络名称" prop="name">

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

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

            </el-form-item>

            <el-form-item label="网卡" prop="ifname">

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

@@ -328,9 +315,15 @@
  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

import { setServerName, getWireList, setNetWorkCard,getNetWorkCardInfo } from "@/api/system";

import {

  setServerName,

  getWireList,

  setNetWorkCard,

  getNetWorkCardInfo,

  getDevInfo,

} from "@/api/system";



import cloudNode from "../components/CloudNode";

// import cloudNode from "../components/CloudNode";

import ipInput from "@/components/subComponents/IPInput";

import { isIPv4 } from "@/scripts/validate";

import switchBar from "../components/switchBar";

@@ -366,13 +359,13 @@
      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {

        dns:"",

        subMask:"",

        gateway:"",

        ip:"",

        dns: "",

        subMask: "",

        gateway: "",

        ip: "",

      },

      wireFormRules: {},

      activePage: "net",

      activePage: "网络设置",

      activeWireItem: {},

      rules: {

        deviceName: [

@@ -382,6 +375,11 @@
      ipv4Form: {},

      ipv6Form: {},

      ipv4FormRules: {},

      tabList: [

        { name: "网络设置" },

        { name: "无线网络" },

        { name: "有线网络" },

      ],

      ipv6FormRules: {},

      options: [

        {

@@ -394,27 +392,63 @@
        },

      ],

      value: "",

      netCardValue: "",

    };

  },

  components: {

    cloudNode,

    // cloudNode,

    ipInput,

    switchBar,

  },

  mounted() {},

  mounted() {

    this.getCurServer();

    this.fetchWireList();

  },

  beforeDestroy() {},

  props: ["barName"],

  methods: {

    // parseFlags(flags) {

    //   let arr = flags.split("|");

    //   if (arr.length) {

    //     return arr[0] == "up";

    //   }

    //   return false;

    // },

    getCurServer() {

      getDevInfo().then((res) => {

        this.ruleForm.deviceName = res.data.server_name;

        this.ruleForm.port = res.data.server_port;

      });

    },

    fetchWireList() {

      getWireList().then((res) => {

        if (res && res.success) {

          console.log(res);

          this.wireArr = res.data;

          this.wireArr = res.data

            .filter((x) => x.wireless == false)

            .map((itm) => {

              let arr = itm.flags.split("|");

              let f = false;

              if (arr.length) {

                f = arr[0] == "up";

              }

              return {

                flags: itm.flags,

                index: itm.index,

                mtu:itm.mtu,

                name: itm.name,

                wireless: itm.wireless,

                active:f

              }

            });

        }

      });

    },

    cancelSaveWire() {

      this.inWireDetail = false;

      this.wireForm.ip = "";

      this.wireForm.gateway = "";

      this.wireForm.dns = "";

      this.wireForm.subMask = "";

    },

    saveServerName() {

      setServerName({

@@ -427,28 +461,36 @@
        }

      });

    },

    openRight(typ) {

      this.activePage = typ;

      if (typ == "wire") {

        this.fetchWireList();

    openRight(item, i) {

      this.activePage = item.name;

      if (i == 1) {

        this.inWifiDetail = false;

      }

      this.$refs["leftbar"].forEach((x) => {

        x.style.backgroundColor = "rgba(248, 248, 248, 1)";

        x.style.color = "#333";

      });

      this.$refs["leftbar"][i].style.backgroundColor = "rgb(61, 104, 225)";

      this.$refs["leftbar"][i].style.color = "white";

    },

    saveWire(ifname) {

      debugger

      let data ={

      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)

      };

      setNetWorkCard(data).then(

        (res) => {

          if (res && res.success) {

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

          }

        },

        (err) => {

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

        }

      },(err) => {

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

      });

      );

    },

    wifiControl(val) {},

    checkWifi() {

@@ -458,16 +500,20 @@
      this.inWireDetail = true;

      this.activeWireItem = item;

      getNetWorkCardInfo({

        ifname:item.name

      }).then((res) => {

        if (res&&res.success) {

          debugger

          this.wireForm.ip = res.data.ip

          this.wireForm.gateway = res.data.gateway

          this.wireForm.dns = res.data.dns

          this.wireForm.subMask = res.data.subMask

        ifname: item.name,

      }).then(

        (res) => {

          if (res && res.success) {

            this.wireForm.ip = res.data.ip;

            this.wireForm.gateway = res.data.gateway;

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

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

          }

        },

        (err) => {

          this.$message.error("查找不到数据: " + err.msg);

        }

      })

      );

    },

  },

};

@@ -497,7 +543,21 @@
    }

  }

}



.net-set {

  .title {

    font-size: 16px;

    margin-bottom: 12px;

  }

  .el-input--small .el-input__inner {

    height: 35px;

    line-height: 35px;

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

    border: none;

  }

  .el-input__inner::placeholder {

    color: rgba(134, 134, 134, 1);

  }

}

.cluster-content {

  height: 100%;

  display: flex;

@@ -514,7 +574,6 @@
    padding: 10px;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

@@ -549,9 +608,9 @@
    }

    .el-form-item {

      margin-bottom: 10px;

      height: 50px;

      height: 54px;

      padding: 6px 20px;

      background: #f8f8f8;

      padding: 4px 20px;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

      border-radius: 10px;

@@ -563,7 +622,7 @@
    .el-form-item__content {

      line-height: 40px;

      position: relative;

      font-size: 14px;

      font-size: 15px;

    }

    .ip-input-container {

      max-width: none !important;

@@ -620,12 +679,13 @@
    .wire {

      .wire-bar {

        height: 50px;

        background-color: aliceblue;

        background-color: #f8f8f8;

        display: flex;

        justify-content: space-between;

        align-items: center;

        box-sizing: border-box;

        padding: 0 20px;

        align-items: center;

        margin-bottom: 10px;

      }

      .wifi-name {

        height: 40px;

@@ -644,7 +704,7 @@
      color: #fff;

      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

      margin-top: 30px;

    }

  }

}