本机详细信息显示字段更新

zhangzengfei

2020-10-16 d40f0071502682721e9172838894080f37c9a096

 src/pages/settings/components/ClusterManagement.vue

@@ -7,7 +7,7 @@
      <el-col :span="12">
        <el-tabs v-model="activeName" id="e-alaycluster" v-if="!isHasColony">
          <el-tab-pane label="创建集群" name="1" :disabled="isHasColony">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
              <el-form-item label="集群名称" prop="clustername">
                <el-input v-model="ruleForm.clustername" placeholder="手动输入, 如“集群A”" size="small"></el-input>
              </el-form-item>
@@ -19,10 +19,9 @@
                  <el-button type="text" slot="suffix" @click="generatePassword">生成密码</el-button>
                </el-input>
              </el-form-item>

              <!-- <el-form-item label="虚拟IP" prop="virtualip">
                <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
              </el-form-item>-->
              <el-form-item label="虚拟/外部IP" prop="virtualIp">
                <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input>
              </el-form-item>
              <el-form-item style="width:500px">
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
              </el-form-item>
@@ -70,7 +69,7 @@
        </el-tabs>
        <!-- 有集群的情况 -->
        <div v-if="isHasColony" id="h-alaycluster">
          <el-form :model="ruleForm" ref="ruleForm" label-width="80px">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
            <el-form-item label="集群名称" prop="clustername">
              <el-input v-model="ruleForm.clustername" placeholder="手动输入, 如“集群A”" size="small"></el-input>
            </el-form-item>
@@ -86,9 +85,9 @@
              ></el-input>
            </el-form-item>

            <!-- <el-form-item label="虚拟IP" prop="virtualip">
              <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
            </el-form-item>-->
            <el-form-item label="虚拟IP" prop="virtualIp">
              <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input>
            </el-form-item>
            <el-form-item style="width:440px;text-align: right;">
              <el-button size="small" type="danger" @click="leave">退出集群</el-button>
              <el-button
@@ -101,32 +100,22 @@
          </el-form>
        </div>
      </el-col>
      <el-col :span="10" style="height: 100%;" v-if="members.length !== 0">
      <el-col :span="12" style="height: 100%;" v-if="members.length !== 0 && isSearch" class="node-container">
        <serfDiagram
          ref="diagram"
          :members="members"
          :agent="agentName"
          v-loading="loading"
          @selected-node="joinNode"
          class="nodes-svg"
        ></serfDiagram>
      </el-col>
    </el-row>
    <div class="ui-top-view">
      <div class="ui-top-title">漂移IP</div>
    </div>
    <el-row>
      <el-col :span="12">
        <el-form :model="vrIpForm" ref="vrIpForm" :rules="vrIpRules" style="padding:20px 40px;">
          <el-form-item label="虚拟IP" prop="virtual_ip">
            <ip-input :ip="vrIpForm.virtual_ip" :on-blur="onIpBlur"></ip-input>
            <el-switch v-model="vrIpForm.enable" style="margin-left:30px;"></el-switch>
          </el-form-item>
          <el-form-item style="width:500px">
            <el-button type="primary" size="small" @click="saveForm('vrIpForm')">保存</el-button>
          </el-form-item>
        </el-form>
      <el-col :span="12" style="height: 100%;" v-if="innerNodes.length !== 0 && !isSearch" class="node-container">
        <cloud-node :nodes="innerNodes">
        </cloud-node>
      </el-col>
    </el-row>

    <div class="ui-top-view">
      <div class="ui-top-title">存储集群管理</div>
    </div>
@@ -178,6 +167,7 @@
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>

@@ -202,14 +192,15 @@
import {
  getDevInfo
} from "@/api/system";

import cloudNode from "./CloudNode";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";

