集群节点展示更新

hanbaoshan

2020-10-16 83b010226237a7a7eb8d77078eda14f3359a4bac

集群节点展示更新

 src/components/serfDiagram/index.vue

@@ -2,6 +2,7 @@
  .net
    d3-network(
       ref='net'
      :startX="startX"
      :net-nodes="nodes"
      :net-links="links"
      :options="options"
@@ -25,6 +26,9 @@
  props: {
    agent: String,
    members: Array,
    sizeX: Number,
    sizeY: Number,
    startX: Number
  },
  data() {
    return {
@@ -100,9 +104,13 @@
        nodeLabels: true,
        canvas: this.canvas,
        linkWidth: 0,
        // size: {
        //   w: 745,
        //   h: 426
        // }
        size: {
          w: 745,
          h: 426
          w: this.sizeX || 445,
          h: this.sizeY || 426
        }
      };
    }

 src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue

@@ -205,8 +205,4 @@
  }
};
</script>
<style>
  .net-svg{
    background-color: rgba(127, 255, 212, 0.198);
  }
</style>


 src/components/serfDiagram/vue-d3-network/index.vue

@@ -13,6 +13,7 @@
    svgRenderer
  },
  props: {
    startX: Number,
    netNodes: {
      type: Array
    },
@@ -52,6 +53,10 @@
      canvas: false,
      nodes: [],
      links: [],
      nodeX: [],
      nodeY: [],
      minWidth:0,
      minHeight:0,
      size: {
        w: 500,
        h: 420
@@ -273,7 +278,11 @@
          vm.$set(node, "_opacity", node._size / 30);
          vm.$set(node, "opacity", node._opacity);
        }

        // this.nodeX.push(node.x);
        // this.nodeY.push(node.y);
        // this.minWidth = Math.max(...this.nodeX) - Math.min(...this.nodeX);
        // this.minHeight = Math.max(...this.nodeY) - Math.min(...this.nodeY);
        // console.log(this.nodeX,this.nodeY,this.minWidth,this.minHeight);
        return node;
      });
    },
@@ -307,7 +316,8 @@
      if (forces.Center !== false)
        sim.force("center", d3.forceCenter(this.center.x, this.center.y));
      if (forces.X !== false) {
        sim.force("X", d3.forceX(this.center.x).strength(forces.X));
        //sim.force("X", d3.forceX(this.center.x).strength(forces.X));
        sim.force("X", d3.forceX(this.startX||160).strength(forces.X));
      }
      if (forces.Y !== false) {
        sim.force("Y", d3.forceY(this.center.y).strength(forces.Y));

 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;