all

heyujie

2021-07-21 b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1

 src/pages/settings/views/NetSettings.vue

@@ -1,23 +1,21 @@
<template>

  <div class="all">

    <div class="cluster-content">

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

    <div class="net-content">

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

        <div

          class="menu-item"

          :class="activePage == i ? 'menu-item-active' : ''"

          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>

          <span class="icon iconfont">{{ item.icon }}</span>

          <span class="text">{{ item.name }}</span>

        </div>

      </div>

      <div class="cluster-right">

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

      <div class="net-right">

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

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

          <el-form

            :model="ruleForm"

@@ -45,7 +43,7 @@
          <div class="save-btn" @click="saveServerName">保存</div>

        </div>



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

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

          <switchBar

            :barName="`无线网卡`"

            @switchChange="wifiControl"

@@ -69,10 +67,7 @@
            </div>

          </div>

        </div>

        <div

          class="wifi-detail"

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

        >

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

          <div class="btns">

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

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

@@ -221,7 +216,7 @@
          </div>

        </div>



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

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

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

          <div

            class="wire-bar"

@@ -232,7 +227,9 @@
            <div class="name">{{ "网络" + item.index }}</div>



            <div class="right">

              <span class="icon iconfont good" v-if="item.lower_up">&#xe6f1;</span>

              <span class="icon iconfont good" v-if="item.lower_up"

                >&#xe6f1;</span

              >

              <span class="icon iconfont bad" v-else>&#xe6e6;</span>

              <el-switch

                v-model="item.active"

@@ -242,10 +239,7 @@
            </div>

          </div>

        </div>

        <div

          class="wire-detail"

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

        >

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

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

          <el-form

            :model="wireForm"

@@ -298,27 +292,13 @@


<script>

