控制轮询

ZZJ

2022-07-15 a3f357e8a60443b74b64c7479113c68eb35ce1f5

 src/pages/settings/views/clusterManagement.vue

@@ -93,7 +93,11 @@
    </div>

    <!-- !showCurCluster || !isHasColony -->

    <div class="cluster-content" v-if="!showCurCluster || !isHasColony">

      <div class="cluster-center" ref="left" v-if="!showCurCluster || !isHasColony">

      <div

        class="cluster-center"

        ref="left"

        v-if="!showCurCluster || !isHasColony"

      >

        <div

          class="menu-item"

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

@@ -158,15 +162,14 @@
            :rules="joinExistRules"

            ref="joinForm"

            class="join-form"

         
            v-loading="joinLoading"

          >

            <el-form-item  prop="clusterid">

            <el-form-item prop="clusterid">

              <div class="p-title">集群ID</div>

              <el-input v-model="joinForm.clusterid" size="small"></el-input>

            </el-form-item>



            <el-form-item  prop="clusterip">

            <el-form-item prop="clusterip">

              <div class="p-title">IP地址</div>

              <el-input

                v-model="joinForm.clusterip"

@@ -175,7 +178,7 @@
                autocomplete="new-password"

              ></el-input>

            </el-form-item>

            <el-form-item  prop="clusterpwd">

            <el-form-item prop="clusterpwd">

              <div class="p-title">集群密码</div>

              <el-input

                v-model="joinForm.clusterpwd"

@@ -202,9 +205,21 @@
              </el-input>

            </el-form-item>

          </el-form>

           <div class="btns">

        <div class="ok" @click="join('joinForm')">加入集群</div>

      </div>

          <div class="clu-list">

            <!-- :class="pickedNodeI == index ? 'clu-item-active' : ''" -->

            <div

              class="clu-item"

              v-for="(item, index) in members"

              :key="index"

              @click="pickNode(index)"

            >

              <i class="iconfont">&#xe727;</i>

              {{ item.Address }}

            </div>

          </div>

          <div class="btns">

            <div class="ok" @click="join('joinForm')">加入集群</div>

          </div>

        </div>

      </div>

    </div>

@@ -224,27 +239,27 @@
  joinCluster,

} from "@/api/clusterManage";

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

import NetNode from '../components/NetNode'

import NetNode from "../components/NetNode";

import ipInput from "../components/IPInput";

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



