merge master

zhangzengfei

2021-07-07 0b737708e696c45720499759b5c31aced87fdbb6

 src/pages/systemSettings/views/NetSettings.vue

@@ -2,27 +2,22 @@
  <div class="all">

    <div class="cluster-content">

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

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

        <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>网络设置

          </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>有线网络

            <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"

@@ -30,7 +25,6 @@
            ref="joinForm"

            class="join-form"

            label-width="150px"

            v-loading="joinLoading"

          >

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

              <el-input v-model="ruleForm.deviceName" size="small" placeholder="必填"></el-input>

@@ -39,11 +33,11 @@
            <el-form-item label="端口" prop="port">

              <el-input v-model="ruleForm.port" placeholder="选填，外部访问的端口" size="small"></el-input>

            </el-form-item>

            <div class="save-btn">保存</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" :value="isOpenWifi"></switchBar>



          <div class="wifi-option" v-for="(item, i) in wifiList" :key="i">

@@ -56,13 +50,13 @@
              <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>

@@ -77,7 +71,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>

@@ -89,23 +82,6 @@


          <switchBar :barName="`高级设置`" @switchChange="highClassSetting" :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" :rules="ipv4FormRules" ref="ipv4Form" label-width="150px">

            <el-form-item label="方法">

@@ -174,34 +150,34 @@
          </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-bar" v-for="(item, i) in wireArr" :key="i" @click="checkWire(item)">

            <div class="name">{{ item.name }}</div>

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

          <div class="wire-bar" v-for="(item, i) in wireArr" :key="i" @click.self="checkWire(item)">

            <div class="name">{{ "网络" + item.index }}</div>



            <div class="right">

              <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" :rules="wireFormRules" ref="wireForm" label-width="150px">

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

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

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

            </el-form-item>

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

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

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

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

            </el-form-item>

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

              <ip-input :ip="wireForm.ip" @on-blur="wireForm.ip = arguments[0]"></ip-input>

@@ -211,15 +187,17 @@
            </el-form-item>



            <el-form-item label="网关" prop="gateway">

              <ip-input :ip="ipv4Form.gateway" @on-blur="ipv4Form.gateway = arguments[0]"></ip-input>

              <ip-input :ip="wireForm.gateway" @on-blur="wireForm.gateway = arguments[0]"></ip-input>

            </el-form-item>

            <el-form-item label="首选DNS" prop="dns">

              <ip-input :ip="ipv4Form.dns1" @on-blur="ipv4Form.dns1 = arguments[0]"></ip-input>

            </el-form-item>

            <el-form-item label="备用DNS" prop="dns">

              <ip-input :ip="ipv4Form.dns2" @on-blur="ipv4Form.dns2 = arguments[0]"></ip-input>

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

              <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>

            </el-form-item>

          </el-form>



          <div class="btns">

            <div class="cancel" @click="cancelSaveWire">取消</div>

            <div class="ok" @click="saveWire">保存</div>

          </div>

        </div>

      </div>

    </div>

@@ -243,6 +221,15 @@
  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

import {

  setServerName,

  getWireList,

  setNetWorkCard,

  getNetWorkCardInfo,

  getDevInfo,

} from "@/api/system";



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

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

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

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

@@ -276,18 +263,20 @@
        name: "",

        password: "",

      },

      wireArr: [{ name: "有线网络1" }, { name: "有线网络2" }],

      wireArr: [],

      inWifiDetail: false,

      wifiList: [{ name: "无线网络1" }, { name: "无线网络2" }],

      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {



        dns: "",

        subMask: "",

        gateway: "",

        ip: "",

      },

      wireFormRules: {



      },

      activePage: "net",

      wireFormRules: {},

      activePage: "网络设置",

      activeWireItem: {},

      rules: {

        deviceName: [

          { required: true, message: "请输入设备名称", trigger: "change" },

@@ -296,6 +285,11 @@
      ipv4Form: {},

      ipv6Form: {},

      ipv4FormRules: {},

      tabList: [

        { name: "网络设置" },

        { name: "无线网络" },

        { name: "有线网络" },

      ],

      ipv6FormRules: {},

      options: [

        {

@@ -308,13 +302,106 @@
        },

      ],

      value: "",

      netCardValue: "",

    };

  },

  components: {

    cloudNode,

    ipInput,

    switchBar,

  },

  mounted() {

    this.getCurServer();

    this.fetchWireList();

  },

  beforeDestroy() { },

  props: ["barName"],

  methods: {

    openRight(typ) {

      this.activePage = typ;

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

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

        server_name: this.ruleForm.deviceName,

        server_port: this.ruleForm.port,

      }).then((res) => {

        console.log(res);

        if (res && res.success) {

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

        }

      });

    },

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

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

        }

      );

    },

    wifiControl(val) { },

    checkWifi() {

@@ -322,6 +409,22 @@
    },

    checkWire(item) {

      this.inWireDetail = true;

      this.activeWireItem = item;

      getNetWorkCardInfo({

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

        }

      );

    },

  },

};

@@ -330,7 +433,42 @@
.all {

  width: 100%;

}



.wire-detail {

  .btns {

    display: flex;

    justify-content: space-between;

    .cancel {

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

      height: 40px;

      line-height: 40px;

      width: 48%;

      border-radius: 10px;

    }

    .ok {

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

      height: 40px;

      line-height: 40px;

      width: 48%;

      color: #fff;

      border-radius: 10px;

    }

  }

}

.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;

@@ -347,7 +485,6 @@
    padding: 10px;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

@@ -382,9 +519,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;

@@ -396,7 +533,7 @@
    .el-form-item__content {

      line-height: 40px;

      position: relative;

      font-size: 14px;

      font-size: 15px;

    }

    .ip-input-container {

      max-width: none !important;

@@ -453,12 +590,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;

@@ -477,7 +615,7 @@
      color: #fff;

      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

      margin-top: 30px;

    }

  }

}