import {

  createSerfCluster,

  randomPwd,

  search,

  getSearchNodes,

  stopSearching,

  findCluster,

  updateClusterName,

  joinCluster,

  leave,

  getVrrp,

  setVrrp,

  createESNode,

  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

import {

  setServerName,

  getWireList,

  setNetWorkCard,

  getNetWorkCardInfo,

  getDevInfo,downNetCard,upNetCard,

  getDevInfo,

  downNetCard,

  upNetCard,

} from "@/api/system";



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

@@ -364,7 +344,7 @@
        ip: "",

      },

      wireFormRules: {},

      activePage: "网络设置",

      activePage: 0,

      activeWireItem: {},

      rules: {

        deviceName: [

@@ -375,23 +355,13 @@
      ipv6Form: {},

      ipv4FormRules: {},

      tabList: [

        { name: "网络设置" },

        { name: "无线网络" },

        { name: "有线网络" },

        { name: "网络设置", icon: "\ue6ed" },

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

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

      ],

      ipv6FormRules: {},

      options: [

        {

          value: "选项1",

          label: "手动",

        },

        {

          value: "选项2",

          label: "自动",

        },

      ],

      options: [],

      value: "",

      netCardValue: "",

    };

  },

  components: {

@@ -402,28 +372,35 @@
    this.getCurServer();

    this.fetchWireList();

  },

  beforeDestroy() {},

  props: ["barName"],

  methods: {

    switchNetCard(item){

    switchNetCard(item) {

      if (item.active) {

        upNetCard({

          ifname   :item.name

        }).then((res) => {

          if (res.success) {

            this.$message.success(res.data)

            this.fetchWireList();

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

          (res) => {

            if (res.success) {

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

              this.fetchWireList();

            }

          },

          (err) => {

            item.active = false;

            this.$message.error(err.msg);

          }

        })

        );

      } else {

        downNetCard({ifname   :item.name}).then((res) => {

          if (res.success) {

            this.$message.success(res.data)

            this.fetchWireList();

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

          (res) => {

            if (res.success) {

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

              this.fetchWireList();

            }

          },

          (err) => {

            item.active = true;

            this.$message.error(err.msg);

          }

        })

        );

      }

      
    },

    getCurServer() {

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

@@ -450,29 +427,20 @@
      this.wireForm.subMask = "";

    },

    saveServerName() {

      debugger

      setServerName({

        server_name: this.ruleForm.deviceName,

        server_port: this.ruleForm.port,

      }).then((res) => {

      debugger

        console.log(res);

        if (res && res.success) {

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

        }

      });

    },

    openRight(item, i) {

      this.activePage = item.name;

      this.activePage = i;

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

      let data = {

@@ -497,7 +465,7 @@
    checkWifi() {

      this.inWifiDetail = true;

    },

    checkWire(item) {

    openWireDetail(item) {

      this.inWireDetail = true;

      this.activeWireItem = item;

      getNetWorkCardInfo({

@@ -516,6 +484,19 @@
        }

      );

    },

    checkWire(item) {

      if (item.addrs) {

        this.openWireDetail(item);

        return;

      }

      this.$confirm("您还未配置网络信息，是否现在配置？", "提示", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

      }).then(() => {

        this.openWireDetail(item);

      });

    },

  },

};

</script>

@@ -524,7 +505,7 @@
  width: 100%;

}

.wire-detail {

  .title{

  .title {

    font-size: 16px;

    margin-bottom: 10px;

  }

@@ -550,8 +531,10 @@
}

.net-set {

  .title {

    font-size: 16px;

    margin-bottom: 12px;

       font-size: 16px;

    margin-bottom: 10px;

    height: 30px;

    line-height: 30px;

  }

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

    height: 35px;

@@ -563,14 +546,14 @@
    color: rgba(134, 134, 134, 1);

  }

}

.cluster-content {

.net-content {

  height: 100%;

  display: flex;

  flex-direction: row;

  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  .cluster-center {

  .net-center {

    height: 100%;

    width: 280px;

    overflow: auto;

@@ -581,26 +564,38 @@


    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

      height: 50px;

      margin-bottom: 10px;

      border-radius: 8px;

      line-height: 40px;

      line-height: 50px;

      box-sizing: border-box;

      font-size: 14px;

      padding: 0 20px;

      display: flex;

      justify-content: space-between;

      .icon {

        margin-right: 12px;

        font-size: 19px;

      }

      .text {

        font-size: 16px;

      }

    }

    .menu-item-active {

      background-color: #3d68e1;

      color: white;

    }

    .menu-item:hover {

      background-color: #3d68e1;

      color: white;

    }

  }

  .cluster-right {

  .net-right {

    flex: 1;

    flex-basis: auto;

    overflow: auto;

    // background-color: rgba(240, 242, 245, 1);

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

    // .create-new .join-exist {

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

      > .el-form-item__label:before,

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

@@ -611,12 +606,14 @@
    .el-select {

      width: 100%;

    }

    .el-form-item__label{

      font-size: 15px;

    }

    .el-form-item {

      margin-bottom: 10px;

      height: 54px;

      padding: 6px 20px;

      background: #f8f8f8;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

      border-radius: 10px;

      .el-form-item__label {

@@ -627,12 +624,13 @@
    .el-form-item__content {

      line-height: 40px;

      position: relative;

      font-size: 15px;

          .el-input--small {

    font-size: 15px;

}

    }

    .ip-input-container {

      max-width: none !important;

    }

    // }

    .wifi {

      .wifi-option {

        height: 50px;

@@ -682,7 +680,7 @@
      }

    }

    .wire {

      .title{

      .title {

        line-height: 30px;

        height: 30px;

        font-size: 16px;

@@ -691,28 +689,29 @@
      .wire-bar {

        height: 50px;

        background-color: #f8f8f8;

        cursor: pointer;

        display: flex;

        justify-content: space-between;

        align-items: center;

        box-sizing: border-box;

        padding: 0 20px;

        margin-bottom: 10px;

        border-radius:10px ;

        .name{

          font-size: 16px;

        border-radius: 10px;

        .name {

          font-size: 15px;

        }

        .right{

              display: flex;

    align-items: center;

      .icon{

        margin-right: 15px;

      }

          .good{

        .right {

          display: flex;

          align-items: center;

          .icon {

            margin-right: 15px;

          }

          .good {

            color: #3d68e1;

            font-size: 18px;

          }

          .bad{

            color: orangered;

          .bad {

            color: rgb(243, 105, 54);

            font-size: 18px;

          }

        }