集群节点展示更新

hanbaoshan

2020-10-16 83b010226237a7a7eb8d77078eda14f3359a4bac

 src/pages/settings/components/CloudNode.vue

@@ -1,45 +1,72 @@
<template>
  <div class="cloud">
    <div class="inner">
      <!-- <div
        class="rect"
        :style="{width:`${minWidth+BaseWidth}px`,height:`${minHeight+BaseHeight}px`}"
      >-->
      <div class="rect">
        <div
        <!-- <div
          class="node"
          v-for="(item,index) in insideNodes"
          v-for="item in insideNodes"
          :key="item.id"
          :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}"
          :style="{top:item.t+'px',left:item.l+'px'}"
        >
          <span class="node-icon">
            <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
          </span>
          <span class="node-name">{{item.nodeName}}</span>
        </div>
        </div>-->
        <serfDiagram
          ref="inside-nodes"
          :members="insideNodes"
          :agent="agentName"
          :sizeX="400"
          :sizeY="330"
          class="inside-nodes"
        ></serfDiagram>
      </div>
    </div>
    <div class="outer">
      <div
      <serfDiagram
        ref="outer-nodes"
        :members="outsideNodes"
        :agent="agentName"
        :sizeX="230"
        :sizeY="370"
        :startX="60"
        class="outer-nodes"
      ></serfDiagram>
      <!-- <div
        class="node"
        v-for="(item,index) in insideNodes"
        v-for="(item,index) in outsideNodes"
        :key="item.id"
        :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}"
        :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}"
      >
        <span class="node-icon">
          <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
        </span>
        <span class="node-icon"></span>
        <span class="node-name">{{item.nodeName}}</span>
      </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import SerfDiagram from "@/components/serfDiagram";
export default {
  name: 'cloudNode',
  props: {
    nodes: Array
  },
  components: {
    SerfDiagram
  },
  data () {
    return {

      agentName: '',
      nodeIcons: [],
      //insideNodes: [],
      BaseWidth: 150,
      BaseHeight: 70,
      minWidth: 0,
      minHeight: 0,
      mockData: [
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
@@ -56,7 +83,7 @@
          id: "DSVAD010120190623",
          node_id: "DSVAD010120190623",
          node_ip: "192.168.20.10:30190",
          nodeName: "开发测试20.10-1",
          nodeName: "开发测试20.11-1",
          role: 'master'
        },
        {
@@ -65,7 +92,7 @@
          id: "DSVAD010120190624",
          node_id: "DSVAD010120190624",
          node_ip: "192.168.20.10:30190",
          nodeName: "测试20.10-1",
          nodeName: "测试20.13-1",
          role: 'pc'
        },
        {
@@ -77,17 +104,97 @@
          nodeName: "测试20.101-1",
          role: 'server'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614cf",
          hardwareType: "02",
          id: "DSVAD01012019063",
          node_id: "DSVAD01012019063",
          node_ip: "192.168.20.10:30190",
          nodeName: "开发测试20.15-1",
          role: 'master'
        },
        {
          cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
          hardwareType: "02",
          id: "DSVAD0101201906",
          node_id: "DSVAD0101209063",
          node_ip: "192.168.20.10:30190",
          nodeName: "k20.15-128437586",
          role: 'master'
        },
        {
          cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
          hardwareType: "02",
          id: "DSVAD010120906",
          node_id: "DSVAD010120963",
          node_ip: "192.168.20.107:30190",
          nodeName: "kfl20.15-127586",
          role: 'master'
        },
      ]
    }
  },
  mounted () {
    //this.getInsideNodes();
  },
  methods: {
    getRandom (index) {
      if (index % 2 == 0) {
        return Math.random() * 20
      } else {
        return Math.random() * 50
      }
    },
    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 len = arr.length;
      let lefts = [];
      let tops = [];
      this.insideNodes = arr.map((item, index) => {
        lefts.push((20 - len) * (index + 1) + this.getRandom(index));
        tops.push(30 * (index + 1));
        return {
          l: 10 + this.getRandom(index),
          t: 30 * (index + 1),
          nodeName: item.nodeName,
          id: item.id,
          workType: item.workType
        }
      });
      this.minWidth = Math.max(...lefts) - Math.min(...lefts);
      this.minHeight = Math.max(...tops) - Math.min(...tops);
      console.log('w,h', this.minWidth, this.minHeight);
    },
  },
  computed: {
    cloudPic () {
      return '/images/settings/cloud.png'
    },
    insideNodes () {
      //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
      return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
      return this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
    },
    // insideNodes () {
    //   //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 len = arr.length;
    //   let lefts = [];
    //   let tops = [];
    //   let temp = arr.map((item,index)=>{
    //     lefts.push((20-len)*(index+1));
    //     tops.push(30*(index+1));
    //     return {
    //       l: (20-len)*(index+1),
    //       t: 30*(index+1),
    //       nodeName: item.nodeName,
    //       id: item.id,
    //       workType: item.workType
    //     }
    //   });
    //   return temp;
    // },
    outsideNodes () {
      //return this.nodes.filter(item=>item.hardwareType=='03');
      return this.mockData.filter(item => item.hardwareType == '03');
@@ -103,11 +210,10 @@
  .inner {
    background: url('/images/settings/cloud.png') no-repeat;
    background-size: 100%;
    width: 50%;
    .rect {
      margin: 100px;
      background: cornflowerblue;
      //background: rgba(176, 203, 253, 0.3);
      position: relative;
      margin: 100px;
      .node {
        position: absolute;
        .node-icon {
@@ -122,7 +228,7 @@
    }
  }
  .outer {
    width: 50%;
    width: 40%;
    position: relative;
    .node {
      position: absolute;