系统设置v1.1

ZZJ

2021-09-27 8b31ebab2fd3bb4397f4966767a1ed7ddef3ff2c

 src/pages/settings/views/NetSettings.vue

@@ -1,23 +1,24 @@
<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)"

          @click="openRight(i)"

          ref="leftbar"

        >

          <div>

            <span class="icon iconfont">&#xe646;</span>

            {{ item.name }}

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

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

          </div>

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

          <span v-if="showStatus && i==2" class="status">已连接</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"

@@ -27,18 +28,30 @@
            label-width="150px"

          >

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

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

              <el-input

                v-model="ruleForm.deviceName"

                size="small"

                placeholder="必填"

              ></el-input>

            </el-form-item>



            <el-form-item label="端口" prop="port">

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

              <el-input

                v-model="ruleForm.port"

                placeholder="选填，外部访问的端口"

                size="small"

              ></el-input>

            </el-form-item>

          </el-form>

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

        </div>



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

          <switchBar :barName="`无线网卡`" @switchChange="wifiControl" :value="isOpenWifi"></switchBar>

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

          <switchBar

            :barName="`无线网卡`"

            @switchChange="wifiControl"

            :value="isOpenWifi"

          ></switchBar>



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

            <div class="name">

@@ -52,11 +65,12 @@
                class="icon iconfont"

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

                @click="checkWifi(item)"

              >&#xe640;</span>

                >&#xe640;</span

              >

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

@@ -76,14 +90,28 @@
            </el-form-item>



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

              <el-input v-model="wifiForm.password" placeholder="请输入密码" size="small" show-password></el-input>

              <el-input

                v-model="wifiForm.password"

                placeholder="请输入密码"

                size="small"

                show-password

              ></el-input>

            </el-form-item>

          </el-form>



          <switchBar :barName="`高级设置`" @switchChange="highClassSetting" :value="isHighClass"></switchBar>

          <switchBar

            :barName="`高级设置`"

            @switchChange="highClassSetting"

            :value="isHighClass"

          ></switchBar>

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



          <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form" label-width="150px">

          <el-form

            :model="ipv4Form"

            :rules="ipv4FormRules"

            ref="ipv4Form"

            label-width="150px"

          >

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

              <el-select v-model="value" placeholder="请选择" size="small">

                <el-option

@@ -95,26 +123,46 @@
              </el-select>

            </el-form-item>

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

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

              <ip-input

                :ip="ipv4Form.ip"

                @on-blur="ipv4Form.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="子网掩码" prop="subMask">

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

              <ip-input

                :ip="ipv4Form.subMask"

                @on-blur="ipv4Form.subMask = arguments[0]"

              ></ip-input>

            </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="ipv4Form.gateway"

                @on-blur="ipv4Form.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>

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

              <ip-input

                :ip="ipv4Form.dns2"

                @on-blur="ipv4Form.dns2 = arguments[0]"

              ></ip-input>

            </el-form-item>

          </el-form>



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



          <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv4Form" label-width="150px">

          <el-form

            :model="ipv6Form"

            :rules="ipv6FormRules"

            ref="ipv4Form"

            label-width="150px"

          >

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

              <el-select v-model="value" placeholder="请选择" size="small">

                <el-option

@@ -126,11 +174,18 @@
              </el-select>

            </el-form-item>

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

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

              <ip-input

                :ip="ipv6Form.ip"

                @on-blur="ipv6Form.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="前缀" prop="subMask">

              <div style="display: flex">

                <el-input v-model="wifiForm.password" placeholder size="small"></el-input>

                <el-input

                  v-model="wifiForm.password"

                  placeholder

                  size="small"

                ></el-input>



                <div class="ad">-</div>

                <div class="ad">+</div>

@@ -139,13 +194,22 @@
            </el-form-item>



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

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

              <ip-input

                :ip="ipv6Form.gateway"

                @on-blur="ipv6Form.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

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

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

              <ip-input

                :ip="ipv6Form.dns1"

                @on-blur="ipv6Form.dns1 = arguments[0]"

              ></ip-input>

            </el-form-item>

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

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

              <ip-input

                :ip="ipv6Form.dns2"

                @on-blur="ipv6Form.dns2 = arguments[0]"

              ></ip-input>

            </el-form-item>

          </el-form>



