终端移植SmartAI的界面
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
ZZJ
2022-06-28 2cb264ec2b7c7dd9798d1821927104fad35bd063 
 src/pages/settings/views/clusterManagement.vue


@@ -19,8 +19,17 @@


            v-model="selfForm.clustername"



            placeholder="请输入内容"



          ></el-input>



          <span class="icon iconfont" @click="startInput(1)" v-show="!isFillingName">&#xe60c;</span>



          <span class="icon iconfont" style="font-size: 18px" @click="clearInput(1)" v-show="isFillingName"



          <span



            class="icon iconfont"



            @click="startInput(1)"



            v-show="!isFillingName"



            >&#xe60c;</span



          >



          <span



            class="icon iconfont"



            style="font-size: 18px"



            @click="clearInput(1)"



            v-show="isFillingName"



            >&#xe785;</span



          >



          <span



@@ -49,9 +58,23 @@


        <div class="input-area">



          <div class="text" v-show="!isFillingIp">{{ ruleForm.virtualIp }}</div>







          <ip-input v-if="isFillingIp" :ip="selfForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>



          <span class="icon iconfont" v-show="!isFillingIp" @click="startInput(2)">&#xe60c;</span>



          <span class="icon iconfont" style="font-size: 18px" @click="clearInput(2)" v-show="isFillingIp"



          <ip-input



            v-if="isFillingIp"



            :ip="selfForm.virtualIp"



            :on-blur="onIpBlur"



            class="ip-input-comp"



          ></ip-input>



          <span



            class="icon iconfont"



            v-show="!isFillingIp"



            @click="startInput(2)"



            >&#xe60c;</span



          >



          <span



            class="icon iconfont"



            style="font-size: 18px"



            @click="clearInput(2)"



            v-show="isFillingIp"



            >&#xe785;</span



          >



          <span



@@ -70,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' : ''"



@@ -88,21 +115,40 @@


          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">



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



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



              <el-input v-model="ruleForm.clustername" placeholder="手动输入, 如“集群A”" size="small"></el-input>



              <el-input



                v-model="ruleForm.clustername"



                placeholder="手动输入, 如“集群A”"



                size="small"



              ></el-input>



            </el-form-item>



            <el-form-item>



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



              <el-input v-model="clusterid" placeholder="不允许输入,保存后回显" disabled size="small"></el-input>



              <el-input



                v-model="clusterid"



                placeholder="不允许输入,保存后回显"



                disabled



                size="small"



              ></el-input>



            </el-form-item>



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



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



              <el-input v-model="ruleForm.clusterpwd" placeholder="请输入6位密码,或点击生成" size="small">



                <el-button type="text" slot="suffix" @click="getPSW">生成密码</el-button>



              <el-input



                v-model="ruleForm.clusterpwd"



                placeholder="请输入6位密码,或点击生成"



                size="small"



              >



                <el-button type="text" slot="suffix" @click="getPSW"



                  >生成密码</el-button



                >



              </el-input>



            </el-form-item>



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



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



              <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>



              <ip-input



                :ip="ruleForm.virtualIp"



                :on-blur="onIpBlur"



                class="ip-input-comp"



              ></ip-input>



            </el-form-item>



          </el-form>



          <div class="btns">



@@ -111,7 +157,13 @@


        </div>







        <div class="join-exist" v-if="activePage == 1">



          <el-form :model="joinForm" :rules="joinExistRules" ref="joinForm" class="join-form" v-loading="joinLoading">



          <el-form



            :model="joinForm"



            :rules="joinExistRules"



            ref="joinForm"



            class="join-form"



            v-loading="joinLoading"



          >



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



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



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



@@ -135,8 +187,19 @@


                autocomplete="new-password"



                size="small"



              >



                <el-button type="text" slot="suffix" @click="searchColony" v-show="!searchDis">搜索集群</el-button>



                <el-button type="text" slot="suffix" v-show="searchDis" @click="stopSearch">



                <el-button



                  type="text"



                  slot="suffix"



                  @click="searchColony"



                  v-show="!searchDis"



                  >搜索集群</el-button



                >



                <el-button



                  type="text"



                  slot="suffix"



                  v-show="searchDis"



                  @click="stopSearch"



                >



                  <i class="el-icon-loading"></i>停止搜索



                </el-button>



              </el-input>



@@ -144,7 +207,12 @@


          </el-form>



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



            <div



              class="clu-item"



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



              :key="index"



              @click="pickNode(index)"



            >



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



              {{ item.Address }}



            </div>



@@ -168,32 +236,32 @@


  stopSearching,



  findCluster,



  updateClusterName,



  joinCluster



} from "@/api/clusterManage"



  joinCluster,



} from "@/api/clusterManage";



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



import NetNode from "../components/NetNode"



