profitManage1.2/src/views/resource/topology/gplot.vue

<template>
  <div style="width:100%;height: calc(100vh - 115px);margin: 30px auto 0;" class="textAlignCenter">
    <div class="w100">
      <el-input v-model="resName" placeholder="请输入你需要搜索的交换机名称或服务器节点名称入内容" style="width: 80%;" @keyup.enter.native="handleQuery"></el-input>
      <el-button type="primary" class="ml10" icon="Search" @click="handleQuery(1)">搜索</el-button>
      <el-button icon="Refresh" @click="handleQuery(2)">重置</el-button>
    </div>
    <div id="gplotChart" class="w100 h100"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import {resNameBtType, listAllTopology} from "@/api/disRevenue/resource"
  export default {
    name: 'gplot',
    data() {
      return {
        level1Img: require('@/assets/images/level1.png'),
        level2Img: require('@/assets/images/level2.png'),
        level3Img: require('@/assets/images/level3.png'),
        level2ImgTrue: require('@/assets/images/level2True.png'),
        level3ImgTrue: require('@/assets/images/level3True.png'),
        switchNameList: {},
        resName: '',
      }
    },
    created() {
      this.switchList();
    },
    mounted() {
      // this.$nextTick(() => {
      //   this.getList();
      // })
    },
    methods: {
      // 获取详情
      getList(res,lightVal) {
        const gplotChartLine = echarts.init(document.getElementById('gplotChart'));
        let seriesNodes = [
            {
              id: 'cloud',
              name: '云',
              // symbolSize: 80,
              symbol: `image://${this.level1Img}`,
              symbolSize: [40, 40], // 图片宽高
              x: 250,
              y: 300
            },
        ];
        let links = [];
        if (res.params) {
          Object.keys(res.params).forEach((item,index) => {
            links.push({source: 'cloud', target: item, lineStyle: { width: 2 }});
            seriesNodes.push({
              id: item,
              name: item,
              // symbol: 'rect',
              // symbolSize: 60,
              symbol: `image://${lightVal && lightVal[item] ? this.level2ImgTrue : this.level2Img}`,
              symbolSize: [40, 40], // 图片宽高
              x: 400,
              y: 200 * (index + 1)
            });
            res.params[item].forEach((val,indexVal) => {
              if (val && val.serverName) {
                links.push({source: item, target: val.serverName, lineStyle: { width: 2 }});
                seriesNodes.push({
                  id: val.serverName,
                  name: val.serverName,
                  // symbol: 'rect',
                  // symbolSize: 60,
                  symbol: `image://${lightVal && lightVal[val.serverName] ? this.level3ImgTrue : this.level3Img}`,
                  symbolSize: [40, 40], // 图片宽高
                  x: 900,
                  y: 60 * (indexVal + 1)
                });
              }
            });
          });
        }
        let option = {
          title: {
            text: '',
            left: 'center',
          },
          tooltip: {},
          series: [
            {
              type: 'graph', // 关系图类型
              layout: 'none', // 关闭力导向布局，使用固定位置
              roam: true, // 不允许鼠标缩放和平移
              label: {
                show: false, // 显示节点标签
              },
              // 节点数据 - 增加了固定的x和y坐标
              nodes: seriesNodes,
              links: links
            },
          ],
        };
        gplotChartLine.setOption(option);
      },
      // 获取交换机下拉
      switchList(val) {
        let params = {};
        if (val && val.resourceName) {
          params = val;
        }
        listAllTopology(params).then(res => {
          let params = {};
          res && res.data.forEach(item => {
            if (params.hasOwnProperty(item.switchName)) {
              params[item.switchName].push(item);
            } else {
              params[item.switchName] = [item];
            }
          });
          if (val && val.resourceName) {
            let newParam = {};
            Object.keys(params).forEach(item => {
              newParam[item] = true;
              params[item].forEach(val => {
                newParam[val.serverName] = true;
              });
            });
            console.log('newParam==',newParam);
            this.getList(this.switchNameList,newParam);
          } else {
            this.switchNameList = {params: params};
            this.getList({params: params});
          }
        });
      },
      handleQuery(num){
        if (num === 2) {
          this.resName = '';
          this.switchList();
        } else {
          let params = {};
          if (this.resName) {
            params = {resourceName: this.resName};
          }
          this.switchList(params);
        }
      },
    }
  }
</script>

<style scoped>

</style>