import {isIPv4} from "@/scripts/validate";
export default {
  components: {
    serfDiagram,
    ipInput
    ipInput,
    cloudNode
  },
  data() {
    const checkPwd = (rule, value, callback) => {
@@ -229,6 +220,7 @@
        }
      }, 1000);
    };
    
    return {
      activeName: "1",
      sActiveName: "s-first",
@@ -240,7 +232,7 @@
      ruleForm: {
        clustername: "",
        clusterpwd: "",
        //virtualip: ""
        virtualIp: ""
      },
      vrIpForm: {
        enable: true,
@@ -262,15 +254,15 @@
          { required: true, message: "请输入集群名称", trigger: "change" }
        ],
        clusterpwd: [{ validator: checkPwd, trigger: "change" }],
        // virtualip: [
        //   { required: true, message: "请输入虚拟IP", trigger: "change" }
        // ]
      },
      vrIpRules: {
        virtualip: [
          { required: true, message: "请输入虚拟IP", trigger: "change" }
        virtualIp: [
          { required: true, validator: isIPv4, trigger: "change" }
        ]
      },
      // vrIpRules: {
      //   virtualIp: [
      //     { required: true, message: "请输入虚拟IP", trigger: "change" }
      //   ]
      // },
      joinRules: {
        clusterpwd: [
          { required: true, message: "请输入集群密码", trigger: "change" },
@@ -280,17 +272,18 @@
      esNodes: [],
      scheduleId: "",
      isHasColony: false,
      isSearch: false,
      currentCluster: {},
      searchNum: "",
      loading: false,
      searchDis: false,
      agentName: "",
      members: []
      members: [],
      innerNodes: [],
    };
  },
  mounted() {
    this.findCluster();
    this.getVrrpInfo();
    this.getEsClusterNodes();
  },
  methods: {
@@ -308,7 +301,7 @@
            clusterId: this.clusterid,
            clusterName: this.ruleForm.clustername,
            password: this.ruleForm.clusterpwd,
            //virtualip: this.ruleForm.virtualip
            virtualIp: this.ruleForm.virtualIp
          };
          this.createCluster(json).then(() => {
            this.findCluster();
@@ -319,6 +312,7 @@
        }
      });
    },

    saveForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
@@ -338,7 +332,8 @@
        }
      });
    },
    join(formName) {
   
    join (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (Object.keys(this.currentCluster).length === 0) {
@@ -382,6 +377,7 @@
      }
    },
    async searchColony() {
      this.isSearch = true;
      this.$refs["joinForm"].validate(valid => {
        if (valid) {
          this.members = [];
@@ -399,10 +395,12 @@
            .catch(() => {
              this.searchDis = false;
              this.loading = false;
              this.isSearch = false;
            });
        } else {
          this.searchDis = false;
          this.loading = false;
          this.isSearch = false;
          return false;
        }
      });
@@ -419,6 +417,7 @@
        this.stopSearch();
      }, 10 * 1000);
    },
    //搜索集群
    async getSearchNodes() {
      let res = await getSearchNodes();
      if (res && res.success) {
@@ -482,9 +481,14 @@
          this.clusterid = res.data.clusterId;
          this.ruleForm.clustername = res.data.clusterName;
          this.ruleForm.clusterpwd = res.data.clusterpwd
          //this.ruleForm.virtualip = res.data.virtualip
          let list = res.data.nodes.map(i => {
          this.ruleForm.virtualIp = res.data.virtualIp
          //let list = res.data.nodes.map(i => {
          this.isSearch = false;
          this.innerNodes = res.data.nodes.map(i => {
            let obj = {};
            obj.device_type = i.device_type;
            obj.workType = i.device_type.substr(2,2);
            obj.hardwareType = i.device_type.substr(4,2);
            obj.cluster_id = i.cluster_id;
            obj.clusterName = res.data.clusterName;
            obj.create_time = i.create_time;
@@ -496,7 +500,9 @@
            obj.role = i.role ? i.role : "pc";
            return obj;
          });
          this.members = this.members.concat(list);
           
          //this.members = this.members.concat(list);
          console.log(this.members)
        } else {
          this.isHasColony = false;
          // this.activeName = '1'
@@ -553,11 +559,13 @@
          this.isHasColony = false;
          this.activeName = "1";
          this.members = [];
          this.innerNodes = [];
        }
      }).catch(() => { });

    },
    joinNode(event, node) {
      debugger
      this.currentCluster.cluster_id = node.cluster_id;
      if (this.activeName === "3") {
        this.manageForm.clustername = node.clusterName;
@@ -612,9 +620,7 @@

      this.ruleForm.clusterpwd = uuid.join("");
    },
    onIpBlur(ip) {
      this.vrIpForm.virtual_ip = ip;
    },

    async getEsClusterNodes() {
      let rsp = await getDevInfo();
      let hostIpAddr = "";
@@ -699,8 +705,17 @@
          message: rsp.msg
        });
      })
    },
    onIpBlur (ip) {
      //this.vrIpForm.virtual_ip = ip;
      this.ruleForm.virtualIp = ip;
      console.log(this.ruleForm.virtualIp)
    }
  }

  },

  created () { }

};
</script>
<style lang="scss">
@@ -772,4 +787,7 @@
  height: 30px;
  line-height: 30px;
}
.nodes-svg{
  background-color: rgba(127, 172, 255, 0.459);
}
</style>