export default {

  data() {

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

      if (!value) {

      if (value == "") {

        return callback(new Error("密码不能为空"));

      }

      setTimeout(() => {

        if (value.length != 6) {

          callback(new Error("密码应为6位!"));

        } else {

          callback();

        }

      }, 1000);

      // setTimeout(() => {

      if (value.length != 6) {

        callback(new Error("密码应为6位!"));

      } else {

        callback();

      }

      // }, 1000);

    };

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

      if (!value) {

        return callback(new Error("密码不能为空"));

        return callback(new Error("ID不能为空"));

      }

    };

    return {

@@ -256,6 +271,7 @@
      activePage: 0,

      inputIp: "",

      serverIp: "",

      pickedNodeI: null,

      members: [],

      virtualIp: "192.168.1.188",

      searchDis: false,

@@ -287,20 +303,20 @@
        clustername: [

          { required: true, message: "请输入集群名称", trigger: "blur" },

        ],

        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],

        clusterpwd: [{ validator: checkPwd, required: true, trigger: "blur" }],

        virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],

      },

      joinExistRules: {

        clusterid: [{ validator: checkID, trigger: "blur" }],

        clusterip: [{ validator: isIPv4, trigger: "blur" }],

        clusterpwd: [{ validator: checkPwd, trigger: "blur" }],

        clusterpwd: [{ validator: checkPwd, required: true, trigger: "blur" }],

      },

    };

  },

  components: {

    // cloudNode,

    NetNode,

    ipInput

    ipInput,

  },

  mounted() {

    this.findCluster();

@@ -312,6 +328,57 @@
    clearInterval(this.intervalTimer);

  },

  methods: {

    pickNode(index) {

      this.pickedNodeI = index;

      const node = this.members[index];

      const h = this.$createElement;

      // Address: "192.168.20.189:30190"

      // cluster_id: "5ee1dfa8-e3fb-4d62-8692-388d7632859b"

      // create_time: ""

      // id: "DSVAD010120190703"

      // nodeName: "192.168.20.189:30190"

      // node_id: "DSVAD010120190703"

      // role: "pc"

      this.$msgbox({

        title: "",

        message: h(

          "div",

          {

            style:

              "display: flex;  flex-direction: column; justify-content: center; align-items: center;",

          },

          [

            h("span", { class: "icon iconfont warn-icon" }, "\ue71c"),

            h("span", { class: "warn-title" }, "加入集群"),

            h(

              "span",

              { class: "warn-dec" },

              `您是否要加入 ${node.Address} 吗？`

            ),

          ]

        ),

        showCancelButton: true,

        showClose: true,

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        customClass: "del-account-message-box",

      }).then(() => {

        this.joinLoading = true;

        let data = {

          clusterId: node.cluster_id,

          password: this.joinForm.clusterpwd,

          nodeIps: [node.Address],

        };

        this.joinCluster(data)

          .then(() => {

            this.joinLoading = false;

            this.findCluster();

          })

          .catch((e) => {

            this.joinLoading = false;

          });

      });

    },

    async createCluster(json) {

      let res = await createSerfCluster(json);

      this.$notify({

@@ -357,21 +424,16 @@
      });

    },

    join(formName) {

      debugger

      let _this = this;

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

      debugger

        if (valid) {

      debugger

          _this.joinLoading = true;

          let nodeIps = _this.members.map((i) => {

            return i.Address;

          });

          let data = {

            clusterId: _this.joinForm.clusterid,

            password: _this.joinForm.clusterpwd,

            nodeIps: [_this.joinForm.clusterip],

          };

          debugger;

          _this

            .joinCluster(data)

            .then(() => {

@@ -480,6 +542,8 @@
    },

    exitCluster() {

      const h = this.$createElement;

      let res = {};



      this.$msgbox({

        title: "",

        message: h(

@@ -500,20 +564,33 @@
        cancelButtonText: "取消",

        customClass: "del-account-message-box",

      }).then(

        // () => {

        //   this.showCurCluster = false;

        // }

        async () => {

          let res = await leave();

          this.$notify({

            title: res.success ? "成功" : "失败",

            message: res.msg,

            type: res.success ? "success" : "error",

          });

          if (res && res.success) {

            clearInterval(this.intervalTimer);

            this.showCurCluster = false;

            this.ruleForm.virtualIp = "";

            this.ruleForm.clustername = "";

            this.ruleForm.clusterpwd = "";

            this.clusterid = "";

          try {

            res = await leave();

            if (res && res.success) {

              clearInterval(this.intervalTimer);

              this.showCurCluster = false;

              this.ruleForm.virtualIp = "";

              this.ruleForm.clustername = "";

              this.ruleForm.clusterpwd = "";

              this.clusterid = "";

            }



            this.$notify({

              title: res.success ? "成功" : "失败",

              message: res.msg,

              type: res.success ? "success" : "error",

            });

            this.findCluster();

          } catch (err) {

            console.log(err);

            this.$notify.error({

              title: "失败",

              message: err.msg,

            });

          }

        },

        (err) => {

@@ -625,7 +702,7 @@
}

.cluster-guanli {

  margin: 0 auto;

  /* width: 760px; */

  // width: 760px;

  padding: 0 10px;

  .btns {

    margin-top: 30px !important;

@@ -644,6 +721,7 @@
      margin-top: 0;

    }

  }



  .cloud {

    width: 100%;

    display: flex;

@@ -739,8 +817,10 @@
    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    padding-top: 6px;

    border-right: 4px solid #f2f2f7;

    border-left: 4px solid #f2f2f7;

    border-top: 4px solid #f2f2f7;

    .menu-item {

      background-color: #f8f8f8;

      cursor: pointer;

@@ -769,7 +849,9 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    border-top: 4px solid #f2f2f7;

    padding: 20px 40px;

    padding-top: 16px;

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

      > .el-form-item__label:before,

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

@@ -777,7 +859,31 @@
      > .el-form-item__label:before {

      display: none;

    }



    .clu-list {

      background: #f2f2f7;

      border-radius: 8px;

      margin-top: 20px;

      .clu-item {

        border-radius: 8px;

        height: 40px;

        cursor: pointer;

        line-height: 40px;

        text-align: left;

        padding: 0 20px;

        font-size: 14px;

        .iconfont {

          margin-right: 8px;

        }

      }

      .clu-item:hover {

        background: var(--colorCard);

        color: #fff;

      }

      .clu-item-active {

        background: var(--colorCard);

        color: #fff;

      }

    }

    .el-form-item__content {

      line-height: 48px;

      display: flex;

@@ -809,7 +915,7 @@
      left: 20px;

    }

    .el-form-item {

    margin-bottom: 10px;

      margin-bottom: 16px;

      .el-input__inner {

        background-color: #ffffff;

        border: 2px solid transparent;