import ipInput from "../components/IPInput"



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



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



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



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



      }



      // setTimeout(() => {



      if (value.length != 6) {



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



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



      } else {



        callback()



        callback();



      }



      // }, 1000);



    }



    };



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



      if (!value) {



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



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



      }



    }



    };



    return {



      innerNodes: [],



      intervalTimer: null,



@@ -210,16 +278,16 @@


      ruleForm: {



        clustername: "",



        clusterpwd: "",



        virtualIp: ""



        virtualIp: "",



      },



      selfForm: {



        virtualIp: "",



        clustername: ""



        clustername: "",



      },



      joinForm: {



        clusterid: "",



        clusterip: "",



        clusterpwd: ""



        clusterpwd: "",



      },



      isSearch: false,



      showCurCluster: true,



@@ -232,36 +300,38 @@


      isCreate: true,



      tabList: ["创建集群", "加入已有集群"],



      rules: {



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



        clustername: [



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



        ],



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



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



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



      },



      joinExistRules: {



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



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



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



      }



    }



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



      },



    };



  },



  components: {



    // cloudNode,



    NetNode,



    ipInput



    ipInput,



  },



  mounted() {



    this.findCluster()



    this.findCluster();



    this.intervalTimer = setInterval(() => {



      this.findCluster()



    }, 30000)



      this.findCluster();



    }, 30000);



  },



  beforeDestroy() {



    clearInterval(this.intervalTimer)



    clearInterval(this.intervalTimer);



  },



  methods: {



    pickNode(index) {



      this.pickedNodeI = index



      const node = this.members[index]



      const h = this.$createElement



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



@@ -274,168 +344,173 @@


        message: h(



          "div",



          {



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



            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} 吗？`)



            h(



              "span",



              { class: "warn-dec" },



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



            ),



          ]



        ),



        showCancelButton: true,



        showClose: true,



        confirmButtonText: "确定",



        cancelButtonText: "取消",



        customClass: "del-account-message-box"



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



      }).then(() => {



        this.joinLoading = true



        this.joinLoading = true;



        let data = {



          clusterId: node.cluster_id,



          password: this.joinForm.clusterpwd,



          nodeIps: [node.Address]



        }



          nodeIps: [node.Address],



        };



        this.joinCluster(data)



          .then(() => {



            this.joinLoading = false



            this.findCluster()



            this.joinLoading = false;



            this.findCluster();



          })



          .catch((e) => {



            this.joinLoading = false



          })



      })



            this.joinLoading = false;



          });



      });



    },



    async createCluster(json) {



      let res = await createSerfCluster(json)



      let res = await createSerfCluster(json);



      this.$notify({



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



        message: res.msg,



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



      })



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



      });



    },



    //搜索集群



    async getSearchNodes() {



      let res = await getSearchNodes()



      let res = await getSearchNodes();



      if (res && res.success) {



        let list = res.data.map((i) => {



          let obj = {}



          obj.cluster_id = i.clusterID ? i.clusterID : ""



          obj.create_time = i.create_time ? i.create_time : ""



          obj.id = i.nodeID ? i.nodeID : ""



          obj.node_id = i.nodeID ? i.nodeID : ""



          obj.Address = i.nodeAddress ? i.nodeAddress : ""



          obj.nodeName = i.nodeAddress ? i.nodeAddress : ""



          obj.role = i.role ? i.role : "pc"



          return obj



        })



          let obj = {};



          obj.cluster_id = i.clusterID ? i.clusterID : "";



          obj.create_time = i.create_time ? i.create_time : "";



          obj.id = i.nodeID ? i.nodeID : "";



          obj.node_id = i.nodeID ? i.nodeID : "";



          obj.Address = i.nodeAddress ? i.nodeAddress : "";



          obj.nodeName = i.nodeAddress ? i.nodeAddress : "";



          obj.role = i.role ? i.role : "pc";



          return obj;



        });



        list.map((i) => {



          let found = this.members.find((element) => {



            return element.node_id === i.node_id



          })



            return element.node_id === i.node_id;



          });



          if (found === undefined) {



            this.members.push(i)



            this.members.push(i);



          }



        })



        });



      }



    },



    async joinCluster(json) {



      let res = await joinCluster(json)



      let res = await joinCluster(json);



      if (res.success) {



        this.members = []



        this.members = [];



      }



      this.$notify({



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



        message: res.msg,



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



      })



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



      });



    },



    join(formName) {



      let _this = this



      let _this = this;



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



        if (valid) {



          _this.joinLoading = true



          _this.joinLoading = true;



          let data = {



            clusterId: _this.joinForm.clusterid,



            password: _this.joinForm.clusterpwd,



            nodeIps: [_this.joinForm.clusterip]



          }



          debugger



            nodeIps: [_this.joinForm.clusterip],



          };



          debugger;



          _this



            .joinCluster(data)



            .then(() => {



              _this.joinLoading = false



              _this.findCluster()



              _this.joinLoading = false;



              _this.findCluster();



            })



            .catch((e) => {



              _this.joinLoading = false



            })



              _this.joinLoading = false;



            });



        } else {



          return false



          return false;



        }



      })



      });



    },



    setSchedule() {



      this.scheduleId = window.setInterval(() => {



        this.getSearchNodes()



      }, 1000)



        this.getSearchNodes();



      }, 1000);



    },



    async searchColony() {



      this.isSearch = true



      this.$refs["joinForm"].clearValidate()



      this.$refs["joinForm"].validateField("clusterpwd")



      this.isSearch = true;



      this.$refs["joinForm"].clearValidate();



      this.$refs["joinForm"].validateField("clusterpwd");



      if (this.joinForm.clusterpwd.trim().length === 6) {



        this.members = []



        this.members = [];



        const data = {



          password: this.joinForm.clusterpwd



        }



          password: this.joinForm.clusterpwd,



        };



        this.search(data)



          .then(() => {



            this.setSchedule()



            this.setSchedule();



          })



          .catch(() => {



            this.searchDis = false



            this.loading = false



            this.isSearch = false



          })



            this.searchDis = false;



            this.loading = false;



            this.isSearch = false;



          });



      } else {



        this.searchDis = false



        this.loading = false



        this.isSearch = false



        return false



        this.searchDis = false;



        this.loading = false;



        this.isSearch = false;



        return false;



      }



    },



    async search(data) {



      let res = await search(data)



      let res = await search(data);



      if (res && res.success) {



        this.searchNum = res.data



        this.searchNum = res.data;



      }



      this.searchDis = true



      this.loading = true



      this.searchDis = true;



      this.loading = true;



      window.setTimeout(() => {



        this.stopSearch()



      }, 10 * 1000)



        this.stopSearch();



      }, 10 * 1000);



    },



    openRight(i) {



      this.activePage = i



      this.activePage = i;



    },



    async stopSearch() {



      if (!this.loading) {



        return true



        return true;



      }



      stopSearching({



        searchNum: this.searchNum



        searchNum: this.searchNum,



      })



        .then((res) => {



          this.loading = false



          this.searchDis = false



          window.clearInterval(this.scheduleId)



          this.loading = false;



          this.searchDis = false;



          window.clearInterval(this.scheduleId);



        })



        .catch((err) => {



          this.$notify({



            type: "error",



            duration: 1000,



            message: "停止搜索报错！"



          })



        })



            message: "停止搜索报错！",



          });



        });



    },



    saveCluster(formName) {



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



@@ -444,179 +519,181 @@


            clusterId: this.clusterid,



            clusterName: this.ruleForm.clustername,



            password: this.ruleForm.clusterpwd,



            virtualIp: this.ruleForm.virtualIp



          }



            virtualIp: this.ruleForm.virtualIp,



          };



          this.createCluster(data).then(() => {



            this.findCluster()



          })



            this.findCluster();



          });



        } else {



          return false



          return false;



        }



      })



      });



    },



    getPSW() {



      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"



      var uuid = []



      var chars =



        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";



      var uuid = [];







      for (let i = 0; i < 6; i++) {



        uuid[i] = chars[0 | (Math.random() * 50)]



        uuid[i] = chars[0 | (Math.random() * 50)];



      }







      this.ruleForm.clusterpwd = uuid.join("")



      this.ruleForm.clusterpwd = uuid.join("");



    },



    exitCluster() {



      const h = this.$createElement



      let res = {}



      const h = this.$createElement;



      let res = {};







      this.$msgbox({



        title: "",



        message: h(



          "div",



          {



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



            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" }, "确定退出集群吗？")



            h("span", { class: "warn-dec" }, "确定退出集群吗？"),



          ]



        ),



        showCancelButton: true,



        showClose: true,



        confirmButtonText: "确定",



        cancelButtonText: "取消",



        customClass: "del-account-message-box"



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



      }).then(



        // () => {



        //   this.showCurCluster = false;



        // }



        async () => {



          try {



            res = await leave()



            res = await leave();



            if (res && res.success) {



              clearInterval(this.intervalTimer)



              this.showCurCluster = false



              this.ruleForm.virtualIp = ""



              this.ruleForm.clustername = ""



              this.ruleForm.clusterpwd = ""



              this.clusterid = ""



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



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



            });



            this.findCluster();



          } catch (err) {



            console.log(err)



            console.log(err);



            this.$notify.error({



              title: "失败",



              message: err.msg



            })



              message: err.msg,



            });



          }



        },



        (err) => {



          clearInterval(this.intervalTimer)



          this.showCurCluster = false



          this.ruleForm.virtualIp = ""



          this.ruleForm.clustername = ""



          this.ruleForm.clusterpwd = ""



          this.clusterid = ""



          clearInterval(this.intervalTimer);



          this.showCurCluster = false;



          this.ruleForm.virtualIp = "";



          this.ruleForm.clustername = "";



          this.ruleForm.clusterpwd = "";



          this.clusterid = "";



        }



      )



      );



    },



    clearInput(typ) {



      if (typ == 1) {



        this.selfForm.clustername = ""



        this.isFillingName = false



        this.selfForm.clustername = "";



        this.isFillingName = false;



      } else {



        this.selfForm.virtualIp = ""



        this.isFillingIp = false



        this.selfForm.virtualIp = "";



        this.isFillingIp = false;



      }



    },



    async randomPwd() {



      let res = await randomPwd()



      let res = await randomPwd();



      if (res && res.success) {



        this.ruleForm.clusterpwd = res.data



        this.ruleForm.clusterpwd = res.data;



      }



    },



    startInput(typ) {



      if (typ == 1) {



        this.selfForm.clustername = this.ruleForm.clustername



        this.isFillingName = true



        this.selfForm.clustername = this.ruleForm.clustername;



        this.isFillingName = true;



      } else {



        this.selfForm.virtualIp = this.ruleForm.virtualIp



        this.isFillingIp = true



        this.selfForm.virtualIp = this.ruleForm.virtualIp;



        this.isFillingIp = true;



      }



    },



    onIpBlur(ip) {



      this.ruleForm.virtualIp = ip



      this.ruleForm.virtualIp = ip;



    },



    async updateCluster(v) {



      if (v == 1 || v == undefined) {



        this.ruleForm.clustername = this.selfForm.clustername



        this.ruleForm.clustername = this.selfForm.clustername;



      }



      if (this.ruleForm.clustername === "") {



        this.$message({



          type: "error",



          message: "集群名称不能为空"



        })



        return



          message: "集群名称不能为空",



        });



        return;



      }



      const data = {



        clusterName: this.ruleForm.clustername,



        virtualIp: this.ruleForm.virtualIp



      }



      let res = await updateClusterName(data)



        virtualIp: this.ruleForm.virtualIp,



      };



      let res = await updateClusterName(data);



      if (res.success) {



        this.findCluster()



        this.findCluster();



      }







      this.$notify({



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



        message: res.msg,



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



      })



      this.isFillingIp = false



      this.isFillingName = false



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



      });



      this.isFillingIp = false;



      this.isFillingName = false;



    },



    async findCluster() {



      let res = await findCluster()



      let res = await findCluster();



      if (res && res.success) {



        if (res.data && res.data.clusterId) {



          this.isHasColony = true



          this.clusterid = res.data.clusterId



          this.ruleForm.clustername = res.data.clusterName



          this.ruleForm.clusterpwd = "******"



          this.ruleForm.virtualIp = res.data.virtualIp



          this.isSearch = false



          this.isHasColony = true;



          this.clusterid = res.data.clusterId;



          this.ruleForm.clustername = res.data.clusterName;



          this.ruleForm.clusterpwd = "******";



          this.ruleForm.virtualIp = res.data.virtualIp;



          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



            obj.id = i.id



            obj.node_id = i.node_id



            obj.node_ip = i.node_ip



            obj.nodeName = i.node_name



            obj.Address = i.node_ip



            obj.role = i.drift_state ? i.drift_state : "pc"



            return obj



          })



            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;



            obj.id = i.id;



            obj.node_id = i.node_id;



            obj.node_ip = i.node_ip;



            obj.nodeName = i.node_name;



            obj.Address = i.node_ip;



            obj.role = i.drift_state ? i.drift_state : "pc";



            return obj;



          });



        } else {



          this.isHasColony = false



          this.isHasColony = false;



        }



      }



    },



    clearInnerNodes() {



      this.innerNodes = []



    }



  }



}



      this.innerNodes = [];



    },



  },



};



</script>



<style lang="scss">



.all {



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


}



.cluster-guanli {



  margin: 0 auto;



  width: 760px;



  // width: 760px;



  padding: 0 10px;



  .btns {



    margin-top: 30px !important;



@@ -650,7 +727,11 @@


    display: flex;



    height: 255px;



    border-radius: 8px;



    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);



    background: linear-gradient(



      180deg,



      #ffffff 0%,



      rgba(255, 255, 255, 0) 100%



    );



    .inner {



      background: url(/images/settings/easy-cloud.png) no-repeat;



      background-size: contain;



@@ -771,8 +852,11 @@


    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) .el-form-item__label-wrap > .el-form-item__label:before {



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



      > .el-form-item__label:before,



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



      .el-form-item__label-wrap



      > .el-form-item__label:before {



      display: none;



    }



    .clu-list {