定制桌面.

zhangzengfei

2023-09-06 c0c034b3ef0fdf0fd9c802d5984dbd717db6817a

 src/pages/settings/views/clusterManagement.vue

@@ -2,7 +2,8 @@
  <div class="all">

    <!--  -->

    <div class="cluster-guanli" v-if="showCurCluster && isHasColony">

      <cloud-node :nodes="innerNodes"></cloud-node>

      <!-- <cloud-node :nodes="innerNodes"></cloud-node> -->

      <net-node :innerNodes="innerNodes"></net-node>



      <div class="cls-bar">视频分析集群管理</div>



@@ -18,22 +19,13 @@
            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

            class="icon iconfont"

            style="font-size: 20px; color: #4e94ff"

            style="font-size: 20px; color: var(--colorCard)"

            @click="updateCluster(1)"

            v-show="isFillingName"

            >&#xe62a;</span

@@ -57,29 +49,15 @@
        <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

            class="icon iconfont"

            @click="updateCluster(2)"

            style="font-size: 20px; color: #4e94ff"

            style="font-size: 20px; color: var(--colorCard)"

            v-show="isFillingIp"

            >&#xe62a;</span

          >

@@ -110,40 +88,21 @@
          <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">

@@ -152,20 +111,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-item  prop="clusterid">

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

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

@@ -174,7 +126,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"

@@ -183,27 +135,23 @@
                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>

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

@@ -220,31 +168,32 @@
  stopSearching,

  findCluster,

  updateClusterName,

  joinCluster,

} from "@/api/clusterManage";

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

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

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

  joinCluster

} from "@/api/clusterManage"

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

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("密码不能为空"));

      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 {

      innerNodes: [],

      intervalTimer: null,

@@ -254,22 +203,23 @@
      activePage: 0,

      inputIp: "",

      serverIp: "",

      pickedNodeI: null,

      members: [],

      virtualIp: "192.168.1.188",

      searchDis: false,

      ruleForm: {

        clustername: "",

        clusterpwd: "",

        virtualIp: "",

        virtualIp: ""

      },

      selfForm: {

        virtualIp: "",

        clustername: "",

        clustername: ""

      },

      joinForm: {

        clusterid: "",

        clusterip: "",

        clusterpwd: "",

        clusterpwd: ""

      },

      isSearch: false,

      showCurCluster: true,

@@ -282,170 +232,214 @@
      isCreate: true,

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

      rules: {

        clustername: [

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

        ],

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

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

        clustername: [{ required: true, message: "请输入集群名称", 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,

    ipInput,

    // cloudNode,

    NetNode,

    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

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

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

      debugger

      let _this = this;

      console.log("join", formName)

      let _this = this

      _this.joinLoading = true

      let data = {

        clusterId: _this.joinForm.clusterid,

        password: _this.joinForm.clusterpwd,

        nodeIps: [_this.joinForm.clusterip]

      }

      console.log("body:", data)

      _this

        .joinCluster(data)

        .then(() => {

          _this.joinLoading = false

          _this.findCluster()

        })

        .catch((e) => {

          _this.joinLoading = false

        })



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

      debugger

        console.log("join")

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

          };

          _this

            .joinCluster(data)

            .then(() => {

              _this.joinLoading = false;

              _this.findCluster();

            })

            .catch((e) => {

              _this.joinLoading = false;

            });

        } else {

          return false;

          onsole.log("参数错误")

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

@@ -454,166 +448,179 @@
            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;

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

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

          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 {

@@ -622,7 +629,7 @@
}

.cluster-guanli {

  margin: 0 auto;

  /* width: 760px; */

  // width: 760px;

  padding: 0 10px;

  .btns {

    margin-top: 30px !important;

@@ -641,16 +648,13 @@
      margin-top: 0;

    }

  }



  .cloud {

    width: 100%;

    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;

@@ -736,8 +740,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;

@@ -766,17 +772,38 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    border-top: 4px solid #f2f2f7;

    padding: 20px 40px;

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

    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 {

      display: none;

    }

    .create-new {

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

@@ -799,7 +826,7 @@
        .el-select-dropdown__item.hover,

        .el-select-dropdown__item:hover {

          background-color: #f2f2f7;

          color: #4e94ff;

          color: var(--colorCard);

        }

      }

    }

@@ -808,7 +835,7 @@
      left: 20px;

    }

    .el-form-item {

    margin-bottom: 10px;

      margin-bottom: 16px;

      .el-input__inner {

        background-color: #ffffff;

        border: 2px solid transparent;

@@ -820,7 +847,7 @@
        font-weight: bold;

      }

      .el-input__inner:focus {

        border: 2px solid #4e94ff;

        border: 2px solid var(--colorCard);

      }

      .el-input__inner::placeholder {

        color: #c0c4cc;