bug修复

ZZJ

2022-06-23 feaf0a9778879ef211c5587a513ba4cbdabb52d0

 src/pages/settings/components/CloudNode.vue

@@ -2,114 +2,147 @@
  <div class="cloud">
    <div class="inner">
      <div class="rect">
        <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :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-name">{{item.nodeName}}</span>
        </div>
        <serfDiagram
          ref="inside-nodes"
          :members="insideNodes"
          :agent="agentName"
          :sizeX="insideSizeX"
          :sizeY="insideSizeY"
          :startX="insideStartX"
          :isShowHover="true"
          class="inside-nodes"
        ></serfDiagram>
      </div>
    </div>
    <div class="outer">
      <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}">
        <span class="node-icon">
          <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
        </span>
        <span class="node-name">{{item.nodeName}}</span>
      </div>
    <div class="outer" v-if="outsideNodes.length">
      <serfDiagram
        ref="outer-nodes"
        :members="outsideNodes"
        :agent="agentName"
        :sizeX="280"
        :sizeY="370"
        :startX="60"
        class="outer-nodes"
      ></serfDiagram>
    </div>
  </div>
</template>
<script>
import SerfDiagram from "@/components/serfDiagram";
export default {
  name:'cloudNode',
  props:{
    nodes: Array
  name: "cloudNode",
  props: {
    nodes: Array,
  },
  data(){
  components: {
    SerfDiagram,
  },
  data() {
    return {
      nodeIcons:[],
      mockData:[
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
          hardwareType: "01",
          id: "DSVAD010120190622",
          node_id: "DSVAD010120190622",
          node_ip: "192.168.20.10:30190",
          nodeName: "开发20.10-1",
          role: 'pc'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f",
          hardwareType: "02",
          id: "DSVAD010120190623",
          node_id: "DSVAD010120190623",
          node_ip: "192.168.20.10:30190",
          nodeName: "开发测试20.10-1",
          role:'master'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g",
          hardwareType: "03",
          id: "DSVAD010120190624",
          node_id: "DSVAD010120190624",
          node_ip: "192.168.20.10:30190",
          nodeName: "测试20.10-1",
          role:'pc'
        },
        {
          cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h",
          hardwareType: "03",
          id: "DSVAD010120190625",
          node_id: "DSVAD010120190625",
          node_ip: "192.168.20.10:30190",
          nodeName: "测试20.101-1",
          role:'server'
        },
      ]
    }
      agentName: "",
      nodeIcons: [],
      //insideNodes: [],
      BaseWidth: 150,
      BaseHeight: 70,
      minWidth: 0,
      minHeight: 0,
    };
  },
  computed:{
    
    insideNodes(){
      //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
      return this.mockData.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
  mounted() {
    console.log(this.nodes);
    //this.getInsideNodes();
  },
  methods: {
    getRandom(index) {
      if (index % 2 == 0) {
        return Math.random() * 20;
      } else {
        return Math.random() * 50;
      }
    },
    outsideNodes(){
      //return this.nodes.filter(item=>item.hardwareType=='03');
      return this.mockData.filter(item=>item.hardwareType=='03');
    }
  }
}
    getInsideNodes() {
      let arr = this.nodes.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);
    },
  },
  computed: {
    cloudPic() {
      return "/images/settings/cloud.png";
    },
    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;
    },
    outsideNodes() {
      return this.nodes.filter((item) => item.hardwareType == "03");
    },
  },
};
</script>
<style lang="scss">
  .cloud{
    width: 100%;
    height: 500px;
    display: flex;
    .inner{
      width: 50%;
      background: url('/images/settings/cloud.png') no-repeat;
      background-size: 100%;
      .rect{
        background:cornflowerblue;
        position: relative;
        .node{
          position: absolute;
          .node-icon{
            width:40px;
            height:40px;
          }
          .node-name{
            font-size:14px;
            color: #333;
          }
.cloud {
  width: 100%;
  display: flex;
  .inner {
    background: url("/images/settings/easy-cloud.png") no-repeat;
    background-size: 100%;
    margin-top: -55px;
    margin-left: 55px;

    .rect {
      position: relative;
      margin: 130px 100px 70px;
      .node {
        position: absolute;
        .node-icon {
          width: 40px;
          height: 40px;
        }
        .node-name {
          font-size: 14px;
          color: #333;
        }
      }
    }
    .outer{
      width:50%;
      position: relative;
  }
  .outer {
    width: 40%;
    position: relative;
    text-align: left;
    .node {
      position: absolute;
    }
  }
}
</style>