@@ -155,24 +219,38 @@
          </div>

        </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="wire" v-if="activePage == 2 && !inWireDetail">

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

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



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

                >&#xe6f1;</span

              >

              <span class="icon iconfont bad" v-if="!item.lower_up&&item.active">&#xe6e6;</span>

              <el-switch

                v-model="item.active"

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

                @change="switchNetCard"

                @change="switchNetCard(item)"

              ></el-switch>

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

          <el-form

            :model="wireForm"

            :rules="wireFormRules"

            ref="wireForm"

            label-width="150px"

          >

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

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

            </el-form-item>

@@ -180,17 +258,29 @@
              <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>

              <ip-input

                :ip="wireForm.ip"

                @on-blur="wireForm.ip = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="子网掩码" prop="subMask">

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

              <ip-input

                :ip="wireForm.subMask"

                @on-blur="wireForm.subMask = arguments[0]"

              ></ip-input>

            </el-form-item>



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

              <ip-input :ip="wireForm.gateway" @on-blur="wireForm.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="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>

              <ip-input

                :ip="wireForm.dns"

                @on-blur="wireForm.dns = arguments[0]"

              ></ip-input>

            </el-form-item>

          </el-form>



@@ -206,32 +296,16 @@


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

} from "@/api/system";



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

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

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

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



export default {

@@ -254,7 +328,6 @@
    };

    return {

      isHighClass: false,



      ruleForm: {

        deviceName: "",

        port: "",

@@ -275,7 +348,7 @@
        ip: "",

      },

      wireFormRules: {},

      activePage: "网络设置",

      activePage: 0,

      activeWireItem: {},

      rules: {

        deviceName: [

@@ -286,27 +359,16 @@
      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: {

    cloudNode,

    ipInput,

    switchBar,

  },

@@ -314,16 +376,36 @@
    this.getCurServer();

    this.fetchWireList();

  },

  beforeDestroy() { },

  props: ["barName"],

  methods: {

    // parseFlags(flags) {

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

    //   if (arr.length) {

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

    //   }

    //   return false;

    // },

    switchNetCard(item) {

      if (item.active) {

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

            }

          },

          (err) => {

            item.active = true;

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

          }

        );

      }

    },

    getCurServer() {

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

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

@@ -333,23 +415,11 @@
    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

              }

            });

          this.wireArr = res.data;

          this.wireArr.forEach((x) => {

            let t = x.flags.split("|")[0] == "up";

            this.$set(x, "active", t);

          });

        }

      });

    },

@@ -365,23 +435,16 @@
        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;

    openRight(i) {

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

@@ -402,11 +465,11 @@
        }

      );

    },

    wifiControl(val) { },

    wifiControl(val) {},

    checkWifi() {

      this.inWifiDetail = true;

    },

    checkWire(item) {

    openWireDetail(item) {

      this.inWireDetail = true;

      this.activeWireItem = item;

      getNetWorkCardInfo({

@@ -425,6 +488,24 @@
        }

      );

    },

    checkWire(item) {

      if (item.addrs) {

        this.openWireDetail(item);

        return;

      }

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

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

      }).then(() => {

        this.openWireDetail(item);

      });

    },

  },

  computed: {

    showStatus(){

      return this.wireArr.some((item) => item.lower_up==true)

    }

  },

};

</script>

@@ -433,6 +514,10 @@
  width: 100%;

}

.wire-detail {

  .title {

    font-size: 16px;

    margin-bottom: 10px;

  }

  .btns {

    display: flex;

    justify-content: space-between;

@@ -455,8 +540,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;

@@ -468,14 +555,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;

@@ -486,26 +573,39 @@


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

      font-size: 14px; cursor: pointer;

      padding: 0 20px;

      display: flex;

      justify-content: space-between;

      .icon {

        margin-right: 8px;

        font-size: 18px;

      }

      .text {

        font-size: 15px;

      }

    }

    .menu-item-active {

      background-color: var(--colorCard);

      color: white;

    }

    .menu-item:hover {

      background-color: var(--colorCard);

      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)

@@ -516,12 +616,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 {

@@ -532,12 +634,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;

@@ -587,15 +690,41 @@
      }

    }

    .wire {

      .title {

        line-height: 30px;

        height: 30px;

        font-size: 16px;

        margin-bottom: 10px;

      }

      .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: 15px;

        }

        .right {

          display: flex;

          align-items: center;

          .icon {

            margin-right: 15px;

          }

          .good {

            color: #3d68e1;

            font-size: 18px;

          }

          .bad {

            color: rgb(243, 105, 54);

            font-size: 18px;

          }

        }

      }

      .wifi-name {

        height: 40px;

@@ -613,6 +742,7 @@
      border-radius: 10px;

      color: #fff;

      line-height: 40px;

      cursor: pointer;

      font-size: 14px;

      margin-top: 30px;

    }