集群云大小在一定范围内跟随节点数量变化

hanbaoshan

2020-10-19 7eab75b9e971524990228d1910e97d9f0bb0f6d3

集群云大小在一定范围内跟随节点数量变化

 public/images/settings/cloud-line.png

 public/images/settings/easy-cloud.png

 src/pages/settings/components/CloudNode.vue

@@ -20,8 +20,9 @@
          ref="inside-nodes"
          :members="insideNodes"
          :agent="agentName"
          :sizeX="400"
          :sizeY="330"
          :sizeX="insideSizeX"
          :sizeY="insideSizeY"
          :startX="insideStartX"
          class="inside-nodes"
        ></serfDiagram>
      </div>
@@ -31,7 +32,7 @@
        ref="outer-nodes"
        :members="outsideNodes"
        :agent="agentName"
        :sizeX="230"
        :sizeX="280"
        :sizeY="370"
        :startX="60"
        class="outer-nodes"
@@ -131,6 +132,42 @@
          nodeName: "kfl20.15-127586",
          role: 'master'
        },
        {
          cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
          hardwareType: "02",
          id: "DSVAD0101201906",
          node_id: "DSVAD001209063",
          node_ip: "192.168.20.10:30190",
          nodeName: "k20.15-128437586",
          role: 'master'
        },
        {
          cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
          hardwareType: "02",
          id: "DSVAD01010906",
          node_id: "DSVAD012063",
          node_ip: "192.168.20.107:30190",
          nodeName: "kfl20.15-127586",
          role: 'master'
        },
        {
          cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
          hardwareType: "02",
          id: "DSVAD0101201906",
          node_id: "DSVAD0012063",
          node_ip: "192.168.20.10:30190",
          nodeName: "k20.15-128437586",
          role: 'master'
        },
        {
          cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
          hardwareType: "02",
          id: "DSVAD01010906",
          node_id: "DSVAD01012063",
          node_ip: "192.168.20.107:30190",
          nodeName: "kfl20.15-127586",
          role: 'master'
        },
      ]
    }
  },
@@ -149,7 +186,7 @@
    getInsideNodes () {
      //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
      //return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
      let arr = this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
      let arr = this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
      let len = arr.length;
      let lefts = [];
      let tops = [];
@@ -176,6 +213,15 @@
    insideNodes () {
      return this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
    },
    insideSizeX () {
      return 160 + 200 * 0.2 * (this.insideNodes.length) <= 400 ? 160 + 200 * 0.2 * (this.insideNodes.length) : 400;
    },
    insideSizeY () {
      return 140 + 200 * 0.2 * (this.insideNodes.length) <= 380 ? 140 + 200 * 0.2 * (this.insideNodes.length) : 380;
    },
    insideStartX () {
      return this.insideSizeX / 3
    },
    // insideNodes () {
    //   //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
    //   //return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
@@ -198,7 +244,7 @@
    // },
    outsideNodes () {
      return this.nodes.filter(item=>item.hardwareType=='03');
      //return this.nodes.filter(item => item.hardwareType == '03');
      //return this.mockData.filter(item => item.hardwareType == '03');
    }
  }
}
@@ -209,12 +255,13 @@
  height: 500px;
  display: flex;
  .inner {
    background: url('/images/settings/cloud.png') no-repeat;
    background: url('/images/settings/easy-cloud.png') no-repeat;
    background-size: 100%;
    margin-top: -80px;
    .rect {
      //background: rgba(176, 203, 253, 0.3);
      position: relative;
      margin: 100px;
      margin: 130px 100px 100px;
      .node {
        position: absolute;
        .node-icon {